From e797cb24def2c32a1d9355789eb970fc99fde566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Mon, 11 Aug 2025 19:24:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A5=E5=8D=95=E9=99=84?=
 =?UTF-8?q?=E4=BB=B6=20=20=E5=8F=8A=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/customer/index.vue       |   4 +-
 src/views/admin/inquiry_system/index.vue |   5 +-
 src/views/admin/user/index.vue           |  15 +-
 src/views/work/myOrder/index.vue         | 252 +++++++++++++++++++++-
 src/views/work/order/index.vue           | 263 ++++++++++++++++++++++-
 5 files changed, 520 insertions(+), 19 deletions(-)

diff --git a/src/views/admin/customer/index.vue b/src/views/admin/customer/index.vue
index 6a427a2..1c505ea 100644
--- a/src/views/admin/customer/index.vue
+++ b/src/views/admin/customer/index.vue
@@ -40,7 +40,7 @@
             <span :class="['tag-item', { 'tag-active': tagActiveMap[item.id] === item1.id }]">
               {{ item1.name }}
             </span>
-            <el-badge :value="item1.count" :max="99" class="itemtag" type="primary"> </el-badge>
+            <!-- <el-badge :value="item1.count" :max="99" class="itemtag" type="primary"> </el-badge> -->
           </span>
         </div>
       </div>
@@ -64,7 +64,7 @@
                 <span :class="['tag-item', { 'tag-active': tagActiveMap[item.id] === item1.id }]">
                   {{ item1.name }}
                 </span>
-                <el-badge :value="item1.count" :max="99" class="itemtag" type="primary"> </el-badge>
+                <!-- <el-badge :value="item1.count" :max="99" class="itemtag" type="primary"> </el-badge> -->
               </span>
             </div>
           </div>
diff --git a/src/views/admin/inquiry_system/index.vue b/src/views/admin/inquiry_system/index.vue
index 963f6f7..3804990 100644
--- a/src/views/admin/inquiry_system/index.vue
+++ b/src/views/admin/inquiry_system/index.vue
@@ -91,7 +91,10 @@
               <span>
                 {{scope.row.countryInfo? scope.row.countryInfo.cn_addr : ''}}
               </span>
-              <el-tag class="steer" type="warning"  v-if="scope.row.countryInfo">{{ scope.row.countryInfo.steering }}</el-tag>
+              <span  v-if="scope.row.countryInfo">
+                <el-tag class="steer" type="warning"  v-if="scope.row.countryInfo.steering=='左舵'">{{ scope.row.countryInfo.steering }}</el-tag>
+                <el-tag class="steer" type="success" v-else-if="scope.row.countryInfo.steering=='右舵'">{{ scope.row.countryInfo.steering }}</el-tag>
+              </span>
               <!-- <span class="steer" v-if="scope.row.countryInfo">{{ scope.row.countryInfo.steering }}</span> -->
             </template>
           </el-table-column>
diff --git a/src/views/admin/user/index.vue b/src/views/admin/user/index.vue
index ee47432..119288e 100644
--- a/src/views/admin/user/index.vue
+++ b/src/views/admin/user/index.vue
@@ -30,22 +30,23 @@
         lass="customer-table"
       >
         <template #default>
-          <el-table-column prop="id" label="用户ID" align="center" />
+          <!-- <el-table-column prop="id" label="用户ID" align="center" /> -->
           <el-table-column prop="sn" label="SN" align="center" />
           <el-table-column prop="follow" label="头像" align="center">
             <template #default="scope">
-              <img 
-                :src="scope.row.avatar" 
-                alt="头像" 
-                class="avatar" 
+              <img
+                :src="scope.row.avatar"
+                alt="头像"
+                class="avatar"
                 @click="handleAvatarClick(scope.row.avatar)"
-                style="cursor: pointer;"
+                style="cursor: pointer"
               />
             </template>
           </el-table-column>
-          <el-table-column prop="name" label="用户名称" align="center" />
+          <el-table-column prop="name" label="名字" align="center" />
           <el-table-column prop="phone" label="电话" align="center" />
           <el-table-column prop="email" label="邮箱" align="center" />
+          <el-table-column prop="corp_name" label="所属公司" align="center" />
           <el-table-column prop="follow" label="状态" align="center">
             <template #default="scope">
               <span :class="statusClass(scope.row.status)">
diff --git a/src/views/work/myOrder/index.vue b/src/views/work/myOrder/index.vue
index 3b2fd0a..112f024 100644
--- a/src/views/work/myOrder/index.vue
+++ b/src/views/work/myOrder/index.vue
@@ -183,18 +183,96 @@
           <div class="chat-messages" ref="messageContainer">
             <template v-for="(message, index) in messages" :key="index">
               <div :class="['message-item', String(message.user_id) === String(userid) ? 'message-right' : 'message-left']">
-                <el-avatar :size="32" :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar" class="message-avatar" />
+                <el-avatar :size="32" :src="message.user_avatar" class="message-avatar" />
                 <div class="message-content">
                   <div class="message-info">
-                    <span class="sender-name">{{ message.user_id }}</span>
+                    <span class="sender-name">{{ message.user_name }}</span>
                     <span class="message-time">{{ message.updated_at }}</span>
                   </div>
                   <div class="message-text">{{ message.content }}</div>
+                  <!-- 附件显示区域 -->
+                  <div class="message-attachments" v-if="message.attachment && message.attachment.length > 0">
+                    <div class="attachment-item" v-for="(attachment, attIndex) in message.attachment" :key="attIndex">
+                      <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(attachment.original_name)">
+                        <img 
+                          :src="attachment.storage_path_full" 
+                          :alt="attachment.original_name" 
+                          class="attachment-thumb" 
+                          @click="handleChatImageClick(attachment.storage_path_full)"
+                        />
+                      </template>
+                      <template v-else-if="/\.(mp4|webm|ogg)$/i.test(attachment.original_name)">
+                        <video 
+                          :src="attachment.storage_path_full" 
+                          controls 
+                          class="attachment-thumb"
+                          @click.prevent="handleChatVideoClick(attachment.storage_path_full)"
+                        ></video>
+                      </template>
+                      <template v-else>
+                        <div class="file-attachment">
+                          <el-icon class="file-icon"><Document /></el-icon>
+                          <span class="file-name">{{ attachment.original_name }}</span>
+                          <el-button 
+                            type="primary" 
+                            size="small" 
+                            link 
+                            @click="downloadAttachment(attachment)"
+                          >
+                            下载
+                          </el-button>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
                 </div>
               </div>
             </template>
           </div>
           <div class="chat-input" v-if="hasAuth('work_order_self@conversation_add')">
+            <!-- 附件上传区域 -->
+            <div class="chat-attachment-upload">
+              <el-upload
+                v-model:file-list="chatFileList"
+                class="chat-upload"
+                :action="actionImageUplode"
+                :on-success="handleChatUploadSuccess"
+                :headers="uploadHeaders"
+                multiple
+                :limit="5"
+                :on-exceed="handleChatExceed"
+                :show-file-list="false"
+              >
+                <el-button type="primary" link>
+                  <el-icon><Paperclip /></el-icon>
+                  添加附件
+                </el-button>
+              </el-upload>
+              <!-- 已上传附件预览 -->
+              <div class="uploaded-attachments" v-if="chatFileList.length > 0">
+                <div class="attachment-preview-item" v-for="(file, idx) in chatFileList" :key="idx">
+                  <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
+                    <img 
+                      :src="file.file_url || file.response?.data?.file_url" 
+                      :alt="file.name" 
+                      class="preview-thumb"
+                    />
+                  </template>
+                  <template v-else>
+                    <el-icon class="file-icon"><Document /></el-icon>
+                  </template>
+                  <span class="file-name">{{ file.name }}</span>
+                  <el-button 
+                    type="danger" 
+                    size="small" 
+                    link 
+                    @click="removeChatFile(idx)"
+                  >
+                    <el-icon><Close /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+            </div>
             <el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
               @keyup.enter.prevent="sendMessage" />
             <ElInput v-model="ticket_id" type="hidden" />
@@ -226,7 +304,7 @@
       </ElDialog>
 
       <!-- 图片预览弹窗 -->
-      <ElImageViewer v-if="imageViewerVisible" :url-list="imageList" :initial-index="imageViewerIndex" @close="imageViewerVisible = false" />
+      <ElImageViewer v-if="imageViewerVisible" :url-list="chatImageList.length > 0 ? chatImageList : imageList" :initial-index="imageViewerIndex" @close="closeImageViewer" />
       <!-- 视频预览弹窗 -->
       <ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
         <video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
@@ -247,6 +325,7 @@
   import { useAuth } from "@/composables/useAuth";
   import { useUserStore } from '@/store/modules/user'
   import { useUploadHeaders } from '@/composables/useUploadHeaders'
+  import { Paperclip, Document, Close } from '@element-plus/icons-vue'
   const { uploadHeaders } = useUploadHeaders()
   const { info } = useUserStore()
   const userid = info.user.id
@@ -279,6 +358,10 @@
   }
   const openChat = (row: any) => {
     isDrawerVisible.value = true
+    // 清空数据
+    messageText.value = ''
+    messages.value = []
+    chatFileList.value = []
     getConversationList(row.id)
   }
 
@@ -380,14 +463,28 @@
   const sendMessage = async () => {
     const text = messageText.value.trim()
     const ids = ticket_id.value
-    if (!text) return
+    if (!text && chatFileList.value.length === 0) return
+    
+    // 准备附件数据
+    const attachments = chatFileList.value.map(file => {
+      const data = file.response?.data
+      if (data) {
+        return {
+          original_name: data.original_name,
+          storage_path: data.storage_path || data.file_name
+        }
+      }
+      return null
+    }).filter(Boolean)
     
     const { message } = await WorkService.conversationAdd({
       content: text,
       ticket_id: ids,
+      attachment: attachments
     })
     ElMessage.success(message)
     messageText.value = ''
+    chatFileList.value = [] // 清空附件列表
     getConversationList(ids)
     scrollToBottom()
   }    
@@ -523,6 +620,8 @@
   const imageViewerVisible = ref(false)
   const imageViewerIndex = ref(0)
   const imageList = computed(() => fileList.value.filter(file => /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)).map(file => file.file_url?file.file_url:file.response.data.file_url))
+  // 聊天图片预览列表
+  const chatImageList = ref<string[]>([])
   function handleImageClick(idx: number) {
     imageViewerIndex.value = idx
     imageViewerVisible.value = true
@@ -533,6 +632,52 @@
   function handleVideoClick(url: string) {
     currentVideoUrl.value = url
     videoDialogVisible.value = true
+  }
+
+     // 聊天相关
+   const chatFileList = ref<any[]>([])
+   const handleChatUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
+     chatFileList.value = uploadFiles.filter(item => item.status === 'success').map(item => {
+       const data = item.response?.data
+       if (data) {
+         return {
+           name: data.original_name,
+           file_url: data.storage_path_full,
+           status: 'success',
+           response: { data: data }
+         }
+       }
+       return null
+     }).filter(Boolean)
+   }
+  const handleChatExceed = () => {
+    ElMessage.warning('最多上传5个文件')
+  }
+  const removeChatFile = (index: number) => {
+    chatFileList.value.splice(index, 1)
+  }
+  const handleChatImageClick = (url: string) => {
+    // 设置聊天图片预览列表
+    chatImageList.value = [url]
+    imageViewerIndex.value = 0
+    imageViewerVisible.value = true
+  }
+  
+  const closeImageViewer = () => {
+    imageViewerVisible.value = false
+    chatImageList.value = [] // 清空聊天图片列表
+  }
+  const handleChatVideoClick = (url: string) => {
+    currentVideoUrl.value = url
+    videoDialogVisible.value = true
+  }
+  const downloadAttachment = (attachment: any) => {
+    const link = document.createElement('a')
+    link.href = attachment.storage_path_full
+    link.download = attachment.original_name
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
   }
 </script>
 
@@ -618,6 +763,7 @@
 
             .message-info {
               flex-direction: row;
+              align-items: center;
             }
 
             .message-text {
@@ -634,6 +780,7 @@
 
             .message-info {
               flex-direction: row-reverse;
+              align-items: center;
             }
 
             .message-text {
@@ -757,4 +904,101 @@
       margin-top: 2px;
     }
   }
+
+  // 聊天附件样式
+  .message-right .message-attachments{
+    text-align: right;
+  }
+  .message-left .message-attachments{
+    text-align: left;
+  }
+  .message-attachments {
+    margin-top: 8px;
+    
+    .attachment-item {
+      margin-bottom: 8px;
+      
+      .attachment-thumb {
+        max-width: 200px;
+        max-height: 150px;
+        border-radius: 6px;
+        cursor: pointer;
+        border: 1px solid var(--el-border-color-lighter);
+        transition: transform 0.2s;
+        
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
+      
+      .file-attachment {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: var(--el-fill-color-light);
+        border-radius: 6px;
+        border: 1px solid var(--el-border-color-lighter);
+        
+        .file-icon {
+          font-size: 16px;
+          color: var(--el-text-color-regular);
+        }
+        
+        .file-name {
+          flex: 1;
+          font-size: 14px;
+          color: var(--el-text-color-regular);
+          word-break: break-all;
+        }
+      }
+    }
+  }
+
+  .chat-attachment-upload {
+    margin-bottom: 12px;
+    
+    .chat-upload {
+      margin-bottom: 8px;
+    }
+    
+    .uploaded-attachments {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      
+      .attachment-preview-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: var(--el-fill-color-light);
+        border-radius: 6px;
+        border: 1px solid var(--el-border-color-lighter);
+        max-width: 200px;
+        
+        .preview-thumb {
+          width: 40px;
+          height: 40px;
+          border-radius: 4px;
+          object-fit: cover;
+        }
+        
+        .file-icon {
+          font-size: 16px;
+          color: var(--el-text-color-regular);
+        }
+        
+        .file-name {
+          flex: 1;
+          font-size: 12px;
+          color: var(--el-text-color-regular);
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
 </style>
diff --git a/src/views/work/order/index.vue b/src/views/work/order/index.vue
index 764cc1b..faadffb 100644
--- a/src/views/work/order/index.vue
+++ b/src/views/work/order/index.vue
@@ -123,22 +123,101 @@
                   String(message.user_id) === String(userid) ? 'message-right' : 'message-left'
                 ]"
               >
+              <!-- :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar" -->
                 <el-avatar
                   :size="32"
-                  :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar"
+                  :src="message.user_avatar"
                   class="message-avatar"
                 />
                 <div class="message-content">
                   <div class="message-info">
-                    <span class="sender-name">{{ message.user_id }}</span>
+                    <span class="sender-name">{{ message.user_name }}</span>
                     <span class="message-time">{{ message.updated_at }}</span>
                   </div>
                   <div class="message-text">{{ message.content }}</div>
+                  <!-- 附件显示区域 -->
+                  <div class="message-attachments" v-if="message.attachment && message.attachment.length > 0">
+                    <div class="attachment-item" v-for="(attachment, attIndex) in message.attachment" :key="attIndex">
+                      <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(attachment.original_name)">
+                        <img 
+                          :src="attachment.storage_path_full" 
+                          :alt="attachment.original_name" 
+                          class="attachment-thumb" 
+                          @click="handleChatImageClick(attachment.storage_path_full)"
+                        />
+                      </template>
+                      <template v-else-if="/\.(mp4|webm|ogg)$/i.test(attachment.original_name)">
+                        <video 
+                          :src="attachment.storage_path_full" 
+                          controls 
+                          class="attachment-thumb"
+                          @click.prevent="handleChatVideoClick(attachment.storage_path_full)"
+                        ></video>
+                      </template>
+                      <template v-else>
+                        <div class="file-attachment">
+                          <el-icon class="file-icon"><Document /></el-icon>
+                          <span class="file-name">{{ attachment.original_name }}</span>
+                          <el-button 
+                            type="primary" 
+                            size="small" 
+                            link 
+                            @click="downloadAttachment(attachment)"
+                          >
+                            下载
+                          </el-button>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
                 </div>
               </div>
             </template>
           </div>
           <div class="chat-input" v-if="hasAuth('work_order@conversation_add')">
+            <!-- 附件上传区域 -->
+            <div class="chat-attachment-upload">
+              <el-upload
+                v-model:file-list="chatFileList"
+                class="chat-upload"
+                :action="actionImageUplode"
+                :on-success="handleChatUploadSuccess"
+                :headers="uploadHeaders"
+                multiple
+                :limit="5"
+                :on-exceed="handleChatExceed"
+                :show-file-list="false"
+              >
+                <el-button type="primary" link>
+                  <el-icon><Paperclip /></el-icon>
+                  添加附件
+                </el-button>
+              </el-upload>
+              <!-- 已上传附件预览 -->
+              <div class="uploaded-attachments" v-if="chatFileList.length > 0">
+                <div class="attachment-preview-item" v-for="(file, idx) in chatFileList" :key="idx">
+                  <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
+                    <img 
+                      :src="file.file_url || file.response?.data?.file_url" 
+                      :alt="file.name" 
+                      class="preview-thumb"
+                    />
+                  </template>
+                  <template v-else>
+                    <el-icon class="file-icon"><Document /></el-icon>
+                  </template>
+                  <span class="file-name">{{ file.name }}</span>
+                  <el-button 
+                    type="danger" 
+                    size="small" 
+                    link 
+                    @click="removeChatFile(idx)"
+                  >
+                    <el-icon><Close /></el-icon>
+                  </el-button>
+                </div>
+              </div>
+            </div>
             <el-input
               v-model="messageText"
               type="textarea"
@@ -175,8 +254,8 @@
         </template>
       </ElDialog>
 
-      <!-- 图片预览弹窗 -->
-      <ElImageViewer v-if="imageViewerVisible" :url-list="imageList" :initial-index="imageViewerIndex" @close="imageViewerVisible = false" />
+             <!-- 图片预览弹窗 -->
+       <ElImageViewer v-if="imageViewerVisible" :url-list="chatImageList.length > 0 ? chatImageList : imageList" :initial-index="imageViewerIndex" @close="closeImageViewer" />
       <!-- 视频预览弹窗 -->
       <ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
         <video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
@@ -197,6 +276,7 @@ import { ElImageViewer } from 'element-plus'
 import { useAuth } from "@/composables/useAuth";
 import { useUserStore } from '@/store/modules/user'
 import { useUploadHeaders } from '@/composables/useUploadHeaders'
+import { Paperclip, Document, Close } from '@element-plus/icons-vue'
 const { uploadHeaders } = useUploadHeaders()
 const { hasAuth } = useAuth();
 defineOptions({ name: 'Order' })
@@ -232,6 +312,10 @@ const scrollToBottom = () => {
 }
 const openChat = (row: any) => {
   isDrawerVisible.value = true
+  // 清空数据
+  messageText.value = ''
+  messages.value = []
+  chatFileList.value = []
   getConversationList(row.id)
 }
 
@@ -333,14 +417,28 @@ const getConversationList = async (id:any) => {
 const sendMessage = async () => {
   const text = messageText.value.trim()
   const ids = ticket_id.value
-  if (!text) return
+  if (!text && chatFileList.value.length === 0) return
+  
+  // 准备附件数据
+  const attachments = chatFileList.value.map(file => {
+    const data = file.response?.data
+    if (data) {
+      return {
+        original_name: data.original_name,
+        storage_path: data.storage_path || data.file_name
+      }
+    }
+    return null
+  }).filter(Boolean)
   
   const { message } = await WorkService.conversationAdd({
     content: text,
     ticket_id: ids,
+    attachment: attachments
   })
   ElMessage.success(message)
   messageText.value = ''
+  chatFileList.value = [] // 清空附件列表
   getConversationList(ids)
   scrollToBottom()
 }    
@@ -473,6 +571,8 @@ const statusSubmit = async () => {
 const imageViewerVisible = ref(false)
 const imageViewerIndex = ref(0)
 const imageList = computed(() => fileList.value.filter(file => /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)).map(file => file.file_url?file.file_url:file.response.data.file_url))
+// 聊天图片预览列表
+const chatImageList = ref<string[]>([])
 function handleImageClick(idx: number) {
   imageViewerIndex.value = idx
   imageViewerVisible.value = true
@@ -484,6 +584,60 @@ function handleVideoClick(url: string) {
   currentVideoUrl.value = url
   videoDialogVisible.value = true
 }
+
+// 聊天相关
+const chatFileList = ref<any[]>([])
+const handleChatUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
+  chatFileList.value = uploadFiles.filter(item => item.status === 'success').map(item => {
+    const data = item.response?.data
+    if (data) {
+      return {
+        name: data.original_name,
+        file_url: data.storage_path_full,
+        status: 'success',
+        response: { data: data }
+      }
+    }
+    return null
+  }).filter(Boolean)
+}
+const handleChatExceed = () => {
+  ElMessage.warning('最多上传5个文件')
+}
+const removeChatFile = (index: number) => {
+  chatFileList.value.splice(index, 1)
+}
+const handleChatImageClick = (url: string) => {
+  // 设置聊天图片预览列表
+  chatImageList.value = [url]
+  imageViewerIndex.value = 0
+  imageViewerVisible.value = true
+}
+
+const closeImageViewer = () => {
+  imageViewerVisible.value = false
+  chatImageList.value = [] // 清空聊天图片列表
+}
+const handleChatVideoClick = (url: string) => {
+  currentVideoUrl.value = url
+  videoDialogVisible.value = true
+}
+const downloadAttachment = (attachment: any) => {
+  try {
+    const fileName = attachment.original_name || 'download'
+    const link = document.createElement('a')
+    link.href = attachment.storage_path_full
+    link.download = fileName
+    link.target = '_blank'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    ElMessage.success('开始下载')
+  } catch (error) {
+    ElMessage.error('下载失败')
+    console.error('下载失败:', error)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -568,6 +722,7 @@ function handleVideoClick(url: string) {
 
           .message-info {
             flex-direction: row;
+            align-items: center;
           }
 
           .message-text {
@@ -584,6 +739,7 @@ function handleVideoClick(url: string) {
 
           .message-info {
             flex-direction: row-reverse;
+            align-items: center;
           }
 
           .message-text {
@@ -707,4 +863,101 @@ function handleVideoClick(url: string) {
     margin-top: 2px;
   }
 }
+
+// 聊天附件样式
+.message-right .message-attachments{
+  text-align: right;
+}
+.message-left .message-attachments{
+  text-align: left;
+}
+.message-attachments {
+  margin-top: 8px;
+  
+  .attachment-item {
+    margin-bottom: 8px;
+    
+    .attachment-thumb {
+      max-width: 200px;
+      max-height: 150px;
+      border-radius: 6px;
+      cursor: pointer;
+      border: 1px solid var(--el-border-color-lighter);
+      transition: transform 0.2s;
+      
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+    
+    .file-attachment {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: var(--el-fill-color-light);
+      border-radius: 6px;
+      border: 1px solid var(--el-border-color-lighter);
+      
+      .file-icon {
+        font-size: 16px;
+        color: var(--el-text-color-regular);
+      }
+      
+      .file-name {
+        flex: 1;
+        font-size: 14px;
+        color: var(--el-text-color-regular);
+        word-break: break-all;
+      }
+    }
+  }
+}
+
+.chat-attachment-upload {
+  margin-bottom: 12px;
+  
+  .chat-upload {
+    margin-bottom: 8px;
+  }
+  
+  .uploaded-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    
+    .attachment-preview-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      background: var(--el-fill-color-light);
+      border-radius: 6px;
+      border: 1px solid var(--el-border-color-lighter);
+      max-width: 200px;
+      
+      .preview-thumb {
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        object-fit: cover;
+      }
+      
+      .file-icon {
+        font-size: 16px;
+        color: var(--el-text-color-regular);
+      }
+      
+      .file-name {
+        flex: 1;
+        font-size: 12px;
+        color: var(--el-text-color-regular);
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file