发送逻辑优化

src/stores/message.js

@@ -152,9 +152,9 @@ export const useMessageStore = defineStore('anylink-message', () => {
     if (!msgRecords?.length) return
     msgRecords.forEach((item) => {
       if (!msgRecordsList.value[sessionId]) {
-        msgRecordsList.value[sessionId] = {}
+        msgRecordsList.value[sessionId] = ref({})
       }
-      msgRecordsList.value[sessionId][item.msgId] = item
+      msgRecordsList.value[sessionId][item.msgId] = ref(item)
     })
   }
 
@@ -171,11 +171,21 @@ export const useMessageStore = defineStore('anylink-message', () => {
 
   const getMsg = (sessionId, msgId) => {
     if (!msgRecordsList.value[sessionId] || !msgRecordsList.value[sessionId][msgId]) {
-      return {}
+      return ref({})
     }
     return msgRecordsList.value[sessionId][msgId]
   }
 
+  const updateMsg = (sessionId, msgId, obj) => {
+    if (!msgRecordsList.value[sessionId] || !msgRecordsList.value[sessionId][msgId]) {
+      return
+    }
+    if ('status' in obj) msgRecordsList.value[sessionId][msgId].status = obj.status
+    if ('msgTime' in obj) msgRecordsList.value[sessionId][msgId].msgTime = obj.msgTime
+    if ('sendTime' in obj) msgRecordsList.value[sessionId][msgId].sendTime = obj.sendTime
+    updateMsgIdSort(sessionId)
+  }
+
   const totalUnReadCount = computed(() => {
     return Object.values(sessionList.value).reduce(
       (sum, item) => (item?.unreadCount ? sum + item.unreadCount : sum),
@@ -281,6 +291,7 @@ export const useMessageStore = defineStore('anylink-message', () => {
     addMsgRecords,
     removeMsgRecord,
     getMsg,
+    updateMsg,
 
     partitions,
     loadPartitions,

src/views/message/MessageLayout.vue

@@ -507,10 +507,9 @@ const handleSendMessage = (msg) => {
                 wsConnect.sendAgent(data)
                 setTimeout(() => {
                   if (msg.status === msgSendStatus.PENDING) {
-                    messageData.removeMsgRecord(msg.sessionId, msg.msgId)
-                    msg.status = msgSendStatus.FAILED
-                    messageData.addMsgRecords(msg.sessionId, [msg])
-                    messageData.updateMsgIdSort(msg.sessionId)
+                    messageData.updateMsg(msg.sessionId, msg.msgId, {
+                      status: msgSendStatus.FAILED
+                    })
                     ElMessage.error('消息发送失败')
                   }
                 }, resendInterval)
@@ -529,12 +528,7 @@ const handleSendMessage = (msg) => {
       readTime: new Date()
     })
 
-    messageData.removeMsgRecord(msg.sessionId, msg.msgId) //移除seq为key的msg
-    msg.msgId = msgId
-    msg.status = msgSendStatus.OK
-    messageData.addMsgRecords(msg.sessionId, [msg]) //添加服务端返回msgId为key的msg
-    messageData.updateMsgIdSort(msg.sessionId)
-
+    messageData.updateMsg(msg.sessionId, msg.msgId, { status: msgSendStatus.OK })
     if (!messageData.sessionList[msg.sessionId].dnd) {
       playMsgSend()
     }
@@ -556,9 +550,11 @@ const handleSendMessage = (msg) => {
 
 const handleResendMessage = (msg) => {
   // 重发消息时更新这三个属性，其他不变
-  msg.status = msgSendStatus.PENDING
-  msg.msgTime = new Date()
-  msg.sendTime = new Date()
+  messageData.updateMsg(msg.sessionId, msg.msgId, {
+    status: msgSendStatus.PENDING,
+    msgTime: new Date(),
+    sendTime: new Date()
+  })
   handleSendMessage(msg)
 }
 

src/views/message/components/MessageItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, h, createApp, watch, nextTick, reactive } from 'vue'
+import { computed, onMounted, h, createApp, watch, nextTick } from 'vue'
 import { WarningFilled } from '@element-plus/icons-vue'
 import { MsgType } from '@/proto/msg'
 import {
@@ -242,7 +242,7 @@ const renderDocument = (content) => {
 }
 
 const msg = computed(() => {
-  return reactive({ ...messageData.getMsg(props.sessionId, props.msgId) })
+  return messageData.getMsg(props.sessionId, props.msgId)
 })
 
 const msgStatus = computed(() => {

src/views/message/components/SessionItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, reactive } from 'vue'
+import { ref, computed, watch } from 'vue'
 import UserAvatarIcon from '@/components/common/UserAvatarIcon.vue'
 import GroupAvatarIcon from '@/components/common/GroupAvatarIcon.vue'
 import SessionTag from './SessionTag.vue'
@@ -84,9 +84,9 @@ const isNotInGroup = computed(() => {
 const lastMsg = computed(() => {
   const msgIds = messageData.msgIdSortArray[props.sessionId]
   if (!msgIds?.length) {
-    return reactive({})
+    return ref({})
   }
-  return reactive({ ...messageData.getMsg(props.sessionId, msgIds[msgIds.length - 1]) })
+  return messageData.getMsg(props.sessionId, msgIds[msgIds.length - 1])
 })
 
 const lastMsgId = computed(() => {
@@ -470,7 +470,7 @@ defineExpose({
             <span v-if="isShowDraft" class="draft">[草稿]</span>
             <span v-else-if="isShowUnread" class="unread-or-read">[未读]</span>
             <span v-else-if="isShowRead" class="unread-or-read">[已读]</span>
-            <span v-else-if="isShowUnSend" class="unread-or-read">[未送达]</span>
+            <span v-else-if="isShowUnSend" class="unread-or-read">[发送失败]</span>
             <span class="detail text-ellipsis"> {{ showDetailContent }}</span>
           </div>
           <div class="action">