# Tag

标签组件，用于内容标记和分类展示。支持普通（normal）、可选择（select）和可编辑（edit）三种模式，配套 TagGroup 提供批量标签管理能力。

## 适用场景

- 内容的分类标记（状态、属性等）
- 可选择的标签组（用于筛选条件选择）
- 可动态添加/删除的标签编辑

## Props

### Tag Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| mode | `"normal" \| "select" \| "edit"` | `"normal"` | 否 | 模式 |
| id | `TagId` | `-` | 否 | 唯一标识，edit/select 模式下必须传入才支持相应操作 |
| size | `"xs" \| "sm" \| "md" \| "lg"` | 取 config context `baseSize` | 否 | 尺寸 |
| color | `"normal" \| "light" \| "brand" \| "success" \| "danger" \| "warning" \| "red" \| "orange" \| "yellow" \| "green" \| "cyan" \| "blue" \| "purple" \| "pink"` | `"normal"` | 否 | 颜色 |
| shape | `"normal" \| "capsule"` | `"normal"` | 否 | 形状 |
| bordered | `boolean` | `true` | 否 | 是否有边框 |
| title | `string` | `-` | 否 | 原生 title tip，指定为 `''` 可去掉默认的 title tip |

### TagGroup Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| mode | `"select" \| "edit"` | `"normal"` | 否 | 标签组模式 |
| color | `"normal" \| "light"` | `-` | 否 | 颜色，仅 mode select 支持 |
| data | `TagObject[]` | `-` | 否 | tag 数据控制值 |
| defaultData | `TagObject[]` | `[]` | 否 | tag 默认数据 |
| onChange | `(tags: TagObject[]) => void` | `-` | 否 | 数据变化时的回调 |
| onToggleSelect | `(tag: TagObject, tags: TagObject[], currentTags: TagObject[]) => void` | `-` | 否 | 选中发生变化时的回调 |
| onRemove | `(tag: TagObject, tags: TagObject[], currentTags: TagObject[]) => void` | `-` | 否 | 删除某项时的回调 |
| onAdd | `(tag: TagObject, tags: TagObject[], currentTags: TagObject[]) => void` | `-` | 否 | 添加某项时的回调 |
| size | `"xs" \| "sm" \| "md" \| "lg"` | 取 config context `baseSize` | 否 | 尺寸 |
| shape | `"normal" \| "capsule"` | `"normal"` | 否 | 形状 |
| bordered | `boolean` | `true` | 否 | 是否有边框 |

## 典型用法

### 基础用法

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

function Demo() {
    return (
        <div>
            <Tag>基础</Tag>
            <Tag bordered={false}>标签</Tag>
            <Tag shape="capsule">标签</Tag>
            <Tag bordered={false} shape="capsule">标签</Tag>
        </div>
    )
}
```

### 颜色

`color` 分两组：功能色（承载语义）和基础色（纯装饰）。

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

function Demo() {
    return (
        <div>
            {/* 功能色 */}
            <Tag color="normal">普通</Tag>
            <Tag color="brand">主要</Tag>
            <Tag color="success">成功</Tag>
            <Tag color="warning">警告</Tag>
            <Tag color="danger">危险</Tag>

            {/* 基础色 */}
            <Tag color="red">红</Tag>
            <Tag color="orange">橙</Tag>
            <Tag color="yellow">黄</Tag>
            <Tag color="green">绿</Tag>
            <Tag color="blue">蓝</Tag>
            <Tag color="purple">紫</Tag>
            <Tag color="pink">粉</Tag>
        </div>
    )
}
```

### 可编辑标签组（edit 模式）

> 标签在输入状态下宽度不随内容变化，结束输入后根据内容撑开 padding。标签内容建议不超过 8 个字。只有 size `sm`/`md`/`lg` 支持编辑模式。

```tsx
import { useState } from 'react'
import { TagGroup, TagObject } from '@befe/brick'

function Demo() {
    const [tagData, setTagData] = useState<TagObject[]>([
        { id: '1', label: '标签' },
        { id: '2', label: '标签', disabled: true },
        { id: '3', label: '标签' },
    ])

    return (
        <TagGroup
            data={tagData}
            mode="edit"
            onRemove={(tag, tags, currentTags) => console.log('onRemove', tag)}
            onChange={setTagData}
            onAdd={(tag, tags, currentTags) => console.log('onAdd', tag)}
        />
    )
}
```

### 可选择标签组（select 模式）

```tsx
import { useState } from 'react'
import { TagGroup, TagObject } from '@befe/brick'

const defaultData: TagObject[] = [
    { id: '1', label: '标签1' },
    { id: '2', label: '标签2', selected: true },
    { id: '3', label: '标签3', disabled: true, selected: true },
    { id: '4', label: '标签4', disabled: true },
]

function Demo() {
    const [dataNormal, setDataNormal] = useState(defaultData)
    const [dataLight, setDataLight] = useState(defaultData)

    return (
        <div>
            <TagGroup data={dataNormal} mode="select" onChange={setDataNormal} />
            <TagGroup color="light" data={dataLight} mode="select" onChange={setDataLight} />
        </div>
    )
}
```

## 注意事项

- `id` 在 edit/select 模式下必须传入才支持相应操作
- 只有 size `sm`/`md`/`lg` 支持编辑模式（`xs` 不支持）
- 编辑模式下标签输入时宽度固定，结束输入后根据内容撑开
- `color` 属性仅 `TagGroup mode="select"` 支持 `"normal"` 和 `"light"` 两种值