优化客服消息通知提醒

frontend/src/features/chats/views/ChatView.vue

@@ -35,7 +35,8 @@ 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' ? '平台客服' : '订单群聊'
+  if (participants.length === 0)
+    return conversation.value?.type === 'general_support' ? '平台客服' : '订单群聊'
   return participants.map(item => `${roleLabel(item.role)}：${item.display_name}`).join(' / ')
 })
 
@@ -43,27 +44,28 @@ const memberText = computed(() => {
 const desktopNotification = useDesktopNotification('user')
 
 function handleSSEEvent(event: ChatEvent) {
-  if (event.type === 'new_message' && event.conversation_id === conversationID.value) {
+  if (event.type === 'new_message') {
     const msg = event.message
     if (msg) {
       const isSelf = msg.sender_type === 'user' && msg.sender_id === currentUserId
+      if (event.conversation_id === conversationID.value) {
+        appendMessage({
+          id: msg.id,
+          conversation_id: msg.conversation_id,
+          sender_type: msg.sender_type as ChatMessage['sender_type'],
+          sender_id: msg.sender_id,
+          sender_role: msg.sender_role as ChatMessage['sender_role'],
+          sender_name: msg.sender_name,
+          sender_avatar: '',
+          is_self: isSelf,
+          content_type: msg.content_type as ChatMessage['content_type'],
+          content: msg.content,
+          attachment_urls: msg.attachment_urls || [],
+          created_at: msg.created_at,
+        })
 
-      appendMessage({
-        id: msg.id,
-        conversation_id: msg.conversation_id,
-        sender_type: msg.sender_type as ChatMessage['sender_type'],
-        sender_id: msg.sender_id,
-        sender_role: msg.sender_role as ChatMessage['sender_role'],
-        sender_name: msg.sender_name,
-        sender_avatar: '',
-        is_self: isSelf,
-        content_type: msg.content_type as ChatMessage['content_type'],
-        content: msg.content,
-        attachment_urls: msg.attachment_urls || [],
-        created_at: msg.created_at,
-      })
-
-      markChatRead(conversationID.value).catch(() => {})
+        markChatRead(conversationID.value).catch(() => {})
+      }
 
       // 不是自己发送的消息才发送通知
       if (!isSelf) {
@@ -97,10 +99,7 @@ async function loadAll() {
   conversation.value = null
   messages.value = []
   try {
-    const [chat] = await Promise.all([
-      fetchChat(conversationID.value),
-      loadMessages(true),
-    ])
+    const [chat] = await Promise.all([fetchChat(conversationID.value), loadMessages(true)])
     conversation.value = chat
     await markChatRead(conversationID.value)
   } catch {
@@ -114,7 +113,9 @@ async function loadConversation() {
   if (!conversationID.value) return
   try {
     conversation.value = await fetchChat(conversationID.value)
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
 }
 
 async function loadMessages(scrollToBottom = true) {
@@ -180,7 +181,10 @@ async function uploadImages(files: File[]) {
   uploading.value = true
   try {
     for (const file of files.slice(0, slots)) {
-      if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 25 * 1024 * 1024) {
+      if (
+        !['image/jpeg', 'image/png', 'image/webp'].includes(file.type) ||
+        file.size > 25 * 1024 * 1024
+      ) {
         ElMessage.warning(`${file.name} 不符合图片规则`)
         continue
       }
@@ -279,25 +283,26 @@ function handleKeydown(e: KeyboardEvent) {
           :class="{
             self: item.is_self,
             system: item.sender_type === 'system',
-            admin: item.sender_role === 'admin' && !item.is_self
+            admin: item.sender_role === 'admin' && !item.is_self,
           }"
         >
           <template v-if="item.sender_type === 'system'">
             <span class="system-message">{{ item.content }}</span>
           </template>
           <template v-else>
-            <div class="avatar" :class="{ self: item.is_self }">{{ roleLabel(item.sender_role).slice(0, 1) }}</div>
+            <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" :class="{ 'admin-label': item.sender_role === 'admin' && !item.is_self }">
+              <span
+                class="sender-name"
+                :class="{ 'admin-label': item.sender_role === 'admin' && !item.is_self }"
+              >
                 {{ senderLabel(item) }}
               </span>
               <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"
-                />
+                <ChatAttachmentImage v-for="url in item.attachment_urls" :key="url" :source="url" />
               </div>
               <span class="message-time">{{ formatDateMinute(item.created_at) }}</span>
             </div>
@@ -322,7 +327,7 @@ function handleKeydown(e: KeyboardEvent) {
           accept="image/jpeg,image/png,image/webp"
           multiple
           @change="handleImageChange"
-        >
+        />
         <el-input
           v-model="content"
           type="textarea"
@@ -337,10 +342,20 @@ function handleKeydown(e: KeyboardEvent) {
         <div class="composer-actions">
           <span class="composer-hint">Enter 发送，Shift+Enter 换行</span>
           <div class="composer-buttons">
-            <el-button :icon="Picture" :loading="uploading" :disabled="attachments.length >= 9" @click="pickImages">
+            <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
+              type="primary"
+              :disabled="!canSend || sending || uploading"
+              :loading="sending"
+              @click="handleSend"
+            >
               发送
             </el-button>
           </div>
@@ -350,7 +365,6 @@ function handleKeydown(e: KeyboardEvent) {
   </section>
 </template>
 
-
 <style scoped>
 .chat-page {
   max-width: 1720px;
@@ -389,7 +403,9 @@ function handleKeydown(e: KeyboardEvent) {
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
 }
 
 .back-btn:hover {