消息列表与消息组件
消息列表是会话页面的内部模块，不是独立路由页面。源码位于 RCUIKit/pages/chat/message/，由消息列表、通用消息容器、消息气泡和各消息类型组件分层组成。
效果预览
源码结构
| 源码 | 作用 |
|---|---|
message-list.vue | 从 messageStore 读取当前会话消息，加载历史消息、监听新消息、控制滚动和发送阅读回执 |
message-item.vue | 根据 message.messageType 将消息分发给对应的展示组件 |
message-item-common.vue | 统一处理头像、群成员名称、发送状态、阅读状态、重发和长按菜单 |
message-bubble.vue | 提供收发方向、背景色、圆角、激活态和内容插槽 |
messageType/*.vue | 实现文本、图片、语音、视频、文件和通知消息的具体内容 |
message-list.vue 会通过 messageStore.getMessages 获取内存消息，并通过 messageStore.getHistoryMsgList 加载历史消息。当前会话由 conversationStore.openedConversation 提供；收到当前会话的新消息后，列表会清除该会话未读数，并在启用 V5 阅读回执时上报可见消息。
内置消息映射
以下映射来自 message-item.vue 的实际分发逻辑：
| 消息类型 | 展示组件 | 说明 |
|---|---|---|
MessageType.TEXT、MessageType.REFERENCE | messageType/message-text.vue | 文本消息和引用消息 |
MessageType.IMAGE、MessageType.GIF | messageType/message-image.vue | 图片和 GIF 消息，点击后调用图片预览 |
MessageType.HQ_VOICE | messageType/message-audio.vue | 高清语音消息，支持播放和语音转文字 |
MessageType.SIGHT | messageType/message-sight.vue | 小视频消息，点击后打开视频播放页面 |
MessageType.FILE | messageType/message-file.vue | 文件消息 |
MessageType.RECALL_MESSAGE_TYPE | messageType/message-notification.vue | 撤回提示消息 |
INFO_NOTIFICATION_MESSAGE_TYPE | messageType/message-notification.vue | 小灰条通知消息 |
| 其他未匹配类型 | messageType/message-notification.vue | 显示“暂不支持该消息类型” |
通用消息外观与操作
常规消息类型会复用 message-item-common.vue。该组件根据消息方向排列头像和内容，在群聊接收消息上方显示成员名称，并展示发送中、发送失败及阅读状态。
默认长按菜单根据消息状态和会话类型提供以下操作：
- 转发：将当前消息写入
messageStore.selectedMessages，然后打开forward-message页面。 - 撤回：仅发送方的已发送消息显示，调用
messageStore.recallMessage。 - 回复：系统会话以外的已发送消息显示，通过事件将消息交给输入区域生成引用消息。
- 重发：点击发送失败图标后调用
messageStore.sendMessage；图片、语音、视频和文件消息使用媒体消息重发逻辑。
高清语音组件还会读取 speechToTextStore。当服务端下发的应用配置开启语音转文字后，长按语音消息可显示“转文字”或“取消转文字”。
修改消息展示
修改气泡样式
在 message-bubble.vue 中修改 .rc-bubble、.rc-bubble-bg 和 .rc-bubble-reverse-bg。气泡颜色来自 RCUIKit/styles/_variables.scss，如只需统一调整主题颜色，优先修改变量文件。
修改头像、昵称和菜单
在 message-item-common.vue 中修改：
portrait：调整默认头像或头像选择逻辑。.rc-common-info-name：调整群成员名称的显示和样式。options：增加、删除或按条件显示长按菜单项。handleSelect：实现新增菜单项的操作逻辑。
修改或增加消息类型
修改现有消息类型时，直接编辑 messageType/ 下对应组件。增加业务自定义消息时，需要完成消息类型注册、Vue 组件创建和 message-item.vue 分发条件配置，详见自定义消息。
自定义常规气泡消息可以复用 message-item-common.vue 和 message-bubble.vue，从而保持头像、方向、发送状态和长按操作一致。通知类消息可复用 message-notification.vue。
message-item.vue 的分发条件按顺序执行。添加自定义消息时应使用 v-else-if，并放在最终的“不支持该消息类型”分支之前。