From 3518c37ffb3a71f9e67f0bfcbb900b5a7bb32e2c Mon Sep 17 00:00:00 2001
From: guoyuqi <xiaomeinvG@126.com>
Date: Mon, 1 Apr 2024 19:00:36 +0800
Subject: [PATCH] =?UTF-8?q?style(=E7=94=A8=E4=BE=8B=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E5=8E=BB=E6=8E=89canvas=E8=AE=A1=E7=AE=97=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pure/ms-upload/fileList.vue    | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/pure/ms-upload/fileList.vue b/frontend/src/components/pure/ms-upload/fileList.vue
index ab3868a6bc..a3e8e6af8a 100644
--- a/frontend/src/components/pure/ms-upload/fileList.vue
+++ b/frontend/src/components/pure/ms-upload/fileList.vue
@@ -40,11 +40,11 @@
               <div class="m-b[2px] flex items-center">
                 <a-tooltip :content="item.file.name">
                   <div class="show-file-name">
-                    <div class="one-line-text max-w-[421px] font-normal">
-                      {{ item.file.name }}
+                    <div class="one-line-text max-w-[421px] pl-[4px] font-normal">
+                      {{ item.file.name.slice(0, item.file.name.indexOf('.')) }}
                     </div>
-                    <span v-if="getTextWidth(item.file.name) > 421" class="font-normal text-[var(--color-text-1)]">{{
-                      item.file.name.slice(item.file.name.indexOf('.') + 1)
+                    <span class="font-normal text-[var(--color-text-1)]">{{
+                      item.file.name.slice(item.file.name.indexOf('.'))
                     }}</span>
                   </div>
                 </a-tooltip>
@@ -60,19 +60,26 @@
               </div>
               <div
                 v-else-if="item.status === UploadStatus.done"
-                class="flex items-center gap-[8px] text-[12px] leading-[16px] text-[var(--color-text-4)]"
+                class="flex items-center gap-[8px] pl-[4px] text-[12px] leading-[16px] text-[var(--color-text-4)]"
               >
-                <div class="one-line-text max-w-[421px]">
-                  {{
-                    `${formatFileSize(item.file.size)}  ${item.createUserName || ''}  ${getUploadDesc(item)} ${dayjs(
-                      item.createTime
-                    ).format('YYYY-MM-DD HH:mm:ss')}`
-                  }}
-                </div>
-
-                <div v-if="showUploadSuccess(item)" class="flex items-center">
-                  <MsIcon type="icon-icon_succeed_colorful" />
-                  {{ t('ms.upload.uploadSuccess') }}
+                <div class="one-line-text max-w-[421px]" style="display: flex">
+                  <a-tooltip
+                    :content="`${formatFileSize(item.file.size)}  ${item.createUserName || ''}  ${getUploadDesc(
+                      item
+                    )} ${dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}`"
+                  >
+                    <div class="one-line-text">
+                      {{
+                        `${formatFileSize(item.file.size)}  ${item.createUserName || ''}  ${getUploadDesc(
+                          item
+                        )} ${dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}`
+                      }}
+                    </div>
+                  </a-tooltip>
+                  <div v-if="showUploadSuccess(item)" class="flex items-center">
+                    <MsIcon type="icon-icon_succeed_colorful" />
+                    {{ t('ms.upload.uploadSuccess') }}
+                  </div>
                 </div>
               </div>
               <a-progress
@@ -98,6 +105,7 @@
               >
                 {{ t('ms.upload.preview') }}
               </MsButton>
+              <a-divider v-if="item.file.type.includes('image/')" direction="vertical" />
               <MsButton
                 v-if="item.status === UploadStatus.error"
                 type="button"
@@ -107,6 +115,7 @@
               >
                 {{ t('ms.upload.reUpload') }}
               </MsButton>
+              <a-divider v-if="item.status === UploadStatus.error" direction="vertical" />
               <MsButton
                 v-if="props.showDelete && item.status !== 'uploading'"
                 type="button"
@@ -281,16 +290,6 @@
     }
   }
 
-  function getTextWidth(text: string) {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (context != null) {
-      const metrics = context.measureText(text);
-      return metrics.width;
-    }
-    return 0;
-  }
-
   watch(
     () => asyncTaskStore.uploadFileTask.finishedTime,
     (val) => {