Spaces:
Sleeping
Sleeping
File size: 2,118 Bytes
5e8f957 ea97403 5e8f957 ea97403 5e8f957 842b4cd 5e8f957 ea97403 d7063e5 ea97403 5e8f957 842b4cd 5e8f957 842b4cd ea97403 5e8f957 842b4cd 5e8f957 ea97403 842b4cd 5e8f957 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import React from 'react';
import { AlertTriangle, Info } from 'lucide-react';
interface ConfirmModalProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
title?: string;
message: string;
confirmText?: string;
cancelText?: string;
isDanger?: boolean;
type?: 'confirm' | 'alert';
}
export const ConfirmModal: React.FC<ConfirmModalProps> = ({
isOpen, onClose, onConfirm, title = "提示", message,
confirmText = "确定", cancelText = "取消", isDanger = false, type = 'confirm'
}) => {
if (!isOpen) return null;
const handleConfirm = () => {
onConfirm();
onClose();
};
return (
<div className="fixed inset-0 bg-black/60 z-[99999] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
<div className="bg-white rounded-2xl shadow-2xl max-w-sm w-full overflow-hidden animate-in zoom-in-95 border border-gray-100">
<div className="p-6 text-center">
<div className={`mx-auto w-12 h-12 rounded-full flex items-center justify-center mb-4 ${isDanger ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600'}`}>
{isDanger ? <AlertTriangle size={24} /> : <Info size={24} />}
</div>
<h3 className="text-lg font-bold text-gray-900 mb-2">{title}</h3>
<p className="text-sm text-gray-500 leading-relaxed whitespace-pre-wrap">{message}</p>
</div>
<div className="bg-gray-50 px-6 py-4 flex gap-3">
{type === 'confirm' && (
<button
onClick={onClose}
className="flex-1 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-200 transition-colors border border-gray-200 bg-white"
>
{cancelText}
</button>
)}
<button
onClick={handleConfirm}
className={`flex-1 py-2.5 rounded-xl text-sm font-bold text-white shadow-md transition-colors ${isDanger ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'}`}
>
{confirmText}
</button>
</div>
</div>
</div>
);
};
|