用于承载用户侧发送的历史对话列表。
:::demo 基础用法。
conversations/basic
:::
:::demo 配合 menu
属性,配置操作菜单
conversations/with-menu
:::
:::demo 使用 activeKey
、onChange
属性,控制当前选中的会话
conversations/controlled-mode
:::
:::demo 使用 groupable
属性开启分组,开启后默认按 Conversation.group 字段分组
conversations/group
:::
:::demo 通过 groupable.sort
属性对分组排序, 通过 groupable.title
自定义渲染分组
conversations/group-sort
:::
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
activeKey | 当前选中的值 | string | - | - |
defaultActiveKey | 默认选中值 | string | - | - |
items | 会话列表数据源 | Conversation [] |
- | - |
onActiveChange | 选中变更回调 | (value: string) => void | - | - |
menu | 会话操作菜单 | MenuProps | ((value: Conversation ) => MenuProps) |
- | - |
groupable | 是否支持分组, 开启后默认按 Conversation.group 字段分组 |
boolean | GroupableProps | - | - |
styles | 语义化结构 style | Record<'item', CSSProperties> | - | - |
classNames | 语义化结构 className | Record<'item', string> | - | - |
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
key | 唯一标识 | string | - | - |
label | 会话名称 | VNode | string | - | - |
timestamp | 会话时间戳 | number | - | - |
group | 会话分组类型,与 ConversationsProps.groupable 联动 |
string | - | - |
icon | 会话图标 | VNode | string | - | - |
disabled | 是否禁用 | boolean | - | - |
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
sort |
分组排序函数 | (a: string, b: string) => number | - | - |
title |
自定义渲染组件 | ((group: string, info: { components: { GroupTitle: typeof GroupTitle } }) => VNode) | - | - |