diff --git a/app/components/ui/MessageModal.tsx b/app/components/ui/MessageModal.tsx index 169c80b..af2c9c9 100644 --- a/app/components/ui/MessageModal.tsx +++ b/app/components/ui/MessageModal.tsx @@ -40,6 +40,8 @@ interface MessageModalProps { customIcon?: React.ReactNode; // 自定义内容 children?: React.ReactNode; + // 确认按钮延迟时间(秒)- 用于危险操作(如删除) + confirmDelay?: number; } // 默认自动关闭延迟 @@ -63,10 +65,12 @@ export function MessageModal({ cancelText = '取消', showCloseButton = true, customIcon, - children + children, + confirmDelay = 0 }: MessageModalProps) { const [isClosing, setIsClosing] = useState(false); const [portalElement, setPortalElement] = useState(null); + const [remainingSeconds, setRemainingSeconds] = useState(confirmDelay); // 在客户端渲染时获取 portal 容器 useEffect(() => { @@ -108,6 +112,23 @@ export function MessageModal({ } }, [isOpen, autoClose, autoCloseDelay, handleClose]); + // 确认延迟倒计时 + useEffect(() => { + if (isOpen && confirmDelay > 0) { + setRemainingSeconds(confirmDelay); + const timer = setInterval(() => { + setRemainingSeconds((prev) => { + if (prev <= 1) { + clearInterval(timer); + return 0; + } + return prev - 1; + }); + }, 1000); + return () => clearInterval(timer); + } + }, [isOpen, confirmDelay]); + // 关闭按钮键盘交互 const handleKeyDown = useCallback((e: React.KeyboardEvent) => { if (e.key === 'Escape') { @@ -194,15 +215,20 @@ export function MessageModal({
{onConfirm && ( <> - {cancelText && ( -