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,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>
+  );
+}