perf: 优化未读消息机制

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

@@ -93,25 +93,31 @@ export default {
             type: Number,
             default: 0
         },
+        scrollIng: {
+            type: Number,
+            default: 0
+        },
     },
 
-    data() {
-        return {
-            subscribe: null,
-        }
+    mounted() {
+        this.checkWatch()
     },
 
     computed: {
         ...mapState(['userId']),
 
         isRightMsg() {
-            return this.source.userid == this.userId
+            return this.source.userid == this.$store.state.userId
         },
 
         isReply() {
             return this.simpleView || this.msgId === this.source.id
         },
 
+        isNoWatch() {
+            return this.isRightMsg || this.source.read_at
+        },
+
         hidePercentage() {
             return this.simpleView || this.isMyDialog || this.isReply
         },
@@ -130,24 +136,42 @@ export default {
     },
 
     watch: {
-        source: {
-            handler() {
-                this.msgRead();
-            },
-            immediate: true,
+        source() {
+            this.msgRead();
         },
         windowActive(active) {
-            if (active) {
-                this.msgRead();
+            if (!active) {
+               return
             }
+            this.msgRead();
         }
     },
 
     methods: {
+        checkWatch() {
+            if (this.isNoWatch) {
+                return
+            }
+            const watchr = this.$watch("scrollIng", _ => {
+                if (this.isNoWatch) {
+                    watchr()
+                    return
+                }
+                this.msgRead()
+            })
+        },
+
         msgRead() {
             if (!this.windowActive) {
                 return;
             }
+            if (!this.$el) {
+                return;
+            }
+            if (this.$el.parentNode.classList.contains('inactive')) {
+                return;
+            }
+            //
             this.$store.dispatch("dialogMsgRead", this.source);
         },
 

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

@@ -155,7 +155,7 @@
             :data-component="msgItem"
 
             :item-class-add="itemClassAdd"
-            :extra-props="{dialogData, operateVisible, operateItem, isMyDialog, msgId}"
+            :extra-props="{dialogData, operateVisible, operateItem, isMyDialog, msgId, scrollIng}"
             :estimate-size="dialogData.type=='group' ? 105 : 77"
             :keeps="25"
             :disabled="scrollDisabled"
@@ -651,6 +651,7 @@ export default {
             scrollDirection: null,
             scrollAction: 0,
             scrollTmp: 0,
+            scrollIng: 0,
 
             positionLoad: 0,
 
@@ -961,15 +962,11 @@ export default {
             if (!position_msgs || position_msgs.length === 0 || unread === 0 || this.allMsgs.length === 0) {
                 return null
             }
-            const item = position_msgs.sort((a, b) => {
-                return b.msg_id - a.msg_id
-            })[0]
-            if (this.allMsgs.findIndex(({id}) => id == item.msg_id) === -1) {
-                return Object.assign(item, {
-                    'label': this.$L(`未读消息${unread}条`)
-                })
+            const item = $A.cloneJSON(position_msgs[0])
+            if (item.label === '{UNREAD}') {
+                item.label = this.$L(`未读消息${unread}条`)
             }
-            return null
+            return item
         },
 
         operateEmojis() {
@@ -2227,6 +2224,9 @@ export default {
             this.scrollAction = event.target.scrollTop;
             this.scrollDirection = this.scrollTmp <= this.scrollAction ? 'down' : 'up';
             setTimeout(_ => this.scrollTmp = this.scrollAction, 0);
+            //
+            this.scrollIng++;
+            setTimeout(_=> this.scrollIng--, 100);
         },
 
         onRange(range) {

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

@@ -1254,6 +1254,11 @@
         display: flex;
         align-items: center;
         justify-content: flex-end;
+        opacity: 0;
+        transform: translateX(100%);
+        animation: position-in-animation 200ms ease-out forwards;
+        animation-delay: 600ms;
+
         .position-label {
             display: flex;
             align-items: center;
@@ -1973,3 +1978,14 @@ body.window-portrait {
         }
     }
 }
+
+@keyframes position-in-animation {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}