perf: 点击会话消息头像@

resources/assets/js/components/UserAvatar.vue

@@ -295,17 +295,16 @@
             onClickOpen() {
                 if (this.clickOpenDialog) {
                     this.openDialog()
+                } else {
+                    this.$emit('open-dialog', this.userid)
                 }
             },
 
             openDialog() {
-                this.$store.dispatch("showSpinner", 600)
                 this.$store.dispatch("openDialogUserid", this.userid).then(_ => {
                     this.goForward({name: 'manage-messenger'})
                 }).catch(({msg}) => {
                     $A.modalError(msg)
-                }).finally(_ => {
-                    this.$store.dispatch("hiddenSpinner")
                 });
             },
 

resources/assets/js/pages/manage/components/ChatInput/index.vue

@@ -1022,6 +1022,13 @@ export default {
             }
         },
 
+        addMention(data) {
+            if (!this.quill) {
+                return;
+            }
+            this.quill.getModule("mention").insertItem(data, true);
+        },
+
         getProjectId() {
             let object = null;
             if (this.dialogId > 0) {

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

@@ -22,7 +22,12 @@
         </div>
         <template v-else>
             <div class="dialog-avatar">
-                <UserAvatar :userid="source.userid" tooltip-disabled :click-open-dialog="dialogData.type == 'group'" :size="30"/>
+                <UserAvatar
+                    v-longpress="{callback: onMention, delay: 300}"
+                    @open-dialog="onOpenDialog"
+                    :userid="source.userid"
+                    :size="30"
+                    tooltip-disabled/>
             </div>
             <DialogView
                 :msg-data="source"
@@ -48,10 +53,12 @@
 <script>
 import {mapState} from "vuex";
 import DialogView from "./DialogView";
+import longpress from "../../../directives/longpress";
 
 export default {
     name: "DialogItem",
     components: {DialogView},
+    directives: {longpress},
     props: {
         source: {
             type: Object,
@@ -169,6 +176,21 @@ export default {
             })
         },
 
+        onOpenDialog(userid) {
+            if (this.dialogData.type != 'group') {
+                return
+            }
+            this.$store.dispatch("openDialogUserid", userid).then(_ => {
+                this.goForward({name: 'manage-messenger'})
+            }).catch(({msg}) => {
+                $A.modalError(msg)
+            });
+        },
+
+        onMention() {
+            this.dispatch("on-mention", this.source)
+        },
+
         onLongpress(e) {
             this.dispatch("on-longpress", e)
         },

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

@@ -125,6 +125,7 @@
             @range="onRange"
             @totop="onPrevPage"
 
+            @on-mention="onMention"
             @on-longpress="onLongpress"
             @on-view-reply="onViewReply"
             @on-view-text="onViewText"
@@ -569,7 +570,8 @@ export default {
             'cacheDialogs',
             'wsOpenNum',
             'touchBackInProgress',
-            'dialogIns'
+            'dialogIns',
+            'cacheUserBasic'
         ]),
 
         ...mapGetters(['isLoad']),
@@ -1777,6 +1779,17 @@ export default {
             }
         },
 
+        onMention(data) {
+            const user = this.cacheUserBasic.find(({userid}) => userid == data.userid);
+            if (user) {
+                this.$refs.input.addMention({
+                    denotationChar: "@",
+                    id: user.userid,
+                    value: user.nickname,
+                })
+            }
+        },
+
         onLongpress({event, el, msgData}) {
             this.operateVisible = this.operateItem.id === msgData.id;
             this.operateItem = $A.isJson(msgData) ? msgData : {};