聊天增加图片功能

frontend/src/views/account/ChatView.vue

@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+import { ArrowLeft, Close, Loading, Picture } from '@element-plus/icons-vue'
 import {
   fetchChat,
   fetchChatMessages,
@@ -11,6 +11,8 @@ import {
   type ChatConversation,
   type ChatMessage,
 } from '@/api/chats'
+import { uploadFile } from '@/api/files'
+import ChatAttachmentImage from '@/components/ChatAttachmentImage.vue'
 import { useChatSSE, type ChatEvent } from '@/composables/useChatSSE'
 import { formatDateMinute } from '@/utils/time'
 
@@ -22,10 +24,14 @@ const conversation = ref<ChatConversation | null>(null)
 const messages = ref<ChatMessage[]>([])
 const loading = ref(false)
 const sending = ref(false)
+const uploading = ref(false)
 const content = ref('')
+const attachments = ref<string[]>([])
 const listRef = ref<HTMLElement | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
 
 const conversationID = computed(() => Number(route.params.id || 0))
+const canSend = computed(() => content.value.trim() !== '' || attachments.value.length > 0)
 const memberText = computed(() => {
   const participants = conversation.value?.participants || []
   if (participants.length === 0) return conversation.value?.type === 'general_support' ? '平台客服' : '订单群聊'
@@ -107,12 +113,14 @@ async function loadMessages(scrollToBottom = true) {
 
 async function handleSend() {
   const text = content.value.trim()
-  if (!text || sending.value) return
+  const imageUrls = [...attachments.value]
+  if ((!text && imageUrls.length === 0) || sending.value || uploading.value) return
   sending.value = true
   try {
-    const sent = await sendChatMessage(conversationID.value, text)
+    const sent = await sendChatMessage(conversationID.value, text, imageUrls)
     appendMessage(sent)
     content.value = ''
+    attachments.value = []
     await loadConversation()
   } catch {
     ElMessage.error('发送失败')
@@ -121,6 +129,45 @@ async function handleSend() {
   }
 }
 
+function pickImages() {
+  if (uploading.value || attachments.value.length >= 9) return
+  fileInputRef.value?.click()
+}
+
+async function handleImageChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files || [])
+  input.value = ''
+  if (files.length === 0) return
+  const slots = 9 - attachments.value.length
+  if (slots <= 0) {
+    ElMessage.warning('每条消息最多发送 9 张图片')
+    return
+  }
+  uploading.value = true
+  try {
+    for (const file of files.slice(0, slots)) {
+      if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 10 * 1024 * 1024) {
+        ElMessage.warning(`${file.name} 不符合图片规则`)
+        continue
+      }
+      const uploaded = await uploadFile(file, 'chat')
+      attachments.value.push(uploaded.url)
+    }
+    if (files.length > slots) {
+      ElMessage.warning('每条消息最多发送 9 张图片')
+    }
+  } catch {
+    ElMessage.error('图片上传失败')
+  } finally {
+    uploading.value = false
+  }
+}
+
+function removeAttachment(index: number) {
+  attachments.value.splice(index, 1)
+}
+
 function appendMessage(message: ChatMessage) {
   if (messages.value.some(item => item.id === message.id)) return
   messages.value = [...messages.value, message]
@@ -200,7 +247,14 @@ function handleKeydown(e: KeyboardEvent) {
             <div class="avatar" :class="{ self: item.is_self }">{{ roleLabel(item.sender_role).slice(0, 1) }}</div>
             <div class="bubble-wrap" :class="{ self: item.is_self }">
               <span class="sender-name">{{ senderLabel(item) }}</span>
-              <div class="bubble">{{ item.content }}</div>
+              <div v-if="item.content" class="bubble">{{ item.content }}</div>
+              <div v-if="item.attachment_urls.length > 0" class="message-attachments">
+                <ChatAttachmentImage
+                  v-for="url in item.attachment_urls"
+                  :key="url"
+                  :source="url"
+                />
+              </div>
               <span class="message-time">{{ formatDateMinute(item.created_at) }}</span>
             </div>
           </template>
@@ -209,6 +263,22 @@ function handleKeydown(e: KeyboardEvent) {
 
       <!-- Composer -->
       <div class="composer">
+        <div v-if="attachments.length > 0" class="pending-attachments">
+          <div v-for="(url, index) in attachments" :key="url" class="pending-item">
+            <ChatAttachmentImage :source="url" />
+            <button type="button" class="remove-attachment" @click="removeAttachment(index)">
+              <el-icon :size="14"><Close /></el-icon>
+            </button>
+          </div>
+        </div>
+        <input
+          ref="fileInputRef"
+          class="hidden-file"
+          type="file"
+          accept="image/jpeg,image/png,image/webp"
+          multiple
+          @change="handleImageChange"
+        >
         <el-input
           v-model="content"
           type="textarea"
@@ -221,9 +291,14 @@ function handleKeydown(e: KeyboardEvent) {
         />
         <div class="composer-actions">
           <span class="composer-hint">Enter 发送，Shift+Enter 换行</span>
-          <el-button type="primary" :disabled="!content.trim() || sending" :loading="sending" @click="handleSend">
-            发送
-          </el-button>
+          <div class="composer-buttons">
+            <el-button :icon="Picture" :loading="uploading" :disabled="attachments.length >= 9" @click="pickImages">
+              图片
+            </el-button>
+            <el-button type="primary" :disabled="!canSend || sending || uploading" :loading="sending" @click="handleSend">
+              发送
+            </el-button>
+          </div>
         </div>
       </div>
     </div>
@@ -376,6 +451,12 @@ function handleKeydown(e: KeyboardEvent) {
   color: #0f5132;
 }
 
+.message-attachments {
+  display: grid;
+  gap: 6px;
+  margin-top: 6px;
+}
+
 .message-time {
   margin-top: 4px;
   color: #a1a8b4;
@@ -400,6 +481,46 @@ function handleKeydown(e: KeyboardEvent) {
   background: #fafbfc;
 }
 
+.pending-attachments {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+  overflow-x: auto;
+}
+
+.pending-item {
+  position: relative;
+  flex: none;
+}
+
+.pending-item :deep(.chat-image-button) {
+  width: 86px;
+  height: 86px;
+}
+
+.pending-item :deep(.chat-image-button img) {
+  height: 86px;
+}
+
+.remove-attachment {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(17, 24, 39, 0.72);
+  color: #fff;
+  cursor: pointer;
+}
+
+.hidden-file {
+  display: none;
+}
+
 .composer-actions {
   display: flex;
   align-items: center;
@@ -407,6 +528,11 @@ function handleKeydown(e: KeyboardEvent) {
   margin-top: 8px;
 }
 
+.composer-buttons {
+  display: flex;
+  gap: 8px;
+}
+
 .composer-hint {
   color: #a0aab6;
   font-size: 12px;