perf: 优化聊天输入时页面乱滚动的情况

2025-12-15 13:22:49 +00:00 · 2024-10-28 19:26:39 +08:00 · 2024-10-28 19:26:39 +08:00 · 9001c51bea
commit 9001c51bea
parent 99757fc947
3 changed files with 38 additions and 68 deletions
--- a/resources/assets/js/functions/eeui.js
+++ b/resources/assets/js/functions/eeui.js
@ -33,16 +33,19 @@
            return null;
        },

+        // 获取eeui版本号
        eeuiAppVersion() {
            if (!$A.isEEUiApp) return;
            return $A.eeuiModuleSync("eeui").getVersion();
        },

+        // 获取本地软件版本号
        eeuiAppLocalVersion() {
            if (!$A.isEEUiApp) return;
            return $A.eeuiModuleSync("eeui").getLocalVersion();
        },

+        // alert
        eeuiAppAlert(object, callback) {
            if (!$A.isEEUiApp) return;
            if (typeof callback !== "function") callback = _ => {};
@ -51,6 +54,7 @@
            })
        },

+        // toast
        eeuiAppToast(object) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("eeui").then(obj => {
@ -58,11 +62,13 @@
            })
        },

+        // 相对地址基于当前地址补全
        eeuiAppRewriteUrl(val) {
            if (!$A.isEEUiApp) return;
            return $A.eeuiModuleSync("eeui").rewriteUrl(val);
        },

+        // 打开app新页面
        eeuiAppOpenPage(object, callback) {
            if (!$A.isEEUiApp) return;
            if (typeof callback !== "function") callback = _ => {};
@ -71,6 +77,7 @@
            })
        },

+        // 使用系统浏览器打开网页
        eeuiAppOpenWeb(url) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("eeui").then(obj => {
@ -78,6 +85,7 @@
            })
        },

+        // 拦截返回按键事件（仅支持android、iOS无效）
        eeuiAppSetPageBackPressed(object, callback) {
            if (!$A.isEEUiApp) return;
            if (typeof callback !== "function") callback = _ => {};
@ -86,6 +94,7 @@
            })
        },

+        // 返回手机桌面
        eeuiAppGoDesktop() {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("eeui").then(obj => {
@ -93,6 +102,7 @@
            })
        },

+        // 打开屏幕常亮
        eeuiAppKeepScreenOn() {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("eeui").then(obj => {
@ -100,6 +110,7 @@
            })
        },

+        // 关闭屏幕常亮
        eeuiAppKeepScreenOff() {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("eeui").then(obj => {
@ -107,6 +118,7 @@
            })
        },

+        // 隐藏软键盘
        eeuiAppKeyboardHide() {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("eeui").then(obj => {
@ -114,6 +126,7 @@
            })
        },

+        // 给app发送消息
        eeuiAppSendMessage(object) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("webview").then(obj => {
@ -121,6 +134,7 @@
            })
        },

+        // 设置浏览器地址
        eeuiAppSetUrl(url) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("webview").then(obj => {
@ -128,6 +142,7 @@
            })
        },

+        // 扫码
        eeuiAppScan(callback) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModule("eeui").then(obj => {
@ -141,26 +156,31 @@
            })
        },

+        // 获取主题名称 light|dark
        eeuiAppGetThemeName() {
            if (!$A.isEEUiApp) return;
            return $A.eeuiModuleSync("eeui").getThemeName();
        },

+        // 判断软键盘是否可见
        eeuiAppKeyboardStatus() {
            if (!$A.isEEUiApp) return;
            return $A.eeuiModuleSync("eeui").keyboardStatus();
        },

+        // 设置全局变量
        eeuiAppSetVariate(key, value) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModuleSync("eeui").setVariate(key, value);
        },

+        // 长按内容震动（仅支持android、iOS无效）
        eeuiAppSetHapticBackEnabled(val) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModuleSync("webview").setHapticBackEnabled(val);
        },

+        // 禁止长按选择（仅支持android、iOS无效）
        eeuiAppSetDisabledUserLongClickSelect(val) {
            if (!$A.isEEUiApp) return;
            $A.__disabledUserLongClickSelectTimer && clearTimeout($A.__disabledUserLongClickSelectTimer);
@ -176,10 +196,19 @@
        },
        __disabledUserLongClickSelectTimer: null,

+        // 复制文本
        eeuiAppCopyText(text) {
            if (!$A.isEEUiApp) return;
            $A.eeuiModuleSync("eeui").copyText(text)
        },
+
+        // 设置是否允许滚动
+        eeuiAppSetScrollEnabled(enabled) {
+            if (!$A.isEEUiApp) return;
+            $A.eeuiModule("webview").then(obj => {
+                obj.setScrollEnabled(enabled);
+            })
+        },
    });

    window.$A = $;
--- a/resources/assets/js/pages/manage/components/DialogModal.vue
+++ b/resources/assets/js/pages/manage/components/DialogModal.vue
@ -65,6 +65,12 @@ export default {
        }
    },

+    watch: {
+        visible(v) {
+            $A.eeuiAppSetScrollEnabled(!v)
+        }
+    },
+
    methods: {
        onBeforeClose() {
            return new Promise(_ => {
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@ -7,8 +7,6 @@
        @dragover.prevent="chatDragOver(true, $event)"
        @dragleave.prevent="chatDragOver(false, $event)"
        @touchstart="onTouchStart"
-        @touchmove="onTouchMove"
-        @touchend="onTouchEnd"
        @pointerover="onPointerover">
        <!--顶部导航-->
        <div ref="nav" class="dialog-nav">
@ -780,7 +778,6 @@ export default {
            operateItem: {},

            recordState: '',
-            wrapperStart: null,
            pointerMouse: false,

            scrollTail: 0,
@ -830,7 +827,6 @@ export default {
            positionShow: false,                // 定位跳转显示
            preventMoreLoad: false,             // 阻止加载更多
            preventToBottom: false,             // 阻止滚动到底部
-            selectedTextStatus: false,          // 是否选择文本
            scrollToBottomRefresh: false,       // 滚动到底部重新获取消息
            androidKeyboardVisible: false,      // Android键盘是否可见
            replyMsgAutoMention: false,         // 允许回复消息后自动@
@ -840,7 +836,6 @@ export default {
    mounted() {
        this.subMsgListener()
        this.msgSubscribe = Store.subscribe('dialogMsgChange', this.onMsgChange);
-        document.addEventListener('selectionchange', this.onSelectionchange);
    },

    beforeDestroy() {
@ -858,8 +853,6 @@ export default {
        this.observers.forEach(({observer}) => observer.disconnect())
        this.observers = []
        //
-        document.removeEventListener('selectionchange', this.onSelectionchange);
-        //
        const scroller = this.$refs.scroller;
        if (scroller) {
            scroller.virtual.destroy()
@ -1781,11 +1774,6 @@ export default {
            }
        },

-        onSelectionchange() {
-            const selectionType = window.getSelection().type;
-            this.selectedTextStatus = selectionType === "Range"
-        },
-
        getTempId() {
            return this.tempId++
        },
@ -2023,64 +2011,11 @@ export default {
            }
        },

-        onTouchStart(e) {
-            if ($A.isAndroid() && $A.eeuiAppKeyboardStatus()) {
+        onTouchStart() {
+            // Android 阻止长按反馈导致失去焦点页面抖动
+            if (this.androidKeyboardVisible) {
                $A.eeuiAppSetDisabledUserLongClickSelect(500);
            }
-            this.wrapperStart = null;
-            if (this.selectedTextStatus) {
-                this.wrapperStart = window.scrollY
-                return
-            }
-            if (this.$refs.scroller.$el.contains(e.target)) {
-                // 聊天内容区域
-                this.wrapperStart = Object.assign(this.scrollInfo(), {
-                    clientY: e.touches[0].clientY,
-                });
-            } else if (this.$refs.input.$refs.editor.contains(e.target)) {
-                // 输入内容区域
-                const editor = this.$refs.input.$refs.editor.querySelector(".ql-editor");
-                if (editor) {
-                    const clientSize = editor.clientHeight;
-                    const offset = editor.scrollTop;
-                    const scrollSize = editor.scrollHeight;
-                    this.wrapperStart = {
-                        offset, // 滚动的距离
-                        scale: offset / (scrollSize - clientSize), // 已滚动比例
-                        tail: scrollSize - clientSize - offset, // 与底部距离
-                        clientY: e.touches[0].clientY,
-                    }
-                }
-            }
-        },
-
-        onTouchMove(e) {
-            if (this.footerPaddingBottom > 0 || (this.windowPortrait && this.windowScrollY > 0)) {
-                if (typeof this.wrapperStart === 'number') {
-                    return;
-                }
-                if (this.wrapperStart === null) {
-                    e.preventDefault();
-                    return;
-                }
-                if (this.wrapperStart.clientY > e.touches[0].clientY) {
-                    // 向上滑动
-                    if (this.wrapperStart.tail === 0) {
-                        e.preventDefault();
-                    }
-                } else {
-                    // 向下滑动
-                    if (this.wrapperStart.offset === 0) {
-                        e.preventDefault();
-                    }
-                }
-            }
-        },
-
-        onTouchEnd() {
-            if (typeof this.wrapperStart === 'number' && $A.isIos()) {
-                $A.scrollToView(this.$refs.footer, false)
-            }
        },

        onPointerover({pointerType}) {