master-teacher-studio/src/components/ALERT_USAGE.md

Alert 组件使用说明

简介

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

特性

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

基本用法

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	❌

示例

警告提示

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

成功提示

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

错误提示

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

信息提示

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

自定义内容

<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"
/>

不可关闭的提示

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

无图标提示

<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 类实现