From e443a4d19b495abfc4380ce10e75f0d41ed293e8 Mon Sep 17 00:00:00 2001
From: 15945162479 <15945162479@qq.com>
Date: Sat, 13 Dec 2025 14:46:11 +0800
Subject: [PATCH] Add File

---
 src/elderly/components/ConfirmDialog.tsx | 41 ++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/elderly/components/ConfirmDialog.tsx

diff --git a/src/elderly/components/ConfirmDialog.tsx b/src/elderly/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..f3cf899
--- /dev/null
+++ b/src/elderly/components/ConfirmDialog.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+interface ConfirmDialogProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * 老人友好的确认对话框
+ * 替代浏览器的 confirm
+ */
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ message, onConfirm, onCancel }) => {
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-yellow-50 border-4 border-yellow-300 rounded-3xl shadow-2xl p-8 max-w-md w-full animate-in fade-in zoom-in duration-300">
+        <div className="flex flex-col items-center gap-6">
+          <AlertTriangle size={64} className="text-yellow-600" />
+          <p className="text-elderly-xl text-gray-900 text-center font-bold leading-relaxed">
+            {message}
+          </p>
+          <div className="flex gap-4 w-full">
+            <button
+              onClick={onCancel}
+              className="btn-elderly bg-gray-400 hover:bg-gray-500 flex-1"
+            >
+              取消
+            </button>
+            <button
+              onClick={onConfirm}
+              className="btn-elderly bg-yellow-500 hover:bg-yellow-600 flex-1"
+            >
+              确定
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};