RCUIKit 源码结构
本页介绍的是 RCUIKit 的源码结构和修改入口，不是 uni-app IMKit 的全部源码。uni-app IMKit 由 imkit-store 和 RCUIKit 两部分组成：imkit-store 管理消息、会话和业务资料状态，RCUIKit 提供可直接集成和修改的页面、组件、样式和资源。
界面预览
RCUIKit 源码结构
text
RCUIKit/
├── pages/
│ ├── conversation/
│ │ ├── index.vue # 会话列表页面入口
│ │ ├── conversation-list.vue # 列表、分页与空状态
│ │ └── conversation-item.vue # 单个会话及长按菜单
│ └── chat/
│ ├── index.vue # 会话页面入口
│ ├── forward-message.vue # 消息转发页面
│ ├── video-play.vue # 视频播放页面
│ ├── read-receipt-status.vue # 消息阅读状态页面
│ └── message/ # 会话页面内部的消息 UI
│ ├── message-list.vue # 消息列表
│ ├── message-item.vue # 消息类型分发
│ ├── message-item-common.vue
│ ├── message-bubble.vue
│ ├── messageType/ # 文本、图片、语音、 视频等消息组件
│ ├── messageInput/ # 输入框、表情、工具栏和录音组件
│ └── manager/ # 音频播放管理
├── components/ # 导航栏、头像、徽标等公共组件
├── styles/
│ ├── _variables.scss # 字号、颜色、间距等主题变量
│ └── common.scss # 页面公共基础样式入口
├── assets/ # 内置图标资源及图标映射
└── utils/ # 时间、消息摘要、媒体等工具函数
按功能查看详细说明：
- UI 页面：
pages/conversation/和pages/chat/下的路由页面。 - 消息列表与消息组件：
message-list.vue、message-item*.vue、messageType/。 - 输入区域：
messageInput/、mention-member-list.vue。 - 公共组件与样式：
components/、styles/、assets/。
UI 与数据层关系
RCUIKit 通过 uni.$RongKitStore 使用 imkit-store。imkit-store 对应源码位于仓库的 packages/kit-store，主要模块如下：
| 模块 | UI 中的用途 |
|---|---|
conversationStore | 会话列表、当前打开会话、分页及未读数 |
messageStore | 消息加载、发送、撤回、删除和转发 |
typingStore | 输入状态 |
speechToTextStore | 语音转文字状态 |
appData | 用户、群组、系统会话资料及群成员资料 |
修改页面时，建议保留 Store 的数据读取和状态清理逻辑，只调整模板、展示字段及样式。如果需要改变数据来源，应通过初始化 imkit-store 时传入的用户、群组等数据源回调实现，而不是在 UI 组件中重复请求。
如何定位修改入口
| 修改目标 | 首选入口 |
|---|---|
| 路由页面、页面级交互 | UI 页面 |
| 消息列表、消息气泡和消息类型 | 消息列表与消息组件 |
| 文本、表情、媒体工具栏和录音 | 输入区域 |
| 导航栏、头像、徽标、长按菜单 | 公共组件与样式 |
| 全局字号、颜色、间距和图标 | 公共组件与样式 |
| 消息、会话和输入状态 | 消息与会话管理 |
| 用户、群组和系统会话资料 | 业务数据管理 |
警告
升级时直接替换整个 RCUIKit 目录会覆盖本地 UI 修改。升级前请保留差异，并在新版源码上重新合并。