feat: 添加二维码邀请功能，扫码即可加入房间
This commit is contained in:
Generated
+10
@@ -13,6 +13,7 @@
|
||||
"lucide-react": "^0.575.0",
|
||||
"next": "16.1.6",
|
||||
"prisma": "^6.19.2",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
"swr": "^2.4.0"
|
||||
@@ -5831,6 +5832,15 @@
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/qrcode.react": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
|
||||
"integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"lucide-react": "^0.575.0",
|
||||
"next": "16.1.6",
|
||||
"prisma": "^6.19.2",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
"swr": "^2.4.0"
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+12
-28
@@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user