# Alert

页面内的提示通知组件，用于展示信息、成功、警告、错误等状态反馈。

## 适用场景

- 页面顶部或区域内的全局提示信息
- 操作结果的状态反馈（成功、警告、错误）
- 需要用户关注但不打断操作流的通知
- 弹框内需要内嵌提示信息

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| type | `"info" \| "success" \| "warning" \| "error"` | `"info"` | 否 | 类型 |
| visible | `boolean` | `-` | 否 | 是否显示控制值 |
| defaultVisible | `boolean` | `true` | 否 | 是否显示默认值 |
| icon | `boolean \| SvgFC` | `false` | 否 | 图标。false 不使用；true 使用 theme 定义的 icon set；传入 SvgFC 使用自定义图标 |
| headline | `ReactNode` | `-` | 否 | 标题 |
| content | `ReactNode` | `-` | 否 | 内容 |
| extra | `ReactNode` | `-` | 否 | 额外内容（如操作链接） |
| onClose | `() => void` | `-` | 否 | 关闭回调 |
| closable | `boolean` | `false` | 否 | 是否可关闭。若已定义 onClose，则自动视为可关闭，此项被忽略 |
| size | `"md" \| "sm"` | `"md"` | 否 | 尺寸规格 |

## 典型用法

### 基础类型

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

<Alert content={'通知话术描述通知话术描述'} />
<Alert type={'success'} content={'成功话术描述成功话术描述'} />
<Alert type={'warning'} content={'警告话术描述警告话术描述'} />
<Alert type={'error'} content={'错误话术描述错误话术描述'} />

// 带图标与关闭按钮
<Alert content={'通知话术描述通知话术描述'} icon closable />
// 带标题
<Alert headline={'通知标题'} content={'通知话术描述通知话术描述'} icon />
```

### 带额外操作内容

```tsx
import {Alert, Link} from '@befe/brick'

const extra = <Link type={'intensive'}>查看详情</Link>

<Alert content={'通知提示话术通知提示话术'} icon extra={extra} />
<Alert
    type={'warning'}
    headline={'通知提示标题'}
    content={'通知提示话术通知提示话术'}
    icon
    extra={extra}
/>
<Alert
    type={'error'}
    headline={'通知提示标题'}
    content={'通知提示话术通知提示话术'}
    icon
    closable
    extra={extra}
/>
```

### 小尺寸

> 默认规格为 md；弹框中的 Alert 建议使用 sm

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

<Alert size={'sm'} content={'通知话术描述通知话术描述'} />
<Alert size={'sm'} headline={'通知标题'} content={'通知话术描述通知话术描述'} />
<Alert size={'sm'} type={'success'} content={'成功话术描述成功话术描述'} icon />
<Alert size={'sm'} type={'success'} headline={'成功标题'} content={'成功话术描述成功话术描述'} icon />
```

## 注意事项

- 默认规格为 md，弹框中的 Alert 建议使用 sm
- 超长文本属于特殊情况，一般要求标题和内容控制在合理字数以内
- 定义了 `onClose` 后自动推导为可关闭，无需再设置 `closable`