KnowledgeBase_frontend/src/components/Snackbar.jsx

import React, { useEffect } from 'react';
import SvgIcon from './SvgIcon';

const Snackbar = ({ type = 'primary', message, duration = 3000, onClose }) => {
    if (!message) return null;

    useEffect(() => {
        if (message) {
            const timer = setTimeout(() => {
                if (onClose) onClose();
            }, duration);
            return () => clearTimeout(timer);
        }
    }, [message, duration, onClose]);

    const icons = {
        success: 'check-circle-fill',
        primary: 'info-fill',
        warning: 'exclamation-triangle-fill',
        danger: 'exclamation-triangle-fill',
    };

    // 处理关闭按钮点击
    const handleClose = (e) => {
        e.preventDefault();
        if (onClose) onClose();
    };

    return (
        <div
            className={`snackbar alert alert-${type} d-flex align-items-center justify-content-between position-fixed top-10 start-50 translate-middle w-50 z-2 gap-2`}
            role='alert'
        >
            <SvgIcon className={icons[type]} />
            <div className='flex-fill'>{message}</div>
            <button type='button' className='btn-close flex-end' onClick={handleClose} aria-label='Close'></button>
        </div>
    );
};

export default Snackbar;