ThoughtChain 思维链

思维链组件用于可视化和追踪 Agent 对 Actions 和 Tools 的调用链。

何时使用

• 调试和跟踪复杂 Agent System 中的调用链
• 类似的链式场景中使用

代码演示

基本

1

Knowledge Query

Query knowledge base

2

Web Search Tool Invoked

Tool invocation

3

Model Invocation Complete

Invoke model for response

4

Response Complete

Task completed

基本

基础用法。

<script setup lang="tsx">
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Card } from 'ant-design-vue';

const items: ThoughtChainProps['items'] = [
  {
    title: 'Knowledge Query',
    description: 'Query knowledge base',
  },
  {
    title: 'Web Search Tool Invoked',
    description: 'Tool invocation',
  },
  {
    title: 'Model Invocation Complete',
    description: 'Invoke model for response',
  },
  {
    title: 'Response Complete',
    description: 'Task completed',
    blink: true,
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain items={items} />
  </Card>
));
</script>

隐藏源代码

ThoughtChain.Item

loading status:

Tool Calling

Tool Calling

Tool Calling

success status:

Tool Call Finished

Tool Call Finished

Tool Call Finished

error status:

Tool Call Error

Tool Call Error

Tool Call Error

abort status:

Agent Response Aborted

Agent Response Aborted

Agent Response Aborted

custom icon:

Task Completed

Task Completed

Task Completed

description & click:

Opening Webpage

https://x.ant.design/docs/playground/copilot

Creating

todo.md

Searching

Route Information

blink:

Task Completed

Task Completed

Task Completed

Route Information

ThoughtChain.Item

ThoughtChain.Item 是一个独立的紧凑型组件，支持 solid、outlined、text 三种变体，以及 loading、success、error、abort 四种状态。

<script setup lang="tsx">
import { EditOutlined, GlobalOutlined, SearchOutlined, ChromeOutlined } from '@ant-design/icons-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const onClick = () => {
  console.log('Item Click');
};

defineRender(() => (
  <Flex vertical gap="middle">
    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>loading status:</Text>
      <ThoughtChain.Item variant="solid" status="loading" title="Tool Calling" />
      <ThoughtChain.Item variant="outlined" status="loading" title="Tool Calling" />
      <ThoughtChain.Item variant="text" status="loading" title="Tool Calling" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>success status:</Text>
      <ThoughtChain.Item variant="solid" status="success" title="Tool Call Finished" />
      <ThoughtChain.Item variant="outlined" status="success" title="Tool Call Finished" />
      <ThoughtChain.Item variant="text" status="success" title="Tool Call Finished" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>error status:</Text>
      <ThoughtChain.Item variant="solid" status="error" title="Tool Call Error" />
      <ThoughtChain.Item variant="outlined" status="error" title="Tool Call Error" />
      <ThoughtChain.Item variant="text" status="error" title="Tool Call Error" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>abort status:</Text>
      <ThoughtChain.Item variant="solid" status="abort" title="Agent Response Aborted" />
      <ThoughtChain.Item variant="outlined" status="abort" title="Agent Response Aborted" />
      <ThoughtChain.Item variant="text" status="abort" title="Agent Response Aborted" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>custom icon:</Text>
      <ThoughtChain.Item variant="solid" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item variant="outlined" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item variant="text" icon={<ChromeOutlined />} title="Task Completed" />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>description & click:</Text>
      <ThoughtChain.Item
        variant="solid"
        onClick={onClick}
        icon={<GlobalOutlined />}
        title="Opening Webpage"
        description="https://x.ant.design/docs/playground/copilot"
      />
      <ThoughtChain.Item
        variant="outlined"
        onClick={onClick}
        icon={<EditOutlined />}
        title="Creating"
        description="todo.md"
      />
      <ThoughtChain.Item
        variant="text"
        onClick={onClick}
        icon={<SearchOutlined />}
        title="Searching"
        description="Route Information"
      />
    </Flex>

    <Flex gap="small" wrap="wrap" align="center">
      <Text style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>blink:</Text>
      <ThoughtChain.Item blink variant="solid" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item blink variant="outlined" icon={<ChromeOutlined />} title="Task Completed" />
      <ThoughtChain.Item
        blink
        variant="text"
        icon={<ChromeOutlined />}
        title="Task Completed"
        description="Route Information"
      />
    </Flex>
  </Flex>
));
</script>

隐藏源代码

节点状态

Thought Chain Item - 1

status: success

Thought Chain Item - 2

status: error

节点状态

思维链节点支持配置 status 属性来明显的表明当前节点的执行状态。

<script setup lang="tsx">
import { CheckCircleOutlined, InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainItemType } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Button, Card } from 'ant-design-vue';
import { ref } from 'vue';

function getStatusIcon(status: ThoughtChainItemType['status']) {
  switch (status) {
    case 'success':
      return <CheckCircleOutlined />;
    case 'error':
      return <InfoCircleOutlined />;
    case 'loading':
      return <LoadingOutlined />;
    default:
      return undefined;
  }
}

const mockServerResponseData: ThoughtChainItemType[] = [
  {
    title: 'Thought Chain Item - 1',
    status: 'success',
    description: 'status: success',
    icon: getStatusIcon('success'),
  },
  {
    title: 'Thought Chain Item - 2',
    status: 'error',
    description: 'status: error',
    icon: getStatusIcon('error'),
  },
];

const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

function addChainItem() {
  mockServerResponseData.push({
    title: `Thought Chain Item - ${mockServerResponseData.length + 1}`,
    status: 'loading',
    icon: getStatusIcon('loading'),
    description: 'status: loading',
  });
}

async function updateChainItem(status: ThoughtChainItemType['status']) {
  await delay(800);
  const last = mockServerResponseData[mockServerResponseData.length - 1];
  last.status = status;
  last.icon = getStatusIcon(status);
  last.description = `status: ${status}`;
}

const items = ref<ThoughtChainItemType[]>([...mockServerResponseData]);
const loading = ref(false);

const mockStatusChange = async () => {
  await updateChainItem('error');
  items.value = [...mockServerResponseData];
  await updateChainItem('loading');
  items.value = [...mockServerResponseData];
  await updateChainItem('success');
  items.value = [...mockServerResponseData];
};

const onClick = async () => {
  loading.value = true;
  addChainItem();
  items.value = [...mockServerResponseData];
  await mockStatusChange();
  loading.value = false;
};

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <Button onClick={onClick} style={{ marginBottom: '16px' }} loading={loading.value}>
      {loading.value ? 'Running' : 'Run Next'}
    </Button>
    <ThoughtChain items={items.value} />
  </Card>
));
</script>

隐藏源代码

可折叠的

Create Task: Write New Component

Execute files needed for creating new component

Creating folder for new component

Executing command

mkdir -p component

Creating files needed for new component

Creating file

component/index.tsx

Creating Chinese description file for new component

Creating file

component/index.zh-CN.md

Creating English description file for new component

Creating file

component/index.en-US.md

Checking Task Execution Steps

Verify overall task execution logic and feasibility

Folder created

component

File created

component/index.tsx

File created

component/index.zh-CN.md

File created

component/index.en-US.md

可折叠的

配置 item 的 collapsible 和 defaultExpandedKeys 可开启对思维链节点内容区域的折叠功能。

<script setup lang="tsx">
import { CodeOutlined, EditOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Card, Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const items: ThoughtChainProps['items'] = [
  {
    key: 'create_task',
    title: 'Create Task: Write New Component',
    description: 'Execute files needed for creating new component',
    collapsible: true,
    content: (
      <Flex gap="small" vertical>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.zh-CN.md"
        />
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
    status: 'success',
  },
  {
    key: 'check_task',
    title: 'Checking Task Execution Steps',
    description: 'Verify overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder created" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.en-US.md" />
      </Flex>
    ),
    status: 'loading',
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain defaultExpandedKeys={['create_task']} items={items} />
  </Card>
));
</script>

隐藏源代码

受控模式

Create Task: Develop New Component

Execute files needed for new component creation

Creating folder for new component

Executing command

mkdir -p component

Creating files needed for new component

Creating file

component/index.tsx

Creating Chinese documentation fileCreating English description file for new component

Continue creating file

component/index.en-US.md

Check Task Execution Steps Completion

Verify the overall task execution logic and feasibility

Folder created

component

File created

component/index.tsx

File created

component/index.zh-CN.md

File created

component/index.en-US.md

Using the New Component

Using the generated component to complete the task

File created

component

受控模式

通过 expandedKeys 和 onExpand 实现受控模式。

<script setup lang="tsx">
import { CodeOutlined, EditOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Button, Card, Flex, Typography } from 'ant-design-vue';
import { ref } from 'vue';

const { Text } = Typography;

const items: ThoughtChainProps['items'] = [
  {
    key: 'create_task',
    title: 'Create Task: Develop New Component',
    description: 'Execute files needed for new component creation',
    collapsible: true,
    content: (
      <Flex gap="small" vertical>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese documentation file</Text>
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Continue creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
    status: 'success',
  },
  {
    key: 'check_task',
    title: 'Check Task Execution Steps Completion',
    collapsible: true,
    description: 'Verify the overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder created" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component/index.en-US.md" />
      </Flex>
    ),
    status: 'success',
  },
  {
    key: 'used_task',
    title: 'Using the New Component',
    description: 'Using the generated component to complete the task',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="File created" description="component" />
      </Flex>
    ),
    status: 'loading',
  },
];

const expandedKeys = ref(['create_task']);

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <Button
      style={{ marginBottom: '16px' }}
      onClick={() => {
        expandedKeys.value = ['check_task'];
      }}
    >
      Open "check_task" details
    </Button>
    <ThoughtChain
      items={items}
      expandedKeys={expandedKeys.value}
      onExpand={(keys) => { expandedKeys.value = keys; }}
    />
  </Card>
));
</script>

隐藏源代码

客制化

Create Task

description

Thinking Process

1. Analyze task, understand task workflow 2. Task creation, files needed for task 3. Task execution, using new component

Creating folder for new component

Executing command

mkdir -p component

Creating files needed for new component

Creating file

component/index.tsx

Creating Chinese documentation file for new component

Continue creating file

component/index.zh-CN.md

Creating English description file for new component

Continue creating file

component/index.en-US.md

Check Task Execution Steps Completion

Verify the overall task execution logic and feasibility

Folder creation completed

component

File creation completed

component/index.tsx

File creation completed

component/index.zh-CN.md

File creation completed

component/index.en-US.md

Checking Task Execution Steps

Verify the overall task execution logic and feasibility

Folder creation completed

component

File creation completed

component/index.tsx

File creation completed

component/index.zh-CN.md

File creation completed

component/index.en-US.md

客制化

items 属性支持灵活的客制化配置，包括自定义图标、脚注、Think 组件嵌套等。支持 line="dashed" 虚线样式。

<script setup lang="tsx">
import { CodeOutlined, EditOutlined, HeartTwoTone, SmileTwoTone } from '@ant-design/icons-vue';
import type { ThoughtChainItemType } from 'ant-design-x-vue';
import { Think, ThoughtChain } from 'ant-design-x-vue';
import { Button, Card, Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const items: ThoughtChainItemType[] = [
  {
    title: 'Create Task',
    description: 'description',
    icon: <HeartTwoTone twoToneColor="#eb2f96" />,
    footer: <Button block>Thought Chain Item Footer</Button>,
    content: (
      <Flex gap="small" vertical>
        <Think title="Thinking Process">
          {`1. Analyze task, understand task workflow\n2. Task creation, files needed for task\n3. Task execution, using new component`}
        </Think>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese documentation file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Continue creating file"
          description="component/index.zh-CN.md"
        />
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Continue creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
  },
  {
    key: 'check_task',
    title: 'Check Task Execution Steps Completion',
    icon: <SmileTwoTone />,
    collapsible: true,
    description: 'Verify the overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder creation completed" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.en-US.md" />
      </Flex>
    ),
  },
  {
    key: 'used_task',
    title: 'Checking Task Execution Steps',
    description: 'Verify the overall task execution logic and feasibility',
    content: (
      <Flex gap="small" vertical>
        <ThoughtChain.Item variant="solid" status="success" title="Folder creation completed" description="component" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.tsx" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.zh-CN.md" />
        <ThoughtChain.Item variant="solid" status="success" title="File creation completed" description="component/index.en-US.md" />
      </Flex>
    ),
    status: 'error',
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain items={items} line="dashed" />
  </Card>
));
</script>

隐藏源代码

嵌套使用

1

1 - Thought Chain Item

description

1

1-1 Thought Chain Item

description

2

1-2 Thought Chain Item

description

2

2 - Thought Chain Item

description

1

2-1 Thought Chain Item

description

2

2-2 Thought Chain Item

description

3

2-3 Thought Chain Item

description

嵌套使用

ThoughtChain 组件支持嵌套使用。

<script setup lang="tsx">
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Button, Card } from 'ant-design-vue';

const items: ThoughtChainProps['items'] = [
  {
    title: '1 - Thought Chain Item',
    description: 'description',
    footer: <Button>1 - Thought Chain Item Footer</Button>,
    content: (
      <ThoughtChain
        items={[
          { title: '1-1 Thought Chain Item', description: 'description' },
          { title: '1-2 Thought Chain Item', description: 'description' },
        ]}
      />
    ),
  },
  {
    title: '2 - Thought Chain Item',
    description: 'description',
    footer: <Button>2 - Thought Chain Item Footer</Button>,
    content: (
      <ThoughtChain
        items={[
          { title: '2-1 Thought Chain Item', description: 'description' },
          { title: '2-2 Thought Chain Item', description: 'description' },
          { title: '2-3 Thought Chain Item', description: 'description' },
        ]}
      />
    ),
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain items={items} />
  </Card>
));
</script>

隐藏源代码

单行折叠

Create Task: Write New Component

Creating folder for new component

Executing command

mkdir -p component

Creating files needed for new component

Creating file

component/index.tsx

Creating Chinese description file for new component

Creating file

component/index.zh-CN.md

Creating English description file for new component

Creating file

component/index.en-US.md

单行折叠

通过 icon: false 隐藏图标，配合自定义 styles.itemContent 实现单行折叠效果。

<script setup lang="tsx">
import { CodeOutlined, EditOutlined } from '@ant-design/icons-vue';
import type { ThoughtChainProps } from 'ant-design-x-vue';
import { ThoughtChain } from 'ant-design-x-vue';
import { Card, Flex, Typography } from 'ant-design-vue';

const { Text } = Typography;

const contentStyles = {
  backgroundColor: 'rgba(0,0,0,.01)',
  borderRadius: '8px',
  padding: '10px',
  marginBlockStart: '10px',
  border: '1px solid rgba(0,0,0,.04)',
};

const items: ThoughtChainProps['items'] = [
  {
    key: 'create_task',
    title: 'Create Task: Write New Component',
    icon: false,
    collapsible: true,
    content: (
      <Flex gap="small" vertical>
        <Text type="secondary">Creating folder for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<CodeOutlined />}
          title="Executing command"
          description="mkdir -p component"
        />
        <Text type="secondary">Creating files needed for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.tsx"
        />
        <Text type="secondary">Creating Chinese description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.zh-CN.md"
        />
        <Text type="secondary">Creating English description file for new component</Text>
        <ThoughtChain.Item
          variant="solid"
          icon={<EditOutlined />}
          title="Creating file"
          description="component/index.en-US.md"
        />
      </Flex>
    ),
  },
];

defineRender(() => (
  <Card style={{ width: '500px' }}>
    <ThoughtChain
      styles={{ itemContent: contentStyles }}
      defaultExpandedKeys={['create_task']}
      items={items}
    />
  </Card>
));
</script>

隐藏源代码

API

ThoughtChainProps

属性	说明	类型	默认值	版本
items	思维节点集合	ThoughtChainItemType[]	-	-
defaultExpandedKeys	初始化展开的节点	string[]	-	-
expandedKeys	当前展开的节点	string[]	-	-
onExpand	展开节点变化回调	(expandedKeys: string[]) => void	-	-
line	线条样式	boolean | 'solid' | 'dashed' | 'dotted'	true	-
classNames	语义化结构的类名	Record<SemanticType, string>	-	-
styles	语义化结构的样式	Record<SemanticType, CSSProperties>	-	-
prefixCls	自定义前缀	string	-	-
rootClassName	自定义根类名	string	-	-

ThoughtChainItemType

属性	说明	类型	默认值	版本
key	思维节点唯一标识符	string	-	-
icon	思维节点图标，设为 false 可隐藏	VNode | string | number | false	index+1	-
title	思维节点标题	VNode | string	-	-
description	思维节点描述	VNode | string	-	-
content	思维节点内容	VNode | string	-	-
footer	思维节点脚注	VNode | string	-	-
status	思维节点状态	'loading' | 'success' | 'error' | 'abort'	-	-
collapsible	是否可折叠	boolean	-	-
blink	闪烁动画	boolean	-	-

ThoughtChain.Item Props

属性	说明	类型	默认值	版本
variant	变体	'solid' | 'outlined' | 'text'	'solid'	-
icon	图标	VNode | string	-	-
title	标题	VNode | string	-	-
description	描述	VNode | string	-	-
status	状态	'loading' | 'success' | 'error' | 'abort'	-	-
blink	闪烁动画	boolean	-	-
onClick	点击事件	() => void	-	-
classNames	语义化结构类名	Record<'root' | 'icon' | 'title' | 'description', string>	-	-
styles	语义化结构样式	Record<'root' | 'icon' | 'title' | 'description', CSSProperties>	-	-

SemanticType

名称	说明
root	根节点
item	节点项
itemHeader	节点头部
itemIcon	节点图标
itemContent	节点内容
itemFooter	节点脚注

Semantic DOM

预览依次展示 ThoughtChain 与 ThoughtChain.Item 的语义结构。

Thought Chain Item Title

description

Thought Chain Item Content

• root

  根节点

• item

  思维链节点

• itemIcon

  思维链图标

• itemHeader

  思维链节点头部

• itemContent

  思维链节点内容

• itemFooter

  思维链节点页脚

Opening Webpage

https://x.ant.design/docs/playground/copilot

• root

  根节点

• icon

  思维链图标

• title

  思维链标题

• description

  思维链节点描述

主题变量（Design Token）

属性	说明	类型	默认值
itemSolidBg	ThoughtChain.Item solid 背景色	string	colorFillTertiary
itemSolidHoverBg	ThoughtChain.Item solid 悬浮态背景色	string	colorBgTextHover
itemOutlinedBg	ThoughtChain.Item outlined 背景色	string	colorBgContainer
itemOutlinedHoverBg	ThoughtChain.Item outlined 悬浮态背景色	string	colorBgTextHover
itemBorderRadius	ThoughtChain.Item 圆角	number	borderRadius
iconSize	图标容器尺寸	number	fontSize
colorTextBlinkDefault	默认打字动画颜色	string	colorTextDescription
colorTextBlink	打字动画颜色	string	colorTextBase
itemMotionDescription	动效描述文本颜色（半透明）	string	rgba(colorTextDescription, 0.25)