diff --git a/src/family/components/Toast.tsx b/src/family/components/Toast.tsx new file mode 100644 index 0000000..cfed2a7 --- /dev/null +++ b/src/family/components/Toast.tsx @@ -0,0 +1,77 @@ +import React, { useEffect } from 'react'; +import { CheckCircle, XCircle, AlertCircle, X } from 'lucide-react'; + +export type ToastType = 'success' | 'error' | 'warning' | 'info'; + +interface ToastProps { + message: string; + type?: ToastType; + duration?: number; + onClose: () => void; +} + +/** + * Toast 提示组件 + * 用于显示操作结果的轻量级提示 + */ +export const Toast: React.FC = ({ + message, + type = 'info', + duration = 3000, + onClose, +}) => { + useEffect(() => { + if (duration > 0) { + const timer = setTimeout(onClose, duration); + return () => clearTimeout(timer); + } + }, [duration, onClose]); + + const getIcon = () => { + switch (type) { + case 'success': + return ; + case 'error': + return ; + case 'warning': + return ; + default: + return ; + } + }; + + const getBackgroundColor = () => { + switch (type) { + case 'success': + return 'bg-green-50 border-green-200'; + case 'error': + return 'bg-red-50 border-red-200'; + case 'warning': + return 'bg-orange-50 border-orange-200'; + default: + return 'bg-blue-50 border-blue-200'; + } + }; + + return ( +
+
+ {getIcon()} +

{message}

+ +
+
+ ); +};