聊天增加图片功能

frontend/src/views/mobile/MobileChatView.vue

@@ -10,6 +10,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'
 
@@ -21,10 +23,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' ? '平台客服' : '订单群聊'
@@ -100,11 +106,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 {
-    await sendChatMessage(conversationID.value, text)
+    const sent = await sendChatMessage(conversationID.value, text, imageUrls)
+    appendMessage(sent)
     content.value = ''
+    attachments.value = []
   } catch {
     showToast({ message: '发送失败', icon: 'cross' })
   } finally {
@@ -112,6 +121,51 @@ async function handleSend() {
   }
 }
 
+function appendMessage(message: ChatMessage) {
+  if (messages.value.some(item => item.id === message.id)) return
+  messages.value = [...messages.value, message]
+  nextTick(() => scrollBottom())
+}
+
+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) {
+    showToast('每条消息最多发送 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) {
+        showToast(`${file.name} 不符合图片规则`)
+        continue
+      }
+      const uploaded = await uploadFile(file, 'chat')
+      attachments.value.push(uploaded.url)
+    }
+    if (files.length > slots) {
+      showToast('每条消息最多发送 9 张图片')
+    }
+  } catch {
+    showToast({ message: '图片上传失败', icon: 'cross' })
+  } finally {
+    uploading.value = false
+  }
+}
+
+function removeAttachment(index: number) {
+  attachments.value.splice(index, 1)
+}
+
 function scrollBottom() {
   const el = listRef.value
   if (!el) return
@@ -166,7 +220,14 @@ function senderLabel(message: ChatMessage) {
           <div class="avatar">{{ roleLabel(item.sender_role).slice(0, 1) }}</div>
           <div class="bubble-wrap">
             <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>
@@ -174,6 +235,25 @@ function senderLabel(message: ChatMessage) {
     </section>
 
     <footer class="composer">
+      <input
+        ref="fileInputRef"
+        class="hidden-file"
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        multiple
+        @change="handleImageChange"
+      >
+      <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)">
+            <van-icon name="cross" :size="12" />
+          </button>
+        </div>
+      </div>
+      <button class="tool-btn" type="button" :disabled="uploading || attachments.length >= 9" @click="pickImages">
+        <van-icon name="photo-o" :size="20" />
+      </button>
       <van-field
         v-model="content"
         class="composer-input"
@@ -184,7 +264,7 @@ function senderLabel(message: ChatMessage) {
         placeholder="发送消息"
         @keydown.enter.prevent="handleSend"
       />
-      <button class="send-btn" type="button" :disabled="!content.trim() || sending" @click="handleSend">
+      <button class="send-btn" type="button" :disabled="!canSend || sending || uploading" @click="handleSend">
         <van-icon name="guide-o" :size="20" />
       </button>
     </footer>
@@ -323,6 +403,16 @@ function senderLabel(message: ChatMessage) {
   background: #dff5eb;
 }
 
+.message-attachments {
+  display: grid;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.message-attachments :deep(.chat-image-button) {
+  max-width: min(62vw, 220px);
+}
+
 .message-time {
   margin-top: 4px;
   color: #a1a8b4;
@@ -342,7 +432,7 @@ function senderLabel(message: ChatMessage) {
 
 .composer {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 42px;
+  grid-template-columns: 40px minmax(0, 1fr) 42px;
   gap: 8px;
   align-items: end;
   padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
@@ -350,12 +440,66 @@ function senderLabel(message: ChatMessage) {
   background: #fff;
 }
 
+.hidden-file {
+  display: none;
+}
+
+.pending-attachments {
+  display: flex;
+  grid-column: 1 / -1;
+  gap: 8px;
+  overflow-x: auto;
+}
+
+.pending-item {
+  position: relative;
+  flex: none;
+}
+
+.pending-item :deep(.chat-image-button) {
+  width: 72px;
+  height: 72px;
+}
+
+.pending-item :deep(.chat-image-button img) {
+  height: 72px;
+}
+
+.remove-attachment {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: grid;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(17, 24, 39, 0.72);
+  color: #fff;
+}
+
 .composer-input {
   border: 1px solid #d9e0e8;
   border-radius: 8px;
   overflow: hidden;
 }
 
+.tool-btn {
+  display: grid;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+  background: #eef4ff;
+  color: #1477ff;
+}
+
+.tool-btn:disabled {
+  color: #9ca3af;
+}
+
 .send-btn {
   display: grid;
   width: 40px;