开发预览更新于 2026-05-10

ThinkingTrace 推理过程

展示模型推理 trace 的折叠区域，标题显示 "Thought for X.Xs"。

基础用法

status="thinking" 时左边框是 accent，图标转圈；status="done" 时变成成功色 + 对勾。默认关闭，点击头部展开看 dim 文字推理内容。status 从 thinking → done 时（非受控）自动收起。

背景视口

src/App.vue

<script setup lang="ts">
import { CfThinkingTrace } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfThinkingTrace status="thinking" :duration="3200">
      检查用户原始查询，识别意图为 SQL 优化…
      正在比对索引结构与执行计划…
    </CfThinkingTrace>
    <CfThinkingTrace status="done" :duration="12400" default-open>
      1. 解析 SQL，识别全表扫描
      2. 在 (user_id, created_at) 上加复合索引
      3. 验证执行计划，扫描行数 320k → 12
      4. 输出 EXPLAIN 与建议
    </CfThinkingTrace>
  </div>
</template>

<script setup>
import { CfThinkingTrace } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfThinkingTrace status="thinking" :duration="3200">
      检查用户原始查询，识别意图为 SQL 优化…
      正在比对索引结构与执行计划…
    </CfThinkingTrace>
    <CfThinkingTrace status="done" :duration="12400" default-open>
      1. 解析 SQL，识别全表扫描
      2. 在 (user_id, created_at) 上加复合索引
      3. 验证执行计划，扫描行数 320k → 12
      4. 输出 EXPLAIN 与建议
    </CfThinkingTrace>
  </div>
</template>

import { CfThinkingTrace } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack">
          <CfThinkingTrace status="thinking" duration={3200}>
            检查用户原始查询，识别意图为 SQL 优化…
            正在比对索引结构与执行计划…
          </CfThinkingTrace>
          <CfThinkingTrace status="done" duration={12400} default-open>
            1. 解析 SQL，识别全表扫描
            2. 在 (user_id, created_at) 上加复合索引
            3. 验证执行计划，扫描行数 320k → 12
            4. 输出 EXPLAIN 与建议
          </CfThinkingTrace>
        </div>
    </>
  );
}

import { CfThinkingTrace } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack">
          <CfThinkingTrace status="thinking" duration={3200}>
            检查用户原始查询，识别意图为 SQL 优化…
            正在比对索引结构与执行计划…
          </CfThinkingTrace>
          <CfThinkingTrace status="done" duration={12400} default-open>
            1. 解析 SQL，识别全表扫描
            2. 在 (user_id, created_at) 上加复合索引
            3. 验证执行计划，扫描行数 320k → 12
            4. 输出 EXPLAIN 与建议
          </CfThinkingTrace>
        </div>
    </>
  );
}

API

属性	类型	默认	说明
`open` / `defaultOpen`	`boolean`	— / `false`	受控 / 非受控展开
`status`	`'thinking' \| 'done'`	`'thinking'`	状态
`duration`	`number`	`—`	思考毫秒数，渲染为 `X.Xs`
`label`	`string`	`—`	覆盖头部文案

Events

Vue	React	说明
`update:open`	`onOpenChange`	展开 / 折叠变化