# ThoughtChain 组件使用示例

以下为片段，实际页面请自行布局。

---

## 基础使用

```tsx
import { ThoughtChain } from '@alipay/agentic-design-mobile';

const items = [
  { title: '思维链1', children: '思维链1内容' },
  { title: '思维链2', children: '思维链2内容' },
  { title: '思维链3', children: '思维链3内容' },
];

export function ThoughtChainBasic() {
  return <ThoughtChain items={items} />;
}
```

---

## 状态

```tsx
import { ThoughtChain } from '@alipay/agentic-design-mobile';

const base = [
  { title: '思维链1', children: '内容1' },
  { title: '思维链2', children: '内容2' },
  { title: '思维链3', children: '内容3' },
  { title: '思维链4', children: '内容4' },
];

export function ThoughtChainStatus() {
  const statusItems = base.map((item, index) => ({
    ...item,
    status: (index === 0 ? 'success' : index === 1 ? 'error' : index === 2 ? 'abort' : 'loading') as
      | 'success'
      | 'error'
      | 'abort'
      | 'loading',
  }));
  return <ThoughtChain items={statusItems} />;
}
```

---

## 可折叠

```tsx
import { ThoughtChain } from '@alipay/agentic-design-mobile';

const items = [
  { title: '步骤一', children: '详情一', status: 'success' as const },
  { title: '步骤二', children: '详情二', status: 'loading' as const },
];

export function ThoughtChainCollapsible() {
  return <ThoughtChain collapsible items={items} />;
}
```

---

## 闪动

```tsx
import { ThoughtChain } from '@alipay/agentic-design-mobile';

const items = [
  { title: 'A', children: '…', status: 'loading' as const },
  { title: 'B', children: '…', status: 'success' as const },
];

export function ThoughtChainBlink() {
  return (
    <ThoughtChain
      blink
      items={items}
      onCollapse={(collapsed, item) => {
        console.log(collapsed, item);
      }}
    />
  );
}
```

---

## 结合 Think 组件

```tsx
import { Think, ThoughtChain } from '@alipay/agentic-design-mobile';

const items = [
  { title: '子步骤1', children: '…', status: 'success' as const },
  { title: '子步骤2', children: '…', status: 'loading' as const },
];

export function ThoughtChainInThink() {
  return (
    <Think title="深度思考..." defaultExpanded>
      <ThoughtChain items={items} />
    </Think>
  );
}
```