From 77e96624ee3086ed8515ec736c6aab809837fdb3 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Tue, 22 Apr 2025 17:31:14 +0800
Subject: [PATCH] fix: upload file style (#2953)

---
 .../component/chat-input-operate/index.vue    | 48 +++++++++++--------
 .../component/FileUploadSettingDialog.vue     |  2 +-
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index de004b52e..ad9ee2776 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -31,23 +31,25 @@
                 class="file cursor"
               >
                 <div
-                  class="flex align-center"
+                  class="flex-between align-center"
                   @mouseenter.stop="mouseenter(item)"
                   @mouseleave.stop="mouseleave()"
                 >
+                  <div class="flex align-center">
+                    <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                    <div class="ml-4 ellipsis-1" :title="item && item?.name">
+                      {{ item && item?.name }}
+                    </div>
+                  </div>
                   <div
                     @click="deleteFile(index, 'document')"
                     class="delete-icon color-secondary"
                     v-if="showDelete === item.url"
                   >
-                    <el-icon>
+                    <el-icon style="font-size: 16px; top: 2px">
                       <CircleCloseFilled />
                     </el-icon>
                   </div>
-                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
-                    {{ item && item?.name }}
-                  </div>
                 </div>
               </el-card>
             </el-col>
@@ -67,23 +69,25 @@
                 class="file cursor"
               >
                 <div
-                  class="flex align-center"
+                  class="flex-between align-center"
                   @mouseenter.stop="mouseenter(item)"
                   @mouseleave.stop="mouseleave()"
                 >
+                  <div class="flex align-center">
+                    <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                    <div class="ml-4 ellipsis-1" :title="item && item?.name">
+                      {{ item && item?.name }}
+                    </div>
+                  </div>
                   <div
                     @click="deleteFile(index, 'document')"
                     class="delete-icon color-secondary"
                     v-if="showDelete === item.url"
                   >
-                    <el-icon>
+                    <el-icon style="font-size: 16px; top: 2px">
                       <CircleCloseFilled />
                     </el-icon>
                   </div>
-                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
-                    {{ item && item?.name }}
-                  </div>
                 </div>
               </el-card>
             </el-col>
@@ -100,23 +104,25 @@
             >
               <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
                 <div
-                  class="flex align-center"
+                  class="flex-between align-center"
                   @mouseenter.stop="mouseenter(item)"
                   @mouseleave.stop="mouseleave()"
                 >
+                  <div class="flex align-center">
+                    <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                    <div class="ml-4 ellipsis-1" :title="item && item?.name">
+                      {{ item && item?.name }}
+                    </div>
+                  </div>
                   <div
                     @click="deleteFile(index, 'audio')"
                     class="delete-icon color-secondary"
                     v-if="showDelete === item.url"
                   >
-                    <el-icon>
+                    <el-icon style="font-size: 16px; top: 2px">
                       <CircleCloseFilled />
                     </el-icon>
                   </div>
-                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
-                    {{ item && item?.name }}
-                  </div>
                 </div>
               </el-card>
             </el-col>
@@ -124,7 +130,7 @@
           <el-space wrap>
             <template v-for="(item, index) in uploadImageList" :key="index">
               <div
-                class="file cursor border border-r-4"
+                class="file file-image cursor border border-r-4"
                 v-if="item.url"
                 @mouseenter.stop="mouseenter(item)"
                 @mouseleave.stop="mouseleave()"
@@ -134,7 +140,7 @@
                   class="delete-icon color-secondary"
                   v-if="showDelete === item.url"
                 >
-                  <el-icon>
+                  <el-icon style="font-size: 16px; top: 2px">
                     <CircleCloseFilled />
                   </el-icon>
                 </div>
@@ -939,7 +945,7 @@ onMounted(() => {
         }
       }
     }
-    .file {
+    .file-image {
       position: relative;
       overflow: inherit;
 
diff --git a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
index 966f4c8b3..27fc88a03 100644
--- a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
@@ -136,7 +136,7 @@
         >
           <div class="flex-between">
             <div class="flex align-center">
-              <img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />
+              <img class="mr-12" :width="32" src="@/assets/fileType/unknown-icon.svg" alt="" />
               <div>
                 <p class="line-height-22 mt-4">
                   {{ $t('common.fileUpload.other') }}