feat: 实现 NoWhatever 别说随便餐厅决策 Web App
- Framer Motion 卡片滑动 UI，带物理阻尼动画 - 多人房间系统，4位房间号 + SWR 实时轮询 - 高德地图 POI v5 API 搜索附近餐厅 - Web Share API 一键邀请，剪贴板降级方案 - SQLite/Prisma 持久化存储 - 移动端优先响应式设计 (Tailwind CSS)
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { X, Heart } from "lucide-react";
|
||||
import { SwipeDirection } from "@/types";
|
||||
|
||||
interface ActionButtonsProps {
|
||||
onAction: (direction: SwipeDirection) => void;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
export default function ActionButtons({
|
||||
onAction,
|
||||
disabled,
|
||||
}: ActionButtonsProps) {
|
||||
return (
|
||||
<div className="relative z-10 flex items-center justify-center gap-8 pb-8 pt-4">
|
||||
<motion.button
|
||||
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
|
||||
whileTap={{ scale: 0.85 }}
|
||||
whileHover={{ scale: 1.08 }}
|
||||
onClick={() => onAction("left")}
|
||||
disabled={disabled}
|
||||
aria-label="Nope"
|
||||
>
|
||||
<X size={30} className="text-rose-500" strokeWidth={3} />
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
|
||||
whileTap={{ scale: 0.85 }}
|
||||
whileHover={{ scale: 1.08 }}
|
||||
onClick={() => onAction("right")}
|
||||
disabled={disabled}
|
||||
aria-label="Like"
|
||||
>
|
||||
<Heart
|
||||
size={28}
|
||||
className="fill-emerald-500 text-emerald-500"
|
||||
strokeWidth={2.5}
|
||||
/>
|
||||
</motion.button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
MapPin,
|
||||
Star,
|
||||
PartyPopper,
|
||||
Navigation,
|
||||
Phone,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import { Restaurant } from "@/types";
|
||||
|
||||
interface MatchResultProps {
|
||||
restaurant: Restaurant;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
function buildNavUrl(restaurant: Restaurant): string {
|
||||
if (restaurant.location) {
|
||||
const [lng, lat] = restaurant.location.split(",");
|
||||
return `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(restaurant.name)}&callnative=1`;
|
||||
}
|
||||
return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(restaurant.name)}`;
|
||||
}
|
||||
|
||||
export default function MatchResult({ restaurant, onReset }: MatchResultProps) {
|
||||
return (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-linear-to-b from-emerald-500 to-teal-600 px-6 py-10"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0, rotate: -20 }}
|
||||
animate={{ scale: 1, rotate: 0 }}
|
||||
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
|
||||
>
|
||||
<PartyPopper size={56} className="text-yellow-300" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
className="mt-3 text-4xl font-black text-white"
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.35 }}
|
||||
>
|
||||
就去这了！
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="mt-1 text-sm font-medium text-emerald-100"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.45 }}
|
||||
>
|
||||
Everyone agreed on this one
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="mt-6 w-full max-w-sm overflow-hidden rounded-2xl bg-white shadow-2xl"
|
||||
initial={{ y: 60, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
|
||||
>
|
||||
<img
|
||||
src={restaurant.image}
|
||||
alt={restaurant.name}
|
||||
className="h-44 w-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h2 className="text-lg font-bold leading-tight text-zinc-900">
|
||||
{restaurant.name}
|
||||
</h2>
|
||||
{restaurant.category && (
|
||||
<span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600">
|
||||
{restaurant.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex items-center gap-3 text-sm text-zinc-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Star size={13} className="fill-amber-400 text-amber-400" />
|
||||
{restaurant.rating}
|
||||
</span>
|
||||
<span className="font-semibold text-emerald-600">
|
||||
{restaurant.price}
|
||||
</span>
|
||||
{restaurant.distance && (
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin size={13} />
|
||||
{restaurant.distance}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{restaurant.address && (
|
||||
<p className="mt-2 text-xs leading-relaxed text-zinc-400">
|
||||
{restaurant.address}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{restaurant.openTime && (
|
||||
<div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400">
|
||||
<Clock size={12} />
|
||||
<span>{restaurant.openTime}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{restaurant.tag && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{restaurant.tag
|
||||
.split(",")
|
||||
.slice(0, 4)
|
||||
.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
|
||||
>
|
||||
{t.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="mt-5 flex w-full max-w-sm flex-col gap-2.5"
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.65 }}
|
||||
>
|
||||
<motion.a
|
||||
href={buildNavUrl(restaurant)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold text-emerald-600 shadow-lg transition-colors hover:bg-emerald-50"
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Navigation size={16} />
|
||||
导航过去
|
||||
</motion.a>
|
||||
|
||||
{restaurant.tel && (
|
||||
<motion.a
|
||||
href={`tel:${restaurant.tel}`}
|
||||
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Phone size={15} />
|
||||
打电话订位
|
||||
</motion.a>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<motion.button
|
||||
className="mt-4 text-sm font-medium text-emerald-200 underline underline-offset-2 hover:text-white"
|
||||
onClick={onReset}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.8 }}
|
||||
>
|
||||
再来一轮
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { Star, MapPin, Clock } from "lucide-react";
|
||||
import { Restaurant } from "@/types";
|
||||
|
||||
interface RestaurantCardProps {
|
||||
restaurant: Restaurant;
|
||||
}
|
||||
|
||||
export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-xl">
|
||||
<div className="relative h-[58%] w-full shrink-0 overflow-hidden">
|
||||
<img
|
||||
src={restaurant.image}
|
||||
alt={restaurant.name}
|
||||
className="h-full w-full object-cover"
|
||||
draggable={false}
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" />
|
||||
|
||||
{restaurant.category && (
|
||||
<span className="absolute bottom-3 left-4 rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
|
||||
{restaurant.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
|
||||
<h2 className="text-lg font-bold leading-tight text-zinc-900">
|
||||
{restaurant.name}
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star size={14} className="fill-amber-400 text-amber-400" />
|
||||
<span className="text-sm font-semibold text-zinc-800">
|
||||
{restaurant.rating}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className="text-sm font-semibold text-emerald-600">
|
||||
{restaurant.price}
|
||||
</span>
|
||||
|
||||
{restaurant.distance && (
|
||||
<div className="flex items-center gap-1 text-zinc-400">
|
||||
<MapPin size={13} />
|
||||
<span className="text-xs">{restaurant.distance}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{restaurant.address && (
|
||||
<p className="truncate text-xs leading-tight text-zinc-400">
|
||||
{restaurant.address}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{restaurant.openTime && (
|
||||
<div className="flex items-center gap-1 text-xs text-zinc-400">
|
||||
<Clock size={12} />
|
||||
<span>{restaurant.openTime}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{restaurant.tag && (
|
||||
<div className="flex gap-1.5 overflow-hidden">
|
||||
{restaurant.tag
|
||||
.split(",")
|
||||
.slice(0, 3)
|
||||
.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
|
||||
>
|
||||
{t.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import { AnimatePresence } from "framer-motion";
|
||||
import SwipeableCard from "./SwipeableCard";
|
||||
import ActionButtons from "./ActionButtons";
|
||||
import MatchResult from "./MatchResult";
|
||||
import { Restaurant, SwipeDirection } from "@/types";
|
||||
|
||||
interface SwipeDeckProps {
|
||||
restaurants: Restaurant[];
|
||||
roomId: string;
|
||||
userId: string;
|
||||
matchedRestaurantId: string | null;
|
||||
}
|
||||
|
||||
export default function SwipeDeck({
|
||||
restaurants,
|
||||
roomId,
|
||||
userId,
|
||||
matchedRestaurantId,
|
||||
}: SwipeDeckProps) {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [showMatch, setShowMatch] = useState(false);
|
||||
const [localMatchId, setLocalMatchId] = useState<string | null>(null);
|
||||
const swipeFnRef = useRef<((direction: SwipeDirection) => void) | null>(null);
|
||||
const swipingRef = useRef(false);
|
||||
|
||||
const resolvedMatchId = matchedRestaurantId ?? localMatchId;
|
||||
|
||||
useEffect(() => {
|
||||
if (matchedRestaurantId != null && !showMatch) {
|
||||
setShowMatch(true);
|
||||
}
|
||||
}, [matchedRestaurantId, showMatch]);
|
||||
|
||||
const registerSwipe = useCallback(
|
||||
(fn: (direction: SwipeDirection) => void) => {
|
||||
swipeFnRef.current = fn;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const sendSwipe = async (restaurantId: string, action: "like" | "nope") => {
|
||||
try {
|
||||
const res = await fetch(`/api/room/${roomId}/swipe`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId, restaurantId, action }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.match != null) {
|
||||
setLocalMatchId(data.match);
|
||||
}
|
||||
} catch {
|
||||
// Polling will catch match state
|
||||
}
|
||||
};
|
||||
|
||||
const handleSwipe = useCallback(
|
||||
(direction: SwipeDirection) => {
|
||||
const current = restaurants[currentIndex];
|
||||
if (!current) return;
|
||||
|
||||
swipingRef.current = false;
|
||||
|
||||
const action = direction === "right" ? "like" : "nope";
|
||||
sendSwipe(current.id, action);
|
||||
|
||||
const nextIndex = currentIndex + 1;
|
||||
setCurrentIndex(nextIndex);
|
||||
swipeFnRef.current = null;
|
||||
|
||||
if (nextIndex >= restaurants.length && !resolvedMatchId) {
|
||||
setTimeout(() => {
|
||||
if (!showMatch) setShowMatch(true);
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentIndex, restaurants, roomId, userId, resolvedMatchId, showMatch],
|
||||
);
|
||||
|
||||
const handleButtonAction = useCallback(
|
||||
(direction: SwipeDirection) => {
|
||||
if (swipeFnRef.current && !swipingRef.current) {
|
||||
swipingRef.current = true;
|
||||
swipeFnRef.current(direction);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
setCurrentIndex(0);
|
||||
setShowMatch(false);
|
||||
setLocalMatchId(null);
|
||||
}, []);
|
||||
|
||||
const isDone = currentIndex >= restaurants.length || resolvedMatchId != null;
|
||||
|
||||
const matchRestaurant = resolvedMatchId
|
||||
? restaurants.find((r) => r.id === resolvedMatchId) ?? restaurants[0]
|
||||
: restaurants[0];
|
||||
|
||||
const showWaiting =
|
||||
currentIndex >= restaurants.length && !resolvedMatchId && !showMatch;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative flex flex-1 items-center justify-center px-4">
|
||||
<div className="relative h-[70vh] w-full max-w-sm">
|
||||
{!resolvedMatchId && (
|
||||
<AnimatePresence>
|
||||
{restaurants.map((restaurant, index) => {
|
||||
if (index < currentIndex || index > currentIndex + 1)
|
||||
return null;
|
||||
const isTop = index === currentIndex;
|
||||
return (
|
||||
<SwipeableCard
|
||||
key={restaurant.id}
|
||||
restaurant={restaurant}
|
||||
isTop={isTop}
|
||||
onSwipe={handleSwipe}
|
||||
registerSwipe={isTop ? registerSwipe : undefined}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
|
||||
{showWaiting && (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-2">
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
|
||||
<p className="text-sm text-zinc-400">等待其他人完成选择...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ActionButtons onAction={handleButtonAction} disabled={isDone} />
|
||||
|
||||
{showMatch && matchRestaurant && (
|
||||
<MatchResult restaurant={matchRestaurant} onReset={handleReset} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import {
|
||||
motion,
|
||||
useMotionValue,
|
||||
useTransform,
|
||||
animate,
|
||||
PanInfo,
|
||||
MotionValue,
|
||||
} from "framer-motion";
|
||||
import RestaurantCard from "./RestaurantCard";
|
||||
import { Restaurant, SwipeDirection } from "@/types";
|
||||
|
||||
const SWIPE_THRESHOLD = 120;
|
||||
const EXIT_X = 600;
|
||||
const ROTATION_RANGE = 18;
|
||||
|
||||
interface SwipeableCardProps {
|
||||
restaurant: Restaurant;
|
||||
isTop: boolean;
|
||||
onSwipe: (direction: SwipeDirection) => void;
|
||||
registerSwipe?: (fn: (direction: SwipeDirection) => void) => void;
|
||||
}
|
||||
|
||||
function SwipeOverlay({ x }: { x: MotionValue<number> }) {
|
||||
const likeOpacity = useTransform(x, [0, SWIPE_THRESHOLD], [0, 1]);
|
||||
const nopeOpacity = useTransform(x, [-SWIPE_THRESHOLD, 0], [1, 0]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0 z-10 flex items-start justify-start rounded-2xl border-4 border-emerald-400 p-6"
|
||||
style={{ opacity: likeOpacity }}
|
||||
>
|
||||
<span className="rounded-lg border-3 border-emerald-400 px-3 py-1 text-2xl font-extrabold tracking-wide text-emerald-400">
|
||||
LIKE
|
||||
</span>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0 z-10 flex items-start justify-end rounded-2xl border-4 border-rose-400 p-6"
|
||||
style={{ opacity: nopeOpacity }}
|
||||
>
|
||||
<span className="rounded-lg border-3 border-rose-400 px-3 py-1 text-2xl font-extrabold tracking-wide text-rose-400">
|
||||
NOPE
|
||||
</span>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SwipeableCard({
|
||||
restaurant,
|
||||
isTop,
|
||||
onSwipe,
|
||||
registerSwipe,
|
||||
}: SwipeableCardProps) {
|
||||
const x = useMotionValue(0);
|
||||
const rotate = useTransform(x, [-300, 300], [-ROTATION_RANGE, ROTATION_RANGE]);
|
||||
const opacity = useTransform(x, [-300, -100, 0, 100, 300], [0.5, 1, 1, 1, 0.5]);
|
||||
|
||||
const isSwiping = useRef(false);
|
||||
|
||||
const flyOut = (direction: SwipeDirection) => {
|
||||
if (isSwiping.current) return;
|
||||
isSwiping.current = true;
|
||||
const exitX = direction === "right" ? EXIT_X : -EXIT_X;
|
||||
animate(x, exitX, {
|
||||
type: "spring",
|
||||
stiffness: 600,
|
||||
damping: 40,
|
||||
onComplete: () => onSwipe(direction),
|
||||
});
|
||||
};
|
||||
|
||||
if (registerSwipe) {
|
||||
registerSwipe(flyOut);
|
||||
}
|
||||
|
||||
const handleDragEnd = (_: unknown, info: PanInfo) => {
|
||||
const offsetX = info.offset.x;
|
||||
if (offsetX > SWIPE_THRESHOLD) {
|
||||
flyOut("right");
|
||||
} else if (offsetX < -SWIPE_THRESHOLD) {
|
||||
flyOut("left");
|
||||
} else {
|
||||
animate(x, 0, { type: "spring", stiffness: 500, damping: 30 });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
x,
|
||||
rotate,
|
||||
opacity,
|
||||
zIndex: isTop ? 10 : 0,
|
||||
cursor: isTop ? "grab" : "default",
|
||||
}}
|
||||
drag={isTop ? "x" : false}
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
dragElastic={0.9}
|
||||
onDragEnd={handleDragEnd}
|
||||
whileDrag={{ cursor: "grabbing" }}
|
||||
initial={isTop ? { scale: 1 } : { scale: 0.95, y: 16 }}
|
||||
animate={isTop ? { scale: 1, y: 0 } : { scale: 0.95, y: 16 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 25 }}
|
||||
>
|
||||
<SwipeOverlay x={x} />
|
||||
<RestaurantCard restaurant={restaurant} />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Users, Share2 } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
interface TopNavProps {
|
||||
roomId: string;
|
||||
userCount: number;
|
||||
}
|
||||
|
||||
export default function TopNav({ roomId, userCount }: TopNavProps) {
|
||||
const [toast, setToast] = useState("");
|
||||
|
||||
const showToast = useCallback((msg: string) => {
|
||||
setToast(msg);
|
||||
setTimeout(() => setToast(""), 2200);
|
||||
}, []);
|
||||
|
||||
const handleInvite = useCallback(async () => {
|
||||
const url = window.location.href;
|
||||
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("复制失败，请手动复制链接");
|
||||
}
|
||||
}, [showToast]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="relative z-10 flex h-14 items-center justify-between px-4">
|
||||
<div className="w-24">
|
||||
<button
|
||||
onClick={handleInvite}
|
||||
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} />
|
||||
邀请饭搭子
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1 className="text-center text-base font-bold tracking-tight text-zinc-900">
|
||||
<span className="block leading-tight">NoWhatever</span>
|
||||
<span className="block text-[10px] font-medium tracking-widest text-zinc-400">
|
||||
别说随便
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="flex w-24 items-center justify-end gap-1.5 text-xs text-zinc-500">
|
||||
<span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
|
||||
{roomId}
|
||||
</span>
|
||||
<div className="flex items-center gap-0.5">
|
||||
<Users size={13} />
|
||||
<span className="font-semibold text-emerald-500">{userCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<AnimatePresence>
|
||||
{toast && (
|
||||
<motion.div
|
||||
className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
|
||||
initial={{ opacity: 0, y: -12, x: "-50%" }}
|
||||
animate={{ opacity: 1, y: 0, x: "-50%" }}
|
||||
exit={{ opacity: 0, y: -12, x: "-50%" }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||||
>
|
||||
{toast}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user