perf: ui走查问题调整

src/utils/platform.ts

@@ -1,8 +1,8 @@
 import icon1 from '@/assets/img/media-account/icon-jl.png';
 import icon2 from '@/assets/img/media-account/icon-jg.png';
 import icon3 from '@/assets/img/media-account/icon-bili.png';
-import icon4 from '@/assets/img/media-account/icon-dy.png';
+import icon4 from '@/assets/img/platform/icon-dy.png';
-import icon5 from '@/assets/img/media-account/icon-xhs.png';
+import icon5 from '@/assets/img/platform/icon-xhs.png';
 
 // 投放账户
 export enum ENUM_PUT_ACCOUNT_PLATFORM  {

src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue

@@ -45,7 +45,7 @@ export default {
     const textAreaRef = ref(null);
 
     const aiReview = computed(() => props.dataSource.ai_review);
-    const violationItems = computed(() => props.dataSource?.ai_review?.violation_items ?? []);
+    const inspectionItems = computed(() => props.dataSource?.ai_review?.inspection_items ?? []);
 
     const closeReplay = () => {
       isReplay.value = false;
@@ -212,7 +212,7 @@ export default {
 
     const renderAiSuggest = () => {
       if (isEmpty(aiReview.value)) return null;
-      const hasViolationItems = violationItems.value.length > 0
+      const hasInspectionItems = inspectionItems.value.length > 0
 
       return (
         <>
@@ -220,7 +220,7 @@ export default {
             <div class="flex items-center justify-between mb-16px">
               <p class="cts bold !color-#000 !text-16px">审核结果</p>
               {
-                hasViolationItems && (
+                hasInspectionItems && (
                   <Button
                     type="text"
                     class="!color-#6D4CFE hover:!color-#8A70FE"
@@ -243,20 +243,23 @@ export default {
             </div>
           </div>
           <div class={`collapse-box mb-16px overflow-hidden ${isCollapse.value ? 'h-0 ' : 'h-auto'}`}>
-            {hasViolationItems && (
+            {hasInspectionItems && (
-              <div class="result-box p-16px rounded-8px mt-16px">
+              inspectionItems.value.map(( (parentItem, parentIndex) => (
-                <p class="cts bold !color-#000 !text-16px mb-16px">敏感词检测</p>
+                <div class="result-box p-16px rounded-8px mt-16px" key={parentIndex}>
+                <p class="cts bold !color-#000 !text-16px mb-16px">{parentItem.name}</p>
                 <div class="grid grid-cols-3 gap-x-24px gap-y-8px">
-                  {violationItems.value.map((item, index) => (
+                  {parentItem.items.map((item, index) => (
                     <div class="audit-item" key={index}>
                       <div class="flex items-center h-20px">
-                        {_iconMap.get(item.risk_level)?.icon}
+                        {_iconMap.get(item.level)?.icon}
-                        <TextOverTips context={item.word} class="cts ml-4px !color-#000" />
+                        <TextOverTips context={item.name} class="cts ml-4px !color-#000" />
                       </div>
                     </div>
                   ))}
                 </div>
               </div>
+              )))
+              
             )}
           </div>
         </>

src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss

@@ -49,7 +49,7 @@
     .result-item {
       .s1 {
         color: var(--Brand-6, #6d4cfe);
-        font-family: $font-family-manrope-regular;
+        font-family: $font-family-manrope-medium;
         font-size: 24px;
         font-style: normal;
         font-weight: 700;

src/views/creative-generation-workshop/manuscript-writer/check-list/constants.ts

@@ -217,8 +217,8 @@ export const INITIAL_QUERY = {
   sort_order: undefined,
 };
 
-import icon1 from '@/assets/img/media-account/icon-dy.png';
+import icon1 from '@/assets/img/platform/icon-dy.png';
-import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon2 from '@/assets/img/platform/icon-xhs.png';
 
 export const PLATFORMS = [
   {

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

@@ -5,11 +5,16 @@ import TextOverTips from '@/components/text-over-tips';
 import icon1 from '@/assets/img/error-img.png';
 
 export default {
+  emits: ['cardClick'],
   setup(props, { emit, expose }) {
     const visible = ref(false);
     const dataSource = ref([]);
     const selectCardInfo = ref({});
 
+    const handleCardClick = (item) => {
+      emit('cardClick', item);
+      onClose();
+    };
     const open = (data, _selectCardInfo) => {
       dataSource.value = data;
       selectCardInfo.value = _selectCardInfo;
@@ -32,22 +37,24 @@ export default {
         class="check-list-drawer-xt"
         footer={false}
         header={false}
+        onCancel={onClose}
       >
         <div class="flex justify-between items-center h-56px px-24px">
           <div class="flex items-center">
             <div class="w-3px h-16px rounded-2px bg-#6D4CFE mr-8px"></div>
             <span class="mr-8px cts bold">批量审核列表</span>
-            <span class="mr-8px cts !lh-22px">{`共${dataSource.value.length}个`}</span>
+            <span class="mr-8px cts !lh-22px !text-14px">{`共${dataSource.value.length}个`}</span>
           </div>
           <icon-menu-unfold size={16} class="color-##55585F cursor-pointer hover:color-#6D4CFE" onClick={onClose} />
         </div>
         <div class="flex-1 overflow-y-auto px-24px">
           {dataSource.value.map((item) => (
             <div
+              key={item.id}
+              onClick={() => handleCardClick(item)}
               class={`card-item flex rounded-8px bg-#F7F8FA p-8px ${
                 selectCardInfo.value.id === item.id ? 'active' : ''
               }`}
-              key={item.id}
             >
               <Image
                 width={48}
@@ -61,8 +68,10 @@ export default {
                 }}
               />
               <div class="flex-1 overflow-hidden flex flex-col items-start">
-                <TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
+                <TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px !text-14px`} />
-                <p class="cts">{`合规程度：${90}%`}</p>
+                <p class="cts !text-14px">{`合规程度：${
+                  item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'
+                }`}</p>
               </div>
             </div>
           ))}

src/views/creative-generation-workshop/manuscript-writer/check/components/check-list-drawer/style.scss

@@ -1,30 +1,44 @@
 .check-list-drawer-xt {
-  .arco-drawer-body {
+  .arco-drawer-mask {
-    overflow: hidden;
+    background-color: transparent;
-    display: flex;
+  }
-    flex-direction: column;
+  .arco-drawer {
-    padding: 0 0 24px;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
-    .cts {
+    .arco-drawer-body {
-      color: var(--Text-1, #939499);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      padding: 0 0 24px;
+      .cts {
+        color: var(--Text-1, #939499);
 
-      font-family: $font-family-regular;
+        font-family: $font-family-regular;
-      font-size: 16px;
+        font-size: 16px;
-      font-style: normal;
+        font-style: normal;
-      font-weight: 400;
+        font-weight: 400;
-      line-height: 24px;
+        line-height: 24px;
-      &.bold {
+        &.bold {
-        color: var(--Text-1, #211f24);
+          color: var(--Text-1, #211f24);
-        font-family: $font-family-medium;
+          font-family: $font-family-medium;
+        }
       }
-    }
+      .card-item {
-    .card-item {
+        cursor: pointer;
-      border: 1px solid transparent;
+        border: 1px solid transparent;
-      &:not(:last-child) {
+        transition: all;
-        margin-bottom: 12px;
+        &:hover {
-      }
+          background-color: #e6e6e8;
-      &.active {
+        }
-        border-color: #6d4cfe;
+        &:not(:last-child) {
-        background-color: #f0edff;
+          margin-bottom: 12px;
+        }
+        &.active {
+          border-color: #6d4cfe;
+          background-color: #f0edff;
+          :deep(.overflow-text) {
+            font-family: $font-family-medium !important;
+          }
+        }
       }
     }
   }

src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/constants.ts

@@ -41,7 +41,7 @@ export const RESULT_LIST = [
   },
   {
     label: '检验项',
-    value: 'inspection_items',
+    value: 'inspection_count',
     color: '#211F24',
   },
   {

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

@@ -193,7 +193,7 @@ export default {
             再次审核
           </Button>
           {isTextTab.value ? (
-            <Button size="medium" type="outline" class="w-123px" onClick={onAiReplace} disabled={isDisabled.value}>
+            <Button size="medium" type="outline" class="w-123px check-btn" onClick={onAiReplace} disabled={isDisabled.value}>
               {aiReplaceLoading.value ? (
                 <>
                   <IconLoading size={14} />

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

@@ -10,11 +10,16 @@
       font-family: $font-family-medium;
     }
   }
-  .check-text {
+  .check-btn {
-    background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
+    .check-text {
-    background-clip: text;
+      background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
-    -webkit-background-clip: text;
+      background-clip: text;
-    -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    &:hover {
+      opacity: 0.8;
+    }
   }
   .left-box {
     :deep(.arco-tabs) {
@@ -138,7 +143,7 @@
     height: fit-content;
     max-height: 100%;
     .s1 {
-      font-family: $font-family-manrope-regular;
+      font-family: $font-family-manrope-medium;
       font-size: 24px;
       font-style: normal;
       font-weight: 700;

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

@@ -64,7 +64,7 @@ export default {
                     />
                     <div class="flex-1 overflow-hidden flex flex-col items-start">
                       <TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
-                      <p class="cts">{`合规程度：${90}%`}</p>
+                      <p class="cts">{`合规程度：${item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'}`}</p>
                     </div>
                   </SwiperSlide>
                 ))}

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

@@ -62,7 +62,6 @@ export default {
       selectCardInfo.value = cloneDeep(item);
       selectedImageInfo.value = cloneDeep(files?.[0] ?? {});
 
-      console.log({ ai_review });
       if (isEmpty(ai_review)) {
         handleStartCheck();
       }
@@ -210,7 +209,7 @@ export default {
               class="check-list-icon"
               onClick={() => checkListDrawerRef.value.open(dataSource.value, selectCardInfo.value)}
             >
-              <icon-menu-fold size={16} class="color-#55585F mr-4px hover:color-#6D4CFE" />
+              <icon-menu-fold size={16} class="color-#55585F mr-4px icon" />
               <span class="cts !color-#211F24">审核列表</span>
             </div>
           )}
@@ -244,7 +243,7 @@ export default {
 
         <CancelCheckModal ref={cancelCheckModalRef} onSelectCard={onChangeCard} />
         <CheckSuccessModal ref={checkSuccessModalRef} />
-        <CheckListDrawer ref={checkListDrawerRef} />
+        <CheckListDrawer ref={checkListDrawerRef} onCardClick={onCardClick}/>
       </>
     );
   },

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

@@ -27,6 +27,12 @@ $footer-height: 68px;
     position: absolute;
     right: 0;
     top: calc($navbar-height + 8px);
+    &:hover {
+      .icon,
+      .cts {
+        color: #6d4cfe !important;
+      }
+    }
   }
 }
 .footer-row {

src/views/creative-generation-workshop/manuscript/check-list/constants.ts

@@ -227,8 +227,8 @@ export const INITIAL_QUERY = {
   sort_order: undefined,
 };
 
-import icon1 from '@/assets/img/media-account/icon-dy.png';
+import icon1 from '@/assets/img/platform/icon-dy.png';
-import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon2 from '@/assets/img/platform/icon-xhs.png';
 
 export const PLATFORMS = [
   {

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

@@ -5,11 +5,16 @@ import TextOverTips from '@/components/text-over-tips';
 import icon1 from '@/assets/img/error-img.png';
 
 export default {
+  emits: ['cardClick'],
   setup(props, { emit, expose }) {
     const visible = ref(false);
     const dataSource = ref([]);
     const selectCardInfo = ref({});
 
+    const handleCardClick = (item) => {
+      emit('cardClick', item);
+      onClose();
+    };
     const open = (data, _selectCardInfo) => {
       dataSource.value = data;
       selectCardInfo.value = _selectCardInfo;
@@ -32,22 +37,24 @@ export default {
         class="check-list-drawer-xt"
         footer={false}
         header={false}
+        onCancel={onClose}
       >
         <div class="flex justify-between items-center h-56px px-24px">
           <div class="flex items-center">
             <div class="w-3px h-16px rounded-2px bg-#6D4CFE mr-8px"></div>
             <span class="mr-8px cts bold">批量审核列表</span>
-            <span class="mr-8px cts !lh-22px">{`共${dataSource.value.length}个`}</span>
+            <span class="mr-8px cts !lh-22px !text-14px">{`共${dataSource.value.length}个`}</span>
           </div>
           <icon-menu-unfold size={16} class="color-##55585F cursor-pointer hover:color-#6D4CFE" onClick={onClose} />
         </div>
         <div class="flex-1 overflow-y-auto px-24px">
           {dataSource.value.map((item) => (
             <div
+              onClick={() => handleCardClick(item)}
+              key={item.id}
               class={`card-item flex rounded-8px bg-#F7F8FA p-8px ${
                 selectCardInfo.value.id === item.id ? 'active' : ''
               }`}
-              key={item.id}
             >
               <Image
                 width={48}
@@ -61,8 +68,10 @@ export default {
                 }}
               />
               <div class="flex-1 overflow-hidden flex flex-col items-start">
-                <TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
+                <TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px !text-14px`} />
-                <p class="cts">{`合规程度：${90}%`}</p>
+                <p class="cts !text-14px">{`合规程度：${
+                  item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'
+                }`}</p>
               </div>
             </div>
           ))}

src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/style.scss

@@ -1,30 +1,44 @@
 .check-list-drawer-xt {
-  .arco-drawer-body {
+  .arco-drawer-mask {
-    overflow: hidden;
+    background-color: transparent;
-    display: flex;
+  }
-    flex-direction: column;
+  .arco-drawer {
-    padding: 0 0 24px;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
-    .cts {
+    .arco-drawer-body {
-      color: var(--Text-1, #939499);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      padding: 0 0 24px;
+      .cts {
+        color: var(--Text-1, #939499);
 
-      font-family: $font-family-regular;
+        font-family: $font-family-regular;
-      font-size: 16px;
+        font-size: 16px;
-      font-style: normal;
+        font-style: normal;
-      font-weight: 400;
+        font-weight: 400;
-      line-height: 24px;
+        line-height: 24px;
-      &.bold {
+        &.bold {
-        color: var(--Text-1, #211f24);
+          color: var(--Text-1, #211f24);
-        font-family: $font-family-medium;
+          font-family: $font-family-medium;
+        }
       }
-    }
+      .card-item {
-    .card-item {
+        cursor: pointer;
-      border: 1px solid transparent;
+        border: 1px solid transparent;
-      &:not(:last-child) {
+        transition: all;
-        margin-bottom: 12px;
+        &:hover {
-      }
+          background-color: #e6e6e8;
-      &.active {
+        }
-        border-color: #6d4cfe;
+        &:not(:last-child) {
-        background-color: #f0edff;
+          margin-bottom: 12px;
+        }
+        &.active {
+          border-color: #6d4cfe;
+          background-color: #f0edff;
+          :deep(.overflow-text) {
+            font-family: $font-family-medium !important;
+          }
+        }
       }
     }
   }

src/views/creative-generation-workshop/manuscript/check/components/content-card/constants.ts

@@ -41,7 +41,7 @@ export const RESULT_LIST = [
   },
   {
     label: '检验项',
-    value: 'inspection_items',
+    value: 'inspection_count',
     color: '#211F24',
   },
   {

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

@@ -194,7 +194,7 @@ export default {
             再次审核
           </Button>
           {isTextTab.value ? (
-            <Button size="medium" type="outline" class="w-123px" onClick={onAiReplace} disabled={isDisabled.value}>
+            <Button size="medium" type="outline" class="w-123px check-btn" onClick={onAiReplace} disabled={isDisabled.value}>
               {aiReplaceLoading.value ? (
                 <>
                   <IconLoading size={14} />

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

@@ -10,12 +10,18 @@
       font-family: $font-family-medium;
     }
   }
-  .check-text {
+  .check-btn {
-    background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
+    .check-text {
-    background-clip: text;
+      background: linear-gradient(84deg, #266cff 4.57%, #a15af0 84.93%);
-    -webkit-background-clip: text;
+      background-clip: text;
-    -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    &:hover {
+      opacity: 0.8;
+    }
   }
+
   .left-box {
     :deep(.arco-tabs) {
       .arco-tabs-nav {
@@ -130,15 +136,17 @@
     }
   }
   .right-box {
-    border: 1px solid #E6E6E8;
+    border: 1px solid #e6e6e8;
     flex: 1;
-    border-radius: 8px; padding: 16px; display: flex;
+    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-family: $font-family-manrope-medium;
       font-size: 24px;
       font-style: normal;
       font-weight: 700;

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

@@ -64,7 +64,7 @@ export default {
                     />
                     <div class="flex-1 overflow-hidden flex flex-col items-start">
                       <TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
-                      <p class="cts">{`合规程度：${90}%`}</p>
+                      <p class="cts">{`合规程度：${item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'}`}</p>
                     </div>
                   </SwiperSlide>
                 ))}

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

@@ -210,7 +210,7 @@ export default {
               class="check-list-icon"
               onClick={() => checkListDrawerRef.value.open(dataSource.value, selectCardInfo.value)}
             >
-              <icon-menu-fold size={16} class="color-#55585F mr-4px hover:color-#6D4CFE" />
+              <icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
               <span class="cts !color-#211F24">审核列表</span>
             </div>
           )}
@@ -244,7 +244,7 @@ export default {
 
         <CancelCheckModal ref={cancelCheckModalRef} onSelectCard={onChangeCard} />
         <CheckSuccessModal ref={checkSuccessModalRef} />
-        <CheckListDrawer ref={checkListDrawerRef} />
+        <CheckListDrawer ref={checkListDrawerRef} onCardClick={onCardClick} />
       </>
     );
   },

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

@@ -27,6 +27,12 @@ $footer-height: 68px;
     position: absolute;
     right: 0;
     top: calc($navbar-height + 8px);
+    &:hover {
+      .icon,
+      .cts {
+        color: #6d4cfe !important;
+      }
+    }
   }
 }
 .footer-row {

src/views/property-marketing/media-account/account-detail/components/account-info/index.vue

@@ -143,8 +143,8 @@ import icon1 from '@/assets/img/media-account/icon5.png';
 import icon2 from '@/assets/img/media-account/icon-warn.png';
 import icon3 from '@/assets/img/media-account/icon-warn-1.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
-import icon5 from '@/assets/img/media-account/icon-dy.png';
+import icon5 from '@/assets/img/platform/icon-dy.png';
-import icon6 from '@/assets/img/media-account/icon-xhs.png';
+import icon6 from '@/assets/img/platform/icon-xhs.png';
 
 const route = useRoute();
 const id = route.params.id;

src/views/property-marketing/media-account/account-manage/components/account-table/index.vue

@@ -145,8 +145,8 @@ import ReauthorizeAccountModal from '../reauthorize-account-modal';
 import AuthorizedAccountModal from '../authorized-account-modal';
 import FooterBtn from './footer-btn';
 
-import icon1 from '@/assets/img/media-account/icon-dy.png';
+import icon1 from '@/assets/img/platform/icon-dy.png';
-import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon2 from '@/assets/img/platform/icon-xhs.png';
 import icon3 from '@/assets/img/media-account/icon-warn.png';
 
 const props = defineProps({

src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue

@@ -41,8 +41,8 @@ import {
 
 import icon1 from '@/assets/img/media-account/icon-download.png';
 import icon2 from '@/assets/img/media-account/icon-delete.png';
-import icon3 from '@/assets/img/media-account/icon-dy.png';
+import icon3 from '@/assets/img/platform/icon-dy.png';
-import icon4 from '@/assets/img/media-account/icon-xhs.png';
+import icon4 from '@/assets/img/platform/icon-xhs.png';
 // import icon5 from '@/assets/img/media-account/icon-warn-1.png';
 // import icon6 from '@/assets/img/media-account/icon-success.png';