组件概述

Web IMKit 提供了一系列 UI 组件，便于开发者快速搭建 IM 业务场景，以及完成针对不同组件的定制化需求。目前，Web IMKit 提供两类组件：Provider 组件与 Component 组件。

所有组件均为 Web Components 自定义元素组件，这意味着您可以像操作普通 DOM 元素一样对其进行操作。

Provider 组件

Provider 组件用于定义与 IM 业务上下文密切相关的容器组件。此类组件为 Web IMKit 内部业务组件，为确保稳定性，不可由业务层定制，仅通过组件开放接口定义有限功能。

Provider 组件命名规则为 <rc-xxxxxxxx-provider>，即以 rc- 开头，以 -provider 结尾。

Component 组件

Component 组件为无状态组件，基于 Props 定义获取外部既定数据，并根据数据完成 UI 渲染。业务层可依据不同的业务需求，通过 Props 定制化组件的展示效果。

Component 组件命名规则为 <rc-xxxxxxxx>，即以 rc- 开头。

SDK 入口未导出统一的组件标签常量。业务层直接使用对应的 HTML 标签名即可，例如 <rc-imkit-app-provider>、<rc-conversation-list-container-provider>、<rc-conversation-detail-provider>。

基础布局组件

Web IMKit 提供了 <rc-imkit-app-provider> 基础布局组件，便于开发者快速搭建 IM 业务场景。

基础布局组件的核心实现如下：

html

<template>
  <div class="rc-kit-app">
    <rc-conversation-list-container-provider class="list"></rc-conversation-list-container-provider>
    <rc-conversation-detail-provider class="detail"></rc-conversation-detail-provider>
  </div>
</template>

<style>
.rc-kit-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.detail {
  flex: 1 auto;
  overflow: hidden;
}
.list {
  border-right: 1px solid #EFEFEF;
}
</style>

其中包含两个核心子组件，两个组件呈左右布局，分别为：

• <rc-conversation-list-container-provider>：会话列表容器组件
• <rc-conversation-detail-provider>：会话详情容器组件，其中也包含输入框组件

您可以按需选用 <rc-imkit-app-provider> 组件快速搭建业务，也可以直接引用 <rc-conversation-list-container-provider> 和 <rc-conversation-detail-provider> 两个核心业务组件构建定制化布局。

会话列表项配置

Web IMKit 提供了会话列表项配置接口，用于统一调整会话列表中每个会话项的圆角、头像尺寸和不同状态下的背景色。

通过 cloneConversationItemCfg() 可获取当前配置的拷贝；通过 setConversationItemCfg() 可在既有配置基础上进行覆盖更新。

JavaScript

const config = kitApp.cloneConversationItemCfg();

config.radius = 16;
config.portraitSize = 'small';
config.activeBackgroundColor = '#E8F1FF';

kitApp.setConversationItemCfg(config);

提示

setConversationItemCfg() 仅在 kitApp.ready() 前调用生效。

IRCKitConversationItemCfg 支持以下属性：

配置项	类型	默认值	说明
radius	Number	20	会话项圆角大小。
portraitSize	'large' | 'small'	large	会话头像尺寸。
topBackgroundColor	String/Number	#EFF4FF	置顶会话的背景色。
hoverBackgroundColor	String/Number	#F3F5FA	鼠标悬停背景色。
activeBackgroundColor	String/Number	#D2E1FE	当前选中会话的背景色。

显示 UI 组件

以 <rc-imkit-app-provider> 组件为例，在 IM 建立连接成功后，可以选择向 DOM 中添加该组件以展示聊天界面。

JavaScript

const appElement = document.createElement('rc-imkit-app-provider');
// 定义组件宽高
appElement.style.width = '100%';
appElement.style.height = '100%';
// 添加组件到 DOM 中
document.body.appendChild(appElement);