From 9fb796194e163f4fa2cdf760cc2c259cebd970bd Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 19 Apr 2026 00:30:07 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84=20IM=20=E5=A2=9E=E5=8A=A0=20Layout=20=E6=95=B4?=
 =?UTF-8?q?=E4=BD=93=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/im/message/group/index.ts      |  53 ++++++++++++
 src/api/im/message/private/index.ts    |  41 ++++++++++
 src/layout/components/ToolHeader.vue   |  31 +++----
 src/router/modules/remaining.ts        | 107 +++++++++++++++++++++++--
 src/views/im/manager/friend/index.vue  |  21 +++++
 src/views/im/manager/group/index.vue   |  21 +++++
 src/views/im/manager/message/index.vue |  21 +++++
 7 files changed, 275 insertions(+), 20 deletions(-)
 create mode 100644 src/api/im/message/group/index.ts
 create mode 100644 src/api/im/message/private/index.ts
 create mode 100644 src/views/im/manager/friend/index.vue
 create mode 100644 src/views/im/manager/group/index.vue
 create mode 100644 src/views/im/manager/message/index.vue

diff --git a/src/api/im/message/group/index.ts b/src/api/im/message/group/index.ts
new file mode 100644
index 000000000..47dd0f007
--- /dev/null
+++ b/src/api/im/message/group/index.ts
@@ -0,0 +1,53 @@
+import request from '@/config/axios'
+
+// 群聊消息发送 Request VO
+export interface ImGroupMessageSendReqVO {
+  clientMessageId: string // 客户端消息编号
+  groupId: number // 群编号
+  type: number // 消息类型
+  content: string // 消息内容
+  atUserIds?: number[] // @ 用户编号列表
+  receiverUserIds?: number[] // 定向接收用户编号列表
+  needReceipt?: boolean // 是否需要回执
+}
+
+// 群聊消息 Response VO
+export interface ImGroupMessageRespVO {
+  id: string // 消息编号
+  clientMessageId: string // 客户端消息编号
+  senderId: string // 发送人编号
+  groupId: string // 群编号
+  type: number // 消息类型
+  content: string // 消息内容
+  status: number // 消息状态
+  sendTime: string // 发送时间
+  atUserIds?: number[] // @ 用户编号列表
+  receiverUserIds?: number[] // 定向接收用户编号列表
+  receiptStatus?: number // 回执状态
+  readCount?: number // 已读人数
+}
+
+// 发送群聊消息
+export const sendGroupMessage = (data: ImGroupMessageSendReqVO) => {
+  return request.post<ImGroupMessageRespVO>({ url: '/im/message/group/send', data })
+}
+
+// 增量拉取群聊消息
+export const pullGroupMessages = (params: { minId: string; size: number }) => {
+  return request.get<ImGroupMessageRespVO[]>({ url: '/im/message/group/pull', params })
+}
+
+// 标记群聊消息已读
+export const readGroupMessages = (groupId: string) => {
+  return request.put({ url: '/im/message/group/read', params: { groupId } })
+}
+
+// 撤回群聊消息
+export const recallGroupMessage = (id: string) => {
+  return request.delete({ url: '/im/message/group/recall', params: { id } })
+}
+
+// 查询群消息已读用户列表
+export const getGroupReadUsers = (params: { groupId: string; messageId: string }) => {
+  return request.get<string[]>({ url: '/im/message/group/read-users', params })
+}
diff --git a/src/api/im/message/private/index.ts b/src/api/im/message/private/index.ts
new file mode 100644
index 000000000..3073d3741
--- /dev/null
+++ b/src/api/im/message/private/index.ts
@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+// 私聊消息发送 Request VO
+export interface ImPrivateMessageSendReqVO {
+  clientMessageId: string // 客户端消息编号
+  receiverId: number // 接收人编号
+  type: number // 消息类型
+  content: string // 消息内容
+}
+
+// 私聊消息 Response VO
+export interface ImPrivateMessageRespVO {
+  id: number // 消息编号
+  clientMessageId: string // 客户端消息编号
+  senderId: number // 发送人编号
+  receiverId: number // 接收人编号
+  type: number // 消息类型
+  content: string // 消息内容
+  status: number // 消息状态
+  sendTime: string // 发送时间
+}
+
+// 发送私聊消息
+export const sendPrivateMessage = (data: ImPrivateMessageSendReqVO) => {
+  return request.post<ImPrivateMessageRespVO>({ url: '/im/message/private/send', data })
+}
+
+// 增量拉取私聊消息
+export const pullPrivateMessages = (params: { minId: string; size: number }) => {
+  return request.get<ImPrivateMessageRespVO[]>({ url: '/im/message/private/pull', params })
+}
+
+// 标记私聊消息已读
+export const readPrivateMessages = (friendId: string) => {
+  return request.put({ url: '/im/message/private/read', params: { friendId } })
+}
+
+// 撤回私聊消息
+export const recallPrivateMessage = (id: string) => {
+  return request.delete({ url: '/im/message/private/recall', params: { id } })
+}
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index 9965847e9..0437f39bd 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
 import { defineComponent, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { Message } from '@/layout/components//Message'
+import router from '@/router'
+import { Message } from '@/layout/components/Message'
 import { Collapse } from '@/layout/components/Collapse'
 import { UserInfo } from '@/layout/components/UserInfo'
 import { Screenfull } from '@/layout/components/Screenfull'
@@ -45,15 +45,19 @@ const locale = computed(() => appStore.getLocale)
 // 消息图标
 const message = computed(() => appStore.getMessage)
 
-const goToChat = () => {
-  window.open(window.location.host + '/chat', '_blank')
-}
-
 // 租户切换权限
 const hasTenantVisitPermission = computed(
   () => import.meta.env.VITE_APP_TENANT_ENABLE === 'true' && checkPermi(['system:tenant:visit'])
 )
 
+// 顶部聊天入口：用路由 name resolve 出完整 URL，在新标签页打开 IM 主页
+// 场景考虑：IM 是全屏沉浸式壳，如果在当前页 push 会把原来在用的后台管理界面挤掉；开新 Tab 更符合用户预期
+const goToChat = () => {
+  // 用路由 name resolve 出完整 URL，在新标签页打开 IM 主页
+  const { href } = router.resolve({ name: 'ImHome' })
+  window.open(href, '_blank')
+}
+
 export default defineComponent({
   name: 'ToolHeader',
   setup() {
@@ -75,18 +79,13 @@ export default defineComponent({
           </div>
         ) : undefined}
         <div class="h-full flex items-center">
-          <div onClick={goToChat}>
-            <Icon
-              icon="ep:chat-dot-round"
-              color="var(--top-header-text-color)"
-              class="custom-hover"
-            />
-          </div>
           {hasTenantVisitPermission.value ? <TenantVisit /> : undefined}
           {screenfull.value ? (
             <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}
-          {search.value ? <RouterSearch isModal={false} color="var(--top-header-text-color)"/> : undefined}
+          {search.value ? (
+            <RouterSearch isModal={false} color="var(--top-header-text-color)" />
+          ) : undefined}
           {size.value ? (
             <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
           ) : undefined}
@@ -99,6 +98,10 @@ export default defineComponent({
           {message.value ? (
             <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
           ) : undefined}
+          {/* IM 聊天入口 */}
+          <div class="custom-hover" onClick={goToChat}>
+            <Icon color="var(--top-header-text-color)" size={18} icon="ep:chat-dot-round" />
+          </div>
           <UserInfo></UserInfo>
         </div>
       </div>
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 421a909dc..4ff74f173 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -1,5 +1,4 @@
 import { Layout } from '@/utils/routerHelper'
-import ChatPage from '../../views/chat/ChatPage/Index.vue'
 
 const { t } = useI18n()
 /**
@@ -747,11 +746,107 @@ const remainingRouter: AppRouteRecordRaw[] = [
         component: () => import('@/views/iot/ota/firmware/detail/index.vue')
       }
     ]
-  }, {
-    path: '/chat',
-    component: ChatPage,
-    name: 'chat',
-    meta: { hidden: false }
+  },
+  {
+    // 统一 /im 分组：下分 home（聊天壳）+ manager（Layout 管理壳）
+    path: '/im',
+    name: 'Im',
+    redirect: '/im/home/message',
+    meta: { hidden: false, title: 'IM 即时通讯' },
+    children: [
+      {
+        // 聊天壳：全屏沉浸式应用，带 ToolBar + keep-alive
+        // hidden:true 不在 yudao 侧边栏菜单显示；三个子 Tab 通过内部 ToolBar 切换
+        path: 'home',
+        component: () => import('@/views/im/home/Index.vue'),
+        name: 'ImHome',
+        redirect: '/im/home/message',
+        meta: { hidden: true, title: '聊天' },
+        children: [
+          {
+            path: 'message',
+            component: () => import('@/views/im/home/pages/MessagePage.vue'),
+            name: 'ImHomeMessage',
+            meta: { hidden: true, title: '消息' }
+          },
+          {
+            path: 'friend',
+            component: () => import('@/views/im/home/pages/FriendPage.vue'),
+            name: 'ImHomeFriend',
+            meta: { hidden: true, title: '好友' }
+          },
+          {
+            path: 'group',
+            component: () => import('@/views/im/home/pages/GroupPage.vue'),
+            name: 'ImHomeGroup',
+            meta: { hidden: true, title: '群聊' }
+          }
+        ]
+      },
+      {
+        path: 'manager/message',
+        component: Layout,
+        name: 'ImManagerMessage',
+        redirect: '/im/manager/message/index',
+        meta: { hidden: false },
+        children: [
+          {
+            path: 'index',
+            component: () => import('@/views/im/manager/message/index.vue'),
+            name: 'ImManagerMessageIndex',
+            meta: {
+              canTo: true,
+              hidden: false,
+              noTagsView: false,
+              icon: 'ep:chat-dot-round',
+              title: '消息管理'
+            }
+          }
+        ]
+      },
+      {
+        path: 'manager/friend',
+        component: Layout,
+        name: 'ImManagerFriend',
+        redirect: '/im/manager/friend/index',
+        meta: { hidden: false },
+        children: [
+          {
+            path: 'index',
+            component: () => import('@/views/im/manager/friend/index.vue'),
+            name: 'ImManagerFriendIndex',
+            meta: {
+              canTo: true,
+              hidden: false,
+              noTagsView: false,
+              icon: 'ep:user',
+              title: '好友管理'
+            }
+          }
+        ]
+      },
+      {
+        path: 'manager/group',
+        component: Layout,
+        name: 'ImManagerGroup',
+        redirect: '/im/manager/group/index',
+        meta: { hidden: false },
+        children: [
+          {
+            path: 'index',
+            component: () => import('@/views/im/manager/group/index.vue'),
+            name: 'ImManagerGroupIndex',
+            meta: {
+              canTo: true,
+              hidden: false,
+              noTagsView: false,
+              icon: 'ep:user-filled',
+              title: '群管理'
+            }
+          }
+        ]
+      }
+    ]
   }
 ]
 
diff --git a/src/views/im/manager/friend/index.vue b/src/views/im/manager/friend/index.vue
new file mode 100644
index 000000000..b78b67871
--- /dev/null
+++ b/src/views/im/manager/friend/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <ContentWrap>
+    <!-- TODO @芋艿：这个只是临时的 -->
+    <div class="im-manager-placeholder">我是好友管理测试界面</div>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ImManagerFriend' })
+</script>
+
+<style scoped>
+.im-manager-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  font-size: 18px;
+  color: #606266;
+}
+</style>
diff --git a/src/views/im/manager/group/index.vue b/src/views/im/manager/group/index.vue
new file mode 100644
index 000000000..dc1839086
--- /dev/null
+++ b/src/views/im/manager/group/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <ContentWrap>
+    <!-- TODO @芋艿：这个只是临时的 -->
+    <div class="im-manager-placeholder">我是群管理测试界面</div>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ImManagerGroup' })
+</script>
+
+<style scoped>
+.im-manager-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  font-size: 18px;
+  color: #606266;
+}
+</style>
diff --git a/src/views/im/manager/message/index.vue b/src/views/im/manager/message/index.vue
new file mode 100644
index 000000000..d8cea4b31
--- /dev/null
+++ b/src/views/im/manager/message/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <ContentWrap>
+    <!-- TODO @芋艿：这个只是临时的 -->
+    <div class="im-manager-placeholder">我是消息管理测试界面</div>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ImManagerMessage' })
+</script>
+
+<style scoped>
+.im-manager-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  font-size: 18px;
+  color: #606266;
+}
+</style>