perf: 优化长按操作

resources/assets/js/directives/longpress.js

@@ -7,7 +7,7 @@ const longpress = {
             mode = 'default',
             isCall = false,
             pressTimer = null,
-            callback = binding.value;
+            callback = binding.value;   // 回调函数：第一个参数是事件对象（点到的对象），第二个参数是元素对象（注册绑定的对象）
         if ($A.isJson(binding.value)) {
             delay = binding.value.delay || 500;
             callback = binding.value.callback;

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

@@ -29,12 +29,12 @@
             {{source.msg.source === 'api' ? source.msg.notice : $L(source.msg.notice)}}
         </div>
         <template v-else>
-            <div class="dialog-avatar">
+            <div
-                <UserAvatar
+                ref="avatar"
-                    v-longpress="{callback: onMention, delay: 300}"
+                class="dialog-avatar"
-                    @open-dialog="onOpenDialog"
+                @contextmenu="handleOperation"
-                    :userid="source.userid"
+                @touchstart="handleOperation">
-                    :size="30"/>
+                <UserAvatar :userid="source.userid" :size="30" @open-dialog="onOpenDialog"/>
             </div>
             <DialogView
                 :msg-data="source"
@@ -46,7 +46,6 @@
                 :operate-action="operateVisible && source.id === operateItem.id"
                 :pointer-mouse="pointerMouse"
                 :is-right-msg="isRightMsg"
-                @on-longpress="onLongpress"
                 @on-view-reply="onViewReply"
                 @on-view-text="onViewText"
                 @on-view-file="onViewFile"
@@ -63,12 +62,10 @@
 <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,
@@ -217,6 +214,14 @@ export default {
             })
         },
 
+        handleOperation() {
+            this.$store.commit("longpress/set", {
+                type: 'mention',
+                data: this.source,
+                element: this.$refs.avatar
+            })
+        },
+
         onOpenDialog(userid) {
             if (this.dialogData.type == 'group' || ![this.dialogData.dialog_user?.userid, this.userId].includes(userid)) {
                 this.$store.dispatch("openDialogUserid", userid).catch(({msg}) => {
@@ -225,14 +230,6 @@ export default {
             }
         },
 
-        onMention() {
-            this.dispatch("on-mention", this.source)
-        },
-
-        onLongpress(e) {
-            this.dispatch("on-longpress", e)
-        },
-
         onViewReply(data) {
             this.dispatch("on-view-reply", data)
         },

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

@@ -6,10 +6,12 @@
         </div>
 
         <div
+            ref="dialogHead"
             class="dialog-head"
             :class="headClass"
             @click="handleClick"
-            v-longpress="{callback: handleLongpress, delay: 300}">
+            @contextmenu="handleOperation"
+            @touchstart="handleOperation">
             <!--回复-->
             <div v-if="!hideReply && msgData.reply_id && showReplyData(msgData.msg.reply_data)" class="dialog-reply no-dark-content" :class="replyClass" @click="viewReply">
                 <div class="reply-avatar">
@@ -178,7 +180,6 @@
 <script>
 import WCircle from "../../../../components/WCircle";
 import {mapGetters, mapState} from "vuex";
-import longpress from "../../../../directives/longpress";
 
 import TextMsg from "./text.vue";
 import LongTextMsg from "./longtext.vue";
@@ -209,7 +210,6 @@ export default {
         FileMsg,
         WCircle
     },
-    directives: {longpress},
     props: {
         msgData: {
             type: Object,
@@ -394,8 +394,12 @@ export default {
     },
 
     methods: {
-        handleLongpress(event, el) {
+        handleOperation() {
-            this.$emit("on-longpress", {event, el, msgData: this.msgData})
+            this.$store.commit("longpress/set", {
+                type: 'operateMsg',
+                data: this.msgData,
+                element: this.$refs.dialogHead
+            })
         },
 
         handleClick() {

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

@@ -182,7 +182,10 @@
         </div>
 
         <!--消息部分-->
-        <div ref="msgs" class="dialog-msgs">
+        <div
+            ref="msgs"
+            class="dialog-msgs"
+            v-longpress="{callback: handleLongpress, delay: 300}">
             <!--定位提示-->
             <div v-if="positionShow && positionMsg" class="dialog-position">
                 <div class="position-label" @click="onPositionMark(positionMsg.msg_id)">
@@ -211,8 +214,6 @@
                 @range="onRange"
                 @visible="onVisible"
 
-                @on-mention="onMention"
-                @on-longpress="onLongpress"
                 @on-view-reply="onViewReply"
                 @on-view-text="onViewText"
                 @on-view-file="onViewFile"
@@ -653,6 +654,7 @@ import DialogGroupWordChain from "./DialogGroupWordChain";
 import DialogGroupVote from "./DialogGroupVote";
 import DialogComplaint from "./DialogComplaint";
 import touchclick from "../../../directives/touchclick";
+import longpress from "../../../directives/longpress";
 import {languageList} from "../../../language";
 import {isLocalResourcePath} from "../../../components/Replace/utils";
 import emitter from "../../../store/events";
@@ -678,7 +680,7 @@ export default {
         DialogGroupVote,
         DialogComplaint,
     },
-    directives: {touchclick},
+    directives: {touchclick, longpress},
 
     props: {
         dialogId: {
@@ -875,6 +877,7 @@ export default {
             'readLoadNum',
             'readTimeout',
             'formOptions',
+            'longpressData',
             'cacheTranslationLanguage'
         ]),
 
@@ -3003,31 +3006,13 @@ export default {
             }
         },
 
-        onMsgType(type) {
+        handleLongpress(event) {
+            const {type, data, element} = this.longpressData;
+            this.$store.commit("longpress/clear")
+            //
             switch (type) {
-                case 'project':
+                // 长按触发提及
-                    this.openProject()
+                case "mention":
-                    break;
-
-                case 'task':
-                    this.openTask()
-                    break;
-
-                case 'okr':
-                    this.openOkr()
-                    break;
-
-                default:
-                    if (this.loadMsg) {
-                        $A.messageWarning("正在加载，请稍后再试...")
-                    } else {
-                        this.msgType = type
-                    }
-                    break;
-            }
-        },
-
-        onMention(data) {
                     const user = this.cacheUserBasic.find(({userid}) => userid == data.userid);
                     if (user) {
                         this.$refs.input?.addMention({
@@ -3036,11 +3021,12 @@ export default {
                             value: user.nickname,
                         })
                     }
-        },
+                    break;
 
-        onLongpress({event, el, msgData}) {
+                // 长按触发消息操作
-            this.operateVisible = this.operateItem.id === msgData.id;
+                case "operateMsg":
-            this.operateItem = $A.isJson(msgData) ? msgData : {};
+                    this.operateVisible = $A.isJson(data) && this.operateItem.id === data.id;
+                    this.operateItem = $A.isJson(data) ? data : {};
                     this.operateCopys = []
                     if (event.target.nodeName === 'IMG') {
                         if (this.$Electron) {
@@ -3051,7 +3037,7 @@ export default {
                                 value: $A.thumbRestore(event.target.currentSrc),
                             })
                         }
-                if (msgData.type !== 'file' && !isLocalResourcePath(event.target.currentSrc)) {
+                        if (data.type !== 'file' && !isLocalResourcePath(event.target.currentSrc)) {
                             this.operateCopys.push({
                                 type: 'imagedown',
                                 icon: '&#xe7a8;',
@@ -3077,8 +3063,8 @@ export default {
                         value: '',
                         visible: false,
                     })
-            if (msgData.type === 'text') {
+                    if (data.type === 'text') {
-                if (msgData.msg.text.replace(/<[^>]+>/g,"").length > 0) {
+                        if (data.msg.text.replace(/<[^>]+>/g,"").length > 0) {
                             this.operateCopys.push({
                                 type: 'text',
                                 icon: '&#xe77f;',
@@ -3087,7 +3073,7 @@ export default {
                                 value: '',
                             })
                         }
-                if (msgData.msg.type === 'md') {
+                        if (data.msg.type === 'md') {
                             this.operateCopys.push({
                                 type: 'md',
                                 icon: '&#xe77f;',
@@ -3100,8 +3086,34 @@ export default {
                         this.operateItem.clientX = event.clientX
                         this.operateItem.clientY = event.clientY
                         this.onSelectionchange()
-                this.onUpdateOperate(el)
+                        this.onUpdateOperate(element)
                     })
+                    break;
+            }
+        },
+
+        onMsgType(type) {
+            switch (type) {
+                case 'project':
+                    this.openProject()
+                    break;
+
+                case 'task':
+                    this.openTask()
+                    break;
+
+                case 'okr':
+                    this.openOkr()
+                    break;
+
+                default:
+                    if (this.loadMsg) {
+                        $A.messageWarning("正在加载，请稍后再试...")
+                    } else {
+                        this.msgType = type
+                    }
+                    break;
+            }
         },
 
         onSelectionchange() {

resources/assets/js/store/mutations.js

@@ -284,4 +284,13 @@ export default {
             $A.IDBSave("dialogQuotes", state.dialogQuotes)
         }
     },
+
+    // 长按事件
+    'longpress/set': function(state, {type, data, element}) {
+        state.longpressData = {type, data, element}
+    },
+
+    'longpress/clear': function(state) {
+        state.longpressData = {type: '', data: null, element: null}
+    },
 }

resources/assets/js/store/state.js

@@ -261,5 +261,8 @@ export default {
     cacheTranscriptionLanguage: '',
 
     // 下拉菜单操作
-    menuOperation: {}
+    menuOperation: {},
+
+    // 长按数据
+    longpressData: {type: '', data: null, element: null},
 };