# Tabs

标签页组件，用于在同一区域内切换不同内容面板。支持多种样式类型、超出省略、动态增删标签页。

## 适用场景

- 同一区域内切换不同内容视图
- 需要动态添加/删除标签页的场景（type card）
- 按钮组形式的视图切换（button-group-intensive / button-group-important）
- 超出宽度时自动收起到下拉菜单

## Props

### Tabs Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| size | `"md" \| "sm"` | 取 config context `baseSize` | 否 | 尺寸 |
| type | `"plain" \| "card" \| "tag" \| "button-group-intensive" \| "button-group-important"` | `"plain"` | 否 | 标签卡样式类型 |
| panes | `TabItem[]` | `-` | 否 | 标签页（数组模式） |
| activeId | `TabPaneId` | `-` | 否 | 激活 tab id 的控制值 |
| defaultActiveId | `TabPaneId` | `null` | 否 | 激活 tab id 的默认值 |
| onChange | `(activeId: TabPaneId) => void` | `-` | 否 | activeId 变化时的回调 |
| onClickTab | `(e: MouseEvent, id: TabPaneId) => void` | `-` | 否 | 点击 tab 的回调（button-group 类型无效） |
| triggerType | `"click" \| "hover"` | `-` | 否 | 下拉列表触发方式 |
| shouldDestroyInactivePane | `boolean` | `false` | 否 | 是否销毁非当前激活的 pane DOM |
| onClickAdd | `(e: MouseEvent) => void \| TabPaneId` | `-` | 否 | 添加按钮点击回调，提供回调则显示添加按钮，仅 type card 支持 |
| onTabDelete | `(activeId: TabPaneId) => void` | `-` | 否 | 删除 tab 回调 |

### TabPane Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| id | `TabPaneId` | `-` | 是 | 唯一标识 |
| label | `ReactNode` | `-` | 是 | 标签页上的内容 |
| disabled | `boolean` | `-` | 否 | 是否禁用 |
| deletable | `boolean` | `-` | 否 | 是否可删除 |
| status | `"normal" \| "error"` | `"normal"` | 否 | tab 标签页的状态，仅 type card 支持 |

## 典型用法

### 基础用法（多种样式类型）

```tsx
import { TabPane, Tabs } from '@befe/brick'

function Demo() {
    const types = ['plain', 'card', 'button-group-intensive', 'button-group-important', 'tag'] as const

    return (
        <div>
            {types.map(type => (
                <Tabs key={type} type={type} defaultActiveId="tab-2">
                    <TabPane id="tab-1" label="选项卡-1">选项卡内容-1</TabPane>
                    <TabPane id="tab-2" label="选项卡-2">选项卡内容-2</TabPane>
                    <TabPane id="tab-3" label="选项卡-3" disabled>选项卡内容-3</TabPane>
                    <TabPane id="tab-4" label="选项卡-4">选项卡内容-4</TabPane>
                </Tabs>
            ))}
        </div>
    )
}
```

### 动态添加/删除（card 类型）

> 动态添加、删除的能力仅在 type `card` 时提供。交互上一般需要在添加后切换到新标签页，可通过控制 `activeId` 或 `onClickAdd` 返回新 `TabPaneId` 来达成。

```tsx
import { useState, useCallback } from 'react'
import { Tabs, TabPane, TabPaneId } from '@befe/brick'

function Demo() {
    const [data, setData] = useState([
        { id: 'tab-1', label: '选项卡-1', content: '内容-1' },
        { id: 'tab-2', label: '选项卡-2', content: '内容-2', deletable: true },
    ])
    const [activeId, setActiveId] = useState<TabPaneId>('tab-1')

    const handleClickAdd = useCallback(() => {
        const newItem = { id: `tab-${data.length + 1}`, label: `选项卡-${data.length + 1}`, content: '新内容', deletable: true }
        setData([...data, newItem])
        setActiveId(newItem.id)
    }, [data])

    const handleTabDelete = useCallback((id: TabPaneId) => {
        const nextData = data.filter(item => item.id !== id)
        setData(nextData)
        if (activeId === id) setActiveId('tab-1')
    }, [data, activeId])

    return (
        <Tabs
            activeId={activeId}
            onChange={setActiveId}
            onClickAdd={handleClickAdd}
            onTabDelete={handleTabDelete}
            type="card"
        >
            {data.map(pane => (
                <TabPane key={pane.id} id={pane.id} label={pane.label} deletable={pane.deletable}>
                    {pane.content}
                </TabPane>
            ))}
        </Tabs>
    )
}
```

### 标签页状态（card 类型）

```tsx
function Demo() {
    return (
        <Tabs type="card" defaultActiveId="tab-3" size="sm">
            <TabPane id="tab-1" label="选项卡-1" status="error">选项卡内容-1</TabPane>
            <TabPane id="tab-2" label="选项卡-2" status="error" disabled>选项卡内容-2</TabPane>
            <TabPane id="tab-3" label="选项卡-3">选项卡内容-3</TabPane>
        </Tabs>
    )
}
```

## 注意事项

- 动态添加/删除仅 `type="card"` 支持；`onClickAdd` 提供则显示添加按钮
- `onClickTab` 对 `button-group-intensive` 和 `button-group-important` 类型无效
- `TabPane.status` 仅 `type="card"` 支持
- 只有 type `plain` 和 `tag` 支持 `size="sm"`
- `props.onTabAdd` 已废弃，改用 `props.onClickAdd`
- `props.type` 中 `button-group` 已废弃，改用 `button-group-important`