perf: 消息置顶滚动恢复

app/Http/Controllers/Api/DialogController.php

@@ -2296,13 +2296,14 @@ class DialogController extends AbstractController
         $dialog->save();
         //
         $data = [
+            'add' => null,
             'update' => [
                 'dialog_id' => $dialog->id,
                 'top_msg_id' => $dialog->top_msg_id,
                 'top_userid' => $dialog->top_userid,
             ]
         ];
-        $res = $msg->sendMsg(null, $dialog->id, 'top', [
+        $res = WebSocketDialogMsg::sendMsg(null, $dialog->id, 'top', [
             'action' => $dialog->top_msg_id ? 'add' : 'remove',
             'data' => [
                 'id' => $msg->id,

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

@@ -12,7 +12,7 @@
         <!--顶部导航-->
         <div ref="nav" class="dialog-nav">
             <slot name="head">
-                <div class="nav-wrapper" :class="{completed: $A.dialogCompleted(dialogData)}">
+                <div class="nav-wrapper" :class="navClass">
                     <div class="dialog-back" @click="onBack">
                         <i class="taskfont">&#xe676;</i>
                         <div v-if="msgUnreadOnly" class="back-num">{{msgUnreadOnly}}</div>
@@ -137,7 +137,7 @@
         </div>
 
         <!--置顶消息-->
-        <div v-if="topMessageInfo" class="dialog-top-message" :class="topMessageClass" @click="onPosTop">
+        <div v-if="topShow" class="dialog-top-message" @click="onPosTop">
             <div class="dialog-top-message-warp">
                 <div class="dialog-top-message-font">
                     <i class="taskfont">&#xe7e4;</i>
@@ -147,7 +147,10 @@
                         <UserAvatar :userid="topMessageInfo.userid" showName :showIcon="false"/>:
                         <span>{{$A.getMsgSimpleDesc(topMessageInfo)}}</span>
                     </p>
-                    <p class="personnel">{{$L('置顶人员')}} <UserAvatar :userid="dialogData.top_userid" showName :showIcon="false"/> </p>
+                    <p class="personnel">
+                        {{ $L('置顶人员') }}
+                        <UserAvatar :userid="dialogData.top_userid" showName :showIcon="false"/>
+                    </p>
                 </div>
                 <div class="dialog-top-message-btn">
                     <Loading v-if="topViewPosLoad" type="pure"/>
@@ -158,7 +161,7 @@
         </div>
 
         <!--跳转提示-->
-        <div v-if="positionShow && positionMsg" class="dialog-position" :class="{'down': tagShow}">
+        <div v-if="positionShow && positionMsg" class="dialog-position">
             <div class="position-label" @click="onPositionMark(positionMsg.msg_id)">
                 <Icon v-if="positionLoad > 0" type="ios-loading" class="icon-loading"></Icon>
                 <i v-else class="taskfont">&#xe624;</i>
@@ -171,7 +174,6 @@
             ref="scroller"
             class="dialog-scroller scrollbar-virtual"
             active-prefix="item"
-            :class="scrollerClass"
             :data-key="'id'"
             :data-sources="allMsgs"
             :data-component="msgItem"
@@ -949,6 +951,14 @@ export default {
             return this.todoList.length > 0 && this.windowScrollY === 0 && this.quoteId === 0
         },
 
+        tagShow() {
+            return this.msgTags.length > 1 && this.windowScrollY === 0 && !this.searchShow
+        },
+
+        topShow() {
+            return this.topMessageInfo && this.windowScrollY === 0 && !this.searchShow
+        },
+
         wrapperClass() {
             if (['ready', 'ing'].includes(this.recordState)) {
                 return ['record-ready']
@@ -956,12 +966,11 @@ export default {
             return null
         },
 
-        tagShow() {
+        navClass() {
-            return this.msgTags.length > 1 && this.windowScrollY === 0 && !this.searchShow
+            return {
-        },
+                'completed': $A.dialogCompleted(this.dialogData),
-
+                'tagged': this.tagShow
-        scrollerClass() {
+            }
-            return !this.$slots.head && !this.topMessageInfo && this.tagShow ? 'default-header' : null
         },
 
         pasteWrapperClass() {
@@ -1104,10 +1113,6 @@ export default {
 
         topMessageInfo() {
             return this.dialogData.top_msg_id && this.dialogMsgTops.find(({id}) => id == this.dialogData.top_msg_id)
-        },
-
-        topMessageClass() {
-            return !this.$slots.head && this.tagShow ? 'default-header' : null
         }
     },
 
@@ -3383,11 +3388,10 @@ export default {
                     data: {
                         msg_id: data.id
                     },
-                }).then(async ({ data, msg }) => {
+                }).then(({ data, msg }) => {
                     resolve(msg)
-                    this.onMarkOffset(false)
                     // 取消置顶
-                    await this.$store.dispatch("saveDialog", {
+                    this.$store.dispatch("saveDialog", {
                         'id' : this.dialogId,
                         'top_msg_id' : data.update?.top_msg_id || 0,
                         'top_userid' : data.update?.top_userid || 0
@@ -3396,10 +3400,15 @@ export default {
                     if (data.update?.top_msg_id) {
                         const index = this.dialogMsgs.findIndex(({ id }) => id == data.update.top_msg_id);
                         if (index > -1) {
-                            await this.$store.dispatch("saveDialogMsgTop", Object.assign({}, this.dialogMsgs[index]))
+                            this.$store.dispatch("saveDialogMsgTop", Object.assign({}, this.dialogMsgs[index]))
                         }
                     }
-                    this.onMarkOffset(true)
+                    // 添加消息
+                    if (data.add) {
+                        this.$store.dispatch("saveDialogMsg", data.add);
+                        this.$store.dispatch("updateDialogLastMsg", data.add);
+                        this.onActive();
+                    }
                 }).catch(({ msg }) => {
                     reject(msg);
                 }).finally(_ => {

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

@@ -437,8 +437,8 @@
     .dialog-top-message {
         background: white;
 
-        .dialog-top-message-warp{
+        .dialog-top-message-warp {
-            padding:10px 5px;
+            padding: 10px 5px;
             position: relative;
             display: flex;
             margin: 10px 16px 0;
@@ -450,24 +450,29 @@
             .dialog-top-message-content {
                 flex: 1;
                 overflow: hidden;
+
                 p {
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     display: flex;
                     gap: 4px;
+
                     &.content {
                         margin-bottom: 2px;
-                        >span{
+
+                        > span {
                             white-space: nowrap;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             line-height: 22px;
                         }
                     }
+
                     &.personnel {
                         font-size: 12px;
                         color: #afafaf;
+
                         .avatar-name {
                             color: #84C56A;
                             margin-left: 10px;
@@ -476,11 +481,12 @@
                 }
             }
 
-            .dialog-top-message-font{
+            .dialog-top-message-font {
                 line-height: 42px;
                 text-align: center;
-                padding:0 10px;
+                padding: 0 10px;
-                .taskfont{
+
+                .taskfont {
                     font-size: 16px;
                     padding: 5px;
                     border-radius: 50%;
@@ -494,12 +500,14 @@
                 align-items: center;
                 justify-content: flex-end;
                 gap: 10px;
-                padding:0 10px;
+                padding: 0 10px;
+
                 .taskfont {
                     border-radius: 3px;
                     font-size: 18px;
                     padding: 4px;
                 }
+
                 .common-pureing {
                     width: 18px;
                     height: 18px;
@@ -509,6 +517,41 @@
         }
     }
 
+    .dialog-position {
+        position: relative;
+        z-index: 2;
+        height: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        opacity: 0;
+        transform: translateX(100%);
+        animation: position-in-animation 200ms ease-out forwards;
+        animation-delay: 300ms;
+
+        .position-label {
+            position: absolute;
+            top: 24px;
+            right: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 5px 10px;
+            border-radius: 18px 0 0 18px;
+            color: #ffffff;
+            background-color: $primary-color;
+            cursor: pointer;
+            > i {
+                margin-right: 4px;
+                width: 14px;
+                height: 14px;
+                font-size: 14px;
+                line-height: 14px;
+            }
+        }
+    }
+
     .dialog-scroller {
         flex: 1;
         position: relative;
@@ -1534,38 +1577,6 @@
         }
     }
 
-    .dialog-position {
-        position: absolute;
-        top: 100px;
-        right: 0;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        opacity: 0;
-        transform: translateX(100%);
-        animation: position-in-animation 200ms ease-out forwards;
-        animation-delay: 300ms;
-
-        .position-label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 5px 10px;
-            border-radius: 18px 0 0 18px;
-            color: #ffffff;
-            background-color: $primary-color;
-            cursor: pointer;
-            > i {
-                margin-right: 4px;
-                width: 14px;
-                height: 14px;
-                font-size: 14px;
-                line-height: 14px;
-            }
-        }
-    }
-
     .dialog-footer {
         position: absolute;
         left: 0;
@@ -2216,6 +2227,10 @@ body.window-portrait {
                     }
                 }
 
+                &.tagged {
+                    margin-bottom: 34px;
+                }
+
                 .dialog-back,
                 .dialog-menu {
                     position: absolute;
@@ -2307,21 +2322,12 @@ body.window-portrait {
                 }
             }
         }
-        .dialog-top-message {
-            &.default-header {
-                margin-top: 34px;
-            }
-        }
         .dialog-scroller {
             padding-right: 14px;
             padding-left: 14px;
             overscroll-behavior: none;
             background-color: #ffffff;
 
-            &.default-header {
-                margin-top: 34px;
-            }
-
             .dialog-item {
                 .dialog-view {
                     &.text {
@@ -2363,11 +2369,6 @@ body.window-portrait {
                 }
             }
         }
-        .dialog-position {
-            &.down {
-                top: 130px;
-            }
-        }
         .dialog-footer {
             background-color: #f8f8f8;
             padding: 8px 10px;