From 8fd21da555d581afe9ebf2e19fb243976d37ca78 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 27 Apr 2026 19:59:56 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(im):=20TIP=5FTEXT=20?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=8F=90=E7=A4=BA=E4=B8=8D=E5=86=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=A9=BA=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

群解散 / 退群 / 踢人 等系统提示后端发的是裸字符串，之前按 TextMessage JSON
解析 → 主聊天窗显示空行、会话列表摘要变空。

- message.ts：新增 resolveTipText helper，兼容裸字符串 + {"content":"..."}
- MessageItem / conversationStore.resolveLastContent 把 TIP_TEXT 从 TEXT
  分支拆出来，统一走 resolveTipText（TEXT 仍按 JSON 解析，没有裸字符串可能）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/assets/audio/im-message-tip.mp3           | Bin 0 -> 13059 bytes
 .../components/ChatGroupMember.vue            |  87 ++++++
 .../conversation/components/ChatGroupSide.vue | 275 ++++++++++++++++++
 .../conversation/components/ChatPanel.vue     |  42 +++
 .../components/ChatPrivateSide.vue            | 110 +++++++
 .../components/message/MessageHistory.vue     | 162 +++++++++++
 .../components/message/MessageReadStatus.vue  | 125 ++++++++
 src/views/im/home/pages/friend/FriendPage.vue |  22 ++
 .../pages/friend/components/FriendItem.vue    | 129 ++++++++
 src/views/im/home/pages/group/GroupPage.vue   |  22 ++
 .../group/components/AddGroupMemberDialog.vue | 192 ++++++++++++
 .../group/components/CreateGroupDialog.vue    | 174 +++++++++++
 .../home/pages/group/components/GroupItem.vue |  96 ++++++
 .../group/components/GroupMemberGrid.vue      |  52 ++++
 .../group/components/GroupMemberItem.vue      |  87 ++++++
 .../group/components/GroupMemberSelector.vue  | 213 ++++++++++++++
 src/views/im/manager/index.vue                |   0
 src/views/im/utils/index.ts                   |  30 ++
 18 files changed, 1818 insertions(+)
 create mode 100644 src/assets/audio/im-message-tip.mp3
 create mode 100644 src/views/im/home/pages/conversation/components/ChatGroupMember.vue
 create mode 100644 src/views/im/home/pages/conversation/components/ChatGroupSide.vue
 create mode 100644 src/views/im/home/pages/conversation/components/ChatPanel.vue
 create mode 100644 src/views/im/home/pages/conversation/components/ChatPrivateSide.vue
 create mode 100644 src/views/im/home/pages/conversation/components/message/MessageHistory.vue
 create mode 100644 src/views/im/home/pages/conversation/components/message/MessageReadStatus.vue
 create mode 100644 src/views/im/home/pages/friend/FriendPage.vue
 create mode 100644 src/views/im/home/pages/friend/components/FriendItem.vue
 create mode 100644 src/views/im/home/pages/group/GroupPage.vue
 create mode 100644 src/views/im/home/pages/group/components/AddGroupMemberDialog.vue
 create mode 100644 src/views/im/home/pages/group/components/CreateGroupDialog.vue
 create mode 100644 src/views/im/home/pages/group/components/GroupItem.vue
 create mode 100644 src/views/im/home/pages/group/components/GroupMemberGrid.vue
 create mode 100644 src/views/im/home/pages/group/components/GroupMemberItem.vue
 create mode 100644 src/views/im/home/pages/group/components/GroupMemberSelector.vue
 create mode 100644 src/views/im/manager/index.vue
 create mode 100644 src/views/im/utils/index.ts

diff --git a/src/assets/audio/im-message-tip.mp3 b/src/assets/audio/im-message-tip.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..5f317dcd466c5430bb0b7a7c1bee9ea8e3f6c430
GIT binary patch
literal 13059
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%0D#7~VnCN+4A3wP^3G94Y}5tr
zb#cajtFme7R{byRPu%^jf@LD|+5@<jBhSYt!Xl0!@c`}j6|DcN{3mrBQ~z_N?EgzA
z{4dhU`ipd0{vw@;zes0tQ|I?f{ZH<nO>V!(R<+6P-@bA91EqfrH@R(c`?e}J*TLpG
w*jxwy<D1)mJvjf+@^{-me@O4&h2Q=!{GWe^{JV+&(6*`b2Oxhk{JU}c2Ujb<i~s-t

literal 0
HcmV?d00001

diff --git a/src/views/im/home/pages/conversation/components/ChatGroupMember.vue b/src/views/im/home/pages/conversation/components/ChatGroupMember.vue
new file mode 100644
index 000000000..43a31b82f
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/ChatGroupMember.vue
@@ -0,0 +1,87 @@
+<template>
+  <!--
+    群成员单行（对应 boxim chat/ChatGroupMember.vue）
+    跨子域复用：@候选 (MentionPicker) / 已读列表 (MessageReadStatus) / 群成员宫格 (ChatGroupSide)
+  -->
+  <div
+    class="im-chat-group-member"
+    :class="{ 'is-active': active }"
+    :style="{ height: height + 'px' }"
+  >
+    <UserAvatar
+      :size="avatarSize"
+      :name="member.showNickName"
+      :url="member.headImage"
+      :clickable="clickable"
+      :id="member.userId"
+    />
+    <div class="im-chat-group-member__name" :style="{ lineHeight: height + 'px' }">
+      {{ member.showNickName }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import UserAvatar from '../../../components/UserAvatar.vue'
+
+defineOptions({ name: 'ImChatGroupMember' })
+
+/** 群成员结构（跨多处使用，放这里做窄接口；独立于 types/index.ts） */
+export interface GroupMemberLite {
+  /** 用户 id，特殊值 -1 表示「全体成员」 */
+  userId: number | string
+  /** 展示昵称：优先群备注，再群昵称，再用户昵称 */
+  showNickName: string
+  /** 头像 URL */
+  headImage?: string
+  /** 是否已退群 */
+  quit?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    member: GroupMemberLite
+    /** 行高（px），影响头像大小 */
+    height?: number
+    /** 选中态（@候选键盘高亮等） */
+    active?: boolean
+    /** 头像点击是否弹 UserInfoCard；@候选场景通常禁用（避免嵌套交互） */
+    clickable?: boolean
+  }>(),
+  {
+    height: 50,
+    active: false,
+    clickable: false
+  }
+)
+
+const avatarSize = computed(() => Math.ceil(props.height * 0.75))
+</script>
+
+<style scoped>
+.im-chat-group-member {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+.im-chat-group-member.is-active {
+  background-color: #e1eaf7;
+}
+
+.im-chat-group-member__name {
+  flex: 1;
+  height: 100%;
+  padding-left: 10px;
+  overflow: hidden;
+  font-size: 14px;
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/im/home/pages/conversation/components/ChatGroupSide.vue b/src/views/im/home/pages/conversation/components/ChatGroupSide.vue
new file mode 100644
index 000000000..4e5426b44
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/ChatGroupSide.vue
@@ -0,0 +1,275 @@
+<template>
+  <!--
+    聊天面板右侧信息抽屉（对应 boxim chat/ChatGroupSide.vue）
+    - 抽屉形态：当 uiStore.chatGroupSide.show=true 时滑入
+    - 群成员宫格 + 邀请 / 移除按钮（仅群主） + 群信息表单 + 退群按钮
+    - 跨 page 引用 pages/group/components/ 下的 Dialog 组件
+    - TODO 群模块后端 API 对接后替换 saveGroup / quit / remove
+  -->
+  <el-drawer
+    v-model="visible"
+    :with-header="false"
+    direction="rtl"
+    size="360px"
+    append-to-body
+    modal-class="im-chat-group-side__modal"
+  >
+    <div class="im-chat-group-side">
+      <!-- 群成员区 -->
+      <div v-if="group" class="im-chat-group-side__block">
+        <el-input
+          v-model="searchText"
+          placeholder="搜索群成员"
+          clearable
+          size="small"
+          class="im-chat-group-side__search"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+
+        <div class="im-chat-group-side__members">
+          <!-- 邀请按钮 -->
+          <div class="im-chat-group-side__tool" title="邀请好友入群" @click="inviteVisible = true">
+            <div class="im-chat-group-side__tool-btn">
+              <el-icon><Plus /></el-icon>
+            </div>
+            <div class="im-chat-group-side__tool-text">邀请</div>
+          </div>
+
+          <!-- 移除按钮（仅群主） -->
+          <div
+            v-if="isOwner"
+            class="im-chat-group-side__tool"
+            title="移出成员"
+            @click="removeVisible = true"
+          >
+            <div class="im-chat-group-side__tool-btn">
+              <el-icon><Minus /></el-icon>
+            </div>
+            <div class="im-chat-group-side__tool-text">移除</div>
+          </div>
+
+          <!-- 成员宫格 -->
+          <GroupMemberGrid
+            v-for="m in filteredMembers"
+            :key="m.userId"
+            :member="m"
+          />
+        </div>
+      </div>
+
+      <el-divider />
+
+      <!-- 群信息表单 -->
+      <div v-if="group" class="im-chat-group-side__form">
+        <el-form label-position="top" size="small">
+          <el-form-item label="群聊名称">
+            <el-input v-model="group.name" :disabled="!editing" maxlength="20" />
+          </el-form-item>
+          <el-form-item label="群主">
+            <el-input :model-value="ownerName" disabled />
+          </el-form-item>
+          <el-form-item label="群公告">
+            <el-input
+              v-model="group.notice"
+              :disabled="!editing"
+              type="textarea"
+              maxlength="1024"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item label="我在本群的昵称">
+            <el-input v-model="group.remarkNickName" :disabled="!editing" maxlength="20" />
+          </el-form-item>
+        </el-form>
+
+        <div class="im-chat-group-side__actions">
+          <el-button v-if="editing" type="success" @click="handleSave">保存</el-button>
+          <el-button v-else type="primary" @click="editing = true">编辑</el-button>
+          <el-button v-if="!isOwner" type="danger" @click="handleQuit">退出群聊</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 子对话框（跨 page 引用 pages/group/ 下的组件） -->
+    <AddGroupMemberDialog
+      v-model="inviteVisible"
+      :group-id="group?.id"
+      :members="members"
+      :friends="friends"
+      @reload="$emit('reload')"
+    />
+    <GroupMemberSelector
+      v-model="removeVisible"
+      title="选择成员进行移除"
+      :members="members"
+      :hide-ids="group?.ownerId ? [group.ownerId] : []"
+      :max-size="50"
+      @complete="handleRemoveComplete"
+    />
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Plus, Minus } from '@element-plus/icons-vue'
+
+import { useUserStore } from '@/store/modules/user'
+import { useImUiStore } from '../../../store/uiStore'
+import GroupMemberGrid from '../../group/components/GroupMemberGrid.vue'
+import AddGroupMemberDialog from '../../group/components/AddGroupMemberDialog.vue'
+import GroupMemberSelector, {
+  type GroupMemberFlag
+} from '../../group/components/GroupMemberSelector.vue'
+import type { GroupLite } from '../../group/components/GroupItem.vue'
+import type { GroupMemberLite } from './ChatGroupMember.vue'
+import type { FriendLite } from '../../friend/components/FriendItem.vue'
+
+defineOptions({ name: 'ImChatGroupSide' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 当前群信息（可空：无激活群会话时） */
+    group?: GroupLite & { notice?: string; remarkNickName?: string }
+    members?: GroupMemberLite[]
+    friends?: FriendLite[]
+  }>(),
+  {
+    members: () => [],
+    friends: () => []
+  }
+)
+
+defineEmits<{
+  /** 邀请 / 移除 / 修改群资料后，父组件重新拉群数据 */
+  reload: []
+}>()
+
+const uiStore = useImUiStore()
+const userStore = useUserStore()
+
+const visible = computed({
+  get: () => uiStore.chatGroupSide.show,
+  set: (v) => uiStore.toggleChatGroupSide(v)
+})
+
+const searchText = ref('')
+const editing = ref(false)
+const inviteVisible = ref(false)
+const removeVisible = ref(false)
+
+const myId = computed(() => userStore.getUser?.id?.toString() || '')
+
+const isOwner = computed(
+  () => props.group != null && String(props.group.ownerId) === myId.value
+)
+
+const ownerName = computed(() => {
+  if (!props.group) return ''
+  const owner = props.members.find(
+    (m) => String(m.userId) === String(props.group!.ownerId)
+  )
+  return owner?.showNickName || '-'
+})
+
+const filteredMembers = computed(() =>
+  props.members.filter(
+    (m) => !m.quit && (m.showNickName || '').includes(searchText.value)
+  )
+)
+
+// TODO 接入 /im/group/modify
+async function handleSave() {
+  ElMessage.info('群信息保存接口待接入，当前为占位实现')
+  editing.value = false
+}
+
+// TODO 接入 /im/group/quit
+async function handleQuit() {
+  try {
+    await ElMessageBox.confirm(
+      '退出群聊后将不再接受群里的消息，确认退出吗？',
+      '确认退出',
+      { type: 'warning' }
+    )
+    ElMessage.info('退出群聊接口待接入，当前为占位实现')
+  } catch {
+    // 用户取消
+  }
+}
+
+// TODO 接入 /im/group/member/remove
+function handleRemoveComplete(members: GroupMemberFlag[]) {
+  if (members.length === 0) return
+  ElMessage.info(`移除成员接口待接入，选择了 ${members.length} 位成员`)
+}
+</script>
+
+<style scoped>
+.im-chat-group-side {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px;
+}
+
+.im-chat-group-side__block {
+  margin-bottom: 10px;
+}
+
+.im-chat-group-side__search {
+  margin-bottom: 10px;
+}
+
+.im-chat-group-side__members {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.im-chat-group-side__tool {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 54px;
+}
+
+.im-chat-group-side__tool-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  font-size: 18px;
+  color: #606266;
+  cursor: pointer;
+  border: 1px dashed #dcdfe6;
+  border-radius: 4px;
+}
+
+.im-chat-group-side__tool-btn:hover {
+  color: #409eff;
+  border-color: #409eff;
+}
+
+.im-chat-group-side__tool-text {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.im-chat-group-side__form {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.im-chat-group-side__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 12px;
+}
+</style>
diff --git a/src/views/im/home/pages/conversation/components/ChatPanel.vue b/src/views/im/home/pages/conversation/components/ChatPanel.vue
new file mode 100644
index 000000000..a07bf0c53
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/ChatPanel.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="chat-panel">
+    <template v-if="chatStore.activeChat">
+      <ChatHeader />
+      <MessageList />
+      <InputBox />
+    </template>
+    <div v-else class="chat-panel__empty">
+      <span>选择一个会话开始聊天</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useChatStore } from '../store/chatStore'
+import ChatHeader from './ChatHeader.vue'
+import MessageList from './MessageList.vue'
+import InputBox from './InputBox.vue'
+
+defineOptions({ name: 'ImChatPanel' })
+
+const chatStore = useChatStore()
+</script>
+
+<style scoped>
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  background-color: #f5f5f5;
+}
+
+.chat-panel__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/im/home/pages/conversation/components/ChatPrivateSide.vue b/src/views/im/home/pages/conversation/components/ChatPrivateSide.vue
new file mode 100644
index 000000000..f7456ca8b
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/ChatPrivateSide.vue
@@ -0,0 +1,110 @@
+<template>
+  <!--
+    私聊侧边抽屉
+    - 抽屉形态：受 v-model 控制，由父组件 ChatPanel 管理开关
+    - 顶部：好友头像 + 昵称
+    - 操作：消息免打扰 / 置顶聊天
+    - 与会话列表右键菜单同语义：免打扰联动 friendStore.setMuted
+  -->
+  <el-drawer
+    v-model="visible"
+    :with-header="false"
+    direction="rtl"
+    size="320px"
+    append-to-body
+  >
+    <div class="flex flex-col h-full p-2.5">
+      <!-- 头像 + 昵称 -->
+      <div v-if="friend" class="flex flex-col gap-1.5 items-start">
+        <UserAvatar
+          :id="friend.friendUserId"
+          :url="friend.avatar"
+          :name="friend.nickname"
+          :size="56"
+          radius="10%"
+          :clickable="false"
+        />
+        <div class="overflow-hidden text-sm font-medium truncate text-[var(--el-text-color-primary)] max-w-full">
+          {{ friend.nickname }}
+        </div>
+      </div>
+
+      <el-divider class="im-chat-private-side__divider" />
+
+      <!-- 操作项 -->
+      <div class="flex flex-col gap-3.5 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-[var(--el-text-color-primary)]">消息免打扰</span>
+          <el-switch :model-value="!!conversation?.muted" @change="onMutedChange" />
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="text-[var(--el-text-color-primary)]">置顶聊天</span>
+          <el-switch :model-value="!!conversation?.top" @change="onTopChange" />
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { useConversationStore } from '../../../store/conversationStore'
+import { useFriendStore } from '../../../store/friendStore'
+import { ImConversationType } from '../../../../utils/constants'
+import type { Conversation, Friend } from '../../../types'
+import UserAvatar from '../../../components/UserAvatar.vue'
+
+defineOptions({ name: 'ImChatPrivateSide' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 抽屉开关（v-model） */
+    modelValue?: boolean
+    /** 当前会话（取置顶 / 免打扰态） */
+    conversation?: Conversation | null
+    /** 对方好友信息（取头像 / 昵称） */
+    friend?: Friend
+  }>(),
+  {
+    modelValue: false
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const conversationStore = useConversationStore()
+const friendStore = useFriendStore()
+
+function onMutedChange(value: boolean | string | number) {
+  if (!props.conversation) {
+    return
+  }
+  const next = !!value
+  conversationStore.setMuted(props.conversation.type, props.conversation.targetId, next)
+  if (props.conversation.type === ImConversationType.PRIVATE) {
+    friendStore.setMuted(props.conversation.targetId, next)
+  }
+}
+
+function onTopChange(value: boolean | string | number) {
+  if (!props.conversation) {
+    return
+  }
+  conversationStore.setTop(props.conversation.type, props.conversation.targetId, !!value)
+}
+</script>
+
+<style scoped>
+/* el-divider 默认 margin 较大，压成 8px，和群聊抽屉视觉对齐 */
+.im-chat-private-side__divider {
+  margin: 8px 0;
+}
+</style>
diff --git a/src/views/im/home/pages/conversation/components/message/MessageHistory.vue b/src/views/im/home/pages/conversation/components/message/MessageHistory.vue
new file mode 100644
index 000000000..d4b97111f
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/message/MessageHistory.vue
@@ -0,0 +1,162 @@
+<template>
+  <!--
+    历史消息抽屉（对应 boxim chat/ChatHistory.vue）
+    - 从输入框工具栏触发，展示当前会话的全部历史消息
+    - 简化实现：基于本地缓存的 activeChat.messages 全量展示 + 关键词搜索
+    - 未来可接入后端「按时间段 / 发送人」查询，并用 PagedScroller 做增量加载
+  -->
+  <el-drawer
+    v-model="visible"
+    title="历史消息"
+    direction="rtl"
+    size="420px"
+    append-to-body
+  >
+    <div class="im-message-history">
+      <el-input
+        v-model="keyword"
+        placeholder="搜索消息内容"
+        clearable
+        class="im-message-history__search"
+      />
+
+      <div class="im-message-history__count">
+        共 {{ filtered.length }} 条{{ keyword ? '（过滤后）' : '' }}
+      </div>
+
+      <div class="im-message-history__list">
+        <div
+          v-for="msg in filtered"
+          :key="msg.id || msg.tmpId"
+          class="im-message-history__item"
+        >
+          <div class="im-message-history__meta">
+            <span class="im-message-history__sender">{{ msg.selfSend ? '我' : (msg.sendNickName || '对方') }}</span>
+            <span class="im-message-history__time">{{ formatTime(msg.sendTime) }}</span>
+          </div>
+          <div class="im-message-history__content">{{ renderContent(msg) }}</div>
+        </div>
+        <div v-if="filtered.length === 0" class="im-message-history__empty">
+          {{ keyword ? '没有匹配的消息' : '暂无历史消息' }}
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+import { useChatStore } from '../../../../store/chatStore'
+import { ImMessageType } from '../../../../../utils/constants'
+import { parseTextContent, buildRecallTip } from '../../../../../utils'
+
+defineOptions({ name: 'ImMessageHistory' })
+
+const props = defineProps<{
+  /** v-model 控制抽屉显隐 */
+  modelValue: boolean
+}>()
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const chatStore = useChatStore()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const keyword = ref('')
+
+const filtered = computed(() => {
+  const all = chatStore.activeChat?.messages || []
+  const kw = keyword.value.trim()
+  if (!kw) return [...all].reverse()
+  return all.filter((m) => renderContent(m).includes(kw)).reverse()
+})
+
+function renderContent(msg: { type: number; content: string; sendNickName?: string; selfSend?: boolean }): string {
+  switch (msg.type) {
+    case ImMessageType.TEXT:
+    case ImMessageType.TIP_TEXT:
+      return parseTextContent(msg.content)
+    case ImMessageType.IMAGE:
+      return '[图片]'
+    case ImMessageType.FILE:
+      return '[文件]'
+    case ImMessageType.VOICE:
+      return '[语音]'
+    case ImMessageType.VIDEO:
+      return '[视频]'
+    case ImMessageType.RECALL:
+      return buildRecallTip(msg.sendNickName || '', !!msg.selfSend)
+    default:
+      return '[不支持的消息类型]'
+  }
+}
+
+function formatTime(ts: number): string {
+  if (!ts) return ''
+  const d = new Date(ts)
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+</script>
+
+<style scoped>
+.im-message-history {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.im-message-history__search {
+  flex-shrink: 0;
+}
+
+.im-message-history__count {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: #909399;
+}
+
+.im-message-history__list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.im-message-history__item {
+  padding: 10px 0;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.im-message-history__meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #909399;
+}
+
+.im-message-history__sender {
+  font-weight: 500;
+  color: #606266;
+}
+
+.im-message-history__content {
+  margin-top: 4px;
+  font-size: 14px;
+  color: #303133;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.im-message-history__empty {
+  padding: 40px 0;
+  font-size: 13px;
+  color: #c0c4cc;
+  text-align: center;
+}
+</style>
diff --git a/src/views/im/home/pages/conversation/components/message/MessageReadStatus.vue b/src/views/im/home/pages/conversation/components/message/MessageReadStatus.vue
new file mode 100644
index 000000000..36f39d299
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/message/MessageReadStatus.vue
@@ -0,0 +1,125 @@
+<template>
+  <!--
+    群消息已读状态（对应 boxim chat/ChatGroupReaded.vue）
+    - 标签形态：展示「N 已读」或「全部已读」；点击弹出 tab 列出具体成员
+    - 仅在群聊、自己发送、已送达的消息下使用
+    - 依赖 getGroupReadUsers API 拉已读人列表；未读列表由群成员减去已读得出
+  -->
+  <el-popover
+    v-model:visible="popVisible"
+    placement="left"
+    trigger="click"
+    :width="320"
+    @show="loadReadUsers"
+  >
+    <template #reference>
+      <span class="im-message-read-status">
+        {{ label }}
+      </span>
+    </template>
+
+    <el-tabs v-model="activeTab" stretch>
+      <el-tab-pane :label="`已读(${readMembers.length})`" name="read">
+        <PagedScroller :items="readMembers" :page-size="20" class="im-message-read-status__scroll">
+          <template #default="{ item }">
+            <ChatGroupMember :member="(item as GroupMemberLite)" :height="40" :clickable="false" />
+          </template>
+        </PagedScroller>
+        <div v-if="readMembers.length === 0" class="im-message-read-status__empty">暂无已读</div>
+      </el-tab-pane>
+      <el-tab-pane :label="`未读(${unreadMembers.length})`" name="unread">
+        <PagedScroller :items="unreadMembers" :page-size="20" class="im-message-read-status__scroll">
+          <template #default="{ item }">
+            <ChatGroupMember :member="(item as GroupMemberLite)" :height="40" :clickable="false" />
+          </template>
+        </PagedScroller>
+        <div v-if="unreadMembers.length === 0" class="im-message-read-status__empty">全部已读</div>
+      </el-tab-pane>
+    </el-tabs>
+  </el-popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+import { getGroupReadUsers } from '@/api/im/message/group'
+import { ImGroupReceiptStatus } from '../../../../../utils/constants'
+import type { MessageInfo } from '../../../../types'
+import ChatGroupMember, { type GroupMemberLite } from '../ChatGroupMember.vue'
+import PagedScroller from '../../../../components/PagedScroller.vue'
+
+defineOptions({ name: 'ImMessageReadStatus' })
+
+const props = defineProps<{
+  message: MessageInfo
+  /** 当前群所有成员（第一期外部传入；没有就传空数组，未读列表会空） */
+  groupMembers: GroupMemberLite[]
+  /** 当前群 id */
+  groupId: string
+}>()
+
+const popVisible = ref(false)
+const activeTab = ref<'read' | 'unread'>('read')
+const readUserIds = ref<string[]>([])
+
+const label = computed(() => {
+  if (props.message.receiptStatus === ImGroupReceiptStatus.DONE) return '全部已读'
+  const n = props.message.readCount || 0
+  return n > 0 ? `${n} 人已读` : '未读'
+})
+
+const readMembers = computed(() =>
+  props.groupMembers.filter(
+    (m) =>
+      !m.quit &&
+      String(m.userId) !== String(props.message.sendId) &&
+      readUserIds.value.includes(String(m.userId))
+  )
+)
+
+const unreadMembers = computed(() =>
+  props.groupMembers.filter(
+    (m) =>
+      !m.quit &&
+      String(m.userId) !== String(props.message.sendId) &&
+      !readUserIds.value.includes(String(m.userId))
+  )
+)
+
+async function loadReadUsers() {
+  if (!props.message.id) return
+  try {
+    const res = await getGroupReadUsers({
+      groupId: props.groupId,
+      messageId: props.message.id
+    })
+    readUserIds.value = (res || []).map(String)
+  } catch (e) {
+    console.error('[IM] 拉取群已读列表失败:', e)
+  }
+}
+</script>
+
+<style scoped>
+.im-message-read-status {
+  font-size: 12px;
+  color: #909399;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.im-message-read-status:hover {
+  color: #409eff;
+}
+
+.im-message-read-status__scroll {
+  height: 300px;
+}
+
+.im-message-read-status__empty {
+  padding: 20px 0;
+  font-size: 12px;
+  color: #c0c4cc;
+  text-align: center;
+}
+</style>
diff --git a/src/views/im/home/pages/friend/FriendPage.vue b/src/views/im/home/pages/friend/FriendPage.vue
new file mode 100644
index 000000000..0befbe68b
--- /dev/null
+++ b/src/views/im/home/pages/friend/FriendPage.vue
@@ -0,0 +1,22 @@
+<template>
+  <!-- 好友 Tab 占位页，对齐 boxim /home/friend；后续接入好友申请、分组、黑名单等功能 -->
+  <div class="im-placeholder-page">
+    <el-empty description="好友功能敬请期待" :image-size="120" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ImFriendPage' })
+</script>
+
+<style scoped>
+.im-placeholder-page {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+</style>
diff --git a/src/views/im/home/pages/friend/components/FriendItem.vue b/src/views/im/home/pages/friend/components/FriendItem.vue
new file mode 100644
index 000000000..279302f7a
--- /dev/null
+++ b/src/views/im/home/pages/friend/components/FriendItem.vue
@@ -0,0 +1,129 @@
+<template>
+  <!--
+    好友单行项（对应 boxim friend/FriendItem.vue）
+    - 头像 + 昵称 + 在线标识
+    - 选中态 active
+    - 右键菜单（发消息 / 删除好友）由全局 ContextMenu 承接
+  -->
+  <div
+    class="im-friend-item"
+    :class="{ 'is-active': active }"
+    @click="$emit('click', friend)"
+    @contextmenu.prevent="handleContextMenu"
+  >
+    <UserAvatar
+      :id="friend.id"
+      :url="friend.headImage"
+      :name="friend.nickName"
+      :online="friend.online"
+      :size="42"
+      :clickable="false"
+    />
+    <div class="im-friend-item__info">
+      <div class="im-friend-item__name">{{ friend.nickName }}</div>
+      <div class="im-friend-item__online">
+        <span v-if="friend.onlineWeb" class="im-friend-item__dot" title="Web 在线">💻</span>
+        <span v-if="friend.onlineApp" class="im-friend-item__dot" title="App 在线">📱</span>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useImUiStore } from '../../../store/uiStore'
+import UserAvatar from '../../../components/UserAvatar.vue'
+
+defineOptions({ name: 'ImFriendItem' })
+
+export interface FriendLite {
+  id: string | number
+  nickName: string
+  headImage?: string
+  online?: boolean
+  onlineWeb?: boolean
+  onlineApp?: boolean
+  deleted?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    friend: FriendLite
+    active?: boolean
+    /** 是否启用右键菜单；在选择器弹窗里一般关闭 */
+    menu?: boolean
+  }>(),
+  {
+    active: false,
+    menu: true
+  }
+)
+
+const emit = defineEmits<{
+  click: [friend: FriendLite]
+  chat: [friend: FriendLite]
+  delete: [friend: FriendLite]
+}>()
+
+const uiStore = useImUiStore()
+
+function handleContextMenu(e: MouseEvent) {
+  if (!props.menu) return
+  uiStore.openContextMenu(
+    { x: e.clientX, y: e.clientY },
+    [
+      { key: 'chat', name: '发送消息' },
+      { key: 'delete', name: '删除好友' }
+    ],
+    (item) => {
+      if (item.key === 'chat') emit('chat', props.friend)
+      else if (item.key === 'delete') emit('delete', props.friend)
+    }
+  )
+}
+</script>
+
+<style scoped>
+.im-friend-item {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  height: 50px;
+  margin: 0 3px;
+  padding: 5px 8px;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 10px;
+  transition: background-color 0.15s;
+}
+
+.im-friend-item:hover {
+  background-color: #f5f7fa;
+}
+
+.im-friend-item.is-active {
+  background-color: #e1eaf7;
+}
+
+.im-friend-item__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.im-friend-item__name {
+  overflow: hidden;
+  font-size: 14px;
+  color: #303133;
+  text-overflow: ellipsis;
+}
+
+.im-friend-item__online {
+  display: flex;
+  gap: 4px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/views/im/home/pages/group/GroupPage.vue b/src/views/im/home/pages/group/GroupPage.vue
new file mode 100644
index 000000000..539f731a5
--- /dev/null
+++ b/src/views/im/home/pages/group/GroupPage.vue
@@ -0,0 +1,22 @@
+<template>
+  <!-- 群聊 Tab 占位页，对齐 boxim /home/group；后续接入我的群、创建群、群管理等功能 -->
+  <div class="im-placeholder-page">
+    <el-empty description="群聊功能敬请期待" :image-size="120" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ImGroupPage' })
+</script>
+
+<style scoped>
+.im-placeholder-page {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+</style>
diff --git a/src/views/im/home/pages/group/components/AddGroupMemberDialog.vue b/src/views/im/home/pages/group/components/AddGroupMemberDialog.vue
new file mode 100644
index 000000000..f018bd7e2
--- /dev/null
+++ b/src/views/im/home/pages/group/components/AddGroupMemberDialog.vue
@@ -0,0 +1,192 @@
+<template>
+  <!--
+    邀请好友入群对话框（对应 boxim group/AddGroupMember.vue）
+    - 左：好友列表（带 checkbox）
+    - 右：已勾选预览
+    - 已在群内的好友标记为 disabled
+    - TODO 接入 /im/group/invite
+  -->
+  <el-dialog
+    v-model="visible"
+    title="邀请好友"
+    width="620px"
+    :close-on-click-modal="false"
+  >
+    <div class="im-add-group-member">
+      <div class="im-add-group-member__left">
+        <el-input v-model="searchText" placeholder="搜索好友" size="small" clearable>
+          <template #suffix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <el-scrollbar class="im-add-group-member__scroll">
+          <FriendItem
+            v-for="f in shownFriends"
+            :key="f.id"
+            :friend="f"
+            :menu="false"
+            :active="false"
+            @click="toggleCheck(f)"
+          >
+            <el-checkbox
+              :model-value="f.isCheck"
+              :disabled="f.disabled"
+              @click.stop
+              @change="(v: boolean) => (f.isCheck = v)"
+            />
+          </FriendItem>
+        </el-scrollbar>
+      </div>
+
+      <div class="im-add-group-member__arrow">
+        <el-icon><DArrowRight /></el-icon>
+      </div>
+
+      <div class="im-add-group-member__right">
+        <div class="im-add-group-member__tip">已勾选 {{ checkCount }} 位好友</div>
+        <el-scrollbar class="im-add-group-member__scroll">
+          <FriendItem
+            v-for="f in checkedFriends"
+            :key="f.id"
+            :friend="f"
+            :menu="false"
+            :active="false"
+          />
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="handleOk">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { Search, DArrowRight } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+import FriendItem, { type FriendLite } from '../../friend/components/FriendItem.vue'
+import type { GroupMemberLite } from '../../chat/components/ChatGroupMember.vue'
+
+defineOptions({ name: 'ImAddGroupMemberDialog' })
+
+interface FriendCheckable extends FriendLite {
+  isCheck?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    groupId?: string | number
+    /** 本群现有成员，用来判断好友是否已在群里 */
+    members?: GroupMemberLite[]
+    /** 全量好友（由调用方从 friendStore 传入） */
+    friends?: FriendLite[]
+  }>(),
+  {
+    members: () => [],
+    friends: () => []
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  /** 邀请完成，携带被邀请的好友 id 列表 */
+  reload: [friendIds: (string | number)[]]
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const searchText = ref('')
+const friends = ref<FriendCheckable[]>([])
+
+watch(
+  visible,
+  (v) => {
+    if (!v) return
+    friends.value = props.friends
+      .filter((f) => !f.deleted)
+      .map((f) => {
+        const inGroup = props.members.some(
+          (m) => !m.quit && String(m.userId) === String(f.id)
+        )
+        return {
+          ...f,
+          disabled: inGroup,
+          isCheck: inGroup
+        }
+      })
+  },
+  { immediate: true }
+)
+
+const shownFriends = computed(() =>
+  friends.value.filter((f) => f.nickName.includes(searchText.value))
+)
+
+const checkedFriends = computed(() =>
+  friends.value.filter((f) => f.isCheck && !f.disabled)
+)
+
+const checkCount = computed(() => checkedFriends.value.length)
+
+function toggleCheck(f: FriendCheckable) {
+  if (!f.disabled) f.isCheck = !f.isCheck
+}
+
+// TODO 接入 /im/group/invite
+async function handleOk() {
+  const ids = checkedFriends.value.map((f) => f.id)
+  if (ids.length === 0) {
+    ElMessage.warning('请选择至少一个好友')
+    return
+  }
+  ElMessage.info('邀请入群接口待接入，当前为占位实现')
+  emit('reload', ids)
+  visible.value = false
+}
+</script>
+
+<style scoped>
+.im-add-group-member {
+  display: flex;
+  gap: 10px;
+}
+
+.im-add-group-member__left,
+.im-add-group-member__right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.im-add-group-member__scroll {
+  height: 400px;
+}
+
+.im-add-group-member__arrow {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  color: #409eff;
+}
+
+.im-add-group-member__tip {
+  height: 40px;
+  padding-left: 10px;
+  line-height: 40px;
+  font-size: 13px;
+  color: #909399;
+  border-bottom: 1px solid #f0f2f5;
+}
+</style>
diff --git a/src/views/im/home/pages/group/components/CreateGroupDialog.vue b/src/views/im/home/pages/group/components/CreateGroupDialog.vue
new file mode 100644
index 000000000..9d9135ab2
--- /dev/null
+++ b/src/views/im/home/pages/group/components/CreateGroupDialog.vue
@@ -0,0 +1,174 @@
+<template>
+  <!--
+    新建群聊对话框
+    - 顶部：群名称输入
+    - 左：好友列表（带 checkbox）
+    - 右：已勾选预览
+    - 提交：先 createGroup 再 inviteGroupMember，最后让父页 reload
+  -->
+  <el-dialog
+    v-model="visible"
+    title="新建群聊"
+    width="620px"
+    :close-on-click-modal="false"
+  >
+    <div class="flex flex-col gap-3">
+      <el-input
+        v-model="groupName"
+        placeholder="请输入群名称"
+        maxlength="20"
+        show-word-limit
+      />
+
+      <div class="flex gap-2.5">
+        <div class="flex flex-col flex-1 overflow-hidden rounded border border-[var(--el-border-color)]">
+          <el-input v-model="searchText" placeholder="搜索好友" size="small" clearable>
+            <template #suffix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+          <el-scrollbar class="h-[400px]">
+            <FriendItem
+              v-for="f in shownFriends"
+              :key="f.id"
+              :friend="f"
+              :menu="false"
+              :active="false"
+              @click="toggleCheck(f)"
+            >
+              <el-checkbox
+                :model-value="f.isCheck"
+                @click.stop
+                @change="(v) => (f.isCheck = !!v)"
+              />
+            </FriendItem>
+          </el-scrollbar>
+        </div>
+
+        <div class="flex items-center text-lg text-[#409eff]">
+          <el-icon><DArrowRight /></el-icon>
+        </div>
+
+        <div class="flex flex-col flex-1 overflow-hidden rounded border border-[var(--el-border-color)]">
+          <div
+            class="h-10 pl-2.5 leading-10 text-13px text-[var(--el-text-color-secondary)] border-b border-[var(--el-border-color-lighter)]"
+          >
+            已勾选 {{ checkedFriends.length }} 位好友
+          </div>
+          <el-scrollbar class="h-[400px]">
+            <FriendItem
+              v-for="f in checkedFriends"
+              :key="f.id"
+              :friend="f"
+              :menu="false"
+              :active="false"
+            />
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleOk">创 建</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { Search, DArrowRight } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+import { createGroup } from '@/api/im/group'
+import { inviteGroupMember } from '@/api/im/group/member'
+import FriendItem, { type FriendLite } from '../../friend/components/FriendItem.vue'
+
+defineOptions({ name: 'ImCreateGroupDialog' })
+
+interface FriendCheckable extends FriendLite {
+  isCheck?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    /** 全量好友（由调用方从 friendStore 传入） */
+    friends?: FriendLite[]
+  }>(),
+  {
+    friends: () => []
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  /** 创建成功，携带新群编号 */
+  created: [groupId: number]
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const groupName = ref('')
+const searchText = ref('')
+const submitting = ref(false)
+/** 工作副本（带 isCheck 标记），与 prop 隔离 */
+const workingFriends = ref<FriendCheckable[]>([])
+
+watch(
+  visible,
+  (v) => {
+    if (!v) {
+      return
+    }
+    groupName.value = ''
+    searchText.value = ''
+    workingFriends.value = props.friends
+      .filter((f) => !f.deleted)
+      .map((f) => ({ ...f, isCheck: false }))
+  },
+  { immediate: true }
+)
+
+const shownFriends = computed(() =>
+  workingFriends.value.filter((f) => f.nickname.includes(searchText.value))
+)
+
+const checkedFriends = computed(() => workingFriends.value.filter((f) => f.isCheck))
+
+function toggleCheck(f: FriendCheckable) {
+  f.isCheck = !f.isCheck
+}
+
+async function handleOk() {
+  const name = groupName.value.trim()
+  if (!name) {
+    ElMessage.warning('请输入群名称')
+    return
+  }
+  const memberUserIds = checkedFriends.value.map((f) => f.id)
+  if (memberUserIds.length === 0) {
+    ElMessage.warning('请至少选择一位好友')
+    return
+  }
+  submitting.value = true
+  try {
+    const group = await createGroup({ name })
+    if (!group?.id) {
+      throw new Error('创建群失败：未返回群编号')
+    }
+    await inviteGroupMember({ groupId: group.id, memberUserIds })
+    ElMessage.success('群聊创建成功')
+    emit('created', group.id)
+    visible.value = false
+  } catch (e: any) {
+    console.error('[IM] 创建群失败', e)
+    ElMessage.error(e?.message || '创建群失败')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
diff --git a/src/views/im/home/pages/group/components/GroupItem.vue b/src/views/im/home/pages/group/components/GroupItem.vue
new file mode 100644
index 000000000..be8ba9bb2
--- /dev/null
+++ b/src/views/im/home/pages/group/components/GroupItem.vue
@@ -0,0 +1,96 @@
+<template>
+  <!--
+    群单行项（对应 boxim group/GroupItem.vue）
+    - 头像 + 群名
+    - 选中态 active
+  -->
+  <div
+    class="im-group-item"
+    :class="{ 'is-active': active }"
+    @click="$emit('click', group)"
+  >
+    <UserAvatar
+      :url="group.headImage || group.headImageThumb"
+      :name="group.showGroupName || group.name"
+      :size="42"
+      :clickable="false"
+    />
+    <div class="im-group-item__info">
+      <div class="im-group-item__name">{{ group.showGroupName || group.name }}</div>
+      <div v-if="group.memberCount != null" class="im-group-item__desc">
+        {{ group.memberCount }} 位成员
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UserAvatar from '../../../components/UserAvatar.vue'
+
+defineOptions({ name: 'ImGroupItem' })
+
+export interface GroupLite {
+  id: string | number
+  name?: string
+  /** 带备注的展示名（如"我在群里的昵称"） */
+  showGroupName?: string
+  headImage?: string
+  headImageThumb?: string
+  memberCount?: number
+  ownerId?: string | number
+}
+
+defineProps<{
+  group: GroupLite
+  active?: boolean
+}>()
+
+defineEmits<{
+  click: [group: GroupLite]
+}>()
+</script>
+
+<style scoped>
+.im-group-item {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  height: 50px;
+  margin: 0 3px;
+  padding: 5px 8px;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 10px;
+  transition: background-color 0.15s;
+}
+
+.im-group-item:hover {
+  background-color: #f5f7fa;
+}
+
+.im-group-item.is-active {
+  background-color: #e1eaf7;
+}
+
+.im-group-item__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.im-group-item__name {
+  overflow: hidden;
+  font-size: 14px;
+  color: #303133;
+  text-overflow: ellipsis;
+}
+
+.im-group-item__desc {
+  font-size: 12px;
+  color: #909399;
+}
+</style>
diff --git a/src/views/im/home/pages/group/components/GroupMemberGrid.vue b/src/views/im/home/pages/group/components/GroupMemberGrid.vue
new file mode 100644
index 000000000..ed759a165
--- /dev/null
+++ b/src/views/im/home/pages/group/components/GroupMemberGrid.vue
@@ -0,0 +1,52 @@
+<template>
+  <!--
+    群成员宫格单元（对应 boxim group/GroupMember.vue）
+    - 宫格展示的最小单位：50px 窄列，头像在上、名字在下
+    - 被 GroupMemberSelector 右侧已选区、ChatGroupSide 群成员区循环使用
+  -->
+  <div class="im-group-member-grid">
+    <UserAvatar
+      :id="member.userId"
+      :url="member.headImage"
+      :name="member.showNickName"
+      :size="38"
+      :clickable="false"
+    />
+    <div class="im-group-member-grid__name">{{ member.showNickName }}</div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UserAvatar from '../../../components/UserAvatar.vue'
+import type { GroupMemberLite } from '../../chat/components/ChatGroupMember.vue'
+
+defineOptions({ name: 'ImGroupMemberGrid' })
+
+defineProps<{
+  member: GroupMemberLite
+}>()
+</script>
+
+<style scoped>
+.im-group-member-grid {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 54px;
+  padding: 4px 2px;
+}
+
+.im-group-member-grid__name {
+  width: 100%;
+  margin-top: 2px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 18px;
+  color: #606266;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/im/home/pages/group/components/GroupMemberItem.vue b/src/views/im/home/pages/group/components/GroupMemberItem.vue
new file mode 100644
index 000000000..049078281
--- /dev/null
+++ b/src/views/im/home/pages/group/components/GroupMemberItem.vue
@@ -0,0 +1,87 @@
+<template>
+  <!--
+    群成员行形态（对应 boxim group/GroupMemberItem.vue）
+    - 横排、带 hover 态；slot 放 checkbox / 操作按钮等
+    - 与 ChatGroupMember 的差别：带 hover 态 + slot 扩展点，适合 selector / admin 列表
+  -->
+  <div
+    class="im-group-member-item"
+    :class="{ 'is-active': active }"
+    :style="{ height: height + 'px' }"
+    @click="$emit('click', member)"
+  >
+    <UserAvatar
+      :id="member.userId"
+      :url="member.headImage"
+      :name="member.showNickName"
+      :size="avatarSize"
+      :clickable="false"
+    />
+    <div class="im-group-member-item__name" :style="{ lineHeight: height + 'px' }">
+      {{ member.showNickName }}
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import UserAvatar from '../../../components/UserAvatar.vue'
+import type { GroupMemberLite } from '../../chat/components/ChatGroupMember.vue'
+
+defineOptions({ name: 'ImGroupMemberItem' })
+
+const props = withDefaults(
+  defineProps<{
+    member: GroupMemberLite
+    height?: number
+    active?: boolean
+  }>(),
+  {
+    height: 50,
+    active: false
+  }
+)
+
+defineEmits<{
+  click: [member: GroupMemberLite]
+}>()
+
+const avatarSize = computed(() => Math.ceil(props.height * 0.75))
+</script>
+
+<style scoped>
+.im-group-member-item {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin: 0 1px;
+  padding: 0 15px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.im-group-member-item:hover {
+  background-color: #f5f7fa;
+}
+
+.im-group-member-item.is-active {
+  background-color: #e1eaf7;
+}
+
+.im-group-member-item__name {
+  flex: 1;
+  height: 100%;
+  padding-left: 4px;
+  overflow: hidden;
+  font-size: 14px;
+  color: #303133;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/im/home/pages/group/components/GroupMemberSelector.vue b/src/views/im/home/pages/group/components/GroupMemberSelector.vue
new file mode 100644
index 000000000..02002d352
--- /dev/null
+++ b/src/views/im/home/pages/group/components/GroupMemberSelector.vue
@@ -0,0 +1,213 @@
+<template>
+  <!--
+    群成员选择器（对应 boxim group/GroupMemberSelector.vue）
+    - 左：搜索 + 群成员列表（带 checkbox）
+    - 右：已勾选的成员（宫格预览）
+    - 确定时 emit complete，抛出选中的成员列表
+  -->
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    width="700px"
+    :close-on-click-modal="false"
+  >
+    <div class="im-group-member-selector">
+      <div class="im-group-member-selector__left">
+        <el-input v-model="searchText" placeholder="搜索" clearable>
+          <template #suffix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <div class="im-group-member-selector__scroll">
+          <PagedScroller :items="showMembers" :page-size="30">
+            <template #default="{ item }">
+              <GroupMemberItem
+                :member="(item as GroupMemberFlag)"
+                :height="46"
+                @click="toggleCheck(item as GroupMemberFlag)"
+              >
+                <el-checkbox
+                  :model-value="(item as GroupMemberFlag).checked"
+                  :disabled="(item as GroupMemberFlag).locked"
+                  @click.stop
+                  @change="(val: boolean) => onCheckChange(item as GroupMemberFlag, val)"
+                />
+              </GroupMemberItem>
+            </template>
+          </PagedScroller>
+        </div>
+      </div>
+
+      <div class="im-group-member-selector__arrow">
+        <el-icon><DArrowRight /></el-icon>
+      </div>
+
+      <div class="im-group-member-selector__right">
+        <div class="im-group-member-selector__tip">已勾选 {{ checkedMembers.length }} 位成员</div>
+        <el-scrollbar class="im-group-member-selector__scroll">
+          <div class="im-group-member-selector__grid">
+            <GroupMemberGrid
+              v-for="m in checkedMembers"
+              :key="m.userId"
+              :member="m"
+            />
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="handleOk">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { Search, DArrowRight } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+import GroupMemberItem from './GroupMemberItem.vue'
+import GroupMemberGrid from './GroupMemberGrid.vue'
+import PagedScroller from '../../../components/PagedScroller.vue'
+import type { GroupMemberLite } from '../../chat/components/ChatGroupMember.vue'
+
+defineOptions({ name: 'ImGroupMemberSelector' })
+
+/** 选择器内部扩展：加上 checked / locked / hide 标记 */
+export interface GroupMemberFlag extends GroupMemberLite {
+  checked?: boolean
+  locked?: boolean
+  hide?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title?: string
+    /** 传入的群成员列表（已经有 quit/headImage 等基础字段） */
+    members?: GroupMemberLite[]
+    /** 默认选中的 userId 列表 */
+    checkedIds?: (string | number)[]
+    /** 锁定的 userId 列表（不能取消） */
+    lockedIds?: (string | number)[]
+    /** 隐藏的 userId 列表（不展示） */
+    hideIds?: (string | number)[]
+    /** 最多可选数量，-1 表示不限制 */
+    maxSize?: number
+  }>(),
+  {
+    title: '选择成员',
+    members: () => [],
+    checkedIds: () => [],
+    lockedIds: () => [],
+    hideIds: () => [],
+    maxSize: -1
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  /** 点击"确定"时抛出被勾选的成员列表 */
+  complete: [members: GroupMemberFlag[]]
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const searchText = ref('')
+const workingMembers = ref<GroupMemberFlag[]>([])
+
+watch(
+  visible,
+  (v) => {
+    if (v) rebuild()
+  },
+  { immediate: true }
+)
+
+function rebuild() {
+  workingMembers.value = props.members.map((m) => ({
+    ...m,
+    checked: props.checkedIds.some((id) => String(id) === String(m.userId)),
+    locked: props.lockedIds.some((id) => String(id) === String(m.userId)),
+    hide: props.hideIds.some((id) => String(id) === String(m.userId))
+  }))
+}
+
+const showMembers = computed(() =>
+  workingMembers.value.filter(
+    (m) => !m.hide && !m.quit && m.showNickName.includes(searchText.value)
+  )
+)
+
+const checkedMembers = computed(() => workingMembers.value.filter((m) => m.checked))
+
+function toggleCheck(m: GroupMemberFlag) {
+  if (m.locked) return
+  m.checked = !m.checked
+  if (props.maxSize > 0 && checkedMembers.value.length > props.maxSize) {
+    ElMessage.error(`最多选择 ${props.maxSize} 位成员`)
+    m.checked = false
+  }
+}
+
+function onCheckChange(m: GroupMemberFlag, val: boolean) {
+  m.checked = val
+  if (props.maxSize > 0 && checkedMembers.value.length > props.maxSize) {
+    ElMessage.error(`最多选择 ${props.maxSize} 位成员`)
+    m.checked = false
+  }
+}
+
+function handleOk() {
+  emit('complete', checkedMembers.value)
+  visible.value = false
+}
+</script>
+
+<style scoped>
+.im-group-member-selector {
+  display: flex;
+  gap: 10px;
+}
+
+.im-group-member-selector__left,
+.im-group-member-selector__right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.im-group-member-selector__scroll {
+  height: 400px;
+}
+
+.im-group-member-selector__arrow {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  color: #409eff;
+}
+
+.im-group-member-selector__tip {
+  height: 40px;
+  padding-left: 10px;
+  line-height: 40px;
+  font-size: 13px;
+  color: #909399;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.im-group-member-selector__grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+}
+</style>
diff --git a/src/views/im/manager/index.vue b/src/views/im/manager/index.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/views/im/utils/index.ts b/src/views/im/utils/index.ts
new file mode 100644
index 000000000..e8d18a95c
--- /dev/null
+++ b/src/views/im/utils/index.ts
@@ -0,0 +1,30 @@
+/** 生成客户端消息 ID（时间戳 + UUID） */
+export const generateClientMessageId = (): string => {
+  const timestamp = Date.now().toString()
+  const randomPart = 'xxxx-xxxx-4xxx-yxxx-xxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+  return `${timestamp}-${randomPart}`
+}
+
+/** 生成存储 key（对齐 boxim key 命名 chats-{userId}） */
+export const buildMetaKey = (userId: string): string => {
+  return `chats-${userId}`
+}
+
+/** 解析文本消息 content JSON */
+export const parseTextContent = (content: string): string => {
+  try {
+    const parsed = JSON.parse(content)
+    return parsed.content || ''
+  } catch {
+    return content
+  }
+}
+
+/** 序列化文本消息 content JSON */
+export const serializeTextContent = (text: string): string => {
+  return JSON.stringify({ content: text })
+}