会话列表页面
会话列表页面由页面入口、列表和列表项三层组件组成，路由为 RCUIKit/pages/conversation/index。
效果预览
页面组成
| 源码 | 职责 |
|---|---|
RCUIKit/pages/conversation/index.vue | 组合导航栏、连接状态和会话列表；页面显示时清空当前打开的会话 |
RCUIKit/pages/conversation/conversation-list.vue | 监听会话数据、处理首屏与加载更多、空状态、点击跳转和长按菜单互斥 |
RCUIKit/pages/conversation/conversation-item.vue | 展示头像、名称、免打扰状态、消息摘要、时间、未读数及长按菜单 |
页面还复用了以下公共组件：
components/nav-bar.vue：顶部导航栏。components/connect-status.vue：连接状态提示。components/avatar.vue：会话头像。components/badge.vue：未读数。components/rc-icon.vue：草稿、发送状态、免打扰等图标。components/long-press-popup.vue：置顶、免打扰和删除菜单。
数据与交互
conversation-list.vue 使用 uni.$RongKitStore.conversationStore：
- 监听
conversations，将 Store 数据同步到界面列表。 - 调用
getConversations()获取首屏和后续分页数据。 - 点击会话时调用
openConversation(item)，清除该会话未读数后跳转到聊天页。 index.vue在onShow中调用openConversation(null)，退出聊天页后清理当前打开会话及多余消息缓存。
会话名称和头像由会话数据中的 name、portraitUri 提供；缺失时，UI 使用 utils/index.ts 中的 parseConversationName 和 generateDefaultAvatar 生成默认展示。消息撤回摘要需要发送者名称时，conversation-item.vue 会通过 uni.$RongKitStore.appData 读取或拉取用户资料。
如果需要展示真实的用户、群组名称和头像，请优先检查初始化 imkit-store 时配置的资料数据源。只修改会话项模板不能补全缺失的业务资料。
常见修改
修改导航栏
在 pages/conversation/index.vue 中修改 nav-bar 的插槽内容 、边框和左右区域宽度。若需要统一调整所有页面的导航栏结构或行为，再修改 components/nav-bar.vue。
抖音小程序使用系统导航栏，源码通过条件编译隐藏自定义 nav-bar，并调用 uni.setNavigationBarTitle 设置标题。修改时应保留对应的 MP-TOUTIAO 条件分支。
修改会话项布局
在 conversation-item.vue 中调整 .rc-con-item 下的模板和样式：
rc-con-item-avatar：头像尺寸与间距。rc-con-item-middle-name：会话名称和免打扰图标。rc-con-item-middle-message：草稿、发送状态、已读状态和消息摘要。rc-con-item-bottom：时间和未读数。
头像、字号、颜色等公共设置可结合公共组件与样式统一修改。
修改消息摘要
会话项的 latestMessage 计算属性负责草稿、撤回消息和内置消息类型的摘要。需要让自定义消息显示在会话列表时，在 conversation-item.vue 标注的自定义消息处理位置，按自定义 messageType 返回摘要文本。
修改长按菜单
conversation-item.vue 中的 options 决定菜单内容，当前包含：
- 置顶或取消置顶。
- 免打扰或取消免打扰。
- 删除会话。
菜单选择后，conversationalOperation 调用 IMLib 对应接口。新增菜单项时，需要同时增加 options、状态映射和操作分支；菜单外观及定位逻辑位于 components/long-press-popup.vue。
修改未读数
badge.vue 默认超过 99 时展示 99+。会话项根据免打扰状态选择未读徽标背景色：普通会话使用红色，免打扰会话使用灰色。可以修改 unreadCountBgColor 的计算规则，或通过 badge.vue 的 max、color、bgColor 属性调整展示。
修改空状态和分页数量
- 空状态文案与图标位于
conversation-list.vue的.rc-empty区域。 - 首屏数量由
RCUIKit/constant导出的FIRST_SCREEN_COUNT控制。 scroll-view触底后由loadMore调用conversationStore.getConversations(lastConversation)获取下一页。
修改分页时应保留 hasMoreConversations 判断，避免列表到底后继续请求。
注意事项
conversation-list.vue使用 MobXautorun监听 Store。增加监听后，应在组件卸载时执行 disposer，防止重复订阅。- 点击会话时会先写入
openedConversation，聊天页依赖该值加载内容。不要只保留页面跳转而删除openConversation(item)。 conversation-item.vue同时处理不同平台的尺寸和定位差异，修改rpx、长按菜单或滚动容器时，应在 App、H5 和目标小程序分别验证。