Thinking / ThoughtChain 思考链

展示 AI 的逐步推理过程（类似 OpenAI o1 / DeepSeek R1 的思考过程）。

在线演示

Thinking — 单步思考

Prop	类型	默认值	说明
title	string	''	思考步骤标题
content	string	''	思考内容（Markdown）
status	'pending' | 'loading' | 'success' | 'error'	'loading'	步骤状态
loadingText	string	'思考中...'	加载中文案
duration	number	undefined	耗时（ms）
expanded	boolean	false	默认展开

ThoughtChain — 思考链

Prop	类型	默认值	说明
items	ThinkingItem[]	[]	思考步骤列表
expanded	boolean	false	默认全部展开
accordion	boolean	false	手风琴模式（同时只展开一项）

用法

<ThoughtChain :items="[
  { title: '分析问题', content: '用户询问…', status: 'success', duration: 230 },
  { title: '检索知识库', content: '正在搜索…', status: 'loading' },
  { title: '生成回答', content: '', status: 'pending' },
]" />

自定义渲染

<ThoughtChain :items="thinkingSteps">
  <template #default="{ item, index }">
    <div class="my-thinking-step">
      <span :class="`status-dot status-dot--${item.status}`" />
      <div>
        <strong>{{ item.title }}</strong>
        <small v-if="item.duration">{{ item.duration }}ms</small>
      </div>
      <div v-if="item.expanded" v-html="item.content" />
    </div>
  </template>
</ThoughtChain>