会话列表（ConversationListView）

会话列表：ConversationListView 是 IDL 定义的跨端 UI 组件，props / events / behaviors 在各平台语义一致。本页给出契约属性、事件、渲染行为、数据源与 Web 端绑定/示例。

契约属性（props）​

属性类型必填说明
conversationsConversation[]是会话数组（来自 IMLib.getConversationList / CONVERSATION 事件）
activeTargetIdstring否当前高亮会话的 targetId
themeTheme否主题对象（mode + 9 个颜色令牌）
options{showPinned:bool,showUnread:bool,showDraft:bool,showMention:bool}否显示选项（置顶 / 未读 / 草稿 / @ 提及）：{ showPinned:bool, showUnread:bool, showDraft:bool, showMention:bool }

事件​

事件参数说明
selectconversation点击会话，宿主负责跳转到 ChatView
longpressconversation长按会话，宿主展示操作菜单（置顶 / 免打扰 / 删除）
refresh—下拉刷新，宿主重新拉取会话列表

渲染行为​

  • 排序：置顶优先，其余按 updatedAt 倒序
  • 未读角标：unreadCount>0 显示；>99 显示 99+；mention count 独立角标
  • 免打扰（notificationLevel=2）显示静音图标且不显示红点（保留数字可选）
  • 空闲（无会话）显示空态；加载中显示骨架
  • 点击会话触发 select，宿主负责跳转 ChatView

数据源​

IMLib.getConversationList / CONVERSATION 事件增量更新

依赖边界

组件不直连网络与数据库：会话/消息由宿主从 IMLib 拉取后传入，组件只做排序、角标、格式化与渲染。

平台绑定​

项值
公开符号 / 签名IMKit.mount(container, 'ConversationListView', props)
导出列表包含是
UI 框架纯 DOM 组件（无框架依赖），CSS 变量主题，IMKit.mount(container, component, props)

使用示例​

JavaScript (ESM)
import { IMKit } from '@ni-paas/im-web/imkit';

const list = IMKit.mount(document.getElementById('app'), 'ConversationListView', {
  conversations,
  activeTargetId: 'user2',
  options: { showPinned: true, showUnread: true, showDraft: true, showMention: true },
  onSelect: (conversation) => openChat(conversation),
});
// 复用同一容器实例（幂等），数据变化时 update
list.update({ conversations: await client.getConversationList() });

相关文档​