From 69fb875421a6e14c3c1815dbbe2767a0f3c61ce3 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sun, 3 Jul 2022 00:12:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                       |  2 +-
 .../js/pages/manage/components/DialogWrapper.vue   | 14 ++++++++++----
 resources/assets/js/store/actions.js               | 11 +++++++++--
 .../sass/pages/components/dialog-wrapper.scss      |  8 ++++++--
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index b1969e324..554b2b029 100644
--- a/package.json
+++ b/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",
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 7ee65f45e..e3f834d1a 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/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(() => {})
         },
diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
index 79e5c1821..4b393ce0f 100644
--- a/resources/assets/js/store/actions.js
+++ b/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);
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 7568e2944..0f1020b6c 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/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 {