From 27cd042df9aca0383a49f3514bc21958dd890912 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 六月 2026 15:42:23 +0800
Subject: [PATCH] 银川 1.联调产品维护页面 2.添加IM即时通讯模块
---
src/views/im/home/components/group/group-info-card.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 116 insertions(+), 0 deletions(-)
diff --git a/src/views/im/home/components/group/group-info-card.vue b/src/views/im/home/components/group/group-info-card.vue
new file mode 100644
index 0000000..05de318
--- /dev/null
+++ b/src/views/im/home/components/group/group-info-card.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { GroupLite } from '../../types'
+
+import { computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { prompt } from '#/packages/effects/common-ui/src'
+
+import { Input, message } from 'ant-design-vue'
+
+import { applyJoinGroup } from '#/api/im/group/request'
+
+import { ImConversationType, ImGroupAddSource } from '../../../utils/constants'
+import { getGroupDisplayName } from '../../../utils/user'
+import { useConversationStore } from '../../store/conversationStore'
+import { useGroupStore } from '../../store/groupStore'
+import { useImUiStore } from '../../store/uiStore'
+import GroupInfo from './group-info.vue'
+
+defineOptions({ name: 'ImGroupInfoCard' })
+
+const uiStore = useImUiStore()
+const conversationStore = useConversationStore()
+const groupStore = useGroupStore()
+const router = useRouter()
+
+const card = computed(() => uiStore.groupInfoCard)
+
+/** 鍏抽棴娴眰 */
+function handleClose() {
+ uiStore.closeGroupInfoCard()
+}
+
+/** Esc 鍏抽棴 */
+function handleKeydown(e: KeyboardEvent) {
+ if (e.key === 'Escape' && card.value.show) {
+ handleClose()
+ }
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
+
+/** 杩涘叆缇よ亰锛氬彇鏈湴鏈�鏂扮兢淇℃伅锛堝惈 silent / 缇ゅ娉級锛屾柊寤烘垨婵�娲讳細璇� + 璺宠矾鐢� */
+function handleChat(group: GroupLite) {
+ const cached = groupStore.getGroup(group.id)
+ // cached 鍛戒腑璧� getGroupDisplayName 璁╃兢澶囨敞浼樺厛锛堜笌 contact / 浼氳瘽鍒楄〃鐨勫睍绀哄悕涓�鑷达級锛涚己 cached 鏃跺洖钀� showGroupName / 鍘熺兢鍚�
+ const displayName = cached
+ ? getGroupDisplayName(cached)
+ : group.showGroupName || group.name || ''
+ // 鎵撳紑鎴栨柊寤轰細璇�
+ conversationStore.openConversation(
+ group.id,
+ ImConversationType.GROUP,
+ displayName,
+ cached?.avatar || group.showImage || '',
+ { silent: !!cached?.silent }
+ )
+
+ // 濡傛灉涓嶅湪浼氳瘽椤碉紝鍏堣烦杩囧幓锛堝鏋滃湪浜嗭紝MessagePanel 浼氳嚜宸辨劅鐭ヤ細璇濆彉鍖栧埛鏂帮級
+ if (router.currentRoute.value.name !== 'ImHomeConversation') {
+ router.push({ name: 'ImHomeConversation' })
+ }
+ handleClose()
+}
+
+/** 鍔犲叆缇よ亰锛氬厛鍏虫诞灞傦紙閬垮厤涓� prompt 鐨� mask 浜掔浉閬尅锛夆啋 寮圭敵璇风悊鐢憋紙鍙�夛級鈫� applyJoinGroup */
+async function handleApply(group: GroupLite) {
+ handleClose()
+ let applyContent: string
+ try {
+ const result = await prompt<string>({
+ cancelText: '鍙栨秷',
+ component: Input,
+ componentProps: {
+ allowClear: true,
+ placeholder: '璇峰～鍐欓獙璇佹秷鎭紙鍙�夛級'
+ },
+ content: '',
+ defaultValue: '',
+ confirmText: '鍙戦�佺敵璇�',
+ modelPropName: 'value',
+ title: `鐢宠鍔犲叆銆�${group.name || ''}銆峘
+ })
+ applyContent = (result || '').trim()
+ } catch {
+ return
+ }
+ await applyJoinGroup({
+ groupId: group.id,
+ applyContent: applyContent || undefined,
+ addSource: ImGroupAddSource.SHARE_LINK
+ })
+ message.success('鍔犵兢鐢宠宸插彂閫�')
+}
+</script>
+
+<template>
+ <!--
+ 缇や俊鎭诞灞傦紙涓� UserInfoCard 瀵逛綅锛�
+ - 浠呮壙鎷呫�屾诞灞傚畾浣� + 鍏抽棴閫昏緫锛堢偣閬僵 / Esc锛夈�嶏紝缇や俊鎭瑙夎蛋 <GroupInfo>锛屼笌閫氳褰曡鎯呭叡鐢ㄤ竴浠界粍浠�
+ - 瑙﹀彂锛歶seImUiStore.openGroupInfoCardAtEvent(group, e)
+ - GroupInfo 鍐呴儴鎸� groupStore 缂撳瓨鎺ㄥ member / stranger锛屾诞灞傚彧璐熻矗鎺� chat / apply 浜嬩欢鍋氫笟鍔�
+ -->
+ <teleport to="body">
+ <div v-if="card.show" class="fixed inset-0 z-9998" @click.self="handleClose">
+ <div
+ class="fixed w-80 p-4 bg-[var(--ant-color-bg-elevated)] rounded-md shadow-xl"
+ :style="{ left: `${card.position.x }px`, top: `${card.position.y }px` }"
+ @click.stop
+ >
+ <GroupInfo v-if="card.group" :group="card.group" @chat="handleChat" @apply="handleApply" />
+ </div>
+ </div>
+ </teleport>
+</template>
--
Gitblit v1.9.3