pref: 优化消息列表

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

@@ -200,10 +200,12 @@
                 @on-emoji="onEmoji"
                 @on-show-emoji-user="onShowEmojiUser">
                 <template #header>
-                    <div v-if="(allMsgs.length === 0 && loadIng) || prevId > 0" class="dialog-item loading">
+                    <div class="dialog-item head-box">
-                        <div v-if="scrollOffset < 100" class="dialog-wrapper-loading"></div>
+                        <div v-if="loadIng > 0 || prevId > 0" class="loading" :class="{filled: allMsgs.length === 0}">
+                            <span v-if="scrollOffset < 100"></span>
+                        </div>
+                        <div v-else-if="allMsgs.length === 0" class="describe filled">{{$L('暂无消息')}}</div>
                     </div>
-                    <div v-else-if="allMsgs.length === 0" class="dialog-item nothing">{{$L('暂无消息')}}</div>
                 </template>
             </VirtualList>
         </div>
@@ -2131,17 +2133,19 @@ export default {
             requestAnimationFrame(_ => this.msgActiveId = id)
         },
 
-        onToOffset(offset) {
+        onToOffset(offset, forceFront = false) {
             const scroller = this.$refs.scroller;
             if (scroller) {
                 const front = scroller.getOffset() > offset
                 scroller.stopToBottom();
                 scroller.scrollToOffset(offset);
-                if (front) {
+                setTimeout(_ => {
-                    scroller.virtual.handleFront()
+                    if (front || forceFront) {
-                } else {
+                        scroller.virtual.handleFront()
-                    scroller.virtual.handleBehind()
+                    } else {
-                }
+                        scroller.virtual.handleBehind()
+                    }
+                }, 10)
             }
         },
 
@@ -2218,11 +2222,7 @@ export default {
                         const previousSize = typeof previousValue === "object" ? previousValue.size : scroller.getSize(previousValue)
                         return {size: previousSize + scroller.getSize(currentId)}
                     })
-                    let offset = scroller.getOffset() + reducer.size
+                    this.onToOffset(scroller.getOffset() + reducer.size, true)
-                    if (this.prevId === 0) {
-                        offset -= 36
-                    }
-                    this.onToOffset(offset)
                 });
             }).catch(() => {})
         },

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

@@ -1411,6 +1411,37 @@
 
             }
 
+            &.head-box {
+                height: 36px;
+                align-items: center;
+                justify-content: center;
+
+                .loading {
+                    > span {
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 50%;
+                        display: block;
+                        margin: 0 auto;
+                        position: relative;
+                        background: #e3e3e3;
+                        box-sizing: border-box;
+                        animation: head-box-loading-animation 0.5s linear infinite alternate;
+                    }
+                }
+
+                .describe {
+                    color: $primary-desc-color;
+                }
+
+                .filled {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+            }
+
             &.unread-start {
                 position: relative;
                 padding-top: 44px;
@@ -1436,22 +1467,6 @@
                 }
             }
 
-            &.loading {
-                height: 20px;
-                box-sizing: content-box;
-                align-items: center;
-                justify-content: center;
-            }
-
-            &.nothing {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                color: $primary-desc-color;
-                padding: 0;
-            }
-
             &.self {
                 flex-direction: row-reverse;
 
@@ -2116,19 +2131,7 @@ body:not(.window-touch) {
     overflow: hidden !important;
 }
 
-.dialog-wrapper-loading {
+@keyframes head-box-loading-animation {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    display: block;
-    margin: 0 auto;
-    position: relative;
-    background: #e3e3e3;
-    box-sizing: border-box;
-    animation: dialog-loading-animation 0.5s linear infinite alternate;
-}
-
-@keyframes dialog-loading-animation {
     0% {
         box-shadow: 0 0, 0 0;
         color: rgba(#e3e3e3, 0.2);