From 31cc6aa8a5d0375c5dd42c7652fcac3070712e2d Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 12 Nov 2025 03:41:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81=E9=99=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=92=8C=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 `AgentChatComponent.vue` 中，替换 `AttachmentInputPanel` 为 `AttachmentOptionsComponent`，并添加图片上传功能的处理。
- 新增 `AttachmentOptionsComponent.vue` 以处理文件和图片上传选项。
- 新增 `AttachmentStatusIndicator.vue` 以显示已上传附件的状态和操作。
- 更新 `MessageInputComponent.vue` 以支持新的插槽结构，增强组件的灵活性和可扩展性。
---
 web/src/components/AgentChatComponent.vue     |  32 +-
 .../components/AttachmentOptionsComponent.vue | 133 ++++++++
 .../components/AttachmentStatusIndicator.vue  | 299 ++++++++++++++++++
 web/src/components/MessageInputComponent.vue  |  72 +++--
 4 files changed, 505 insertions(+), 31 deletions(-)
 create mode 100644 web/src/components/AttachmentOptionsComponent.vue
 create mode 100644 web/src/components/AttachmentStatusIndicator.vue

diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 90a587b6..4010e9d3 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -76,13 +76,17 @@
             @keydown="handleKeyDown"
           >
             <template #options-left>
-              <AttachmentInputPanel
+              <AttachmentOptionsComponent
                 v-if="supportsFileUpload"
-                :attachments="currentAttachments"
-                :limits="attachmentState.limits"
-                :is-uploading="attachmentState.isUploading"
                 :disabled="!currentAgent"
                 @upload="handleAttachmentUpload"
+                @upload-image="handleImageUpload"
+              />
+            </template>
+            <template #actions-left>
+              <AttachmentStatusIndicator
+                :attachments="currentAttachments"
+                :disabled="!currentAgent"
                 @remove="handleAttachmentRemove"
               />
             </template>
@@ -157,13 +161,17 @@
             @keydown="handleKeyDown"
           >
             <template #options-left>
-              <AttachmentInputPanel
+              <AttachmentOptionsComponent
                 v-if="supportsFileUpload"
-                :attachments="currentAttachments"
-                :limits="attachmentState.limits"
-                :is-uploading="attachmentState.isUploading"
                 :disabled="!currentAgent"
                 @upload="handleAttachmentUpload"
+                @upload-image="handleImageUpload"
+              />
+            </template>
+            <template #actions-left>
+              <AttachmentStatusIndicator
+                :attachments="currentAttachments"
+                :disabled="!currentAgent"
                 @remove="handleAttachmentRemove"
               />
             </template>
@@ -183,6 +191,8 @@ import { LoadingOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import MessageInputComponent from '@/components/MessageInputComponent.vue'
 import AttachmentInputPanel from '@/components/AttachmentInputPanel.vue'
+import AttachmentOptionsComponent from '@/components/AttachmentOptionsComponent.vue'
+import AttachmentStatusIndicator from '@/components/AttachmentStatusIndicator.vue'
 import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
 import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
 import RefsComponent from '@/components/RefsComponent.vue'
@@ -715,6 +725,12 @@ const handleAttachmentRemove = async (fileId) => {
   }
 };
 
+// 处理图片上传（开发中功能）
+const handleImageUpload = () => {
+  // 图片上传功能暂未实现，在 AttachmentOptionsComponent 中已经显示了提示信息
+  // 这里可以预留扩展接口
+};
+
 // ==================== 审批功能管理 ====================
 const { approvalState, handleApproval, processApprovalInStream } = useApproval({
   getThreadState,
diff --git a/web/src/components/AttachmentOptionsComponent.vue b/web/src/components/AttachmentOptionsComponent.vue
new file mode 100644
index 00000000..c56e6f12
--- /dev/null
+++ b/web/src/components/AttachmentOptionsComponent.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="attachment-options">
+    <div class="option-item">
+      <label class="attachment-upload-label" :class="{ disabled: disabled }">
+        <input
+          ref="fileInputRef"
+          type="file"
+          multiple
+          accept=".txt,.md,.docx,.html,.htm"
+          :disabled="disabled"
+          @change="handleFileChange"
+          style="display: none;"
+        />
+        <a-tooltip title="支持 txt/md/docx/html/htm 格式，单文件 ≤ 5 MB" placement="right">
+          <div class="option-content">
+            <FileText :size="16" class="option-icon" />
+            <span class="option-text">添加附件</span>
+          </div>
+        </a-tooltip>
+      </label>
+    </div>
+
+    <div class="option-item" @click="handleImageUpload">
+      <a-tooltip title="支持 jpg/jpeg/png/gif 格式，单文件 ≤ 5 MB" placement="right">
+        <div class="option-content">
+          <Image :size="16" class="option-icon" />
+          <span class="option-text">上传图片</span>
+        </div>
+      </a-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { FileText, Image } from 'lucide-vue-next';
+import { message } from 'ant-design-vue';
+
+const fileInputRef = ref(null);
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['upload', 'upload-image']);
+
+// 处理文件选择变化
+const handleFileChange = (event) => {
+  const files = event.target.files;
+  if (files && files.length > 0) {
+    emit('upload', Array.from(files));
+  }
+  // 清空文件输入，允许重复选择同一文件
+  event.target.value = '';
+};
+
+// 处理图片上传（开发中提示）
+const handleImageUpload = () => {
+  if (props.disabled) return;
+  message.info('图片上传功能开发中，敬请期待！');
+  emit('upload-image');
+};
+</script>
+
+<style lang="less" scoped>
+.attachment-options {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 120px;
+}
+
+.option-item {
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    .option-content {
+      color: var(--gray-400);
+    }
+  }
+}
+
+.option-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  color: var(--gray-700);
+  font-size: 13px;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+
+  .option-item:hover & {
+    color: var(--main-color);
+    background-color: var(--gray-50);
+  }
+}
+
+.option-icon {
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.option-text {
+  font-weight: 500;
+}
+
+.attachment-upload-label {
+  display: block;
+  width: 100%;
+  cursor: pointer;
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    .option-content {
+      color: var(--gray-400);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/AttachmentStatusIndicator.vue b/web/src/components/AttachmentStatusIndicator.vue
new file mode 100644
index 00000000..f165eca4
--- /dev/null
+++ b/web/src/components/AttachmentStatusIndicator.vue
@@ -0,0 +1,299 @@
+<template>
+  <div v-if="hasAttachments" class="attachment-status">
+    <a-popover
+      v-model:open="detailsVisible"
+      placement="topLeft"
+      trigger="click"
+      :overlay-class-name="'attachment-details-popover'"
+    >
+      <template #content>
+        <div class="attachment-details">
+          <div class="details-header">
+            <span class="header-title">已上传附件</span>
+          </div>
+          <div class="attachment-list">
+            <div
+              v-for="attachment in attachments"
+              :key="attachment.file_id"
+              class="attachment-item"
+            >
+              <div class="file-info">
+                <component :is="getFileIcon(attachment.file_type)" :size="15" class="file-icon" />
+                <div class="file-details">
+                  <div class="file-name">{{ attachment.file_name }}</div>
+                  <div class="file-meta">
+                    {{ formatFileSize(attachment.file_size) }} · {{ getStatusLabel(attachment.status) }}
+                  </div>
+                </div>
+              </div>
+              <a-button
+                type="link"
+                class="remove-btn"
+                @click="handleRemoveAttachment(attachment.file_id)"
+                :disabled="disabled"
+              >
+                <X :size="15" />
+              </a-button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <a-button
+        type="text"
+        size="small"
+        class="status-indicator has-multiple"
+        :disabled="disabled"
+      >
+        <template #icon>
+          <Paperclip :size="14" />
+        </template>
+        <span class="attachment-count">
+          {{ attachments.length }}
+        </span>
+      </a-button>
+    </a-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import {
+  Paperclip,
+  FileText,
+  File,
+  X
+} from 'lucide-vue-next';
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => []
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['remove']);
+
+const detailsVisible = ref(false);
+
+// 是否有附件
+const hasAttachments = computed(() => {
+  return props.attachments && props.attachments.length > 0;
+});
+
+// 根据文件类型获取图标
+const getFileIcon = (fileType) => {
+  const iconMap = {
+    'text/plain': FileText,
+    'text/markdown': FileText,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': File,
+    'text/html': File,
+    'text/htm': File,
+  };
+  return iconMap[fileType] || File;
+};
+
+// 格式化文件大小
+const formatFileSize = (bytes) => {
+  if (!bytes || bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+};
+
+// 获取状态标签
+const getStatusLabel = (status) => {
+  const statusMap = {
+    'uploaded': '已上传',
+    'processing': '处理中',
+    'parsed': '已解析',
+    'failed': '解析失败',
+    'pending': '待处理'
+  };
+  return statusMap[status] || status || '未知';
+};
+
+// 处理删除附件
+const handleRemoveAttachment = (fileId) => {
+  if (props.disabled) return;
+  emit('remove', fileId);
+};
+</script>
+
+<style lang="less" scoped>
+.attachment-status {
+  display: flex;
+  align-items: center;
+}
+
+.status-indicator {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-600);
+  transition: all 0.2s ease;
+  position: relative;
+  border: 1px solid transparent;
+  background-color: transparent;
+
+  &:hover:not(:disabled) {
+    color: var(--main-color);
+  }
+
+  &:active:not(:disabled) {
+    color: var(--main-color);
+    transform: scale(0.95);
+  }
+
+  &.has-multiple {
+    .attachment-count {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      background-color: var(--main-500);
+      color: white;
+      border-radius: 10px;
+      width: 18px;
+      height: 18px;
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      border: 2px solid white;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>
+
+<style lang="less">
+.attachment-details-popover {
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+
+  .ant-popover-inner {
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  .ant-popover-arrow {
+    &::before {
+      border: 1px solid var(--border);
+    }
+  }
+}
+
+.attachment-details {
+  min-width: 260px;
+  max-width: 320px;
+
+  .details-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border);
+    background-color: var(--muted);
+
+    .header-icon {
+      color: var(--main-500);
+    }
+
+    .header-title {
+      font-weight: 600;
+      color: var(--foreground);
+      font-size: 12px;
+    }
+  }
+
+  .attachment-list {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .attachment-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    border-bottom: 1px solid var(--border);
+    border-radius: 8px;
+    transition: background-color 0.15s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--gray-50);
+    }
+
+    .file-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+      cursor: pointer;
+
+      .file-icon {
+        color: var(--main-500);
+        flex-shrink: 0;
+      }
+
+      .file-details {
+        flex: 1;
+        min-width: 0;
+
+        .file-name {
+          font-size: 12px;
+          font-weight: 500;
+          color: var(--foreground);
+          margin-bottom: 1px;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .file-meta {
+          font-size: 10px;
+          color: var(--muted-foreground);
+        }
+      }
+    }
+
+    .remove-btn {
+      color: var(--muted-foreground);
+      flex-shrink: 0;
+      border-radius: 4px;
+      transition: all 0.15s ease;
+
+      &:hover:not(:disabled) {
+        color: var(--color-error);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/MessageInputComponent.vue b/web/src/components/MessageInputComponent.vue
index 2d429e4b..eaba43bc 100644
--- a/web/src/components/MessageInputComponent.vue
+++ b/web/src/components/MessageInputComponent.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="input-box" :class="[customClasses, { 'single-line': isSingleLine }]" @click="focusInput">
+    <slot name="top"></slot>
     <div class="expand-options" v-if="hasOptionsLeft">
       <a-popover
         v-model:open="optionsExpanded"
@@ -7,15 +8,12 @@
         trigger="click"
       >
         <template #content>
-          <div class="popover-options">
-            <slot name="options-left">
-              <div class="no-options">没有配置 options</div>
-            </slot>
-          </div>
+          <slot name="options-left">
+            <div class="no-options">没有配置 options</div>
+          </slot>
         </template>
         <a-button
           type="text"
-          size="small"
           class="expand-btn"
         >
           <template #icon>
@@ -23,6 +21,7 @@
           </template>
         </a-button>
       </a-popover>
+      <slot name="actions-left"></slot>
     </div>
 
     <textarea
@@ -37,6 +36,7 @@
     />
 
     <div class="send-button-container">
+      <slot name="actions-right"></slot>
       <a-tooltip :title="isLoading ? '停止回答' : ''">
         <a-button
           @click="handleSendOrStop"
@@ -51,6 +51,7 @@
       </a-tooltip>
     </div>
   </div>
+  <slot name="bottom"></slot>
 </template>
 
 <script setup>
@@ -116,6 +117,15 @@ const hasOptionsLeft = computed(() => {
   return Boolean(renderedNodes && renderedNodes.length);
 });
 
+const hasActionsLeft = computed(() => {
+  const slot = slots['actions-left'];
+  if (!slot) {
+    return false;
+  }
+  const renderedNodes = slot();
+  return Boolean(renderedNodes && renderedNodes.length);
+});
+
 // 图标映射
 const iconComponents = {
   'SendOutlined': SendOutlined,
@@ -285,6 +295,9 @@ onBeforeUnmount(() => {
 
   .expand-options {
     justify-self: start;
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
   .send-button-container {
     justify-self: end;
@@ -302,6 +315,7 @@ onBeforeUnmount(() => {
     grid-template-rows: 1fr;
     grid-template-areas: "options input send";
     align-items: center;
+    gap: 10px;
 
     .user-input {
       min-height: 24px;
@@ -314,6 +328,12 @@ onBeforeUnmount(() => {
     .expand-options, .send-button-container {
       align-self: center;
     }
+
+    .expand-options {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
   }
 }
 
@@ -357,23 +377,29 @@ onBeforeUnmount(() => {
 }
 
 .expand-btn {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gray-600);
   transition: all 0.2s ease;
+  border: 1px solid transparent;
+  background-color: transparent;
 
   &:hover {
-    background-color: var(--gray-100);
-    color: var(--main-500);
+    color: var(--main-color);
+  }
+
+  &:active {
+    color: var(--main-color);
+    transform: scale(0.95);
   }
 
   .anticon {
-    font-size: 12px;
-    transition: transform 0.2s ease;
+    font-size: 14px;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
     &.rotated {
       transform: rotate(45deg);
@@ -383,34 +409,34 @@ onBeforeUnmount(() => {
 
 // Popover 选项样式
 .popover-options {
-  min-width: 200px;
-  max-width: 300px;
+  min-width: 160px;
+  max-width: 200px;
+  padding: 4px;
 
   .no-options {
-    color: var(--gray-700);
+    color: var(--gray-500);
     font-size: 12px;
     text-align: center;
+    padding: 12px 8px;
   }
 
   :deep(.opt-item) {
-    border-radius: 12px;
-    border: 1px solid var(--gray-300);
-    padding: 5px 10px;
+    border-radius: 8px;
+    padding: 6px 10px;
     cursor: pointer;
     font-size: 12px;
     color: var(--gray-700);
     transition: all 0.2s ease;
-    margin: 4px;
+    margin: 2px;
     display: inline-block;
 
     &:hover {
       background-color: var(--main-10);
-      color: var(--main-color);
+      color: var(--main-600);
     }
 
     &.active {
-      color: var(--main-color);
-      border: 1px solid var(--main-500);
+      color: var(--main-600);
       background-color: var(--main-10);
     }
   }