fix: 修复自己发送的消息撤回未更新

Author: Elloit333

src/stores/chat.ts

@@ -140,9 +140,7 @@ export const useChatStore = defineStore('chat', () => {
   const currentMsgReply = ref<Partial<MessageType>>({})
 
   // 将消息列表转换为数组
-  const chatMessageList = computed(() =>
-    currentMessageMap.value ? Array.from(currentMessageMap.value.values()) : [],
-  )
+  const chatMessageList = computed(() => [...(currentMessageMap.value?.values() || [])])
 
   const getMsgList = async (size = pageSize) => {
     currentMessageOptions.value && (currentMessageOptions.value.isLoading = true)
@@ -372,18 +370,15 @@ export const useChatStore = defineStore('chat', () => {
   const updateRecallStatus = (data: RevokedMsgType) => {
     const { msgId } = data
     const message = currentMessageMap.value?.get(msgId)
-    if (message) {
+    if (message && typeof data.recallUid === 'number') {
       message.message.type = MsgEnum.RECALL
-
-      if (typeof data.recallUid === 'number') {
-        const cacheUser = cachedStore.userCachedList[data.recallUid]
-        // 如果撤回者的 id 不等于消息发送人的 id, 或者你本人就是管理员，那么显示管理员撤回的。
-        if (data.recallUid !== message.fromUser.uid) {
-          message.message.body = `管理员"${cacheUser.name}"撤回了一条成员消息` // 后期根据本地用户数据修改
-        } else {
-          // 如果被撤回的消息是消息发送者撤回，正常显示
-          message.message.body = `"${cacheUser.name}"撤回了一条消息` // 后期根据本地用户数据修改
-        }
+      const cacheUser = cachedStore.userCachedList[data.recallUid]
+      // 如果撤回者的 id 不等于消息发送人的 id, 或者你本人就是管理员，那么显示管理员撤回的。
+      if (data.recallUid !== message.fromUser.uid) {
+        message.message.body = `管理员"${cacheUser.name}"撤回了一条成员消息` // 后期根据本地用户数据修改
+      } else {
+        // 如果被撤回的消息是消息发送者撤回，正常显示
+        message.message.body = `"${cacheUser.name}"撤回了一条消息` // 后期根据本地用户数据修改
       }
     }
     // 更新与这条撤回消息有关的消息

src/views/Home/Chat/components/ChatList/MsgItem/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, toRefs, type Ref, inject, watch, reactive } from 'vue'
+import { computed, nextTick, onMounted, ref, type Ref, inject, watch, reactive } from 'vue'
 import { useUserStore } from '@/stores/user'
 import { useChatStore, pageSize } from '@/stores/chat'
 import { formatTimestamp } from '@/utils/computedTime'
@@ -40,7 +40,9 @@ const props = withDefaults(
 // 多根元素的时候，不加这个透传属性会报 warning
 defineOptions({ inheritAttrs: false })
 
-const { message, fromUser } = toRefs(props.msg)
+// 只能对一级 props 进行 toRefs 结构，否则会丢失响应
+const message = computed(() => props.msg.message)
+const fromUser = computed(() => props.msg.fromUser)
 
 const userStore = useUserStore()
 const chatStore = useChatStore()
@@ -140,8 +142,13 @@ onMounted(() => {
     }
 
     const targetIsVisible = useElementVisibility(msgVisibleEl)
-    // 自己的消息才监听未读数计算
-    if (isCurrentUser.value && msgVisibleEl) {
+    const msg = props.msg.message
+    // 自己的消息, 且不是撤回/系统消息，才监听未读数计算
+    if (
+      isCurrentUser.value &&
+      msgVisibleEl &&
+      ![MsgEnum.RECALL, MsgEnum.SYSTEM].includes(msg.type)
+    ) {
       // 做元素进入退出视口监听，在视口内的自己的消息就做
       // ~~5分钟内每10s中查询一次已读数~~
       watch(targetIsVisible, (visible) => {