输入区域
输入区域是会话页面底部的内部模块，入口组件为 RCUIKit/pages/chat/message/messageInput/message-input.vue。它负责切换文本、表情、媒体工具栏和语音录制状态，并处理引用消息、草稿、正在输入状态及群聊 @。
效果预览
源码结构
| 源码 | 作用 |
|---|---|
messageInput/message-input.vue | 输 入区域入口，管理各面板状态，发送文本或引用消息，保存草稿和处理群聊 @ |
messageInput/message-input-face.vue | 内置 Emoji 表情列表 |
messageInput/message-input-toolbar.vue | 图片、视频、拍照和拍摄入口，以及媒体选择、权限检查和上传发送 |
messageInput/message-input-toolbar-item.vue | 工具栏单个操作项的图标与文字 |
messageInput/message-input-voice-recorder.vue | App、H5 以外小程序等平台的语音录制与发送 |
messageInput/message-input-voice-recorder-toutiao.vue | 抖音小程序的语音录制适配 |
messageInput/message-input-voice-recorder-base.vue | 录音按钮和手势状态的基础展示组件 |
message/mention-member-list.vue | 群聊成员选择面板，从 appData.groupMembersCache 读取成员 |
源码目录名是 messageInput，其中 I 为大写。引用组件或修改路径时请保持大小写一致。
文本与引用消息
输入区域通过 conversationStore.openedConversation 确认当前会话，并调用 messageStore.sendMessage 发送消息：
- 普通文本构造
TextMessage。 - 回复消息时构造
ReferenceMessage，携带原消息 UID、发送者和内容。 - 文本为空时不发送；发送完成后清空输入内容和引用状态。
- 单聊输入过程中通过
typingStore.sendTyping发送文本正在输入状态，发送结束后解除限流。 - 输入区域卸载时，通过
conversationStore.updateCacheConversation保存当前会话草稿；再次进入时从openedConversation.draft恢复。
若要修改文本输入框高度、发送键行为、引用预览或草稿逻辑，编辑 message-input.vue 中的输入栏模板及对应方法。
表情面板
点击表情按钮后，message-input.vue 展示 message-input-face.vue。内置表情是 defaultFaces 数组中的 Unicode Emoji，点击后会插入到当前光标位置；面板同时提供删除和发送操作。
自定义表情列表时修改 message-input-face.vue 的 defaultFaces。如果要使用图片表情，还需要同步调整模板、数据结构和点击事件参数，不能只把数组元素替换为图片地址。
媒体工具栏
message-input-toolbar.vue 当前提供以下入口：
| 入口 | H5 | App 和小程序 |
|---|---|---|
| 照片 | 支持 | 支持 |
| 视频 | 支持 | 支持 |
| 拍照 | 不显示 | 支持 |
| 拍摄 | 不显示 | 支持 |
组件会根据平台调用 uni.chooseImage、uni.chooseVideo 或 uni.chooseMedia，完成权限检查、缩略图生成和上传后发送图片、GIF 或小视频消息。当前工具栏每页最多展示 8 项，单次媒体选择上限为 9 个。
要增加工具入口，在 message-input-toolbar.vue 中扩展 Item 类型、getToolbarItems 和 handleItemClick；图标和单项样式在 message-input-toolbar-item.vue 中修改。新增入口如需原生权限，应同时补齐 App 和各小程序平台的授权处理。
语音录制
非 Web 平台的输入栏显示语音切换按钮：
- 抖音小程序使用
message-input-voice-recorder-toutiao.vue。 - 其他受支持平台使用
message-input-voice-recorder.vue。 - 两者复用
message-input-voice-recorder-base.vue展示按住说话、上滑取消等录音状态。
录音完成后，组件通过媒体上传工具发送高清语音消息，并使用 typingStore 发送语音正在输入状态。修改录音时长、手势阈值或提示文案时，应同时检查两个平台实现，避免只修改其中一个分支。
群聊 @ 成员
仅群聊启用 @ 成员能力。输入 @ 后，message-input.vue 打开 mention-member-list.vue；该组件从 appData.groupMembersCache.getGroupMembers(groupId) 读取成员，并额外提供“所有人”选项。
选择成员后，输入区会插入 @成员名称 ，发送时生成 mentionedInfo：选择“所有人”使用 MentionedType.ALL，选择指定成员使用 MentionedType.SINGAL 和 userIdList。
如需替换成员列表的数据来源，请先确保 imkit-store 的群成员缓存仍能在消息展示、引用消息和用户信息查询中正常工作，再调整 mention-member-list.vue 的读取逻辑。
常见修改入口
- 调整输入区整体高度、按钮顺序和面板切换：
messageInput/message-input.vue。 - 调整表情数量、排列和面板高度：
messageInput/message-input-face.vue。 - 调整照片、视频、拍照、拍摄入口：
messageInput/message-input-toolbar.vue。 - 调整录音按钮、手势和状态提示：三个
message-input-voice-recorder*.vue文件。 - 调整群成员列表项：
message/mention-member-list.vue和message/select-member-item.vue。 - 调整颜色和字号：
RCUIKit/styles/_variables.scss。
输入区域包含 WEB、APP-PLUS、MP-WEIXIN 和 MP-TOUTIAO 等条件编译逻辑。修改键盘、安全区、媒体选择或录音代码后，应至少在项目实际支持的 H5、App 和小程序端分别验证。