From fa67c713675903f148dc547e513fdd16503f8d7e Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Thu, 17 Oct 2024 12:50:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9session=E4=BC=9A=E8=AF=9D=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=A2=9E=E5=8A=A0=E5=8F=B3=E9=94=AE=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E8=8F=9C=E5=8D=95=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/message.js                    |   4 +
 src/components/common/ContextMenu.vue | 101 ++++++++++++++
 src/components/message/SessionBox.vue | 183 ++++++++++++++++++--------
 src/stores/message.js                 |   5 +
 src/views/layout/LayoutContainer.vue  |   2 +-
 src/views/message/MessageLayout.vue   |  55 ++++++--
 6 files changed, 278 insertions(+), 72 deletions(-)
 create mode 100644 src/components/common/ContextMenu.vue

diff --git a/src/api/message.js b/src/api/message.js
index 2b3e856..144c305 100644
--- a/src/api/message.js
+++ b/src/api/message.js
@@ -16,3 +16,7 @@ export const msgChatPullMsgService = (obj) => {
 export const msgChatCreateSessionService = (obj) => {
   return request.post('/chat/createSession', getReqBody(obj))
 }
+
+export const msgChatDeleteSessionService = (obj) => {
+  return request.post('/chat/deleteSession', getReqBody(obj))
+}
diff --git a/src/components/common/ContextMenu.vue b/src/components/common/ContextMenu.vue
new file mode 100644
index 0000000..e1eeff4
--- /dev/null
+++ b/src/components/common/ContextMenu.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps(['menu'])
+const emit = defineEmits(['selectMenu'])
+
+const containerRef = ref()
+const isShowMenu = ref(false)
+const x = ref(0)
+const y = ref(0)
+
+onMounted(() => {
+  containerRef.value?.addEventListener('contextmenu', handleContextMenu)
+  document.addEventListener('keydown', handleEscEvent)
+  document.addEventListener('click', closeMenu) //在其他地方的click事件要能关闭菜单
+  document.addEventListener('contextmenu', closeMenu) //在其他地方的菜单事件也要能关闭菜单
+})
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener('contextmenu', handleContextMenu)
+  document.removeEventListener('keydown', handleEscEvent)
+  document.removeEventListener('click', closeMenu)
+  document.removeEventListener('contextmenu', closeMenu)
+})
+
+const handleContextMenu = (e) => {
+  e.preventDefault() //阻止浏览器默认行为
+  e.stopPropagation() // 阻止冒泡
+  isShowMenu.value = true
+  x.value = e.clientX
+  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)
+}
+</script>
+
+<template>
+  <div class="context-menu-container" ref="containerRef">
+    <!-- 在定义的插槽范围内都能打开菜单，超出了就不行 -->
+    <slot></slot>
+    <Teleport to="body">
+      <div
+        v-if="isShowMenu && props.menu.length > 0"
+        class="context-menu"
+        :style="{ left: x + 'px', top: y + 'px' }"
+        @contextmenu.prevent
+      >
+        <div class="menu-list">
+          <div
+            class="menu-item"
+            v-for="item in props.menu"
+            :key="item.label"
+            @click="handleClick(item)"
+          >
+            <span class="desc">{{ 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;
+
+  .menu-item {
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 20px;
+    margin-top: 3px;
+    border-radius: 4px;
+    display: flex;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f0f0f0;
+    }
+
+    .desc {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/components/message/SessionBox.vue b/src/components/message/SessionBox.vue
index 98d396c..8e7151e 100644
--- a/src/components/message/SessionBox.vue
+++ b/src/components/message/SessionBox.vue
@@ -1,14 +1,27 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import AvatarIcon from './AvatarIcon.vue'
 import SessionTag from './SessionTag.vue'
 import { sessionShowTime } from '@/utils/common'
 import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
 import { MsgType } from '@/proto/msg'
 import { messageStore } from '@/stores'
+import { msgChatDeleteSessionService } from '@/api/message'
 
-const props = defineProps(['sessionId', 'selectedSessionId'])
-const emit = defineEmits(['isSelected', 'switchTag', 'showUserCard', 'showGroupCard'])
+const props = defineProps([
+  'sessionId',
+  'selectedSessionId',
+  'showMenuSessionId',
+  'selectedMenuItem'
+])
+const emit = defineEmits([
+  'isSelected',
+  'switchTag',
+  'showUserCard',
+  'showGroupCard',
+  'customContextmenu',
+  'updateMenu'
+])
 const messageData = messageStore()
 const sessionInfo = computed(() => {
   return messageData.sessionList[props.sessionId]
@@ -17,10 +30,35 @@ const sessionInfo = computed(() => {
 const top = ref(sessionInfo.value.top)
 const muted = ref(sessionInfo.value.muted)
 
+// 这里不能用ref，因为这个结构不能响应top和muted变化
+const menu = computed(() => {
+  return [
+    {
+      label: 'top',
+      value: top.value,
+      desc: top.value ? '取消置顶' : '置顶'
+    },
+    {
+      label: 'muted',
+      value: muted.value,
+      desc: muted.value ? '取消免打扰' : '设置免打扰'
+    },
+    {
+      label: 'delete',
+      value: '',
+      desc: '删除会话'
+    }
+  ]
+})
+
 const hasBeenSelected = computed(() => {
   return props.sessionId === props.selectedSessionId
 })
 
+const hasBeenShowMenu = computed(() => {
+  return props.sessionId === props.showMenuSessionId
+})
+
 const showName = computed(() => {
   switch (sessionInfo.value.sessionType) {
     case MsgType.CHAT:
@@ -95,64 +133,95 @@ const switchTag = (func) => {
     })
   }, 100) // 这个时间太长会影响置顶按钮的响应时长
 }
+
+watch(
+  () => props.selectedMenuItem,
+  async () => {
+    if (hasBeenShowMenu.value && props.selectedMenuItem) {
+      switch (props.selectedMenuItem.label) {
+        case 'top':
+          top.value = !top.value
+          break
+        case 'muted':
+          muted.value = !muted.value
+          break
+        case 'delete':
+          await msgChatDeleteSessionService({ sessionId: props.sessionId })
+          messageData.deleteSession(props.sessionId)
+          break
+        default:
+          break
+      }
+
+      switchTag(() => {})
+      emit('updateMenu', menu.value) //更新之后要同步菜单变化
+    }
+  }
+)
+
+const onContextmenu = () => {
+  emit('customContextmenu', { sessionId: props.sessionId, menu: menu.value })
+}
 </script>
 
 <template>
-  <div class="session-box" :class="{ 'session-box-active': hasBeenSelected }">
-    <AvatarIcon
-      class="avatar-session-box"
-      :showName="showName"
-      :showId="showId"
-      :showAvatarThumb="showAvatarThumb"
-      @click="onShowCard"
-    ></AvatarIcon>
-    <div v-if="isShowUnreadCount" class="unread-tips"></div>
-    <div class="content-box" @click="emit('isSelected', props.sessionId)">
-      <div class="header">
-        <div class="title">
-          <span class="showName">{{ showName || showId }}</span>
-          <span v-if="sessionInfo.objectInfo.account" class="showAccount">
-            {{ sessionInfo.objectInfo.account }}
-          </span>
-          <SessionTag :tagType="sessionInfo.sessionType"></SessionTag>
-          <SessionTag v-if="top" tagType="top"></SessionTag>
-          <SessionTag v-if="muted" tagType="mute"></SessionTag>
+  <div class="session-box-wrapper" @contextmenu.prevent="onContextmenu">
+    <div class="session-box" :class="{ 'session-box-active': hasBeenSelected }">
+      <AvatarIcon
+        class="avatar-session-box"
+        :showName="showName"
+        :showId="showId"
+        :showAvatarThumb="showAvatarThumb"
+        @click="onShowCard"
+      ></AvatarIcon>
+      <div v-if="isShowUnreadCount" class="unread-tips"></div>
+      <div class="content-box" @click="emit('isSelected', props.sessionId)">
+        <div class="header">
+          <div class="title">
+            <span class="showName">{{ showName || showId }}</span>
+            <span v-if="sessionInfo.objectInfo.account" class="showAccount">
+              {{ sessionInfo.objectInfo.account }}
+            </span>
+            <SessionTag :tagType="sessionInfo.sessionType"></SessionTag>
+            <SessionTag v-if="top" tagType="top"></SessionTag>
+            <SessionTag v-if="muted" tagType="mute"></SessionTag>
+          </div>
+          <div class="datetime">
+            <span>{{ showTime }}</span>
+          </div>
         </div>
-        <div class="datetime">
-          <span>{{ showTime }}</span>
-        </div>
-      </div>
-      <div class="body">
-        <div class="content">
-          <span v-if="isShowUnreadCount" class="unread-count"
-            >[{{ sessionInfo.unreadCount }}条]</span
-          >
-          <span v-if="isShowDraft" class="draft">[草稿]</span>
-          <span class="detail">{{
-            isShowDraft ? sessionInfo.draft : sessionInfo.lastMsgContent
-          }}</span>
-        </div>
-        <div class="action">
-          <el-button
-            class="action-button"
-            :icon="top ? Bottom : Top"
-            @click="
-              switchTag(() => {
-                top = !top
-              })
-            "
-            circle
-          />
-          <el-button
-            class="action-button"
-            :icon="muted ? Bell : MuteNotification"
-            @click="
-              switchTag(() => {
-                muted = !muted
-              })
-            "
-            circle
-          />
+        <div class="body">
+          <div class="content">
+            <span v-if="isShowUnreadCount" class="unread-count"
+              >[{{ sessionInfo.unreadCount }}条]</span
+            >
+            <span v-if="isShowDraft" class="draft">[草稿]</span>
+            <span class="detail">{{
+              isShowDraft ? sessionInfo.draft : sessionInfo.lastMsgContent
+            }}</span>
+          </div>
+          <div class="action">
+            <el-button
+              class="action-button"
+              :icon="top ? Bottom : Top"
+              @click="
+                switchTag(() => {
+                  top = !top
+                })
+              "
+              circle
+            />
+            <el-button
+              class="action-button"
+              :icon="muted ? Bell : MuteNotification"
+              @click="
+                switchTag(() => {
+                  muted = !muted
+                })
+              "
+              circle
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/stores/message.js b/src/stores/message.js
index 6799e26..a8c73b5 100644
--- a/src/stores/message.js
+++ b/src/stores/message.js
@@ -18,6 +18,10 @@ export const messageStore = defineStore('anyim-message', () => {
     sessionList.value[session.sessionId] = session
   }
 
+  const deleteSession = (sessionId) => {
+    delete sessionList.value[sessionId]
+  }
+
   const updateSession = (obj) => {
     let params = { sessionId: obj.sessionId }
     let flag = false // 是否需要更新云端的数据
@@ -110,6 +114,7 @@ export const messageStore = defineStore('anyim-message', () => {
     sessionList,
     setSessionList,
     addSession,
+    deleteSession,
     updateSession,
 
     msgRecordsList,
diff --git a/src/views/layout/LayoutContainer.vue b/src/views/layout/LayoutContainer.vue
index f494e79..919f906 100644
--- a/src/views/layout/LayoutContainer.vue
+++ b/src/views/layout/LayoutContainer.vue
@@ -78,7 +78,7 @@ const onExit = async () => {
 </script>
 
 <template>
-  <el-container class="layout-container">
+  <el-container class="layout-container" @contextmenu.prevent>
     <el-aside width="100px">
       <span class="avatar">
         <AvatarIcon
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index fa8c863..ee728d2 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -35,12 +35,16 @@ import { userQueryService } from '@/api/user'
 import { ElLoading } from 'element-plus'
 import { el_loading_options } from '@/const/commonConst'
 import { combineId, sessionIdConvert } from '@/utils/common'
+import ContextMenu from '@/components/common/ContextMenu.vue'
 
 const userData = userStore()
 const settingData = settingStore()
 const messageData = messageStore()
-const sessionId = ref('')
+const sessionId = ref('') //当前被选中的session
 const sessionListRef = ref()
+const showMenuSessionId = ref('') //当前被点击右键的sessionId（它可以不是选中的）
+const showMenu = ref([]) //传递给菜单组件的菜单选项
+const selectedMenuItem = ref('') //菜单组件反馈用户点击的某个菜单项
 
 const asideWidth = ref(0)
 const asideWidthMin = 200
@@ -502,6 +506,20 @@ watch(() => msgRecords.value, (oldValue) => {
   })
 })
 
+const onSelectMenu = (item) => {
+  selectedMenuItem.value = item
+  
+}
+
+const onCustomContextmenu = ({ sessionId, menu }) => {
+  showMenuSessionId.value = sessionId
+  showMenu.value = menu
+}
+
+const onUpdateMenu = (menu) => {
+  showMenu.value = menu
+}
+
 </script>
 
 <template>
@@ -513,19 +531,25 @@ watch(() => msgRecords.value, (oldValue) => {
           <AddBotton></AddBotton>
         </div>
 
-        <div class="session-list my-scrollbar" ref="sessionListRef">
-          <SessionBox
-            :id="`session-box-${sessionIdConvert(item.sessionId)}`"
-            v-for="item in sessionListSorted"
-            :key="item.sessionId"
-            :sessionId="item.sessionId"
-            :selectedSessionId="sessionId"
-            @isSelected="handleSelecteSession"
-            @switchTag="handleSwitchTag"
-            @showUserCard="onShowUserCard"
-            @showGroupCard="onShowGroupCard"
-          ></SessionBox>
-        </div>
+        <ContextMenu :menu="showMenu" @selectMenu="onSelectMenu">
+          <div class="session-list my-scrollbar" ref="sessionListRef">
+            <SessionBox
+              :id="`session-box-${sessionIdConvert(item.sessionId)}`"
+              v-for="item in sessionListSorted"
+              :key="item.sessionId"
+              :sessionId="item.sessionId"
+              :selectedSessionId="sessionId"
+              :showMenuSessionId="showMenuSessionId"
+              :selectedMenuItem="selectedMenuItem"
+              @isSelected="handleSelecteSession"
+              @switchTag="handleSwitchTag"
+              @showUserCard="onShowUserCard"
+              @showGroupCard="onShowGroupCard"
+              @customContextmenu="onCustomContextmenu"
+              @updateMenu="onUpdateMenu"
+            ></SessionBox>
+          </div>
+        </ContextMenu>
       </div>
 
       <DragLine
@@ -713,6 +737,9 @@ watch(() => msgRecords.value, (oldValue) => {
 
       .session-list {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 0; // 防止右键点击到两个sessionBox中间的真空地带，造成弹出的菜单不能准确找到到session
         overflow-y: scroll; // 用它的滚动条
       }
     }