perf: 手机版无法聊天，输入页面跳动

resources/assets/js/pages/manage.vue

@@ -229,6 +229,8 @@ export default {
             addTaskShow: false,
             addTaskSubscribe: null,
 
+            dialogMsgSubscribe: null,
+
             columns: [],
 
             projectKeyValue: '',
@@ -265,6 +267,9 @@ export default {
         this.addTaskSubscribe = Store.subscribe('addTask', (data) => {
             this.onAddTask(data)
         });
+        this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', (data) => {
+            this.addDialogMsg(data)
+        });
         //
         document.addEventListener('keydown', this.shortcutEvent);
         window.addEventListener('resize', this.innerHeightListener);
@@ -279,6 +284,10 @@ export default {
             this.addTaskSubscribe.unsubscribe();
             this.addTaskSubscribe = null;
         }
+        if (this.dialogMsgSubscribe) {
+            this.dialogMsgSubscribe.unsubscribe();
+            this.dialogMsgSubscribe = null;
+        }
         //
         document.removeEventListener('keydown', this.shortcutEvent);
         window.removeEventListener('resize', this.innerHeightListener);
@@ -297,7 +306,6 @@ export default {
             'cacheProjects',
             'projectTotal',
             'taskId',
-            'dialogMsgPush',
         ]),
 
         ...mapGetters(['taskData', 'dashboardTask']),
@@ -390,43 +398,6 @@ export default {
             }
         },
 
-        dialogMsgPush(data) {
-            if (this.natificationHidden && this.natificationReady) {
-                const {id, dialog_id, type, msg} = data;
-                let body = '';
-                switch (type) {
-                    case 'text':
-                        body = msg.text;
-                        break;
-                    case 'file':
-                        body = '[' + this.$L(msg.type == 'img' ? '图片信息' : '文件信息') + ']'
-                        break;
-                    default:
-                        return;
-                }
-                this._notificationId = id;
-                this.notificationClass.replaceOptions({
-                    icon: $A.originUrl('images/logo.png'),
-                    body: body,
-                    data: data,
-                    tag: "dialog",
-                    requireInteraction: true
-                });
-                let dialog = this.cacheDialogs.find((item) => item.id == dialog_id);
-                if (dialog) {
-                    this.notificationClass.replaceTitle(dialog.name);
-                    this.notificationClass.userAgreed();
-                } else {
-                    this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => {
-                        if (this._notificationId === id) {
-                            this.notificationClass.replaceTitle(data.name);
-                            this.notificationClass.userAgreed();
-                        }
-                    })
-                }
-            }
-        },
-
         projectKeyValue(val) {
             if (val == '') {
                 return;
@@ -605,6 +576,43 @@ export default {
             this.addTaskShow = true;
         },
 
+        addDialogMsg(data) {
+            if (this.natificationHidden && this.natificationReady) {
+                const {id, dialog_id, type, msg} = data;
+                let body = '';
+                switch (type) {
+                    case 'text':
+                        body = msg.text;
+                        break;
+                    case 'file':
+                        body = '[' + this.$L(msg.type == 'img' ? '图片信息' : '文件信息') + ']'
+                        break;
+                    default:
+                        return;
+                }
+                this._notificationId = id;
+                this.notificationClass.replaceOptions({
+                    icon: $A.originUrl('images/logo.png'),
+                    body: body,
+                    data: data,
+                    tag: "dialog",
+                    requireInteraction: true
+                });
+                let dialog = this.cacheDialogs.find((item) => item.id == dialog_id);
+                if (dialog) {
+                    this.notificationClass.replaceTitle(dialog.name);
+                    this.notificationClass.userAgreed();
+                } else {
+                    this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => {
+                        if (this._notificationId === id) {
+                            this.notificationClass.replaceTitle(data.name);
+                            this.notificationClass.userAgreed();
+                        }
+                    })
+                }
+            }
+        },
+
         taskVisibleChange(visible) {
             if (!visible) {
                 this.$store.dispatch('openTask', 0)

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

@@ -24,7 +24,7 @@
         <ScrollerY
             ref="scroller"
             class="dialog-scroller overlay-y"
-            :auto-bottom="autoBottom"
+            :auto-bottom="isAutoBottom"
             @on-scroll="chatScroll"
             static>
             <div ref="manageList" class="dialog-list">
@@ -57,7 +57,7 @@
             </div>
         </ScrollerY>
         <div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive">
-            <div class="dialog-newmsg" @click="goNewBottom">{{$L('有' + msgNew + '条新消息')}}</div>
+            <div class="dialog-newmsg" @click="autoToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
             <slot name="inputBefore"/>
             <DragInput
                 ref="input"
@@ -95,6 +95,7 @@ import ScrollerY from "../../../components/ScrollerY";
 import {mapState} from "vuex";
 import DialogView from "./DialogView";
 import DialogUpload from "./DialogUpload";
+import {Store} from "le5le-store";
 
 export default {
     name: "DialogWrapper",
@@ -118,7 +119,22 @@ export default {
             msgNew: 0,
             topId: 0,
 
-            tempMsgs: []
+            tempMsgs: [],
+
+            dialogMsgSubscribe: null,
+        }
+    },
+
+    mounted() {
+        this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', (data) => {
+            this.addDialogMsg(data)
+        });
+    },
+
+    beforeDestroy() {
+        if (this.dialogMsgSubscribe) {
+            this.dialogMsgSubscribe.unsubscribe();
+            this.dialogMsgSubscribe = null;
         }
     },
 
@@ -127,7 +143,7 @@ export default {
             'userId',
             'cacheDialogs',
             'dialogMsgs',
-            'dialogMsgPush',
+            'windowMax768',
         ]),
 
         dialogData() {
@@ -145,6 +161,13 @@ export default {
             });
         },
 
+        isAutoBottom() {
+            if (this.windowMax768 && this.inputFocus) {
+                return false;
+            }
+            return this.autoBottom
+        },
+
         tempMsgList() {
             if (!this.dialogId) {
                 return [];
@@ -173,14 +196,6 @@ export default {
             immediate: true
         },
 
-        dialogMsgPush() {
-            if (this.autoBottom) {
-                this.$nextTick(this.goBottom);
-            } else {
-                this.msgNew++;
-            }
-        },
-
         dialogId: {
             handler(id) {
                 if (id) {
@@ -213,10 +228,10 @@ export default {
                     text: this.msgText,
                 },
             });
-            if (this.$store.state.windowMax768) {
+            if (this.windowMax768) {
                 this.$refs.input.blur();
             }
-            this.autoBottom = true;
+            this.autoToBottom();
             this.onActive();
             //
             this.$store.dispatch("call", {
@@ -295,7 +310,10 @@ export default {
                         userid: this.userId,
                         msg: { },
                     });
-                    this.autoBottom = true;
+                    if (this.windowMax768) {
+                        this.$refs.input.blur();
+                    }
+                    this.autoToBottom();
                     this.onActive();
                     break;
 
@@ -322,6 +340,7 @@ export default {
             switch (res.directionreal) {
                 case 'up':
                     if (res.scrollE < 10) {
+                        this.msgNew = 0;
                         this.autoBottom = true;
                     }
                     break;
@@ -330,27 +349,18 @@ export default {
                     break;
             }
             if (res.scale === 1) {
+                this.msgNew = 0;
                 this.autoBottom = true;
             }
         },
 
-        goBottom() {
-            if (this.autoBottom) {
-                this.msgNew = 0;
-                this.$refs.scroller.autoToBottom();
-            }
-        },
-
-        goNewBottom() {
-            this.autoBottom = true;
-            this.goBottom();
-        },
-
         onEventFocus(e) {
+            this.inputFocus = true;
             this.$emit("on-focus", e)
         },
 
         onEventblur(e) {
+            this.inputFocus = false;
             this.$emit("on-blur", e)
         },
 
@@ -358,6 +368,10 @@ export default {
             this.$emit("on-active");
         },
 
+        autoToBottom() {
+            this.$refs.scroller && this.$refs.scroller.autoToBottom();
+        },
+
         openProject() {
             if (!this.dialogData.group_info) {
                 return;
@@ -390,6 +404,18 @@ export default {
                     }
                 });
             });
+        },
+
+        addDialogMsg() {
+            if (this.isAutoBottom) {
+                this.$nextTick(this.autoToBottom);
+            } else {
+                this.$nextTick(() => {
+                    if (this.$refs.scroller && this.$refs.scroller.scrollInfo().scrollE > 10) {
+                        this.msgNew++;
+                    }
+                })
+            }
         }
     }
 }

resources/assets/js/store/actions.js

@@ -2014,7 +2014,7 @@ export default {
                             (function (msg) {
                                 const {mode, data} = msg;
                                 const {dialog_id} = data;
-                                if (mode === "add" || mode === "chat") {
+                                if (["add", "chat"].includes(mode) && !state.dialogMsgs.find(({id}) => id == data.id)) {
                                     // 新增任务消息数量
                                     dispatch("increaseTaskMsgNum", dialog_id);
                                     if (mode === "chat") {
@@ -2024,13 +2024,11 @@ export default {
                                     // 更新对话列表
                                     if (dialog) {
                                         // 新增未读数
-                                        if (data.userid !== state.userId && state.dialogMsgs.findIndex(({id}) => id == data.id) === -1) {
+                                        dialog.unread++;
-                                            dialog.unread++;
-                                        }
                                         // 移动到首位
                                         dispatch("moveDialogTop", dialog_id);
                                     }
-                                    state.dialogMsgPush = data;
+                                    Store.set('dialogMsgPush', data);
                                 }
                                 // 更新消息列表
                                 dispatch("saveDialogMsg", data)

resources/assets/js/store/state.js

@@ -52,7 +52,6 @@ state.userOnline = {};
 
 // 会话聊天
 state.dialogMsgs = [];
-state.dialogMsgPush = {};
 state.dialogOpenId = 0;
 
 // 文件

resources/assets/sass/pages/page-messenger.scss

@@ -330,10 +330,10 @@
                         position: relative;
                         .dialog-back {
                             position: absolute;
-                            top: 0;
                             left: 0;
                             bottom: 0;
                             width: 64px;
+                            height: 49px;
                             z-index: 1;
                             font-size: 26px;
                             display: flex;