AiThinking 思考中
用于展示 AI 模型在生成结果之前的思考或推理状态，支持折叠详情以保持对话页面的整洁。
基础用法
通过 status 属性控制当前思考的状态。
基础用法
自动收起
设置 auto-collapse 为 true，当 status 变为 end 时，组件会自动收起展开的内容。
已完成思考
自动收起
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue / v-model | 详情是否展开 | boolean | false |
| status | 思考状态 | 'start' | 'thinking' | 'end' | 'error' | 'thinking' |
| title | 标题文本 | string | — |
| content | 详情正文 | string | — |
| auto-collapse | 完成后是否自动收起 | boolean | false |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义详情显示内容 |
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4。在 Nuxt 项目中，组件会被自动按需导入。
有关详细配置，请阅读 Nuxt 集成文档。
主题变量
AiThinking 采用了紧致的布局设计，旨在以最小的空间提供清晰的思维状态。
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-thinking-bg | 思考内容背景色 | var(--yh-fill-color-light) |
--yh-ai-thinking-border-radius | 圆角大小 | 8px |
--yh-ai-thinking-icon-color | 状态图标颜色 | var(--yh-color-primary) |