初始化项目

2025-11-21 00:24:10 +08:00
commit 2878783349
34 changed files with 6774 additions and 0 deletions
--- a/components/ConfirmModal.tsx
+++ b/components/ConfirmModal.tsx
@@ -0,0 +1,52 @@
+
+import React from 'react';
+import { AlertTriangle, X } from 'lucide-react';
+import { Language } from '../types';
+import { translations } from '../utils/localization';
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  language: Language;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, language, onConfirm, onCancel }) => {
+  if (!isOpen) return null;
+  const t = translations[language].common;
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm animate-fade-in p-4">
+      <div className="bg-white w-full max-w-sm rounded-2xl shadow-2xl p-6 animate-scale-in relative">
+        <button onClick={onCancel} className="absolute top-4 right-4 text-slate-400 hover:text-slate-600">
+            <X size={20} />
+        </button>
+        <div className="flex flex-col items-center text-center">
+            <div className="w-12 h-12 bg-red-50 text-red-500 rounded-full flex items-center justify-center mb-4">
+                <AlertTriangle size={24} />
+            </div>
+            <h3 className="text-lg font-bold text-slate-800 mb-2">{title}</h3>
+            <p className="text-sm text-slate-500 mb-6">{message}</p>
+            <div className="flex gap-3 w-full">
+                <button 
+                    onClick={onCancel}
+                    className="flex-1 py-2.5 px-4 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold transition-colors"
+                >
+                    {t.cancel}
+                </button>
+                <button 
+                    onClick={onConfirm}
+                    className="flex-1 py-2.5 px-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold transition-colors shadow-lg shadow-red-200"
+                >
+                    {t.confirm}
+                </button>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;