feat: 添加二维码邀请功能，扫码即可加入房间

2026-02-24 20:00:55 +08:00
parent 25eb228e09
commit a6fc523f4f
4 changed files with 162 additions and 28 deletions
@@ -0,0 +1,139 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { QRCodeSVG } from "qrcode.react";
+import { X, Copy, Share2, QrCode } from "lucide-react";
+
+interface QrInviteModalProps {
+  open: boolean;
+  onClose: () => void;
+  roomId: string;
+  onToast: (msg: string) => void;
+}
+
+export default function QrInviteModal({
+  open,
+  onClose,
+  roomId,
+  onToast,
+}: QrInviteModalProps) {
+  const inviteUrl =
+    typeof window !== "undefined"
+      ? `${window.location.origin}/invite/${roomId}`
+      : "";
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === backdropRef.current) onClose();
+  };
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(inviteUrl);
+      onToast("邀请链接已复制，快去发给朋友吧！");
+    } catch {
+      onToast("复制失败，请手动复制链接");
+    }
+  }, [inviteUrl, onToast]);
+
+  const handleShare = useCallback(async () => {
+    const shareData = {
+      title: "别说随便啦，来滑卡片决定吃什么！",
+      text: "我建好房间了，快点开链接一起选餐厅，滑中同一家就去吃！",
+      url: inviteUrl,
+    };
+
+    try {
+      if (navigator.share && navigator.canShare?.(shareData)) {
+        await navigator.share(shareData);
+        return;
+      }
+    } catch (e) {
+      if (e instanceof Error && e.name === "AbortError") return;
+    }
+
+    handleCopy();
+  }, [inviteUrl, handleCopy]);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          ref={backdropRef}
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          onClick={handleBackdropClick}
+        >
+          <motion.div
+            className="relative w-full max-w-sm rounded-t-3xl bg-white px-6 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
+            initial={{ y: "100%" }}
+            animate={{ y: 0 }}
+            exit={{ y: "100%" }}
+            transition={{ type: "spring", damping: 28, stiffness: 350 }}
+          >
+            <button
+              onClick={onClose}
+              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
+            >
+              <X size={16} />
+            </button>
+
+            <div className="flex flex-col items-center">
+              <div className="flex items-center gap-2 text-zinc-800">
+                <QrCode size={18} className="text-emerald-500" />
+                <h2 className="text-lg font-bold">邀请饭搭子</h2>
+              </div>
+              <p className="mt-1 text-xs text-zinc-400">
+                让朋友扫码加入房间，一起滑卡片选餐厅
+              </p>
+
+              <div className="mt-5 rounded-2xl border-2 border-dashed border-emerald-200 bg-emerald-50/30 p-4">
+                <QRCodeSVG
+                  value={inviteUrl}
+                  size={180}
+                  level="M"
+                  bgColor="transparent"
+                  fgColor="#18181b"
+                  imageSettings={{
+                    src: "",
+                    height: 0,
+                    width: 0,
+                    excavate: false,
+                  }}
+                />
+              </div>
+
+              <div className="mt-4 flex items-center gap-2">
+                <span className="text-xs text-zinc-400">房间号</span>
+                <span className="rounded-full bg-zinc-100 px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-emerald-600">
+                  {roomId}
+                </span>
+              </div>
+
+              <div className="mt-5 flex w-full gap-2.5">
+                <button
+                  onClick={handleCopy}
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
+                >
+                  <Copy size={15} />
+                  复制链接
+                </button>
+                <button
+                  onClick={handleShare}
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-emerald-500 text-sm font-semibold text-white shadow-md shadow-emerald-200 transition-colors active:bg-emerald-600"
+                >
+                  <Share2 size={15} />
+                  发送邀请
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
@@ -2,8 +2,9 @@

 import { useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { Users, Share2, LogOut } from "lucide-react";
+import { Users, QrCode, LogOut } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
+import QrInviteModal from "./QrInviteModal";

 interface TopNavProps {
  roomId: string;
@@ -13,46 +14,22 @@ interface TopNavProps {
 export default function TopNav({ roomId, userCount }: TopNavProps) {
  const router = useRouter();
  const [toast, setToast] = useState("");
+  const [showQr, setShowQr] = useState(false);

  const showToast = useCallback((msg: string) => {
    setToast(msg);
    setTimeout(() => setToast(""), 2200);
  }, []);

-  const handleInvite = useCallback(async () => {
-    const url = `${window.location.origin}/invite/${roomId}`;
-    const shareData = {
-      title: "别说随便啦，来滑卡片决定吃什么！",
-      text: "我建好房间了，快点开链接一起选餐厅，滑中同一家就去吃！",
-      url,
-    };
-
-    try {
-      if (navigator.share && navigator.canShare?.(shareData)) {
-        await navigator.share(shareData);
-        return;
-      }
-    } catch (e) {
-      if (e instanceof Error && e.name === "AbortError") return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(url);
-      showToast("邀请链接已复制，快去发给朋友吧！");
-    } catch {
-      showToast("复制失败，请手动复制链接");
-    }
-  }, [roomId, showToast]);
-
  return (
    <>
      <nav className="relative z-10 flex h-14 items-center justify-between px-4">
        <div className="w-24">
          <button
-            onClick={handleInvite}
+            onClick={() => setShowQr(true)}
            className="flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-600 transition-colors active:bg-emerald-100"
          >
-            <Share2 size={13} />
+            <QrCode size={13} />
            邀请饭搭子
          </button>
        </div>
@@ -95,6 +72,13 @@ export default function TopNav({ roomId, userCount }: TopNavProps) {
          </motion.div>
        )}
      </AnimatePresence>
+
+      <QrInviteModal
+        open={showQr}
+        onClose={() => setShowQr(false)}
+        roomId={roomId}
+        onToast={showToast}
+      />
    </>
  );
 }