perf: ui走查问题调整

src/components/hover-image-preview/index.vue

@@ -12,7 +12,7 @@
     :disabled="!props.src"
   >
     <template #content>
-      <div class="preview-container" :style="containerStyle">
+      <div class="preview-container">
         <img :src="props.src" alt="preview" class="preview-image" />
       </div>
     </template>
@@ -22,9 +22,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+// import { computed, onMounted, ref, watch } from 'vue';
-import type { ImageOrientation } from '@/utils/tools';
+// import type { ImageOrientation } from '@/utils/tools';
-import { getImageOrientationByUrl } from '@/utils/tools';
+// import { getImageOrientationByUrl } from '@/utils/tools';
 
 interface Props {
   src: string;
@@ -39,30 +39,30 @@ const props = withDefaults(defineProps<Props>(), {
   leaveDelay: 200,
 });
 
-const orientation = ref<ImageOrientation>('landscape');
+// const orientation = ref<ImageOrientation>('landscape');
 
-const resolveOrientation = async () => {
+// const resolveOrientation = async () => {
-  if (!props.src) {
+//   if (!props.src) {
-    orientation.value = 'landscape';
+//     orientation.value = 'landscape';
-    return;
+//     return;
-  }
+//   }
-  const o = await getImageOrientationByUrl(props.src);
+//   const o = await getImageOrientationByUrl(props.src);
-  orientation.value = o === 'square' ? 'landscape' : o;
+//   orientation.value = o === 'square' ? 'landscape' : o;
-};
+// };
 
-onMounted(resolveOrientation);
+// onMounted(resolveOrientation);
-watch(() => props.src, resolveOrientation);
+// watch(() => props.src, resolveOrientation);
 
-const containerStyle = computed(() => {
+// const containerStyle = computed(() => {
-  // 竖图: 306x400；横图: 400x251
+//   // 竖图: 306x400；横图: 400x251
-  const isPortrait = orientation.value === 'portrait';
+//   const isPortrait = orientation.value === 'portrait';
-  const width = isPortrait ? 306 : 400;
+//   const width = isPortrait ? 306 : 400;
-  const height = isPortrait ? 400 : 251;
+//   const height = isPortrait ? 400 : 251;
-  return {
+//   return {
-    width: `${width}px`,
+//     width: `${width}px`,
-    height: `${height}px`,
+//     height: `${height}px`,
-  } as Record<string, string>;
+//   } as Record<string, string>;
-});
+// });
 </script>
 
 <style lang="scss">
@@ -85,9 +85,9 @@ const containerStyle = computed(() => {
   }
 
   .preview-image {
-    width: 100%;
+    max-width: 368px;
-    height: 100%;
+    max-height: 368px;
-    object-fit: contain;
+    object-fit: scale-down;
   }
 }
 </style>

src/styles/components/pagination.scss

@@ -3,6 +3,7 @@
     .arco-pagination-item {
       border-radius: 4px;
       border: 1px solid var(--BG-300, #e6e6e8);
+      font-family: $font-family-manrope-regular;
       &-ellipsis {
         border: none;
       }
@@ -26,9 +27,9 @@
       border: 1px solid var(--BG-300, #e6e6e8);
     }
     &-prepend {
-      color: var(--Text-2, #3c4043);
+      color: var(--Text-2, #55585f);
       text-align: right;
-      font-family: $font-family-medium;
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -38,4 +39,12 @@
       background-color: transparent;
     }
   }
+  .arco-pagination-total {
+    color: var(--Text-2, #55585f);
+    font-family: $font-family-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
 }

src/styles/components/table.scss

@@ -1,6 +1,6 @@
 .arco-table {
   @mixin table-cell-text {
-    color: var(--Text-1, #3C4043);
+    color: var(--Text-1, #211F24);
     font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;

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

@@ -285,7 +285,7 @@ export default {
         <div class="ai-suggest-box relative py-24px flex flex-col">
           {!isEmpty(aiReview.value) && (
             <div class="relative w-fit ml-24px mb-16px">
-              <span class="ai-text">AI 智能审核</span>
+              <span class="ai-text relative z-2">AI 智能审核</span>
               <img src={icon1} class="w-80px h-10.8px absolute bottom-1px left--9px" />
             </div>
           )}

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

@@ -102,7 +102,7 @@ export default {
       } else {
         return (
           <div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
-            <img src={coverImageUrl.value} class="w-100% h-100% object-cover absolute z-0 top-0 left-0" />
+            <img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
           </div>
         );
       }

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

@@ -68,10 +68,10 @@
       aspect-ratio: 3 / 4;
     }
     .main-img-box {
-      width: 347px;
+      width: 320px;
       height: auto;
+      max-height: 472px;
       background: #fff;
-      aspect-ratio: 3/4;
     }
     .desc-img-wrap {
       display: grid;

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

@@ -1,11 +1,25 @@
 <template>
   <div class="highlight-textarea-container">
-    <a-textarea ref="textareaWrapRef" v-model="inputValue" placeholder="请输入作品描述" :disabled="disabled" show-word-limit
+    <a-textarea
-      :max-length="1000" size="large" class="textarea-input h-full w-full" @input="handleInput"
+      ref="textareaWrapRef"
-      @focus="() => (focus = true)" @blur="() => (focus = false)" />
+      v-model="inputValue"
+      placeholder="请输入作品描述"
+      :disabled="disabled"
+      show-word-limit
+      :max-length="1000"
+      size="large"
+      class="textarea-input h-full w-full"
+      @input="handleInput"
+      @focus="() => (focus = true)"
+      @blur="() => (focus = false)"
+    />
 
-    <div class="textarea-highlight" :class="{ focus: focus }" :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
+    <div
-      v-html="highlightedHtml" />
+      class="textarea-highlight"
+      :class="{ focus: focus }"
+      :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
+      v-html="highlightedHtml"
+    />
   </div>
 </template>
 
@@ -97,7 +111,8 @@ const generateHighlightedHtml = (): string => {
 };
 
 onMounted(() => {
-  nativeTextarea = (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
+  nativeTextarea =
+    (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
     document.querySelector('.textarea-input .arco-textarea');
 
   if (nativeTextarea) {
@@ -158,7 +173,7 @@ const handleCompositionUpdate = () => {
     font-weight: 400px;
     border: 1px solid #d7d7d9;
     border-radius: 4px;
-    resize: vertical;
+    resize: none;
     white-space: pre-wrap;
     word-wrap: break-word;
     z-index: inherit;
@@ -193,9 +208,8 @@ const handleCompositionUpdate = () => {
       background: transparent;
       color: transparent;
       caret-color: #211f24 !important;
+      resize: none;
       @include textarea-padding;
-
-      // -webkit-text-fill-color: transparent !important;
       overflow-y: auto;
     }
 

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

@@ -81,7 +81,7 @@ export default {
       } else {
         return (
           <div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
-            <img src={coverImageUrl.value} class="w-100% h-100% object-contain absolute z-0 top-0 left-0" />
+            <img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
           </div>
         );
       }

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

@@ -22,8 +22,8 @@ $footer-height: 68px;
   .main-img-box {
     width: 320px;
     height: auto;
+    max-height: 472px;
     background: #fff;
-    aspect-ratio: 3/4;
   }
   .desc-img-wrap {
     display: grid;

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

@@ -93,7 +93,7 @@ export default {
       <>
         <div class="manuscript-edit-wrap">
           <div class="flex items-center mb-8px">
-            <span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>
+            <span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
               内容稿件列表
             </span>
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />

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

@@ -1,11 +1,25 @@
 <template>
   <div class="highlight-textarea-container">
-    <a-textarea ref="textareaWrapRef" v-model="inputValue" placeholder="请输入作品描述" :disabled="disabled" show-word-limit
+    <a-textarea
-      :max-length="1000" size="large" class="textarea-input h-full w-full" @input="handleInput"
+      ref="textareaWrapRef"
-      @focus="() => (focus = true)" @blur="() => (focus = false)" />
+      v-model="inputValue"
+      placeholder="请输入作品描述"
+      :disabled="disabled"
+      show-word-limit
+      :max-length="1000"
+      size="large"
+      class="textarea-input h-full w-full"
+      @input="handleInput"
+      @focus="() => (focus = true)"
+      @blur="() => (focus = false)"
+    />
 
-    <div class="textarea-highlight" :class="{ focus: focus }" :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
+    <div
-      v-html="highlightedHtml" />
+      class="textarea-highlight"
+      :class="{ focus: focus }"
+      :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
+      v-html="highlightedHtml"
+    />
   </div>
 </template>
 
@@ -98,7 +112,8 @@ const generateHighlightedHtml = (): string => {
 };
 
 onMounted(() => {
-  nativeTextarea = (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
+  nativeTextarea =
+    (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
     document.querySelector('.textarea-input .arco-textarea');
 
   if (nativeTextarea) {
@@ -159,7 +174,7 @@ const handleCompositionUpdate = () => {
     font-weight: 400px;
     border: 1px solid #d7d7d9;
     border-radius: 4px;
-    resize: vertical;
+    resize: none;
     white-space: pre-wrap;
     word-wrap: break-word;
     z-index: inherit;
@@ -194,9 +209,8 @@ const handleCompositionUpdate = () => {
       background: transparent;
       color: transparent;
       caret-color: #211f24 !important;
+      resize: none;
       @include textarea-padding;
-
-      // -webkit-text-fill-color: transparent !important;
       overflow-y: auto;
     }
 

src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/index.vue

@@ -221,7 +221,7 @@ export default {
                                   class="flex items-center w-fit h-24px px-8px rounded-2px"
                                   style={{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }}
                                 >
-                                  <span class="cts s1" style={{ color: getStatusInfo(record.audit_status).color }}>
+                                  <span class="cts s1 bold" style={{ color: getStatusInfo(record.audit_status).color }}>
                                     {getStatusInfo(record.audit_status).name}
                                   </span>
                                 </div>
@@ -238,20 +238,23 @@ export default {
                                     class="mr-4px"
                                   />
                                   <span
-                                    class="cts"
+                                    class={`cts !text-14px !lh-22px ${
-                                    class={
                                       record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
-                                    }
+                                    }`}
                                   >
                                     {record.type === EnumManuscriptType.Image ? '图文' : '视频'}
                                   </span>
                                 </div>
                               );
                             } else if (column.dataIndex === 'last_modified_at') {
-                              return exactFormatTime(
+                              return (
-                                record.last_modified_at,
+                                <span class="cts num">
-                                'YYYY-MM-DD HH:mm:ss',
+                                  {exactFormatTime(
-                                'YYYY-MM-DD HH:mm:ss',
+                                    record.last_modified_at,
+                                    'YYYY-MM-DD HH:mm:ss',
+                                    'YYYY-MM-DD HH:mm:ss',
+                                  )}
+                                </span>
                               );
                             } else {
                               return formatTableField(column, record, true);

src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/style.scss

@@ -8,6 +8,9 @@
     &.bold {
       font-family: $font-family-medium;
     }
+    &.num {
+      font-family: $font-family-manrope-regular;
+    }
   }
   .filter-row-item {
     .label {
@@ -23,5 +26,43 @@
     .arco-scrollbar-track {
       display: none !important;
     }
+    .arco-table {
+      .arco-table-container {
+        .arco-table-element {
+          thead {
+            .arco-table-tr {
+              .arco-table-th {
+                .arco-table-cell {
+                  padding: 10px 16px !important;
+                }
+              }
+            }
+          }
+          tbody {
+            .arco-table-tr {
+              .arco-table-td {
+                .arco-table-cell {
+                  padding: 6px 16px;
+                  .arco-table-cell-content,
+                  .arco-table-td-content {
+                    font-size: 12px;
+                    line-height: 20px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .arco-pagination {
+      .arco-pagination-total,
+      .arco-pagination-jumper-prepend {
+        font-size: 14px;
+      }
+      .arco-pagination-jumper-prepend {
+        font-family: $font-family-regular;
+      }
+    }
   }
 }

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

@@ -79,8 +79,8 @@ export default {
         );
       } else {
         return (
-          <div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
+          <div class="main-img-box mb-16px overflow-hidden cursor-pointer">
-            <img src={coverImageUrl.value} class="w-100% h-100% object-contain absolute z-0 top-0 left-0" />
+            <img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
           </div>
         );
       }

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

@@ -22,8 +22,9 @@ $footer-height: 68px;
   .main-img-box {
     width: 320px;
     height: auto;
+    max-height: 472px;
     background: #fff;
-    aspect-ratio: 3/4;
+    // aspect-ratio: 3/4;
   }
   .desc-img-wrap {
     display: grid;

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

@@ -91,7 +91,7 @@ export default {
       <>
         <div class="manuscript-edit-wrap">
           <div class="flex items-center mb-8px">
-            <span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>
+            <span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
               内容稿件列表
             </span>
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />