函数名重构

src/views/contactList/group/components/PartitionOprMenu.vue

@@ -31,20 +31,20 @@ const x = ref(0)
 const y = ref(0)
 
 onMounted(() => {
-  containerRef.value?.addEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.addEventListener('contextmenu', handleShowMenu)
   document.addEventListener('keydown', handleEscEvent)
   document.addEventListener('click', closeMenu) //在其他地方的click事件要能关闭菜单
   document.addEventListener('contextmenu', closeMenu) //在其他地方的菜单事件也要能关闭菜单
 })
 
 onUnmounted(() => {
-  containerRef.value?.removeEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.removeEventListener('contextmenu', handleShowMenu)
   document.removeEventListener('keydown', handleEscEvent)
   document.removeEventListener('click', closeMenu)
   document.removeEventListener('contextmenu', closeMenu)
 })
 
-const handleSessionMenu = (e) => {
+const handleShowMenu = (e) => {
   e.preventDefault() //阻止浏览器默认行为
   e.stopPropagation() // 阻止冒泡
   isShowMenu.value = true
@@ -74,7 +74,7 @@ const handleClick = (item) => {
 }
 
 defineExpose({
-  handleSessionMenu
+  handleShowMenu
 })
 </script>
 

src/views/contactList/group/sub/SubPartition.vue

@@ -195,7 +195,7 @@ const onCustomContextMenu = (partitionId) => {
 
 const showOperationMenu = (e, partitionId) => {
   showOprMenuPartitionId.value = partitionId
-  oprMenuRef.value.handleSessionMenu(e)
+  oprMenuRef.value.handleShowMenu(e)
 }
 
 const onShowGroupCardFromSelectDialog = async (groupId) => {

src/views/contactList/user/components/PartitionOprMenu.vue

@@ -31,20 +31,20 @@ const x = ref(0)
 const y = ref(0)
 
 onMounted(() => {
-  containerRef.value?.addEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.addEventListener('contextmenu', handleShowMenu)
   document.addEventListener('keydown', handleEscEvent)
   document.addEventListener('click', closeMenu) //在其他地方的click事件要能关闭菜单
   document.addEventListener('contextmenu', closeMenu) //在其他地方的菜单事件也要能关闭菜单
 })
 
 onUnmounted(() => {
-  containerRef.value?.removeEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.removeEventListener('contextmenu', handleShowMenu)
   document.removeEventListener('keydown', handleEscEvent)
   document.removeEventListener('click', closeMenu)
   document.removeEventListener('contextmenu', closeMenu)
 })
 
-const handleSessionMenu = (e) => {
+const handleShowMenu = (e) => {
   e.preventDefault() //阻止浏览器默认行为
   e.stopPropagation() // 阻止冒泡
   isShowMenu.value = true
@@ -74,7 +74,7 @@ const handleClick = (item) => {
 }
 
 defineExpose({
-  handleSessionMenu
+  handleShowMenu
 })
 </script>
 

src/views/contactList/user/sub/SubPartition.vue

@@ -198,7 +198,7 @@ const onCustomContextMenu = (partitionId) => {
 
 const showOperationMenu = (e, partitionId) => {
   showOprMenuPartitionId.value = partitionId
-  oprMenuRef.value.handleSessionMenu(e)
+  oprMenuRef.value.handleShowMenu(e)
 }
 
 const onShowAddSessionByButton = (partitionId) => {

src/views/message/MessageLayout.vue

@@ -47,6 +47,7 @@ import router from '@/router'
 import { BEGIN_MSG_ID, msgContentType, msgSendStatus } from '@/const/msgConst'
 import EditDialog from '@/components/common/EditDialog.vue'
 import MenuAddOpr from '@/views/message/components/MenuAddOpr.vue'
+import MenuMsgMain from '@/views/message/components/MenuMsgMain.vue'
 import MessageGroupRightSide from '@/views/message/components/MessageGroupRightSide.vue'
 import HashNoData from '@/components/common/HasNoData.vue'
 import InputRecorder from '@/views/message/components/InputRecorder.vue'
@@ -1062,7 +1063,17 @@ const onSelectOprMenu = (label) => {
 }
 
 const showMenuAddOpr = (e) => {
-  addOprMenuRef.value.handleSessionMenu(e)
+  addOprMenuRef.value.handleShowMenu(e)
+}
+
+const onSelectMsgMainMenu = (label) => {
+  switch (label) {
+    case 'clearScreen':
+      console.log('清屏')
+      break
+    default:
+      break
+  }
 }
 
 /**
@@ -1269,27 +1280,29 @@ const onShowRecorder = () => {
                 ref="msgListDiv"
                 @wheel="handleMsgListWheel"
               >
-                <MessageItem
-                  v-for="item in msgKeysShow"
-                  :key="selectedSessionId + '-' + item"
-                  :id="'message-item-' + selectedSessionId + '-' + item"
-                  :class="{ highlighted: highlightedMsgIds.has(item) }"
-                  :sessionId="selectedSessionId"
-                  :msgKey="item"
-                  :extend="msgExtend[item]"
-                  :obj="getMsgSenderObj(item)"
-                  :readMsgId="selectedSession.readMsgId"
-                  :remoteRead="calibratedRemoteRead"
-                  :firstMsgId="firstMsgId"
-                  :lastMsgId="lastMsgId"
-                  :hasNoMoreMsg="hasNoMoreMsg"
-                  :isLoadMoreLoading="selectedSessionCache[selectedSessionId]?.isLoadMoreLoading"
-                  @loadMore="onLoadMore"
-                  @showUserCard="onShowUserCard"
-                  @showGroupCard="onShowGroupCard"
-                  @resendMsg="handleResendMessage"
-                  @loadFinished="updateScroll"
-                ></MessageItem>
+                <MenuMsgMain @selectMenu="onSelectMsgMainMenu">
+                  <MessageItem
+                    v-for="item in msgKeysShow"
+                    :key="selectedSessionId + '-' + item"
+                    :id="'message-item-' + selectedSessionId + '-' + item"
+                    :class="{ highlighted: highlightedMsgIds.has(item) }"
+                    :sessionId="selectedSessionId"
+                    :msgKey="item"
+                    :extend="msgExtend[item]"
+                    :obj="getMsgSenderObj(item)"
+                    :readMsgId="selectedSession.readMsgId"
+                    :remoteRead="calibratedRemoteRead"
+                    :firstMsgId="firstMsgId"
+                    :lastMsgId="lastMsgId"
+                    :hasNoMoreMsg="hasNoMoreMsg"
+                    :isLoadMoreLoading="selectedSessionCache[selectedSessionId]?.isLoadMoreLoading"
+                    @loadMore="onLoadMore"
+                    @showUserCard="onShowUserCard"
+                    @showGroupCard="onShowGroupCard"
+                    @resendMsg="handleResendMessage"
+                    @loadFinished="updateScroll"
+                  ></MessageItem>
+                </MenuMsgMain>
               </div>
               <el-button
                 type="primary"

src/views/message/components/MenuAddOpr.vue

@@ -42,7 +42,7 @@ onUnmounted(() => {
   document.removeEventListener('contextmenu', closeMenu)
 })
 
-const handleSessionMenu = (e) => {
+const handleShowMenu = (e) => {
   e.preventDefault() //阻止浏览器默认行为
   e.stopPropagation() // 阻止冒泡
   isShowMenu.value = true
@@ -63,7 +63,7 @@ const handleClick = (item) => {
 }
 
 defineExpose({
-  handleSessionMenu
+  handleShowMenu
 })
 </script>
 

src/views/message/components/MenuMember.vue

@@ -165,20 +165,20 @@ const x = ref(0)
 const y = ref(0)
 
 onMounted(() => {
-  containerRef.value?.addEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.addEventListener('contextmenu', handleShowMenu)
   document.addEventListener('keydown', handleEscEvent)
   document.addEventListener('click', closeMenu) //在其他地方的click事件要能关闭菜单
   document.addEventListener('contextmenu', closeMenu) //在其他地方的菜单事件也要能关闭菜单
 })
 
 onUnmounted(() => {
-  containerRef.value?.removeEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.removeEventListener('contextmenu', handleShowMenu)
   document.removeEventListener('keydown', handleEscEvent)
   document.removeEventListener('click', closeMenu)
   document.removeEventListener('contextmenu', closeMenu)
 })
 
-const handleSessionMenu = (e) => {
+const handleShowMenu = (e) => {
   e.preventDefault() //阻止浏览器默认行为
   e.stopPropagation() // 阻止冒泡
   isShowMenu.value = true

src/views/message/components/MenuMsgMain.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+
+const emit = defineEmits(['selectMenu'])
+
+const menu = computed(() => {
+  return [
+    {
+      label: 'clearScreen',
+      desc: '清屏'
+    }
+  ]
+})
+
+const containerRef = ref()
+const menuRef = ref()
+const isShowMenu = ref(false)
+const x = ref(0)
+const y = ref(0)
+
+onMounted(() => {
+  containerRef.value?.addEventListener('contextmenu', handleShowMenu)
+  document.addEventListener('keydown', handleEscEvent)
+  document.addEventListener('click', closeMenu) //在其他地方的click事件要能关闭菜单
+  document.addEventListener('contextmenu', closeMenu) //在其他地方的菜单事件也要能关闭菜单
+})
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener('contextmenu', handleShowMenu)
+  document.removeEventListener('keydown', handleEscEvent)
+  document.removeEventListener('click', closeMenu)
+  document.removeEventListener('contextmenu', closeMenu)
+})
+
+const handleShowMenu = (e) => {
+  e.preventDefault() //阻止浏览器默认行为
+  e.stopPropagation() // 阻止冒泡
+  isShowMenu.value = true
+  nextTick(() => {
+    //如果发现菜单超出window.innerWidth屏幕宽度，x要修正一下，往左边弹出菜单
+    if (e.clientX + menuRef.value.clientWidth > window.innerWidth) {
+      x.value = e.clientX - menuRef.value.clientWidth
+    } else {
+      x.value = e.clientX
+    }
+
+    // 如果发现菜单超出window.innerHeight屏幕高度，y要修正一下，往上面弹出菜单
+    if (e.clientY + menuRef.value.clientHeight > window.innerHeight) {
+      y.value = e.clientY - menuRef.value.clientHeight
+    } else {
+      y.value = e.clientY
+    }
+  })
+}
+
+const handleEscEvent = (event) => {
+  if (event.key === 'Escape') isShowMenu.value = false
+}
+
+const closeMenu = () => {
+  isShowMenu.value = false
+}
+
+const handleClick = (item) => {
+  emit('selectMenu', item.label)
+}
+</script>
+
+<template>
+  <div class="context-menu-container" ref="containerRef">
+    <!-- 在定义的插槽范围内都能打开菜单，超出了就不行 -->
+    <slot></slot>
+    <Teleport to="body">
+      <div
+        v-if="isShowMenu"
+        class="context-menu"
+        :style="{ left: x + 'px', top: y + 'px' }"
+        @contextmenu.prevent
+        ref="menuRef"
+      >
+        <div class="menu-list">
+          <div class="menu-item" v-for="item in menu" :key="item.label" @click="handleClick(item)">
+            <component class="menu-icon" :is="item.icon" />
+            <span class="menu-desc text-ellipsis">{{ item.desc }}</span>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.context-menu {
+  padding: 5px;
+  border-radius: 6px;
+  background-color: #fff;
+  position: absolute;
+  box-shadow: 2px 2px 20px gray;
+
+  .menu-item {
+    padding: 5px;
+    margin-top: 3px;
+    border-radius: 4px;
+    display: flex;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #e6e8eb;
+    }
+
+    .menu-icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    .menu-desc {
+      padding-left: 5px;
+      padding-right: 5px;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/message/components/MenuSession.vue

@@ -56,20 +56,20 @@ const x = ref(0)
 const y = ref(0)
 
 onMounted(() => {
-  containerRef.value?.addEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.addEventListener('contextmenu', handleShowMenu)
   document.addEventListener('keydown', handleEscEvent)
   document.addEventListener('click', closeMenu) //在其他地方的click事件要能关闭菜单
   document.addEventListener('contextmenu', closeMenu) //在其他地方的菜单事件也要能关闭菜单
 })
 
 onUnmounted(() => {
-  containerRef.value?.removeEventListener('contextmenu', handleSessionMenu)
+  containerRef.value?.removeEventListener('contextmenu', handleShowMenu)
   document.removeEventListener('keydown', handleEscEvent)
   document.removeEventListener('click', closeMenu)
   document.removeEventListener('contextmenu', closeMenu)
 })
 
-const handleSessionMenu = (e) => {
+const handleShowMenu = (e) => {
   isShowMenu.value = props.sessionId && true
   if (!isShowMenu.value) {
     return