# Alert 组件使用说明

## 简介

`Alert` 是一个通用的提示框组件，类似于 Ant Design 的 Alert，用于向用户显示重要的提示信息。

## 特性

- 🎨 支持 4 种类型：`warning`、`info`、`success`、`error`
- 🎭 可选显示/隐藏图标
- ❌ 可选是否可关闭
- 🎯 居中模态显示
- ✨ 优雅的动画效果

## 基本用法

```tsx
import { Alert } from "@/components";

function MyComponent() {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <Alert
      isOpen={showAlert}
      onClose={() => setShowAlert(false)}
      message="这是一条提示信息"
      type="warning"
    />
  );
}
```

## API

### Props

| 参数     | 说明           | 类型                                          | 默认值      | 必填 |
| -------- | -------------- | --------------------------------------------- | ----------- | ---- |
| isOpen   | 是否显示 Alert | `boolean`                                     | -           | ✅   |
| onClose  | 关闭回调函数   | `() => void`                                  | -           | ✅   |
| message  | 提示内容       | `string \| ReactNode`                         | -           | ✅   |
| type     | 提示类型       | `'warning' \| 'info' \| 'success' \| 'error'` | `'warning'` | ❌   |
| showIcon | 是否显示图标   | `boolean`                                     | `true`      | ❌   |
| closable | 是否可关闭     | `boolean`                                     | `true`      | ❌   |

## 示例

### 警告提示

```tsx
<Alert
  isOpen={showWarning}
  onClose={() => setShowWarning(false)}
  message="该名师工作室数字睿教正在筹划中"
  type="warning"
/>
```

### 成功提示

```tsx
<Alert
  isOpen={showSuccess}
  onClose={() => setShowSuccess(false)}
  message="操作成功！"
  type="success"
/>
```

### 错误提示

```tsx
<Alert
  isOpen={showError}
  onClose={() => setShowError(false)}
  message="操作失败，请稍后重试"
  type="error"
/>
```

### 信息提示

```tsx
<Alert
  isOpen={showInfo}
  onClose={() => setShowInfo(false)}
  message="这是一条普通信息"
  type="info"
/>
```

### 自定义内容

```tsx
<Alert
  isOpen={showCustom}
  onClose={() => setShowCustom(false)}
  message={
    <div>
      <h3 className="text-lg font-bold">自定义标题</h3>
      <p className="text-sm mt-1">这是自定义的内容</p>
    </div>
  }
  type="info"
/>
```

### 不可关闭的提示

```tsx
<Alert
  isOpen={showPermanent}
  onClose={() => {}}
  message="这是一条不可关闭的提示"
  type="info"
  closable={false}
/>
```

### 无图标提示

```tsx
<Alert
  isOpen={showNoIcon}
  onClose={() => setShowNoIcon(false)}
  message="这是一条没有图标的提示"
  type="info"
  showIcon={false}
/>
```

## 样式说明

每种类型都有对应的颜色主题：

- **warning**: 黄色系（适用于警告信息）
- **info**: 蓝色系（适用于一般信息）
- **success**: 绿色系（适用于成功提示）
- **error**: 红色系（适用于错误提示）

## 注意事项

1. Alert 组件会创建一个全屏半透明遮罩层
2. 点击遮罩层可以关闭 Alert（当 `closable` 为 `true` 时）
3. Alert 的 z-index 为 50，确保在大多数元素之上
4. 支持动画效果，通过 `animate-scale-in` 类实现