处理媒体文件因为预加载导致的观察者监听错误问题；解决未读消息列表中会有自己的问题；解决多个媒体文件已读未读状态错误的问题

src/pages/dialog/index.vue

@@ -75,7 +75,11 @@
           style="transform: scaleY(-1);"
           :ref="
             (el) => {
-              if (el) messageRecordElementRefs[item.zp_index] = el
+              if (el) {
+                if (item.zp_index !== undefined) {
+                  messageRecordElementRefs[item.zp_index] = el
+                }
+              }
             }
           "
         >
@@ -222,7 +226,7 @@
               >
                 <span v-if="talkParams.type === 1">未读</span>
                 <span v-if="talkParams.type === 2">
-                  已读 (0/{{ talkParams.num }})
+                  已读 (0/{{ (Number(talkParams.num)-1) }})
                 </span>
               </div>
 
@@ -711,6 +715,7 @@ const selectMemberByAlphabetRef = ref(null)
 let observer
 //获取聊天消息记录元素
 const messageRecordElementRefs = ref([])
+const messageRecordElementRefsWithoutIndex = ref([])
 
 const {
   getDialogueList,
@@ -822,7 +827,7 @@ watch(
               readNumElement.textContent = readNum > 0 ? '已读' : '未读'
             } else {
               readNumElement.textContent =
-                '已读 (' + readNum + '/' + talkParams.num + ')'
+                '已读 (' + readNum + '/' + (Number(talkParams.num) - 1) + ')'
             }
           }
         }
@@ -831,6 +836,7 @@ watch(
   },
   {
     deep: true,
+    immediate: true,
   },
 )
 
@@ -1566,16 +1572,24 @@ watch(
               }
             })
           }
-        } else if (lastIndex === 0 && newValue[0].file_num) {
+        } else if (lastIndex === 0) {
+          messageRecordElementRefsWithoutIndex.value = []
           // 新消息和旧消息的id相同，说明没有比它更新的消息需要处理。但是资源文件是预创建的，需要处理
-          console.error('预创建资源文件==================')
-          const msg = newValue[0]
-          nextTick(() => {
-            const element = document.getElementById(`zp-id-${msg.msg_id}`)
-            if (element) {
-              messageRecordElementRefs.value.unshift(element)
+          for (let i = 0; i < newValue.length; i++) {
+            if (!newValue[i].zp_index && newValue[i].zp_index !== 0) {
+              if (newValue[i]?.file_num === newValue[i].msg_id) {
+                return
+              }
+              nextTick(() => {
+                const element = document.getElementById(
+                  `zp-id-${newValue[i].msg_id}`,
+                )
+                if (element) {
+                  messageRecordElementRefsWithoutIndex.value.unshift(element)
+                }
+              })
             }
-          })
+          }
         }
       }
     }
@@ -2116,6 +2130,20 @@ onMounted(async () => {
         deep: true,
       },
     )
+    watch(
+      messageRecordElementRefsWithoutIndex,
+      (newMessageRecordElementRefs) => {
+        if (Array.isArray(newMessageRecordElementRefs)) {
+          newMessageRecordElementRefs.forEach((el, index) => {
+            observeElement(el, index)
+          })
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    )
     if (messageRecordElementRefs.value.length > 0) {
       messageRecordElementRefs.value.forEach((el, index) =>
         observeElement(el, index),
@@ -2459,12 +2487,12 @@ const getMessageReadDetail = (isUnread) => {
       if (code == 200) {
         if (Number(isUnread) === 0) {
           state.value.msgReadDetailTabs[0].title =
-            '未读 （' + (talkParams.num - data.count) + '）'
+            '未读 （' + (Number(talkParams.num) - 1 - data.count) + '）'
           state.value.msgReadDetailTabs[1].title = '已读 （' + data.count + '）'
         } else if (Number(isUnread) === 1) {
           state.value.msgReadDetailTabs[0].title = '未读 （' + data.count + '）'
           state.value.msgReadDetailTabs[1].title =
-            '已读 （' + (talkParams.num - data.count) + '）'
+            '已读 （' + (Number(talkParams.num) - 1 - data.count) + '）'
         }
         if (state.value.readNumPage === 1) {
           state.value.msgReadOrNotDetail = data.data