feat: 接入全站图片资源 + 修复卡片滑动与房间轮询问题

图片资源接入： - OG/Twitter 社交分享元数据 (og-image.png) - 错误页插画替换图标 (error-robot.png) - EmptyState 组件支持 image prop，空状态页面接入插画 - 餐厅图片 fallback 改用 restaurant-fallback.png - 极速救场/周末契约页面添加 hero 装饰图 - 分享卡片添加背景图层 (share-bg-*.png)，通过 base64 预加载 - 更新 App 图标 (apple-touch-icon, icon-192/512) Bug 修复： - SwipeDeck: swipe action 从 "nope" 改为 "pass"，匹配 API 预期 - SwipeDeck: 用 ref 读取 currentIndex 避免竞态重置（本地滑动后被服务端旧 swipeCounts 立即清零） - SwipeDeck: 卡片 key 加入 isTop 标识，强制 remount 解决 framer-motion drag 手势在 isTop 切换时不重新初始化的问题 - SwipeableCard: initial 统一为背景位置，确保晋升为顶部卡片时有一致的放大动画 - useRoomPolling: roomId 为空时跳过 SWR 和 EventSource - room page: joinRoom 前 guard roomId，消除退房时 404 - layout: 添加 metadataBase 消除 Next.js OG 图片警告
2026-02-27 16:08:38 +08:00
parent 4073be9066
commit 76349f0dcf
30 changed files with 167 additions and 36 deletions
@@ -193,6 +193,7 @@ export default function AchievementsPage() {
              ) : decisions.length === 0 ? (
                <EmptyState
                  icon={ClipboardList}
+                  image="/empty-no-record.png"
                  title="还没有决策记录"
                  subtitle="使用极速救场后会在这里记录"
                  color="amber"
@@ -254,6 +255,7 @@ export default function AchievementsPage() {
              ) : contracts.length === 0 ? (
                <EmptyState
                  icon={BarChart3}
+                  image="/empty-no-room.png"
                  title="还没有契约记录"
                  subtitle="完成或过期的契约会在这里显示"
                  color="purple"
@@ -167,11 +167,20 @@ export default function BlindboxLobbyPage() {
        </div>
      </motion.div>

+      <motion.img
+        src="/blindbox-hero.png"
+        alt="周末契约"
+        className="mt-3 h-28 w-auto"
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5, delay: 0.05 }}
+      />
+
      <motion.p
        className="mt-2 max-w-xs text-center text-xs leading-relaxed text-muted"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
-        transition={{ duration: 0.5, delay: 0.05 }}
+        transition={{ duration: 0.5, delay: 0.08 }}
      >
        平日蓄水，周末开奖。把所有"想做但一直没做"的事，交给命运来决定。
      </motion.p>
@@ -2,7 +2,7 @@

 import { useEffect } from "react";
 import { motion } from "framer-motion";
-import { AlertTriangle, RotateCcw, Home } from "lucide-react";
+import { RotateCcw, Home } from "lucide-react";
 import Button from "@/components/Button";

 export default function Error({
@@ -23,14 +23,13 @@ export default function Error({
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
      >
-        <motion.div
-          className="relative flex h-20 w-20 items-center justify-center"
+        <motion.img
+          src="/error-robot.png"
+          alt="错误"
+          className="h-28 w-28"
          animate={{ y: [0, -4, 0] }}
          transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
-        >
-          <div className="absolute inset-0 rounded-2xl bg-rose-500/15 blur-lg" />
-          <AlertTriangle size={36} className="relative text-rose-400/80" strokeWidth={1.5} />
-        </motion.div>
+        />

        <h1 className="mt-6 text-xl font-bold text-heading">出了点问题</h1>
        <p className="mt-2 max-w-xs text-sm text-muted">
@@ -17,7 +17,7 @@ export default function GlobalError({
    <html lang="zh-CN">
      <body style={{ margin: 0, fontFamily: "system-ui, sans-serif", background: "#0a0a0a", color: "#e5e5e5" }}>
        <div style={{ display: "flex", minHeight: "100dvh", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "1.5rem" }}>
-          <div style={{ fontSize: "3rem" }}>⚠️</div>
+          <img src="/error-robot.png" alt="错误" style={{ width: 120, height: 120 }} />
          <h1 style={{ marginTop: "1.5rem", fontSize: "1.25rem", fontWeight: 700 }}>应用崩溃了</h1>
          <p style={{ marginTop: "0.5rem", fontSize: "0.875rem", color: "#a3a3a3", textAlign: "center" }}>
            发生了严重错误，请尝试刷新页面
@@ -12,9 +12,21 @@ const geistSans = Geist({
 });

 export const metadata: Metadata = {
+  metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || "https://nowhatever.app"),
  title: "NoWhatever — 别说随便",
  description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
  referrer: "no-referrer",
+  openGraph: {
+    title: "NoWhatever — 别说随便",
+    description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
+    images: [{ url: "/og-image.png", width: 1200, height: 630 }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NoWhatever — 别说随便",
+    description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
+    images: ["/og-image.png"],
+  },
 };

 export const viewport: Viewport = {
@@ -214,11 +214,20 @@ export default function PanicPage() {
        </div>
      </motion.div>

+      <motion.img
+        src="/panic-hero.png"
+        alt="极速救场"
+        className="mt-3 h-28 w-auto"
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5, delay: 0.05 }}
+      />
+
      <motion.p
        className="mt-2 max-w-xs text-center text-xs leading-relaxed text-muted"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
-        transition={{ duration: 0.5, delay: 0.05 }}
+        transition={{ duration: 0.5, delay: 0.08 }}
      >
        {sceneConfig.subtitle}
      </motion.p>
@@ -31,6 +31,7 @@ export default function RoomPage() {
  } = useRoomPolling(roomId);

  useEffect(() => {
+    if (!roomId) return;
    const id = getUserId();
    setUserId(id);

@@ -10,9 +10,11 @@ export interface PlanShareData {
 export default function BlindboxPlanShareCard({
  data,
  cardRef,
+  bgDataUrl,
 }: {
  data: PlanShareData;
  cardRef: React.RefObject<HTMLDivElement | null>;
+  bgDataUrl?: string | null;
 }) {
  const { days, roomName } = data;
  const shareUrl =
@@ -38,6 +40,22 @@ export default function BlindboxPlanShareCard({
          overflow: "hidden",
        }}
      >
+        {/* Background image */}
+        {bgDataUrl && (
+          <img
+            src={bgDataUrl}
+            alt=""
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: 0.12,
+            }}
+          />
+        )}
+
        {/* Decorative glows */}
        <div
          style={{
@@ -11,9 +11,11 @@ export interface BlindboxShareData {
 export default function BlindboxShareCard({
  data,
  cardRef,
+  bgDataUrl,
 }: {
  data: BlindboxShareData;
  cardRef: React.RefObject<HTMLDivElement | null>;
+  bgDataUrl?: string | null;
 }) {
  const { idea, submitter, drawer, roomName } = data;
  const shareUrl =
@@ -39,6 +41,22 @@ export default function BlindboxShareCard({
          overflow: "hidden",
        }}
      >
+        {/* Background image */}
+        {bgDataUrl && (
+          <img
+            src={bgDataUrl}
+            alt=""
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: 0.12,
+            }}
+          />
+        )}
+
        {/* Decorative glows */}
        <div
          style={{
@@ -5,6 +5,7 @@ import type { LucideIcon } from "lucide-react";

 interface EmptyStateProps {
  icon: LucideIcon;
+  image?: string;
  title: string;
  subtitle?: string;
  ctaLabel?: string;
@@ -14,6 +15,7 @@ interface EmptyStateProps {

 export default function EmptyState({
  icon: Icon,
+  image,
  title,
  subtitle,
  ctaLabel,
@@ -30,14 +32,24 @@ export default function EmptyState({

  return (
    <div className="flex flex-col items-center py-6">
-      <motion.div
-        className="relative flex h-14 w-14 items-center justify-center"
-        animate={{ y: [0, -3, 0] }}
-        transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
-      >
-        <div className={`absolute inset-0 rounded-xl ${c.glow} blur-md`} />
-        <Icon size={24} className={`relative ${c.icon}`} strokeWidth={1.5} />
-      </motion.div>
+      {image ? (
+        <motion.img
+          src={image}
+          alt={title}
+          className="h-20 w-20"
+          animate={{ y: [0, -3, 0] }}
+          transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
+        />
+      ) : (
+        <motion.div
+          className="relative flex h-14 w-14 items-center justify-center"
+          animate={{ y: [0, -3, 0] }}
+          transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
+        >
+          <div className={`absolute inset-0 rounded-xl ${c.glow} blur-md`} />
+          <Icon size={24} className={`relative ${c.icon}`} strokeWidth={1.5} />
+        </motion.div>
+      )}

      <p className="mt-3 text-sm font-semibold text-secondary">{title}</p>
      {subtitle && (
@@ -71,6 +71,7 @@ export default function ProfileFavoritesCard({
            ) : favorites.length === 0 ? (
              <EmptyState
                icon={Heart}
+                image="/empty-no-record.png"
                title="还没有收藏的餐厅"
                subtitle="在匹配结果中收藏喜欢的店"
                ctaLabel="去创建第一个房间"
@@ -70,6 +70,7 @@ export default function ProfileHistoryCard({
            ) : history.length === 0 ? (
              <EmptyState
                icon={ClipboardList}
+                image="/empty-no-record.png"
                title="还没有决策记录"
                subtitle="创建房间开始一起选餐厅"
                ctaLabel="去创建第一个房间"
@@ -1,7 +1,6 @@
 "use client";

 import { useState, useCallback } from "react";
-import { UtensilsCrossed } from "lucide-react";

 interface RestaurantImageProps {
  src: string;
@@ -30,7 +29,12 @@ export default function RestaurantImage({
        className={`flex items-center justify-center bg-elevated ${className}`}
        style={style}
      >
-        <UtensilsCrossed className="h-1/3 w-1/3 max-h-8 max-w-8 text-muted/40" strokeWidth={1.5} />
+        <img
+          src="/restaurant-fallback.png"
+          alt={alt}
+          className="h-1/2 w-1/2 max-h-20 max-w-20 object-contain opacity-60"
+          draggable={false}
+        />
      </div>
    );
  }
@@ -16,10 +16,12 @@ export default function RestaurantShareCard({
  data,
  cardRef,
  imageDataUrl,
+  bgDataUrl,
 }: {
  data: RestaurantShareData;
  cardRef: React.RefObject<HTMLDivElement | null>;
  imageDataUrl: string | null;
+  bgDataUrl?: string | null;
 }) {
  const { restaurant, matchType, matchLikes, userCount, scene } = data;
  const isUnanimous = matchType === "unanimous";
@@ -53,6 +55,22 @@ export default function RestaurantShareCard({
          overflow: "hidden",
        }}
      >
+        {/* Background image */}
+        {bgDataUrl && (
+          <img
+            src={bgDataUrl}
+            alt=""
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: 0.12,
+            }}
+          />
+        )}
+
        {/* Decorative glows */}
        <div
          style={{
@@ -41,20 +41,41 @@ export default function ShareCardModal({
  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
  const [imageLoading, setImageLoading] = useState(false);

+  const [bgDataUrl, setBgDataUrl] = useState<string | null>(null);
+
  const imageSrc = data.type === "restaurant" ? data.restaurant.images?.[0] : undefined;
+  const bgSrc =
+    data.type === "restaurant"
+      ? "/share-bg-panic.png"
+      : data.type === "blindbox" || data.type === "plan"
+        ? "/share-bg-blindbox.png"
+        : undefined;

  useEffect(() => {
    if (!open) {
      setImageDataUrl(null);
+      setBgDataUrl(null);
      return;
    }
-    if (!imageSrc) return;

-    setImageLoading(true);
-    loadImageAsDataUrl(imageSrc)
-      .then(setImageDataUrl)
-      .finally(() => setImageLoading(false));
-  }, [open, imageSrc]);
+    const promises: Promise<void>[] = [];
+
+    if (imageSrc) {
+      promises.push(
+        loadImageAsDataUrl(imageSrc).then(setImageDataUrl),
+      );
+    }
+    if (bgSrc) {
+      promises.push(
+        loadImageAsDataUrl(bgSrc).then(setBgDataUrl),
+      );
+    }
+
+    if (promises.length > 0) {
+      setImageLoading(true);
+      Promise.all(promises).finally(() => setImageLoading(false));
+    }
+  }, [open, imageSrc, bgSrc]);

  const handleGenerate = useCallback(async (): Promise<string | null> => {
    if (!cardRef.current) return null;
@@ -153,11 +174,12 @@ export default function ShareCardModal({
                  data={data}
                  cardRef={cardRef}
                  imageDataUrl={imageDataUrl}
+                  bgDataUrl={bgDataUrl}
                />
              ) : data.type === "plan" ? (
-                <BlindboxPlanShareCard data={data} cardRef={cardRef} />
+                <BlindboxPlanShareCard data={data} cardRef={cardRef} bgDataUrl={bgDataUrl} />
              ) : (
-                <BlindboxShareCard data={data} cardRef={cardRef} />
+                <BlindboxShareCard data={data} cardRef={cardRef} bgDataUrl={bgDataUrl} />
              )}
            </div>

@@ -216,7 +216,7 @@ export default function SwipeDeck({
    [],
  );

-  const sendSwipe = async (restaurantId: string, action: "like" | "nope") => {
+  const sendSwipe = async (restaurantId: string, action: "like" | "pass") => {
    try {
      const res = await fetch(`/api/room/${roomId}/swipe`, {
        method: "POST",
@@ -240,7 +240,7 @@ export default function SwipeDeck({
      swipingRef.current = false;
      if (guideVisible) setGuideVisible(false);

-      const action = direction === "right" ? "like" : "nope";
+      const action = direction === "right" ? "like" : "pass";
      sendSwipe(current.id, action);

      setSwipeHistory((h) => [...h, current.id]);
@@ -291,12 +291,16 @@ export default function SwipeDeck({
    prevLikeCounts.current = {};
  }, []);

+  const currentIndexRef = useRef(currentIndex);
+  currentIndexRef.current = currentIndex;
+
  useEffect(() => {
    const serverIndex = swipeCounts[userId] ?? 0;
-    if (serverIndex === 0 && currentIndex > 0 && !resetting) {
+    if (serverIndex === 0 && currentIndexRef.current > 0 && !resetting) {
      clearLocalState();
    }
-  }, [swipeCounts, userId, currentIndex, resetting, clearLocalState]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [swipeCounts, userId, resetting, clearLocalState]);

  const handleReset = useCallback(async () => {
    setResetting(true);
@@ -354,7 +358,7 @@ export default function SwipeDeck({
                const isTop = index === currentIndex;
                return (
                  <SwipeableCard
-                    key={restaurant.id}
+                    key={`${restaurant.id}-${isTop ? "top" : "bg"}`}
                    restaurant={restaurant}
                    isTop={isTop}
                    onSwipe={handleSwipe}
@@ -107,7 +107,7 @@ export default function SwipeableCard({
      dragElastic={0.9}
      onDragEnd={handleDragEnd}
      whileDrag={{ cursor: "grabbing" }}
-      initial={isTop ? { scale: 1 } : { scale: 0.95, y: 16 }}
+      initial={{ scale: 0.95, y: 16 }}
      animate={isTop ? { scale: 1, y: 0 } : { scale: 0.95, y: 16 }}
      transition={{ type: "spring", stiffness: 300, damping: 25 }}
    >
@@ -13,9 +13,9 @@ async function fetcher(url: string) {
  return r.json();
 }

-export function useRoomPolling(roomId: string) {
+export function useRoomPolling(roomId: string | undefined) {
  const { data, error, isLoading, mutate } = useSWR<RoomStatus>(
-    `/api/room/${roomId}`,
+    roomId ? `/api/room/${roomId}` : null,
    fetcher,
    {
      revalidateOnFocus: true,
@@ -27,6 +27,7 @@ export function useRoomPolling(roomId: string) {
  const notFound = error?.message === "NOT_FOUND";

  useEffect(() => {
+    if (!roomId) return;
    const es = new EventSource(`/api/room/${roomId}/events`);

    es.onmessage = (e) => {