优化消息滚动

package.json

@@ -54,7 +54,7 @@
         "vue-resize-observer": "^2.0.16",
         "vue-router": "^3.5.3",
         "vue-template-compiler": "^2.6.14",
-        "vue-virtual-scroll-list-hi": "^2.3.3-4",
+        "vue-virtual-scroll-list-hi": "^2.3.3-7",
         "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2",
         "webpack": "^5.69.1",

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

@@ -96,7 +96,8 @@
             :item-class-add="itemClassAdd"
             :extra-props="{dialogData, operateVisible, operateItem, hidePercentage: isMyDialog, hideReply: msgId > 0}"
             :estimate-size="78"
-            :keeps="70"
+            :keeps="50"
+            :disabled="scrollDisabled"
             @scroll="onScroll"
             @range="onRange"
             @totop="onPrevPage"
@@ -392,6 +393,7 @@ export default {
             replyListShow: false,
             replyListId: 0,
 
+            scrollDisabled: false,
             scrollDirection: null,
             scrollAction: 0,
             scrollTmp: 0,
@@ -595,7 +597,7 @@ export default {
         },
 
         msgType(type) {
-            this.onToBottom()
+            requestAnimationFrame(this.onToBottom)
             if (type) {
                 this.$store.dispatch("getDialogMsgs", {
                     dialog_id: this.dialogId,
@@ -1086,7 +1088,10 @@ export default {
                 dialog_id: this.dialogId,
                 msg_id: this.msgId,
                 msg_type: this.msgType,
-                prev_id: this.prevId
+                prev_id: this.prevId,
+                save_before: _ => {
+                    this.scrollDisabled = true
+                }
             }).then(({data}) => {
                 const ids = data.list.map(item => item.id)
                 this.$nextTick(() => {
@@ -1099,7 +1104,8 @@ export default {
                     if (this.prevId === 0) {
                         size -= 36
                     }
-                    this.onToOffset(size);
+                    this.onToOffset(size)
+                    this.scrollDisabled = false
                 });
             }).catch(() => {})
         },

resources/assets/js/store/actions.js

@@ -2183,7 +2183,7 @@ export default {
      * @param state
      * @param dispatch
      * @param getters
-     * @param data {dialog_id, msg_id, ?msg_type, ?position_id, ?prev_id, ?next_id}
+     * @param data {dialog_id, msg_id, ?msg_type, ?position_id, ?prev_id, ?next_id, ?save_before, ?save_after}
      * @returns {Promise<unknown>}
      */
     getDialogMsgs({state, dispatch, getters}, data) {
@@ -2194,6 +2194,11 @@ export default {
                 return;
             }
             //
+            const saveBefore = typeof data.save_before === "function" ? data.save_before : _ => {}
+            const saveAfter = typeof data.save_after === "function" ? data.save_after : _ => {}
+            if (typeof data.save_before !== "undefined") delete data.save_before
+            if (typeof data.save_after !== "undefined") delete data.save_after
+            //
             const loadKey = `msg::${data.dialog_id}-${data.msg_id}-${data.msg_type || ''}`
             if (getters.isLoad(loadKey)) {
                 reject({msg: 'Loading'});
@@ -2214,7 +2219,9 @@ export default {
                     state.dialogMsgs = state.dialogMsgs.filter(item => item.dialog_id != data.dialog_id || ids.includes(item.id));
                 }
                 //
-                dispatch("saveDialogMsg", resData.list);
+                saveBefore()
+                dispatch("saveDialogMsg", resData.list)
+                saveAfter()
                 resolve(result)
             }).catch(e => {
                 console.warn(e);

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

@@ -210,7 +210,7 @@
 
         .nav-tags {
             position: absolute;
-            top: 74px;
+            top: 78px;
             left: 0;
             width: 100%;
             z-index: 2;
@@ -311,7 +311,7 @@
         padding: 16px 32px 0;
 
         &.default-header {
-            padding-top: 48px;
+            padding-top: 56px;
         }
 
         .dialog-shake {
@@ -1352,6 +1352,10 @@
             user-select: none;
             background-color: #ffffff;
 
+            &.default-header {
+                padding-top: 48px;
+            }
+
             .dialog-item {
                 .dialog-view {
                     .dialog-head {