perf: 文本检测交互修改

src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/index.vue

@@ -44,6 +44,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    getDataLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'filesChange', 'selectImage', 'againCheck', 'startCheck'],
   setup(props, { emit, expose }) {
@@ -324,20 +328,10 @@ export default {
         );
       }
     };
-
+    const renderCheckSuccessBox = () => {
-    const renderRightBox = () => {
-      if (props.checkLoading) {
-        return (
-          <div class="right-box flex-1 h-210px rounded-8px border-1px border-#E6E6E8 border-solid p-16px flex flex-col overflow-y-auto">
-            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
-            <Spin loading={true} tip={`${isTextTab.value ? '文本' : '图片'}检测中`} size={72} class="" />
-          </div>
-        );
-      } else {
       if (!aiReview.value?.violation_items?.length) {
         return (
-            <div class="right-box flex-1 h-372px rounded-8px border-1px border-#E6E6E8 border-solid p-16px flex flex-col overflow-y-auto">
+          <div>
-              <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
             <div class="flex items-center mb-16px">
               {RESULT_LIST.map((item, index) => (
                 <div class="flex flex-col justify-center items-center flex-1 result-item" key={index}>
@@ -363,10 +357,8 @@ export default {
           </div>
         );
       }
-
       return (
-          <div class="right-box flex-1 rounded-8px border-1px border-#E6E6E8 border-solid p-16px flex flex-col overflow-y-auto">
+        <>
-            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
           <div class="flex items-center mb-16px">
             {RESULT_LIST.map((item, index) => (
               <div class="flex flex-col justify-center items-center flex-1 result-item" key={index}>
@@ -406,6 +398,32 @@ export default {
               ))}
             </div>
           </div>
+        </>
+      );
+    };
+
+    const renderRightBox = () => {
+      if (props.checkLoading) {
+        return (
+          <div class="right-box h-210px">
+            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
+            <Spin
+              loading={true}
+              tip={`${isTextTab.value ? '文本' : '图片'}检测中`}
+              size={72}
+              class="h-298px !flex flex-col justify-center items-center"
+            />
+          </div>
+        );
+      } else {
+        return (
+          <div class="right-box">
+            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
+            {props.getDataLoading ? (
+              <Spin loading={true} size={72} class="h-298px !flex justify-center items-center" />
+            ) : (
+              renderCheckSuccessBox()
+            )}
           </div>
         );
       }

src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/style.scss

@@ -130,6 +130,13 @@
     }
   }
   .right-box {
+    border: 1px solid #E6E6E8;
+    flex: 1;
+    border-radius: 8px; padding: 16px; display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: fit-content;
+    max-height: 100%;
     .s1 {
       font-family: $font-family-manrope-regular;
       font-size: 24px;

src/views/creative-generation-workshop/manuscript-writer/check/index.vue

@@ -30,6 +30,7 @@ export default {
     const submitLoading = ref(false);
     const contentCardRef = ref(null);
     const checkListDrawerRef = ref(null);
+    const getDataLoading = ref(false);
 
     const selectCardInfo = ref({});
     const selectedImageInfo = ref(null);
@@ -53,6 +54,7 @@ export default {
       contentCardRef.value.reset();
       isSaved.value = false;
       submitLoading.value = false;
+      getDataLoading.value = false;
       checkLoading.value = false;
       ticket.value = '';
 
@@ -80,6 +82,8 @@ export default {
     };
 
     const getWorkAudits = async () => {
+      try {
+        getDataLoading.value = true;
         const { code, data } = await getWorkAuditsBatchDetailWriter(writerCode.value, { ids: workIds.value });
         if (code === 200) {
           const _data = (data ?? []).map((item) => ({
@@ -100,6 +104,9 @@ export default {
             handleStartCheck();
           }
         }
+      } finally {
+        getDataLoading.value = false;
+      }
     };
 
     const isSelectCardModified = () => {
@@ -224,6 +231,7 @@ export default {
                 selectedImageInfo={selectedImageInfo.value}
                 onSelectImage={onSelectImage}
                 checkLoading={checkLoading.value}
+                getDataLoading={getDataLoading.value}
                 onAgainCheck={onAgainCheck}
                 onStartCheck={handleStartCheck}
               />

src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue

@@ -45,6 +45,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    getDataLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'filesChange', 'selectImage', 'againCheck', 'startCheck'],
   setup(props, { emit, expose }) {
@@ -325,19 +329,10 @@ export default {
       }
     };
 
-    const renderRightBox = () => {
+    const renderCheckSuccessBox = () => {
-      if (props.checkLoading) {
-        return (
-          <div class="right-box flex-1 h-210px rounded-8px border-1px border-#E6E6E8 border-solid p-16px flex flex-col overflow-y-auto">
-            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
-            <Spin loading={true} tip={`${isTextTab.value ? '文本' : '图片'}检测中`} size={72} class="" />
-          </div>
-        );
-      } else {
       if (!aiReview.value?.violation_items?.length) {
         return (
-            <div class="right-box flex-1 h-372px rounded-8px border-1px border-#E6E6E8 border-solid p-16px flex flex-col overflow-y-auto">
+          <div>
-              <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
             <div class="flex items-center mb-16px">
               {RESULT_LIST.map((item, index) => (
                 <div class="flex flex-col justify-center items-center flex-1 result-item" key={index}>
@@ -363,10 +358,8 @@ export default {
           </div>
         );
       }
-
       return (
-          <div class="right-box flex-1 rounded-8px border-1px border-#E6E6E8 border-solid p-16px flex flex-col overflow-y-auto">
+        <>
-            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
           <div class="flex items-center mb-16px">
             {RESULT_LIST.map((item, index) => (
               <div class="flex flex-col justify-center items-center flex-1 result-item" key={index}>
@@ -406,6 +399,32 @@ export default {
               ))}
             </div>
           </div>
+        </>
+      );
+    };
+
+    const renderRightBox = () => {
+      if (props.checkLoading) {
+        return (
+          <div class="right-box">
+            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
+            <Spin
+              loading={true}
+              tip={`${isTextTab.value ? '文本' : '图片'}检测中`}
+              size={72}
+              class="h-298px !flex flex-col justify-center items-center"
+            />
+          </div>
+        );
+      } else {
+        return (
+          <div class="right-box">
+            <p class="cts bold !text-16px !lh-24px !color-#211F24 mb-16px">审核结果</p>
+            {props.getDataLoading ? (
+              <Spin loading={true} size={72} class="h-298px !flex justify-center items-center" />
+            ) : (
+              renderCheckSuccessBox()
+            )}
           </div>
         );
       }

src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss

@@ -130,6 +130,13 @@
     }
   }
   .right-box {
+    border: 1px solid #E6E6E8;
+    flex: 1;
+    border-radius: 8px; padding: 16px; display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: fit-content;
+    max-height: 100%;
     .s1 {
       font-family: $font-family-manrope-regular;
       font-size: 24px;

src/views/creative-generation-workshop/manuscript/check/index.vue

@@ -19,7 +19,6 @@ import {
   getWorkAuditsAiReviewResult,
 } from '@/api/all/generationWorkshop.ts';
 
-
 export default {
   setup(props, { emit, expose }) {
     const router = useRouter();
@@ -34,6 +33,7 @@ export default {
     const submitLoading = ref(false);
     const contentCardRef = ref(null);
     const checkListDrawerRef = ref(null);
+    const getDataLoading = ref(false);
 
     const selectCardInfo = ref({});
     const selectedImageInfo = ref(null);
@@ -55,6 +55,7 @@ export default {
       contentCardRef.value.reset();
       isSaved.value = false;
       submitLoading.value = false;
+      getDataLoading.value = false;
       checkLoading.value = false;
       ticket.value = '';
 
@@ -62,7 +63,6 @@ export default {
       selectCardInfo.value = cloneDeep(item);
       selectedImageInfo.value = cloneDeep(files?.[0] ?? {});
 
-      console.log({ ai_review });
       if (isEmpty(ai_review)) {
         handleStartCheck();
       }
@@ -82,6 +82,8 @@ export default {
     };
 
     const getWorkAudits = async () => {
+      try {
+        getDataLoading.value = true;
         const { code, data } = await getWorkAuditsBatchDetail({ ids: workIds.value });
         if (code === 200) {
           const _data = (data ?? []).map((item) => ({
@@ -102,6 +104,9 @@ export default {
             handleStartCheck();
           }
         }
+      } finally {
+        getDataLoading.value = false;
+      }
     };
 
     const isSelectCardModified = () => {
@@ -226,6 +231,7 @@ export default {
                 selectedImageInfo={selectedImageInfo.value}
                 onSelectImage={onSelectImage}
                 checkLoading={checkLoading.value}
+                getDataLoading={getDataLoading.value}
                 onAgainCheck={onAgainCheck}
                 onStartCheck={handleStartCheck}
               />