超级群频道 UI 组件

rev24 为超级群补上了频道选择/管理的 UI 组件:Web IMKit ChannelSwitcher、Android IMKit ChannelListDialog(配合 ChatFragment 频道栏)、Flutter IMKit ChannelList / ChannelSwitcher;Web/Electron Demo 已实际接入。本页给出组件能力矩阵、交互流程、主题与平台差异。

契约口径:SDK 运行时组件

本组件由 SDK 运行时直接提供,不是 IDL 契约组件:IMKit 契约(sdk-imkit)只声明 10 个契约组件(ConversationListView / ChatView / MessageBubble / MessageInput / Avatar / UnreadBadge / TimeSeparator / MessageStatusIndicator / Theme / IMKitFacade),不包含当前版本频道 UI 组件;因此下面的 props/事件以各端实际实现为准,跨端命名不保证一致。

能力矩阵​

端组件/入口能力依赖
WebChannelSwitcher(可独立使用;ChatView 传 showChannelSwitcher 自动挂载)群级消息 + 频道列表、public/private 标识、成员数、选中态、创建/加入/离开按钮、select/create/join/leave 事件频道数组由宿主从 listSupergroupChannels 获取后传入
AndroidChannelListDialog + ChatFragment 顶部频道栏频道列表/当前频道、创建(名称 + public/private)、加入、离开、进入;结果经 Fragment Result 回传并切换会话IMKit.requireClient() 的 IMLib 公开 API(不直连网络)
FlutterChannelList(列表/选择)、ChannelSwitcher(聊天页顶部入口)列表/选择、创建/加入/离开回调;未传回调且注入 client 时组件内部调用 IMLib;ChatView 在 SUPER_GROUP 会话默认自动挂载切换器client + loadChannels(可注入 loader 便于测试)
Electron复用 Web ChannelSwitcher(Demo 从 sdk/web/imkit.mjs 导入)与 Web 相同;主题切换时对组件 update({ theme })Electron 渲染进程无独立 IMKit 组件包
Native / iOS / HarmonyOS无频道 UI 组件仅 IMLib 契约/声明面;UI 需宿主自绘—

交互流程​

  1. 拉取频道列表

    调用 IMLib listSupergroupChannels(groupId) 拿到当前用户可见的频道(rev24:private 频道仅成员/群主/管理员可见,见「私有频道列表可见性」),把数组交给组件。

  2. 切换频道(进入频道视图)

    用户点击频道 → 组件发出 select(channelId, channel);宿主把 channelId 传给 ChatView/ChatFragment/聊天页,之后发送与历史都带该 channelId;选中「群级消息」时 channelId 为空。

  3. 创建频道

    Web:create 事件(payload 为 {groupId}),由宿主弹表单并调用 createSupergroupChannel;Android:Dialog 内置创建对话框(名称 + public/private);Flutter:onCreate 回调或组件内建调用。

  4. 加入 / 离开

    未加入的频道显示「加入」(public 可直接加入;private 需邀请后加入),已加入显示「退出」。成功后重新拉取列表或就地更新。

  5. 群级消息

    列表首项为「群级消息」(Web showGroupLevel、Flutter showGroupLevelOption、Android 列表顶部「群级消息」行);选中即 channelId 置空。

主题与外观​

端主题机制深色
Web9 个 Theme token:--imkit-background、--imkit-surface、--imkit-text、--imkit-text-secondary、--imkit-primary、--imkit-mention、--imkit-bubble-mine、--imkit-bubble-other、--imkit-dangerTheme 应用 data-imkit-theme="dark";选中 chip 用 text token 保证对比度
AndroidIMKit 语义颜色:imkit_surface / imkit_text / imkit_text_secondary / imkit_primary / imkit_selected_bgvalues-night 自动生效
FlutterImkitTheme(background / surface / text / textSecondary / primary / danger 等)跟随 light/dark(ImkitTheme.of(context))
Electron复用 Web token;Demo 切换主题时调用 channelSwitcher.update({ theme })同 Web

事件与回调​

事件WebAndroidFlutter
选择频道select({ channelId, channel }) / onSelect(channelId, channel)Dialog 结果 RESULT_CHANNEL_ID / RESULT_CHANNEL_NAME → ChatFragment switchChannelonSelect(SupergroupChannel?)(null = 群级)
创建频道create({ groupId }) / onCreate(payload)Dialog 内创建(名称 + 类型),成功后刷新列表onCreate() 或内建调用
加入频道join({ channelId, channel }) / onJoinDialog「加入」按钮onJoin(SupergroupChannel)
离开频道leave({ channelId, channel }) / onLeaveDialog「离开」按钮onLeave(SupergroupChannel)

平台差异与注意事项​

项说明
命名不同Web/Android/Flutter 的 props 与事件命名不同(本页按端列出);不要假设跨端 API 一致
列表数据来源组件不主动拉取(Web/Flutter 除内建调用回退外);宿主负责 listSupergroupChannels 并在创建/加入/离开后刷新
私有频道列表rev24 起服务端按调用者过滤:非成员看不到 private 频道;组件拿到的是已过滤列表,不需要前端再隐藏
频道成员管理当前版本 UI 只做列表/选择/创建/加入/离开;成员增删仍走 channel/members/* Server API,未提供管理页
IMKit 契约面上述组件不在 sdk-imkit.json;契约文档页仍以 10 个契约组件为准,组件升级不影响 IDL 冻结版本
无 UI 平台Native/iOS/HarmonyOS 无频道 UI;Electron 复用 Web 组件(Demo 已验证)

相关页面​