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 }) {
@@ -58,7 +62,7 @@ export default {
     const isDisabled = computed(() => props.checkLoading || aiReplaceLoading.value);
 
     const onAiReplace = () => {
-       if (aiReplaceLoading.value) return;
+      if (aiReplaceLoading.value) return;
 
       aiReplaceLoading.value = true;
       setTimeout(() => {
@@ -324,49 +328,10 @@ export default {
         );
       }
     };
-
-    const renderRightBox = () => {
-      if (props.checkLoading) {
+    const renderCheckSuccessBox = () => {
+      if (!aiReview.value?.violation_items?.length) {
         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">
-              <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}>
-                    <span class="s1" style={{ color: item.color }}>{`${aiReview.value?.[item.value] ?? '-'}${
-                      item.suffix || ''
-                    }`}</span>
-                    <span class="cts mt-4px !lh-20px !text-12px !color-#737478">{item.label}</span>
-                  </div>
-                ))}
-              </div>
-              <div class="mb-16px suggestion-box p-12px rounded-8px bg-#F7F8FA flex flex-col">
-                <div class="mb-24px relative w-fit">
-                  <span class="ai-text">AI 审核建议</span>
-                  <img src={icon2} class="w-80px h-10.8px absolute bottom-1px left-1px" />
-                </div>
-                <div class="flex flex-col items-center h-138px justify-center">
-                  <img src={icon3} width={72} height={72} class="mb-12px" />
-                  <span class="cts !color-#25C883">
-                    {isTextTab.value ? '恭喜，您的文案中没有检测出违禁词' : '恭喜，您的图片中没有检测出违禁内容'}
-                  </span>
-                </div>
-              </div>
-            </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>
             <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}>
@@ -378,35 +343,88 @@ export default {
               ))}
             </div>
             <div class="mb-16px suggestion-box p-12px rounded-8px bg-#F7F8FA flex flex-col">
-              <div class=" mb-8px relative w-fit">
+              <div class="mb-24px relative w-fit">
                 <span class="ai-text">AI 审核建议</span>
                 <img src={icon2} class="w-80px h-10.8px absolute bottom-1px left-1px" />
               </div>
-              {aiReview.value?.suggestion?.map((item, index) => (
-                <p class="cts !color-#55585F !text-12px  !lh-20px" key={index}>{`${index + 1}. ${item}`}</p>
+              <div class="flex flex-col items-center h-138px justify-center">
+                <img src={icon3} width={72} height={72} class="mb-12px" />
+                <span class="cts !color-#25C883">
+                  {isTextTab.value ? '恭喜，您的文案中没有检测出违禁词' : '恭喜，您的图片中没有检测出违禁内容'}
+                </span>
+              </div>
+            </div>
+          </div>
+        );
+      }
+      return (
+        <>
+          <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}>
+                <span class="s1" style={{ color: item.color }}>{`${aiReview.value?.[item.value] ?? '-'}${
+                  item.suffix || ''
+                }`}</span>
+                <span class="cts mt-4px !lh-20px !text-12px !color-#737478">{item.label}</span>
+              </div>
+            ))}
+          </div>
+          <div class="mb-16px suggestion-box p-12px rounded-8px bg-#F7F8FA flex flex-col">
+            <div class=" mb-8px relative w-fit">
+              <span class="ai-text">AI 审核建议</span>
+              <img src={icon2} class="w-80px h-10.8px absolute bottom-1px left-1px" />
+            </div>
+            {aiReview.value?.suggestion?.map((item, index) => (
+              <p class="cts !color-#55585F !text-12px  !lh-20px" key={index}>{`${index + 1}. ${item}`}</p>
+            ))}
+          </div>
+
+          <div class="forbid-word-box flex-1 flex">
+            <div class="left mr-32px w-56px">
+              <p class="mb-12px cts !text-12px">违禁词</p>
+              {aiReview.value?.violation_items?.map((item, index) => (
+                <TextOverTips
+                  context={item.word}
+                  class="mb-12px cts"
+                  style={{ color: LEVEL_MAP.get(item.risk_level)?.color }}
+                  key={index}
+                />
               ))}
             </div>
-
-            <div class="forbid-word-box flex-1 flex">
-              <div class="left mr-32px w-56px">
-                <p class="mb-12px cts !text-12px">违禁词</p>
-                {aiReview.value?.violation_items?.map((item, index) => (
-                  <TextOverTips
-                    context={item.word}
-                    class="mb-12px cts"
-                    style={{ color: LEVEL_MAP.get(item.risk_level)?.color }}
-                    key={index}
-                  />
-                ))}
-              </div>
-              <div class="right flex-1 overflow-hidden">
-                <p class="mb-12px cts !text-12px">解释</p>
-                {aiReview.value?.violation_items?.map((item, index) => (
-                  <TextOverTips context={item.reason} class="mb-12px" key={index} />
-                ))}
-              </div>
+            <div class="right flex-1 overflow-hidden">
+              <p class="mb-12px cts !text-12px">解释</p>
+              {aiReview.value?.violation_items?.map((item, index) => (
+                <TextOverTips context={item.reason} class="mb-12px" key={index} />
+              ))}
             </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,25 +82,30 @@ export default {
     };
 
     const getWorkAudits = async () => {
-      const { code, data } = await getWorkAuditsBatchDetailWriter(writerCode.value, { ids: workIds.value });
-      if (code === 200) {
-        const _data = (data ?? []).map((item) => ({
-          ...item,
-          platform: item.platform === 0 ? 1 : item.platform,
-        }));
+      try {
+        getDataLoading.value = true;
+        const { code, data } = await getWorkAuditsBatchDetailWriter(writerCode.value, { ids: workIds.value });
+        if (code === 200) {
+          const _data = (data ?? []).map((item) => ({
+            ...item,
+            platform: item.platform === 0 ? 1 : item.platform,
+          }));
 
-        dataSource.value = _data;
-        remoteDataSource.value = cloneDeep(_data);
+          dataSource.value = _data;
+          remoteDataSource.value = cloneDeep(_data);
 
-        const _firstCard = _data?.[0] ?? {};
-        const { id, ai_review } = _firstCard;
+          const _firstCard = _data?.[0] ?? {};
+          const { id, ai_review } = _firstCard;
 
-        selectCardInfo.value = cloneDeep(_firstCard);
-        selectedImageInfo.value = cloneDeep(_firstCard.files?.[0] ?? {});
+          selectCardInfo.value = cloneDeep(_firstCard);
+          selectedImageInfo.value = cloneDeep(_firstCard.files?.[0] ?? {});
 
-        if (isEmpty(ai_review)) {
-          handleStartCheck();
+          if (isEmpty(ai_review)) {
+            handleStartCheck();
+          }
         }
+      } finally {
+        getDataLoading.value = false;
       }
     };
 
@@ -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,48 +329,10 @@ export default {
       }
     };
 
-    const renderRightBox = () => {
-      if (props.checkLoading) {
+    const renderCheckSuccessBox = () => {
+      if (!aiReview.value?.violation_items?.length) {
         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">
-              <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}>
-                    <span class="s1" style={{ color: item.color }}>{`${aiReview.value?.[item.value] ?? '-'}${
-                      item.suffix || ''
-                    }`}</span>
-                    <span class="cts mt-4px !lh-20px !text-12px !color-#737478">{item.label}</span>
-                  </div>
-                ))}
-              </div>
-              <div class="mb-16px suggestion-box p-12px rounded-8px bg-#F7F8FA flex flex-col">
-                <div class="mb-24px relative w-fit">
-                  <span class="ai-text">AI 审核建议</span>
-                  <img src={icon2} class="w-80px h-10.8px absolute bottom-1px left-1px" />
-                </div>
-                <div class="flex flex-col items-center h-138px justify-center">
-                  <img src={icon3} width={72} height={72} class="mb-12px" />
-                  <span class="cts !color-#25C883">
-                    {isTextTab.value ? '恭喜，您的文案中没有检测出违禁词' : '恭喜，您的图片中没有检测出违禁内容'}
-                  </span>
-                </div>
-              </div>
-            </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>
             <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}>
@@ -378,35 +344,88 @@ export default {
               ))}
             </div>
             <div class="mb-16px suggestion-box p-12px rounded-8px bg-#F7F8FA flex flex-col">
-              <div class=" mb-8px relative w-fit">
+              <div class="mb-24px relative w-fit">
                 <span class="ai-text">AI 审核建议</span>
                 <img src={icon2} class="w-80px h-10.8px absolute bottom-1px left-1px" />
               </div>
-              {aiReview.value?.suggestion?.map((item, index) => (
-                <p class="cts !color-#55585F !text-12px  !lh-20px" key={index}>{`${index + 1}. ${item}`}</p>
+              <div class="flex flex-col items-center h-138px justify-center">
+                <img src={icon3} width={72} height={72} class="mb-12px" />
+                <span class="cts !color-#25C883">
+                  {isTextTab.value ? '恭喜，您的文案中没有检测出违禁词' : '恭喜，您的图片中没有检测出违禁内容'}
+                </span>
+              </div>
+            </div>
+          </div>
+        );
+      }
+      return (
+        <>
+          <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}>
+                <span class="s1" style={{ color: item.color }}>{`${aiReview.value?.[item.value] ?? '-'}${
+                  item.suffix || ''
+                }`}</span>
+                <span class="cts mt-4px !lh-20px !text-12px !color-#737478">{item.label}</span>
+              </div>
+            ))}
+          </div>
+          <div class="mb-16px suggestion-box p-12px rounded-8px bg-#F7F8FA flex flex-col">
+            <div class=" mb-8px relative w-fit">
+              <span class="ai-text">AI 审核建议</span>
+              <img src={icon2} class="w-80px h-10.8px absolute bottom-1px left-1px" />
+            </div>
+            {aiReview.value?.suggestion?.map((item, index) => (
+              <p class="cts !color-#55585F !text-12px  !lh-20px" key={index}>{`${index + 1}. ${item}`}</p>
+            ))}
+          </div>
+
+          <div class="forbid-word-box flex-1 flex">
+            <div class="left mr-32px w-56px">
+              <p class="mb-12px cts !text-12px">违禁词</p>
+              {aiReview.value?.violation_items?.map((item, index) => (
+                <TextOverTips
+                  context={item.word}
+                  class="mb-12px cts"
+                  style={{ color: LEVEL_MAP.get(item.risk_level)?.color }}
+                  key={index}
+                />
               ))}
             </div>
-
-            <div class="forbid-word-box flex-1 flex">
-              <div class="left mr-32px w-56px">
-                <p class="mb-12px cts !text-12px">违禁词</p>
-                {aiReview.value?.violation_items?.map((item, index) => (
-                  <TextOverTips
-                    context={item.word}
-                    class="mb-12px cts"
-                    style={{ color: LEVEL_MAP.get(item.risk_level)?.color }}
-                    key={index}
-                  />
-                ))}
-              </div>
-              <div class="right flex-1 overflow-hidden">
-                <p class="mb-12px cts !text-12px">解释</p>
-                {aiReview.value?.violation_items?.map((item, index) => (
-                  <TextOverTips context={item.reason} class="mb-12px" key={index} />
-                ))}
-              </div>
+            <div class="right flex-1 overflow-hidden">
+              <p class="mb-12px cts !text-12px">解释</p>
+              {aiReview.value?.violation_items?.map((item, index) => (
+                <TextOverTips context={item.reason} class="mb-12px" key={index} />
+              ))}
             </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,25 +82,30 @@ export default {
     };
 
     const getWorkAudits = async () => {
-      const { code, data } = await getWorkAuditsBatchDetail({ ids: workIds.value });
-      if (code === 200) {
-        const _data = (data ?? []).map((item) => ({
-          ...item,
-          platform: item.platform === 0 ? 1 : item.platform,
-        }));
+      try {
+        getDataLoading.value = true;
+        const { code, data } = await getWorkAuditsBatchDetail({ ids: workIds.value });
+        if (code === 200) {
+          const _data = (data ?? []).map((item) => ({
+            ...item,
+            platform: item.platform === 0 ? 1 : item.platform,
+          }));
 
-        dataSource.value = _data;
-        remoteDataSource.value = cloneDeep(_data);
+          dataSource.value = _data;
+          remoteDataSource.value = cloneDeep(_data);
 
-        const _firstCard = _data?.[0] ?? {};
-        const { id, ai_review } = _firstCard;
+          const _firstCard = _data?.[0] ?? {};
+          const { id, ai_review } = _firstCard;
 
-        selectCardInfo.value = cloneDeep(_firstCard);
-        selectedImageInfo.value = cloneDeep(_firstCard.files?.[0] ?? {});
+          selectCardInfo.value = cloneDeep(_firstCard);
+          selectedImageInfo.value = cloneDeep(_firstCard.files?.[0] ?? {});
 
-        if (isEmpty(ai_review)) {
-          handleStartCheck();
+          if (isEmpty(ai_review)) {
+            handleStartCheck();
+          }
         }
+      } finally {
+        getDataLoading.value = false;
       }
     };
 
@@ -226,6 +231,7 @@ export default {
                 selectedImageInfo={selectedImageInfo.value}
                 onSelectImage={onSelectImage}
                 checkLoading={checkLoading.value}
+                getDataLoading={getDataLoading.value}
                 onAgainCheck={onAgainCheck}
                 onStartCheck={handleStartCheck}
               />