场景教程：IMKit 自定义会话列表与主题

import { ConversationListView, Theme, messagePreview, formatListTime } from '@ni-paas/im-web/imkit';
import { IMKitFacade } from '@ni-paas/im-web/imkit';

// 1) 主题：跟随系统 + 品牌色覆盖；切换时只重建 Theme 并 apply。
const media = matchMedia("(prefers-color-scheme: dark)");
let theme = media.matches ? Theme.dark() : Theme.light();
theme = theme.withColors({ primary: "#0ea5e9", mention: "#0ea5e9" });

// 2) 门面挂载：同一容器重复 mount 会复用实例并 update，不会重复创建。
const kit = new IMKitFacade({ container: "#conversation-pane", theme });
const list = kit.mount("ConversationListView", {
  conversations: [],            // 来自 IMLib.getConversationList()
  activeTargetId: "",
  options: { showPinned: true, showUnread: true, showDraft: true, showMention: true },
  virtualThreshold: 100,        // 超过 100 条启用窗口化渲染
  onSelect: ({ conversation }) => openChat(conversation),
  onLongPress: ({ conversation }) => showActions(conversation),
});

media.addEventListener("change", (event) => {
  theme = (event.matches ? Theme.dark() : Theme.light()).withColors({ primary: "#0ea5e9", mention: "#0ea5e9" });
  kit.setup({ theme });
  list.update({ conversations: list.props.conversations, theme }); // 只重绘，不重建
});

// 3) 自定义行内容：优先复用官方 helper，保证与其它端的摘要一致。
const preview = messagePreview(conversation.lastMessage);       // "[图片]"、"[草稿]" 等
const time = formatListTime(conversation.updatedAt);             // 今天 HH:mm / 昨天 / MM-dd

/* 宿主 CSS 优先：IMKit 兜底样式用 :where() 零特异性，覆盖不需要 !important。 */
.conv-item { border-radius: 12px; margin: 4px 8px; }
.conv-item.active { box-shadow: inset 3px 0 0 var(--imkit-primary); }
.conv-title { font-weight: 700; }
.conv-preview { color: var(--imkit-text-secondary); }
.mention-badge { background: var(--imkit-mention); color: #fff; border-radius: 999px; }

// 1) 初始化：主题令牌覆盖 + 跟随系统深浅色。
IMKit.init(context, new IMKitOptions.Builder()
    .credentials("demo", "http://127.0.0.1:8080")
    .themeMode(IMKitTheme.Mode.SYSTEM)
    .themeColors(new HashMap<String, Object>() {{
        put("primary", "#0ea5e9");
        put("mention", "#0ea5e9");
    }})
    .build());

// 2) 会话列表行为回调：返回 true 表示宿主已处理，不再走默认跳转。
IMKit.setConversationListBehaviorListener(new ConversationListBehaviorListener() {
    @Override public boolean onConversationClick(Context context, View view, Conversation conversation) {
        IMKit.routeToConversation(context, new ConversationIdentifier(
            conversation.getConversationType(), conversation.getTargetId()));
        return true;
    }
    @Override public boolean onConversationLongClick(Context context, View view, Conversation conversation) {
        showConversationActions(conversation); // 自定义菜单：置顶/免打扰/删除
        return true;
    }
});

// 3) 打开会话列表；也可用 Fragment 自行挂载（newInstance() + FragmentManager）。
IMKit.routeToConversationList(context);

// 4) 运行时读取令牌（自定义 View 与 IMKit 保持一致）。
int primary = IMKit.theme().color("primary");
int rowHeight = IMKit.theme().dimen("conversationItemHeight");
boolean dark = IMKit.theme().isDark();

import 'package:flutter/material.dart';
import 'package:impaas_imkit/impaas_imkit.dart';

final theme = ImkitTheme.light.copyWith(
  primary: const Color(0xFF0EA5E9),
  mention: const Color(0xFF0EA5E9),
);

// 1) 注入主题（子树内所有 IMKit 组件生效）。
MaterialApp(
  theme: theme.toThemeData(),
  home: ImkitThemeScope(
    theme: theme,
    child: Builder(
      builder: (context) {
        final controller = ConversationListController(client: client)..load();
        return ConversationListView(
          controller: controller,      // 由 controller 负责加载/刷新/排序
          activeTargetId: activeTargetId,
          options: const ConversationListOptions(showDraft: true, showMention: true),
          onSelect: (conversation) => openChat(conversation),
          onLongPress: (conversation) => showActions(conversation),
          onRefresh: () => controller.refresh(),
        );
      },
    ),
  ),
);

// 2) 本地操作：置顶/已读/删除都走 controller，列表自动刷新。
await controller.toggleTop(conversation);
await controller.markRead(conversation);
await controller.remove(conversation);