From be654bce50adae5f9bb55699c7de4e1eaeae605a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 1 May 2026 07:46:19 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=A7=81=E8=81=8A=E6=B6=88=E6=81=AF=E7=9A=84=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message/group/GroupMessageDetail.vue      |  2 +-
 src/views/im/manager/message/group/index.vue  | 13 ++--
 .../message/private/PrivateMessageDetail.vue  | 64 +++++++++++++++++
 .../im/manager/message/private/index.vue      | 71 +++++--------------
 4 files changed, 92 insertions(+), 58 deletions(-)
 create mode 100644 src/views/im/manager/message/private/PrivateMessageDetail.vue

diff --git a/src/views/im/manager/message/group/GroupMessageDetail.vue b/src/views/im/manager/message/group/GroupMessageDetail.vue
index 1815d2c90..83fd24a15 100644
--- a/src/views/im/manager/message/group/GroupMessageDetail.vue
+++ b/src/views/im/manager/message/group/GroupMessageDetail.vue
@@ -49,7 +49,7 @@ import { formatJson } from '@/views/im/utils/message'
 import * as ManagerGroupMessageApi from '@/api/im/manager/message/group'
 import MessageContentPreview from '../MessageContentPreview.vue'
 
-defineOptions({ name: 'ImGroupMessageDetailDialog' })
+defineOptions({ name: 'ImGroupMessageDetail' })
 
 const dialogVisible = ref(false) // 弹窗的显示
 const detail = ref<ManagerGroupMessageApi.ImManagerGroupMessageVO>(
diff --git a/src/views/im/manager/message/group/index.vue b/src/views/im/manager/message/group/index.vue
index b78142704..532721be2 100644
--- a/src/views/im/manager/message/group/index.vue
+++ b/src/views/im/manager/message/group/index.vue
@@ -8,6 +8,7 @@
       :inline="true"
       label-width="88px"
     >
+      <!-- TODO @AI：groupselect；在 group components 提供一个组件 -->
       <el-form-item label="群编号" prop="groupId">
         <el-input
           v-model="queryParams.groupId"
@@ -17,6 +18,7 @@
           class="!w-240px"
         />
       </el-form-item>
+      <!-- TODO @AI：使用 userselectv2；可以晚点处理； -->
       <el-form-item label="发送人编号" prop="senderId">
         <el-input
           v-model="queryParams.senderId"
@@ -41,6 +43,7 @@
           />
         </el-select>
       </el-form-item>
+      <!-- TODO @AI：不用消息状态检索；改成内容检索； -->
       <el-form-item label="消息状态" prop="status">
         <el-select
           v-model="queryParams.status"
@@ -95,11 +98,6 @@
           <dict-tag :type="DICT_TYPE.IM_MESSAGE_TYPE" :value="row.type" />
         </template>
       </el-table-column>
-      <el-table-column label="内容预览" align="left" min-width="240">
-        <template #default="{ row }">
-          <MessageContentPreview :type="row.type" :content="row.content" />
-        </template>
-      </el-table-column>
       <el-table-column
         label="发送时间"
         align="center"
@@ -107,6 +105,11 @@
         width="180"
         :formatter="dateFormatter"
       />
+      <el-table-column label="内容预览" align="left" min-width="240">
+        <template #default="{ row }">
+          <MessageContentPreview :type="row.type" :content="row.content" />
+        </template>
+      </el-table-column>
       <el-table-column label="@用户" align="left" min-width="200" show-overflow-tooltip>
         <template #default="{ row }">
           <template v-if="row.atUserIds?.length">
diff --git a/src/views/im/manager/message/private/PrivateMessageDetail.vue b/src/views/im/manager/message/private/PrivateMessageDetail.vue
new file mode 100644
index 000000000..c13044b9a
--- /dev/null
+++ b/src/views/im/manager/message/private/PrivateMessageDetail.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="私聊消息详情" width="700">
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="编号">{{ detail.id }}</el-descriptions-item>
+      <el-descriptions-item label="客户端编号">{{ detail.clientMessageId || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="发送人">
+        {{ detail.senderNickname }} ({{ detail.senderId }})
+      </el-descriptions-item>
+      <el-descriptions-item label="接收人">
+        {{ detail.receiverNickname }} ({{ detail.receiverId }})
+      </el-descriptions-item>
+      <el-descriptions-item label="类型">
+        <dict-tag :type="DICT_TYPE.IM_MESSAGE_TYPE" :value="detail.type" />
+      </el-descriptions-item>
+      <el-descriptions-item label="状态">
+        <dict-tag :type="DICT_TYPE.IM_PRIVATE_MESSAGE_STATUS" :value="detail.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label="发送时间" :span="2">
+        {{ formatDate(detail.sendTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="消息内容" :span="2">
+        <MessageContentPreview :type="detail.type" :content="detail.content" />
+      </el-descriptions-item>
+      <el-descriptions-item label="原始 JSON" :span="2">
+        <pre class="content-pre">{{ formatJson(detail.content) }}</pre>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { formatJson } from '@/views/im/utils/message'
+import * as ManagerPrivateMessageApi from '@/api/im/manager/message/private'
+import MessageContentPreview from '../MessageContentPreview.vue'
+
+defineOptions({ name: 'ImPrivateMessageDetail' })
+
+const dialogVisible = ref(false) // 弹窗的显示
+const detail = ref<ManagerPrivateMessageApi.ImManagerPrivateMessageVO>(
+  {} as ManagerPrivateMessageApi.ImManagerPrivateMessageVO
+) // 当前详情数据
+
+/** 打开详情弹窗 */
+const open = (row: ManagerPrivateMessageApi.ImManagerPrivateMessageVO) => {
+  detail.value = row
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style scoped>
+.content-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: 'Menlo', 'Consolas', monospace;
+  font-size: 12px;
+  background: #f5f5f5;
+  padding: 8px;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/views/im/manager/message/private/index.vue b/src/views/im/manager/message/private/index.vue
index 8e5f0d3bd..a4086cc46 100644
--- a/src/views/im/manager/message/private/index.vue
+++ b/src/views/im/manager/message/private/index.vue
@@ -6,24 +6,26 @@
       :model="queryParams"
       ref="queryFormRef"
       :inline="true"
-      label-width="80px"
+      label-width="88px"
     >
+      <!-- TODO @AI：使用 userselectv2；可以晚点处理； -->
       <el-form-item label="发送人编号" prop="senderId">
         <el-input
           v-model="queryParams.senderId"
           placeholder="请输入发送人用户编号"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-200px"
+          class="!w-240px"
         />
       </el-form-item>
+      <!-- TODO @AI：使用 userselectv2；可以晚点处理； -->
       <el-form-item label="接收人编号" prop="receiverId">
         <el-input
           v-model="queryParams.receiverId"
           placeholder="请输入接收人用户编号"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-200px"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="消息类型" prop="type">
@@ -31,7 +33,7 @@
           v-model="queryParams.type"
           placeholder="请选择消息类型"
           clearable
-          class="!w-160px"
+          class="!w-240px"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.IM_MESSAGE_TYPE)"
@@ -41,15 +43,16 @@
           />
         </el-select>
       </el-form-item>
+      <!-- TODO @AI：不用消息状态检索；改成内容检索； -->
       <el-form-item label="消息状态" prop="status">
         <el-select
           v-model="queryParams.status"
           placeholder="请选择消息状态"
           clearable
-          class="!w-160px"
+          class="!w-240px"
         >
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IM_MESSAGE_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.IM_PRIVATE_MESSAGE_STATUS)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -95,14 +98,14 @@
           <dict-tag :type="DICT_TYPE.IM_MESSAGE_TYPE" :value="row.type" />
         </template>
       </el-table-column>
-      <el-table-column label="内容预览" align="left" min-width="240" show-overflow-tooltip>
+      <el-table-column label="内容预览" align="left" min-width="240">
         <template #default="{ row }">
-          {{ getContentPreview(row.content) }}
+          <MessageContentPreview :type="row.type" :content="row.content" />
         </template>
       </el-table-column>
       <el-table-column label="状态" align="center" prop="status" width="100">
         <template #default="{ row }">
-          <dict-tag :type="DICT_TYPE.IM_MESSAGE_STATUS" :value="row.status" />
+          <dict-tag :type="DICT_TYPE.IM_PRIVATE_MESSAGE_STATUS" :value="row.status" />
         </template>
       </el-table-column>
       <el-table-column
@@ -133,33 +136,16 @@
     />
   </ContentWrap>
 
-  <!-- 详情弹窗 -->
-  <el-dialog v-model="detailVisible" title="私聊消息详情" width="700">
-    <el-descriptions :column="2" border>
-      <el-descriptions-item label="编号">{{ detail.id }}</el-descriptions-item>
-      <el-descriptions-item label="客户端编号">{{ detail.clientMessageId || '-' }}</el-descriptions-item>
-      <el-descriptions-item label="发送人">{{ detail.senderNickname }} ({{ detail.senderId }})</el-descriptions-item>
-      <el-descriptions-item label="接收人">{{ detail.receiverNickname }} ({{ detail.receiverId }})</el-descriptions-item>
-      <el-descriptions-item label="类型">
-        <dict-tag :type="DICT_TYPE.IM_MESSAGE_TYPE" :value="detail.type" />
-      </el-descriptions-item>
-      <el-descriptions-item label="状态">
-        <dict-tag :type="DICT_TYPE.IM_MESSAGE_STATUS" :value="detail.status" />
-      </el-descriptions-item>
-      <el-descriptions-item label="发送时间">{{ formatDate(detail.sendTime) }}</el-descriptions-item>
-      <el-descriptions-item label="创建时间">{{ formatDate(detail.createTime) }}</el-descriptions-item>
-      <el-descriptions-item label="消息内容（原始 JSON）" :span="2">
-        <pre class="content-pre">{{ formatJson(detail.content) }}</pre>
-      </el-descriptions-item>
-    </el-descriptions>
-  </el-dialog>
+  <!-- 详情 -->
+  <PrivateMessageDetail ref="detailRef" />
 </template>
 
 <script lang="ts" setup>
-import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as ManagerPrivateMessageApi from '@/api/im/manager/message/private'
-import { getContentPreview, formatJson } from '@/views/im/utils/message'
+import MessageContentPreview from '../MessageContentPreview.vue'
+import PrivateMessageDetail from './PrivateMessageDetail.vue'
 
 defineOptions({ name: 'ImPrivateMessage' })
 
@@ -201,16 +187,10 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 详情弹窗 */
-const detailVisible = ref(false) // 详情弹窗的显示
-const detail = ref<ManagerPrivateMessageApi.ImManagerPrivateMessageVO>(
-  {} as ManagerPrivateMessageApi.ImManagerPrivateMessageVO
-) // 当前详情数据
-
 /** 打开详情弹窗 */
+const detailRef = ref<InstanceType<typeof PrivateMessageDetail>>() // 详情弹窗 Ref
 const openDetail = (row: ManagerPrivateMessageApi.ImManagerPrivateMessageVO) => {
-  detail.value = row
-  detailVisible.value = true
+  detailRef.value?.open(row)
 }
 
 /** 初始化 */
@@ -218,16 +198,3 @@ onMounted(() => {
   getList()
 })
 </script>
-
-<style scoped>
-.content-pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-  font-family: 'Menlo', 'Consolas', monospace;
-  font-size: 12px;
-  background: #f5f5f5;
-  padding: 8px;
-  border-radius: 4px;
-}
-</style>