feat: 拦截浏览器返回键，退出房间前弹窗确认

2026-02-24 20:21:47 +08:00
parent a6fc523f4f
commit fc0a2a018b
3 changed files with 124 additions and 6 deletions
@@ -0,0 +1,75 @@
+"use client";
+
+import { useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { LogOut } from "lucide-react";
+
+interface LeaveConfirmModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function LeaveConfirmModal({
+  open,
+  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/40 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-white px-6 py-6 shadow-2xl"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            transition={{ type: "spring", damping: 25, stiffness: 350 }}
+          >
+            <div className="flex flex-col items-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-50">
+                <LogOut size={22} className="text-rose-500" />
+              </div>
+
+              <h2 className="mt-4 text-base font-bold text-zinc-900">
+                确定要退出房间吗？
+              </h2>
+              <p className="mt-1.5 text-center text-xs leading-relaxed text-zinc-400">
+                退出后你的滑卡进度不会丢失，可以用房间号重新加入
+              </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 border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
+                >
+                  继续滑卡
+                </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-md shadow-rose-200 transition-colors active:bg-rose-600"
+                >
+                  退出房间
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}