refactor: 提取 Modal 基础组件，消除 4 个弹窗的重复样板代码

将 backdrop 遮罩、点击关闭、AnimatePresence 动画封装为 Modal 组件，
支持 sheet（底部弹出）和 dialog（居中缩放）两种变体，净减约 110 行。

src/components/LeaveConfirmModal.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
 import { LogOut } from "lucide-react";
+import Modal from "@/components/Modal";
 
 interface LeaveConfirmModalProps {
   open: boolean;
@@ -15,61 +14,35 @@ export default function LeaveConfirmModal({
   onConfirm,
   onCancel,
 }: LeaveConfirmModalProps) {
-  const backdropRef = useRef<HTMLDivElement>(null);
-
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (e.target === backdropRef.current) onCancel();
-  };
-
   return (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.15 }}
-          onClick={handleBackdropClick}
-        >
-          <motion.div
-            className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.9, opacity: 0 }}
-            transition={{ type: "spring", damping: 25, stiffness: 350 }}
+    <Modal open={open} onClose={onCancel} variant="dialog">
+      <div className="flex flex-col items-center">
+        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
+          <LogOut size={22} className="text-rose-400" />
+        </div>
+
+        <h2 className="mt-4 text-base font-bold text-heading">
+          确定要退出房间吗？
+        </h2>
+        <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
+          退出后你的滑卡进度不会丢失，可以用房间号重新加入
+        </p>
+
+        <div className="mt-5 flex w-full gap-2.5">
+          <button
+            onClick={onCancel}
+            className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
           >
-            <div className="flex flex-col items-center">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
-                <LogOut size={22} className="text-rose-400" />
-              </div>
-
-              <h2 className="mt-4 text-base font-bold text-heading">
-                确定要退出房间吗？
-              </h2>
-              <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
-                退出后你的滑卡进度不会丢失，可以用房间号重新加入
-              </p>
-
-              <div className="mt-5 flex w-full gap-2.5">
-                <button
-                  onClick={onCancel}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
-                >
-                  继续滑卡
-                </button>
-                <button
-                  onClick={onConfirm}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
-                >
-                  退出房间
-                </button>
-              </div>
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
+            继续滑卡
+          </button>
+          <button
+            onClick={onConfirm}
+            className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
+          >
+            退出房间
+          </button>
+        </div>
+      </div>
+    </Modal>
   );
 }