feat: 文字检测

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

@@ -12,10 +12,12 @@ import {
   TabPane,
   Message as AMessage,
 } from '@arco-design/web-vue';
+import TextOverTips from '@/components/text-over-tips';
 
 import { FORM_RULES, enumTab, TAB_LIST, RESULT_LIST } from './constants';
 
 import icon1 from '@/assets/img/creative-generation-workshop/icon-magic.png';
+import icon2 from '@/assets/img/creative-generation-workshop/icon-line.png';
 
 export default {
   props: {
@@ -132,21 +134,24 @@ export default {
       '严禁提及 “孕妇能吃”，明确标注不适宜人群；',
       '“进口纯天然” 需有依据，避免绝对化，可改为 “选用进口原料，成分温和”；',
       '去掉 “当糖吃” 等误导性表述，强调正常食用量。',
-    ]
+    ];
     const forbidWords = [
       {
         label: '纯天然',
-        desc: '涉嫌虚假内容相关词语'
+        desc: '涉嫌虚假内容相关词语',
+        level: 1,
       },
       {
         label: '安全',
-        desc: '涉嫌绝对化承诺保证'
+        desc: '涉嫌绝对化承诺保证',
+        level: 2,
       },
       {
         label: '副作用',
-        desc: '涉嫌夸大词语'
+        desc: '涉嫌夸大词语',
+        level: 3,
       },
-    ]
+    ];
     return () => {
       return (
         <div class="h-full w-full px-24px pt-16px pb-24px content-wrap flex">
@@ -172,15 +177,30 @@ export default {
               ))}
             </div>
             <div class="mb-16px suggestion-box p-12px rounded-8px bg-#F7F8FA flex flex-col max-h-220px overflow-y-auto">
-              <img src={null} class="mb-8px w-84px h-24px"/>
-              {
-                descs.map((item, index) => (
-                  <p class="cts !color-#55585F  !lh-20px" key={index}>{`${index + 1}. ${item}`}</p>
-                ))
-              }
+              <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>
+              {descs.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">
+              <div class="left mr-32px w-56px">
+                <p class="mb-12px cts !text-12px">违禁词</p>
+                {forbidWords.map((item, index) => (
+                  <p class={`mb-12px cts level${item.level}`} key={index}>
+                    {item.label}
+                  </p>
+                ))}
+              </div>
+              <div class="right flex-1">
+                <p class="mb-12px cts !text-12px">解释</p>
+                {forbidWords.map((item, index) => (
+                  <TextOverTips context={item.desc} class="mb-12px" key={index} />
+                ))}
+              </div>
             </div>
           </div>
         </div>

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

@@ -83,8 +83,37 @@
         }
       }
     }
+    .suggestion-box {
+      .ai-text {
+        background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-family: $font-family-medium;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+      }
+    }
+    :deep(.overflow-text) {
+      color: #211f24;
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
     .forbid-word-box {
-
+      .level1 {
+        color: #6d4cfe;
+      }
+      .level2 {
+        color: #f64b31;
+      }
+      .level3 {
+        color: #ffae00;
+      }
     }
   }
 }