feat：【ai 大模型】对话列表，增加 attachment-urls 附件的展示（unocss 改写）

src/views/ai/chat/index/components/message/MessageFiles.vue

@@ -1,19 +1,25 @@
 <template>
-  <div v-if="attachmentUrls && attachmentUrls.length > 0" class="message-files">
-    <div class="files-container">
+  <div v-if="attachmentUrls && attachmentUrls.length > 0" class="mt-2">
+    <div class="flex flex-wrap gap-2">
       <div
         v-for="(url, index) in attachmentUrls"
         :key="index"
-        class="file-card"
+        class="flex items-center p-3 bg-gray-1 rounded-2 cursor-pointer transition-all duration-200 min-w-40 max-w-70 border border-transparent hover:(bg-gray-2 -translate-y-1 shadow-lg)"
         @click="handleFileClick(url)"
       >
-        <div class="file-icon-wrapper">
-          <div class="file-icon" :class="getFileTypeClass(getFileNameFromUrl(url))">
+        <div class="mr-3 flex-shrink-0">
+          <div
+            class="flex items-center justify-center w-8 h-8 rounded-1.5 text-white font-bold"
+            :class="getFileTypeClass(getFileNameFromUrl(url))"
+          >
             <Icon :icon="getFileIcon(getFileNameFromUrl(url))" :size="20" />
           </div>
         </div>
-        <div class="file-content">
-          <div class="file-name" :title="getFileNameFromUrl(url)">
+        <div class="flex-1 min-w-0">
+          <div
+            class="text-sm font-medium text-gray-8 leading-tight mb-1 overflow-hidden text-ellipsis whitespace-nowrap"
+            :title="getFileNameFromUrl(url)"
+          >
             {{ getFileNameFromUrl(url) }}
           </div>
         </div>
@@ -35,21 +41,21 @@ defineProps<{
 const getFileTypeClass = (filename: string): string => {
   const ext = filename.split('.').pop()?.toLowerCase() || ''
   if (isImage(ext)) {
-    return 'file-image'
+    return 'bg-gradient-to-br from-yellow-4 to-orange-5'
   } else if (['pdf'].includes(ext)) {
-    return 'file-pdf'
+    return 'bg-gradient-to-br from-red-5 to-red-7'
   } else if (['doc', 'docx'].includes(ext)) {
-    return 'file-word'
+    return 'bg-gradient-to-br from-blue-6 to-blue-8'
   } else if (['xls', 'xlsx'].includes(ext)) {
-    return 'file-excel'
+    return 'bg-gradient-to-br from-green-6 to-green-8'
   } else if (['ppt', 'pptx'].includes(ext)) {
-    return 'file-powerpoint'
+    return 'bg-gradient-to-br from-orange-6 to-orange-8'
   } else if (['mp3', 'wav', 'm4a', 'aac'].includes(ext)) {
-    return 'file-audio'
+    return 'bg-gradient-to-br from-purple-5 to-purple-7'
   } else if (['mp4', 'avi', 'mov', 'wmv'].includes(ext)) {
-    return 'file-video'
+    return 'bg-gradient-to-br from-red-5 to-red-7'
   } else {
-    return 'file-default'
+    return 'bg-gradient-to-br from-gray-5 to-gray-7'
   }
 }
 
@@ -58,99 +64,3 @@ const handleFileClick = (url: string) => {
   window.open(url, '_blank')
 }
 </script>
-
-<style scoped>
-.message-files {
-  margin-top: 8px;
-}
-
-.files-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.file-card {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  background: #f5f5f5;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 160px;
-  max-width: 280px;
-  border: 1px solid transparent;
-}
-
-.file-card:hover {
-  background: #ebebeb;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.file-icon-wrapper {
-  margin-right: 12px;
-  flex-shrink: 0;
-}
-
-.file-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  color: white;
-  font-weight: bold;
-}
-
-/* 不同文件类型的图标背景色 */
-.file-icon.file-image {
-  background: linear-gradient(135deg, #ffd700, #ffa500);
-}
-
-.file-icon.file-pdf {
-  background: linear-gradient(135deg, #ff4444, #cc1111);
-}
-
-.file-icon.file-word {
-  background: linear-gradient(135deg, #2b5797, #1e3f66);
-}
-
-.file-icon.file-excel {
-  background: linear-gradient(135deg, #1d6f42, #0f4728);
-}
-
-.file-icon.file-powerpoint {
-  background: linear-gradient(135deg, #d24726, #a73319);
-}
-
-.file-icon.file-audio {
-  background: linear-gradient(135deg, #9c27b0, #6a1b9a);
-}
-
-.file-icon.file-video {
-  background: linear-gradient(135deg, #f44336, #c62828);
-}
-
-.file-icon.file-default {
-  background: linear-gradient(135deg, #607d8b, #455a64);
-}
-
-.file-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.file-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  line-height: 1.3;
-  margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>

src/views/ai/chat/index/index.vue

@@ -488,6 +488,7 @@ const doSendMessageStream = async (userMessage: ChatMessageVO) => {
           activeMessageList.value.pop()
           // 更新返回的数据
           activeMessageList.value.push(data.send)
+          data.send.attachmentUrls = userMessage.attachmentUrls
           activeMessageList.value.push(data.receive)
         }