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

- Framer Motion 卡片滑动 UI，带物理阻尼动画 - 多人房间系统，4位房间号 + SWR 实时轮询 - 高德地图 POI v5 API 搜索附近餐厅 - Web Share API 一键邀请，剪贴板降级方案 - SQLite/Prisma 持久化存储 - 移动端优先响应式设计 (Tailwind CSS)
2026-02-24 16:49:43 +08:00
parent f5d921d585
commit d87d30ccc0
37 changed files with 8680 additions and 84 deletions
@@ -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>
+  );
+}