✨ feat(im): 初始化群名片 v0.2：第二次评审（需求各种进群的小问题）

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' })

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