fix(chat): avoid voice ref render recursion

frontend/components/chat/LinkCard.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, ref, watch } from 'vue'
 import miniProgramIconUrl from '~/assets/images/wechat/mini-program.svg'
 
 export default defineComponent({
@@ -19,7 +19,15 @@ export default defineComponent({
   setup(props) {
     const fromAvatarImgOk = ref(false)
     const fromAvatarImgError = ref(false)
-    const lastFromAvatarUrl = ref('')
+
+    watch(
+      () => String(props.fromAvatar || '').trim(),
+      () => {
+        fromAvatarImgOk.value = false
+        fromAvatarImgError.value = false
+      },
+      { immediate: true }
+    )
 
     const getFromText = () => {
       const raw = String(props.from || '').trim()
@@ -47,12 +55,6 @@ export default defineComponent({
       const isCoverVariant = !isMiniProgram && String(props.variant || '').trim() === 'cover'
       const Tag = canNavigate ? 'a' : 'div'
 
-      if (fromAvatarUrl !== lastFromAvatarUrl.value) {
-        lastFromAvatarUrl.value = fromAvatarUrl
-        fromAvatarImgOk.value = false
-        fromAvatarImgError.value = false
-      }
-
       const showFromAvatarImg = Boolean(fromAvatarUrl) && !fromAvatarImgError.value
       const showFromAvatarText = (!fromAvatarUrl) || (!fromAvatarImgOk.value)
       const fromAvatarStyle = fromAvatarImgOk.value

frontend/composables/chat/useChatMessages.js

@@ -47,12 +47,21 @@ export const useChatMessages = ({
     })
   }
 
+  const summarizeRenderTypes = (list) => {
+    const counts = {}
+    for (const item of Array.isArray(list) ? list : []) {
+      const key = String(item?.renderType || 'unknown').trim() || 'unknown'
+      counts[key] = Number(counts[key] || 0) + 1
+    }
+    return counts
+  }
+
   const previewImageUrl = ref(null)
   const previewVideoUrl = ref(null)
   const previewVideoPosterUrl = ref('')
   const previewVideoError = ref('')
 
-  const voiceRefs = ref({})
+  const voiceRefs = new Map()
   const currentPlayingVoice = ref(null)
   const playingVoiceId = ref(null)
 
@@ -230,18 +239,16 @@ export const useChatMessages = ({
     const key = String(id || '').trim()
     if (!key) return
     if (element) {
-      voiceRefs.value = { ...voiceRefs.value, [key]: element }
-    } else if (voiceRefs.value[key]) {
-      const next = { ...voiceRefs.value }
-      delete next[key]
-      voiceRefs.value = next
+      voiceRefs.set(key, element)
+    } else {
+      voiceRefs.delete(key)
     }
   }
 
   const playVoiceById = async (voiceId) => {
     const key = String(voiceId || '').trim()
     if (!key) return
-    const audio = voiceRefs.value[key]
+    const audio = voiceRefs.get(key)
     if (!audio) return
 
     try {
@@ -421,7 +428,8 @@ export const useChatMessages = ({
       const mapped = dedupeMessagesById(raw.map(normalizeMessage))
       logMessagePhase('loadMessages:normalize:end', {
         username,
-        mappedCount: mapped.length
+        mappedCount: mapped.length,
+        renderTypeCounts: summarizeRenderTypes(mapped)
       })
 
       if (activeMessagesFor.value !== username) {
@@ -598,7 +606,18 @@ export const useChatMessages = ({
     } catch {}
   }
 
+  const clearVoicePlaybackState = () => {
+    try {
+      currentPlayingVoice.value?.pause?.()
+      if (currentPlayingVoice.value) currentPlayingVoice.value.currentTime = 0
+    } catch {}
+    currentPlayingVoice.value = null
+    playingVoiceId.value = null
+    voiceRefs.clear()
+  }
+
   const resetMessageState = () => {
+    clearVoicePlaybackState()
     allMessages.value = {}
     messagesMeta.value = {}
     messagesError.value = ''
@@ -807,6 +826,7 @@ export const useChatMessages = ({
     if (highlightTimer) clearTimeout(highlightTimer)
     highlightTimer = null
     clearContactProfileHoverHideTimer()
+    clearVoicePlaybackState()
   })
 
   return {