AiThoughtChain 思维链
用于展示 AI 模型在推理过程中的多个步骤或复杂的思维路径。支持 单节点展示 和 多节点时间轴展示，并内置拖拽排序、节点进度、Markdown 渲染等「第一阶段」全部能力。
基础用法
单节点模式，类似于 AiThinking，但带侧边线条，更适合放在长文本中。
正在分析代码
思考完成
基础用法
多节点时间轴与进度 (Smooth Animation)
当传入 items 列表时，组件会切换为时间轴模式，并按顺序展示每个思考步骤。你可以为每个节点传入 status 与 progress，自动计算整体进度。
TIP
丝滑交互：组件内置了基于 CSS Grid 的平滑展开/收起动画。当点击节点切换展开状态时，内容区域会以自然的方式滑动显隐，拒绝生硬跳变。
分析需求25%
搜索上下文50%
生成方案75%
验证方案90%
多节点时间轴
可拖拽与可编辑节点
通过 draggable 与 editable 属性，你可以让时间轴中的每个节点支持 拖拽排序、删除节点 与 插入新节点。节点内容默认支持 Markdown 渲染，便于展示更复杂的说明文本。
分析需求25%
搜索上下文50%
生成方案75%
验证方案90%
添加节点
可编辑思维链
事件与交互
在启用编辑、拖拽等能力后，你可以通过事件回调感知用户操作，并更新外部状态：
分析需求25%
搜索上下文50%
生成方案75%
验证方案90%
添加节点
交互事件
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题（单节点模式） | string | — |
| content | 内容（单节点模式） | string | — |
| status | 当前总状态（兼容单节点模式与多节点整体状态） | 'thinking' | 'loading' | 'success' | 'complete' | 'error' | 'none' | 'none' |
| items | 思考步骤列表，提供后将启用多节点时间轴模式 | AiThoughtItem[] | [] |
| autoCollapse | 当整体状态变为完成时是否自动收起单节点模式内容 | boolean | true |
| dot-size | 节点圆点大小 | 'small' | 'default' | 'large' | 'default' |
| line-gradient | 引导线是否显示渐变 | boolean | false |
| show-progress | 是否在顶部展示整体进度条 | boolean | false |
| draggable | 是否启用拖拽排序 | boolean | false |
| editable | 是否启用节点操作（添加 / 删除），通常与 draggable 搭配使用 | boolean | false |
| markdown | 是否使用 Markdown 渲染节点内容（content / description 字段） | boolean | true |
| theme-overrides | 实例级主题覆盖，复用全局 @yh-ui/theme 的 ComponentThemeVars 定义 | ComponentThemeVars | — |
AiThoughtItem 结构
| 属性名 | 说明 | 类型 |
|---|---|---|
| title | 步骤标题 | string |
| content / description | 步骤详细内容 | string |
| status | 步骤状态 | AiThoughtStatus |
| expanded | 详情是否默认展开 | boolean |
| icon | 覆盖默认状态图标名称 | string |
| id | 节点唯一标识，用于拖拽排序等 | string |
| extra | 额外业务数据 | Record<string, unknown> |
| progress | 当前步骤进度百分比 0-100 | number |
| clickable | 该节点内容是否可点击触发事件 | boolean |
事件（Emits）
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:items | 节点列表发生变化时触发 | (items: AiThoughtItem[]) |
| node-click | 用户点击某个节点内容时触发 | (item: AiThoughtItem, index: number) |
| node-delete | 点击删除按钮时触发 | (item: AiThoughtItem, index: number) |
| node-add | 点击新增按钮时触发 | (index: number) |
| reorder | 拖拽完成并重新排序节点后触发 | (items: AiThoughtItem[]) |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 单节点模式下的内容区域自定义 |
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4。在 Nuxt 项目中，组件会被自动按需导入。
有关详细配置，请阅读 Nuxt 集成文档。
主题变量
思维链组件 YhAiThoughtChain 深度集成了全球化设计体系。
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-thought-chain-line-color | 引导线颜色 | var(--yh-border-color-lighter) |
--yh-ai-thought-chain-active-color | 活跃状态时的颜色 | var(--yh-color-primary) |
--yh-ai-thought-chain-content-bg | 内容区域背景色 | var(--yh-fill-color-light) |
--yh-ai-thought-chain-content-radius | 内容区域圆角 | 8px |