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

src/components/TopNav.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
 import { Users, QrCode, LogOut } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import QrInviteModal from "./QrInviteModal";
@@ -9,10 +8,10 @@ import QrInviteModal from "./QrInviteModal";
 interface TopNavProps {
   roomId: string;
   userCount: number;
+  onExit?: () => void;
 }
 
-export default function TopNav({ roomId, userCount }: TopNavProps) {
-  const router = useRouter();
+export default function TopNav({ roomId, userCount, onExit }: TopNavProps) {
   const [toast, setToast] = useState("");
   const [showQr, setShowQr] = useState(false);
 
@@ -50,7 +49,7 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
             <span className="font-semibold text-emerald-500">{userCount}</span>
           </div>
           <button
-            onClick={() => router.push("/")}
+            onClick={onExit}
             className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600"
             aria-label="退出房间"
           >