feat: 实现 NoWhatever 别说随便餐厅决策 Web App

- Framer Motion 卡片滑动 UI,带物理阻尼动画
- 多人房间系统,4位房间号 + SWR 实时轮询
- 高德地图 POI v5 API 搜索附近餐厅
- Web Share API 一键邀请,剪贴板降级方案
- SQLite/Prisma 持久化存储
- 移动端优先响应式设计 (Tailwind CSS)
This commit is contained in:
2026-02-24 16:49:43 +08:00
parent f5d921d585
commit d87d30ccc0
37 changed files with 8680 additions and 84 deletions
+52
View File
@@ -0,0 +1,52 @@
"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import TopNav from "@/components/TopNav";
import SwipeDeck from "@/components/SwipeDeck";
import { useRoomPolling } from "@/hooks/useRoomPolling";
import { getUserId } from "@/lib/userId";
export default function RoomPage() {
const params = useParams<{ id: string }>();
const roomId = params.id;
const [userId, setUserId] = useState("");
const [joined, setJoined] = useState(false);
const { userCount, match, restaurants } = useRoomPolling(roomId);
useEffect(() => {
const id = getUserId();
setUserId(id);
fetch(`/api/room/${roomId}/join`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ userId: id }),
}).then(() => setJoined(true));
}, [roomId]);
const ready = joined && userId && restaurants.length > 0;
if (!ready) {
return (
<div className="flex h-dvh flex-col items-center justify-center gap-3 bg-background">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
<p className="text-sm text-zinc-400">...</p>
</div>
);
}
return (
<div className="flex h-dvh flex-col bg-background">
<TopNav roomId={roomId} userCount={userCount} />
<SwipeDeck
restaurants={restaurants}
roomId={roomId}
userId={userId}
matchedRestaurantId={match}
/>
</div>
);
}