# Intro

产品功能导览组件，以幻灯片形式向用户展示产品特性或操作引导。

## 适用场景

- 新用户首次进入产品时的功能引导
- 产品新功能上线后的特性介绍
- 多步骤操作引导展示

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| slides | `IntroSlideItem[]` | `-` | 否 | slides 列表 |
| activeIndex | `number` | `-` | 否 | 当前 slide index 控制值，需配合 `onChange` 使用 |
| visible | `boolean` | `-` | 否 | 控制是否显示 |
| onChange | `(activeIndex: number) => void` | `-` | 否 | 当前 slide 发生变化时的回调 |
| onClose | `(activeIndex: number) => void` | `-` | 否 | 关闭时的回调 |
| onStart | `() => void` | `-` | 否 | 点击末页"开始"按钮的回调；不指定时退化为调用 onClose |

## 典型用法

### 基础导览

```tsx
const [visible, setVisible] = useState(false)

const slides = [
    {
        headline: '模板全新升级，开启高效办公',
        content: '新增流程图、用户旅程图、系统架构图等丰富模板资源',
        cover: <div className={'slide-cover'} />,
    },
    {
        headline: '模板全新升级，开启高效办公-2',
        content: '新增流程图、用户旅程图、系统架构图等丰富模板资源-2',
        cover: <div className={'slide-cover'} />,
    },
    {
        headline: '模板全新升级，开启高效办公-3',
        content: '新增流程图、用户旅程图、系统架构图等丰富模板资源-3',
        cover: <div className={'slide-cover'} />,
    },
]

<Button onClick={() => setVisible(true)}>导览</Button>
<Intro
    visible={visible}
    onClose={index => {
        console.log(`close at index ${index}`)
        setVisible(false)
    }}
    slides={slides}
/>
```

## 注意事项

- 每个 `IntroSlideItem` 包含 `headline`、`content`、`cover` 字段
- 末页会显示"开始"按钮，点击触发 `onStart`；若未提供 `onStart`，则退化为调用 `onClose`
- 使用 `activeIndex` + `onChange` 可实现受控模式切换幻灯片