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,41 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getRoomData, updateRoomData } from "@/lib/store";
|
||||
|
||||
export async function POST(
|
||||
req: Request,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
const { id } = await params;
|
||||
|
||||
try {
|
||||
const data = await getRoomData(id);
|
||||
|
||||
if (!data) {
|
||||
return NextResponse.json(
|
||||
{ error: "房间不存在或已过期" },
|
||||
{ status: 404 },
|
||||
);
|
||||
}
|
||||
|
||||
const { userId } = await req.json();
|
||||
if (!userId) {
|
||||
return NextResponse.json({ error: "userId required" }, { status: 400 });
|
||||
}
|
||||
|
||||
if (!data.users.includes(userId)) {
|
||||
data.users.push(userId);
|
||||
await updateRoomData(id, data);
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
roomId: id,
|
||||
userCount: data.users.length,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to join room:", e);
|
||||
return NextResponse.json(
|
||||
{ error: "加入房间失败" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getRoomData } from "@/lib/store";
|
||||
|
||||
export async function GET(
|
||||
_req: Request,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
const { id } = await params;
|
||||
|
||||
try {
|
||||
const data = await getRoomData(id);
|
||||
|
||||
if (!data) {
|
||||
return NextResponse.json(
|
||||
{ error: "房间不存在或已过期" },
|
||||
{ status: 404 },
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
roomId: id,
|
||||
userCount: data.users.length,
|
||||
match: data.match,
|
||||
restaurants: data.restaurants,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to get room:", e);
|
||||
return NextResponse.json(
|
||||
{ error: "获取房间信息失败" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getRoomData, updateRoomData } from "@/lib/store";
|
||||
|
||||
export async function POST(
|
||||
req: Request,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
const { id } = await params;
|
||||
|
||||
try {
|
||||
const data = await getRoomData(id);
|
||||
|
||||
if (!data) {
|
||||
return NextResponse.json(
|
||||
{ error: "房间不存在或已过期" },
|
||||
{ status: 404 },
|
||||
);
|
||||
}
|
||||
|
||||
const { userId, restaurantId, action } = await req.json();
|
||||
|
||||
if (!userId || restaurantId == null || !action) {
|
||||
return NextResponse.json(
|
||||
{ error: "userId, restaurantId, and action are required" },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const rid = String(restaurantId);
|
||||
let dirty = false;
|
||||
|
||||
if (action === "like") {
|
||||
if (!data.likes[rid]) {
|
||||
data.likes[rid] = [];
|
||||
}
|
||||
if (!data.likes[rid].includes(userId)) {
|
||||
data.likes[rid].push(userId);
|
||||
dirty = true;
|
||||
}
|
||||
|
||||
if (
|
||||
data.users.length > 1 &&
|
||||
data.likes[rid].length === data.users.length
|
||||
) {
|
||||
data.match = rid;
|
||||
dirty = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (dirty) {
|
||||
await updateRoomData(id, data);
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
match: data.match,
|
||||
likeCount: data.likes[rid]?.length ?? 0,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to process swipe:", e);
|
||||
return NextResponse.json(
|
||||
{ error: "操作失败" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { createRoom } from "@/lib/store";
|
||||
import { Restaurant } from "@/types";
|
||||
import { fallbackRestaurants } from "@/data/restaurants";
|
||||
|
||||
interface AmapPoiV5 {
|
||||
id: string;
|
||||
name: string;
|
||||
distance?: string;
|
||||
type?: string;
|
||||
address?: string;
|
||||
location?: string;
|
||||
business?: {
|
||||
rating?: string;
|
||||
cost?: string;
|
||||
opentime_today?: string;
|
||||
opentime_week?: string;
|
||||
tel?: string;
|
||||
tag?: string;
|
||||
};
|
||||
photos?: { url: string }[];
|
||||
}
|
||||
|
||||
const DEFAULT_IMAGE =
|
||||
"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&q=80";
|
||||
|
||||
function extractCategory(type?: string): string {
|
||||
if (!type) return "";
|
||||
const parts = type.split(";");
|
||||
return parts[parts.length - 1] || parts[1] || "";
|
||||
}
|
||||
|
||||
function cleanField(val: unknown): string {
|
||||
if (!val || val === "[]" || (Array.isArray(val) && val.length === 0))
|
||||
return "";
|
||||
return String(val);
|
||||
}
|
||||
|
||||
function mapPoiToRestaurant(poi: AmapPoiV5): Restaurant {
|
||||
const ratingStr = poi.business?.rating;
|
||||
const rating =
|
||||
ratingStr && ratingStr !== "[]" ? parseFloat(ratingStr) || 4.0 : 4.0;
|
||||
|
||||
const costStr = poi.business?.cost;
|
||||
const price =
|
||||
costStr && costStr !== "[]" && costStr !== "0" ? `¥${costStr}` : "未知";
|
||||
|
||||
const image =
|
||||
poi.photos && poi.photos.length > 0 && poi.photos[0].url
|
||||
? poi.photos[0].url
|
||||
: DEFAULT_IMAGE;
|
||||
|
||||
const openTime =
|
||||
cleanField(poi.business?.opentime_week) ||
|
||||
cleanField(poi.business?.opentime_today);
|
||||
|
||||
return {
|
||||
id: poi.id,
|
||||
name: poi.name,
|
||||
rating,
|
||||
price,
|
||||
distance: poi.distance ? `${poi.distance}m` : "",
|
||||
image,
|
||||
category: extractCategory(poi.type),
|
||||
address: cleanField(poi.address),
|
||||
openTime,
|
||||
tel: cleanField(poi.business?.tel),
|
||||
tag: cleanField(poi.business?.tag),
|
||||
location: cleanField(poi.location),
|
||||
};
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
let restaurants: Restaurant[] = fallbackRestaurants;
|
||||
|
||||
try {
|
||||
const body = await req.json();
|
||||
const { lat, lng } = body;
|
||||
|
||||
if (lat && lng) {
|
||||
const apiKey = process.env.AMAP_API_KEY;
|
||||
if (!apiKey) {
|
||||
console.error("AMAP_API_KEY not configured");
|
||||
} else {
|
||||
const url = new URL("https://restapi.amap.com/v5/place/around");
|
||||
url.searchParams.set("key", apiKey);
|
||||
url.searchParams.set("location", `${lng},${lat}`);
|
||||
url.searchParams.set("radius", "3000");
|
||||
url.searchParams.set("types", "050000");
|
||||
url.searchParams.set("show_fields", "business,photos");
|
||||
url.searchParams.set("page_size", "15");
|
||||
url.searchParams.set("sortrule", "weight");
|
||||
|
||||
const amapRes = await fetch(url.toString());
|
||||
const amapData = await amapRes.json();
|
||||
|
||||
if (amapData.status === "1" && amapData.pois?.length > 0) {
|
||||
restaurants = amapData.pois.map(mapPoiToRestaurant);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Amap API error, using fallback data:", e);
|
||||
}
|
||||
|
||||
try {
|
||||
const roomId = await createRoom(restaurants);
|
||||
return NextResponse.json({ roomId, restaurants });
|
||||
} catch (e) {
|
||||
console.error("Failed to create room:", e);
|
||||
return NextResponse.json(
|
||||
{ error: "创建房间失败，请重试" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,28 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #f8f9fa;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
-webkit-overflow-scrolling: none;
|
||||
touch-action: pan-y;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Geist } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "NoWhatever — 别说随便",
|
||||
description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
|
||||
referrer: "no-referrer",
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="zh-CN">
|
||||
<body className={`${geistSans.variable} font-sans antialiased`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { motion } from "framer-motion";
|
||||
import { Plus, LogIn, Utensils, Loader2 } from "lucide-react";
|
||||
import { getUserId } from "@/lib/userId";
|
||||
|
||||
const SHANGHAI_COORDS = { lat: 31.2222, lng: 121.4764 };
|
||||
|
||||
function getLocation(): Promise<{ lat: number; lng: number }> {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
return Promise.resolve(SHANGHAI_COORDS);
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
if (!navigator.geolocation) {
|
||||
resolve(SHANGHAI_COORDS);
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) =>
|
||||
resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
|
||||
() => resolve(SHANGHAI_COORDS),
|
||||
{ timeout: 5000, enableHighAccuracy: false },
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
const router = useRouter();
|
||||
const [roomCode, setRoomCode] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingText, setLoadingText] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const joinRoom = async (roomId: string) => {
|
||||
const userId = getUserId();
|
||||
const res = await fetch(`/api/room/${roomId}/join`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId }),
|
||||
});
|
||||
if (!res.ok) throw new Error("房间不存在");
|
||||
return roomId;
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setLoadingText("正在获取位置...");
|
||||
|
||||
try {
|
||||
const coords = await getLocation();
|
||||
|
||||
setLoadingText("正在搜索周边美食...");
|
||||
|
||||
const res = await fetch("/api/room/create", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(coords),
|
||||
});
|
||||
const { roomId } = await res.json();
|
||||
|
||||
setLoadingText("正在进入房间...");
|
||||
await joinRoom(roomId);
|
||||
router.push(`/room/${roomId}`);
|
||||
} catch {
|
||||
setError("创建失败，请重试");
|
||||
setLoading(false);
|
||||
setLoadingText("");
|
||||
}
|
||||
};
|
||||
|
||||
const handleJoin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (roomCode.length !== 4) {
|
||||
setError("请输入 4 位房间号");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
await joinRoom(roomCode);
|
||||
router.push(`/room/${roomCode}`);
|
||||
} catch {
|
||||
setError("房间不存在，请检查房间号");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-dvh flex-col items-center justify-center bg-background px-6">
|
||||
<motion.div
|
||||
className="flex flex-col items-center"
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500 shadow-lg shadow-emerald-200">
|
||||
<Utensils size={28} className="text-white" />
|
||||
</div>
|
||||
|
||||
<h1 className="mt-5 text-3xl font-black tracking-tight text-zinc-900">
|
||||
NoWhatever
|
||||
</h1>
|
||||
<p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
|
||||
别说随便
|
||||
</p>
|
||||
<p className="mt-3 max-w-xs text-center text-sm leading-relaxed text-zinc-500">
|
||||
和朋友一起滑卡片，再也不用纠结吃什么
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="mt-10 flex w-full max-w-xs flex-col gap-3"
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.15 }}
|
||||
>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={loading}
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
|
||||
>
|
||||
{loading && loadingText ? (
|
||||
<>
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
{loadingText}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus size={18} strokeWidth={3} />
|
||||
创建新房间
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-3 py-2">
|
||||
<div className="h-px flex-1 bg-zinc-200" />
|
||||
<span className="text-xs text-zinc-400">或加入已有房间</span>
|
||||
<div className="h-px flex-1 bg-zinc-200" />
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleJoin} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxLength={4}
|
||||
placeholder="输入 4 位房间号"
|
||||
value={roomCode}
|
||||
onChange={(e) => {
|
||||
setRoomCode(e.target.value.replace(/\D/g, "").slice(0, 4));
|
||||
setError("");
|
||||
}}
|
||||
disabled={loading}
|
||||
className="h-12 flex-1 rounded-xl border border-zinc-200 bg-white px-4 text-center text-lg font-semibold tracking-[0.3em] text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 disabled:opacity-50"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || roomCode.length !== 4}
|
||||
className="flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors hover:bg-zinc-700 disabled:opacity-30"
|
||||
>
|
||||
<LogIn size={18} />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<motion.p
|
||||
className="text-center text-xs font-medium text-rose-500"
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
{error}
|
||||
</motion.p>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user