// src/components/Toast.tsx

// Toast通知组件 - 替代alert弹窗

import { useEffect } from 'react';

export interface ToastProps {

message: string;

type: 'success' | 'error' | 'info';

onClose: () => void;

duration?: number;

}

export default function Toast({ message, type, onClose, duration = 3000 }: ToastProps) {

useEffect(() => {

const timer = setTimeout(() => {

onClose();

}, duration);

return () => clearTimeout(timer);

}, [duration, onClose]);

return (

<div className={`toast toast-${type}`}>

<span className="toast-icon">

{type === 'success' && '✓'}

{type === 'error' && '✕'}

{type === 'info' && 'ℹ'}

</span>

<span className="toast-message">{message}</span>

<button className="toast-close" onClick={onClose}>

×

</button>

</div>

);

}