From 7ed6fa5579f7da47b309d0a6003a366244ced576 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 1 May 2026 08:19:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BE=A4=E7=AE=A1=E7=90=86=E7=9A=84=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/im/manager/group/index.ts             |   7 +-
 src/views/im/manager/group/GroupBanForm.vue   |  63 +++++++++
 src/views/im/manager/group/GroupDetail.vue    | 125 ++++++++++++++++++
 .../group/components/GroupMemberDrawer.vue    |  51 -------
 src/views/im/manager/group/index.vue          |  93 +++----------
 5 files changed, 214 insertions(+), 125 deletions(-)
 create mode 100644 src/views/im/manager/group/GroupBanForm.vue
 create mode 100644 src/views/im/manager/group/GroupDetail.vue
 delete mode 100644 src/views/im/manager/group/components/GroupMemberDrawer.vue

diff --git a/src/api/im/manager/group/index.ts b/src/api/im/manager/group/index.ts
index 89ded6103..e21878e95 100644
--- a/src/api/im/manager/group/index.ts
+++ b/src/api/im/manager/group/index.ts
@@ -20,7 +20,12 @@ export interface ImManagerGroupMemberVO {
   userId: number
   nickname?: string
   avatar?: string
+  displayUserName?: string
+  displayGroupName?: string
+  muted?: boolean
+  status: number
   joinTime?: Date
+  quitTime?: Date
 }
 
 // 获得群分页
@@ -43,7 +48,7 @@ export const unbanManagerGroup = (id: number) => {
   return request.put({ url: '/im/manager/group/unban?id=' + id })
 }
 
-// 获得群成员列表
+// 获得群成员列表（含已退群成员，由前端按需过滤）
 export const getManagerGroupMemberList = (groupId: number) => {
   return request.get({ url: '/im/manager/group/member/list?groupId=' + groupId })
 }
diff --git a/src/views/im/manager/group/GroupBanForm.vue b/src/views/im/manager/group/GroupBanForm.vue
new file mode 100644
index 000000000..c094d6d76
--- /dev/null
+++ b/src/views/im/manager/group/GroupBanForm.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="封禁群" width="500" :close-on-click-modal="false">
+    <el-form :model="formData" :rules="formRules" ref="formRef" label-width="80px">
+      <el-form-item label="群名称">
+        <span>{{ formData.groupName }}</span>
+      </el-form-item>
+      <el-form-item label="封禁原因" prop="reason">
+        <el-input
+          v-model="formData.reason"
+          type="textarea"
+          :rows="3"
+          maxlength="200"
+          show-word-limit
+          placeholder="请输入封禁原因"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :loading="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import * as ManagerGroupApi from '@/api/im/manager/group'
+
+defineOptions({ name: 'ImGroupBanForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的显示
+const formLoading = ref(false) // 提交的加载中
+const formData = reactive({ id: 0, groupName: '', reason: '' }) // 封禁表单
+const formRef = ref() // 表单 Ref
+const formRules = {
+  reason: [{ required: true, message: '封禁原因不能为空', trigger: 'blur' }]
+}
+
+/** 打开弹窗 */
+const open = (row: ManagerGroupApi.ImManagerGroupVO) => {
+  formData.id = row.id
+  formData.groupName = row.name
+  formData.reason = ''
+  dialogVisible.value = true
+}
+defineExpose({ open })
+
+/** 提交封禁 */
+const emit = defineEmits(['success']) // 操作成功后的回调
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    await ManagerGroupApi.banManagerGroup({ id: formData.id, reason: formData.reason })
+    message.success('封禁成功')
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
diff --git a/src/views/im/manager/group/GroupDetail.vue b/src/views/im/manager/group/GroupDetail.vue
new file mode 100644
index 000000000..0cc24eed1
--- /dev/null
+++ b/src/views/im/manager/group/GroupDetail.vue
@@ -0,0 +1,125 @@
+<template>
+  <el-drawer v-model="drawerVisible" title="群详情" size="900px" :destroy-on-close="true">
+    <!-- 群基本信息 -->
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="群编号">{{ detail.id }}</el-descriptions-item>
+      <el-descriptions-item label="群名称">{{ detail.name }}</el-descriptions-item>
+      <el-descriptions-item label="头像">
+        <el-avatar :src="detail.avatar" :size="36">
+          {{ detail.name?.charAt(0) ?? '?' }}
+        </el-avatar>
+      </el-descriptions-item>
+      <el-descriptions-item label="群主">
+        {{ detail.ownerNickname || '-' }} ({{ detail.ownerUserId }})
+      </el-descriptions-item>
+      <el-descriptions-item label="成员数">{{ detail.memberCount ?? 0 }}</el-descriptions-item>
+      <el-descriptions-item label="群状态">
+        <dict-tag :type="DICT_TYPE.IM_GROUP_STATUS" :value="detail.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label="封禁状态" :span="2">
+        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detail.banned" />
+        <span v-if="detail.banned" class="ml-5px text-gray-400">{{ detail.bannedReason }}</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="群公告" :span="2">{{ detail.notice || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间" :span="2">
+        {{ formatDate(detail.createTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 群成员列表 -->
+    <div class="mt-20px mb-15px flex items-center justify-between">
+      <span class="font-bold">群成员</span>
+      <el-checkbox v-model="activeOnly">仅展示当前群内的成员</el-checkbox>
+    </div>
+    <el-table v-loading="loading" :data="filteredMembers" border>
+      <el-table-column label="头像" width="80" align="center">
+        <template #default="{ row }">
+          <el-avatar :src="row.avatar" :size="40">
+            {{ row.nickname?.charAt(0) ?? '?' }}
+          </el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户编号" prop="userId" width="100" align="center" />
+      <el-table-column label="昵称" prop="nickname" min-width="120" show-overflow-tooltip />
+      <el-table-column
+        label="组内显示名"
+        prop="displayUserName"
+        min-width="120"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">{{ row.displayUserName || '-' }}</template>
+      </el-table-column>
+      <el-table-column
+        label="群显示备注"
+        prop="displayGroupName"
+        min-width="120"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">{{ row.displayGroupName || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="免打扰" prop="muted" width="80" align="center">
+        <template #default="{ row }">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.muted" />
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" prop="status" width="100" align="center">
+        <template #default="{ row }">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="入群时间"
+        prop="joinTime"
+        width="170"
+        align="center"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="退群时间"
+        prop="quitTime"
+        width="170"
+        align="center"
+        :formatter="dateFormatter"
+      />
+    </el-table>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as ManagerGroupApi from '@/api/im/manager/group'
+
+defineOptions({ name: 'ImGroupDetail' })
+
+const drawerVisible = ref(false) // 抽屉的显示
+const detail = ref<ManagerGroupApi.ImManagerGroupVO>(
+  {} as ManagerGroupApi.ImManagerGroupVO
+) // 群详情数据
+const loading = ref(false) // 成员列表的加载中
+const memberList = ref<ManagerGroupApi.ImManagerGroupMemberVO[]>([]) // 群成员列表（含已退群）
+const activeOnly = ref(true) // 仅展示当前群内的成员
+
+/** 当前展示的群成员（按 activeOnly 前端过滤） */
+const filteredMembers = computed(() =>
+  activeOnly.value
+    ? memberList.value.filter((m) => m.status === CommonStatusEnum.ENABLE)
+    : memberList.value
+)
+
+/** 打开详情，加载群成员 */
+const open = async (row: ManagerGroupApi.ImManagerGroupVO) => {
+  detail.value = row
+  drawerVisible.value = true
+  activeOnly.value = true
+  loading.value = true
+  try {
+    memberList.value = await ManagerGroupApi.getManagerGroupMemberList(row.id)
+  } finally {
+    loading.value = false
+  }
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/views/im/manager/group/components/GroupMemberDrawer.vue b/src/views/im/manager/group/components/GroupMemberDrawer.vue
deleted file mode 100644
index ac2861a00..000000000
--- a/src/views/im/manager/group/components/GroupMemberDrawer.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<!-- TODO @AI git mv 到 /Users/yunai/Java/yudao-all-in-im/yudao-ui-admin-vue3/src/views/im/manager/group -->
-<!-- TODO @AI：需要增加状态；然后有个筛选：仅展示当前群内的成员；和不选中，就是全部； -->
-<!-- TODO @AI：displayUserName、displayGroupName、muted；群成员状态；退群时间；需要也展示； -->
-<template>
-  <el-drawer v-model="drawerVisible" :title="drawerTitle" size="600px" :destroy-on-close="true">
-    <el-table v-loading="loading" :data="memberList" border>
-      <el-table-column label="头像" width="80" align="center">
-        <template #default="{ row }">
-          <el-avatar :src="row.avatar" :size="40">
-            {{ row.nickname?.charAt(0) ?? '?' }}
-          </el-avatar>
-        </template>
-      </el-table-column>
-      <el-table-column label="用户编号" prop="userId" width="120" align="center" />
-      <el-table-column label="昵称" prop="nickname" min-width="120" />
-      <el-table-column
-        label="入群时间"
-        prop="joinTime"
-        width="180"
-        align="center"
-        :formatter="dateFormatter"
-      />
-    </el-table>
-  </el-drawer>
-</template>
-
-<script lang="ts" setup>
-import { dateFormatter } from '@/utils/formatTime'
-import * as ManagerGroupApi from '@/api/im/manager/group'
-
-defineOptions({ name: 'ImGroupMemberDrawer' })
-
-const drawerVisible = ref(false) // 抽屉的显示
-const drawerTitle = ref('群成员列表') // 抽屉的标题
-const loading = ref(false) // 列表的加载中
-const memberList = ref<ManagerGroupApi.ImManagerGroupMemberVO[]>([]) // 群成员列表
-
-/** 打开抽屉，加载指定群的成员 */
-const open = async (groupId: number, groupName?: string) => {
-  drawerVisible.value = true
-  drawerTitle.value = groupName ? `群成员 - ${groupName}` : '群成员列表'
-  loading.value = true
-  try {
-    memberList.value = await ManagerGroupApi.getManagerGroupMemberList(groupId)
-  } finally {
-    loading.value = false
-  }
-}
-
-defineExpose({ open })
-</script>
diff --git a/src/views/im/manager/group/index.vue b/src/views/im/manager/group/index.vue
index 416a21a30..b9881ba53 100644
--- a/src/views/im/manager/group/index.vue
+++ b/src/views/im/manager/group/index.vue
@@ -125,10 +125,10 @@
           <el-button
             link
             type="primary"
-            @click="openMemberDrawer(row)"
+            @click="openDetail(row)"
             v-hasPermi="['im:manager:group:query']"
           >
-            成员
+            详情
           </el-button>
           <el-button
             v-if="!row.banned"
@@ -159,45 +159,22 @@
     />
   </ContentWrap>
 
-  <!-- 群成员抽屉 -->
-  <!-- TODO @AI：DrawerRef 简化下 -->
-  <GroupMemberDrawer ref="memberDrawerRef" />
-
-  <!-- 封禁原因弹窗 -->
-  <!-- TODO @AI：独立出来 -->
-  <el-dialog v-model="banDialogVisible" title="封禁群" width="500" :close-on-click-modal="false">
-    <el-form :model="banForm" :rules="banFormRules" ref="banFormRef" label-width="80px">
-      <el-form-item label="群名称">
-        <span>{{ banForm.groupName }}</span>
-      </el-form-item>
-      <el-form-item label="封禁原因" prop="reason">
-        <el-input
-          v-model="banForm.reason"
-          type="textarea"
-          :rows="3"
-          maxlength="200"
-          show-word-limit
-          placeholder="请输入封禁原因"
-        />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :loading="banSubmitting" type="primary" @click="submitBan">确 定</el-button>
-      <el-button @click="banDialogVisible = false">取 消</el-button>
-    </template>
-  </el-dialog>
+  <!-- 群详情 -->
+  <GroupDetail ref="detailRef" />
+  <!-- 群封禁因弹窗 -->
+  <GroupBanForm ref="banFormRef" @success="getList" />
 </template>
 
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions, getBoolDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as ManagerGroupApi from '@/api/im/manager/group'
-import GroupMemberDrawer from './components/GroupMemberDrawer.vue'
+import GroupDetail from './GroupDetail.vue'
+import GroupBanForm from './GroupBanForm.vue'
 
 defineOptions({ name: 'ImGroup' })
 
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化 TODO @AI：这里 linter 报错；
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -237,59 +214,29 @@ const resetQuery = () => {
   handleQuery()
 }
 
-const memberDrawerRef = ref<InstanceType<typeof GroupMemberDrawer>>() // 群成员抽屉 Ref
-
-/** 打开群成员抽屉 */
-const openMemberDrawer = (row: ManagerGroupApi.ImManagerGroupVO) => {
-  memberDrawerRef.value?.open(row.id, row.name)
-}
-
-const banDialogVisible = ref(false) // 封禁弹窗的显示
-const banSubmitting = ref(false) // 封禁提交的加载中
-const banForm = reactive({ id: 0, groupName: '', reason: '' }) // 封禁表单
-const banFormRef = ref() // 封禁表单 Ref
-const banFormRules = {
-  reason: [{ required: true, message: '封禁原因不能为空', trigger: 'blur' }]
+/** 打开群详情 */
+const detailRef = ref()
+const openDetail = (row: ManagerGroupApi.ImManagerGroupVO) => {
+  detailRef.value.open(row)
 }
 
 /** 打开封禁弹窗 */
+const banFormRef = ref()
 const openBanDialog = (row: ManagerGroupApi.ImManagerGroupVO) => {
-  banForm.id = row.id
-  banForm.groupName = row.name
-  banForm.reason = ''
-  banDialogVisible.value = true
-}
-
-/** 提交封禁 */
-const submitBan = async () => {
-  await banFormRef.value.validate()
-  banSubmitting.value = true
-  try {
-    // 发起封禁
-    await ManagerGroupApi.banManagerGroup({ id: banForm.id, reason: banForm.reason })
-    message.success('封禁成功')
-    banDialogVisible.value = false
-    // 刷新列表
-    await getList()
-  } finally {
-    banSubmitting.value = false
-  }
+  banFormRef.value.open(row)
 }
 
 /** 解封按钮操作 */
 const handleUnban = async (row: ManagerGroupApi.ImManagerGroupVO) => {
-  // TODO @AI：对齐 system user info 写的习惯；manager 下其他写的，也检查下；
   try {
     // 解封的二次确认
     await message.confirm(`确认解封群「${row.name}」吗？`)
-  } catch {
-    return
-  }
-  // 发起解封
-  await ManagerGroupApi.unbanManagerGroup(row.id)
-  message.success('解封成功')
-  // 刷新列表
-  await getList()
+    // 发起解封
+    await ManagerGroupApi.unbanManagerGroup(row.id)
+    message.success('解封成功')
+    // 刷新列表
+    await getList()
+  } catch {}
 }
 
 /** 初始化 */