From 9bcdc928065acabe63103d4326aa84ab70e7e00e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 7 May 2026 19:07:37 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E7=BE=A4=E5=90=8D=E7=89=87=20v0.2=EF=BC=9A=E7=AC=AC?=
 =?UTF-8?q?=E4=BA=8C=E6=AC=A1=E8=AF=84=E5=AE=A1=EF=BC=88=E9=9C=80=E6=B1=82?=
 =?UTF-8?q?=E5=90=84=E7=A7=8D=E8=BF=9B=E7=BE=A4=E7=9A=84=E5=B0=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/im/home/index.vue        |  4 +++-
 src/views/im/home/store/uiStore.ts | 29 ++++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/views/im/home/index.vue b/src/views/im/home/index.vue
index 52e9d24b2..bcfb88e21 100644
--- a/src/views/im/home/index.vue
+++ b/src/views/im/home/index.vue
@@ -3,7 +3,7 @@
     IM 外层容器：聊天模块的全屏沉浸式壳
     - 左侧 ToolBar：头像 + 三 Tab（消息/好友/群聊）+ 底部设置
     - 右侧 <router-view>：按路由渲染 MessagePage / FriendPage / GroupPage
-    - 挂载全局弹层：UserInfoCard / ContextMenu
+    - 挂载全局弹层：UserInfoCard / GroupInfoCard / ContextMenu
   -->
   <div class="flex w-full h-full overflow-hidden">
     <ToolBar />
@@ -20,6 +20,7 @@
 
     <!-- 全局弹层：由 useImUiStore 统一调度 -->
     <UserInfoCard />
+    <GroupInfoCard />
     <ContextMenu />
   </div>
 </template>
@@ -41,6 +42,7 @@ import { StorageKeys } from '../utils/storage'
 import type { Conversation } from './types'
 import ToolBar from './components/ToolBar.vue'
 import UserInfoCard from './components/user/UserInfoCard.vue'
+import GroupInfoCard from './components/group/GroupInfoCard.vue'
 import ContextMenu from './components/ContextMenu.vue'
 
 defineOptions({ name: 'ImIndex' })
diff --git a/src/views/im/home/store/uiStore.ts b/src/views/im/home/store/uiStore.ts
index 54c2eeef5..509f9060c 100644
--- a/src/views/im/home/store/uiStore.ts
+++ b/src/views/im/home/store/uiStore.ts
@@ -2,7 +2,7 @@ import { defineStore, acceptHMRUpdate } from 'pinia'
 import { reactive } from 'vue'
 
 import { ImFriendAddSource } from '../../utils/constants'
-import type { User } from '../types'
+import type { GroupLite, User } from '../types'
 
 /**
  * IM 全局 UI store
@@ -56,6 +56,29 @@ export const useImUiStore = defineStore('imUiStore', () => {
     userInfoCard.show = false
   }
 
+  // ==================== 群名片 GroupInfoCard ====================
+
+  const groupInfoCard = reactive({
+    show: false,
+    group: null as GroupLite | null,
+    position: { x: 0, y: 0 }
+  })
+
+  /** 鼠标点击位置 + 20px 横向偏移打开群名片，对齐 UserInfoCard 的统一观感 */
+  function openGroupInfoCardAtEvent(group: GroupLite, e: MouseEvent) {
+    const viewportWidth = document.documentElement.clientWidth
+    const viewportHeight = document.documentElement.clientHeight
+    groupInfoCard.group = group
+    groupInfoCard.position.x = Math.min(e.clientX + 20, viewportWidth - 350)
+    groupInfoCard.position.y = Math.min(e.clientY, viewportHeight - 220)
+    groupInfoCard.show = true
+  }
+
+  /** 关闭群名片 */
+  function closeGroupInfoCard() {
+    groupInfoCard.show = false
+  }
+
   // ==================== 右键菜单 ContextMenu ====================
   // 右键菜单虽然是一个组件挂在主壳上，但其触发时机分散在各列表
   interface ContextMenuItem {
@@ -99,6 +122,10 @@ export const useImUiStore = defineStore('imUiStore', () => {
     openUserInfoCardAtEvent,
     closeUserInfoCard,
 
+    groupInfoCard,
+    openGroupInfoCardAtEvent,
+    closeGroupInfoCard,
+
     contextMenu,
     openContextMenu,
     closeContextMenu