logan
8b921c6c83
P0安全: SECRET_KEY/ADMIN_PASSWORD/CORS环境变量化, seed仅admin P1Mock: mock.ts 301->88行, 删8数据mock+5generateMock, net-1300行 P2组件: useToast/useFetchList+ConfirmDialog/FormDialog P3菜单: menuSections/menuItems->constants/menu.ts P4API: NotificationsPage/WorkflowPage重写+RolesPage演示 测试: 1050passed, tsc clean
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { CheckCircle, XCircle, X } from 'lucide-react';
|
|
|
|
export interface Toast {
|
|
message: string;
|
|
type: 'success' | 'error';
|
|
}
|
|
|
|
export function useToast() {
|
|
const [toast, setToast] = useState<Toast | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!toast) return;
|
|
const t = setTimeout(() => setToast(null), 3000);
|
|
return () => clearTimeout(t);
|
|
}, [toast]);
|
|
|
|
const showToast = useCallback((message: string, type: 'success' | 'error' = 'success') => {
|
|
setToast({ message, type });
|
|
}, []);
|
|
|
|
const ToastComponent = () => {
|
|
if (!toast) return null;
|
|
const isSuccess = toast.type === 'success';
|
|
return (
|
|
<div
|
|
className={`fixed bottom-6 right-6 z-[100] flex items-center gap-2 rounded-lg px-4 py-3 text-sm shadow-lg
|
|
animate-[fadeInUp_0.25s_ease-out] ${isSuccess ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}
|
|
>
|
|
{isSuccess ? <CheckCircle className="h-4 w-4 shrink-0" /> : <XCircle className="h-4 w-4 shrink-0" />}
|
|
<span>{toast.message}</span>
|
|
<button onClick={() => setToast(null)} className="ml-1 hover:opacity-70">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return { toast, showToast, ToastComponent };
|
|
}
|