# Steps

步骤条组件，用于展示多步骤流程的进度和当前所处步骤，支持 standard 和 dot 两种类型。

## 适用场景

- 多步骤流程的进度展示（表单向导、审批流程等）
- 需要展示步骤状态（完成、进行中、错误、终止）的场景
- 水平或垂直方向的步骤导航，支持可点击切换步骤

## Props

### Steps Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| nodes | `StepsNodeItem[]` | `[]` | 否 | 节点 |
| activeIndex | `number` | `0` | 否 | 当前步骤索引 |
| onClickNode | `(e: MouseEvent, index: number) => void` | `-` | 否 | 点击步骤节点时回调，默认不设置为不可点击模式 |
| activeStatus | `"active" \| "terminated" \| "error"` | `-` | 否 | 当前步骤状态，仅在需要非 active 状态时配置 |
| size | `"md" \| "sm"` | 取 config context `baseSize` | 否 | 尺寸 |
| type | `"standard" \| "dot"` | `"standard"` | 否 | 类型 |
| labelPlacement | `"bottom" \| "right"` | `"right"` | 否 | 标签位置 |
| direction | `"horizontal" \| "vertical"` | `"horizontal"` | 否 | 方向 |

### StepsNodeItem Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| label | `ReactNode` | `-` | 否 | 名称 |
| description | `ReactNode` | `-` | 否 | 描述 |
| disabled | `boolean` | `-` | 否 | 禁用点击 |
| status | `"waiting" \| "done" \| "active" \| "terminated" \| "error"` | `-` | 否 | 状态 |
| icon | `SvgFC` | `-` | 否 | 图标，仅对 standard 类型且状态为 waiting/active/done 时有效 |

## 典型用法

### 基础用法（水平与垂直）

```tsx
import { Steps } from '@befe/brick'

const nodes = [
    { label: '第一步' },
    { label: '第二步', description: '第二步概述' },
    { label: '第三步', description: '第三步概述' },
]

function Demo() {
    return (
        <div>
            <Steps nodes={nodes} activeIndex={1} />
            <Steps nodes={nodes} activeIndex={1} direction="vertical" />
        </div>
    )
}
```

### 步骤状态

```tsx
import { Steps, StepsNodeItem } from '@befe/brick'

const nodesStatus: StepsNodeItem[] = [
    { label: '第一步', description: '第一步概述' },
    { label: '第二步', description: '第二步概述', status: 'error' },
    { label: '第三步', description: '当前步骤' },
    { label: '第四步', description: '第四步概述' },
]

function Demo() {
    return (
        <div>
            <Steps nodes={nodesStatus} activeIndex={2} />
            <Steps nodes={nodesStatus} activeIndex={2} activeStatus="terminated" />
        </div>
    )
}
```

### 可点击步骤

```tsx
import { useState, MouseEvent } from 'react'
import { Steps } from '@befe/brick'

function Demo() {
    const [activeIndex, setActiveIndex] = useState(1)

    const handleClickNode = (e: MouseEvent, index: number) => {
        console.log('click', index)
        setActiveIndex(index)
    }

    return (
        <Steps nodes={nodes} activeIndex={activeIndex} onClickNode={handleClickNode} />
    )
}
```

### dot 类型

```tsx
import { Steps } from '@befe/brick'

function Demo() {
    return (
        <div>
            <Steps nodes={nodes} activeIndex={2} type="dot" />
            <Steps nodes={nodes} activeIndex={1} type="dot" direction="vertical" />
        </div>
    )
}
```

### 自定义节点图标

```tsx
import { Steps, SvgCalendar, SvgEdit, SvgFolderOpened } from '@befe/brick'

const nodes = [
    { label: '第一步', icon: SvgEdit },
    { label: '第二步', icon: SvgCalendar },
    { label: '第三步', icon: SvgFolderOpened },
]

function Demo() {
    return <Steps nodes={nodes} activeIndex={1} />
}
```

## 注意事项

- `onClickNode` 不设置时为不可点击模式，设置后节点变为可点击
- `activeStatus` 仅在需要将当前步骤设置为非 `active` 状态（如 `terminated`/`error`）时使用
- `icon` 仅对 `type="standard"` 且节点状态为 `waiting`/`active`/`done` 时有效
- `labelPlacement="bottom"` 标签显示在节点下方，适合水平方向步骤条