feat:添加Loading

src/views/PromptConfiguration/src/PromptConfiguration.vue

@@ -274,7 +274,7 @@ onMounted(() => {
      <div class="propmt-border-colorful">
         <div class="prompt-title" style="padding: 0 14px;">预览与测试</div>
         <div style="margin-top: 16px;">
-          <PreviewTesting ref="PreviewTestingref" :prompttext="prompttextvalue" :testquestion="testquestiontEmpty" :promptValue="promptValue" @handleprompt="EditPrompt"></PreviewTesting>
+          <PreviewTesting ref="PreviewTestingref" :prompttext="prompttextvalue" :testquestion="testquestiontEmpty" :promptValue="promptValue"></PreviewTesting>
         </div>
      </div>
      <div class="propmt-save"><el-button class="el-button--main" @click="SavePromptConfiguration"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button></div>

src/views/PromptConfiguration/src/components/PreviewTesting.vue

@@ -5,6 +5,7 @@ import moment from 'moment'
 
 const PromptdialogVisible = ref(false)
 const testquestionvalue = ref('')
+const previewLoading = ref(false)
 
 const props = defineProps({
   prompttext: {
@@ -35,11 +36,8 @@ watch(
   }
 )
 
-const emits = defineEmits(['handleprompt'])
-
 const handleclickprompt = () => {
   PromptdialogVisible.value = true
-  emits('handleprompt')
 }
 
 // 导出为txt
@@ -64,18 +62,22 @@ const unformattedJson = ref({})
 
 const PromptAITest = (val:any) => {
   if(testquestion.value == false) {
+    unformattedJson.value = {}
+    previewLoading.value = true
     $api.PromptAITest({
       test_ai_method: val,
       test_question: testquestionvalue.value,
       prompt: prompttext.value
     }).then((res) => {
       if (res.code === 200) {
+        previewLoading.value = false
         unformattedJson.value = res.data
       }
     })
   }
 }
 
+
 </script>
 
 <template>
@@ -129,7 +131,7 @@ const PromptAITest = (val:any) => {
       <div class="test_title">
         测试结果
       </div>
-      <div class="test_result">
+      <div class="test_result"  v-vloading="previewLoading">
         <div v-if="Object.keys(unformattedJson).length == 0" class="test_result_text">暂无数据</div>
         <CodeBlock v-else language="json" :raw-code="JSON.stringify(unformattedJson)">
         </CodeBlock>
@@ -212,6 +214,7 @@ const PromptAITest = (val:any) => {
   color: rgba(240, 241, 243, 0.30);
   border:1px solid var(--color-border);
   border-radius: 6px;
+  position: relative;
 }
 .test_result_text {
   color: rgba(240, 241, 243, 0.30);
@@ -261,4 +264,11 @@ const PromptAITest = (val:any) => {
   padding: 0;
   height: 48px;
 }
+:deep(.v-loading-spinner) {
+  transform: translateY(30%);
+}
+:deep(.circular) {
+  width: 30px;
+  height: 30px;
+}
 </style>