Preview Updated 2026-05-10

ReasoningTree 思考树

树状 AI 思路可视化：每节点一个思考分支，可带 score；selected 节点加粗（最佳路径）；子树可折叠。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

适合展示 Tree-of-Thoughts / MCTS-style 推理过程。score 0–1 自动按区间上色（红/黄/蓝/绿）。selected: true 高亮（最佳路径）。子树点击 caret 折叠。

背景视口

用户请求：「修复 dashboard P99 慢」
- 假设 A：数据库慢查询72%
  - •查 explain：缺索引 idx_user_created_at81%
  - •查 pg_stat_statements top calls55%
- 假设 B：N+1 查询40%
  - •审 controller 主路径，未发现 N+125%
- •假设 C：前端 hydrate 慢18%

src/App.vue

<script setup lang="ts">
import { CfReasoningTree, type ReasoningNode } from '@chufix-design/vue';

const root: ReasoningNode = {
  id: 'root',
  thought: '用户请求：「修复 dashboard P99 慢」',
  children: [
    {
      id: 'h1',
      thought: '假设 A：数据库慢查询',
      score: 0.72,
      selected: true,
      children: [
        { id: 'h1-1', thought: '查 explain：缺索引 idx_user_created_at', score: 0.81, selected: true },
        { id: 'h1-2', thought: '查 pg_stat_statements top calls', score: 0.55 },
      ],
    },
    {
      id: 'h2',
      thought: '假设 B：N+1 查询',
      score: 0.4,
      children: [
        { id: 'h2-1', thought: '审 controller 主路径，未发现 N+1', score: 0.25 },
      ],
    },
    {
      id: 'h3',
      thought: '假设 C：前端 hydrate 慢',
      score: 0.18,
    },
  ],
};
</script>
<template>
  <CfReasoningTree :root="root" />
</template>

<script setup>
import { CfReasoningTree } from '@chufix-design/vue';

const root= {
  id: 'root',
  thought: '用户请求：「修复 dashboard P99 慢」',
  children: [
    {
      id: 'h1',
      thought: '假设 A：数据库慢查询',
      score: 0.72,
      selected: true,
      children: [
        { id: 'h1-1', thought: '查 explain：缺索引 idx_user_created_at', score: 0.81, selected: true },
        { id: 'h1-2', thought: '查 pg_stat_statements top calls', score: 0.55 },
      ],
    },
    {
      id: 'h2',
      thought: '假设 B：N+1 查询',
      score: 0.4,
      children: [
        { id: 'h2-1', thought: '审 controller 主路径，未发现 N+1', score: 0.25 },
      ],
    },
    {
      id: 'h3',
      thought: '假设 C：前端 hydrate 慢',
      score: 0.18,
    },
  ],
};
</script>
<template>
  <CfReasoningTree :root="root" />
</template>

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

export default function Demo() {
  const root: ReasoningNode = {
    id: 'root',
    thought: '用户请求：「修复 dashboard P99 慢」',
    children: [
      {
        id: 'h1',
        thought: '假设 A：数据库慢查询',
        score: 0.72,
        selected: true,
        children: [
          { id: 'h1-1', thought: '查 explain：缺索引 idx_user_created_at', score: 0.81, selected: true },
          { id: 'h1-2', thought: '查 pg_stat_statements top calls', score: 0.55 },
        ],
      },
      {
        id: 'h2',
        thought: '假设 B：N+1 查询',
        score: 0.4,
        children: [
          { id: 'h2-1', thought: '审 controller 主路径，未发现 N+1', score: 0.25 },
        ],
      },
      {
        id: 'h3',
        thought: '假设 C：前端 hydrate 慢',
        score: 0.18,
      },
    ],
  };
  return (
    <>
      <CfReasoningTree root={root} />
    </>
  );
}

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

export default function Demo() {
  const root= {
    id: 'root',
    thought: '用户请求：「修复 dashboard P99 慢」',
    children: [
      {
        id: 'h1',
        thought: '假设 A：数据库慢查询',
        score: 0.72,
        selected: true,
        children: [
          { id: 'h1-1', thought: '查 explain：缺索引 idx_user_created_at', score: 0.81, selected: true },
          { id: 'h1-2', thought: '查 pg_stat_statements top calls', score: 0.55 },
        ],
      },
      {
        id: 'h2',
        thought: '假设 B：N+1 查询',
        score: 0.4,
        children: [
          { id: 'h2-1', thought: '审 controller 主路径，未发现 N+1', score: 0.25 },
        ],
      },
      {
        id: 'h3',
        thought: '假设 C：前端 hydrate 慢',
        score: 0.18,
      },
    ],
  };
  return (
    <>
      <CfReasoningTree root={root} />
    </>
  );
}

API

属性	类型	默认	说明
`root`	`ReasoningNode`	—	根节点
`showScores`	`boolean`	`true`	每节点右侧显示百分比
`initialCollapsedDepth`	`number`	—	大于等于该深度的子树默认收起

ReasoningNode

interface ReasoningNode {
  id: string;
  thought: string;
  score?: number;          // 0-1
  selected?: boolean;       // 最佳路径
  children?: ReasoningNode[];
}