Electron IMKit 快速开始
本页在 5 个步骤内完成 Electron 端 IMKit 接入：先接入 IMLib，再初始化门面，最后挂载会话列表与会话页。IMKit 只消费 IMLib 的公开数据，不重复实现通信能力。
- 接入 IMLib
按 IMLib 快速开始 完成初始化与连接；IMKit 不重复建立连接。
- 导入 IMKit
按「导入 SDK」安装依赖；只依赖 @ni-paas/im-electron 公开 API；禁止 import 传输层/REST/DB；契约校验器静态扫描 import 面
- 初始化门面
初始化 IMLib 客户端并连接，然后创建 IMKit 门面（或调用静态 init）；门面持有主题、语言与组件实例。
- 挂载会话列表
传入 conversations 与交互回调；会话数据来自 IMLib 的 getConversationList 与 CONVERSATION 事件。
- 挂载会话页与输入区
传入 messages / currentUserId / hasMore；发送与已读回调转调 IMLib 对应接口。
1. 接入 IMLib
IMKit 的所有数据都来自 IMLib 公开接口：连接、会话列表、历史消息、发送、已读回执与未读清零。先完成 IMLib 接入再使用 IMKit。
2. 导入 IMKit
npm
npm install @ni-paas-im/electron
# IMKit 类型声明：@ni-paas-im/electron（types/index.d.ts）3. 初始化门面
JavaScript / TypeScript
// 主进程已完成 IMLib 初始化与 preload 桥接；renderer 只做挂载
import { IMKit } from '@ni-paas-im/electron';
const handle = IMKit.mount(document.getElementById('app'), 'ConversationListView', {
conversations: await window.im.getConversationList(),
theme: { mode: 'light', colors: { primary: '#4f46e5' } },
});门面：IMKit；IMKit.mount(container, component, props) 返回 { update, destroy }；框架适配由宿主完成（binding: React）。
4. 挂载会话列表
JavaScript / TypeScript
import { IMKit } from '@ni-paas-im/electron';
const handle = IMKit.mount(container, 'ConversationListView', {
conversations,
activeTargetId: 'user2',
options: { showPinned: true, showUnread: true, showDraft: true, showMention: true },
onSelect: (conversation) => openChat(conversation),
});
handle.update({ conversations: nextConversations });5. 挂载会话页与输入区
JavaScript / TypeScript
IMKit.mount(container, 'ChatView', {
conversationType: 1,
targetId: 'user2',
messages,
currentUserId: 'alice',
hasMore: true,
showReadCount: true,
onLoadMore: loadMore,
onSendText: (text) => window.im.sendText('user2', text),
});