AiConversations 会话记录
AiConversations 是一个专为 AI 会话设计的侧边栏列表组件，提供了会话的新增、切换、重命名和删除等完整交互能力。
基础用法
展示了会话列表的基本渲染和交互。
基础用法
自定义主题
通过 theme-overrides 属性可以轻松定制组件的局部样式。
自定义主题
置顶与时间分组
组件默认支持按时间分组展示，并支持置顶对话功能。
置顶与分组
虚拟滚动
处理海量历史对话记录时，通过开启 virtual-scroll 提升性能。
虚拟滚动
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 会话列表数据 | AiConversation[] | [] |
| activeId | 当前选中的会话 ID | string | '' |
| loading | 是否正在加载 | boolean | false |
| theme-overrides | 主题变量覆盖 | AiConversationsThemeVars | — |
| grouped | 是否按时间分组显示对话 | boolean | true |
| virtual-scroll | 是否启用虚拟滚动 | boolean | false |
| virtual-scroll-height | 虚拟滚动容器高度 | number | 400 |
| virtual-scroll-item-height | 虚拟滚动每项高度 | number | 50 |
| virtual-scroll-overscan | 虚拟滚动缓冲区数量 | number | 3 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| update:activeId | 选中项改变时触发 | (id: string) => void |
| create | 点击新增按钮时触发 | () => void |
| delete | 点击删除按钮时触发 | (item: AiConversation) => void |
| edit | 完成标题编辑时触发 | (item: AiConversation, newTitle: string) => void |
| click | 点击会话项时触发 | (item: AiConversation) => void |
| pin | 点击置顶按钮时触发 | (item: AiConversation, pinned: boolean) => void |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| add-icon | 自定义新增按钮图标 | — |
| add-text | 自定义新增按钮文本 | — |
| group-label | 自定义分组标签文本 | { label: string } |
| edit-icon | 自定义编辑按钮图标 | — |
| delete-icon | 自定义删除按钮图标 | — |
| empty | 列表为空时的展示 | — |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| scrollToItem | 滚动到指定 ID 项 | (id: string) |
| scrollToIndex | 滚动到指定索引项 | (index: number) |
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4。在 Nuxt 项目中，组件会被自动按需导入。
有关详细配置，请阅读 Nuxt 集成文档。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-conversations-bg-color | 容器背景色 | var(--yh-bg-color) |
--yh-ai-conversations-border-color | 边框颜色 | var(--yh-border-color) |
--yh-ai-conversations-header-padding | 头部内边距 | 16px |
--yh-ai-conversations-item-padding | 项目内边距 | 12px 16px |
--yh-ai-conversations-hover-bg-color | 悬停时的背景色 | var(--yh-bg-color-page) |
--yh-ai-conversations-active-bg-color | 选中时的背景色 | var(--yh-color-primary-light-9) |
--yh-ai-conversations-active-text-color | 选中时的文字颜色 | var(--yh-color-primary) |
--yh-ai-conversations-title-font-size | 标题字体大小 | 14px |
--yh-ai-conversations-time-font-size | 时间字体大小 | 12px |