AiConversations 会话记录
AiConversations 是一个专为 AI 会话设计的侧边栏列表组件，提供了会话的新增、切换、重命名和删除等完整交互能力。
基础用法
展示了会话列表的基本渲染和交互。
基础用法
自定义主题
通过 theme-overrides 属性可以轻松定制组件的局部样式。
自定义主题
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 会话列表数据 | AiConversation[] | [] |
| activeId | 当前选中的会话 ID | string | '' |
| loading | 是否正在加载 | boolean | false |
| theme-overrides | 主题变量覆盖 | AiConversationsThemeVars | — |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| update:activeId | 选中项改变时触发 | (id: string) => void |
| create | 点击新增按钮时触发 | () => void |
| delete | 点击删除按钮时触发 | (item: AiConversation) => void |
| edit | 完成标题编辑时触发 | (item: AiConversation, newTitle: string) => void |
| click | 点击会话项时触发 | (item: AiConversation) => void |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| add-icon | 自定义新增按钮图标 | — |
| add-text | 自定义新增按钮文本 | — |
| edit-icon | 自定义编辑按钮图标 | — |
| delete-icon | 自定义删除按钮图标 | — |
| empty | 列表为空时的展示 | — |
在 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 |