代码优化

src/views/message/MessageLayout.vue

@@ -508,12 +508,9 @@ const handleSendMessage = (content, resendSeq = '') => {
                 setTimeout(() => {
                   if (msg.status === 'pending') {
                     messageData.removeMsgRecord(selectedSessionId.value, msg.msgId)
-                    // 这里需要在nextTick执行add操作，否则computed没有触发更新
-                    nextTick(() => {
-                      msg.status = 'failed'
-                      messageData.addMsgRecords(selectedSessionId.value, [msg])
-                      ElMessage.error('消息发送失败')
-                    })
+                    msg.status = 'failed'
+                    messageData.addMsgRecords(selectedSessionId.value, [msg])
+                    ElMessage.error('消息发送失败')
                   }
                 }, resendInterval)
               }

src/views/message/components/MessageItem.vue

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