From bd863f6d381f89623328b9c0e23c00b99eef3aa1 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Fri, 13 Mar 2026 11:40:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87/?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E4=B8=8A=E4=BC=A0=E5=92=8C=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 支持从本地一次选择多个文件上传
- 图片选择器上传完成后自动关闭
- 输入框和用户消息块显示缩略图（60x60px）而非文件名
- 输入框缩略图悬停时显示删除按钮（右上角 × 符号）
- 统一图片/视频预览样式，提升用户体验

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 static/src/app/methods/upload.ts              |  2 +
 static/src/components/chat/ChatArea.vue       | 13 +++-
 static/src/components/input/InputComposer.vue | 68 +++++++++++++++----
 .../styles/components/chat/_chat-area.scss    | 19 ++++--
 4 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/static/src/app/methods/upload.ts b/static/src/app/methods/upload.ts
index 54e329e..897f62d 100644
--- a/static/src/app/methods/upload.ts
+++ b/static/src/app/methods/upload.ts
@@ -125,6 +125,8 @@ export const uploadMethods = {
             this.inputAddSelectedImage(item.path);
             this.upsertImageEntry(item.path, item.filename);
         });
+        // 上传完成后自动关闭选择窗口
+        this.closeImagePicker();
     },
 
     async handleLocalVideoFiles(files) {
diff --git a/static/src/components/chat/ChatArea.vue b/static/src/components/chat/ChatArea.vue
index cb95b6d..e4bfd3a 100644
--- a/static/src/components/chat/ChatArea.vue
+++ b/static/src/components/chat/ChatArea.vue
@@ -10,10 +10,14 @@
           <div class="message-text user-bubble-text">
             <div v-if="msg.content" class="bubble-text">{{ msg.content }}</div>
             <div v-if="msg.images && msg.images.length" class="image-inline-row">
-              <span class="image-name" v-for="img in msg.images" :key="img">{{ formatImageName(img) }}</span>
+              <div class="image-thumbnail-wrapper" v-for="img in msg.images" :key="img">
+                <img :src="getPreviewUrl(img)" :alt="formatImageName(img)" class="image-thumbnail" />
+              </div>
             </div>
             <div v-if="msg.videos && msg.videos.length" class="image-inline-row video-inline-row">
-              <span class="image-name" v-for="video in msg.videos" :key="video">{{ formatImageName(video) }}</span>
+              <div class="image-thumbnail-wrapper" v-for="video in msg.videos" :key="video">
+                <img :src="getPreviewUrl(video)" :alt="formatImageName(video)" class="image-thumbnail" />
+              </div>
             </div>
           </div>
         </div>
@@ -430,6 +434,11 @@ function formatImageName(path: string): string {
   return parts[parts.length - 1] || path;
 }
 
+function getPreviewUrl(path: string): string {
+  if (!path) return '';
+  return `/api/gui/files/download?path=${encodeURIComponent(path)}`;
+}
+
 const isStackable = (action: any) => action && (action.type === 'thinking' || action.type === 'tool');
 const isEmptyTextAction = (action: any) => {
   if (!action || action.type !== 'text') {
diff --git a/static/src/components/input/InputComposer.vue b/static/src/components/input/InputComposer.vue
index d2a0981..4d047b4 100644
--- a/static/src/components/input/InputComposer.vue
+++ b/static/src/components/input/InputComposer.vue
@@ -10,19 +10,19 @@
           'has-text': (inputMessage || '').trim().length > 0
         }"
       >
-        <input type="file" ref="fileUploadInput" class="file-input-hidden" @change="onFileChange" />
+        <input type="file" ref="fileUploadInput" class="file-input-hidden" multiple @change="onFileChange" />
         <div class="input-stack">
           <div v-if="selectedImages && selectedImages.length" class="image-inline-row">
-            <span class="image-name" v-for="img in selectedImages" :key="img">
-              {{ formatImageName(img) }}
-              <button type="button" class="image-remove-btn" @click.stop="$emit('remove-image', img)">×</button>
-            </span>
+            <div class="image-thumbnail-wrapper" v-for="img in selectedImages" :key="img">
+              <img :src="getPreviewUrl(img)" :alt="formatImageName(img)" class="image-thumbnail" />
+              <button type="button" class="image-remove-btn-hover" @click.stop="$emit('remove-image', img)">×</button>
+            </div>
           </div>
           <div v-if="selectedVideos && selectedVideos.length" class="image-inline-row video-inline-row">
-            <span class="image-name" v-for="video in selectedVideos" :key="video">
-              {{ formatImageName(video) }}
-              <button type="button" class="image-remove-btn" @click.stop="$emit('remove-video', video)">×</button>
-            </span>
+            <div class="image-thumbnail-wrapper" v-for="video in selectedVideos" :key="video">
+              <img :src="getPreviewUrl(video)" :alt="formatImageName(video)" class="image-thumbnail" />
+              <button type="button" class="image-remove-btn-hover" @click.stop="$emit('remove-video', video)">×</button>
+            </div>
           </div>
           <div class="input-row">
             <button
@@ -190,6 +190,11 @@ const formatImageName = (path: string): string => {
   return parts[parts.length - 1] || path;
 };
 
+const getPreviewUrl = (path: string): string => {
+  if (!path) return '';
+  return `/api/gui/files/download?path=${encodeURIComponent(path)}`;
+};
+
 const applyLineMetrics = (lines: number, multiline: boolean) => {
   inputStore.setInputLineCount(lines);
   inputStore.setInputMultiline(multiline);
@@ -269,11 +274,48 @@ onMounted(() => {
   flex-wrap: wrap;
   gap: 8px;
   padding: 4px 10px 2px;
-  font-size: 12px;
-  color: var(--text-secondary, #7f8792);
   line-height: 1.4;
 }
-.image-name {
-  white-space: nowrap;
+
+.image-thumbnail-wrapper {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid var(--border-color, #2a2f3a);
+}
+
+.image-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.image-remove-btn-hover {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: none;
+  color: #fff;
+  border: none;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1;
+  cursor: pointer;
+  display: none;
+  padding: 2px 4px;
+  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+  transition: color 0.15s ease;
+}
+
+.image-thumbnail-wrapper:hover .image-remove-btn-hover {
+  display: block;
+}
+
+.image-remove-btn-hover:hover {
+  color: #ef4444;
 }
 </style>
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index 26d4a4e..4468feb 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -401,14 +401,25 @@
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
-    font-size: 12px;
-    color: var(--claude-text-secondary);
     line-height: 1.4;
     padding-bottom: 2px;
 }
 
-.user-message .message-text.user-bubble-text .image-name {
-    white-space: nowrap;
+.user-message .message-text.user-bubble-text .image-thumbnail-wrapper {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+    border: 1px solid var(--border-color, #2a2f3a);
+}
+
+.user-message .message-text.user-bubble-text .image-thumbnail {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
 }
 
 .assistant-generating-block {