更新对话上传文件后回答

llm-ui/src/api/llm/document.js

@@ -1,3 +1,9 @@
+/*
+ * @Author: ysh
+ * @Date: 2025-06-13 10:35:45
+ * @LastEditors: 
+ * @LastEditTime: 2025-07-22 10:38:57
+ */
 import request from '@/utils/request'
 
 // 查询cmc聊天附件列表
@@ -42,3 +48,20 @@ export function delDocument(documentId) {
     method: 'delete'
   })
 }
+
+
+// 上传聊天外部文件
+export function uploadDocument(fileList) {
+  const formData = new FormData()
+  for (let f of fileList) {
+    formData.append('fileList', f)
+  }
+  return request({
+    url: '/llm/document/upload',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}

llm-ui/src/api/llm/session.js

@@ -2,7 +2,7 @@
  * @Author: wrh
  * @Date: 2025-04-08 14:23:04
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-06-26 10:14:40
+ * @LastEditTime: 2025-07-22 15:42:04
  */
 import request from '@/utils/request'
 
@@ -14,3 +14,12 @@ export function getAnswer(question) {
     params: question
   })
 }
+
+// 查询cmc聊天记录详细
+export function getAnswerWithDocument(question) {
+  return request({
+    url: '/llm/session/answerWithDocument',
+    method: 'get',
+    params: question
+  })
+}

llm-ui/src/views/llm/agent/index.vue

@@ -1,11 +1,341 @@
 <!--
- * @Author: wrh
+ * @Author: ysh
  * @Date: 2025-07-17 18:16:50
- * @LastEditors: wrh
- * @LastEditTime: 2025-07-17 18:17:33
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-07-22 10:01:21
 -->
-<<template>
-  <div>
-    
+<template>
+  <div class="agent-container">
+    <!-- 左侧智能体列表 -->
+    <div class="agent-list">
+      <div class="list-header">
+        <h3>智能体列表</h3>
+        <el-button type="primary" size="small" @click="handleAdd">
+          <el-icon>
+            <Plus />
+          </el-icon>
+          新增
+        </el-button>
+      </div>
+
+      <!-- 搜索框 -->
+      <div class="search-box">
+        <el-input v-model="queryParams.agentName" placeholder="请输入智能体名称" clearable @clear="handleQuery"
+          @keyup.enter="handleQuery">
+          <template #append>
+            <el-button @click="handleQuery">
+              <el-icon>
+                <Search />
+              </el-icon>
+            </el-button>
+          </template>
+        </el-input>
+      </div>
+
+      <!-- 智能体列表 -->
+      <div class="list-content" v-loading="loading">
+        <div v-for="agent in agentList" :key="agent.agentId" class="agent-item"
+          :class="{ 'active': selectedAgentId === agent.agentId }" @click="selectAgent(agent)">
+          <div class="agent-info">
+            <div class="agent-name">{{ agent.agentName }}</div>
+            <div class="agent-desc">{{ agent.description || '暂无描述' }}</div>
+            <div class="agent-meta">
+              <span class="create-time">{{ agent.createTime }}</span>
+            </div>
+          </div>
+          <div class="agent-actions">
+            <el-dropdown @command="handleCommand" trigger="click">
+              <el-icon class="action-icon">
+                <More />
+              </el-icon>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item :command="{ action: 'edit', agent }">编辑</el-dropdown-item>
+                  <el-dropdown-item :command="{ action: 'delete', agent }" divided>删除</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-if="agentList.length === 0 && !loading" class="empty-state">
+          <el-empty description="暂无智能体数据">
+            <el-button type="primary" @click="handleAdd">创建智能体</el-button>
+          </el-empty>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper" v-if="total > 0">
+        <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
+          :total="total" :page-sizes="[10, 20, 50]" layout="sizes, prev, pager, next" small @size-change="handleQuery"
+          @current-change="handleQuery" />
+      </div>
+    </div>
+
+    <!-- 右侧详细内容 -->
+    <div class="agent-detail">
+      <div class="detail-placeholder">
+        <div v-if="selectedAgentId">
+          <!-- 这里将来显示智能体详细内容 -->
+          <div class="coming-soon">
+            <el-icon size="48">
+              <Document />
+            </el-icon>
+            <p>智能体详细内容</p>
+            <p class="sub-text">当前选中ID: {{ selectedAgentId }}</p>
+          </div>
+        </div>
+        <div v-else class="no-selection">
+          <el-icon size="48"><Select /></el-icon>
+          <p>请选择一个智能体查看详细信息</p>
+        </div>
+      </div>
+    </div>
   </div>
-</template>>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Search, More, Document, Select } from '@element-plus/icons-vue'
+import { listAgent, addAgent, updateAgent, delAgent } from '@/api/llm/agent'
+
+// 响应式数据
+const loading = ref(false)
+const agentList = ref([])
+const total = ref(0)
+const selectedAgentId = ref(null)
+
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  agentName: ''
+})
+
+// 获取智能体列表
+const getList = async () => {
+  loading.value = true
+  try {
+    const response = await listAgent(queryParams)
+    agentList.value = response.rows || []
+    total.value = response.total || 0
+  } catch (error) {
+    console.error('获取智能体列表失败:', error)
+    ElMessage.error('获取智能体列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1
+  getList()
+}
+
+// 选择智能体
+const selectAgent = (agent) => {
+  selectedAgentId.value = agent.agentId
+  console.log('选中智能体:', agent)
+}
+
+// 新增智能体
+const handleAdd = () => {
+  ElMessage.info('新增智能体功能待实现')
+  // TODO: 打开新增对话框
+}
+
+// 操作菜单处理
+const handleCommand = async (command) => {
+  const { action, agent } = command
+
+  if (action === 'edit') {
+    ElMessage.info('编辑智能体功能待实现')
+    // TODO: 打开编辑对话框
+  } else if (action === 'delete') {
+    try {
+      await ElMessageBox.confirm(
+        `确认删除智能体"${agent.agentName}"吗？`,
+        '删除确认',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+
+      await delAgent(agent.agentId)
+      ElMessage.success('删除成功')
+
+      // 如果删除的是当前选中的智能体，清空选中状态
+      if (selectedAgentId.value === agent.agentId) {
+        selectedAgentId.value = null
+      }
+
+      getList()
+    } catch (error) {
+      if (error !== 'cancel') {
+        console.error('删除智能体失败:', error)
+        ElMessage.error('删除失败')
+      }
+    }
+  }
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.agent-container {
+  display: flex;
+  height: calc(100vh - 120px);
+  background: #f5f5f5;
+}
+
+.agent-list {
+  width: 300px;
+  background: white;
+  border-right: 1px solid #e4e4e4;
+  display: flex;
+  flex-direction: column;
+
+  .list-header {
+    padding: 16px;
+    border-bottom: 1px solid #e4e4e4;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .search-box {
+    padding: 16px;
+    border-bottom: 1px solid #e4e4e4;
+  }
+
+  .list-content {
+    flex: 1;
+    overflow-y: auto;
+
+    .agent-item {
+      padding: 12px 16px;
+      border-bottom: 1px solid #f0f0f0;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &:hover {
+        background: #f8f9fa;
+      }
+
+      &.active {
+        background: #e6f7ff;
+        border-right: 3px solid #1890ff;
+      }
+
+      .agent-info {
+        flex: 1;
+
+        .agent-name {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+          margin-bottom: 4px;
+        }
+
+        .agent-desc {
+          font-size: 12px;
+          color: #666;
+          margin-bottom: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .agent-meta {
+          font-size: 11px;
+          color: #999;
+
+          .create-time {
+            margin-right: 8px;
+          }
+        }
+      }
+
+      .agent-actions {
+        .action-icon {
+          color: #999;
+          font-size: 16px;
+          padding: 4px;
+          border-radius: 4px;
+
+          &:hover {
+            background: #f0f0f0;
+            color: #666;
+          }
+        }
+      }
+    }
+
+    .empty-state {
+      padding: 40px 20px;
+      text-align: center;
+    }
+  }
+
+  .pagination-wrapper {
+    padding: 16px;
+    border-top: 1px solid #e4e4e4;
+    background: white;
+  }
+}
+
+.agent-detail {
+  flex: 1;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .detail-placeholder {
+    text-align: center;
+    color: #999;
+
+    .coming-soon {
+      .sub-text {
+        font-size: 12px;
+        margin-top: 8px;
+        color: #ccc;
+      }
+    }
+
+    .no-selection {
+      p {
+        margin-top: 16px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+:deep(.el-pagination) {
+  justify-content: center;
+
+  .el-pagination__sizes {
+    margin-right: 8px;
+  }
+}
+</style>

llm-ui/src/views/llm/chat/index.vue

@@ -1,8 +1,8 @@
 <!--
- * @Author: wrh
+ * @Author: ysh
  * @Date: 2025-04-07 14:14:05
- * @LastEditors: wrh
- * @LastEditTime: 2025-07-21 17:06:36
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-07-22 16:07:39
 -->
 <template>
   <div class="app-container">
@@ -198,6 +198,24 @@
                     <div class="message-text" v-html="formatMessage(msg.text)"></div>
                     <div class="message-time">{{ formatMessageTime(msg.time) }}</div>
                   </div>
+                  <!-- 用户消息的文件列表 -->
+                  <div v-if="msg.type === 'user' && msg.chatId && msg.fileList && msg.fileList.length > 0"
+                    class="message-files">
+                    <div class="files-header">
+                      <el-icon>
+                        <Document />
+                      </el-icon>
+                      <span>附件 ({{ msg.fileList.length }})</span>
+                    </div>
+                    <div class="files-list">
+                      <div v-for="file in msg.fileList" :key="file.documentId" class="file-item-display">
+                        <el-icon class="file-icon">
+                          <Document />
+                        </el-icon>
+                        <span class="file-name">{{ file.path }}</span>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
               <!-- 加载状态 -->
@@ -222,6 +240,30 @@
 
           <!-- 输入框区域 -->
           <div class="input-container">
+            <!-- 文件列表显示区域 -->
+            <div v-if="selectedFiles.length > 0 || isUploading" class="file-list-container">
+              <div class="file-list-header">
+                <span v-if="isUploading">正在上传文件...</span>
+                <span v-else>已上传 {{ selectedFiles.length }} 个文件</span>
+                <el-icon v-if="isUploading" class="loading-icon">
+                  <Loading />
+                </el-icon>
+              </div>
+              <div class="file-list">
+                <div v-for="(file, index) in selectedFiles" :key="index" class="file-item">
+                  <div class="file-info">
+                    <el-icon class="file-icon">
+                      <Document />
+                    </el-icon>
+                    <span class="file-name">{{ file.name }}</span>
+                    <span class="file-size">({{ formatFileSize(file.size) }})</span>
+                  </div>
+                  <el-button v-if="!isUploading" size="small" circle :icon="Delete" class="remove-btn"
+                    @click="removeFile(index)" />
+                </div>
+              </div>
+            </div>
+
             <div class="input-wrapper">
               <el-input v-model="inputMessage" type="textarea" :rows="1" :autosize="{ minRows: 1, maxRows: 6 }"
                 placeholder="输入您的问题..." @keydown.enter.prevent="handleEnter" @keydown.ctrl.enter="handleCtrlEnter"
@@ -235,6 +277,10 @@
             <div class="input-tips">
               <span>按 Enter 发送，Ctrl + Enter 换行</span>
             </div>
+
+            <!-- 隐藏的文件选择input -->
+            <input ref="fileInput" type="file" multiple style="display: none" @change="handleFileSelect"
+              accept=".txt,.doc,.docx,.pdf,.xlsx,.xls,.ppt,.pptx,.md" />
           </div>
         </div>
       </div>
@@ -244,10 +290,11 @@
 
 <script setup name=''>
 import { reactive, toRefs, onBeforeMount, onMounted, nextTick, ref, computed, getCurrentInstance } from 'vue'
-import { Plus, Delete, User, ChatDotRound, Paperclip, Promotion, MoreFilled } from '@element-plus/icons-vue'
+import { Plus, Delete, User, ChatDotRound, Paperclip, Promotion, MoreFilled, Document, Loading } from '@element-plus/icons-vue'
 import { listTopic, getTopic, delTopic, addTopic, updateTopic } from "@/api/llm/topic";
 import { listChat, addChat, updateChat } from "@/api/llm/chat";
-import { getAnswer } from "@/api/llm/session";
+import { listDocument, uploadDocument } from "@/api/llm/document";
+import { getAnswer, getAnswerWithDocument } from "@/api/llm/session";
 import { ElMessage, ElMessageBox } from 'element-plus'
 import useUserStore from '@/store/modules/user'
 import logoImg from '@/assets/images/logo.png'
@@ -271,6 +318,11 @@ const inputMessage = ref('');
 const isLoading = ref(false);
 const messageScrollbar = ref(null);
 const showNewChatWelcome = ref(false);
+const fileInput = ref(null);
+const selectedFiles = ref([]);
+const isUploading = ref(false);
+const documentChartId = ref('');
+const messageFileMap = ref(new Map()); // 存储消息对应的文件列表，key为chartId
 
 const classifiedRecent = ref({
   today: [],
@@ -303,7 +355,7 @@ const handleAction = (command) => {
     deleteTopic(item);
   }
 };
-
+// 删除话题
 const deleteTopic = async (item) => {
   try {
     await ElMessageBox.confirm('确定要删除这个对话吗？', '提示', {
@@ -366,6 +418,10 @@ const loadChatMessages = async (topicId) => {
   try {
     const response = await listChat({ topicId: topicId, pageSize: 1000 });
     chatMessages.value = response.rows || [];
+
+    // 同时加载具有文件的对话
+    await loadMessageFiles();
+
     await nextTick();
     scrollToBottom();
   } catch (error) {
@@ -373,6 +429,31 @@ const loadChatMessages = async (topicId) => {
   }
 };
 
+const loadMessageFiles = async () => {
+  try {
+    // 清空之前的文件映射
+    messageFileMap.value.clear();
+    // 获取所有有chatId的消息
+    const messagesWithChartId = chatMessages.value.filter(msg => msg.chatId);
+
+    // 为每个chartId获取文件列表
+    const promises = messagesWithChartId.map(async (msg) => {
+      try {
+        const fileResponse = await listDocument({ chatId: msg.chatId });
+        if (fileResponse.rows && fileResponse.rows.length > 0) {
+          messageFileMap.value.set(msg.chatId, fileResponse.rows);
+        }
+      } catch (error) {
+        console.error(`Failed to load files for chatId ${msg.chatId}:`, error);
+      }
+    });
+
+    await Promise.all(promises);
+  } catch (error) {
+    console.error('Failed to load message files:', error);
+  }
+};
+
 const sendMessage = async () => {
   if (!inputMessage.value.trim() || isLoading.value) return;
 
@@ -384,7 +465,8 @@ const sendMessage = async () => {
     userId: userStore.id,
     input: inputMessage.value,
     topicId: currentTopicId.value,
-    inputTime: proxy.parseTime(new Date(), '{y}-{m}-{d}')
+    inputTime: proxy.parseTime(new Date(), '{y}-{m}-{d}'),
+    chatId: documentChartId.value || null
   };
 
   // 添加用户消息到聊天记录
@@ -392,6 +474,15 @@ const sendMessage = async () => {
   const messageToSend = inputMessage.value;
   inputMessage.value = '';
 
+  // 暂存文件上传ID，用于后续查询
+  const uploadedFileId = documentChartId.value;
+
+  // 清空文档chartId，确保每次上传只对下一条消息有效
+  documentChartId.value = '';
+
+  // 清空已上传的文件列表
+  selectedFiles.value = [];
+
   await nextTick();
   scrollToBottom();
 
@@ -418,8 +509,15 @@ const sendMessage = async () => {
   // 发送消息到后端，得到回答，并更新到数据库
   try {
     isLoading.value = true;
-    const answer = await getAnswer({ topicId: currentTopicId.value, question: userMessage.input });
-    
+
+    let answer;
+    // 判断是否存在附件，存在则使用getAnswerWithDocument API
+    if (uploadedFileId) {
+      answer = await getAnswerWithDocument({ topicId: currentTopicId.value, chatId: uploadedFileId, question: userMessage.input });
+    } else {
+      answer = await getAnswer({ topicId: currentTopicId.value, question: userMessage.input });
+    }
+
     // 使用Vue的响应式更新方法
     const messageIndex = chatMessages.value.length - 1;
     if (messageIndex >= 0) {
@@ -430,10 +528,35 @@ const sendMessage = async () => {
         outputTime: proxy.parseTime(new Date(), '{y}-{m}-{d}')
       };
     }
-    
+
     // 保存到数据库
-    await addChat(chatMessages.value[messageIndex]);
-    
+    const savedMessage = await addChat(chatMessages.value[messageIndex]);
+
+    // 如果保存成功，更新消息的实际ID
+    if (savedMessage && savedMessage.chatId) {
+      chatMessages.value[messageIndex].chatId = savedMessage.chatId;
+    }
+
+    // 如果当前消息包含文件，使用上传时的ID查询文件列表
+    if (uploadedFileId) {
+      try {
+        const fileResponse = await listDocument({ chatId: uploadedFileId });
+        if (fileResponse.rows && fileResponse.rows.length > 0) {
+          // 使用消息的chatId作为key存储文件列表
+          const messageChatId = chatMessages.value[messageIndex].chatId;
+          const keyToUse = messageChatId || uploadedFileId;
+          messageFileMap.value.set(keyToUse, fileResponse.rows);
+
+          // 确保消息有chatId用于显示
+          if (!chatMessages.value[messageIndex].chatId) {
+            chatMessages.value[messageIndex].chatId = uploadedFileId;
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load files for new message:', error);
+      }
+    }
+
     isLoading.value = false;
     await nextTick();
     scrollToBottom();
@@ -452,7 +575,47 @@ const handleCtrlEnter = () => {
 };
 
 const handleFileUpload = () => {
-  ElMessage.info('文件上传功能开发中...');
+  if (fileInput.value) {
+    fileInput.value.click();
+  }
+};
+
+const handleFileSelect = async (event) => {
+  const files = Array.from(event.target.files);
+  if (files.length > 0) {
+    // 清空input值，允许选择相同文件
+    event.target.value = '';
+
+    // 立即上传文件
+    try {
+      isUploading.value = true;
+      let res = await uploadDocument(files);
+      documentChartId.value = res.chatId;
+      // 上传成功后，将文件添加到已上传列表
+      selectedFiles.value = [...selectedFiles.value, ...files];
+      ElMessage.success(`成功上传 ${files.length} 个文件`);
+
+    } catch (error) {
+      ElMessage.error('文件上传失败');
+      console.error('File upload error:', error);
+    } finally {
+      isUploading.value = false;
+    }
+  }
+};
+
+const removeFile = (index) => {
+  selectedFiles.value.splice(index, 1);
+};
+
+
+
+const formatFileSize = (bytes) => {
+  if (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(2)) + ' ' + sizes[i];
 };
 
 const scrollToBottom = () => {
@@ -579,12 +742,16 @@ const flatMessages = computed(() => {
   for (const msg of chatMessages.value) {
     // 处理用户消息
     if (msg.input && msg.input.trim()) {
-      arr.push({
+      const fileList = msg.chatId ? messageFileMap.value.get(msg.chatId) || [] : [];
+      const userMessage = {
         type: 'user',
         text: msg.input,
         time: msg.inputTime,
         id: msg.chatId || (msg.topicId + '_input_' + msg.inputTime),
-      })
+        chatId: msg.chatId,
+        fileList: fileList
+      };
+      arr.push(userMessage);
     }
     // 处理AI回答消息
     if (msg.output && msg.output.trim()) {
@@ -662,20 +829,20 @@ onMounted(() => {
           height: 100%;
           padding: 20px;
           overflow-y: auto;
-          
+
           &::-webkit-scrollbar {
             width: 6px;
           }
-          
+
           &::-webkit-scrollbar-track {
             background: #f1f1f1;
             border-radius: 3px;
           }
-          
+
           &::-webkit-scrollbar-thumb {
             background: #c1c1c1;
             border-radius: 3px;
-            
+
             &:hover {
               background: #a8a8a8;
             }
@@ -799,6 +966,65 @@ onMounted(() => {
                 text-align: right;
               }
             }
+
+            .message-files {
+              margin-top: 8px;
+              border: 1px solid #e9ecef;
+              border-radius: 8px;
+              background-color: #f8f9fa;
+              padding: 8px;
+
+              .files-header {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                font-size: 12px;
+                color: #666;
+                margin-bottom: 6px;
+                font-weight: 500;
+
+                .el-icon {
+                  font-size: 14px;
+                }
+              }
+
+              .files-list {
+                .file-item-display {
+                  display: flex;
+                  align-items: center;
+                  gap: 6px;
+                  padding: 4px 8px;
+                  background-color: white;
+                  border-radius: 4px;
+                  margin-bottom: 4px;
+                  border: 1px solid #e9ecef;
+
+                  &:last-child {
+                    margin-bottom: 0;
+                  }
+
+                  .file-icon {
+                    color: #666;
+                    font-size: 14px;
+                  }
+
+                  .file-name {
+                    flex: 1;
+                    font-size: 12px;
+                    color: #333;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+
+                  .file-size {
+                    font-size: 11px;
+                    color: #999;
+                    white-space: nowrap;
+                  }
+                }
+              }
+            }
           }
         }
 
@@ -830,6 +1056,98 @@ onMounted(() => {
         padding: 16px;
         background-color: white;
 
+        .file-list-container {
+          margin-bottom: 12px;
+          border: 1px solid #e9ecef;
+          border-radius: 8px;
+          background-color: #f8f9fa;
+
+          .file-list-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            border-bottom: 1px solid #e9ecef;
+            font-size: 14px;
+            font-weight: 500;
+            color: #333;
+
+            .loading-icon {
+              animation: rotate 1s linear infinite;
+              color: #007bff;
+              font-size: 16px;
+            }
+          }
+
+          .file-list {
+            max-height: 200px;
+            overflow-y: auto;
+            padding: 8px;
+
+            .file-item {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 8px 12px;
+              margin-bottom: 4px;
+              background-color: white;
+              border-radius: 6px;
+              border: 1px solid #e9ecef;
+              transition: all 0.2s ease;
+
+              &:hover {
+                border-color: #007bff;
+                box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
+              }
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+
+              .file-info {
+                display: flex;
+                align-items: center;
+                flex: 1;
+                min-width: 0;
+
+                .file-icon {
+                  margin-right: 8px;
+                  color: #666;
+                  font-size: 16px;
+                }
+
+                .file-name {
+                  font-size: 14px;
+                  color: #333;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  margin-right: 8px;
+                }
+
+                .file-size {
+                  font-size: 12px;
+                  color: #999;
+                  white-space: nowrap;
+                }
+              }
+
+              .remove-btn {
+                color: #dc3545;
+                border: none;
+                background: transparent;
+                padding: 4px;
+                min-height: auto;
+
+                &:hover {
+                  background-color: rgba(220, 53, 69, 0.1);
+                  color: #dc3545;
+                }
+              }
+            }
+          }
+        }
+
         .input-wrapper {
           position: relative;
           border: 1px solid #e9ecef;
@@ -989,4 +1307,14 @@ onMounted(() => {
     transform: scale(1);
   }
 }
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>