diff --git a/apps/web-antd/src/api/system/user/index.ts b/apps/web-antd/src/api/system/user/index.ts
index caa0204a9..1f4903682 100644
--- a/apps/web-antd/src/api/system/user/index.ts
+++ b/apps/web-antd/src/api/system/user/index.ts
@@ -41,6 +41,13 @@ export function getUser(id: number) {
   return requestClient.get<SystemUserApi.User>(`/system/user/get?id=${id}`);
 }
 
+/** 查询用户列表 */
+export function getUserList(ids: number[]) {
+  return requestClient.get<SystemUserApi.User[]>('/system/user/list', {
+    params: { ids: ids.join(',') },
+  });
+}
+
 /** 新增用户 */
 export function createUser(data: SystemUserApi.User) {
   return requestClient.post('/system/user/create', data);
diff --git a/apps/web-antd/src/views/im/home/components/card/CardBubble.vue b/apps/web-antd/src/views/im/home/components/card/card-bubble.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/components/card/CardBubble.vue
rename to apps/web-antd/src/views/im/home/components/card/card-bubble.vue
index ce5c0d239..0fb56daa5 100644
--- a/apps/web-antd/src/views/im/home/components/card/CardBubble.vue
+++ b/apps/web-antd/src/views/im/home/components/card/card-bubble.vue
@@ -8,7 +8,7 @@ import {
   getCardLabelInfo
 } from '#/views/im/utils/message'
 
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImCardBubble' })
 
diff --git a/apps/web-antd/src/views/im/home/components/card/CardLineLabel.vue b/apps/web-antd/src/views/im/home/components/card/card-line-label.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/components/card/CardLineLabel.vue
rename to apps/web-antd/src/views/im/home/components/card/card-line-label.vue
diff --git a/apps/web-antd/src/views/im/home/components/card/index.ts b/apps/web-antd/src/views/im/home/components/card/index.ts
new file mode 100644
index 000000000..ac62b1b09
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/components/card/index.ts
@@ -0,0 +1,2 @@
+export { default as CardBubble } from './card-bubble.vue';
+export { default as CardLineLabel } from './card-line-label.vue';
diff --git a/apps/web-antd/src/views/im/home/components/ContextMenu.vue b/apps/web-antd/src/views/im/home/components/context-menu.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/components/ContextMenu.vue
rename to apps/web-antd/src/views/im/home/components/context-menu.vue
diff --git a/apps/web-antd/src/views/im/home/components/friend/FriendAddDialog.vue b/apps/web-antd/src/views/im/home/components/friend/friend-add-dialog.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/friend/FriendAddDialog.vue
rename to apps/web-antd/src/views/im/home/components/friend/friend-add-dialog.vue
index e83172b6a..bd8578848 100644
--- a/apps/web-antd/src/views/im/home/components/friend/FriendAddDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/friend/friend-add-dialog.vue
@@ -14,7 +14,7 @@ import { getCurrentUserId } from '#/views/im/utils/auth'
 import { ImFriendAddSource } from '../../../utils/constants'
 import { getGenderColor, getGenderIcon } from '../../../utils/user'
 import { useFriendStore } from '../../store/friendStore'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImFriendAddDialog' })
 
@@ -159,7 +159,13 @@ async function handleSubmitApply() {
     - 第一层 search：按昵称搜索用户列表
     - 第二层 apply：选中用户后展开「申请添加朋友」表单（申请理由 + 备注）
   -->
-  <Modal v-model:open="visible" :title="dialogTitle" width="480px" :mask-closable="false">
+  <Modal
+    v-model:open="visible"
+    :title="dialogTitle"
+    width="480px"
+    :mask-closable="false"
+    :footer="step === 'apply' ? undefined : null"
+  >
     <!-- 第一层：搜索 + 用户列表 -->
     <template v-if="step === 'search'">
       <Input
diff --git a/apps/web-antd/src/views/im/home/components/friend/FriendItem.vue b/apps/web-antd/src/views/im/home/components/friend/friend-item.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/components/friend/FriendItem.vue
rename to apps/web-antd/src/views/im/home/components/friend/friend-item.vue
index 20fa6c401..9feebabbc 100644
--- a/apps/web-antd/src/views/im/home/components/friend/FriendItem.vue
+++ b/apps/web-antd/src/views/im/home/components/friend/friend-item.vue
@@ -2,7 +2,7 @@
 import type { FriendLite } from '../../types'
 
 import { useImUiStore } from '../../store/uiStore'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImFriendItem' })
 
diff --git a/apps/web-antd/src/views/im/home/components/friend/index.ts b/apps/web-antd/src/views/im/home/components/friend/index.ts
new file mode 100644
index 000000000..443154c01
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/components/friend/index.ts
@@ -0,0 +1,2 @@
+export { default as FriendAddDialog } from './friend-add-dialog.vue';
+export { default as FriendItem } from './friend-item.vue';
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupAdminSetDialog.vue b/apps/web-antd/src/views/im/home/components/group/group-admin-set-dialog.vue
similarity index 96%
rename from apps/web-antd/src/views/im/home/components/group/GroupAdminSetDialog.vue
rename to apps/web-antd/src/views/im/home/components/group/group-admin-set-dialog.vue
index 52e85700b..060355ae6 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupAdminSetDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-admin-set-dialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from './GroupMember.vue'
+import type { GroupMemberLite } from './group-member.vue'
 
 import { ref } from 'vue'
 
@@ -8,7 +8,7 @@ import { Button, message, Modal } from 'ant-design-vue'
 import { addGroupAdmin, removeGroupAdmin } from '#/api/im/group'
 import { GROUP_ADMIN_MAX_COUNT } from '#/views/im/utils/config'
 
-import GroupMemberPickerPanel from '../picker/GroupMemberPickerPanel.vue'
+import { GroupMemberPickerPanel } from '../picker'
 
 defineOptions({ name: 'ImGroupAdminSetDialog' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupAvatar.vue b/apps/web-antd/src/views/im/home/components/group/group-avatar.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/group/GroupAvatar.vue
rename to apps/web-antd/src/views/im/home/components/group/group-avatar.vue
index 4078a1447..021714f65 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupAvatar.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-avatar.vue
@@ -11,7 +11,7 @@ import {
 import { getMemberDisplayName } from '../../../utils/user'
 import { useFriendStore } from '../../store/friendStore'
 import { useGroupStore } from '../../store/groupStore'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImGroupAvatar' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupCreateDialog.vue b/apps/web-antd/src/views/im/home/components/group/group-create-dialog.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/group/GroupCreateDialog.vue
rename to apps/web-antd/src/views/im/home/components/group/group-create-dialog.vue
index 041c98bb3..18b87a585 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupCreateDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-create-dialog.vue
@@ -10,7 +10,7 @@ import { createGroup } from '#/api/im/group'
 import { buildDefaultGroupName } from '../../../utils/group'
 import { useFriendStore } from '../../store/friendStore'
 import { useGroupStore } from '../../store/groupStore'
-import FriendPickerPanel from '../picker/FriendPickerPanel.vue'
+import { FriendPickerPanel } from '../picker'
 
 defineOptions({ name: 'ImGroupCreateDialog' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupInfoCard.vue b/apps/web-antd/src/views/im/home/components/group/group-info-card.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/group/GroupInfoCard.vue
rename to apps/web-antd/src/views/im/home/components/group/group-info-card.vue
index 6c04bdbc0..82918a7cb 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupInfoCard.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-info-card.vue
@@ -15,7 +15,7 @@ import { getGroupDisplayName } from '../../../utils/user'
 import { useConversationStore } from '../../store/conversationStore'
 import { useGroupStore } from '../../store/groupStore'
 import { useImUiStore } from '../../store/uiStore'
-import GroupInfo from './GroupInfo.vue'
+import GroupInfo from './group-info.vue'
 
 defineOptions({ name: 'ImGroupInfoCard' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupInfo.vue b/apps/web-antd/src/views/im/home/components/group/group-info.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/components/group/GroupInfo.vue
rename to apps/web-antd/src/views/im/home/components/group/group-info.vue
index 8c4c3ff6c..5ee86e4d4 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupInfo.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-info.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Friend, GroupLite, GroupMember } from '../../types'
-import type { GroupMemberLite } from './GroupMember.vue'
+import type { GroupMemberLite } from './group-member.vue'
 
 import { computed, ref, watch } from 'vue'
 
@@ -13,8 +13,8 @@ import { getCurrentUserId } from '#/views/im/utils/auth'
 import { getMemberDisplayName, isGroupQuit } from '../../../utils/user'
 import { useFriendStore } from '../../store/friendStore'
 import { useGroupStore } from '../../store/groupStore'
-import GroupAvatar from './GroupAvatar.vue'
-import GroupMemberGrid from './GroupMemberGrid.vue'
+import GroupAvatar from './group-avatar.vue'
+import GroupMemberGrid from './group-member-grid.vue'
 
 defineOptions({ name: 'ImGroupInfo' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupItem.vue b/apps/web-antd/src/views/im/home/components/group/group-item.vue
similarity index 95%
rename from apps/web-antd/src/views/im/home/components/group/GroupItem.vue
rename to apps/web-antd/src/views/im/home/components/group/group-item.vue
index c1ff35aea..9fa60e27e 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupItem.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-item.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { GroupLite } from '../../types'
 
-import GroupAvatar from './GroupAvatar.vue'
+import GroupAvatar from './group-avatar.vue'
 
 defineOptions({ name: 'ImGroupItem' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupMemberAddDialog.vue b/apps/web-antd/src/views/im/home/components/group/group-member-add-dialog.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/components/group/GroupMemberAddDialog.vue
rename to apps/web-antd/src/views/im/home/components/group/group-member-add-dialog.vue
index 05d272cc2..9c1145a3d 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupMemberAddDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-member-add-dialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from './GroupMember.vue'
+import type { GroupMemberLite } from './group-member.vue'
 
 import { computed, ref } from 'vue'
 
@@ -14,7 +14,7 @@ import { ImGroupMemberRole } from '#/views/im/utils/constants'
 
 import { useFriendStore } from '../../store/friendStore'
 import { useGroupStore } from '../../store/groupStore'
-import FriendPickerPanel from '../picker/FriendPickerPanel.vue'
+import { FriendPickerPanel } from '../picker'
 
 defineOptions({ name: 'ImGroupMemberAddDialog' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupMemberGrid.vue b/apps/web-antd/src/views/im/home/components/group/group-member-grid.vue
similarity index 93%
rename from apps/web-antd/src/views/im/home/components/group/GroupMemberGrid.vue
rename to apps/web-antd/src/views/im/home/components/group/group-member-grid.vue
index b4b22194a..e7cc7d6bc 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupMemberGrid.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-member-grid.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from './GroupMember.vue'
+import type { GroupMemberLite } from './group-member.vue'
 
 import { ImFriendAddSource } from '../../../utils/constants'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImGroupMemberGrid' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupMemberItem.vue b/apps/web-antd/src/views/im/home/components/group/group-member-item.vue
similarity index 95%
rename from apps/web-antd/src/views/im/home/components/group/GroupMemberItem.vue
rename to apps/web-antd/src/views/im/home/components/group/group-member-item.vue
index bc3aaf2de..1ed9fa0ad 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupMemberItem.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-member-item.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from './GroupMember.vue'
+import type { GroupMemberLite } from './group-member.vue'
 
 import { computed } from 'vue'
 
@@ -7,7 +7,7 @@ import { DICT_TYPE } from '@vben/constants'
 import { getDictLabel } from '@vben/hooks'
 
 import { ImGroupMemberRole } from '../../../utils/constants'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImGroupMemberItem' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupMemberRemoveDialog.vue b/apps/web-antd/src/views/im/home/components/group/group-member-remove-dialog.vue
similarity index 95%
rename from apps/web-antd/src/views/im/home/components/group/GroupMemberRemoveDialog.vue
rename to apps/web-antd/src/views/im/home/components/group/group-member-remove-dialog.vue
index e898a3167..b81b00374 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupMemberRemoveDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-member-remove-dialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from './GroupMember.vue'
+import type { GroupMemberLite } from './group-member.vue'
 
 import { ref } from 'vue'
 
@@ -7,7 +7,7 @@ import { Button, message, Modal } from 'ant-design-vue'
 
 import { removeGroupMember } from '#/api/im/group/member'
 
-import GroupMemberPickerPanel from '../picker/GroupMemberPickerPanel.vue'
+import { GroupMemberPickerPanel } from '../picker'
 
 defineOptions({ name: 'ImGroupMemberRemoveDialog' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupMember.vue b/apps/web-antd/src/views/im/home/components/group/group-member.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/components/group/GroupMember.vue
rename to apps/web-antd/src/views/im/home/components/group/group-member.vue
index c26922e25..2ae97a22e 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupMember.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-member.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 import { ImFriendAddSource } from '../../../utils/constants'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImGroupMember' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupMuteMemberDialog.vue b/apps/web-antd/src/views/im/home/components/group/group-mute-member-dialog.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/components/group/GroupMuteMemberDialog.vue
rename to apps/web-antd/src/views/im/home/components/group/group-mute-member-dialog.vue
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupOwnerTransferDialog.vue b/apps/web-antd/src/views/im/home/components/group/group-owner-transfer-dialog.vue
similarity index 95%
rename from apps/web-antd/src/views/im/home/components/group/GroupOwnerTransferDialog.vue
rename to apps/web-antd/src/views/im/home/components/group/group-owner-transfer-dialog.vue
index f626b849e..50bda5e96 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupOwnerTransferDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-owner-transfer-dialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from './GroupMember.vue'
+import type { GroupMemberLite } from './group-member.vue'
 
 import { computed, ref } from 'vue'
 
@@ -9,7 +9,7 @@ import { Button, message, Modal } from 'ant-design-vue'
 
 import { transferGroupOwner } from '#/api/im/group'
 
-import GroupMemberPickerPanel from '../picker/GroupMemberPickerPanel.vue'
+import { GroupMemberPickerPanel } from '../picker'
 
 defineOptions({ name: 'ImGroupOwnerTransferDialog' })
 
diff --git a/apps/web-antd/src/views/im/home/components/group/GroupRequestListDialog.vue b/apps/web-antd/src/views/im/home/components/group/group-request-list-dialog.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/components/group/GroupRequestListDialog.vue
rename to apps/web-antd/src/views/im/home/components/group/group-request-list-dialog.vue
index 263bc400a..8a67420d4 100644
--- a/apps/web-antd/src/views/im/home/components/group/GroupRequestListDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/group/group-request-list-dialog.vue
@@ -11,7 +11,7 @@ import { getGroupRequestListByGroupId } from '#/api/im/group/request'
 import { ImGroupRequestHandleResult } from '#/views/im/utils/constants'
 
 import { useGroupRequestStore } from '../../store/groupRequestStore'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImGroupRequestListDialog' })
 
@@ -166,6 +166,7 @@ function updateLocalResult(id: number, handleResult: number) {
     v-model:open="visible"
     title="进群申请"
     width="560px"
+    :footer="null"
     :mask-closable="false"
     class="im-group-request-list__dialog"
   >
diff --git a/apps/web-antd/src/views/im/home/components/group/index.ts b/apps/web-antd/src/views/im/home/components/group/index.ts
new file mode 100644
index 000000000..3e082af8f
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/components/group/index.ts
@@ -0,0 +1,15 @@
+export { default as GroupAdminSetDialog } from './group-admin-set-dialog.vue';
+export { default as GroupAvatar } from './group-avatar.vue';
+export { default as GroupCreateDialog } from './group-create-dialog.vue';
+export { default as GroupInfoCard } from './group-info-card.vue';
+export { default as GroupInfo } from './group-info.vue';
+export { default as GroupItem } from './group-item.vue';
+export { default as GroupMemberAddDialog } from './group-member-add-dialog.vue';
+export { default as GroupMemberGrid } from './group-member-grid.vue';
+export { default as GroupMemberItem } from './group-member-item.vue';
+export { default as GroupMemberRemoveDialog } from './group-member-remove-dialog.vue';
+export { default as GroupMember } from './group-member.vue';
+export type { GroupMemberLite } from './group-member.vue';
+export { default as GroupMuteMemberDialog } from './group-mute-member-dialog.vue';
+export { default as GroupOwnerTransferDialog } from './group-owner-transfer-dialog.vue';
+export { default as GroupRequestListDialog } from './group-request-list-dialog.vue';
diff --git a/apps/web-antd/src/views/im/home/components/index.ts b/apps/web-antd/src/views/im/home/components/index.ts
new file mode 100644
index 000000000..0d65403b1
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/components/index.ts
@@ -0,0 +1,4 @@
+export { default as ContextMenu } from './context-menu.vue';
+export { default as PagedScroller } from './paged-scroller.vue';
+export { default as ResizableAside } from './resizable-aside.vue';
+export { default as ToolBar } from './tool-bar.vue';
diff --git a/apps/web-antd/src/views/im/home/components/PagedScroller.vue b/apps/web-antd/src/views/im/home/components/paged-scroller.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/components/PagedScroller.vue
rename to apps/web-antd/src/views/im/home/components/paged-scroller.vue
index 0177e0d1a..ed1842a2f 100644
--- a/apps/web-antd/src/views/im/home/components/PagedScroller.vue
+++ b/apps/web-antd/src/views/im/home/components/paged-scroller.vue
@@ -11,6 +11,7 @@ const props = withDefaults(
     threshold?: number // 距底多少 px 触发下一页
   }>(),
   {
+    itemKey: undefined,
     pageSize: 30,
     threshold: 30
   }
diff --git a/apps/web-antd/src/views/im/home/components/picker/ConversationPickerPanel.vue b/apps/web-antd/src/views/im/home/components/picker/conversation-picker-panel.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/components/picker/ConversationPickerPanel.vue
rename to apps/web-antd/src/views/im/home/components/picker/conversation-picker-panel.vue
index bfcffacaf..19ef61c26 100644
--- a/apps/web-antd/src/views/im/home/components/picker/ConversationPickerPanel.vue
+++ b/apps/web-antd/src/views/im/home/components/picker/conversation-picker-panel.vue
@@ -9,8 +9,8 @@ import { Input, message } from 'ant-design-vue'
 
 import { ImConversationType } from '../../../utils/constants'
 import { filterConversationsByKeyword, getConversationKey } from '../../../utils/conversation'
-import GroupAvatar from '../group/GroupAvatar.vue'
-import UserAvatar from '../user/UserAvatar.vue'
+import { GroupAvatar } from '../group'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImConversationPickerPanel' })
 
diff --git a/apps/web-antd/src/views/im/home/components/picker/FriendPickerPanel.vue b/apps/web-antd/src/views/im/home/components/picker/friend-picker-panel.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/picker/FriendPickerPanel.vue
rename to apps/web-antd/src/views/im/home/components/picker/friend-picker-panel.vue
index ac1da4ffc..afc330d0e 100644
--- a/apps/web-antd/src/views/im/home/components/picker/FriendPickerPanel.vue
+++ b/apps/web-antd/src/views/im/home/components/picker/friend-picker-panel.vue
@@ -7,10 +7,10 @@ import { IconifyIcon as Icon } from '@vben/icons'
 
 import { Input, message } from 'ant-design-vue'
 
+import { PagedScroller } from '..'
 import { useFriendBuckets } from '../../composables/useFriendBuckets'
 import { useSelectedItems } from '../../composables/useSelectedItems'
-import PagedScroller from '../PagedScroller.vue'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImFriendPickerPanel' })
 
diff --git a/apps/web-antd/src/views/im/home/components/picker/GroupMemberPickerPanel.vue b/apps/web-antd/src/views/im/home/components/picker/group-member-picker-panel.vue
similarity index 96%
rename from apps/web-antd/src/views/im/home/components/picker/GroupMemberPickerPanel.vue
rename to apps/web-antd/src/views/im/home/components/picker/group-member-picker-panel.vue
index ced176c70..a36650d5c 100644
--- a/apps/web-antd/src/views/im/home/components/picker/GroupMemberPickerPanel.vue
+++ b/apps/web-antd/src/views/im/home/components/picker/group-member-picker-panel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from '../group/GroupMember.vue'
+import type { GroupMemberLite } from '../group'
 
 import { computed, ref } from 'vue'
 
@@ -8,11 +8,10 @@ import { IconifyIcon as Icon } from '@vben/icons'
 
 import { Input, message } from 'ant-design-vue'
 
+import { PagedScroller } from '..'
 import { useSelectedItems } from '../../composables/useSelectedItems'
-import GroupMemberGrid from '../group/GroupMemberGrid.vue'
-import GroupMemberItem from '../group/GroupMemberItem.vue'
-import PagedScroller from '../PagedScroller.vue'
-import UserAvatar from '../user/UserAvatar.vue'
+import { GroupMemberGrid, GroupMemberItem } from '../group'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImGroupMemberPickerPanel' })
 
diff --git a/apps/web-antd/src/views/im/home/components/picker/index.ts b/apps/web-antd/src/views/im/home/components/picker/index.ts
new file mode 100644
index 000000000..7a534a832
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/components/picker/index.ts
@@ -0,0 +1,3 @@
+export { default as ConversationPickerPanel } from './conversation-picker-panel.vue';
+export { default as FriendPickerPanel } from './friend-picker-panel.vue';
+export { default as GroupMemberPickerPanel } from './group-member-picker-panel.vue';
diff --git a/apps/web-antd/src/views/im/home/components/ResizableAside.vue b/apps/web-antd/src/views/im/home/components/resizable-aside.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/components/ResizableAside.vue
rename to apps/web-antd/src/views/im/home/components/resizable-aside.vue
diff --git a/apps/web-antd/src/views/im/home/components/rtc/index.ts b/apps/web-antd/src/views/im/home/components/rtc/index.ts
new file mode 100644
index 000000000..fafdd7a7e
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/components/rtc/index.ts
@@ -0,0 +1,8 @@
+export { default as RtcCallContainer } from './rtc-call-container.vue';
+export { default as RtcCallIncoming } from './rtc-call-incoming.vue';
+export { default as RtcCallInviting } from './rtc-call-inviting.vue';
+export { default as RtcCallMemberPickerDialog } from './rtc-call-member-picker-dialog.vue';
+export { default as RtcCallParticipantTile } from './rtc-call-participant-tile.vue';
+export type { CallParticipantVM } from './rtc-call-participant-tile.vue';
+export { default as RtcCallRunning } from './rtc-call-running.vue';
+export { default as RtcGroupCallBanner } from './rtc-group-call-banner.vue';
diff --git a/apps/web-antd/src/views/im/home/components/rtc/RtcCallContainer.vue b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-container.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/rtc/RtcCallContainer.vue
rename to apps/web-antd/src/views/im/home/components/rtc/rtc-call-container.vue
index 1af8381d0..02be58607 100644
--- a/apps/web-antd/src/views/im/home/components/rtc/RtcCallContainer.vue
+++ b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-container.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { CallParticipantVM } from './RtcCallParticipantTile.vue'
+import type { CallParticipantVM } from './rtc-call-participant-tile.vue'
 
 import { computed, ref, watch } from 'vue'
 
@@ -26,10 +26,10 @@ import { getSenderAvatar, getSenderDisplayName } from '#/views/im/utils/user'
 
 import { useLiveKitRoom } from '../../composables/useLiveKitRoom'
 import { useRtcStore } from '../../store/rtcStore'
-import RtcCallIncoming from './RtcCallIncoming.vue'
-import RtcCallInviting from './RtcCallInviting.vue'
-import RtcCallMemberPickerDialog from './RtcCallMemberPickerDialog.vue'
-import RtcCallRunning from './RtcCallRunning.vue'
+import RtcCallIncoming from './rtc-call-incoming.vue'
+import RtcCallInviting from './rtc-call-inviting.vue'
+import RtcCallMemberPickerDialog from './rtc-call-member-picker-dialog.vue'
+import RtcCallRunning from './rtc-call-running.vue'
 
 defineOptions({ name: 'ImRtcCallContainer' })
 
diff --git a/apps/web-antd/src/views/im/home/components/rtc/RtcCallIncoming.vue b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-incoming.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/rtc/RtcCallIncoming.vue
rename to apps/web-antd/src/views/im/home/components/rtc/rtc-call-incoming.vue
index 78c5955da..9be5c0eeb 100644
--- a/apps/web-antd/src/views/im/home/components/rtc/RtcCallIncoming.vue
+++ b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-incoming.vue
@@ -8,7 +8,7 @@ import { getDictLabel } from '@vben/hooks'
 import { IconifyIcon as Icon } from '@vben/icons'
 
 import { useGroupCallMembers } from '../../composables/useGroupCallMembers'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 const props = defineProps<{
   accepting?: boolean
diff --git a/apps/web-antd/src/views/im/home/components/rtc/RtcCallInviting.vue b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-inviting.vue
similarity index 95%
rename from apps/web-antd/src/views/im/home/components/rtc/RtcCallInviting.vue
rename to apps/web-antd/src/views/im/home/components/rtc/rtc-call-inviting.vue
index 699468774..ed92df052 100644
--- a/apps/web-antd/src/views/im/home/components/rtc/RtcCallInviting.vue
+++ b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-inviting.vue
@@ -2,7 +2,7 @@
 import { IconifyIcon as Icon } from '@vben/icons'
 
 import { useMediaStreamElement } from '../../composables/useMediaStreamElement'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 const props = defineProps<{
   cameraEnabled: boolean
@@ -17,9 +17,9 @@ const props = defineProps<{
 
 defineEmits<{
   cancel: []
-  'toggle-camera': []
-  'toggle-mic': []
-  'toggle-speaker': []
+  toggleCamera: []
+  toggleMic: []
+  toggleSpeaker: []
 }>()
 
 const localVideoRef = useMediaStreamElement<HTMLVideoElement>(() => props.localStream)
@@ -61,7 +61,7 @@ const localVideoRef = useMediaStreamElement<HTMLVideoElement>(() => props.localS
     <div class="flex flex-shrink-0 gap-4 justify-around items-center pt-4 px-5 pb-5">
       <div
         class="flex flex-col gap-2 items-center cursor-pointer select-none"
-        @click="$emit('toggle-mic')"
+        @click="$emit('toggleMic')"
       >
         <!-- ant-design 系列里 mic 有 audio-muted-outlined 变体；speaker / camera 没有 muted 变体，off 态借 tabler:*-off 表达斜线 -->
         <span
@@ -91,7 +91,7 @@ const localVideoRef = useMediaStreamElement<HTMLVideoElement>(() => props.localS
       <div
         v-if="isVideo"
         class="flex flex-col gap-2 items-center cursor-pointer select-none"
-        @click="$emit('toggle-camera')"
+        @click="$emit('toggleCamera')"
       >
         <span
           class="flex justify-center items-center w-12 h-12 rounded-full"
@@ -109,7 +109,7 @@ const localVideoRef = useMediaStreamElement<HTMLVideoElement>(() => props.localS
       <div
         v-else
         class="flex flex-col gap-2 items-center cursor-pointer select-none"
-        @click="$emit('toggle-speaker')"
+        @click="$emit('toggleSpeaker')"
       >
         <span
           class="flex justify-center items-center w-12 h-12 rounded-full"
diff --git a/apps/web-antd/src/views/im/home/components/rtc/RtcCallMemberPickerDialog.vue b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
similarity index 96%
rename from apps/web-antd/src/views/im/home/components/rtc/RtcCallMemberPickerDialog.vue
rename to apps/web-antd/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
index ce3830f64..284498749 100644
--- a/apps/web-antd/src/views/im/home/components/rtc/RtcCallMemberPickerDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from '../group/GroupMember.vue'
+import type { GroupMemberLite } from '../group'
 
 import { computed, ref } from 'vue'
 
@@ -8,7 +8,7 @@ import { Button, Modal } from 'ant-design-vue'
 import { getCurrentUserId } from '#/views/im/utils/auth'
 
 import { useGroupStore } from '../../store/groupStore'
-import GroupMemberPickerPanel from '../picker/GroupMemberPickerPanel.vue'
+import { GroupMemberPickerPanel } from '../picker'
 
 defineOptions({ name: 'ImRtcCallMemberPickerDialog' })
 
diff --git a/apps/web-antd/src/views/im/home/components/rtc/RtcCallParticipantTile.vue b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-participant-tile.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/rtc/RtcCallParticipantTile.vue
rename to apps/web-antd/src/views/im/home/components/rtc/rtc-call-participant-tile.vue
index def1b6034..832d77c77 100644
--- a/apps/web-antd/src/views/im/home/components/rtc/RtcCallParticipantTile.vue
+++ b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-participant-tile.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useMediaStreamElement } from '../../composables/useMediaStreamElement'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 export interface CallParticipantVM {
   userId: number
diff --git a/apps/web-antd/src/views/im/home/components/rtc/RtcCallRunning.vue b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-running.vue
similarity index 96%
rename from apps/web-antd/src/views/im/home/components/rtc/RtcCallRunning.vue
rename to apps/web-antd/src/views/im/home/components/rtc/rtc-call-running.vue
index 11c9c8779..84586bfc5 100644
--- a/apps/web-antd/src/views/im/home/components/rtc/RtcCallRunning.vue
+++ b/apps/web-antd/src/views/im/home/components/rtc/rtc-call-running.vue
@@ -6,8 +6,8 @@ import { IconifyIcon as Icon } from '@vben/icons'
 import { formatCallDuration } from '#/views/im/utils/time'
 
 import { useMediaStreamElement } from '../../composables/useMediaStreamElement'
-import UserAvatar from '../user/UserAvatar.vue'
-import RtcCallParticipantTile, { type CallParticipantVM } from './RtcCallParticipantTile.vue'
+import { UserAvatar } from '../user'
+import RtcCallParticipantTile, { type CallParticipantVM } from './rtc-call-participant-tile.vue'
 
 const props = defineProps<{
   cameraEnabled: boolean
@@ -34,12 +34,12 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  'add-member': []
+  addMember: []
   hangup: []
-  'toggle-camera': []
-  'toggle-mic': []
-  'toggle-screen-share': []
-  'toggle-speaker': []
+  toggleCamera: []
+  toggleMic: []
+  toggleScreenShare: []
+  toggleSpeaker: []
 }>()
 
 /** 网格列数；按人数自适应；返回 UnoCSS class 字面量让 JIT 扫描器静态识别 */
@@ -180,7 +180,7 @@ const formattedDuration = computed(() =>
     >
       <div
         class="flex flex-col gap-2 items-center cursor-pointer select-none min-w-[64px]"
-        @click="$emit('toggle-mic')"
+        @click="$emit('toggleMic')"
       >
         <span
           class="flex justify-center items-center w-[52px] h-[52px] rounded-full"
@@ -197,7 +197,7 @@ const formattedDuration = computed(() =>
       </div>
       <div
         class="flex flex-col gap-2 items-center cursor-pointer select-none min-w-[64px]"
-        @click="$emit('toggle-speaker')"
+        @click="$emit('toggleSpeaker')"
       >
         <span
           class="flex justify-center items-center w-[52px] h-[52px] rounded-full"
@@ -216,7 +216,7 @@ const formattedDuration = computed(() =>
       <div
         v-if="isVideo || isGroup"
         class="flex flex-col gap-2 items-center cursor-pointer select-none min-w-[64px]"
-        @click="$emit('toggle-camera')"
+        @click="$emit('toggleCamera')"
       >
         <span
           class="flex justify-center items-center w-[52px] h-[52px] rounded-full"
@@ -235,7 +235,7 @@ const formattedDuration = computed(() =>
       <template v-if="isGroup">
         <div
           class="flex flex-col gap-2 items-center cursor-pointer select-none min-w-[64px]"
-          @click="$emit('toggle-screen-share')"
+          @click="$emit('toggleScreenShare')"
         >
           <span
             class="flex justify-center items-center w-[52px] h-[52px] rounded-full"
@@ -252,7 +252,7 @@ const formattedDuration = computed(() =>
         </div>
         <div
           class="flex flex-col gap-2 items-center cursor-pointer select-none min-w-[64px]"
-          @click="$emit('add-member')"
+          @click="$emit('addMember')"
         >
           <span class="flex justify-center items-center w-[52px] h-[52px] text-white rounded-full bg-white/15">
             <Icon icon="ant-design:plus-outlined" :size="22" />
diff --git a/apps/web-antd/src/views/im/home/components/rtc/RtcGroupCallBanner.vue b/apps/web-antd/src/views/im/home/components/rtc/rtc-group-call-banner.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/components/rtc/RtcGroupCallBanner.vue
rename to apps/web-antd/src/views/im/home/components/rtc/rtc-group-call-banner.vue
index 158a10c0d..19d450cd4 100644
--- a/apps/web-antd/src/views/im/home/components/rtc/RtcGroupCallBanner.vue
+++ b/apps/web-antd/src/views/im/home/components/rtc/rtc-group-call-banner.vue
@@ -12,7 +12,7 @@ import { getCurrentUserId } from '#/views/im/utils/auth'
 
 import { useGroupCallMembers } from '../../composables/useGroupCallMembers'
 import { useRtcStore } from '../../store/rtcStore'
-import UserAvatar from '../user/UserAvatar.vue'
+import { UserAvatar } from '../user'
 
 defineOptions({ name: 'ImRtcGroupCallBanner' })
 
diff --git a/apps/web-antd/src/views/im/home/components/ToolBar.vue b/apps/web-antd/src/views/im/home/components/tool-bar.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/ToolBar.vue
rename to apps/web-antd/src/views/im/home/components/tool-bar.vue
index 828496f42..9c0821eeb 100644
--- a/apps/web-antd/src/views/im/home/components/ToolBar.vue
+++ b/apps/web-antd/src/views/im/home/components/tool-bar.vue
@@ -10,7 +10,7 @@ import { Badge } from 'ant-design-vue'
 import { useConversationStore } from '../store/conversationStore'
 import { useFriendStore } from '../store/friendStore'
 import { useImUiStore } from '../store/uiStore'
-import UserAvatar from './user/UserAvatar.vue'
+import { UserAvatar } from './user'
 
 defineOptions({ name: 'ImToolBar' })
 
diff --git a/apps/web-antd/src/views/im/home/components/user/index.ts b/apps/web-antd/src/views/im/home/components/user/index.ts
new file mode 100644
index 000000000..d25750ed9
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/components/user/index.ts
@@ -0,0 +1,5 @@
+export { default as RecommendCardDialog } from './recommend-card-dialog.vue';
+export { default as UserAvatar } from './user-avatar.vue';
+export { default as UserInfoCard } from './user-info-card.vue';
+export { default as UserInfo } from './user-info.vue';
+export type { UserInfoRelation } from './user-info.vue';
diff --git a/apps/web-antd/src/views/im/home/components/user/RecommendCardDialog.vue b/apps/web-antd/src/views/im/home/components/user/recommend-card-dialog.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/components/user/RecommendCardDialog.vue
rename to apps/web-antd/src/views/im/home/components/user/recommend-card-dialog.vue
index 93c9fd203..07ef6fb3a 100644
--- a/apps/web-antd/src/views/im/home/components/user/RecommendCardDialog.vue
+++ b/apps/web-antd/src/views/im/home/components/user/recommend-card-dialog.vue
@@ -8,7 +8,7 @@ import { IconifyIcon as Icon } from '@vben/icons'
 import { Button, Input, message, Modal } from 'ant-design-vue'
 
 import { createGroup } from '#/api/im/group'
-import CardBubble from '#/views/im/home/components/card/CardBubble.vue'
+import { CardBubble } from '#/views/im/home/components/card'
 
 import { ImContentType, ImConversationType, isGroupConversation } from '../../../utils/constants'
 import { getConversationKey } from '../../../utils/conversation'
@@ -16,12 +16,12 @@ import { buildDefaultGroupName } from '../../../utils/group'
 import { type CardTarget, serializeMessage } from '../../../utils/message'
 import { isGroupQuit } from '../../../utils/user'
 import { useMessageSender } from '../../composables/useMessageSender'
-import FacePicker from '../../pages/conversation/components/input/FacePicker.vue'
+import { FacePicker } from '../../pages/conversation/components/input'
 import { useConversationStore } from '../../store/conversationStore'
 import { useFriendStore } from '../../store/friendStore'
 import { useGroupStore } from '../../store/groupStore'
-import ConversationPickerPanel from '../picker/ConversationPickerPanel.vue'
-import FriendPickerPanel from '../picker/FriendPickerPanel.vue'
+import { ConversationPickerPanel } from '../picker'
+import { FriendPickerPanel } from '../picker'
 
 defineOptions({ name: 'ImRecommendCardDialog' })
 
@@ -222,6 +222,7 @@ async function handleCreateGroupAndSend() {
     v-model:open="visible"
     width="720px"
     :mask-closable="false"
+    :footer="view === 'conversation' ? null : undefined"
     class="im-picker-dialog im-recommend-dialog"
   >
     <template #header>
diff --git a/apps/web-antd/src/views/im/home/components/user/UserAvatar.vue b/apps/web-antd/src/views/im/home/components/user/user-avatar.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/components/user/UserAvatar.vue
rename to apps/web-antd/src/views/im/home/components/user/user-avatar.vue
index 812518601..de5f633b4 100644
--- a/apps/web-antd/src/views/im/home/components/user/UserAvatar.vue
+++ b/apps/web-antd/src/views/im/home/components/user/user-avatar.vue
@@ -26,11 +26,16 @@ const props = withDefaults(
     user?: User // 额外的用户信息，传了点击就不用现拉接口（弹名片用）
   }>(),
   {
-    size: 42,
-    radius: '15%',
+    addSourceExtra: undefined,
     clickable: true,
+    id: undefined,
+    name: undefined,
     previewable: false,
     previewZIndex: 2000,
+    radius: '15%',
+    size: 42,
+    url: undefined,
+    user: undefined,
     addSource: ImFriendAddSource.SEARCH
   }
 )
diff --git a/apps/web-antd/src/views/im/home/components/user/UserInfoCard.vue b/apps/web-antd/src/views/im/home/components/user/user-info-card.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/components/user/UserInfoCard.vue
rename to apps/web-antd/src/views/im/home/components/user/user-info-card.vue
index ff212461c..ec33489ed 100644
--- a/apps/web-antd/src/views/im/home/components/user/UserInfoCard.vue
+++ b/apps/web-antd/src/views/im/home/components/user/user-info-card.vue
@@ -9,7 +9,7 @@ import { getFriendDisplayName } from '../../../utils/user'
 import { useConversationStore } from '../../store/conversationStore'
 import { useFriendStore } from '../../store/friendStore'
 import { useImUiStore } from '../../store/uiStore'
-import UserInfo, { type UserInfoRelation } from './UserInfo.vue'
+import UserInfo, { type UserInfoRelation } from './user-info.vue'
 
 defineOptions({ name: 'ImUserInfoCard' })
 
diff --git a/apps/web-antd/src/views/im/home/components/user/UserInfo.vue b/apps/web-antd/src/views/im/home/components/user/user-info.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/components/user/UserInfo.vue
rename to apps/web-antd/src/views/im/home/components/user/user-info.vue
index 37cc44d10..d4f6ca42f 100644
--- a/apps/web-antd/src/views/im/home/components/user/UserInfo.vue
+++ b/apps/web-antd/src/views/im/home/components/user/user-info.vue
@@ -17,9 +17,9 @@ import { ImFriendAddSource } from '../../../utils/constants'
 import { toUserCardTarget } from '../../../utils/message'
 import { getGenderColor, getGenderIcon } from '../../../utils/user'
 import { useFriendStore } from '../../store/friendStore'
-import FriendAddDialog from '../friend/FriendAddDialog.vue'
-import RecommendCardDialog from './RecommendCardDialog.vue'
-import UserAvatar from './UserAvatar.vue'
+import { FriendAddDialog } from '../friend'
+import RecommendCardDialog from './recommend-card-dialog.vue'
+import UserAvatar from './user-avatar.vue'
 
 defineOptions({ name: 'ImUserInfo' })
 
diff --git a/apps/web-antd/src/views/im/home/composables/useFriendBuckets.ts b/apps/web-antd/src/views/im/home/composables/useFriendBuckets.ts
index 24340b840..9b2ad1acc 100644
--- a/apps/web-antd/src/views/im/home/composables/useFriendBuckets.ts
+++ b/apps/web-antd/src/views/im/home/composables/useFriendBuckets.ts
@@ -73,12 +73,11 @@ export function useFriendBuckets(
     const map = new Map<string, FriendLite[]>()
     for (const friend of filtered.value) {
       const letter = getBucketLetter(friend)
-      if (!map.has(letter)) {
-        map.set(letter, [])
-      }
-      map.get(letter)!.push(friend)
+      const bucket = map.get(letter) ?? []
+      bucket.push(friend)
+      map.set(letter, bucket)
     }
-    const letters = [...map.keys()].sort((a, b) => {
+    const letters = [...map.keys()].toSorted((a, b) => {
       // '#' 永远排末尾，A-Z 走 localeCompare
       if (a === '#') {
         return 1
@@ -90,7 +89,9 @@ export function useFriendBuckets(
     })
     return letters.map((letter) => ({
       letter,
-      list: map.get(letter)!.sort((a, b) => getSortKey(a).localeCompare(getSortKey(b)))
+      list: (map.get(letter) ?? []).toSorted((a, b) =>
+        getSortKey(a).localeCompare(getSortKey(b))
+      )
     }))
   })
 
diff --git a/apps/web-antd/src/views/im/home/composables/useMessagePuller.ts b/apps/web-antd/src/views/im/home/composables/useMessagePuller.ts
index 887861a3e..59994b94c 100644
--- a/apps/web-antd/src/views/im/home/composables/useMessagePuller.ts
+++ b/apps/web-antd/src/views/im/home/composables/useMessagePuller.ts
@@ -248,7 +248,7 @@ export const useMessagePuller = () => {
     })
   }
 
-  /** 同一时刻只允许一次 pull：Index.vue 的手动调用与重连 watch 触发可能并发，共用同一个 promise 即可去重 */
+  /** 同一时刻只允许一次 pull：index.vue 的手动调用与重连 watch 触发可能并发，共用同一个 promise 即可去重 */
   let pullPromise: null | Promise<void> = null
   let pullAbortController: AbortController | null = null
 
@@ -267,7 +267,7 @@ export const useMessagePuller = () => {
    */
   let pullEpoch = 0
 
-  /** 显式取消：仅由 Index.vue onUnmounted（离开 IM / 切账号 / 路由跳出）调用 */
+  /** 显式取消：仅由 index.vue onUnmounted（离开 IM / 切账号 / 路由跳出）调用 */
   const cancelPull = () => {
     pullEpoch++
     pullAbortController?.abort()
@@ -391,7 +391,7 @@ export const useMessagePuller = () => {
         conversationStore.sortConversationList()
 
         // 重连 / 冷启动后补齐当前激活私聊会话的「对方已读位置」
-        // 离线期间错过的 RECEIPT 推送会被这里补回；其他私聊会话等用户点开时由 Index.vue 的 watch 触发
+        // 离线期间错过的 RECEIPT 推送会被这里补回；其他私聊会话等用户点开时由 index.vue 的 watch 触发
         // 私聊已读关闭时跳过，避免打到已禁用接口触发错误日志
         const active = conversationStore.activeConversation
         if (MESSAGE_PRIVATE_READ_ENABLED && active && active.type === ImConversationType.PRIVATE) {
@@ -438,7 +438,7 @@ export const useMessagePuller = () => {
 
   /**
    * 断网期间 WS 收不到推送：重连后既要按 minId 补齐消息，也要按 update_time + id 补齐好友 / 群 / 群申请状态。
-   * 首次连接由 Index.vue 显式驱动（pullOnce 拉消息 + 各 store 首拉），这里仅覆盖之后的重连。
+   * 首次连接由 index.vue 显式驱动（pullOnce 拉消息 + 各 store 首拉），这里仅覆盖之后的重连。
    * 重连时 store 已就位，pullStateEvents 与 pullOnce 并发即可，无需「先就位再拉消息」的首登顺序约束。
    */
   watch(
diff --git a/apps/web-antd/src/views/im/home/composables/useMessageSender.ts b/apps/web-antd/src/views/im/home/composables/useMessageSender.ts
index 72d5b84c8..e7899aae1 100644
--- a/apps/web-antd/src/views/im/home/composables/useMessageSender.ts
+++ b/apps/web-antd/src/views/im/home/composables/useMessageSender.ts
@@ -187,7 +187,7 @@ export const useMessageSender = () => {
   }
 
   /**
-   * 发送文本消息（最常用的快捷入口）：MessageInput.vue 文本回车走这里
+   * 发送文本消息（最常用的快捷入口）：message-input.vue 文本回车走这里
    * 返回值：成功 true / 失败 false / 空文本 false（与 sendRaw 对齐，转发场景按返回值判断）
    */
   const send = async (text: string, options?: SendExtOptions): Promise<boolean> => {
diff --git a/apps/web-antd/src/views/im/home/index.vue b/apps/web-antd/src/views/im/home/index.vue
index f0e2522cd..fa474ab22 100644
--- a/apps/web-antd/src/views/im/home/index.vue
+++ b/apps/web-antd/src/views/im/home/index.vue
@@ -8,11 +8,10 @@ import { preferences } from '@vben/preferences'
 
 import { ImConversationType } from '../utils/constants'
 import { initDb, stopRequests, StorageKeys } from '../utils/db'
-import ContextMenu from './components/ContextMenu.vue'
-import GroupInfoCard from './components/group/GroupInfoCard.vue'
-import RtcCallContainer from './components/rtc/RtcCallContainer.vue'
-import ToolBar from './components/ToolBar.vue'
-import UserInfoCard from './components/user/UserInfoCard.vue'
+import { ContextMenu, ToolBar } from './components'
+import { GroupInfoCard } from './components/group'
+import { RtcCallContainer } from './components/rtc'
+import { UserInfoCard } from './components/user'
 import { useMessagePuller } from './composables/useMessagePuller'
 import { useMessageSender } from './composables/useMessageSender'
 import { useVoicePlayer } from './composables/useVoicePlayer'
@@ -209,7 +208,9 @@ watch(
     - 右侧 <router-view>：按路由渲染 MessagePage / FriendPage / GroupPage
     - 挂载全局弹层：UserInfoCard / GroupInfoCard / ContextMenu
   -->
-  <div class="im-home flex w-full h-full overflow-hidden">
+  <div
+    class="im-home flex w-full h-full overflow-hidden bg-[var(--ant-color-bg-layout)] text-[var(--ant-color-text)]"
+  >
     <ToolBar />
     <!--
       keep-alive 缓存子页面：
@@ -237,10 +238,54 @@ watch(
 :global(:root) {
   --im-border-color-lighter: #e8eaed;
   --im-resize-line-color: #d8dde5;
+
+  /*
+   * antd 4.x 不输出 --ant-color-* 全局 CSS 变量（仅 React antd 的 theme.cssVar 支持），
+   * 而 IM 聊天端大量直接使用 var(--ant-color-*)。此处用 Vben design token 兜底定义，
+   * 映射规则与 useAntdDesignTokens 喂给 antd 的 token 完全一致，随主题（亮/暗）自动切换。
+   * 缺失时这些变量为空 → 背景透明、边框/填充失效（典型：表情面板透出输入框占位文字）。
+   */
+  --ant-color-bg-container: hsl(var(--card));
+  --ant-color-bg-elevated: hsl(var(--popover));
+  --ant-color-bg-layout: hsl(var(--background-deep));
+  --ant-color-border: hsl(var(--border));
+  --ant-color-border-secondary: hsl(var(--border));
+  --ant-color-text: hsl(var(--foreground));
+  --ant-color-text-secondary: hsl(var(--foreground) / 65%);
+  --ant-color-text-placeholder: hsl(var(--foreground) / 45%);
+  --ant-color-text-disabled: hsl(var(--foreground) / 30%);
+  /*
+   * fill 系列：浅色下用 Element Plus 风格的「冷调浅灰实色」而非半透明深色，
+   * 否则面板（会话列表 / 消息面板等）叠在灰底上会显脏发暗，和 Vue3+EP 的干净白差距明显。
+   * 取值依组件实际用法：secondary 多用于面板底（取最浅，对齐 EP --el-bg-color-page #f5f7fa），
+   * tertiary 多用于 hover / 图标块（比面板略深，保证 hover 可见）。深色在 .dark 里另行覆盖。
+   */
+  --ant-color-fill: #e2e6ec;
+  --ant-color-fill-secondary: #f4f6f9;
+  --ant-color-fill-tertiary: #eaedf2;
+  --ant-color-fill-dark: #d5dae2;
+  --ant-color-primary: hsl(var(--primary));
+  --ant-color-primary-hover: hsl(var(--primary) / 80%);
+  --ant-color-primary-bg: hsl(var(--primary) / 12%);
+  --ant-color-primary-bg-hover: hsl(var(--primary) / 18%);
+  --ant-color-info: hsl(var(--primary));
+  --ant-color-success: hsl(var(--success));
+  --ant-color-success-bg: hsl(var(--success) / 12%);
+  --ant-color-success-bg-hover: hsl(var(--success) / 18%);
+  --ant-color-warning: hsl(var(--warning));
+  --ant-color-warning-bg: hsl(var(--warning) / 12%);
+  --ant-color-warning-bg-hover: hsl(var(--warning) / 18%);
+  --ant-color-error: hsl(var(--destructive));
 }
 
 :global(.dark) {
   --im-border-color-lighter: rgb(255 255 255 / 12%);
   --im-resize-line-color: rgb(255 255 255 / 18%);
+
+  /* 深色下 fill 回到「基于前景色的半透明亮色」，叠在深底上得到自然的微亮表面 */
+  --ant-color-fill: hsl(var(--foreground) / 12%);
+  --ant-color-fill-secondary: hsl(var(--foreground) / 8%);
+  --ant-color-fill-tertiary: hsl(var(--foreground) / 4%);
+  --ant-color-fill-dark: hsl(var(--foreground) / 18%);
 }
 </style>
diff --git a/apps/web-antd/src/views/im/home/pages/contact/FriendList.vue b/apps/web-antd/src/views/im/home/pages/contact/friend-list.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/pages/contact/FriendList.vue
rename to apps/web-antd/src/views/im/home/pages/contact/friend-list.vue
index a4c788e56..6fa0dbc98 100644
--- a/apps/web-antd/src/views/im/home/pages/contact/FriendList.vue
+++ b/apps/web-antd/src/views/im/home/pages/contact/friend-list.vue
@@ -5,7 +5,7 @@ import { ref, toRef } from 'vue'
 
 import { IconifyIcon as Icon } from '@vben/icons'
 
-import FriendItem from '../../components/friend/FriendItem.vue'
+import { FriendItem } from '../../components/friend'
 import { useFriendBuckets } from '../../composables/useFriendBuckets'
 
 defineOptions({ name: 'ImContactFriendList' })
diff --git a/apps/web-antd/src/views/im/home/pages/contact/FriendRequestDetail.vue b/apps/web-antd/src/views/im/home/pages/contact/friend-request-detail.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/contact/FriendRequestDetail.vue
rename to apps/web-antd/src/views/im/home/pages/contact/friend-request-detail.vue
index 8b81aa3e4..5a7911ad3 100644
--- a/apps/web-antd/src/views/im/home/pages/contact/FriendRequestDetail.vue
+++ b/apps/web-antd/src/views/im/home/pages/contact/friend-request-detail.vue
@@ -12,8 +12,8 @@ import { Button, Input, message } from 'ant-design-vue'
 import { getCurrentUserId } from '#/views/im/utils/auth'
 
 import { ImFriendRequestHandleResult } from '../../../utils/constants'
-import UserAvatar from '../../components/user/UserAvatar.vue'
-import UserInfo from '../../components/user/UserInfo.vue'
+import { UserAvatar } from '../../components/user'
+import { UserInfo } from '../../components/user'
 import { useFriendStore } from '../../store/friendStore'
 
 defineOptions({ name: 'ImContactFriendRequestDetail' })
diff --git a/apps/web-antd/src/views/im/home/pages/contact/FriendRequestList.vue b/apps/web-antd/src/views/im/home/pages/contact/friend-request-list.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/contact/FriendRequestList.vue
rename to apps/web-antd/src/views/im/home/pages/contact/friend-request-list.vue
index 3fc1f8411..1bd179996 100644
--- a/apps/web-antd/src/views/im/home/pages/contact/FriendRequestList.vue
+++ b/apps/web-antd/src/views/im/home/pages/contact/friend-request-list.vue
@@ -11,7 +11,7 @@ import { Badge } from 'ant-design-vue'
 
 import { getCurrentUserId } from '#/views/im/utils/auth'
 
-import UserAvatar from '../../components/user/UserAvatar.vue'
+import { UserAvatar } from '../../components/user'
 import { useFriendStore } from '../../store/friendStore'
 
 defineOptions({ name: 'ImContactFriendRequestList' })
diff --git a/apps/web-antd/src/views/im/home/pages/contact/GroupDetail.vue b/apps/web-antd/src/views/im/home/pages/contact/group-detail.vue
similarity index 90%
rename from apps/web-antd/src/views/im/home/pages/contact/GroupDetail.vue
rename to apps/web-antd/src/views/im/home/pages/contact/group-detail.vue
index 7812cfb54..e93bb356e 100644
--- a/apps/web-antd/src/views/im/home/pages/contact/GroupDetail.vue
+++ b/apps/web-antd/src/views/im/home/pages/contact/group-detail.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { GroupLite } from '../../types'
 
-import GroupInfo from '../../components/group/GroupInfo.vue'
+import { GroupInfo } from '../../components/group'
 
 defineOptions({ name: 'ImContactGroupDetail' })
 
diff --git a/apps/web-antd/src/views/im/home/pages/contact/GroupList.vue b/apps/web-antd/src/views/im/home/pages/contact/group-list.vue
similarity index 96%
rename from apps/web-antd/src/views/im/home/pages/contact/GroupList.vue
rename to apps/web-antd/src/views/im/home/pages/contact/group-list.vue
index 418220b63..8b094f791 100644
--- a/apps/web-antd/src/views/im/home/pages/contact/GroupList.vue
+++ b/apps/web-antd/src/views/im/home/pages/contact/group-list.vue
@@ -5,7 +5,7 @@ import { computed, ref } from 'vue'
 
 import { IconifyIcon as Icon } from '@vben/icons'
 
-import GroupItem from '../../components/group/GroupItem.vue'
+import { GroupItem } from '../../components/group'
 
 defineOptions({ name: 'ImContactGroupList' })
 
diff --git a/apps/web-antd/src/views/im/home/pages/contact/index.vue b/apps/web-antd/src/views/im/home/pages/contact/index.vue
index c0245519f..949e2082f 100644
--- a/apps/web-antd/src/views/im/home/pages/contact/index.vue
+++ b/apps/web-antd/src/views/im/home/pages/contact/index.vue
@@ -12,16 +12,16 @@ import { Input, message } from 'ant-design-vue'
 import { ImConversationType } from '../../../utils/constants'
 import { StorageKeys } from '../../../utils/db'
 import { getFriendDisplayName, getGroupDisplayName, isGroupQuit } from '../../../utils/user'
-import ResizableAside from '../../components/ResizableAside.vue'
-import UserInfo from '../../components/user/UserInfo.vue'
+import { ResizableAside } from '../../components'
+import { UserInfo } from '../../components/user'
 import { useConversationStore } from '../../store/conversationStore'
 import { useFriendStore } from '../../store/friendStore'
 import { useGroupStore } from '../../store/groupStore'
-import FriendList from './FriendList.vue'
-import FriendRequestDetail from './FriendRequestDetail.vue'
-import FriendRequestList from './FriendRequestList.vue'
-import GroupDetail from './GroupDetail.vue'
-import GroupList from './GroupList.vue'
+import FriendList from './friend-list.vue'
+import FriendRequestDetail from './friend-request-detail.vue'
+import FriendRequestList from './friend-request-list.vue'
+import GroupDetail from './group-detail.vue'
+import GroupList from './group-list.vue'
 
 defineOptions({ name: 'ImContactPage' })
 
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationGroupSide.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationGroupSide.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
index 31ad68448..1260e777c 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationGroupSide.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-group-side.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from '../../../../components/group/GroupMember.vue'
+import type { GroupMemberLite } from '../../../../components/group'
 import type { Conversation, GroupLite } from '../../../../types'
 
 import { computed, ref, watch } from 'vue'
@@ -21,13 +21,13 @@ import { ImConversationType, ImGroupMemberRole } from '#/views/im/utils/constant
 import { toGroupCardTarget } from '#/views/im/utils/message'
 import { isGroupQuit } from '#/views/im/utils/user'
 
-import GroupAdminSetDialog from '../../../../components/group/GroupAdminSetDialog.vue'
-import GroupMemberAddDialog from '../../../../components/group/GroupMemberAddDialog.vue'
-import GroupMemberGrid from '../../../../components/group/GroupMemberGrid.vue'
-import GroupMemberRemoveDialog from '../../../../components/group/GroupMemberRemoveDialog.vue'
-import GroupOwnerTransferDialog from '../../../../components/group/GroupOwnerTransferDialog.vue'
-import GroupRequestListDialog from '../../../../components/group/GroupRequestListDialog.vue'
-import RecommendCardDialog from '../../../../components/user/RecommendCardDialog.vue'
+import { GroupAdminSetDialog } from '../../../../components/group'
+import { GroupMemberAddDialog } from '../../../../components/group'
+import { GroupMemberGrid } from '../../../../components/group'
+import { GroupMemberRemoveDialog } from '../../../../components/group'
+import { GroupOwnerTransferDialog } from '../../../../components/group'
+import { GroupRequestListDialog } from '../../../../components/group'
+import { RecommendCardDialog } from '../../../../components/user'
 import { useConversationStore } from '../../../../store/conversationStore'
 import { useGroupStore } from '../../../../store/groupStore'
 
@@ -827,7 +827,8 @@ function handleOpenTransferOwner() {
   border-top: 1px solid var(--im-border-color-lighter);
 }
 
-:global(.dark) .im-conversation-group-side__modal {
+/* 整体放进 :global()，避免 Vue scoped 把 `:global(.dark) .xxx` 塌缩成裸 `.dark` 而把变量刷到 <html> */
+:global(.dark .im-conversation-group-side__modal) {
   --im-conversation-side-bg: rgb(255 255 255 / 5%);
 }
 </style>
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
index c6e9ab25a..938146e67 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
@@ -13,8 +13,8 @@ import { formatConversationTime } from '#/views/im/utils/time'
 import { getSenderDisplayName } from '#/views/im/utils/user'
 
 import { ImContentType, ImConversationType, isNormalMessage } from '../../../../../utils/constants'
-import GroupAvatar from '../../../../components/group/GroupAvatar.vue'
-import UserAvatar from '../../../../components/user/UserAvatar.vue'
+import { GroupAvatar } from '../../../../components/group'
+import { UserAvatar } from '../../../../components/user'
 import { useConversationStore } from '../../../../store/conversationStore'
 import { useFriendStore } from '../../../../store/friendStore'
 import { useGroupRequestStore } from '../../../../store/groupRequestStore'
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationPrivateSide.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationPrivateSide.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
index 41aa209fd..c9742c241 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/ConversationPrivateSide.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-private-side.vue
@@ -13,8 +13,8 @@ import { useGroupStore } from '#/views/im/home/store/groupStore'
 import { ImConversationType } from '#/views/im/utils/constants'
 import { getFriendDisplayName } from '#/views/im/utils/user'
 
-import GroupCreateDialog from '../../../../components/group/GroupCreateDialog.vue'
-import UserAvatar from '../../../../components/user/UserAvatar.vue'
+import { GroupCreateDialog } from '../../../../components/group'
+import { UserAvatar } from '../../../../components/user'
 
 defineOptions({ name: 'ImConversationPrivateSide' })
 
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/index.ts b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/index.ts
new file mode 100644
index 000000000..97c89acc1
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/index.ts
@@ -0,0 +1,3 @@
+export { default as ConversationGroupSide } from './conversation-group-side.vue';
+export { default as ConversationItem } from './conversation-item.vue';
+export { default as ConversationPrivateSide } from './conversation-private-side.vue';
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/index.ts b/apps/web-antd/src/views/im/home/pages/conversation/components/index.ts
new file mode 100644
index 000000000..9d4f6d45d
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/index.ts
@@ -0,0 +1,3 @@
+export * from './conversation';
+export * from './input';
+export * from './message';
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/input/FacePicker.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/input/face-picker.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/input/FacePicker.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/input/face-picker.vue
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/input/index.ts b/apps/web-antd/src/views/im/home/pages/conversation/components/input/index.ts
new file mode 100644
index 000000000..f48ba3700
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/input/index.ts
@@ -0,0 +1,5 @@
+export { default as FacePicker } from './face-picker.vue';
+export { default as MentionPicker } from './mention-picker.vue';
+export { default as MessageInput } from './message-input.vue';
+export { default as MessageMultiSelectBar } from './message-multi-select-bar.vue';
+export { default as VoiceRecorder } from './voice-recorder.vue';
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/input/MentionPicker.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/input/mention-picker.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/input/MentionPicker.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/input/mention-picker.vue
index 6d9405a97..760f96991 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/input/MentionPicker.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/input/mention-picker.vue
@@ -7,7 +7,7 @@ import { IconifyIcon as Icon } from '@vben/icons'
 import { getCurrentUserId } from '#/views/im/utils/auth'
 import { IM_AT_ALL_NICKNAME, IM_AT_ALL_USER_ID } from '#/views/im/utils/constants'
 
-import GroupMember, { type GroupMemberLite } from '../../../../components/group/GroupMember.vue'
+import { GroupMember, type GroupMemberLite } from '../../../../components/group'
 
 defineOptions({ name: 'ImMentionPicker' })
 
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/input/MessageInput.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/input/message-input.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/input/MessageInput.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/input/message-input.vue
index 507503536..2f5be45d1 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/input/MessageInput.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/input/message-input.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from '../../../../components/group/GroupMember.vue'
+import type { GroupMemberLite } from '../../../../components/group'
 
 import type { Conversation } from '#/views/im/home/types'
 
@@ -8,7 +8,7 @@ import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from
 import { IconifyIcon as Icon } from '@vben/icons'
 import { isOpenableUrl } from '@vben/utils'
 
-import { Button, Dropdown, Menu, message, Tooltip } from 'ant-design-vue'
+import { Button, DropdownButton, Menu, message, Tooltip } from 'ant-design-vue'
 
 import { uploadFile } from '#/api/infra/file'
 import {
@@ -32,10 +32,10 @@ import {
 } from '#/views/im/utils/message'
 import { getMemberDisplayName } from '#/views/im/utils/user'
 
-import ReplyPreview from '../message/ReplyPreview.vue'
-import FacePicker from './FacePicker.vue'
-import MentionPicker from './MentionPicker.vue'
-import VoiceRecorder from './VoiceRecorder.vue'
+import { ReplyPreview } from '../message'
+import FacePicker from './face-picker.vue'
+import MentionPicker from './mention-picker.vue'
+import VoiceRecorder from './voice-recorder.vue'
 
 defineOptions({ name: 'ImMessageInput' })
 
@@ -1110,9 +1110,9 @@ async function onVideoPicked(e: Event) {
         </div>
 
         <!-- 群聊 + 群已读开启：发送按钮 + ▼ 下拉菜单（点主按钮普通发送 / 点 ▼ 选「发送回执消息」），对齐微信 PC -->
-        <Dropdown
+        <!-- 注意：ant-design-vue 的分裂按钮是 DropdownButton（非 Dropdown 的 split-button 属性，那是 Element Plus 写法） -->
+        <DropdownButton
           v-if="isGroup && MESSAGE_GROUP_READ_ENABLED"
-          split-button
           type="primary"
           :disabled="!canSend"
           @click="handleSend()"
@@ -1123,7 +1123,7 @@ async function onVideoPicked(e: Event) {
               <Menu.Item key="receipt">发送回执消息</Menu.Item>
             </Menu>
           </template>
-        </Dropdown>
+        </DropdownButton>
         <!-- 私聊或群已读关闭：普通发送按钮（无群回执入口） -->
         <Button v-else type="primary" :disabled="!canSend" @click="handleSend()">
           发 送
@@ -1186,13 +1186,16 @@ async function onVideoPicked(e: Event) {
   border-color: #ffa39e;
 }
 
-:global(.dark) .message-input__mute-overlay--warning {
+/* 注意：必须把 .dark 与目标类整体放进 :global()，否则 Vue scoped 编译会把
+   `:global(.dark) .xxx` 错误塌缩成裸 `.dark`，导致这些颜色被直接刷到 <html> 上
+   （暗色下整页发红/发暗黄）。BEM 类名唯一，整体 global 不会误伤其它元素。 */
+:global(.dark .message-input__mute-overlay--warning) {
   color: #ffd666;
   background: rgb(77 56 21 / 88%);
   border-color: #ad6800;
 }
 
-:global(.dark) .message-input__mute-overlay--error {
+:global(.dark .message-input__mute-overlay--error) {
   color: #ff7875;
   background: rgb(91 33 33 / 88%);
   border-color: #a8071a;
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/input/MessageMultiSelectBar.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/input/message-multi-select-bar.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/input/MessageMultiSelectBar.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/input/message-multi-select-bar.vue
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/input/voice-recorder.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/input/voice-recorder.vue
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/index.ts b/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/index.ts
new file mode 100644
index 000000000..5e83f77c4
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/index.ts
@@ -0,0 +1,2 @@
+export { default as MessageForwardDialog } from './message-forward-dialog.vue';
+export { default as MessageMergeDetailDialog } from './message-merge-detail-dialog.vue';
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/MessageForwardDialog.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/message-forward-dialog.vue
similarity index 98%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/MessageForwardDialog.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/message-forward-dialog.vue
index 84e2157a1..8efd97187 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/MessageForwardDialog.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/message-forward-dialog.vue
@@ -8,8 +8,8 @@ import { IconifyIcon as Icon } from '@vben/icons'
 import { Button, Input, message, Modal } from 'ant-design-vue'
 
 import { createGroup } from '#/api/im/group'
-import ConversationPickerPanel from '#/views/im/home/components/picker/ConversationPickerPanel.vue'
-import FriendPickerPanel from '#/views/im/home/components/picker/FriendPickerPanel.vue'
+import { ConversationPickerPanel } from '#/views/im/home/components/picker'
+import { FriendPickerPanel } from '#/views/im/home/components/picker'
 import { useMessageMultiSelect } from '#/views/im/home/composables/useMessageMultiSelect'
 import { useMessageSender } from '#/views/im/home/composables/useMessageSender'
 import { useConversationStore } from '#/views/im/home/store/conversationStore'
@@ -31,7 +31,7 @@ import {
 } from '#/views/im/utils/message'
 import { isGroupQuit } from '#/views/im/utils/user'
 
-import FacePicker from '../../input/FacePicker.vue'
+import { FacePicker } from '../../input'
 
 defineOptions({ name: 'ImMessageForwardDialog' })
 
@@ -304,6 +304,7 @@ async function handleCreateGroupAndSend() {
     v-model:open="visible"
     width="720px"
     :mask-closable="false"
+    :footer="view === 'conversation' ? null : undefined"
     class="im-picker-dialog im-forward-dialog"
   >
     <template #header>
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/MessageMergeDetailDialog.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
similarity index 96%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/MessageMergeDetailDialog.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
index b393fb172..80e093a37 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/MessageMergeDetailDialog.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/forward/message-merge-detail-dialog.vue
@@ -5,12 +5,12 @@ import { IconifyIcon as Icon } from '@vben/icons'
 
 import { Modal } from 'ant-design-vue'
 
-import UserAvatar from '#/views/im/home/components/user/UserAvatar.vue'
+import { UserAvatar } from '#/views/im/home/components/user'
 import { useVoicePlayer } from '#/views/im/home/composables/useVoicePlayer'
 import { type MergeMessage, parseMessage } from '#/views/im/utils/message'
 import { formatMergeItemTime } from '#/views/im/utils/time'
 
-import MessageBubble from '../MessageBubble.vue'
+import { MessageBubble } from '..'
 
 defineOptions({ name: 'ImMessageMergeDetailDialog' })
 
@@ -60,6 +60,7 @@ function handleClose() {
   <Modal
     v-model:open="visible"
     width="560px"
+    :footer="null"
     :mask-closable="false"
     class="im-merge-detail-dialog"
     :closable="true"
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/GroupPinnedMessage.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/group-pinned-message.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/GroupPinnedMessage.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/group-pinned-message.vue
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/GroupRequestPending.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/group-request-pending.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/GroupRequestPending.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/group-request-pending.vue
index 235fde340..4c401d7ee 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/GroupRequestPending.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/group-request-pending.vue
@@ -6,7 +6,7 @@ import { IconifyIcon as Icon } from '@vben/icons'
 import { getCurrentUserId } from '#/views/im/utils/auth'
 import { ImGroupMemberRole } from '#/views/im/utils/constants'
 
-import GroupRequestListDialog from '../../../../components/group/GroupRequestListDialog.vue'
+import { GroupRequestListDialog } from '../../../../components/group'
 import { useGroupRequestStore } from '../../../../store/groupRequestStore'
 import { useGroupStore } from '../../../../store/groupStore'
 
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/index.ts b/apps/web-antd/src/views/im/home/pages/conversation/components/message/index.ts
new file mode 100644
index 000000000..025a74cc3
--- /dev/null
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/index.ts
@@ -0,0 +1,10 @@
+export { default as GroupPinnedMessage } from './group-pinned-message.vue';
+export { default as GroupRequestPending } from './group-request-pending.vue';
+export { default as MaterialBubble } from './material-bubble.vue';
+export { default as MessageBubble } from './message-bubble.vue';
+export { default as MessageHistory } from './message-history.vue';
+export { default as MessageItem } from './message-item.vue';
+export { default as MessagePanel } from './message-panel.vue';
+export { default as MessageReadStatus } from './message-read-status.vue';
+export { default as ReplyPreview } from './reply-preview.vue';
+export { default as TipSegments } from './tip-segments.vue';
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MaterialBubble.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/material-bubble.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/MaterialBubble.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/material-bubble.vue
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageBubble.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-bubble.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageBubble.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/message-bubble.vue
index 075136259..ef9a11ba6 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageBubble.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-bubble.vue
@@ -6,7 +6,7 @@ import { formatFileSize, openSafeUrl } from '@vben/utils'
 
 import { Image } from 'ant-design-vue'
 
-import CardBubble from '#/views/im/home/components/card/CardBubble.vue'
+import { CardBubble } from '#/views/im/home/components/card'
 import { useVoicePlayer } from '#/views/im/home/composables/useVoicePlayer'
 import { MESSAGE_MERGE_PREVIEW_LINES } from '#/views/im/utils/config'
 import { ImContentType } from '#/views/im/utils/constants'
@@ -27,8 +27,8 @@ import {
 } from '#/views/im/utils/message'
 import { formatSeconds } from '#/views/im/utils/time'
 
-import MaterialBubble from './MaterialBubble.vue'
-import TipSegments from './TipSegments.vue'
+import MaterialBubble from './material-bubble.vue'
+import TipSegments from './tip-segments.vue'
 
 defineOptions({ name: 'ImMessageBubble' })
 
@@ -384,7 +384,8 @@ onBeforeUnmount(() => {
   border-color: transparent transparent transparent #95ec69;
 }
 
-:global(.dark) .message-bubble--other {
+/* 整体放进 :global()，避免 Vue scoped 把 `:global(.dark) .xxx` 塌缩成裸 `.dark` 而把变量刷到 <html> */
+:global(.dark .message-bubble--other) {
   --im-message-bubble-other-bg: rgb(255 255 255 / 12%);
 }
 
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageHistory.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-history.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageHistory.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/message-history.vue
index a6c4c5f58..15db1a7bc 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageHistory.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-history.vue
@@ -47,15 +47,15 @@ import {
   getSenderRealNickname
 } from '#/views/im/utils/user'
 
-import GroupMember, { type GroupMemberLite } from '../../../../components/group/GroupMember.vue'
-import UserAvatar from '../../../../components/user/UserAvatar.vue'
+import { GroupMember, type GroupMemberLite } from '../../../../components/group'
+import { UserAvatar } from '../../../../components/user'
 import { useConversationStore } from '../../../../store/conversationStore'
 import { useFriendStore } from '../../../../store/friendStore'
 import { useGroupStore } from '../../../../store/groupStore'
 import { useMessageStore } from '../../../../store/messageStore'
 import { IM_MERGE_DETAIL_DIALOG_KEY } from './forward/keys'
-import MessageBubble from './MessageBubble.vue'
-import TipSegments from './TipSegments.vue'
+import MessageBubble from './message-bubble.vue'
+import TipSegments from './tip-segments.vue'
 
 defineOptions({ name: 'ImMessageHistory' })
 
@@ -508,6 +508,7 @@ function locateMessage(messageId: number) {
     v-model:open="visible"
     :title="title"
     width="640px"
+    :footer="null"
     class="im-message-history__dialog"
     @after-open-change="(open) => open && onDialogOpen()"
   >
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageItem.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-item.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageItem.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/message-item.vue
index fd77cd0c0..1dda6c735 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageItem.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-item.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from '../../../../components/group/GroupMember.vue'
+import type { GroupMemberLite } from '../../../../components/group'
 import type { Message } from '../../../../types'
 
 import { computed, inject } from 'vue'
@@ -60,7 +60,7 @@ import {
   isGroupQuit
 } from '#/views/im/utils/user'
 
-import UserAvatar from '../../../../components/user/UserAvatar.vue'
+import { UserAvatar } from '../../../../components/user'
 import { mediaTypeHandlers, useMediaUploader } from '../../../../composables/useMediaUploader'
 import { useMessageMultiSelect } from '../../../../composables/useMessageMultiSelect'
 import { useMessageSender } from '../../../../composables/useMessageSender'
@@ -76,10 +76,10 @@ import {
   IM_MERGE_DETAIL_DIALOG_KEY,
   IM_RTC_REDIAL_KEY
 } from './forward/keys'
-import MessageBubble from './MessageBubble.vue'
-import MessageReadStatus from './MessageReadStatus.vue'
-import ReplyPreview from './ReplyPreview.vue'
-import TipSegments from './TipSegments.vue'
+import MessageBubble from './message-bubble.vue'
+import MessageReadStatus from './message-read-status.vue'
+import ReplyPreview from './reply-preview.vue'
+import TipSegments from './tip-segments.vue'
 
 defineOptions({ name: 'ImMessageItem' })
 
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessagePanel.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-panel.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/MessagePanel.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/message-panel.vue
index 69221f949..d405185c4 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessagePanel.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-panel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { GroupMemberLite } from '../../../../components/group/GroupMember.vue'
+import type { GroupMemberLite } from '../../../../components/group'
 import type { GroupLite } from '../../../../types'
 
 import { computed, nextTick, provide, ref, watch } from 'vue'
@@ -14,9 +14,11 @@ import { getClientConversationId } from '#/views/im/utils/db'
 import { resolveCallEndReasonText } from '#/views/im/utils/message'
 import { getMemberDisplayName, isGroupQuit } from '#/views/im/utils/user'
 
-import GroupMuteMemberDialog from '../../../../components/group/GroupMuteMemberDialog.vue'
-import RtcCallMemberPickerDialog from '../../../../components/rtc/RtcCallMemberPickerDialog.vue'
-import RtcGroupCallBanner from '../../../../components/rtc/RtcGroupCallBanner.vue'
+import { GroupMuteMemberDialog } from '../../../../components/group'
+import {
+  RtcCallMemberPickerDialog,
+  RtcGroupCallBanner
+} from '../../../../components/rtc'
 import { useMessageMultiSelect } from '../../../../composables/useMessageMultiSelect'
 import { useVoicePlayer } from '../../../../composables/useVoicePlayer'
 import { useConversationStore } from '../../../../store/conversationStore'
@@ -25,21 +27,21 @@ import { useGroupStore } from '../../../../store/groupStore'
 import { useMessageStore } from '../../../../store/messageStore'
 import { useRtcStore } from '../../../../store/rtcStore'
 import { useImUiStore } from '../../../../store/uiStore'
-import ConversationGroupSide from '../conversation/ConversationGroupSide.vue'
-import ConversationPrivateSide from '../conversation/ConversationPrivateSide.vue'
-import MessageInput from '../input/MessageInput.vue'
-import MessageMultiSelectBar from '../input/MessageMultiSelectBar.vue'
+import { ConversationGroupSide } from '../conversation'
+import { ConversationPrivateSide } from '../conversation'
+import { MessageInput } from '../input'
+import { MessageMultiSelectBar } from '../input'
+import { MessageForwardDialog } from './forward'
+import { MessageMergeDetailDialog } from './forward'
 import {
   IM_FORWARD_DIALOG_KEY,
   IM_MERGE_DETAIL_DIALOG_KEY,
   IM_RTC_REDIAL_KEY
 } from './forward/keys'
-import MessageForwardDialog from './forward/MessageForwardDialog.vue'
-import MessageMergeDetailDialog from './forward/MessageMergeDetailDialog.vue'
-import GroupPinnedMessage from './GroupPinnedMessage.vue'
-import GroupRequestPending from './GroupRequestPending.vue'
-import MessageHistory from './MessageHistory.vue'
-import MessageItem from './MessageItem.vue'
+import GroupPinnedMessage from './group-pinned-message.vue'
+import GroupRequestPending from './group-request-pending.vue'
+import MessageHistory from './message-history.vue'
+import MessageItem from './message-item.vue'
 
 defineOptions({ name: 'ImMessagePanel' })
 
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageReadStatus.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-read-status.vue
similarity index 97%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageReadStatus.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/message-read-status.vue
index f97be4ea8..804a3cf77 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/MessageReadStatus.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-read-status.vue
@@ -10,8 +10,8 @@ import { Popover, TabPane, Tabs } from 'ant-design-vue'
 import { getGroupReadUsers as apiGetGroupReadUsers } from '#/api/im/message/group'
 
 import { ImConversationType, ImMessageReceiptStatus } from '../../../../../utils/constants'
-import GroupMember, { type GroupMemberLite } from '../../../../components/group/GroupMember.vue'
-import PagedScroller from '../../../../components/PagedScroller.vue'
+import { PagedScroller } from '../../../../components'
+import { GroupMember, type GroupMemberLite } from '../../../../components/group'
 import { useMessageStore } from '../../../../store/messageStore'
 
 defineOptions({ name: 'ImMessageReadStatus' })
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/ReplyPreview.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/reply-preview.vue
similarity index 99%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/ReplyPreview.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/reply-preview.vue
index 02e5128d3..1cda681cb 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/ReplyPreview.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/reply-preview.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { IconifyIcon as Icon } from '@vben/icons'
 import { formatFileSize } from '@vben/utils'
 
-import CardLineLabel from '#/views/im/home/components/card/CardLineLabel.vue'
+import { CardLineLabel } from '#/views/im/home/components/card'
 import { ImContentType } from '#/views/im/utils/constants'
 import { getClientConversationId } from '#/views/im/utils/db'
 import {
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/TipSegments.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/tip-segments.vue
similarity index 100%
rename from apps/web-antd/src/views/im/home/pages/conversation/components/message/TipSegments.vue
rename to apps/web-antd/src/views/im/home/pages/conversation/components/message/tip-segments.vue
diff --git a/apps/web-antd/src/views/im/home/pages/conversation/index.vue b/apps/web-antd/src/views/im/home/pages/conversation/index.vue
index e0dd073d8..9aa947c73 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/index.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/index.vue
@@ -10,14 +10,13 @@ import { Button, Dropdown, Input, Menu } from 'ant-design-vue'
 import { ImConversationType } from '../../../utils/constants'
 import { filterConversationsByKeyword, getConversationKey } from '../../../utils/conversation'
 import { StorageKeys } from '../../../utils/db'
-import FriendAddDialog from '../../components/friend/FriendAddDialog.vue'
-import GroupCreateDialog from '../../components/group/GroupCreateDialog.vue'
-import ResizableAside from '../../components/ResizableAside.vue'
+import { ResizableAside } from '../../components'
+import { FriendAddDialog } from '../../components/friend'
+import { GroupCreateDialog } from '../../components/group'
 import { useConversationStore } from '../../store/conversationStore'
 import { useGroupStore } from '../../store/groupStore'
 import { useImUiStore } from '../../store/uiStore'
-import ConversationItem from './components/conversation/ConversationItem.vue'
-import MessagePanel from './components/message/MessagePanel.vue'
+import { ConversationItem, MessagePanel } from './components'
 
 defineOptions({ name: 'ImMessagePage' })
 
@@ -200,12 +199,16 @@ watch(() => uiStore.nextUnreadJumpNonce, jumpToNextUnread)
           <template #overlay>
             <Menu>
               <Menu.Item @click="handleOpenCreateGroup">
-                <Icon icon="ant-design:message-outlined" :size="16" />
-                <span>发起群聊</span>
+                <span class="inline-flex items-center gap-2">
+                  <Icon icon="ant-design:message-outlined" :size="16" />
+                  <span>发起群聊</span>
+                </span>
               </Menu.Item>
               <Menu.Item @click="friendAddDialogRef?.open()">
-                <Icon icon="ant-design:user-add-outlined" :size="16" />
-                <span>添加朋友</span>
+                <span class="inline-flex items-center gap-2">
+                  <Icon icon="ant-design:user-add-outlined" :size="16" />
+                  <span>添加朋友</span>
+                </span>
               </Menu.Item>
             </Menu>
           </template>
diff --git a/apps/web-antd/src/views/im/home/store/uiStore.ts b/apps/web-antd/src/views/im/home/store/uiStore.ts
index 9badaf2ec..93d0b6ebd 100644
--- a/apps/web-antd/src/views/im/home/store/uiStore.ts
+++ b/apps/web-antd/src/views/im/home/store/uiStore.ts
@@ -11,7 +11,7 @@ import { ImFriendAddSource } from '../../utils/constants'
  *
  * 收纳标准：触发点 N 个、挂载点想保持 1 个的浮层状态。
  * 任意位置都可能 open，但 DOM 上只想留一份实例 → 走 store 派发，
- * 由 `Index.vue` 挂一个订阅组件统一渲染。
+ * 由 `index.vue` 挂一个订阅组件统一渲染。
  */
 export const useImUiStore = defineStore('imUiStore', () => {
   // ==================== 用户名片 UserInfoCard ====================
diff --git a/apps/web-antd/src/views/im/manager/channel/list/components/index.ts b/apps/web-antd/src/views/im/manager/channel/list/components/index.ts
new file mode 100644
index 000000000..da6d6607f
--- /dev/null
+++ b/apps/web-antd/src/views/im/manager/channel/list/components/index.ts
@@ -0,0 +1 @@
+export { default as ChannelSelect } from './select.vue';
diff --git a/apps/web-antd/src/views/im/manager/components/ChannelSelect.vue b/apps/web-antd/src/views/im/manager/channel/list/components/select.vue
similarity index 100%
rename from apps/web-antd/src/views/im/manager/components/ChannelSelect.vue
rename to apps/web-antd/src/views/im/manager/channel/list/components/select.vue
diff --git a/apps/web-antd/src/views/im/manager/channel/material/components/index.ts b/apps/web-antd/src/views/im/manager/channel/material/components/index.ts
new file mode 100644
index 000000000..a0d10a84c
--- /dev/null
+++ b/apps/web-antd/src/views/im/manager/channel/material/components/index.ts
@@ -0,0 +1 @@
+export { default as MaterialSelect } from './select.vue';
diff --git a/apps/web-antd/src/views/im/manager/components/MaterialSelect.vue b/apps/web-antd/src/views/im/manager/channel/material/components/select.vue
similarity index 100%
rename from apps/web-antd/src/views/im/manager/components/MaterialSelect.vue
rename to apps/web-antd/src/views/im/manager/channel/material/components/select.vue
diff --git a/apps/web-antd/src/views/im/manager/channel/material/data.ts b/apps/web-antd/src/views/im/manager/channel/material/data.ts
index 3b9731056..835b16dbf 100644
--- a/apps/web-antd/src/views/im/manager/channel/material/data.ts
+++ b/apps/web-antd/src/views/im/manager/channel/material/data.ts
@@ -8,7 +8,7 @@ import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
-import ChannelSelect from '#/views/im/manager/components/ChannelSelect.vue';
+import { ChannelSelect } from '#/views/im/manager/channel/list/components';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
diff --git a/apps/web-antd/src/views/im/manager/channel/message/modules/send-form.vue b/apps/web-antd/src/views/im/manager/channel/message/modules/send-form.vue
index 6773d375f..19c348a07 100644
--- a/apps/web-antd/src/views/im/manager/channel/message/modules/send-form.vue
+++ b/apps/web-antd/src/views/im/manager/channel/message/modules/send-form.vue
@@ -6,9 +6,9 @@ import { useVbenModal } from '@vben/common-ui';
 import { Form, FormItem, message, Radio, RadioGroup } from 'ant-design-vue';
 
 import { sendManagerChannelMessage } from '#/api/im/manager/channel/message';
-import ChannelSelect from '#/views/im/manager/components/ChannelSelect.vue';
-import MaterialSelect from '#/views/im/manager/components/MaterialSelect.vue';
-import UserMultiSelect from '#/views/im/manager/components/UserMultiSelect.vue';
+import { ChannelSelect } from '#/views/im/manager/channel/list/components';
+import { MaterialSelect } from '#/views/im/manager/channel/material/components';
+import { UserSelect } from '#/views/system/user/components';
 
 const emit = defineEmits(['success']);
 
@@ -89,8 +89,9 @@ const [Modal, modalApi] = useVbenModal({
         </RadioGroup>
       </FormItem>
       <FormItem v-if="formData.receiverUserType === 'users'" label="接收用户" required>
-        <UserMultiSelect
+        <UserSelect
           v-model="formData.receiverUserIds"
+          multiple
           placeholder="请选择接收用户"
         />
       </FormItem>
diff --git a/apps/web-antd/src/views/im/manager/components/GroupSelect.vue b/apps/web-antd/src/views/im/manager/components/GroupSelect.vue
deleted file mode 100644
index 3d7fd2391..000000000
--- a/apps/web-antd/src/views/im/manager/components/GroupSelect.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts" setup>
-import type { ImManagerGroupApi } from '#/api/im/manager/group';
-
-import { computed, onMounted, ref } from 'vue';
-
-import { Select } from 'ant-design-vue';
-
-import { getManagerGroupPage } from '#/api/im/manager/group';
-
-defineOptions({ name: 'ImManagerGroupSelect' });
-
-const props = withDefaults(
-  defineProps<{
-    allowClear?: boolean;
-    disabled?: boolean;
-    modelValue?: number;
-    placeholder?: string;
-  }>(),
-  {
-    allowClear: true,
-    disabled: false,
-    modelValue: undefined,
-    placeholder: '请选择群',
-  },
-);
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number | undefined];
-}>();
-
-const loading = ref(false);
-const groupList = ref<ImManagerGroupApi.Group[]>([]);
-
-const value = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const options = computed(() =>
-  groupList.value.map((item) => ({
-    label: `${item.name} (${item.id})`,
-    value: item.id,
-  })),
-);
-
-/** 加载群列表 */
-async function loadGroupList() {
-  loading.value = true;
-  try {
-    const data = await getManagerGroupPage({
-      pageNo: 1,
-      pageSize: 100,
-    });
-    groupList.value = data.list || [];
-  } finally {
-    loading.value = false;
-  }
-}
-
-onMounted(loadGroupList);
-</script>
-
-<template>
-  <Select
-    v-model:value="value"
-    :allow-clear="allowClear"
-    :disabled="disabled"
-    :loading="loading"
-    :options="options"
-    :placeholder="placeholder"
-    class="w-full"
-    show-search
-  />
-</template>
diff --git a/apps/web-antd/src/views/im/manager/components/UserMultiSelect.vue b/apps/web-antd/src/views/im/manager/components/UserMultiSelect.vue
deleted file mode 100644
index bc4f1a280..000000000
--- a/apps/web-antd/src/views/im/manager/components/UserMultiSelect.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts" setup>
-import type { SystemUserApi } from '#/api/system/user';
-
-import { computed, ref, watch } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Input, Tag } from 'ant-design-vue';
-
-import { getUser } from '#/api/system/user';
-import UserSelectDialog from '#/views/system/user/components/select-dialog.vue';
-
-defineOptions({ name: 'ImManagerUserMultiSelect' });
-
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    modelValue?: number[]
-    placeholder?: string
-  }>(),
-  {
-    disabled: false,
-    modelValue: () => [],
-    placeholder: '请选择用户',
-  },
-);
-
-const emit = defineEmits<{
-  change: [rows: SystemUserApi.User[]];
-  'update:modelValue': [value: number[]];
-}>();
-
-const dialogRef = ref<InstanceType<typeof UserSelectDialog>>();
-const selectedRows = ref<SystemUserApi.User[]>([]);
-
-const displayText = computed(() => {
-  if (selectedRows.value.length === 0) {
-    return '';
-  }
-  return selectedRows.value
-    .map((item) => item.nickname || item.username || item.id)
-    .join('，');
-});
-
-/** 回显已选用户 */
-async function resolveSelectedUsers(ids: number[]) {
-  const knownMap = new Map(selectedRows.value.map((item) => [item.id, item]));
-  const list: SystemUserApi.User[] = [];
-  for (const id of ids) {
-    const cached = knownMap.get(id);
-    if (cached) {
-      list.push(cached);
-      continue;
-    }
-    list.push(await getUser(id));
-  }
-  selectedRows.value = list;
-}
-
-watch(
-  () => props.modelValue,
-  (ids) => {
-    void resolveSelectedUsers(ids || []);
-  },
-  { immediate: true },
-);
-
-/** 打开用户选择弹窗 */
-function handleClick() {
-  if (props.disabled) {
-    return;
-  }
-  dialogRef.value?.open(props.modelValue || [], { multiple: true });
-}
-
-/** 弹窗选中回调 */
-function handleSelected(rows: SystemUserApi.User[]) {
-  selectedRows.value = rows;
-  emit(
-    'update:modelValue',
-    rows.map((item) => item.id!),
-  );
-  emit('change', rows);
-}
-</script>
-
-<template>
-  <div class="w-full">
-    <Input
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :value="displayText"
-      readonly
-      @click="handleClick"
-    >
-      <template #suffix>
-        <IconifyIcon class="size-4" icon="lucide:search" />
-      </template>
-    </Input>
-    <div v-if="selectedRows.length > 0" class="mt-2 flex flex-wrap gap-1">
-      <Tag v-for="item in selectedRows" :key="item.id">
-        {{ item.nickname || item.username || item.id }}
-      </Tag>
-    </div>
-    <UserSelectDialog ref="dialogRef" @selected="handleSelected" />
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/im/manager/friend/data.ts b/apps/web-antd/src/views/im/manager/friend/data.ts
index 963d5cfda..aaa43604f 100644
--- a/apps/web-antd/src/views/im/manager/friend/data.ts
+++ b/apps/web-antd/src/views/im/manager/friend/data.ts
@@ -7,7 +7,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
-import UserSelect from '#/views/system/user/components/select.vue';
+import { UserSelect } from '#/views/system/user/components';
 
 /** 好友关系搜索表单 */
 export function useFriendGridFormSchema(): VbenFormSchema[] {
diff --git a/apps/web-antd/src/views/im/manager/group/components/index.ts b/apps/web-antd/src/views/im/manager/group/components/index.ts
new file mode 100644
index 000000000..4bbf84f44
--- /dev/null
+++ b/apps/web-antd/src/views/im/manager/group/components/index.ts
@@ -0,0 +1,2 @@
+export { default as GroupSelectDialog } from './select-dialog.vue';
+export { default as GroupSelect } from './select.vue';
diff --git a/apps/web-antd/src/views/im/manager/group/components/select-dialog.vue b/apps/web-antd/src/views/im/manager/group/components/select-dialog.vue
new file mode 100644
index 000000000..ea5cec1b0
--- /dev/null
+++ b/apps/web-antd/src/views/im/manager/group/components/select-dialog.vue
@@ -0,0 +1,271 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ImManagerGroupApi } from '#/api/im/manager/group';
+
+import { nextTick, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getManagerGroup,
+  getManagerGroupPage,
+} from '#/api/im/manager/group';
+
+const emit = defineEmits<{
+  selected: [rows: ImManagerGroupApi.Group[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(false); // 是否多选
+const selectedRows = ref<ImManagerGroupApi.Group[]>([]); // 已选群列表
+const preSelectedIds = ref<number[]>([]); // 预选群编号列表
+
+/** 群选择弹窗的搜索表单 */
+function useGroupSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '群名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入群名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '群状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.IM_GROUP_STATUS, 'number'),
+        placeholder: '请选择群状态',
+      },
+    },
+  ];
+}
+
+/** 群选择弹窗的字段 */
+function useGroupSelectGridColumns(
+  isMultiple = false,
+): VxeTableGridOptions<ImManagerGroupApi.Group>['columns'] {
+  return [
+    {
+      type: isMultiple ? 'checkbox' : 'radio',
+      width: 50,
+    },
+    {
+      field: 'id',
+      title: '编号',
+      width: 100,
+    },
+    {
+      field: 'name',
+      title: '群名称',
+      minWidth: 160,
+    },
+    {
+      field: 'ownerNickname',
+      title: '群主',
+      minWidth: 160,
+    },
+    {
+      field: 'memberCount',
+      title: '成员数',
+      width: 90,
+    },
+    {
+      field: 'status',
+      title: '群状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IM_GROUP_STATUS },
+      },
+    },
+  ];
+}
+
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
+function getMultipleSelectedRows() {
+  const selectedMap = new Map<number, ImManagerGroupApi.Group>();
+  const records = [
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
+  ] as ImManagerGroupApi.Group[];
+  records.forEach((row) => {
+    selectedMap.set(row.id, row);
+  });
+  return [...selectedMap.values()];
+}
+
+/** 处理多选勾选变化 */
+function handleCheckboxSelectChange() {
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: ImManagerGroupApi.Group) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: ImManagerGroupApi.Group) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({ row }: { row: ImManagerGroupApi.Group }) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
+    return;
+  }
+  selectedRows.value = [row];
+  await gridApi.grid.setRadioRow(row);
+  handleConfirm();
+}
+
+/** 回显预选群 */
+async function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as ImManagerGroupApi.Group[];
+  for (const row of rows) {
+    if (!preSelectedIds.value.includes(row.id)) {
+      continue;
+    }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
+    return;
+  }
+  const targetId = preSelectedIds.value[0];
+  if (targetId) {
+    selectedRows.value = [await getManagerGroup(targetId)];
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGroupSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGroupSelectGridColumns(false),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getManagerGroupPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ImManagerGroupApi.Group>,
+  gridEvents: {
+    cellDblclick: handleCellDblclick,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: ImManagerGroupApi.Group }) => {
+      handleRadioChange(row);
+    },
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开群选择弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? false;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  gridApi.setGridOptions({
+    columns: useGroupSelectGridColumns(multiple.value),
+  });
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  await applyPreSelection();
+}
+
+/** 关闭群选择弹窗 */
+function closeModal() {
+  open.value = false;
+}
+
+/** 确认选择群 */
+function handleConfirm() {
+  const rows = multiple.value ? getMultipleSelectedRows() : selectedRows.value;
+  if (rows.length === 0) {
+    message.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? rows : [rows[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="群选择"
+    width="70%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="群列表" />
+    <template #footer>
+      <Button @click="closeModal">取消</Button>
+      <Button type="primary" @click="handleConfirm">确定</Button>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/im/manager/group/components/select.vue b/apps/web-antd/src/views/im/manager/group/components/select.vue
new file mode 100644
index 000000000..c8fc17c60
--- /dev/null
+++ b/apps/web-antd/src/views/im/manager/group/components/select.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { ImManagerGroupApi } from '#/api/im/manager/group';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getManagerGroup } from '#/api/im/manager/group';
+
+import GroupSelectDialog from './select-dialog.vue';
+
+defineOptions({ name: 'ImManagerGroupSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择群',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: ImManagerGroupApi.Group | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const attrs = useAttrs();
+const dialogRef = ref<InstanceType<typeof GroupSelectDialog>>(); // 群选择弹窗
+const hovering = ref(false); // 鼠标是否悬停
+const selectedItem = ref<ImManagerGroupApi.Group>(); // 已选群
+
+/** 输入框显示文本 */
+const displayLabel = computed(() => selectedItem.value?.name ?? '');
+
+/** 是否显示清除图标 */
+const showClear = computed(() => {
+  return props.allowClear && !props.disabled && hovering.value && props.modelValue != null;
+});
+
+/** 根据编号查询群信息（用于编辑回显） */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  selectedItem.value = await getManagerGroup(id);
+}
+
+watch(() => props.modelValue, resolveItemById, { immediate: true });
+
+/** 清空已选群 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开群选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  dialogRef.value?.open(props.modelValue == null ? [] : [props.modelValue]);
+}
+
+/** 弹窗选中回调 */
+function handleSelected(rows: ImManagerGroupApi.Group[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+      <template #title>
+        <div v-if="selectedItem" class="leading-6">
+          <div>群名称：{{ selectedItem.name || '-' }}</div>
+          <div>群主：{{ selectedItem.ownerNickname || '-' }}</div>
+          <div>成员数：{{ selectedItem.memberCount ?? '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <GroupSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-antd/src/views/im/manager/group/data.ts b/apps/web-antd/src/views/im/manager/group/data.ts
index 195dc4186..ec09eb6ea 100644
--- a/apps/web-antd/src/views/im/manager/group/data.ts
+++ b/apps/web-antd/src/views/im/manager/group/data.ts
@@ -7,8 +7,8 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
-import GroupSelect from '#/views/im/manager/components/GroupSelect.vue';
-import UserSelect from '#/views/system/user/components/select.vue';
+import { GroupSelect } from '#/views/im/manager/group/components';
+import { UserSelect } from '#/views/system/user/components';
 
 /** 群搜索表单 */
 export function useGroupGridFormSchema(): VbenFormSchema[] {
diff --git a/apps/web-antd/src/views/im/manager/message/MessageContentPreview.vue b/apps/web-antd/src/views/im/manager/message/content-preview.vue
similarity index 98%
rename from apps/web-antd/src/views/im/manager/message/MessageContentPreview.vue
rename to apps/web-antd/src/views/im/manager/message/content-preview.vue
index 81ed03b73..94a114a63 100644
--- a/apps/web-antd/src/views/im/manager/message/MessageContentPreview.vue
+++ b/apps/web-antd/src/views/im/manager/message/content-preview.vue
@@ -7,7 +7,7 @@ import { formatFileSize, openSafeUrl } from '@vben/utils';
 
 import { Image } from 'ant-design-vue';
 
-import CardLineLabel from '#/views/im/home/components/card/CardLineLabel.vue';
+import { CardLineLabel } from '#/views/im/home/components/card';
 import { MESSAGE_MERGE_PREVIEW_LINES } from '#/views/im/utils/config';
 import {
   ImContentType,
diff --git a/apps/web-antd/src/views/im/manager/message/data.ts b/apps/web-antd/src/views/im/manager/message/data.ts
index 0225852bf..0129e7ff9 100644
--- a/apps/web-antd/src/views/im/manager/message/data.ts
+++ b/apps/web-antd/src/views/im/manager/message/data.ts
@@ -7,8 +7,8 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
-import GroupSelect from '#/views/im/manager/components/GroupSelect.vue';
-import UserSelect from '#/views/system/user/components/select.vue';
+import { GroupSelect } from '#/views/im/manager/group/components';
+import { UserSelect } from '#/views/system/user/components';
 
 /** 私聊消息搜索表单 */
 export function usePrivateGridFormSchema(): VbenFormSchema[] {
diff --git a/apps/web-antd/src/views/im/manager/message/group/index.vue b/apps/web-antd/src/views/im/manager/message/group/index.vue
index d65db434c..5f3ed7fc2 100644
--- a/apps/web-antd/src/views/im/manager/message/group/index.vue
+++ b/apps/web-antd/src/views/im/manager/message/group/index.vue
@@ -19,8 +19,8 @@ import {
   IM_AT_ALL_USER_ID,
 } from '#/views/im/utils/constants';
 
+import { MessageContentPreview } from '..';
 import { useGroupGridColumns, useGroupGridFormSchema } from '../data';
-import MessageContentPreview from '../MessageContentPreview.vue';
 import Detail from './modules/detail.vue';
 
 defineOptions({ name: 'ImGroupMessage' });
diff --git a/apps/web-antd/src/views/im/manager/message/group/modules/detail.vue b/apps/web-antd/src/views/im/manager/message/group/modules/detail.vue
index 2fd6cb867..57490f346 100644
--- a/apps/web-antd/src/views/im/manager/message/group/modules/detail.vue
+++ b/apps/web-antd/src/views/im/manager/message/group/modules/detail.vue
@@ -20,7 +20,7 @@ import {
   IM_AT_ALL_USER_ID,
 } from '#/views/im/utils/constants';
 
-import MessageContentPreview from '../../MessageContentPreview.vue';
+import { MessageContentPreview } from '../..';
 
 const visible = ref(false);
 const detail = ref<ImManagerGroupMessageApi.GroupMessage>({} as ImManagerGroupMessageApi.GroupMessage);
diff --git a/apps/web-antd/src/views/im/manager/message/index.ts b/apps/web-antd/src/views/im/manager/message/index.ts
new file mode 100644
index 000000000..63c961ac9
--- /dev/null
+++ b/apps/web-antd/src/views/im/manager/message/index.ts
@@ -0,0 +1 @@
+export { default as MessageContentPreview } from './content-preview.vue';
diff --git a/apps/web-antd/src/views/im/manager/message/private/index.vue b/apps/web-antd/src/views/im/manager/message/private/index.vue
index 478ea3d11..30d5240c3 100644
--- a/apps/web-antd/src/views/im/manager/message/private/index.vue
+++ b/apps/web-antd/src/views/im/manager/message/private/index.vue
@@ -12,11 +12,11 @@ import { getManagerPrivateMessagePage } from '#/api/im/manager/message/private';
 import { formatUserLabel } from '#/views/im/manager/utils/format';
 import { MESSAGE_PRIVATE_READ_ENABLED } from '#/views/im/utils/config';
 
+import { MessageContentPreview } from '..';
 import {
   usePrivateGridColumns,
   usePrivateGridFormSchema,
 } from '../data';
-import MessageContentPreview from '../MessageContentPreview.vue';
 import Detail from './modules/detail.vue';
 
 defineOptions({ name: 'ImPrivateMessage' });
diff --git a/apps/web-antd/src/views/im/manager/message/private/modules/detail.vue b/apps/web-antd/src/views/im/manager/message/private/modules/detail.vue
index fa5c6f831..486b9eaca 100644
--- a/apps/web-antd/src/views/im/manager/message/private/modules/detail.vue
+++ b/apps/web-antd/src/views/im/manager/message/private/modules/detail.vue
@@ -14,7 +14,7 @@ import {
   formatUserLabel,
 } from '#/views/im/manager/utils/format';
 
-import MessageContentPreview from '../../MessageContentPreview.vue';
+import { MessageContentPreview } from '../..';
 
 const visible = ref(false);
 const detail = ref<ImManagerPrivateMessageApi.PrivateMessage>(
diff --git a/apps/web-antd/src/views/im/manager/rtc/data.ts b/apps/web-antd/src/views/im/manager/rtc/data.ts
index c941b0912..e3582521b 100644
--- a/apps/web-antd/src/views/im/manager/rtc/data.ts
+++ b/apps/web-antd/src/views/im/manager/rtc/data.ts
@@ -7,7 +7,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
-import UserSelect from '#/views/system/user/components/select.vue';
+import { UserSelect } from '#/views/system/user/components';
 
 /** 通话记录搜索表单 */
 export function useRtcGridFormSchema(): VbenFormSchema[] {
diff --git a/apps/web-antd/src/views/im/manager/statistics/components/DistributionChart.vue b/apps/web-antd/src/views/im/manager/statistics/components/distribution-chart.vue
similarity index 100%
rename from apps/web-antd/src/views/im/manager/statistics/components/DistributionChart.vue
rename to apps/web-antd/src/views/im/manager/statistics/components/distribution-chart.vue
diff --git a/apps/web-antd/src/views/im/manager/statistics/components/index.ts b/apps/web-antd/src/views/im/manager/statistics/components/index.ts
new file mode 100644
index 000000000..c7228a32c
--- /dev/null
+++ b/apps/web-antd/src/views/im/manager/statistics/components/index.ts
@@ -0,0 +1,3 @@
+export { default as DistributionChart } from './distribution-chart.vue';
+export { default as OverviewCards } from './overview-cards.vue';
+export { default as TrendChart } from './trend-chart.vue';
diff --git a/apps/web-antd/src/views/im/manager/statistics/components/OverviewCards.vue b/apps/web-antd/src/views/im/manager/statistics/components/overview-cards.vue
similarity index 100%
rename from apps/web-antd/src/views/im/manager/statistics/components/OverviewCards.vue
rename to apps/web-antd/src/views/im/manager/statistics/components/overview-cards.vue
diff --git a/apps/web-antd/src/views/im/manager/statistics/components/TrendChart.vue b/apps/web-antd/src/views/im/manager/statistics/components/trend-chart.vue
similarity index 100%
rename from apps/web-antd/src/views/im/manager/statistics/components/TrendChart.vue
rename to apps/web-antd/src/views/im/manager/statistics/components/trend-chart.vue
diff --git a/apps/web-antd/src/views/im/manager/statistics/index.vue b/apps/web-antd/src/views/im/manager/statistics/index.vue
index 0593f4ab3..0d73d52ae 100644
--- a/apps/web-antd/src/views/im/manager/statistics/index.vue
+++ b/apps/web-antd/src/views/im/manager/statistics/index.vue
@@ -7,9 +7,11 @@ import { Page } from '@vben/common-ui';
 
 import { getStatisticsOverview } from '#/api/im/manager/statistics';
 
-import DistributionChart from './components/DistributionChart.vue';
-import OverviewCards from './components/OverviewCards.vue';
-import TrendChart from './components/TrendChart.vue';
+import {
+  DistributionChart,
+  OverviewCards,
+  TrendChart,
+} from './components';
 
 defineOptions({ name: 'ImManagerStatistics' });
 
diff --git a/apps/web-antd/src/views/im/utils/constants.ts b/apps/web-antd/src/views/im/utils/constants.ts
index 03556b1d0..895571eba 100644
--- a/apps/web-antd/src/views/im/utils/constants.ts
+++ b/apps/web-antd/src/views/im/utils/constants.ts
@@ -101,38 +101,38 @@ export function isRtcCallTip(type: number): boolean {
  * 1. 后端发送入口校验（Im{Private,Group}MessageSendReqVO.isNormalType）—— 用户发送的内容类型必须 normal=true
  * 2. 前端接收侧未读 / 提示音（websocketStore）—— normal 消息计入会话未读数 + 触发声音
  * 3. 前端会话列表 lastType / @ 标签（ConversationItem）—— 只有 normal 才算「最后一条聊天消息」
- * 4. 前端群消息置顶菜单（MessageItem.vue 的 canPin）—— normal 才允许群主 / 管理员置顶
+ * 4. 前端群消息置顶菜单（message-item.vue 的 canPin）—— normal 才允许群主 / 管理员置顶
  *
  * 名片（CARD）/ 表情（FACE）都是「用户主动发的聊天消息」，1/2/3 都符合预期；4 同时放开 = 群主可置顶，语义合理
  */
-const ImContentTypeNormals: number[] = [
-  ImContentType.TEXT,
-  ImContentType.IMAGE,
-  ImContentType.FILE,
-  ImContentType.VOICE,
-  ImContentType.VIDEO,
+const ImContentTypeNormals = new Set<number>([
   ImContentType.CARD,
   ImContentType.FACE,
+  ImContentType.FILE,
+  ImContentType.IMAGE,
+  ImContentType.MATERIAL, // 频道素材计入未读数 + 进会话列表
   ImContentType.MERGE,
-  ImContentType.MATERIAL // 频道素材计入未读数 + 进会话列表
-]
+  ImContentType.TEXT,
+  ImContentType.VIDEO,
+  ImContentType.VOICE
+])
 
 /** 判断是否"普通消息" */
 export function isNormalMessage(type: number): boolean {
-  return ImContentTypeNormals.includes(type)
+  return ImContentTypeNormals.has(type)
 }
 
 /** IM 媒体内容类型集合：发送依赖本地 File 上传，刷新后 _localFile 丢失即不可恢复 */
-const ImContentTypeMedia: number[] = [
-  ImContentType.IMAGE,
+const ImContentTypeMedia = new Set<number>([
   ImContentType.FILE,
-  ImContentType.VOICE,
-  ImContentType.VIDEO
-]
+  ImContentType.IMAGE,
+  ImContentType.VIDEO,
+  ImContentType.VOICE
+])
 
 /** 判断是否「媒体消息」：图片 / 文件 / 语音 / 视频 */
 export function isMediaMessageType(type: number): boolean {
-  return ImContentTypeMedia.includes(type)
+  return ImContentTypeMedia.has(type)
 }
 
 /**
diff --git a/apps/web-antd/src/views/im/utils/image.ts b/apps/web-antd/src/views/im/utils/image.ts
index da826639a..207947db0 100644
--- a/apps/web-antd/src/views/im/utils/image.ts
+++ b/apps/web-antd/src/views/im/utils/image.ts
@@ -20,7 +20,7 @@ export function loadImage(
       img.crossOrigin = crossOrigin
     }
     img.addEventListener('load', () => resolve(img))
-    img.onerror = () => resolve(null)
+    img.addEventListener('error', () => resolve(null))
     img.src = src
   })
 }
@@ -46,12 +46,12 @@ export function probeImageSize(source: File | string): Promise<{ height: number;
         height: img.naturalHeight || DEFAULT_FALLBACK_SIZE.height
       })
     })
-    img.onerror = () => {
+    img.addEventListener('error', () => {
       if (isFile) {
         URL.revokeObjectURL(src)
       }
       resolve({ ...DEFAULT_FALLBACK_SIZE })
-    }
+    })
     img.src = src
   })
 }
diff --git a/apps/web-antd/src/views/im/utils/message.ts b/apps/web-antd/src/views/im/utils/message.ts
index 40525aa01..5dfb3944c 100644
--- a/apps/web-antd/src/views/im/utils/message.ts
+++ b/apps/web-antd/src/views/im/utils/message.ts
@@ -57,7 +57,7 @@ export function getPrivateMessagePeerId(
 // ==================== 文本片段（tip 文案 + TEXT 气泡共用） ====================
 // 既用于灰条 tip（"XX 邀请 YY 加入群聊"），也用于 TEXT 气泡正文（@xxx 高亮 + URL 自动识别）。
 // mention 段携带 userId 用于挂点击弹 UserInfoCard；link 段携带 href 用于 <a> 跳转；
-// text 段是纯文本兜底。渲染层（TipSegments.vue）按 type 分发统一处理。
+// text 段是纯文本兜底。渲染层（tip-segments.vue）按 type 分发统一处理。
 
 export type TipSegment =
   | { href: string; text: string; type: 'link'; }
@@ -136,7 +136,7 @@ export function parseTextSegments(text: string, mentions: MentionCandidate[] = [
   }
   // 「@张三丰」不能被「@张三」截胡，候选按 name 长度倒序
   const sortedMentions =
-    mentions.length > 1 ? [...mentions].sort((a, b) => b.name.length - a.name.length) : mentions
+    mentions.length > 1 ? mentions.toSorted((a, b) => b.name.length - a.name.length) : mentions
   const out: TipSegment[] = []
   let buffer = ''
 
@@ -627,7 +627,7 @@ export const playAudioTip = () => {
 /**
  * 按文件扩展名挑文件图标 + 颜色，对齐微信观感
  *
- * MessageItem.vue（主气泡）和 ReplyPreview.vue（引用预览）共用同一份映射，避免视觉两处不一致
+ * message-item.vue（主气泡）和 reply-preview.vue（引用预览）共用同一份映射，避免视觉两处不一致
  */
 export function getFileIconInfo(filename: string | undefined): { color: string; icon: string; } {
   const ext = (filename || '').split('.').pop()?.toLowerCase() || ''
@@ -720,7 +720,7 @@ export function resolveGroupNotificationSegments(
   resolveName: (userId: number) => string,
   operatorNameOverride?: string
 ): TipSegment[] {
-  let payload: GroupNotificationPayload = {}
+  let payload: GroupNotificationPayload
   try {
     payload = JSON.parse(message.content || '{}')
   } catch {
diff --git a/apps/web-antd/src/views/im/utils/pull.ts b/apps/web-antd/src/views/im/utils/pull.ts
index 0cf3b2380..08306c303 100644
--- a/apps/web-antd/src/views/im/utils/pull.ts
+++ b/apps/web-antd/src/views/im/utils/pull.ts
@@ -113,7 +113,7 @@ export async function runIncrementalPull<T extends PullRecord>(
  * @param maxPages     单轮翻页上限
  */
 export async function runMinIdPull<T extends { id?: number }>(options: {
-  applyPage: (records: T[], nextMinId?: number) => Promise<boolean | void>
+  applyPage: (records: T[], nextMinId?: number) => Promise<boolean> | Promise<void>
   fetchPage: (params: { minId: number; size: number }) => Promise<T[]>
   initialMinId: number
   isActive?: () => boolean
diff --git a/apps/web-antd/src/views/system/user/components/select.vue b/apps/web-antd/src/views/system/user/components/select.vue
index 3109fe032..68d39d6b6 100644
--- a/apps/web-antd/src/views/system/user/components/select.vue
+++ b/apps/web-antd/src/views/system/user/components/select.vue
@@ -7,7 +7,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Input, Tooltip } from 'ant-design-vue';
 
-import { getUser } from '#/api/system/user';
+import { getUserList } from '#/api/system/user';
 
 import UserSelectDialog from './select-dialog.vue';
 
@@ -17,56 +17,88 @@ const props = withDefaults(
   defineProps<{
     allowClear?: boolean;
     disabled?: boolean;
-    modelValue?: number;
+    modelValue?: null | number | number[];
+    multiple?: boolean;
     placeholder?: string;
   }>(),
   {
     allowClear: true,
     disabled: false,
     modelValue: undefined,
+    multiple: false,
     placeholder: '请选择用户',
   },
 );
 
 const emit = defineEmits<{
-  change: [item: SystemUserApi.User | undefined];
-  'update:modelValue': [value: number | undefined];
+  change: [item: SystemUserApi.User | SystemUserApi.User[] | undefined];
+  'update:modelValue': [value: number | number[] | undefined];
 }>();
 
 const attrs = useAttrs();
-const dialogRef = ref<InstanceType<typeof UserSelectDialog>>();
-const hovering = ref(false);
-const selectedItem = ref<SystemUserApi.User>();
+const dialogRef = ref<InstanceType<typeof UserSelectDialog>>(); // 用户选择弹窗
+const hovering = ref(false); // 鼠标是否悬停
+const selectedItems = ref<SystemUserApi.User[]>([]); // 已选用户列表
 
-const displayLabel = computed(
-  () => selectedItem.value?.nickname ?? selectedItem.value?.username ?? '',
+/** 输入框显示文本 */
+const displayLabel = computed(() =>
+  selectedItems.value
+    .map((item) => item.nickname || item.username || item.id)
+    .join('、'),
 );
 
-const showClear = computed(
-  () =>
-    props.allowClear &&
-    !props.disabled &&
-    hovering.value &&
-    props.modelValue !== null,
-);
+/** 是否显示清除图标 */
+const showClear = computed(() => {
+  return props.allowClear && !props.disabled && hovering.value && hasValue();
+});
 
-/** 根据编号单条查询用户信息（用于编辑回显） */
-async function resolveItemById(id: number | undefined) {
-  if (!id) {
-    selectedItem.value = undefined;
-    return;
+/** 获取已选用户编号 */
+function getSelectedIds(value: null | number | number[] | undefined) {
+  if (Array.isArray(value)) {
+    return props.multiple ? value : value.slice(0, 1);
   }
-  if (selectedItem.value?.id === id) {
-    return;
-  }
-  selectedItem.value = await getUser(id);
+  return value === null || value === undefined ? [] : [value];
 }
 
-watch(() => props.modelValue, resolveItemById, { immediate: true });
+/** 是否已有选中值 */
+function hasValue() {
+  return getSelectedIds(props.modelValue).length > 0;
+}
+
+/** 根据编号查询用户信息（用于编辑回显） */
+async function resolveItemsById(
+  value: null | number | number[] | undefined,
+) {
+  const ids = getSelectedIds(value);
+  if (ids.length === 0) {
+    selectedItems.value = [];
+    return;
+  }
+  if (
+    selectedItems.value.length === ids.length &&
+    selectedItems.value.every(
+      (item) => item.id !== undefined && ids.includes(item.id),
+    )
+  ) {
+    return;
+  }
+  const userList = await getUserList(ids);
+  const userMap = new Map(userList.map((item) => [item.id, item]));
+  selectedItems.value = ids
+    .map((id) => userMap.get(id))
+    .filter((item): item is SystemUserApi.User => !!item);
+}
+
+watch(() => props.modelValue, resolveItemsById, { deep: true, immediate: true });
 
 /** 清空已选用户 */
 function clearSelected() {
-  selectedItem.value = undefined;
+  selectedItems.value = [];
+  if (props.multiple) {
+    emit('update:modelValue', []);
+    emit('change', []);
+    return;
+  }
   emit('update:modelValue', undefined);
   emit('change', undefined);
 }
@@ -82,19 +114,29 @@ function handleClick(event: MouseEvent) {
     clearSelected();
     return;
   }
-  const selectedIds = (
-    props.modelValue === null ? [] : [props.modelValue]
-  ) as number[];
-  dialogRef.value?.open(selectedIds, { multiple: false });
+  dialogRef.value?.open(getSelectedIds(props.modelValue), {
+    multiple: props.multiple,
+  });
 }
 
 /** 弹窗选中回调 */
 function handleSelected(rows: SystemUserApi.User[]) {
-  const item = rows[0];
-  if (!item) {
+  if (rows.length === 0) {
     return;
   }
-  selectedItem.value = item;
+  if (props.multiple) {
+    selectedItems.value = rows;
+    emit(
+      'update:modelValue',
+      rows
+        .map((item) => item.id)
+        .filter((id): id is number => id !== undefined),
+    );
+    emit('change', rows);
+    return;
+  }
+  const item = rows[0]!;
+  selectedItems.value = [item];
   emit('update:modelValue', item.id);
   emit('change', item);
 }
@@ -109,12 +151,22 @@ function handleSelected(rows: SystemUserApi.User[]) {
     @mouseenter="hovering = true"
     @mouseleave="hovering = false"
   >
-    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+    <Tooltip
+      :mouse-enter-delay="0.5"
+      :open="selectedItems.length > 0 ? undefined : false"
+    >
       <template #title>
-        <div v-if="selectedItem" class="leading-6">
-          <div>用户名称：{{ selectedItem.username || '-' }}</div>
-          <div>用户昵称：{{ selectedItem.nickname || '-' }}</div>
-          <div>手机号码：{{ selectedItem.mobile || '-' }}</div>
+        <div v-if="selectedItems.length > 0" class="flex gap-3">
+          <div
+            v-for="selectedItem in selectedItems"
+            :key="selectedItem.id"
+            class="leading-6"
+          >
+            <div>用户名称：{{ selectedItem.username || '-' }}</div>
+            <div>用户昵称：{{ selectedItem.nickname || '-' }}</div>
+            <div>部门：{{ selectedItem.deptName || '-' }}</div>
+            <div>手机号码：{{ selectedItem.mobile || '-' }}</div>
+          </div>
         </div>
       </template>
       <Input