Web IMKit 功能列表
本页用能力矩阵对比 10 个 IMKit 组件的 UI 能力，并给出每个组件的行为摘要。矩阵由 IDL behaviors / props 文本推导，完整行为见组件页与组件 API。
组件与能力矩阵
| 组件 | 排序 / 置顶 | 未读角标 | 免打扰 | 空态 / 骨架 | 时间分割 | 发送状态 | 已读回执 | 消息渲染 | 输入与草稿 | @ 提醒 | 主题 | 格式化 / 多语言 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ConversationListView | ✓ | ✓ | ✓ | ✓ | — | — | ✓ | — | ✓ | ✓ | ✓ | ✓ |
ChatView | — | — | — | — | ✓ | — | ✓ | ✓ | ✓ | ✓ | — | ✓ |
MessageBubble | — | — | — | — | — | — | — | ✓ | ✓ | — | ✓ | — |
MessageInput | — | — | ✓ | — | — | — | — | — | ✓ | ✓ | — | — |
Avatar | — | — | — | — | — | — | — | — | — | — | — | ✓ |
UnreadBadge | — | ✓ | ✓ | — | — | — | — | — | — | ✓ | — | ✓ |
TimeSeparator | — | — | — | — | ✓ | — | — | — | — | — | — | ✓ |
MessageStatusIndicator | — | ✓ | — | — | — | ✓ | ✓ | — | — | — | — | — |
Theme | — | — | — | — | — | — | — | ✓ | — | ✓ | ✓ | — |
IMKitFacade | — | — | — | — | — | — | — | — | — | — | ✓ | ✓ |
✓ 表示 IDL 行为/属性文本中声明了该能力；— 表示未声明。矩阵用于快速选型，具体交互细节以组件页为准。
SDK 运行时组件（非 IDL 契约组件）
本端另有频道 UI 运行时组件：ChannelSwitcher；未写入 sdk-imkit.json，因此不在上表，但已随 SDK 提供。
能力/主题/事件见各组件页与「超级群频道 UI 组件」总览。
组件行为摘要
| 组件 | 职责 | 行为（来自 IDL） | 数据源 |
|---|---|---|---|
ConversationListView | 会话列表 | 排序：置顶优先，其余按 updatedAt 倒序；未读角标：unreadCount>0 显示；>99 显示 99+；mention count 独立角标；免打扰（notificationLevel=2）显示静音图标且不显示红点（保留数字可选）；空闲（无会话）显示空态；加载中显示骨架；点击会话触发 select，宿主负责跳转 ChatView | IMLib.getConversationList / CONVERSATION 事件增量更新 |
ChatView | 会话详情（消息流 + 输入区） | 倒序渲染（最新在底部）；新消息到达自动滚底（用户上翻时给出“有新消息”提示）；按 messageId 去重；本地先显示 pending 气泡，ack 后替换为服务端消息；时间分隔：同一会话间隔 >5 分钟显示时间条；撤回消息渲染为占位文案“消息已撤回”，不显示原文；引用消息渲染引用块；@提及在文本中高亮；已读回执：发送者可见已读人数/状态（群聊按 readCounts/totalMembers）；翻页加载历史，beforeSeq 游标，hasMore=false 时显示“没有更多”；向每个消息气泡透传 message.reactions / message.expansion，并转发 onReactionClick / onReactionLongPress（setMessages / appendMessages / 宿主变更消息后始终取最新值） | — |
MessageBubble | 消息气泡（按内容类型渲染） | 回应 chip 按 reactionTime 升序排列（同值保持输入顺序）；hasCurrentUserReacted=true 的 chip 高亮为 active 态（主题色描边 + aria-pressed=true）；chip 计数 >99 显示 99+；计数<=0 或 reactionId 空的 chip 不渲染；消息扩展徽标按 key:value 渲染，最多 3 对，超出部分显示 +N（N=未展示对数）；气泡长按（pointerdown >=500ms）或右键触发 reaction_longpress(message) / onReactionLongPress，由宿主打开回应选择器；streaming=true 时 content.type=stream 渲染增量文本 + 生成中光标；complete 后收敛为普通文本气泡（streaming:false 可关闭） | — |
MessageInput | 输入区 | 输入时 500ms 防抖触发 typing(true)，3s 无输入触发 typing(false)；被禁言（muted=true）禁用发送并提示；仍可查看；草稿自动保存（IMLib.saveTextMessageDraft），发送成功后清空；群聊支持 @ 选择器（全员/指定成员），生成 mentionedInfo | — |
Avatar | 头像 | url 缺失或加载失败时显示姓名首字/末字，背景色由 userId 哈希稳定生成 | — |
UnreadBadge | 未读/提及角标 | 0 隐藏；>99 显示 99+；muted 用灰点；提及用 @ 角标 | — |
TimeSeparator | 时间分隔/格式化 | 当天 HH:mm；昨天“昨天 HH:mm”；7 天内“周X HH:mm”；更早 YYYY-MM-DD HH:mm | — |
MessageStatusIndicator | 发送状态 | sending 转圈；failed 显示重发；单聊显示已读/未读；群聊显示 n/m | — |
Theme | 主题令牌 | 默认跟随系统；宿主可覆盖令牌；暗色对比度满足可读性 | — |
IMKitFacade | 组件门面/挂载入口 | mount/update/destroy 生命周期幂等；同一容器重复 mount 复用实例；组件销毁释放监听 | — |
按场景选择
| 场景 | 推荐组件 |
|---|---|
| 会话中心 / 消息首页 | ConversationListView + UnreadBadge |
| 单聊 / 群聊页面 | ChatView + MessageInput |
| 消息流渲染 | MessageBubble + TimeSeparator |
| 状态与反馈 | MessageStatusIndicator + UnreadBadge |
| 统一外观 | Theme（暗色 / 品牌色） |
| 整体接入 | IMKitFacade |
| 超级群频道切换 | ChannelSwitcher（SDK 运行时组件） |