perf: 优化未读消息提示

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -137,7 +137,7 @@
         </div>
 
         <!--跳转提示-->
-        <div v-if="listPreparedStatus && positionMsg" class="dialog-position" :class="{'down': tagShow}">
+        <div v-if="positionShow && positionMsg" class="dialog-position" :class="{'down': tagShow}">
             <div class="position-label" @click="onPositionMark">
                 <Icon v-if="positionLoad > 0" type="ios-loading" class="icon-loading"></Icon>
                 <i v-else class="taskfont">&#xe624;</i>
@@ -731,6 +731,7 @@ export default {
 
             unreadMsgId: 0,                     // 最早未读消息id
             positionLoad: 0,                    // 定位跳转加载中
+            positionShow: false,                // 定位跳转显示
             firstMsgLength: 0,                  // 首次加载消息数量
             isFirstShowTag: false,              // 是否首次显示标签
             msgPreparedStatus: false,           // 消息准备完成
@@ -777,6 +778,7 @@ export default {
             'fileLinks',
             'cacheEmojis',
 
+            'readReqNum',
             'keyboardType',
             'keyboardHeight',
             'safeAreaBottom'
@@ -1042,9 +1044,9 @@ export default {
             return null
         },
 
-        positionMsg() {
-            const {mention, unread, position_msgs} = this.dialogData
-            if (!position_msgs || position_msgs.length === 0 || unread === 0 || this.allMsgs.length === 0) {
+        positionMsg({msgNew, dialogData, allMsgs}) {
+            const {mention, unread, position_msgs} = dialogData
+            if (!position_msgs || position_msgs.length === 0 || (unread - msgNew) <= 0 || allMsgs.length === 0) {
                 return null
             }
             const item = $A.cloneJSON(position_msgs.find(item => {
@@ -1059,8 +1061,8 @@ export default {
             return item
         },
 
-        operateEmojis() {
-            const list = this.cacheEmojis.slice(0, 3)
+        operateEmojis({cacheEmojis}) {
+            const list = cacheEmojis.slice(0, 3)
             Object.values(['👌', '👍', '😂', '🎉', '❤️', '🥳️', '🥰', '😥', '😭']).some(item => {
                 if (!list.includes(item)) {
                     list.push(item)
@@ -1069,15 +1071,15 @@ export default {
             return list
         },
 
-        maxSize() {
-            if(this.systemConfig?.file_upload_limit){
-                return this.systemConfig.file_upload_limit * 1024
+        maxSize({systemConfig}) {
+            if(systemConfig?.file_upload_limit){
+                return systemConfig.file_upload_limit * 1024
             }
             return 1024000
         },
 
-        readEnabled() {
-            return this.msgPreparedStatus && this.listPreparedStatus
+        readEnabled({msgPreparedStatus, listPreparedStatus}) {
+            return msgPreparedStatus && listPreparedStatus
         },
     },
 
@@ -1089,6 +1091,7 @@ export default {
                     this.msgType = ''
                     this.searchShow = false
                     this.unreadMsgId = 0
+                    this.positionShow = false
                     this.firstMsgLength = this.allMsgList.length || 1
                     this.listPreparedStatus = false
                     this.scrollToBottomAndRefresh = false
@@ -1339,6 +1342,10 @@ export default {
                 }
             }
         },
+
+        readReqNum() {
+            this.positionShow = true
+        },
     },
 
     methods: {

resources/assets/js/store/actions.js

@@ -2992,15 +2992,15 @@ export default {
             if (data.userid == state.userId) return;
             if (data.read_at) return;
             data.read_at = $A.formatDate();
-            state.wsReadWaitData[data.id] = data.id;
+            state.readWaitData[data.id] = data.id;
         }
-        clearTimeout(state.wsReadTimeout);
-        state.wsReadTimeout = setTimeout(_ => {
+        clearTimeout(state.readTimeout);
+        state.readTimeout = setTimeout(_ => {
             if (state.userId === 0) {
                 return;
             }
-            const ids = Object.values(state.wsReadWaitData);
-            state.wsReadWaitData = {};
+            const ids = Object.values(state.readWaitData);
+            state.readWaitData = {};
             if (ids.length === 0) {
                 return
             }
@@ -3014,8 +3014,10 @@ export default {
                 dispatch("saveDialog", data)
             }).catch(_ => {
                 ids.some(id => {
-                    state.wsReadWaitData[id] = id;
+                    state.readWaitData[id] = id;
                 })
+            }).finally(_ => {
+                state.readReqNum++
             });
         }, 50);
     },

resources/assets/js/store/state.js

@@ -98,8 +98,6 @@ export default {
     wsRandom: 0,
     wsOpenNum: 0,
     wsListener: {},
-    wsReadTimeout: null,
-    wsReadWaitData: {},
 
     // 会员信息
     userInfo: {},
@@ -125,6 +123,11 @@ export default {
     // 搜索关键词（主要用于移动端判断滑动返回）
     messengerSearchKey: {dialog: '', contacts: ''},
 
+    // 阅读消息
+    readReqNum: 0,
+    readTimeout: null,
+    readWaitData: {},
+
     // 文件
     fileLists: [],
     fileLinks: [],

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -1449,7 +1449,7 @@
         opacity: 0;
         transform: translateX(100%);
         animation: position-in-animation 200ms ease-out forwards;
-        animation-delay: 600ms;
+        animation-delay: 100ms;
 
         .position-label {
             display: flex;