From 7d51f5200d07462c9cef61805406ff5616a37bab Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 11:27:10 +0800
Subject: [PATCH 01/66] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=91=A8?=
 =?UTF-8?q?=E6=9C=AB=E5=A5=91=E7=BA=A6=E7=9B=B2=E7=9B=92=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E9=A6=96=E9=A1=B5=E9=87=8D=E6=9E=84=E4=B8=BA=E5=8F=8C?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 BlindBoxIdea 数据模型及 migration
- 新增盲盒 API (提交想法/查询/抽取)
- 新增周末契约盲盒页面 (动效震动+彩带开奖)
- 原首页功能拆分至 /panic 路由
- 首页重构为极速救场 + 周末契约双卡片入口
---
 .../migration.sql                             |  47 ++
 prisma/schema.prisma                          |   8 +
 src/app/api/blindbox/draw/route.ts            |  39 +
 src/app/api/blindbox/route.ts                 |  50 ++
 src/app/page.tsx                              | 750 ++++--------------
 src/app/panic/page.tsx                        | 639 +++++++++++++++
 src/app/room/[id]/blindbox/page.tsx           | 409 ++++++++++
 7 files changed, 1361 insertions(+), 581 deletions(-)
 create mode 100644 prisma/migrations/20260226020724_add_blindbox_idea/migration.sql
 create mode 100644 src/app/api/blindbox/draw/route.ts
 create mode 100644 src/app/api/blindbox/route.ts
 create mode 100644 src/app/panic/page.tsx
 create mode 100644 src/app/room/[id]/blindbox/page.tsx

diff --git a/prisma/migrations/20260226020724_add_blindbox_idea/migration.sql b/prisma/migrations/20260226020724_add_blindbox_idea/migration.sql
new file mode 100644
index 0000000..b898939
--- /dev/null
+++ b/prisma/migrations/20260226020724_add_blindbox_idea/migration.sql
@@ -0,0 +1,47 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "username" TEXT NOT NULL,
+    "passwordHash" TEXT NOT NULL,
+    "avatar" TEXT NOT NULL DEFAULT '🐱',
+    "email" TEXT,
+    "preferences" TEXT NOT NULL DEFAULT '{}',
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+-- CreateTable
+CREATE TABLE "Decision" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "roomId" TEXT NOT NULL,
+    "restaurantName" TEXT NOT NULL,
+    "restaurantData" TEXT NOT NULL,
+    "matchType" TEXT NOT NULL,
+    "participants" INTEGER NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "Decision_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Favorite" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "restaurantData" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "Favorite_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "BlindBoxIdea" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "roomId" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "status" TEXT NOT NULL DEFAULT 'in_pool',
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_username_key" ON "User"("username");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index f3a86b3..3d95785 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -45,3 +45,11 @@ model Favorite {
   createdAt      DateTime @default(now())
   user           User     @relation(fields: [userId], references: [id])
 }
+
+model BlindBoxIdea {
+  id        String   @id @default(uuid())
+  roomId    String
+  content   String
+  status    String   @default("in_pool")
+  createdAt DateTime @default(now())
+}
diff --git a/src/app/api/blindbox/draw/route.ts b/src/app/api/blindbox/draw/route.ts
new file mode 100644
index 0000000..96e7b31
--- /dev/null
+++ b/src/app/api/blindbox/draw/route.ts
@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { roomId } = await req.json();
+
+    if (!roomId || typeof roomId !== "string") {
+      return NextResponse.json({ error: "roomId 不能为空" }, { status: 400 });
+    }
+
+    const pool = await prisma.blindBoxIdea.findMany({
+      where: { roomId: roomId.trim(), status: "in_pool" },
+      select: { id: true },
+    });
+
+    if (pool.length === 0) {
+      return NextResponse.json(
+        { error: "盒子是空的，先往里面塞点想法吧！" },
+        { status: 404 },
+      );
+    }
+
+    const picked = pool[Math.floor(Math.random() * pool.length)];
+
+    const idea = await prisma.blindBoxIdea.update({
+      where: { id: picked.id },
+      data: { status: "drawn" },
+    });
+
+    return NextResponse.json({
+      id: idea.id,
+      content: idea.content,
+      createdAt: idea.createdAt,
+    });
+  } catch {
+    return NextResponse.json({ error: "抽取失败" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
new file mode 100644
index 0000000..72a0d42
--- /dev/null
+++ b/src/app/api/blindbox/route.ts
@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { roomId, content } = await req.json();
+
+    if (!roomId || typeof roomId !== "string") {
+      return NextResponse.json({ error: "roomId 不能为空" }, { status: 400 });
+    }
+    if (!content || typeof content !== "string" || content.trim().length === 0) {
+      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
+    }
+    if (content.trim().length > 200) {
+      return NextResponse.json({ error: "内容不能超过 200 字" }, { status: 400 });
+    }
+
+    const idea = await prisma.blindBoxIdea.create({
+      data: {
+        roomId: roomId.trim(),
+        content: content.trim(),
+      },
+    });
+
+    return NextResponse.json({ id: idea.id }, { status: 201 });
+  } catch {
+    return NextResponse.json({ error: "提交失败" }, { status: 500 });
+  }
+}
+
+export async function GET(req: NextRequest) {
+  const roomId = req.nextUrl.searchParams.get("roomId");
+
+  if (!roomId) {
+    return NextResponse.json({ error: "缺少 roomId" }, { status: 400 });
+  }
+
+  const [poolCount, drawn] = await Promise.all([
+    prisma.blindBoxIdea.count({
+      where: { roomId, status: "in_pool" },
+    }),
+    prisma.blindBoxIdea.findMany({
+      where: { roomId, status: "drawn" },
+      orderBy: { createdAt: "desc" },
+      select: { id: true, content: true, createdAt: true },
+    }),
+  ]);
+
+  return NextResponse.json({ poolCount, drawn });
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 095461a..3d7076d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,629 +1,217 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { motion, AnimatePresence } from "framer-motion";
-import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, User } from "lucide-react";
-import { getUserId, getCachedProfile, getCachedPreferences } from "@/lib/userId";
-import { getAvatarBg } from "@/lib/avatars";
-import AuthModal from "@/components/AuthModal";
+import { motion } from "framer-motion";
+import { Zap, Gift, Clock, Trophy } from "lucide-react";
 import BrandLogo from "@/components/BrandLogo";
-import { SCENES, getSceneConfig } from "@/lib/sceneConfig";
-import type { UserProfile, SceneType } from "@/types";
 
-interface LocationSuggestion {
+function generateRoomCode() {
+  return Math.random().toString(36).substring(2, 8).toUpperCase();
+}
+
+interface DrawnIdea {
   id: string;
-  name: string;
-  district: string;
-  address: string;
-  lat: number;
-  lng: number;
-}
-
-type GpsStatus = "idle" | "locating" | "success" | "failed" | "denied";
-
-const DISTANCE_OPTIONS = [
-  { label: "1km", value: 1000 },
-  { label: "3km", value: 3000 },
-  { label: "5km", value: 5000 },
-] as const;
-
-type GpsResult =
-  | { ok: true; lat: number; lng: number }
-  | { ok: false; reason: "unsupported" | "denied" | "timeout" | "unknown" };
-
-function requestGps(): Promise<GpsResult> {
-  return new Promise((resolve) => {
-    if (!navigator.geolocation) {
-      resolve({ ok: false, reason: "unsupported" });
-      return;
-    }
-
-    navigator.geolocation.getCurrentPosition(
-      (pos) =>
-        resolve({ ok: true, lat: pos.coords.latitude, lng: pos.coords.longitude }),
-      (err) => {
-        const reason =
-          err.code === err.PERMISSION_DENIED
-            ? "denied"
-            : err.code === err.TIMEOUT
-              ? "timeout"
-              : "unknown";
-        resolve({ ok: false, reason });
-      },
-      { timeout: 8000, enableHighAccuracy: false },
-    );
-  });
-}
-
-async function reverseGeocode(lat: number, lng: number): Promise<string | null> {
-  try {
-    const res = await fetch(`/api/location/regeo?lat=${lat}&lng=${lng}`);
-    const data = await res.json();
-    return data.name || data.formatted || null;
-  } catch {
-    return null;
-  }
+  content: string;
+  createdAt: string;
 }
 
 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 [locationQuery, setLocationQuery] = useState("");
-  const [suggestions, setSuggestions] = useState<LocationSuggestion[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [selectedLocation, setSelectedLocation] = useState<LocationSuggestion | null>(null);
-  const [fetchingSuggestions, setFetchingSuggestions] = useState(false);
-  const [radius, setRadius] = useState(3000);
-  const [priceRange, setPriceRange] = useState("any");
-  const [cuisine, setCuisine] = useState("");
-  const suggestRef = useRef<HTMLDivElement>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
-
-  const [gpsStatus, setGpsStatus] = useState<GpsStatus>("idle");
-  const [gpsCoords, setGpsCoords] = useState<{ lat: number; lng: number } | null>(null);
-  const [gpsLocationName, setGpsLocationName] = useState<string | null>(null);
-
-  const [scene, setScene] = useState<SceneType>("eat");
-  const sceneConfig = getSceneConfig(scene);
-
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [authModalOpen, setAuthModalOpen] = useState(false);
+  const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
+  const [blindboxRoom, setBlindboxRoom] = useState("");
 
   useEffect(() => {
-    const cached = getCachedProfile();
-    if (cached) setProfile(cached);
-
-    const prefs = getCachedPreferences();
-    if (prefs.cuisine) setCuisine(prefs.cuisine);
-    if (prefs.priceRange) setPriceRange(prefs.priceRange);
-    if (prefs.radius) setRadius(prefs.radius);
-  }, []);
-
-  const handleSceneChange = useCallback((s: SceneType) => {
-    setScene(s);
-    setCuisine("");
-    setPriceRange("any");
-  }, []);
-
-  const doGpsLocate = useCallback(async () => {
-    setGpsStatus("locating");
-    const result = await requestGps();
-    if (result.ok) {
-      setGpsCoords({ lat: result.lat, lng: result.lng });
-      setGpsStatus("success");
-      const name = await reverseGeocode(result.lat, result.lng);
-      if (name) setGpsLocationName(name);
-    } else {
-      setGpsCoords(null);
-      setGpsLocationName(null);
-      setGpsStatus(result.reason === "denied" ? "denied" : "failed");
+    const saved = localStorage.getItem("nw_blindbox_room");
+    if (saved) {
+      setBlindboxRoom(saved);
+      fetch(`/api/blindbox?roomId=${saved}`)
+        .then((r) => r.json())
+        .then((data) => {
+          if (data.drawn) setDrawnHistory(data.drawn);
+        })
+        .catch(() => {});
     }
   }, []);
 
-  useEffect(() => {
-    doGpsLocate();
-  }, [doGpsLocate]);
-
-  const fetchSuggestions = useCallback(async (query: string) => {
-    if (query.length < 1) {
-      setSuggestions([]);
-      setShowSuggestions(false);
-      return;
-    }
-    setFetchingSuggestions(true);
-    try {
-      const res = await fetch(`/api/location/suggest?keywords=${encodeURIComponent(query)}`);
-      const data: LocationSuggestion[] = await res.json();
-      setSuggestions(data);
-      setShowSuggestions(data.length > 0);
-    } catch {
-      setSuggestions([]);
-    } finally {
-      setFetchingSuggestions(false);
-    }
-  }, []);
-
-  const handleLocationInput = (val: string) => {
-    setLocationQuery(val);
-    setSelectedLocation(null);
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => fetchSuggestions(val), 300);
+  const handlePanicMode = () => {
+    router.push("/panic");
   };
 
-  const handleSelectLocation = (loc: LocationSuggestion) => {
-    setSelectedLocation(loc);
-    setLocationQuery(loc.name);
-    setShowSuggestions(false);
-    setSuggestions([]);
-  };
-
-  const clearLocation = () => {
-    setSelectedLocation(null);
-    setLocationQuery("");
-    setSuggestions([]);
-    setShowSuggestions(false);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (suggestRef.current && !suggestRef.current.contains(e.target as Node)) {
-        setShowSuggestions(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  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 () => {
-    setError("");
-
-    let coords: { lat: number; lng: number };
-
-    if (selectedLocation) {
-      coords = { lat: selectedLocation.lat, lng: selectedLocation.lng };
-    } else if (gpsCoords) {
-      coords = gpsCoords;
-    } else if (gpsStatus === "locating") {
-      setError("正在定位中，请稍候...");
-      return;
-    } else {
-      setError("无法获取位置，请在上方搜索并选择一个地点");
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      setLoadingText(sceneConfig.loadingText);
-
-      const res = await fetch("/api/room/create", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ...coords, radius, priceRange, cuisine, userId: getUserId(), scene }),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        throw new Error(data.error || "创建房间失败");
-      }
-
-      if (!data.roomId) {
-        throw new Error("创建房间失败");
-      }
-
-      setLoadingText("正在进入房间...");
-      await joinRoom(data.roomId);
-      router.push(`/room/${data.roomId}`);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "创建失败，请重试");
-      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);
+  const handleAdventureMode = () => {
+    let room = blindboxRoom;
+    if (!room) {
+      room = generateRoomCode();
+      localStorage.setItem("nw_blindbox_room", room);
+      setBlindboxRoom(room);
     }
+    router.push(`/room/${room}/blindbox`);
   };
 
   return (
-    <div className="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-6">
-      {/* Profile / Auth button */}
-      <div className="absolute right-4 top-3">
-        {profile ? (
-          <button
-            onClick={() => router.push("/profile")}
-            className={`flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
-          >
-            <span className="text-base leading-none">{profile.avatar}</span>
-            <span className="max-w-[5rem] truncate text-xs font-semibold text-zinc-700">{profile.username}</span>
-          </button>
-        ) : (
-          <button
-            onClick={() => setAuthModalOpen(true)}
-            className="flex h-8 items-center gap-1.5 rounded-full bg-zinc-100 px-3 text-xs font-medium text-zinc-500 transition-colors active:bg-zinc-200"
-          >
-            <User size={14} />
-            登录
-          </button>
-        )}
-      </div>
-
+    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-8 overflow-y-auto scrollbar-none">
+      {/* Header */}
       <motion.div
         className="flex items-center gap-3"
-        initial={{ y: -20, opacity: 0 }}
+        initial={{ y: -30, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.5 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
       >
-        <BrandLogo size={44} />
+        <BrandLogo size={40} />
         <div>
-          <h1 className="text-2xl font-black tracking-tight text-zinc-900">
+          <h1 className="text-xl font-black tracking-tight text-white">
             NoWhatever
           </h1>
-          <p className="text-xs font-medium tracking-widest text-zinc-400">
-            别说随便
+          <p className="text-[10px] font-medium tracking-[0.2em] text-muted">
+            别说随便 · 亲密关系决策引擎
           </p>
         </div>
       </motion.div>
 
       <motion.p
-        className="mt-2 max-w-xs text-center text-xs leading-relaxed text-zinc-500"
+        className="mt-3 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={{ delay: 0.2 }}
       >
-        {sceneConfig.subtitle}
+        别再说"随便"了。两个模式，覆盖你们所有的选择困难症。
       </motion.p>
 
-      <motion.div
-        className="mt-4 flex items-center justify-center gap-4"
-        initial={{ y: 10, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.5, delay: 0.1 }}
-      >
-        <div className="flex flex-col items-center gap-1 w-16">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-50">
-            <Users size={14} className="text-emerald-500" />
-          </div>
-          <span className="text-[10px] font-semibold text-zinc-700">创建房间</span>
-        </div>
-
-        <ChevronRight size={12} className="shrink-0 text-zinc-300" />
-
-        <div className="flex flex-col items-center gap-1 w-16">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-50">
-            <Heart size={14} className="text-amber-500" />
-          </div>
-          <span className="text-[10px] font-semibold text-zinc-700">各自滑卡</span>
-        </div>
-
-        <ChevronRight size={12} className="shrink-0 text-zinc-300" />
-
-        <div className="flex flex-col items-center gap-1 w-16">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-50">
-            <Sparkles size={14} className="text-rose-500" />
-          </div>
-          <span className="text-[10px] font-semibold text-zinc-700">匹配结果</span>
-        </div>
-      </motion.div>
-
-      <motion.div
-        className="mt-4 flex items-center justify-center gap-2"
-        initial={{ y: 10, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.4, delay: 0.12 }}
-      >
-        {SCENES.map((s) => {
-          const cfg = getSceneConfig(s);
-          const active = scene === s;
-          return (
-            <button
-              key={s}
-              onClick={() => handleSceneChange(s)}
-              disabled={loading}
-              className={`flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all disabled:opacity-50 ${
-                active
-                  ? "bg-emerald-500 text-white shadow-md shadow-emerald-200"
-                  : "bg-zinc-100 text-zinc-500 hover:bg-zinc-200"
-              }`}
-            >
-              <span className="text-base leading-none">{cfg.emoji}</span>
-              {cfg.label}
-            </button>
-          );
-        })}
-      </motion.div>
-
-      <motion.div
-        className="mt-4 flex w-full max-w-xs flex-col gap-2.5"
-        initial={{ y: 20, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.5, delay: 0.15 }}
-      >
-        <div ref={suggestRef} className="relative">
-          <div className="relative flex items-center">
-            <MapPin size={16} className="absolute left-3 text-zinc-400" />
-            <input
-              type="text"
-              placeholder="搜索位置（默认当前位置）"
-              value={locationQuery}
-              onChange={(e) => handleLocationInput(e.target.value)}
-              onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
-              disabled={loading}
-              className="h-10 w-full rounded-xl border border-zinc-200 bg-white pl-9 pr-9 text-sm text-zinc-700 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 disabled:opacity-50"
-            />
-            {(selectedLocation || locationQuery) && !loading && (
-              <button
-                onClick={clearLocation}
-                className="absolute right-2.5 flex h-5 w-5 items-center justify-center rounded-full text-zinc-400 hover:text-zinc-600"
-              >
-                <X size={14} />
-              </button>
-            )}
-            {fetchingSuggestions && (
-              <Loader2 size={14} className="absolute right-3 animate-spin text-zinc-300" />
-            )}
-          </div>
-
-          {selectedLocation && (
-            <div className="mt-1.5 flex items-center gap-1.5 px-1">
-              <Navigation size={12} className="shrink-0 text-emerald-500" />
-              <span className="truncate text-xs text-emerald-600">
-                {selectedLocation.district} {selectedLocation.address || selectedLocation.name}
-              </span>
-            </div>
-          )}
-
-          {!selectedLocation && !locationQuery && gpsStatus === "locating" && (
-            <div className="mt-1.5 flex items-center gap-1.5 px-1">
-              <Loader2 size={12} className="shrink-0 animate-spin text-emerald-400" />
-              <span className="text-xs text-zinc-400">正在获取当前位置...</span>
-            </div>
-          )}
-
-          {!selectedLocation && !locationQuery && gpsStatus === "success" && (
-            <div className="mt-1.5 flex items-center gap-1.5 px-1">
-              <Navigation size={12} className="shrink-0 text-emerald-500" />
-              <span className="truncate text-xs text-emerald-600">
-                当前位置：{gpsLocationName || "已定位"}
-              </span>
-            </div>
-          )}
-
-          {!selectedLocation && !locationQuery && (gpsStatus === "failed" || gpsStatus === "denied") && (
-            <div className="mt-1.5 flex items-center justify-between px-1">
-              <div className="flex items-center gap-1.5">
-                <MapPin size={12} className="shrink-0 text-amber-500" />
-                <span className="text-xs text-amber-600">
-                  {gpsStatus === "denied" ? "定位权限被拒绝" : "定位失败"}，请搜索选择位置
-                </span>
-              </div>
-              <button
-                onClick={doGpsLocate}
-                className="shrink-0 text-xs font-medium text-emerald-500 active:text-emerald-700"
-              >
-                重试
-              </button>
-            </div>
-          )}
-
-          {!selectedLocation && !locationQuery && gpsStatus === "idle" && (
-            <div className="mt-1.5 flex items-center gap-1.5 px-1">
-              <Navigation size={12} className="shrink-0 text-zinc-400" />
-              <span className="text-xs text-zinc-400">将使用当前定位</span>
-            </div>
-          )}
-
-          <AnimatePresence>
-            {showSuggestions && (
-              <motion.ul
-                initial={{ opacity: 0, y: -4 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -4 }}
-                transition={{ duration: 0.15 }}
-                className="absolute left-0 right-0 top-full z-50 mt-1 max-h-56 overflow-y-auto rounded-xl border border-zinc-100 bg-white py-1 shadow-lg"
-              >
-                {suggestions.map((s) => (
-                  <li key={s.id}>
-                    <button
-                      onClick={() => handleSelectLocation(s)}
-                      className="flex w-full items-start gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-emerald-50"
-                    >
-                      <MapPin size={14} className="mt-0.5 shrink-0 text-zinc-400" />
-                      <div className="min-w-0">
-                        <p className="truncate text-sm font-medium text-zinc-800">{s.name}</p>
-                        <p className="truncate text-xs text-zinc-400">{s.district} {s.address}</p>
-                      </div>
-                    </button>
-                  </li>
-                ))}
-              </motion.ul>
-            )}
-          </AnimatePresence>
-        </div>
-
-        <div className="flex flex-col gap-2 rounded-xl border border-zinc-100 bg-zinc-50/50 px-3 py-2.5">
-          <div className="flex items-center gap-3">
-            <span className="w-8 shrink-0 text-xs font-medium text-zinc-400">{sceneConfig.tagLabel}</span>
-            <div className="relative flex flex-1 items-center">
-              <input
-                type="text"
-                placeholder={sceneConfig.tagPlaceholder}
-                value={cuisine}
-                onChange={(e) => setCuisine(e.target.value)}
-                disabled={loading}
-                className="h-7 w-full rounded-full border-none bg-white pl-3 pr-7 text-xs text-zinc-700 outline-none ring-1 ring-zinc-200 transition-colors placeholder:text-zinc-300 focus:ring-2 focus:ring-emerald-300 disabled:opacity-50"
-              />
-              {cuisine && !loading && (
-                <button
-                  onClick={() => setCuisine("")}
-                  className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-zinc-400 hover:text-zinc-600"
-                >
-                  <X size={12} />
-                </button>
-              )}
-            </div>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <span className="w-8 shrink-0 text-xs font-medium text-zinc-400"></span>
-            <div className="flex flex-wrap items-center gap-1.5">
-              <Flame size={11} className="shrink-0 text-orange-400" />
-              {sceneConfig.hotTags.map((tag) => (
-                <button
-                  key={tag}
-                  type="button"
-                  onClick={() => setCuisine(tag)}
-                  disabled={loading}
-                  className={`h-6 rounded-full px-2.5 text-xs font-medium transition-colors disabled:opacity-50 ${
-                    cuisine === tag
-                      ? "bg-emerald-500 text-white shadow-sm"
-                      : "bg-white text-zinc-500 hover:bg-zinc-200"
-                  }`}
-                >
-                  {tag}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <span className="w-8 shrink-0 text-xs font-medium text-zinc-400">距离</span>
-            <div className="flex gap-1.5">
-              {DISTANCE_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  onClick={() => setRadius(opt.value)}
-                  disabled={loading}
-                  className={`h-7 rounded-full px-3 text-xs font-medium transition-colors disabled:opacity-50 ${
-                    radius === opt.value
-                      ? "bg-emerald-500 text-white shadow-sm"
-                      : "bg-white text-zinc-500 hover:bg-zinc-200"
-                  }`}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <span className="w-8 shrink-0 text-xs font-medium text-zinc-400">人均</span>
-            <div className="flex flex-wrap gap-1.5">
-              {sceneConfig.priceOptions.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  onClick={() => setPriceRange(opt.value)}
-                  disabled={loading}
-                  className={`h-7 rounded-full px-3 text-xs font-medium transition-colors disabled:opacity-50 ${
-                    priceRange === opt.value
-                      ? "bg-emerald-500 text-white shadow-sm"
-                      : "bg-white text-zinc-500 hover:bg-zinc-200"
-                  }`}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-        </div>
-
-        <button
-          onClick={handleCreate}
-          disabled={loading}
-          className="flex h-11 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"
+      {/* Dual Cards */}
+      <div className="mt-8 flex w-full max-w-sm flex-col gap-5">
+        {/* Card A: Panic Mode */}
+        <motion.button
+          onClick={handlePanicMode}
+          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-yellow-400 to-orange-500 p-6 text-left shadow-lg shadow-orange-500/20 transition-shadow hover:shadow-xl hover:shadow-orange-500/30"
+          initial={{ x: -40, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          whileHover={{ scale: 1.02, rotate: -0.5 }}
+          whileTap={{ scale: 0.98 }}
         >
-          {loading && loadingText ? (
-            <>
-              <Loader2 size={18} className="animate-spin" />
-              {loadingText}
-            </>
-          ) : (
-            <>
-              <Plus size={18} strokeWidth={3} />
-              创建新房间
-            </>
-          )}
-        </button>
+          <div className="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-white/10 blur-2xl" />
+          <div className="absolute -bottom-6 -left-6 h-20 w-20 rounded-full bg-white/10 blur-xl" />
 
-        <div className="flex items-center gap-3 py-1">
-          <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>
+          <div className="relative z-10">
+            <div className="flex items-center gap-2.5">
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-black/10">
+                <Zap size={22} className="text-white" />
+              </div>
+              <div>
+                <h2 className="text-lg font-black text-white">⚡️ 极速救场</h2>
+                <p className="text-[10px] font-semibold tracking-wider text-white/70">
+                  PANIC MODE
+                </p>
+              </div>
+            </div>
+            <p className="mt-4 text-sm font-medium leading-relaxed text-white/90">
+              10秒内出结果，立刻闭嘴，听天由命
+            </p>
+            <div className="mt-3 flex items-center gap-1.5 text-xs font-bold text-white/60">
+              <Clock size={12} />
+              <span>即时决策 · 转盘匹配</span>
+            </div>
+          </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("");
+          <motion.div
+            className="absolute inset-0 rounded-2xl"
+            whileHover={{
+              x: [0, -2, 2, -2, 2, 0],
+              transition: { duration: 0.4, repeat: Infinity },
             }}
-            disabled={loading}
-            className="h-11 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-11 w-11 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>
+        </motion.button>
 
-        {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>
+        {/* Card B: Adventure Roulette */}
+        <motion.button
+          onClick={handleAdventureMode}
+          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-indigo-900 to-purple-800 p-6 text-left shadow-lg shadow-purple-900/30 transition-shadow hover:shadow-xl hover:shadow-purple-500/30"
+          initial={{ x: 40, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+          whileHover={{ scale: 1.02, rotate: 0.5 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          <div className="absolute -right-6 -top-6 h-28 w-28 rounded-full bg-purple-500/20 blur-2xl transition-all group-hover:bg-purple-400/30 group-hover:blur-3xl" />
+          <div className="absolute -bottom-4 -left-4 h-20 w-20 rounded-full bg-indigo-400/15 blur-xl transition-all group-hover:bg-indigo-300/25" />
 
-      <AuthModal
-        open={authModalOpen}
-        onClose={() => setAuthModalOpen(false)}
-        onAuth={(p) => setProfile(p)}
-      />
+          <div className="relative z-10">
+            <div className="flex items-center gap-2.5">
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10">
+                <Gift size={22} className="text-purple-200" />
+              </div>
+              <div>
+                <h2 className="text-lg font-black text-white drop-shadow-[0_0_12px_rgba(192,132,252,0.5)]">
+                  🎁 周末契约
+                </h2>
+                <p className="text-[10px] font-semibold tracking-wider text-purple-300/70">
+                  ADVENTURE ROULETTE
+                </p>
+              </div>
+            </div>
+            <p className="mt-4 text-sm font-medium leading-relaxed text-purple-100/90">
+              丢入疯狂想法，周末盲盒开奖，绝不反悔
+            </p>
+            <div className="mt-3 flex items-center gap-1.5 text-xs font-bold text-purple-300/60">
+              <Gift size={12} />
+              <span>盲盒蓄水 · 仪式开奖</span>
+            </div>
+          </div>
+        </motion.button>
+      </div>
+
+      {/* Trophy Wall */}
+      {drawnHistory.length > 0 && (
+        <motion.div
+          className="mt-10 w-full max-w-sm"
+          initial={{ y: 30, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.6 }}
+        >
+          <div className="mb-3 flex items-center gap-2">
+            <Trophy size={14} className="text-amber-400" />
+            <h3 className="text-xs font-bold tracking-wider text-muted">
+              契约画廊
+            </h3>
+            <div className="h-px flex-1 bg-border" />
+          </div>
+          <div className="flex flex-col gap-2">
+            {drawnHistory.map((item, i) => (
+              <motion.div
+                key={item.id}
+                className="flex items-start gap-3 rounded-xl bg-surface/80 px-4 py-3 ring-1 ring-border"
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.7 + i * 0.08 }}
+              >
+                <span className="mt-0.5 text-base">🏆</span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-semibold text-foreground">
+                    {item.content}
+                  </p>
+                  <p className="mt-0.5 text-[10px] text-dim">
+                    {new Date(item.createdAt).toLocaleDateString("zh-CN", {
+                      month: "short",
+                      day: "numeric",
+                      weekday: "short",
+                    })}
+                  </p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      )}
+
+      {/* Footer */}
+      <motion.p
+        className="mt-auto pt-8 text-center text-[10px] text-dim"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.8 }}
+      >
+        NoWhatever — 拒绝"随便"，从今天开始
+      </motion.p>
     </div>
   );
 }
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
new file mode 100644
index 0000000..d1d508f
--- /dev/null
+++ b/src/app/panic/page.tsx
@@ -0,0 +1,639 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, User, ArrowLeft } from "lucide-react";
+import { getUserId, getCachedProfile, getCachedPreferences } from "@/lib/userId";
+import { getAvatarBg } from "@/lib/avatars";
+import AuthModal from "@/components/AuthModal";
+import { SCENES, getSceneConfig } from "@/lib/sceneConfig";
+import type { UserProfile, SceneType } from "@/types";
+
+interface LocationSuggestion {
+  id: string;
+  name: string;
+  district: string;
+  address: string;
+  lat: number;
+  lng: number;
+}
+
+type GpsStatus = "idle" | "locating" | "success" | "failed" | "denied";
+
+const DISTANCE_OPTIONS = [
+  { label: "1km", value: 1000 },
+  { label: "3km", value: 3000 },
+  { label: "5km", value: 5000 },
+] as const;
+
+type GpsResult =
+  | { ok: true; lat: number; lng: number }
+  | { ok: false; reason: "unsupported" | "denied" | "timeout" | "unknown" };
+
+function requestGps(): Promise<GpsResult> {
+  return new Promise((resolve) => {
+    if (!navigator.geolocation) {
+      resolve({ ok: false, reason: "unsupported" });
+      return;
+    }
+
+    navigator.geolocation.getCurrentPosition(
+      (pos) =>
+        resolve({ ok: true, lat: pos.coords.latitude, lng: pos.coords.longitude }),
+      (err) => {
+        const reason =
+          err.code === err.PERMISSION_DENIED
+            ? "denied"
+            : err.code === err.TIMEOUT
+              ? "timeout"
+              : "unknown";
+        resolve({ ok: false, reason });
+      },
+      { timeout: 8000, enableHighAccuracy: false },
+    );
+  });
+}
+
+async function reverseGeocode(lat: number, lng: number): Promise<string | null> {
+  try {
+    const res = await fetch(`/api/location/regeo?lat=${lat}&lng=${lng}`);
+    const data = await res.json();
+    return data.name || data.formatted || null;
+  } catch {
+    return null;
+  }
+}
+
+export default function PanicPage() {
+  const router = useRouter();
+  const [roomCode, setRoomCode] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [loadingText, setLoadingText] = useState("");
+  const [error, setError] = useState("");
+
+  const [locationQuery, setLocationQuery] = useState("");
+  const [suggestions, setSuggestions] = useState<LocationSuggestion[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedLocation, setSelectedLocation] = useState<LocationSuggestion | null>(null);
+  const [fetchingSuggestions, setFetchingSuggestions] = useState(false);
+  const [radius, setRadius] = useState(3000);
+  const [priceRange, setPriceRange] = useState("any");
+  const [cuisine, setCuisine] = useState("");
+  const suggestRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+  const [gpsStatus, setGpsStatus] = useState<GpsStatus>("idle");
+  const [gpsCoords, setGpsCoords] = useState<{ lat: number; lng: number } | null>(null);
+  const [gpsLocationName, setGpsLocationName] = useState<string | null>(null);
+
+  const [scene, setScene] = useState<SceneType>("eat");
+  const sceneConfig = getSceneConfig(scene);
+
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [authModalOpen, setAuthModalOpen] = useState(false);
+
+  useEffect(() => {
+    const cached = getCachedProfile();
+    if (cached) setProfile(cached);
+
+    const prefs = getCachedPreferences();
+    if (prefs.cuisine) setCuisine(prefs.cuisine);
+    if (prefs.priceRange) setPriceRange(prefs.priceRange);
+    if (prefs.radius) setRadius(prefs.radius);
+  }, []);
+
+  const handleSceneChange = useCallback((s: SceneType) => {
+    setScene(s);
+    setCuisine("");
+    setPriceRange("any");
+  }, []);
+
+  const doGpsLocate = useCallback(async () => {
+    setGpsStatus("locating");
+    const result = await requestGps();
+    if (result.ok) {
+      setGpsCoords({ lat: result.lat, lng: result.lng });
+      setGpsStatus("success");
+      const name = await reverseGeocode(result.lat, result.lng);
+      if (name) setGpsLocationName(name);
+    } else {
+      setGpsCoords(null);
+      setGpsLocationName(null);
+      setGpsStatus(result.reason === "denied" ? "denied" : "failed");
+    }
+  }, []);
+
+  useEffect(() => {
+    doGpsLocate();
+  }, [doGpsLocate]);
+
+  const fetchSuggestions = useCallback(async (query: string) => {
+    if (query.length < 1) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+    setFetchingSuggestions(true);
+    try {
+      const res = await fetch(`/api/location/suggest?keywords=${encodeURIComponent(query)}`);
+      const data: LocationSuggestion[] = await res.json();
+      setSuggestions(data);
+      setShowSuggestions(data.length > 0);
+    } catch {
+      setSuggestions([]);
+    } finally {
+      setFetchingSuggestions(false);
+    }
+  }, []);
+
+  const handleLocationInput = (val: string) => {
+    setLocationQuery(val);
+    setSelectedLocation(null);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => fetchSuggestions(val), 300);
+  };
+
+  const handleSelectLocation = (loc: LocationSuggestion) => {
+    setSelectedLocation(loc);
+    setLocationQuery(loc.name);
+    setShowSuggestions(false);
+    setSuggestions([]);
+  };
+
+  const clearLocation = () => {
+    setSelectedLocation(null);
+    setLocationQuery("");
+    setSuggestions([]);
+    setShowSuggestions(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (suggestRef.current && !suggestRef.current.contains(e.target as Node)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  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 () => {
+    setError("");
+
+    let coords: { lat: number; lng: number };
+
+    if (selectedLocation) {
+      coords = { lat: selectedLocation.lat, lng: selectedLocation.lng };
+    } else if (gpsCoords) {
+      coords = gpsCoords;
+    } else if (gpsStatus === "locating") {
+      setError("正在定位中，请稍候...");
+      return;
+    } else {
+      setError("无法获取位置，请在上方搜索并选择一个地点");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      setLoadingText(sceneConfig.loadingText);
+
+      const res = await fetch("/api/room/create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ...coords, radius, priceRange, cuisine, userId: getUserId(), scene }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "创建房间失败");
+      }
+
+      if (!data.roomId) {
+        throw new Error("创建房间失败");
+      }
+
+      setLoadingText("正在进入房间...");
+      await joinRoom(data.roomId);
+      router.push(`/room/${data.roomId}`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "创建失败，请重试");
+      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="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-6 overflow-y-auto scrollbar-none">
+      {/* Back button */}
+      <button
+        onClick={() => router.push("/")}
+        className="absolute left-4 top-3 flex h-8 items-center gap-1 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
+      >
+        <ArrowLeft size={14} />
+        返回
+      </button>
+
+      {/* Profile / Auth button */}
+      <div className="absolute right-4 top-3">
+        {profile ? (
+          <button
+            onClick={() => router.push("/profile")}
+            className={`flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
+          >
+            <span className="text-base leading-none">{profile.avatar}</span>
+            <span className="max-w-20 truncate text-xs font-semibold text-foreground">{profile.username}</span>
+          </button>
+        ) : (
+          <button
+            onClick={() => setAuthModalOpen(true)}
+            className="flex h-8 items-center gap-1.5 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
+          >
+            <User size={14} />
+            登录
+          </button>
+        )}
+      </div>
+
+      <motion.div
+        className="flex items-center gap-3"
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-linear-to-br from-yellow-400 to-orange-500 shadow-lg shadow-orange-500/20">
+          <Sparkles size={22} className="text-white" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-black tracking-tight text-white">
+            ⚡ 极速救场
+          </h1>
+          <p className="text-xs font-medium tracking-widest text-muted">
+            10秒内出结果
+          </p>
+        </div>
+      </motion.div>
+
+      <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 }}
+      >
+        {sceneConfig.subtitle}
+      </motion.p>
+
+      <motion.div
+        className="mt-4 flex items-center justify-center gap-4"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+      >
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-500/15">
+            <Users size={14} className="text-orange-400" />
+          </div>
+          <span className="text-[10px] font-semibold text-muted">创建房间</span>
+        </div>
+
+        <ChevronRight size={12} className="shrink-0 text-dim" />
+
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-500/15">
+            <Heart size={14} className="text-amber-400" />
+          </div>
+          <span className="text-[10px] font-semibold text-muted">各自滑卡</span>
+        </div>
+
+        <ChevronRight size={12} className="shrink-0 text-dim" />
+
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-500/15">
+            <Sparkles size={14} className="text-rose-400" />
+          </div>
+          <span className="text-[10px] font-semibold text-muted">匹配结果</span>
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="mt-4 flex items-center justify-center gap-2"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.12 }}
+      >
+        {SCENES.map((s) => {
+          const cfg = getSceneConfig(s);
+          const active = scene === s;
+          return (
+            <button
+              key={s}
+              onClick={() => handleSceneChange(s)}
+              disabled={loading}
+              className={`flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all disabled:opacity-50 ${
+                active
+                  ? "bg-orange-500 text-white shadow-md shadow-orange-500/25"
+                  : "bg-surface text-muted ring-1 ring-border hover:bg-elevated"
+              }`}
+            >
+              <span className="text-base leading-none">{cfg.emoji}</span>
+              {cfg.label}
+            </button>
+          );
+        })}
+      </motion.div>
+
+      <motion.div
+        className="mt-4 flex w-full max-w-xs flex-col gap-2.5"
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.15 }}
+      >
+        <div ref={suggestRef} className="relative">
+          <div className="relative flex items-center">
+            <MapPin size={16} className="absolute left-3 text-muted" />
+            <input
+              type="text"
+              placeholder="搜索位置（默认当前位置）"
+              value={locationQuery}
+              onChange={(e) => handleLocationInput(e.target.value)}
+              onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+              disabled={loading}
+              className="h-10 w-full rounded-xl border-none bg-surface pl-9 pr-9 text-sm text-foreground outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
+            />
+            {(selectedLocation || locationQuery) && !loading && (
+              <button
+                onClick={clearLocation}
+                className="absolute right-2.5 flex h-5 w-5 items-center justify-center rounded-full text-muted hover:text-gray-300"
+              >
+                <X size={14} />
+              </button>
+            )}
+            {fetchingSuggestions && (
+              <Loader2 size={14} className="absolute right-3 animate-spin text-dim" />
+            )}
+          </div>
+
+          {selectedLocation && (
+            <div className="mt-1.5 flex items-center gap-1.5 px-1">
+              <Navigation size={12} className="shrink-0 text-orange-400" />
+              <span className="truncate text-xs text-orange-300/80">
+                {selectedLocation.district} {selectedLocation.address || selectedLocation.name}
+              </span>
+            </div>
+          )}
+
+          {!selectedLocation && !locationQuery && gpsStatus === "locating" && (
+            <div className="mt-1.5 flex items-center gap-1.5 px-1">
+              <Loader2 size={12} className="shrink-0 animate-spin text-orange-400" />
+              <span className="text-xs text-muted">正在获取当前位置...</span>
+            </div>
+          )}
+
+          {!selectedLocation && !locationQuery && gpsStatus === "success" && (
+            <div className="mt-1.5 flex items-center gap-1.5 px-1">
+              <Navigation size={12} className="shrink-0 text-orange-400" />
+              <span className="truncate text-xs text-orange-300/80">
+                当前位置：{gpsLocationName || "已定位"}
+              </span>
+            </div>
+          )}
+
+          {!selectedLocation && !locationQuery && (gpsStatus === "failed" || gpsStatus === "denied") && (
+            <div className="mt-1.5 flex items-center justify-between px-1">
+              <div className="flex items-center gap-1.5">
+                <MapPin size={12} className="shrink-0 text-amber-500" />
+                <span className="text-xs text-amber-400/80">
+                  {gpsStatus === "denied" ? "定位权限被拒绝" : "定位失败"}，请搜索选择位置
+                </span>
+              </div>
+              <button
+                onClick={doGpsLocate}
+                className="shrink-0 text-xs font-medium text-orange-400 active:text-orange-300"
+              >
+                重试
+              </button>
+            </div>
+          )}
+
+          {!selectedLocation && !locationQuery && gpsStatus === "idle" && (
+            <div className="mt-1.5 flex items-center gap-1.5 px-1">
+              <Navigation size={12} className="shrink-0 text-dim" />
+              <span className="text-xs text-dim">将使用当前定位</span>
+            </div>
+          )}
+
+          <AnimatePresence>
+            {showSuggestions && (
+              <motion.ul
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                transition={{ duration: 0.15 }}
+                className="absolute left-0 right-0 top-full z-50 mt-1 max-h-56 overflow-y-auto rounded-xl bg-surface py-1 shadow-xl ring-1 ring-subtle"
+              >
+                {suggestions.map((s) => (
+                  <li key={s.id}>
+                    <button
+                      onClick={() => handleSelectLocation(s)}
+                      className="flex w-full items-start gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-elevated"
+                    >
+                      <MapPin size={14} className="mt-0.5 shrink-0 text-dim" />
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-medium text-foreground">{s.name}</p>
+                        <p className="truncate text-xs text-muted">{s.district} {s.address}</p>
+                      </div>
+                    </button>
+                  </li>
+                ))}
+              </motion.ul>
+            )}
+          </AnimatePresence>
+        </div>
+
+        <div className="flex flex-col gap-2 rounded-xl bg-surface/60 px-3 py-2.5 ring-1 ring-border">
+          <div className="flex items-center gap-3">
+            <span className="w-8 shrink-0 text-xs font-medium text-muted">{sceneConfig.tagLabel}</span>
+            <div className="relative flex flex-1 items-center">
+              <input
+                type="text"
+                placeholder={sceneConfig.tagPlaceholder}
+                value={cuisine}
+                onChange={(e) => setCuisine(e.target.value)}
+                disabled={loading}
+                className="h-7 w-full rounded-full border-none bg-elevated pl-3 pr-7 text-xs text-foreground outline-none ring-1 ring-subtle transition-colors placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
+              />
+              {cuisine && !loading && (
+                <button
+                  onClick={() => setCuisine("")}
+                  className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-muted hover:text-gray-300"
+                >
+                  <X size={12} />
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <span className="w-8 shrink-0 text-xs font-medium text-muted"></span>
+            <div className="flex flex-wrap items-center gap-1.5">
+              <Flame size={11} className="shrink-0 text-orange-400" />
+              {sceneConfig.hotTags.map((tag) => (
+                <button
+                  key={tag}
+                  type="button"
+                  onClick={() => setCuisine(tag)}
+                  disabled={loading}
+                  className={`h-6 rounded-full px-2.5 text-xs font-medium transition-colors disabled:opacity-50 ${
+                    cuisine === tag
+                      ? "bg-orange-500 text-white shadow-sm shadow-orange-500/25"
+                      : "bg-elevated text-muted hover:bg-subtle"
+                  }`}
+                >
+                  {tag}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <span className="w-8 shrink-0 text-xs font-medium text-muted">距离</span>
+            <div className="flex gap-1.5">
+              {DISTANCE_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => setRadius(opt.value)}
+                  disabled={loading}
+                  className={`h-7 rounded-full px-3 text-xs font-medium transition-colors disabled:opacity-50 ${
+                    radius === opt.value
+                      ? "bg-orange-500 text-white shadow-sm shadow-orange-500/25"
+                      : "bg-elevated text-muted hover:bg-subtle"
+                  }`}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <span className="w-8 shrink-0 text-xs font-medium text-muted">人均</span>
+            <div className="flex flex-wrap gap-1.5">
+              {sceneConfig.priceOptions.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => setPriceRange(opt.value)}
+                  disabled={loading}
+                  className={`h-7 rounded-full px-3 text-xs font-medium transition-colors disabled:opacity-50 ${
+                    priceRange === opt.value
+                      ? "bg-orange-500 text-white shadow-sm shadow-orange-500/25"
+                      : "bg-elevated text-muted hover:bg-subtle"
+                  }`}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+        </div>
+
+        <button
+          onClick={handleCreate}
+          disabled={loading}
+          className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-linear-to-r from-yellow-500 to-orange-500 text-sm font-bold text-white shadow-lg shadow-orange-500/25 transition-all hover:shadow-xl hover:shadow-orange-500/30 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-1">
+          <div className="h-px flex-1 bg-border" />
+          <span className="text-xs text-dim">或加入已有房间</span>
+          <div className="h-px flex-1 bg-border" />
+        </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-11 flex-1 rounded-xl border-none bg-surface px-4 text-center text-lg font-semibold tracking-[0.3em] text-white outline-none ring-1 ring-border transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
+          />
+          <button
+            type="submit"
+            disabled={loading || roomCode.length !== 4}
+            className="flex h-11 w-11 items-center justify-center rounded-xl bg-elevated text-gray-300 ring-1 ring-subtle transition-colors hover:bg-subtle disabled:opacity-30"
+          >
+            <LogIn size={18} />
+          </button>
+        </form>
+
+        {error && (
+          <motion.p
+            className="text-center text-xs font-medium text-rose-400"
+            initial={{ opacity: 0, y: -4 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            {error}
+          </motion.p>
+        )}
+      </motion.div>
+
+      <AuthModal
+        open={authModalOpen}
+        onClose={() => setAuthModalOpen(false)}
+        onAuth={(p) => setProfile(p)}
+      />
+    </div>
+  );
+}
diff --git a/src/app/room/[id]/blindbox/page.tsx b/src/app/room/[id]/blindbox/page.tsx
new file mode 100644
index 0000000..3a4da1e
--- /dev/null
+++ b/src/app/room/[id]/blindbox/page.tsx
@@ -0,0 +1,409 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { motion, AnimatePresence, useAnimation } from "framer-motion";
+import { ArrowLeft, Send, Loader2, Package, Flame, Trophy } from "lucide-react";
+import confetti from "canvas-confetti";
+
+interface DrawnIdea {
+  id: string;
+  content: string;
+  createdAt: string;
+}
+
+type Phase = "pool" | "shaking" | "reveal";
+
+export default function BlindBoxPage() {
+  const params = useParams<{ id: string }>();
+  const router = useRouter();
+  const roomId = params.id;
+
+  const [input, setInput] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [poolCount, setPoolCount] = useState(0);
+  const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
+  const [phase, setPhase] = useState<Phase>("pool");
+  const [revealedIdea, setRevealedIdea] = useState<DrawnIdea | null>(null);
+  const [submitFlash, setSubmitFlash] = useState(false);
+  const [error, setError] = useState("");
+  const boxControls = useAnimation();
+  const confettiCanvasRef = useRef<HTMLCanvasElement>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/blindbox?roomId=${roomId}`);
+      const data = await res.json();
+      setPoolCount(data.poolCount ?? 0);
+      setDrawnHistory(data.drawn ?? []);
+    } catch {}
+  }, [roomId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleSubmit = async () => {
+    const text = input.trim();
+    if (!text || submitting) return;
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch("/api/blindbox", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ roomId, content: text }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "提交失败");
+      }
+      setInput("");
+      setPoolCount((c) => c + 1);
+      setSubmitFlash(true);
+      setTimeout(() => setSubmitFlash(false), 600);
+      boxControls.start({
+        scale: [1, 1.08, 1],
+        rotate: [0, -3, 3, 0],
+        transition: { duration: 0.5 },
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "提交失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDraw = async () => {
+    if (poolCount === 0) {
+      setError("盒子是空的，先往里面塞点想法吧！");
+      return;
+    }
+
+    setPhase("shaking");
+    setError("");
+
+    await boxControls.start({
+      rotate: [0, -8, 8, -10, 10, -12, 12, -8, 8, -4, 4, 0],
+      scale: [1, 1.05, 0.95, 1.08, 0.92, 1.1, 0.9, 1.05, 0.95, 1],
+      transition: { duration: 2.5, ease: "easeInOut" },
+    });
+
+    try {
+      const res = await fetch("/api/blindbox/draw", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ roomId }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "抽取失败");
+      }
+
+      const idea = await res.json();
+      setRevealedIdea(idea);
+      setPhase("reveal");
+      setPoolCount((c) => Math.max(0, c - 1));
+      setDrawnHistory((prev) => [idea, ...prev]);
+
+      fireConfetti();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "抽取失败");
+      setPhase("pool");
+    }
+  };
+
+  const fireConfetti = () => {
+    const colors = ["#a855f7", "#6366f1", "#ec4899", "#f59e0b", "#10b981"];
+
+    confetti({
+      particleCount: 100,
+      spread: 120,
+      origin: { y: 0.4 },
+      colors,
+      startVelocity: 45,
+      ticks: 250,
+    });
+
+    const end = Date.now() + 3000;
+    const frame = () => {
+      if (Date.now() > end) return;
+      confetti({
+        particleCount: 3,
+        angle: 60,
+        spread: 55,
+        origin: { x: 0, y: 0.6 },
+        colors,
+        startVelocity: 35,
+        ticks: 150,
+      });
+      confetti({
+        particleCount: 3,
+        angle: 120,
+        spread: 55,
+        origin: { x: 1, y: 0.6 },
+        colors,
+        startVelocity: 35,
+        ticks: 150,
+      });
+      requestAnimationFrame(frame);
+    };
+    setTimeout(frame, 200);
+  };
+
+  const resetToPool = () => {
+    setPhase("pool");
+    setRevealedIdea(null);
+  };
+
+  return (
+    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
+      <canvas
+        ref={confettiCanvasRef}
+        className="pointer-events-none fixed inset-0 z-50"
+      />
+
+      {/* Header */}
+      <div className="flex w-full max-w-sm items-center justify-between">
+        <button
+          onClick={() => router.push("/")}
+          className="flex h-8 items-center gap-1 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
+        >
+          <ArrowLeft size={14} />
+          返回
+        </button>
+        <div className="text-right">
+          <p className="text-xs font-bold text-purple-300/80">周末契约</p>
+          <p className="text-[10px] text-dim">房间 {roomId}</p>
+        </div>
+      </div>
+
+      {/* Blind Box Visual */}
+      <div className="mt-10 flex flex-col items-center">
+        <motion.div
+          animate={boxControls}
+          className="relative flex h-36 w-36 items-center justify-center"
+        >
+          <div className="absolute inset-0 rounded-3xl bg-linear-to-br from-purple-600/20 to-indigo-600/20 blur-xl" />
+
+          <div className="relative flex h-32 w-32 flex-col items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-700/30">
+            <div className="absolute -top-2 left-1/2 h-5 w-[90%] -translate-x-1/2 rounded-t-xl bg-linear-to-r from-purple-700 to-indigo-700 shadow-md" />
+            <div className="absolute top-3 h-full w-3 bg-linear-to-b from-amber-400/60 to-amber-400/10" />
+            <div className="absolute top-6 h-3 w-full bg-linear-to-r from-amber-400/0 via-amber-400/60 to-amber-400/0" />
+
+            <motion.div
+              animate={submitFlash ? { scale: [1, 1.3, 1] } : {}}
+              transition={{ duration: 0.3 }}
+            >
+              <Package
+                size={40}
+                className="relative z-10 text-purple-300/60"
+                strokeWidth={1.5}
+              />
+            </motion.div>
+
+            <motion.div
+              className="absolute -right-2 -top-2 text-lg"
+              animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
+              transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
+            >
+              ✨
+            </motion.div>
+          </div>
+        </motion.div>
+
+        <motion.p
+          className="mt-4 text-sm font-semibold text-muted"
+          key={poolCount}
+          initial={{ scale: 1.2, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+        >
+          盒子里已有{" "}
+          <span className="text-lg font-black text-purple-400">{poolCount}</span>{" "}
+          个想法
+        </motion.p>
+      </div>
+
+      {/* Pool Phase: Input + Draw */}
+      <AnimatePresence mode="wait">
+        {phase === "pool" && (
+          <motion.div
+            key="pool"
+            className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+          >
+            <div className="flex w-full gap-2">
+              <input
+                type="text"
+                placeholder="丢入一个疯狂的周末想法..."
+                value={input}
+                onChange={(e) => {
+                  setInput(e.target.value);
+                  setError("");
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleSubmit();
+                }}
+                maxLength={200}
+                disabled={submitting}
+                className="h-12 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600 disabled:opacity-50"
+              />
+              <button
+                onClick={handleSubmit}
+                disabled={!input.trim() || submitting}
+                className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600 text-white transition-colors hover:bg-purple-500 disabled:opacity-30"
+              >
+                {submitting ? (
+                  <Loader2 size={18} className="animate-spin" />
+                ) : (
+                  <Send size={18} />
+                )}
+              </button>
+            </div>
+
+            <motion.button
+              onClick={handleDraw}
+              disabled={poolCount === 0}
+              className="relative flex h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-red-600 to-rose-500 text-base font-black text-white shadow-lg shadow-red-900/40 transition-shadow hover:shadow-xl hover:shadow-red-900/50 disabled:opacity-40 disabled:shadow-none"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.97 }}
+            >
+              <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/10 to-transparent -translate-x-full animate-[shimmer_3s_infinite]" />
+              <Flame size={20} />
+              开启周末盲盒（绝不反悔）
+            </motion.button>
+
+            {error && (
+              <motion.p
+                className="text-center text-xs font-medium text-rose-400"
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+              >
+                {error}
+              </motion.p>
+            )}
+          </motion.div>
+        )}
+
+        {phase === "shaking" && (
+          <motion.div
+            key="shaking"
+            className="mt-8 flex flex-col items-center gap-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <p className="text-sm font-bold text-purple-300 animate-pulse">
+              命运正在决定...
+            </p>
+            <div className="flex gap-1">
+              {[0, 1, 2].map((i) => (
+                <motion.div
+                  key={i}
+                  className="h-2 w-2 rounded-full bg-purple-400"
+                  animate={{ y: [0, -8, 0] }}
+                  transition={{
+                    duration: 0.6,
+                    repeat: Infinity,
+                    delay: i * 0.15,
+                  }}
+                />
+              ))}
+            </div>
+          </motion.div>
+        )}
+
+        {phase === "reveal" && revealedIdea && (
+          <motion.div
+            key="reveal"
+            className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ type: "spring", damping: 15, stiffness: 200 }}
+          >
+            <div className="relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-purple-900 via-indigo-900 to-purple-950 p-6 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-600/30">
+              <div className="absolute left-3 top-3 h-6 w-6 border-l-2 border-t-2 border-purple-400/30 rounded-tl-sm" />
+              <div className="absolute right-3 top-3 h-6 w-6 border-r-2 border-t-2 border-purple-400/30 rounded-tr-sm" />
+              <div className="absolute bottom-3 left-3 h-6 w-6 border-b-2 border-l-2 border-purple-400/30 rounded-bl-sm" />
+              <div className="absolute bottom-3 right-3 h-6 w-6 border-b-2 border-r-2 border-purple-400/30 rounded-br-sm" />
+
+              <div className="relative z-10 text-center">
+                <p className="text-xs font-bold tracking-[0.3em] text-purple-400/70">
+                  ✦ 周末契约 ✦
+                </p>
+                <motion.p
+                  className="mt-4 text-xl font-black leading-relaxed text-white"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.3 }}
+                >
+                  {revealedIdea.content}
+                </motion.p>
+                <div className="mx-auto mt-4 h-px w-16 bg-linear-to-r from-transparent via-purple-400/50 to-transparent" />
+                <p className="mt-3 text-[10px] font-medium text-purple-400/50">
+                  此契约一旦开启，绝不反悔
+                </p>
+              </div>
+            </div>
+
+            <motion.button
+              onClick={resetToPool}
+              className="flex h-10 items-center gap-2 rounded-full bg-surface px-5 text-xs font-semibold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
+              whileTap={{ scale: 0.96 }}
+            >
+              继续投入想法
+            </motion.button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* History */}
+      {drawnHistory.length > 0 && phase !== "shaking" && (
+        <motion.div
+          className="mt-10 w-full max-w-sm"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.3 }}
+        >
+          <div className="mb-3 flex items-center gap-2">
+            <Trophy size={13} className="text-amber-400" />
+            <h3 className="text-xs font-bold tracking-wider text-muted">
+              履约记录
+            </h3>
+            <div className="h-px flex-1 bg-border" />
+          </div>
+          <div className="flex flex-col gap-2">
+            {drawnHistory.map((item, i) => (
+              <motion.div
+                key={item.id}
+                className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: i * 0.06 }}
+              >
+                <span className="mt-0.5 text-sm">🏆</span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-gray-300">
+                    {item.content}
+                  </p>
+                  <p className="mt-0.5 text-[10px] text-dim">
+                    {new Date(item.createdAt).toLocaleDateString("zh-CN", {
+                      month: "short",
+                      day: "numeric",
+                      weekday: "short",
+                    })}
+                  </p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      )}
+
+      <div className="h-8 shrink-0" />
+    </div>
+  );
+}

From e10e3c823019c40f7273241bf7c44826bc39fc5a Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 11:27:18 +0800
Subject: [PATCH 02/66] =?UTF-8?q?ui:=20=E5=85=A8=E7=AB=99=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E6=9A=97=E8=89=B2=E4=B8=BB=E9=A2=98=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- globals.css 定义语义化 token (background/surface/elevated/border/muted/dim/accent)
- 所有页面和组件迁移至暗色 token，移除硬编码 bg-white/text-zinc-*/bg-gray-*
- RestaurantCard 和 MatchResult 适配暗色卡片风格
- 按钮颜色分层：系统CTA(accent)/模式强调(橙/紫)/危险(rose)/次级(surface)
- 修复 room 页深色文字在深背景不可见的可访问性问题
---
 src/app/globals.css                  |  23 +++++-
 src/app/invite/[id]/page.tsx         |  62 +++++++--------
 src/app/profile/page.tsx             | 109 +++++++++++++--------------
 src/app/room/[id]/page.tsx           |  10 +--
 src/components/ActionButtons.tsx     |   4 +-
 src/components/AuthModal.tsx         |  40 +++++-----
 src/components/LeaveConfirmModal.tsx |  16 ++--
 src/components/MatchResult.tsx       |  87 +++++++++++----------
 src/components/QrInviteModal.tsx     |  24 +++---
 src/components/RestaurantCard.tsx    |  28 +++----
 src/components/RoomManageModal.tsx   |  38 +++++-----
 src/components/SwipeDeck.tsx         |  32 ++++----
 src/components/TopNav.tsx            |  18 ++---
 13 files changed, 258 insertions(+), 233 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 22f9ba3..0790fe0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,13 +1,27 @@
 @import "tailwindcss";
 
 :root {
-  --background: #f8f9fa;
-  --foreground: #171717;
+  --background: #030712;
+  --foreground: #f3f4f6;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+
+  --color-surface: #111827;
+  --color-elevated: #1f2937;
+  --color-inset: #0a0f1a;
+
+  --color-border: #1f2937;
+  --color-subtle: #374151;
+
+  --color-muted: #6b7280;
+  --color-dim: #4b5563;
+
+  --color-accent: #10b981;
+  --color-accent-hover: #059669;
+
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
@@ -39,3 +53,8 @@ body {
   from { opacity: 1; }
   to { opacity: 0; }
 }
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 84ef7e8..cccc86b 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -62,7 +62,7 @@ export default function InvitePage() {
   if (status === "loading") {
     return (
       <div className="flex min-h-dvh flex-col items-center justify-center bg-background">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
       </div>
     );
   }
@@ -70,16 +70,16 @@ export default function InvitePage() {
   if (status === "not_found") {
     return (
       <div className="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
-        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100">
-          <Utensils size={28} className="text-zinc-400" />
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
+          <Utensils size={28} className="text-muted" />
         </div>
-        <h1 className="text-xl font-bold text-zinc-900">房间不存在</h1>
-        <p className="text-center text-sm text-zinc-500">
+        <h1 className="text-xl font-bold text-white">房间不存在</h1>
+        <p className="text-center text-sm text-muted">
           这个房间已过期或不存在，请让朋友重新分享链接
         </p>
         <button
           onClick={() => router.push("/")}
-          className="mt-2 rounded-xl bg-emerald-500 px-6 py-2.5 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600"
+          className="mt-2 rounded-xl bg-accent px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
         >
           自己创建房间
         </button>
@@ -88,44 +88,44 @@ export default function InvitePage() {
   }
 
   return (
-    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
+    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12 overflow-y-auto scrollbar-none">
       <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">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-accent shadow-lg shadow-accent/20">
           {scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
         </div>
 
-        <h1 className="mt-5 text-3xl font-black tracking-tight text-zinc-900">
+        <h1 className="mt-5 text-3xl font-black tracking-tight text-white">
           NoWhatever
         </h1>
-        <p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
+        <p className="mt-0.5 text-sm font-medium tracking-widest text-muted">
           别说随便
         </p>
       </motion.div>
 
       <motion.div
-        className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50/50 px-6 py-5"
+        className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl bg-surface px-6 py-5 ring-1 ring-accent/30"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.1 }}
       >
-        <p className="text-center text-lg font-bold text-zinc-800">
+        <p className="text-center text-lg font-bold text-white">
           {sceneConfig.inviteText}
         </p>
-        <div className="flex items-center gap-2 text-sm text-zinc-500">
-          <span className="rounded-full bg-white px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-emerald-600 shadow-sm">
+        <div className="flex items-center gap-2 text-sm text-muted">
+          <span className="rounded-full bg-elevated px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-accent ring-1 ring-border">
             {roomId}
           </span>
         </div>
         {userCount > 0 && (
-          <div className="flex items-center gap-1 text-xs text-zinc-400">
+          <div className="flex items-center gap-1 text-xs text-muted">
             <Users size={13} />
             <span>
-              已有 <span className="font-semibold text-emerald-500">{userCount}</span> 人在房间
+              已有 <span className="font-semibold text-accent">{userCount}</span> 人在房间
             </span>
           </div>
         )}
@@ -138,35 +138,35 @@ export default function InvitePage() {
         transition={{ duration: 0.5, delay: 0.2 }}
       >
         <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50">
-            <Users size={18} className="text-emerald-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
+            <Users size={18} className="text-accent" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">加入房间</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+          <span className="text-xs font-semibold text-gray-300">加入房间</span>
+          <span className="text-[10px] leading-tight text-muted text-center">
             和朋友一起
           </span>
         </div>
 
-        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+        <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
 
         <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50">
-            <Heart size={18} className="text-amber-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
+            <Heart size={18} className="text-amber-400" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+          <span className="text-xs font-semibold text-gray-300">各自滑卡</span>
+          <span className="text-[10px] leading-tight text-muted text-center">
             右滑喜欢的店
           </span>
         </div>
 
-        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+        <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
 
         <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50">
-            <Sparkles size={18} className="text-rose-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
+            <Sparkles size={18} className="text-rose-400" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">匹配结果</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+          <span className="text-xs font-semibold text-gray-300">匹配结果</span>
+          <span className="text-[10px] leading-tight text-muted text-center">
             滑中同一家就去
           </span>
         </div>
@@ -181,7 +181,7 @@ export default function InvitePage() {
         <button
           onClick={handleJoin}
           disabled={joining}
-          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"
+          className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
         >
           {joining ? (
             <>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index dc8a67d..93aefdb 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -26,7 +26,6 @@ import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Rest
 
 function firstImage(r: Restaurant): string {
   if (r.images?.length > 0) return r.images[0];
-  // backward compat: old DB records may have `image` instead of `images`
   const legacy = (r as unknown as Record<string, unknown>).image;
   return typeof legacy === "string" ? legacy : "";
 }
@@ -253,7 +252,7 @@ export default function ProfilePage() {
   if (loading) {
     return (
       <div className="flex min-h-dvh items-center justify-center bg-background">
-        <Loader2 size={24} className="animate-spin text-zinc-400" />
+        <Loader2 size={24} className="animate-spin text-muted" />
       </div>
     );
   }
@@ -266,21 +265,21 @@ export default function ProfilePage() {
       : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
 
   return (
-    <div className="min-h-dvh bg-background pb-16">
+    <div className="min-h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
       <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
         <button
           onClick={() => router.push("/")}
-          className="flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors active:bg-zinc-100"
+          className="flex h-8 w-8 items-center justify-center rounded-full text-muted transition-colors active:bg-elevated"
         >
           <ArrowLeft size={20} />
         </button>
-        <h1 className="text-base font-bold text-zinc-900">个人中心</h1>
+        <h1 className="text-base font-bold text-white">个人中心</h1>
       </nav>
 
       <div className="mx-auto max-w-sm px-5">
         {/* Profile card */}
         <motion.div
-          className="rounded-2xl bg-white p-4 shadow-sm"
+          className="rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
         >
@@ -290,7 +289,7 @@ export default function ProfilePage() {
               className={`relative flex h-14 w-14 items-center justify-center rounded-2xl text-2xl transition-transform active:scale-95 ${getAvatarBg(profile.avatar)}`}
             >
               {profile.avatar}
-              <span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-white text-zinc-400 shadow-sm">
+              <span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-surface text-muted shadow-sm ring-1 ring-border">
                 <Edit3 size={10} />
               </span>
             </button>
@@ -306,34 +305,34 @@ export default function ProfilePage() {
                     }}
                     maxLength={16}
                     autoFocus
-                    className="h-8 flex-1 rounded-lg border border-zinc-200 px-2 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                    className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
                   />
                   <button
                     onClick={handleSaveUsername}
                     disabled={usernameSaving}
-                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500 text-white disabled:opacity-50"
+                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-white disabled:opacity-50"
                   >
                     {usernameSaving ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
                   </button>
                   <button
                     onClick={() => { setEditingUsername(false); setUsernameMsg(""); }}
-                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500"
+                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-elevated text-muted"
                   >
                     <X size={14} />
                   </button>
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-bold text-zinc-900">{profile.username}</h2>
+                  <h2 className="text-lg font-bold text-white">{profile.username}</h2>
                   <button
                     onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }}
-                    className="text-zinc-400 transition-colors active:text-zinc-600"
+                    className="text-muted transition-colors active:text-gray-300"
                   >
                     <Edit3 size={13} />
                   </button>
                 </div>
               )}
-              {usernameMsg && <p className="mt-1 text-xs text-rose-500">{usernameMsg}</p>}
+              {usernameMsg && <p className="mt-1 text-xs text-rose-400">{usernameMsg}</p>}
             </div>
           </div>
 
@@ -354,8 +353,8 @@ export default function ProfilePage() {
                       onClick={() => handleSaveAvatar(a.emoji)}
                       className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
                         profile.avatar === a.emoji
-                          ? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1`
-                          : "bg-zinc-50 hover:bg-zinc-100"
+                          ? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
+                          : "bg-elevated hover:bg-subtle"
                       }`}
                     >
                       {a.emoji}
@@ -369,7 +368,7 @@ export default function ProfilePage() {
 
         {/* Change password */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.05 }}
@@ -378,8 +377,8 @@ export default function ProfilePage() {
             onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }}
             className="flex w-full items-center gap-2"
           >
-            <Lock size={15} className="text-zinc-400" />
-            <h3 className="text-sm font-semibold text-zinc-700">修改密码</h3>
+            <Lock size={15} className="text-muted" />
+            <h3 className="text-sm font-semibold text-gray-300">修改密码</h3>
           </button>
 
           <AnimatePresence>
@@ -393,46 +392,46 @@ export default function ProfilePage() {
               >
                 <div className="mt-3 flex flex-col gap-3">
                   <div>
-                    <p className="text-xs text-zinc-400">当前密码</p>
+                    <p className="text-xs text-muted">当前密码</p>
                     <div className="relative mt-1">
                       <input
                         type={showPassword ? "text" : "password"}
                         value={currentPassword}
                         onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
-                        className="h-9 w-full rounded-lg border border-zinc-200 px-3 pr-9 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                        className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
                       />
                       <button
                         type="button"
                         onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400"
+                        className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted"
                       >
                         {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
                       </button>
                     </div>
                   </div>
                   <div>
-                    <p className="text-xs text-zinc-400">新密码</p>
+                    <p className="text-xs text-muted">新密码</p>
                     <input
                       type={showPassword ? "text" : "password"}
                       value={newPassword}
                       onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="至少 6 个字符"
-                      className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
                   <div>
-                    <p className="text-xs text-zinc-400">确认新密码</p>
+                    <p className="text-xs text-muted">确认新密码</p>
                     <input
                       type={showPassword ? "text" : "password"}
                       value={confirmPassword}
                       onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="再次输入新密码"
-                      className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
 
                   {passwordMsg && (
-                    <p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-500" : "text-emerald-500"}`}>
+                    <p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-400" : "text-accent"}`}>
                       {passwordMsg}
                     </p>
                   )}
@@ -440,7 +439,7 @@ export default function ProfilePage() {
                   <button
                     onClick={handleSavePassword}
                     disabled={passwordSaving}
-                    className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-emerald-500 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50"
+                    className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-accent text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
                   >
                     {passwordSaving ? <Loader2 size={14} className="animate-spin" /> : "保存新密码"}
                   </button>
@@ -452,15 +451,15 @@ export default function ProfilePage() {
 
         {/* Email binding */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.1 }}
         >
           <div className="flex items-center gap-2">
-            <Mail size={15} className="text-zinc-400" />
-            <h3 className="text-sm font-semibold text-zinc-700">绑定邮箱</h3>
-            <span className="text-[10px] text-zinc-400">（可选）</span>
+            <Mail size={15} className="text-muted" />
+            <h3 className="text-sm font-semibold text-gray-300">绑定邮箱</h3>
+            <span className="text-[10px] text-dim">（可选）</span>
           </div>
           <div className="mt-3 flex gap-2">
             <input
@@ -471,18 +470,18 @@ export default function ProfilePage() {
                 setEmail(e.target.value);
                 setEmailMsg("");
               }}
-              className="h-9 flex-1 rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-700 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+              className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
             />
             <button
               onClick={handleSaveEmail}
               disabled={emailSaving}
-              className="flex h-9 items-center gap-1 rounded-lg bg-emerald-500 px-3 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50"
+              className="flex h-9 items-center gap-1 rounded-lg bg-accent px-3 text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
             >
               {emailSaving ? <Loader2 size={13} className="animate-spin" /> : "保存"}
             </button>
           </div>
           {emailMsg && (
-            <p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-500" : "text-emerald-500"}`}>
+            <p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-400" : "text-accent"}`}>
               {emailMsg}
             </p>
           )}
@@ -490,7 +489,7 @@ export default function ProfilePage() {
 
         {/* Decision History */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.15 }}
@@ -500,15 +499,15 @@ export default function ProfilePage() {
             className="flex w-full items-center justify-between"
           >
             <div className="flex items-center gap-2">
-              <Clock size={15} className="text-zinc-400" />
-              <h3 className="text-sm font-semibold text-zinc-700">
+              <Clock size={15} className="text-muted" />
+              <h3 className="text-sm font-semibold text-gray-300">
                 决策记录 {history.length > 0 && `(${history.length})`}
               </h3>
             </div>
             <motion.span
               animate={{ rotate: showHistory ? 180 : 0 }}
               transition={{ duration: 0.2 }}
-              className="text-zinc-400"
+              className="text-muted"
             >
               <ChevronDown size={16} />
             </motion.span>
@@ -525,10 +524,10 @@ export default function ProfilePage() {
               >
                 {historyLoading ? (
                   <div className="flex justify-center py-6">
-                    <Loader2 size={18} className="animate-spin text-zinc-300" />
+                    <Loader2 size={18} className="animate-spin text-muted" />
                   </div>
                 ) : history.length === 0 ? (
-                  <p className="py-6 text-center text-xs text-zinc-400">
+                  <p className="py-6 text-center text-xs text-muted">
                     还没有决策记录
                   </p>
                 ) : (
@@ -539,7 +538,7 @@ export default function ProfilePage() {
                         href={amapNavUrl(d.restaurantData)}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="flex gap-3 rounded-xl bg-zinc-50 p-2.5 transition-colors active:bg-zinc-100"
+                        className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
                       >
                         {firstImage(d.restaurantData) && (
                           <img
@@ -550,8 +549,8 @@ export default function ProfilePage() {
                           />
                         )}
                         <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <p className="truncate text-sm font-semibold text-zinc-800">{d.restaurantName}</p>
-                          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
+                          <p className="truncate text-sm font-semibold text-white">{d.restaurantName}</p>
+                          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                             <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
                             <span>{d.participants} 人参与</span>
                             <span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
@@ -568,7 +567,7 @@ export default function ProfilePage() {
 
         {/* Favorites */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.2 }}
@@ -578,15 +577,15 @@ export default function ProfilePage() {
             className="flex w-full items-center justify-between"
           >
             <div className="flex items-center gap-2">
-              <Star size={15} className="text-zinc-400" />
-              <h3 className="text-sm font-semibold text-zinc-700">
+              <Star size={15} className="text-muted" />
+              <h3 className="text-sm font-semibold text-gray-300">
                 收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
               </h3>
             </div>
             <motion.span
               animate={{ rotate: showFavorites ? 180 : 0 }}
               transition={{ duration: 0.2 }}
-              className="text-zinc-400"
+              className="text-muted"
             >
               <ChevronDown size={16} />
             </motion.span>
@@ -603,10 +602,10 @@ export default function ProfilePage() {
               >
                 {favLoading ? (
                   <div className="flex justify-center py-6">
-                    <Loader2 size={18} className="animate-spin text-zinc-300" />
+                    <Loader2 size={18} className="animate-spin text-muted" />
                   </div>
                 ) : favorites.length === 0 ? (
-                  <p className="py-6 text-center text-xs text-zinc-400">
+                  <p className="py-6 text-center text-xs text-muted">
                     还没有收藏的餐厅
                   </p>
                 ) : (
@@ -616,7 +615,7 @@ export default function ProfilePage() {
                       return (
                         <div
                           key={f.id}
-                          className="flex gap-3 rounded-xl bg-zinc-50 p-2.5"
+                          className="flex gap-3 rounded-xl bg-elevated p-2.5"
                         >
                           {firstImage(r) && (
                             <img
@@ -627,8 +626,8 @@ export default function ProfilePage() {
                             />
                           )}
                           <div className="flex min-w-0 flex-1 flex-col justify-center">
-                            <p className="truncate text-sm font-semibold text-zinc-800">{r.name}</p>
-                            <div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
+                            <p className="truncate text-sm font-semibold text-white">{r.name}</p>
+                            <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                               <span className="flex items-center gap-0.5">
                                 <Star size={10} className="fill-amber-400 text-amber-400" />
                                 {r.rating}
@@ -644,7 +643,7 @@ export default function ProfilePage() {
                           </div>
                           <button
                             onClick={() => handleRemoveFavorite(f.id)}
-                            className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-zinc-400 transition-colors active:bg-zinc-200 active:text-rose-500"
+                            className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
                           >
                             <Trash2 size={14} />
                           </button>
@@ -667,7 +666,7 @@ export default function ProfilePage() {
         >
           <button
             onClick={handleLogout}
-            className="flex items-center gap-1.5 text-xs font-medium text-zinc-400 transition-colors hover:text-rose-500"
+            className="flex items-center gap-1.5 text-xs font-medium text-muted transition-colors hover:text-rose-400"
           >
             <LogOut size={13} />
             退出登录
@@ -678,7 +677,7 @@ export default function ProfilePage() {
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 989f1ea..7d027f0 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -93,11 +93,11 @@ export default function RoomPage() {
     return (
       <div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
         <p className="text-4xl">🍜</p>
-        <p className="text-base font-semibold text-zinc-700">房间不存在或已过期</p>
-        <p className="text-sm text-zinc-400">房间号可能有误，或房间已超过 24 小时</p>
+        <p className="text-base font-semibold text-gray-300">房间不存在或已过期</p>
+        <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
         <button
           onClick={() => router.push("/")}
-          className="mt-2 h-10 rounded-xl bg-emerald-500 px-6 text-sm font-bold text-white shadow-sm transition-colors hover:bg-emerald-600"
+          className="mt-2 h-10 rounded-xl bg-accent px-6 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
         >
           返回首页
         </button>
@@ -113,8 +113,8 @@ export default function RoomPage() {
   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 className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
+        <p className="text-sm text-muted">正在加载数据...</p>
       </div>
     );
   }
diff --git a/src/components/ActionButtons.tsx b/src/components/ActionButtons.tsx
index 86f4238..29f600f 100644
--- a/src/components/ActionButtons.tsx
+++ b/src/components/ActionButtons.tsx
@@ -16,7 +16,7 @@ export default function ActionButtons({
   return (
     <div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
       <motion.button
-        className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
+        className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-rose-500/10 ring-1 ring-rose-500/20 disabled:opacity-40"
         whileTap={{ scale: 0.85 }}
         whileHover={{ scale: 1.08 }}
         onClick={() => onAction("left")}
@@ -27,7 +27,7 @@ export default function ActionButtons({
       </motion.button>
 
       <motion.button
-        className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
+        className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-emerald-500/10 ring-1 ring-emerald-500/20 disabled:opacity-40"
         whileTap={{ scale: 0.85 }}
         whileHover={{ scale: 1.08 }}
         onClick={() => onAction("right")}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 1a233ba..3bcaf1b 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -117,7 +117,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -125,36 +125,36 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
+            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
             transition={{ type: "spring", damping: 28, stiffness: 350 }}
           >
             <div className="mb-4 flex items-center justify-between">
-              <span className="text-lg font-bold text-zinc-900">欢迎</span>
+              <span className="text-lg font-bold text-white">欢迎</span>
               <button
                 onClick={onClose}
-                className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
+                className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
               >
                 <X size={16} />
               </button>
             </div>
 
             {/* Tabs */}
-            <div className="flex gap-1 rounded-xl bg-zinc-100 p-1">
+            <div className="flex gap-1 rounded-xl bg-elevated p-1">
               {(["login", "register"] as const).map((t) => (
                 <button
                   key={t}
                   onClick={() => switchTab(t)}
                   className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
-                    tab === t ? "text-zinc-900" : "text-zinc-400"
+                    tab === t ? "text-white" : "text-muted"
                   }`}
                 >
                   {tab === t && (
                     <motion.div
                       layoutId="auth-tab"
-                      className="absolute inset-0 rounded-lg bg-white shadow-sm"
+                      className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
                       transition={{ type: "spring", stiffness: 400, damping: 30 }}
                     />
                   )}
@@ -167,7 +167,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
 
             {/* Username */}
             <div className="mt-5">
-              <p className="text-xs font-medium text-zinc-500">用户名</p>
+              <p className="text-xs font-medium text-muted">用户名</p>
               <input
                 type="text"
                 value={username}
@@ -177,13 +177,13 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                 }}
                 placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
                 maxLength={16}
-                className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
               />
             </div>
 
             {/* Password */}
             <div className="mt-4">
-              <p className="text-xs font-medium text-zinc-500">密码</p>
+              <p className="text-xs font-medium text-muted">密码</p>
               <div className="relative mt-2">
                 <input
                   type={showPassword ? "text" : "password"}
@@ -193,12 +193,12 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                     setError("");
                   }}
                   placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
-                  className="h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 pr-10 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                  className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors active:text-zinc-600"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-gray-300"
                 >
                   {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                 </button>
@@ -208,7 +208,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
             {/* Confirm password (register only) */}
             {tab === "register" && (
               <div className="mt-4">
-                <p className="text-xs font-medium text-zinc-500">确认密码</p>
+                <p className="text-xs font-medium text-muted">确认密码</p>
                 <input
                   type={showPassword ? "text" : "password"}
                   value={confirmPassword}
@@ -217,7 +217,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                     setError("");
                   }}
                   placeholder="再次输入密码"
-                  className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                  className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
               </div>
             )}
@@ -225,9 +225,9 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
             {/* Avatar picker (register only) */}
             {tab === "register" && (
               <div className="mt-4">
-                <p className="text-xs font-medium text-zinc-500">
+                <p className="text-xs font-medium text-muted">
                   选择头像
-                  <span className="ml-1 text-zinc-300">（可选）</span>
+                  <span className="ml-1 text-dim">（可选）</span>
                 </p>
                 <div className="mt-2 grid grid-cols-6 gap-2">
                   {AVATARS.map((a) => (
@@ -236,8 +236,8 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                       onClick={() => setAvatar(a.emoji)}
                       className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
                         avatar === a.emoji
-                          ? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1`
-                          : "bg-zinc-50 hover:bg-zinc-100"
+                          ? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
+                          : "bg-elevated hover:bg-subtle"
                       }`}
                     >
                       {a.emoji}
@@ -249,7 +249,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
 
             {error && (
               <motion.p
-                className="mt-3 text-center text-xs font-medium text-rose-500"
+                className="mt-3 text-center text-xs font-medium text-rose-400"
                 initial={{ opacity: 0, y: -4 }}
                 animate={{ opacity: 1, y: 0 }}
               >
@@ -260,7 +260,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
             <button
               onClick={handleSubmit}
               disabled={loading}
-              className="mt-5 flex h-11 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"
+              className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
             >
               {loading ? (
                 <>
diff --git a/src/components/LeaveConfirmModal.tsx b/src/components/LeaveConfirmModal.tsx
index aaddda7..3920615 100644
--- a/src/components/LeaveConfirmModal.tsx
+++ b/src/components/LeaveConfirmModal.tsx
@@ -26,7 +26,7 @@ export default function LeaveConfirmModal({
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -34,34 +34,34 @@ export default function LeaveConfirmModal({
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="mx-6 w-full max-w-xs rounded-2xl bg-white px-6 py-6 shadow-2xl"
+            className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
             initial={{ scale: 0.9, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             exit={{ scale: 0.9, opacity: 0 }}
             transition={{ type: "spring", damping: 25, stiffness: 350 }}
           >
             <div className="flex flex-col items-center">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-50">
-                <LogOut size={22} className="text-rose-500" />
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
+                <LogOut size={22} className="text-rose-400" />
               </div>
 
-              <h2 className="mt-4 text-base font-bold text-zinc-900">
+              <h2 className="mt-4 text-base font-bold text-white">
                 确定要退出房间吗？
               </h2>
-              <p className="mt-1.5 text-center text-xs leading-relaxed text-zinc-400">
+              <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
                 退出后你的滑卡进度不会丢失，可以用房间号重新加入
               </p>
 
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={onCancel}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
+                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   继续滑卡
                 </button>
                 <button
                   onClick={onConfirm}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-md shadow-rose-200 transition-colors active:bg-rose-600"
+                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
                 >
                   退出房间
                 </button>
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index bef706b..deb561d 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -58,7 +58,7 @@ function NoMatchResult({
 
   return (
     <motion.div
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-linear-to-b from-zinc-600 to-zinc-800 px-6 py-10"
+      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.4 }}
@@ -68,7 +68,7 @@ function NoMatchResult({
         animate={{ scale: 1, rotate: 0 }}
         transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
       >
-        <SearchX size={56} className="text-zinc-400" />
+        <SearchX size={56} className="text-muted" />
       </motion.div>
 
       <motion.h1
@@ -81,7 +81,7 @@ function NoMatchResult({
       </motion.h1>
 
       <motion.p
-        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-zinc-400"
+        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
         initial={{ y: 20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.45 }}
@@ -98,7 +98,7 @@ function NoMatchResult({
         <motion.button
           onClick={onReset}
           disabled={resetting}
-          className="flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold text-zinc-800 shadow-lg transition-colors hover:bg-zinc-100 disabled:opacity-50"
+          className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
           whileTap={{ scale: 0.95 }}
         >
           <RotateCcw size={15} className={resetting ? "animate-spin" : ""} />
@@ -107,7 +107,7 @@ function NoMatchResult({
 
         <motion.button
           onClick={() => router.push("/")}
-          className="flex items-center justify-center gap-2 rounded-full bg-white/15 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/25"
+          className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
           whileTap={{ scale: 0.95 }}
         >
           <Home size={15} />
@@ -132,7 +132,7 @@ function RunnerUpCard({
       href={buildNavUrl(restaurant)}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex gap-3 rounded-xl bg-white/10 p-2.5 backdrop-blur-sm transition-colors hover:bg-white/20"
+      className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
     >
       {restaurant.images?.[0] && (
         <img
@@ -146,7 +146,7 @@ function RunnerUpCard({
         <p className="truncate text-sm font-bold text-white">
           {restaurant.name}
         </p>
-        <div className="mt-1 flex items-center gap-2 text-xs text-white/70">
+        <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
           <span className="flex items-center gap-0.5">
             <Star size={11} className="fill-yellow-300 text-yellow-300" />
             {restaurant.rating}
@@ -159,7 +159,7 @@ function RunnerUpCard({
             </span>
           )}
         </div>
-        <p className="mt-0.5 text-[11px] font-medium text-amber-200">
+        <p className="mt-0.5 text-[11px] font-medium text-amber-400">
           {likes}/{userCount} 人想去
         </p>
       </div>
@@ -282,25 +282,28 @@ export default function MatchResult({
 
   return (
     <motion.div
-      className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
-        isUnanimous
-          ? "bg-linear-to-b from-emerald-500 to-teal-600"
-          : "bg-linear-to-b from-amber-500 to-orange-500"
-      }`}
+      className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.4 }}
     >
-      <div className="flex w-full max-w-sm flex-1 flex-col items-center justify-center">
+      {/* Accent glow behind icon */}
+      <div
+        className={`pointer-events-none fixed left-1/2 top-0 h-72 w-72 -translate-x-1/2 -translate-y-1/3 rounded-full blur-3xl ${
+          isUnanimous ? "bg-emerald-500/20" : "bg-amber-500/20"
+        }`}
+      />
+
+      <div className="relative flex w-full max-w-sm flex-1 flex-col items-center justify-center">
         <motion.div
           initial={{ scale: 0, rotate: -20 }}
           animate={{ scale: 1, rotate: 0 }}
           transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
         >
           {isUnanimous ? (
-            <PartyPopper size={56} className="text-yellow-300" />
+            <PartyPopper size={56} className="text-emerald-400" />
           ) : (
-            <Trophy size={56} className="text-yellow-200" />
+            <Trophy size={56} className="text-amber-400" />
           )}
         </motion.div>
 
@@ -314,7 +317,7 @@ export default function MatchResult({
         </motion.h1>
 
         <motion.p
-          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-100" : "text-amber-100"}`}
+          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-400" : "text-amber-400"}`}
           initial={{ y: 20, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.45 }}
@@ -326,7 +329,7 @@ export default function MatchResult({
 
         {isUnanimous && (
           <motion.div
-            className="mt-3 flex items-center gap-2 rounded-full bg-white/20 px-4 py-1.5 backdrop-blur-sm"
+            className="mt-3 flex items-center gap-2 rounded-full bg-emerald-500/15 px-4 py-1.5 ring-1 ring-emerald-500/30"
             initial={{ scale: 0, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             transition={{
@@ -336,16 +339,17 @@ export default function MatchResult({
               delay: 0.55,
             }}
           >
-            <Zap size={14} className="fill-yellow-300 text-yellow-300" />
-            <span className="text-xs font-bold text-white">
+            <Zap size={14} className="fill-emerald-400 text-emerald-400" />
+            <span className="text-xs font-bold text-emerald-300">
               默契度 100% · {userCount} 人全员一致
             </span>
-            <Zap size={14} className="fill-yellow-300 text-yellow-300" />
+            <Zap size={14} className="fill-emerald-400 text-emerald-400" />
           </motion.div>
         )}
 
+        {/* Result card */}
         <motion.div
-          className="mt-6 w-full overflow-hidden rounded-2xl bg-white shadow-2xl"
+          className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
           initial={{ y: 60, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
@@ -360,22 +364,22 @@ export default function MatchResult({
           )}
           <div className="p-4">
             <div className="flex items-start justify-between gap-2">
-              <h2 className="text-lg font-bold leading-tight text-zinc-900">
+              <h2 className="text-lg font-bold leading-tight text-white">
                 {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">
+                <span className="shrink-0 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
                   {restaurant.category}
                 </span>
               )}
             </div>
 
-            <div className="mt-2 flex items-center gap-3 text-sm text-zinc-500">
+            <div className="mt-2 flex items-center gap-3 text-sm text-muted">
               <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">
+              <span className="font-semibold text-emerald-400">
                 {restaurant.price}
               </span>
               {restaurant.distance && (
@@ -387,13 +391,13 @@ export default function MatchResult({
             </div>
 
             {restaurant.address && (
-              <p className="mt-2 text-xs leading-relaxed text-zinc-400">
+              <p className="mt-2 text-xs leading-relaxed text-muted">
                 {restaurant.address}
               </p>
             )}
 
             {restaurant.openTime && (
-              <div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400">
+              <div className="mt-1.5 flex items-center gap-1 text-xs text-muted">
                 <Clock size={12} />
                 <span>{restaurant.openTime}</span>
               </div>
@@ -407,7 +411,7 @@ export default function MatchResult({
                   .map((t) => (
                     <span
                       key={t}
-                      className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
+                      className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
                     >
                       {t.trim()}
                     </span>
@@ -417,6 +421,7 @@ export default function MatchResult({
           </div>
         </motion.div>
 
+        {/* Action buttons */}
         <motion.div
           className="mt-5 flex w-full flex-col gap-2.5"
           initial={{ y: 30, opacity: 0 }}
@@ -427,9 +432,7 @@ export default function MatchResult({
             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 shadow-lg transition-colors hover:bg-emerald-50 ${
-              isUnanimous ? "text-emerald-600" : "text-orange-600"
-            }`}
+            className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
             whileTap={{ scale: 0.95 }}
           >
             <Navigation size={16} />
@@ -439,7 +442,7 @@ export default function MatchResult({
           {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"
+              className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
               whileTap={{ scale: 0.95 }}
             >
               <Phone size={15} />
@@ -449,7 +452,7 @@ export default function MatchResult({
 
           <motion.button
             onClick={handleShare}
-            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"
+            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
             whileTap={{ scale: 0.95 }}
           >
             <Share2 size={15} />
@@ -457,6 +460,7 @@ export default function MatchResult({
           </motion.button>
         </motion.div>
 
+        {/* Runner ups */}
         {!isUnanimous && runnerUpRestaurants.length > 0 && (
           <motion.div
             className="mt-5 w-full"
@@ -466,7 +470,7 @@ export default function MatchResult({
           >
             <button
               onClick={() => setShowRunnerUps((v) => !v)}
-              className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-white/80 transition-colors hover:text-white"
+              className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-muted transition-colors hover:text-foreground"
             >
               其他候选（{runnerUpRestaurants.length}）
               <motion.span
@@ -500,6 +504,7 @@ export default function MatchResult({
           </motion.div>
         )}
 
+        {/* Bottom actions */}
         <motion.div
           className="mt-5 flex w-full flex-col items-center gap-2.5"
           initial={{ opacity: 0 }}
@@ -511,7 +516,7 @@ export default function MatchResult({
               <motion.button
                 onClick={() => onNarrow(narrowIds)}
                 disabled={resetting}
-                className="flex w-full 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 disabled:opacity-50"
+                className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                 whileTap={{ scale: 0.95 }}
               >
                 <Swords size={15} />
@@ -519,7 +524,9 @@ export default function MatchResult({
               </motion.button>
               <motion.button
                 onClick={() => router.push("/")}
-                className="flex items-center gap-1.5 text-sm font-medium text-amber-200 underline underline-offset-2 hover:text-white"
+                className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
+                  isUnanimous ? "text-emerald-400" : "text-amber-400"
+                }`}
               >
                 <RefreshCw size={13} />
                 换一批店
@@ -530,7 +537,7 @@ export default function MatchResult({
               <motion.button
                 onClick={onReset}
                 disabled={resetting}
-                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 disabled:opacity-50"
+                className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                 whileTap={{ scale: 0.95 }}
               >
                 <RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
@@ -539,7 +546,7 @@ export default function MatchResult({
               <motion.button
                 onClick={() => router.push("/")}
                 className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-                  isUnanimous ? "text-emerald-200" : "text-amber-200"
+                  isUnanimous ? "text-emerald-400" : "text-amber-400"
                 }`}
               >
                 <RefreshCw size={13} />
@@ -553,7 +560,7 @@ export default function MatchResult({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-border"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index 3e4f4a9..a0bf83d 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -66,7 +66,7 @@ export default function QrInviteModal({
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -74,7 +74,7 @@ export default function QrInviteModal({
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-white px-6 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
+            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-6 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
@@ -82,33 +82,33 @@ export default function QrInviteModal({
           >
             <button
               onClick={onClose}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
+              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
             >
               <X size={16} />
             </button>
 
             <div className="flex flex-col items-center">
-              <div className="flex items-center gap-2 text-zinc-800">
-                <QrCode size={18} className="text-emerald-500" />
+              <div className="flex items-center gap-2 text-white">
+                <QrCode size={18} className="text-accent" />
                 <h2 className="text-lg font-bold">邀请饭搭子</h2>
               </div>
-              <p className="mt-1 text-xs text-zinc-400">
+              <p className="mt-1 text-xs text-muted">
                 {sceneConfig.qrSubtitle}
               </p>
 
-              <div className="mt-5 rounded-2xl border-2 border-dashed border-emerald-200 bg-emerald-50/30 p-4">
+              <div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
                 <QRCodeSVG
                   value={inviteUrl}
                   size={180}
                   level="M"
                   bgColor="transparent"
-                  fgColor="#18181b"
+                  fgColor="#e5e7eb"
                 />
               </div>
 
               <div className="mt-4 flex items-center gap-2">
-                <span className="text-xs text-zinc-400">房间号</span>
-                <span className="rounded-full bg-zinc-100 px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-emerald-600">
+                <span className="text-xs text-muted">房间号</span>
+                <span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
                   {roomId}
                 </span>
               </div>
@@ -116,14 +116,14 @@ export default function QrInviteModal({
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={handleCopy}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   <Copy size={15} />
                   复制链接
                 </button>
                 <button
                   onClick={handleShare}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-emerald-500 text-sm font-semibold text-white shadow-md shadow-emerald-200 transition-colors active:bg-emerald-600"
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
                 >
                   <Share2 size={15} />
                   发送邀请
diff --git a/src/components/RestaurantCard.tsx b/src/components/RestaurantCard.tsx
index c22cf39..0e54e9b 100644
--- a/src/components/RestaurantCard.tsx
+++ b/src/components/RestaurantCard.tsx
@@ -150,14 +150,14 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
   const dianpingUrl = `https://m.dianping.com/search/keyword/0/0_${encodeURIComponent(restaurant.name)}`;
 
   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 bg-zinc-100">
+    <div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-surface shadow-xl ring-1 ring-border">
+      <div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-elevated">
         {hasImage && <ImageGallery images={images} name={restaurant.name} />}
         <div className="pointer-events-none absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" />
 
         <div className="absolute bottom-3 left-4 flex items-center gap-1.5">
           {restaurant.category && (
-            <span className="rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
+            <span className="rounded-full bg-elevated/90 px-2.5 py-0.5 text-xs font-semibold text-gray-200 shadow-sm backdrop-blur-sm">
               {restaurant.category}
             </span>
           )}
@@ -172,7 +172,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
 
       <div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
         <div className="flex items-start justify-between gap-2">
-          <h2 className="text-lg font-bold leading-tight text-zinc-900">
+          <h2 className="text-lg font-bold leading-tight text-white">
             {restaurant.name}
           </h2>
           <div className="mt-0.5 flex shrink-0 gap-1.5">
@@ -183,8 +183,8 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
                 onTouchStart={stopAll}
                 className={`flex items-center justify-center rounded-full p-1 transition-colors ${
                   favorited
-                    ? "bg-amber-100 text-amber-500"
-                    : "bg-zinc-50 text-zinc-400 active:bg-amber-50 active:text-amber-500"
+                    ? "bg-amber-500/20 text-amber-400"
+                    : "bg-elevated text-muted active:bg-amber-500/15 active:text-amber-400"
                 }`}
               >
                 <Bookmark size={13} className={favorited ? "fill-amber-400" : ""} />
@@ -194,7 +194,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
               onClick={openLink(amapUrl)}
               onPointerDown={stopAll}
               onTouchStart={stopAll}
-              className="flex items-center gap-0.5 rounded-full bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-500 transition-colors active:bg-blue-100"
+              className="flex items-center gap-0.5 rounded-full bg-blue-500/15 px-2 py-0.5 text-[11px] font-medium text-blue-400 transition-colors active:bg-blue-500/25"
             >
               高德
               <ExternalLink size={10} />
@@ -203,7 +203,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
               onClick={openLink(dianpingUrl)}
               onPointerDown={stopAll}
               onTouchStart={stopAll}
-              className="flex items-center gap-0.5 rounded-full bg-orange-50 px-2 py-0.5 text-[11px] font-medium text-orange-500 transition-colors active:bg-orange-100"
+              className="flex items-center gap-0.5 rounded-full bg-orange-500/15 px-2 py-0.5 text-[11px] font-medium text-orange-400 transition-colors active:bg-orange-500/25"
             >
               点评
               <ExternalLink size={10} />
@@ -214,17 +214,17 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
         <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">
+            <span className="text-sm font-semibold text-foreground">
               {restaurant.rating}
             </span>
           </div>
 
-          <span className="text-sm font-semibold text-emerald-600">
+          <span className="text-sm font-semibold text-emerald-400">
             {restaurant.price}
           </span>
 
           {restaurant.distance && (
-            <div className="flex items-center gap-1 text-zinc-400">
+            <div className="flex items-center gap-1 text-muted">
               <MapPin size={13} />
               <span className="text-xs">{restaurant.distance}</span>
             </div>
@@ -232,13 +232,13 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
         </div>
 
         {restaurant.address && (
-          <p className="truncate text-xs leading-tight text-zinc-400">
+          <p className="truncate text-xs leading-tight text-muted">
             {restaurant.address}
           </p>
         )}
 
         {restaurant.openTime && (
-          <div className="flex items-center gap-1 text-xs text-zinc-400">
+          <div className="flex items-center gap-1 text-xs text-muted">
             <Clock size={12} />
             <span>{restaurant.openTime}</span>
           </div>
@@ -252,7 +252,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
               .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"
+                  className="shrink-0 rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
                 >
                   {t.trim()}
                 </span>
diff --git a/src/components/RoomManageModal.tsx b/src/components/RoomManageModal.tsx
index 22c6e69..7e3211f 100644
--- a/src/components/RoomManageModal.tsx
+++ b/src/components/RoomManageModal.tsx
@@ -95,7 +95,7 @@ export default function RoomManageModal({
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -103,7 +103,7 @@ export default function RoomManageModal({
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
+            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
@@ -111,16 +111,16 @@ export default function RoomManageModal({
           >
             <button
               onClick={onClose}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
+              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
             >
               <X size={16} />
             </button>
 
             <div className="flex items-center gap-2">
-              <Crown size={18} className="text-amber-500" />
-              <h2 className="text-lg font-bold text-zinc-900">房间管理</h2>
+              <Crown size={18} className="text-amber-400" />
+              <h2 className="text-lg font-bold text-white">房间管理</h2>
             </div>
-            <p className="mt-1 text-xs text-zinc-400">
+            <p className="mt-1 text-xs text-muted">
               房间号 {roomId}
             </p>
 
@@ -131,8 +131,8 @@ export default function RoomManageModal({
                 disabled={loading !== null}
                 className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
                   locked
-                    ? "border border-emerald-200 bg-emerald-50 text-emerald-700 active:bg-emerald-100"
-                    : "border border-zinc-200 bg-white text-zinc-700 active:bg-zinc-50"
+                    ? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
+                    : "bg-elevated text-gray-300 ring-1 ring-border active:bg-subtle"
                 }`}
               >
                 {loading === "lock" || loading === "unlock" ? (
@@ -148,7 +148,7 @@ export default function RoomManageModal({
 
             {/* User list with kick */}
             <div className="mt-5">
-              <h3 className="text-xs font-semibold text-zinc-500">
+              <h3 className="text-xs font-semibold text-muted">
                 房间成员（{users.length}）
               </h3>
               <div className="mt-2 flex flex-col gap-1.5">
@@ -164,7 +164,7 @@ export default function RoomManageModal({
                   return (
                     <div
                       key={uid}
-                      className="flex items-center gap-2.5 rounded-xl bg-zinc-50 px-3 py-2.5"
+                      className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
                     >
                       <span
                         className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
@@ -174,17 +174,17 @@ export default function RoomManageModal({
                       <div className="flex min-w-0 flex-1 flex-col">
                         <div className="flex items-center gap-1.5">
                           {isCreator && (
-                            <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-500">
+                            <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
                               <Crown size={10} />
                               房主
                             </span>
                           )}
-                          <span className="truncate text-xs font-medium text-zinc-500">
+                          <span className="truncate text-xs font-medium text-gray-400">
                             {displayName}
                           </span>
                         </div>
                         <span
-                          className={`text-[11px] ${finished ? "text-emerald-500" : "text-zinc-400"}`}
+                          className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
                         >
                           {swiped}/{totalCards}
                           {finished ? " 已完成" : " 进行中"}
@@ -211,7 +211,7 @@ export default function RoomManageModal({
                               </button>
                               <button
                                 onClick={() => setConfirmKick(null)}
-                                className="rounded-lg bg-zinc-200 px-2.5 py-1 text-[11px] font-semibold text-zinc-600 transition-colors active:bg-zinc-300"
+                                className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-gray-400 transition-colors active:bg-elevated"
                               >
                                 取消
                               </button>
@@ -219,7 +219,7 @@ export default function RoomManageModal({
                           ) : (
                             <button
                               onClick={() => setConfirmKick(uid)}
-                              className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-zinc-400 transition-colors active:bg-zinc-100 active:text-rose-500"
+                              className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
                             >
                               <UserX size={13} />
                               移出
@@ -236,8 +236,8 @@ export default function RoomManageModal({
             {/* End voting */}
             <div className="mt-5">
               {confirmEnd ? (
-                <div className="flex flex-col gap-2 rounded-xl border border-amber-200 bg-amber-50 p-3">
-                  <p className="text-xs font-medium text-amber-800">
+                <div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
+                  <p className="text-xs font-medium text-amber-300">
                     确定要结束投票吗？将根据当前已有的投票结果直接结算。
                   </p>
                   <div className="flex gap-2">
@@ -255,7 +255,7 @@ export default function RoomManageModal({
                     </button>
                     <button
                       onClick={() => setConfirmEnd(false)}
-                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-white text-xs font-semibold text-zinc-600 transition-colors active:bg-zinc-50"
+                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-gray-400 transition-colors active:bg-subtle"
                     >
                       再等等
                     </button>
@@ -265,7 +265,7 @@ export default function RoomManageModal({
                 <button
                   onClick={() => setConfirmEnd(true)}
                   disabled={loading !== null}
-                  className="flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-amber-200 bg-amber-50 text-sm font-semibold text-amber-700 transition-colors active:bg-amber-100 disabled:opacity-50"
+                  className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
                 >
                   <Flag size={15} />
                   结束投票（立即出结果）
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index 5efcb3a..5ba0159 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -28,11 +28,11 @@ function UserProgressBar({
 
   const myProfile = userProfiles[userId];
   const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
-  const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
+  const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
 
   return (
     <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
-      <span className="flex items-center gap-1 text-[11px] tabular-nums text-emerald-500">
+      <span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
         <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
           {myAvatar}
         </span>
@@ -47,12 +47,12 @@ function UserProgressBar({
         return (
           <span
             key={id}
-            className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`}
+            className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
           >
             <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
               {emoji}
             </span>
-            {label && <span className="max-w-[3rem] truncate">{label}</span>}
+            {label && <span className="max-w-12 truncate">{label}</span>}
             {count}/{total}
             {finished && <Check size={10} className="text-emerald-400" />}
           </span>
@@ -84,9 +84,9 @@ function WaitingProgress({
   const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
 
   return (
-    <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3">
+    <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-surface px-4 py-3 ring-1 ring-border">
       <div className="flex items-center justify-between">
-        <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
+        <span className="flex items-center gap-1.5 text-xs font-medium text-accent">
           <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
             {myEmoji}
           </span>
@@ -105,17 +105,17 @@ function WaitingProgress({
         return (
           <div key={id} className="flex flex-col gap-1">
             <div className="flex items-center justify-between">
-              <span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-emerald-600" : "text-zinc-500"}`}>
-                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : bg}`}>
+              <span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-accent" : "text-muted"}`}>
+                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-500/20" : bg}`}>
                   {emoji}
                 </span>
-                {label && <span className="max-w-[3rem] truncate">{label}</span>}
+                {label && <span className="max-w-12 truncate">{label}</span>}
                 {count}/{total}
               </span>
               {finished && <Check size={14} className="text-emerald-400" />}
             </div>
             {!finished && (
-              <div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200">
+              <div className="ml-7 h-1 overflow-hidden rounded-full bg-elevated">
                 <motion.div
                   className="h-full rounded-full bg-amber-400"
                   animate={{ width: `${pct}%` }}
@@ -127,7 +127,7 @@ function WaitingProgress({
         );
       })}
 
-      <p className="text-center text-[10px] text-zinc-400">
+      <p className="text-center text-[10px] text-muted">
         {finishedCount}/{others.length} 人已完成
       </p>
     </div>
@@ -326,7 +326,7 @@ export default function SwipeDeck({
       {!allSwiped && !resolvedMatchId && (
         <div className="mx-auto w-full max-w-sm px-4 pb-1">
           <div className="flex items-center gap-2">
-            <div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100">
+            <div className="h-1 flex-1 overflow-hidden rounded-full bg-elevated">
               <motion.div
                 className="h-full rounded-full bg-emerald-400"
                 initial={{ width: 0 }}
@@ -336,13 +336,13 @@ export default function SwipeDeck({
                 transition={{ type: "spring", stiffness: 300, damping: 30 }}
               />
             </div>
-            <span className="shrink-0 text-[11px] tabular-nums text-zinc-400">
+            <span className="shrink-0 text-[11px] tabular-nums text-muted">
               {currentIndex}/{restaurants.length}
             </span>
             <button
               onClick={handleUndo}
               disabled={currentIndex === 0}
-              className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-500 transition-colors active:bg-amber-50 disabled:opacity-0"
+              className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
             >
               <Undo2 size={12} />
               撤回
@@ -385,8 +385,8 @@ export default function SwipeDeck({
 
           {showWaiting && (
             <div className="flex h-full flex-col items-center justify-center gap-4">
-              <div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
-              <p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p>
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-subtle border-t-accent" />
+              <p className="text-sm font-medium text-muted">等待其他人完成选择</p>
               <WaitingProgress
                 userId={userId}
                 swipeCounts={swipeCounts}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 2d5758f..29cd89f 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -51,7 +51,7 @@ export default function TopNav({
         <div className="flex items-center gap-1.5">
           <button
             onClick={() => setShowQr(true)}
-            className="flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-600 transition-colors active:bg-emerald-100"
+            className="flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent transition-colors active:bg-accent/25"
           >
             <QrCode size={13} />
             邀请
@@ -59,7 +59,7 @@ export default function TopNav({
           {isCreator && (
             <button
               onClick={() => setShowManage(true)}
-              className="flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-600 transition-colors active:bg-amber-100"
+              className="flex items-center gap-1 rounded-full bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 transition-colors active:bg-amber-500/25"
             >
               <Crown size={13} />
               管理
@@ -67,27 +67,27 @@ export default function TopNav({
           )}
         </div>
 
-        <h1 className="text-center text-base font-bold tracking-tight text-zinc-900">
+        <h1 className="text-center text-base font-bold tracking-tight text-white">
           <span className="block leading-tight">NoWhatever</span>
-          <span className="block text-[10px] font-medium tracking-widest text-zinc-400">
+          <span className="block text-[10px] font-medium tracking-widest text-muted">
             别说随便
           </span>
         </h1>
 
-        <div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500">
+        <div className="flex items-center justify-end gap-1.5 text-xs text-muted">
           {locked && (
             <Lock size={12} className="text-amber-500" />
           )}
-          <span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
+          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-gray-400">
             {roomId}
           </span>
           <div className="flex items-center gap-0.5">
             <Users size={13} />
-            <span className="font-semibold text-emerald-500">{userCount}</span>
+            <span className="font-semibold text-accent">{userCount}</span>
           </div>
           <button
             onClick={onExit}
-            className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600"
+            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-gray-300"
             aria-label="退出房间"
           >
             <LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
+            className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}

From 11d872e72a52758bf10d40d2b00709b9310d4f75 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 11:27:23 +0800
Subject: [PATCH 03/66] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=20Cursor=20?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E7=B3=BB=E7=BB=9F=E5=92=8C=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- design-system.mdc: 暗色 token 映射表、禁止白色背景、按钮分层规则
- project-conventions.mdc: 技术栈声明、Tailwind v4 语法、组件和 API 编码规范
---
 .cursor/rules/design-system.mdc       | 55 +++++++++++++++++++++++++++
 .cursor/rules/project-conventions.mdc | 34 +++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 .cursor/rules/design-system.mdc
 create mode 100644 .cursor/rules/project-conventions.mdc

diff --git a/.cursor/rules/design-system.mdc b/.cursor/rules/design-system.mdc
new file mode 100644
index 0000000..c966c2b
--- /dev/null
+++ b/.cursor/rules/design-system.mdc
@@ -0,0 +1,55 @@
+---
+description: Dark theme design token system — enforces consistent color usage across all UI
+globs: "**/*.tsx,**/*.css"
+alwaysApply: false
+---
+
+# Design System: Dark Theme Tokens
+
+This project uses a unified dark theme. All colors come from semantic tokens defined in `globals.css` via Tailwind v4 `@theme`.
+
+## Token Map
+
+| Token | Tailwind Class | Hex | Usage |
+|-------|---------------|-----|-------|
+| background | `bg-background` | #030712 | Page-level backgrounds |
+| surface | `bg-surface` | #111827 | Cards, modals, inputs, panels |
+| elevated | `bg-elevated` | #1f2937 | Hover states, secondary buttons, nested containers |
+| border | `ring-border` / `bg-border` | #1f2937 | Borders, dividers |
+| subtle | `ring-subtle` / `bg-subtle` | #374151 | Secondary borders, hover-next-level |
+| foreground | `text-foreground` | #f3f4f6 | Primary text, input text |
+| muted | `text-muted` | #6b7280 | Secondary text, labels, placeholders emphasis |
+| dim | `text-dim` | #4b5563 | Tertiary text, timestamps, divider labels |
+| accent | `bg-accent` | #10b981 | Primary CTA, active indicators |
+| accent-hover | `bg-accent-hover` | #059669 | Accent hover state |
+
+## Mandatory Rules
+
+1. **NEVER use `bg-white`** for cards, modals, or page backgrounds. Use `bg-surface` or `bg-elevated`.
+2. **NEVER use `text-zinc-*` or `text-gray-*` for standard text.** Use `text-foreground`, `text-muted`, or `text-dim`.
+3. **NEVER use `bg-gray-950/900/800`** — use `bg-background`, `bg-surface`, `bg-elevated` respectively.
+4. **NEVER use `ring-gray-*` / `border-gray-*`** — use `ring-border` or `ring-subtle`.
+5. **Light-on-dark badges**: use `bg-{color}-500/10..15` + `text-{color}-400` (e.g. `bg-amber-500/10 text-amber-400`).
+6. **Inputs**: `bg-surface ring-1 ring-border text-foreground placeholder:text-dim focus:ring-2 focus:ring-{accent}/50`.
+
+## Button Color Hierarchy
+
+Buttons follow a strict 4-tier color system:
+
+| Tier | Color | When to use | Example |
+|------|-------|-------------|---------|
+| **System CTA** | `bg-accent` | Login, join room, navigate, share, save — any universal primary action | "导航过去", "登录", "加入房间" |
+| **Mode Accent** | Orange gradient (Panic) / `bg-purple-600` (BlindBox) | The ONE primary CTA of each mode only | "创建新房间", "提交想法" |
+| **Dramatic** | `from-red-600 to-rose-500` | Irreversible, high-ceremony actions only | "开启周末盲盒（绝不反悔）" |
+| **Destructive** | `bg-rose-500` or `bg-amber-500` | Leave, kick, end session | "退出房间", "踢出" |
+| **Secondary** | `bg-surface` or `bg-elevated` + `ring-1 ring-border` | Cancel, close, alternative actions | "继续滑卡", "换一批店" |
+
+Rules:
+- System-level actions ALWAYS use `bg-accent`, never mode-specific colors.
+- Mode accent colors are ONLY for the core action of that mode, not for navigation or system actions within the mode.
+- Never invent new CTA colors outside this hierarchy.
+
+## Exceptions
+
+- Image overlays and swipe overlays may use `bg-black/*` or `bg-white/*` for translucency on photos.
+- Filter pills/tags in Panic mode use `bg-orange-500` for active state — these are toggles, not CTA buttons.
diff --git a/.cursor/rules/project-conventions.mdc b/.cursor/rules/project-conventions.mdc
new file mode 100644
index 0000000..bc4d652
--- /dev/null
+++ b/.cursor/rules/project-conventions.mdc
@@ -0,0 +1,34 @@
+---
+description: Project-wide coding conventions for NoWhatever
+alwaysApply: true
+---
+
+# NoWhatever Project Conventions
+
+## Tech Stack
+
+- **Framework**: Next.js App Router (all pages are `"use client"`)
+- **Database**: Prisma + SQLite
+- **Styling**: Tailwind CSS v4 (use `bg-linear-to-*` NOT `bg-gradient-to-*`)
+- **Animation**: framer-motion
+- **Icons**: lucide-react
+- **Effects**: canvas-confetti
+
+## Tailwind v4 Syntax
+
+- Gradients: `bg-linear-to-br` (not `bg-gradient-to-br`)
+- Arbitrary values: prefer Tailwind built-in classes over `[]` when possible (e.g. `max-w-20` not `max-w-[5rem]`)
+
+## Component Patterns
+
+- Page components export `default function PageName()`
+- Use `useCallback` for event handlers passed as props
+- Use `motion.*` from framer-motion for animated elements
+- Mobile-first, `min-h-dvh` for full-height pages
+- `overflow-y-auto scrollbar-none` for scrollable pages
+
+## API Routes
+
+- Located in `src/app/api/`
+- Return `NextResponse.json()` with appropriate status codes
+- Always handle errors with try/catch

From 14b0aaece43ac6d7212b660247253c5e66a2d3c4 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 12:25:32 +0800
Subject: [PATCH 04/66] =?UTF-8?q?feat:=20=E7=9B=B2=E7=9B=92=E6=88=BF?=
 =?UTF-8?q?=E9=97=B4=E4=BD=93=E7=B3=BB=E9=87=8D=E6=9E=84=20=E2=80=94=20?=
 =?UTF-8?q?=E5=BC=BA=E5=88=B6=E7=99=BB=E5=BD=95=E3=80=81=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E6=88=BF=E9=97=B4=E3=80=81=E7=94=A8=E6=88=B7=E5=BD=92=E5=B1=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 BlindBoxRoom/BlindBoxMember 模型，BlindBoxIdea 增加 userId/drawnById
- 新增房间 API（创建/加入/列表/详情），所有盲盒 API 增加认证和成员校验
- 新建盲盒大厅页面（三层引导式设计：未登录氛围页/首次创建引导/房间列表）
- 新建盲盒房间页面（成员校验/邀请分享/用户归属展示/自动聚焦）
- 首页删除契约画廊和 localStorage 盲盒逻辑，周末契约跳转到 /blindbox
- 清理旧路由 /room/[id]/blindbox
- 提取共享工具 src/lib/blindbox.ts（错误响应/房间号生成/成员校验）
- AuthModal 支持 defaultTab 参数
- 更新项目规范：新项目原则、代码优雅和复用优先
---
 .cursor/rules/project-conventions.mdc         |  10 +
 .../migration.sql                             |  52 ++
 prisma/schema.prisma                          |  35 +
 src/app/api/blindbox/draw/route.ts            |  30 +-
 src/app/api/blindbox/room/[code]/route.ts     |  30 +
 src/app/api/blindbox/room/join/route.ts       |  38 ++
 src/app/api/blindbox/room/route.ts            |  40 ++
 src/app/api/blindbox/rooms/route.ts           |  69 ++
 src/app/api/blindbox/route.ts                 |  62 +-
 src/app/blindbox/[code]/page.tsx              | 610 ++++++++++++++++++
 src/app/blindbox/page.tsx                     | 453 +++++++++++++
 src/app/page.tsx                              | 173 ++---
 src/app/room/[id]/blindbox/page.tsx           | 409 ------------
 src/components/AuthModal.tsx                  |   5 +-
 src/lib/blindbox.ts                           |  43 ++
 15 files changed, 1502 insertions(+), 557 deletions(-)
 create mode 100644 prisma/migrations/20260226040305_add_blindbox_room_system/migration.sql
 create mode 100644 src/app/api/blindbox/room/[code]/route.ts
 create mode 100644 src/app/api/blindbox/room/join/route.ts
 create mode 100644 src/app/api/blindbox/room/route.ts
 create mode 100644 src/app/api/blindbox/rooms/route.ts
 create mode 100644 src/app/blindbox/[code]/page.tsx
 create mode 100644 src/app/blindbox/page.tsx
 delete mode 100644 src/app/room/[id]/blindbox/page.tsx
 create mode 100644 src/lib/blindbox.ts

diff --git a/.cursor/rules/project-conventions.mdc b/.cursor/rules/project-conventions.mdc
index bc4d652..695b350 100644
--- a/.cursor/rules/project-conventions.mdc
+++ b/.cursor/rules/project-conventions.mdc
@@ -5,6 +5,13 @@ alwaysApply: true
 
 # NoWhatever Project Conventions
 
+## Philosophy
+
+- This is a **new project** — never worry about backward compatibility or legacy code migration
+- Prioritize **code elegance and reuse** over quick hacks
+- Extract shared logic into reusable utilities (`src/lib/`) and components (`src/components/`)
+- DRY: if the same pattern appears twice, extract it
+
 ## Tech Stack
 
 - **Framework**: Next.js App Router (all pages are `"use client"`)
@@ -26,9 +33,12 @@ alwaysApply: true
 - Use `motion.*` from framer-motion for animated elements
 - Mobile-first, `min-h-dvh` for full-height pages
 - `overflow-y-auto scrollbar-none` for scrollable pages
+- Extract reusable UI patterns into shared components (modals, cards, empty states)
 
 ## API Routes
 
 - Located in `src/app/api/`
 - Return `NextResponse.json()` with appropriate status codes
 - Always handle errors with try/catch
+- Extract common validation (userId, membership) into utility functions in `src/lib/`
+- Use consistent error response shape: `{ error: string }`
diff --git a/prisma/migrations/20260226040305_add_blindbox_room_system/migration.sql b/prisma/migrations/20260226040305_add_blindbox_room_system/migration.sql
new file mode 100644
index 0000000..27bec12
--- /dev/null
+++ b/prisma/migrations/20260226040305_add_blindbox_room_system/migration.sql
@@ -0,0 +1,52 @@
+/*
+  Warnings:
+
+  - Added the required column `userId` to the `BlindBoxIdea` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- CreateTable
+CREATE TABLE "BlindBoxRoom" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "code" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "creatorId" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "BlindBoxRoom_creatorId_fkey" FOREIGN KEY ("creatorId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "BlindBoxMember" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "roomId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "joinedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "BlindBoxMember_roomId_fkey" FOREIGN KEY ("roomId") REFERENCES "BlindBoxRoom" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
+    CONSTRAINT "BlindBoxMember_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_BlindBoxIdea" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "roomId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "status" TEXT NOT NULL DEFAULT 'in_pool',
+    "drawnById" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "BlindBoxIdea_roomId_fkey" FOREIGN KEY ("roomId") REFERENCES "BlindBoxRoom" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
+    CONSTRAINT "BlindBoxIdea_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
+    CONSTRAINT "BlindBoxIdea_drawnById_fkey" FOREIGN KEY ("drawnById") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+INSERT INTO "new_BlindBoxIdea" ("content", "createdAt", "id", "roomId", "status") SELECT "content", "createdAt", "id", "roomId", "status" FROM "BlindBoxIdea";
+DROP TABLE "BlindBoxIdea";
+ALTER TABLE "new_BlindBoxIdea" RENAME TO "BlindBoxIdea";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "BlindBoxRoom_code_key" ON "BlindBoxRoom"("code");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "BlindBoxMember_roomId_userId_key" ON "BlindBoxMember"("roomId", "userId");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 3d95785..6459a79 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -24,6 +24,11 @@ model User {
   createdAt    DateTime   @default(now())
   decisions    Decision[]
   favorites    Favorite[]
+
+  createdBlindBoxRooms BlindBoxRoom[]   @relation("RoomCreator")
+  blindBoxMemberships  BlindBoxMember[]
+  submittedIdeas       BlindBoxIdea[]   @relation("IdeaSubmitter")
+  drawnIdeas           BlindBoxIdea[]   @relation("IdeaDrawer")
 }
 
 model Decision {
@@ -46,10 +51,40 @@ model Favorite {
   user           User     @relation(fields: [userId], references: [id])
 }
 
+model BlindBoxRoom {
+  id        String   @id @default(cuid())
+  code      String   @unique
+  name      String
+  creatorId String
+  createdAt DateTime @default(now())
+
+  creator User             @relation("RoomCreator", fields: [creatorId], references: [id])
+  members BlindBoxMember[]
+  ideas   BlindBoxIdea[]
+}
+
+model BlindBoxMember {
+  id       String   @id @default(cuid())
+  roomId   String
+  userId   String
+  joinedAt DateTime @default(now())
+
+  room BlindBoxRoom @relation(fields: [roomId], references: [id], onDelete: Cascade)
+  user User         @relation(fields: [userId], references: [id])
+
+  @@unique([roomId, userId])
+}
+
 model BlindBoxIdea {
   id        String   @id @default(uuid())
   roomId    String
+  userId    String
   content   String
   status    String   @default("in_pool")
+  drawnById String?
   createdAt DateTime @default(now())
+
+  room    BlindBoxRoom @relation(fields: [roomId], references: [id], onDelete: Cascade)
+  user    User         @relation("IdeaSubmitter", fields: [userId], references: [id])
+  drawnBy User?        @relation("IdeaDrawer", fields: [drawnById], references: [id])
 }
diff --git a/src/app/api/blindbox/draw/route.ts b/src/app/api/blindbox/draw/route.ts
index 96e7b31..bc14902 100644
--- a/src/app/api/blindbox/draw/route.ts
+++ b/src/app/api/blindbox/draw/route.ts
@@ -1,39 +1,51 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
+import { errorResponse, validateMembership } from "@/lib/blindbox";
 
 export async function POST(req: NextRequest) {
   try {
-    const { roomId } = await req.json();
+    const { roomId, userId } = await req.json();
 
+    if (!userId || typeof userId !== "string") {
+      return errorResponse("请先登录", 401);
+    }
     if (!roomId || typeof roomId !== "string") {
-      return NextResponse.json({ error: "roomId 不能为空" }, { status: 400 });
+      return errorResponse("roomId 不能为空", 400);
+    }
+
+    const isMember = await validateMembership(roomId, userId);
+    if (!isMember) {
+      return errorResponse("你不是这个房间的成员", 403);
     }
 
     const pool = await prisma.blindBoxIdea.findMany({
-      where: { roomId: roomId.trim(), status: "in_pool" },
+      where: { roomId, status: "in_pool" },
       select: { id: true },
     });
 
     if (pool.length === 0) {
-      return NextResponse.json(
-        { error: "盒子是空的，先往里面塞点想法吧！" },
-        { status: 404 },
-      );
+      return errorResponse("盒子是空的，先往里面塞点想法吧！", 404);
     }
 
     const picked = pool[Math.floor(Math.random() * pool.length)];
 
     const idea = await prisma.blindBoxIdea.update({
       where: { id: picked.id },
-      data: { status: "drawn" },
+      data: { status: "drawn", drawnById: userId },
+      include: {
+        user: { select: { id: true, username: true, avatar: true } },
+        drawnBy: { select: { id: true, username: true, avatar: true } },
+      },
     });
 
     return NextResponse.json({
       id: idea.id,
       content: idea.content,
       createdAt: idea.createdAt,
+      submitter: idea.user,
+      drawnBy: idea.drawnBy,
     });
   } catch {
-    return NextResponse.json({ error: "抽取失败" }, { status: 500 });
+    return errorResponse("抽取失败", 500);
   }
 }
diff --git a/src/app/api/blindbox/room/[code]/route.ts b/src/app/api/blindbox/room/[code]/route.ts
new file mode 100644
index 0000000..8baa90b
--- /dev/null
+++ b/src/app/api/blindbox/room/[code]/route.ts
@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+import { errorResponse, getRoomByCode } from "@/lib/blindbox";
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ code: string }> },
+) {
+  try {
+    const { code } = await params;
+    const room = await getRoomByCode(code.toUpperCase());
+
+    if (!room) {
+      return errorResponse("房间不存在", 404);
+    }
+
+    return NextResponse.json({
+      id: room.id,
+      code: room.code,
+      name: room.name,
+      creatorId: room.creatorId,
+      poolCount: room._count.ideas,
+      members: room.members.map((m) => ({
+        ...m.user,
+        joinedAt: m.joinedAt,
+      })),
+    });
+  } catch {
+    return errorResponse("获取房间信息失败", 500);
+  }
+}
diff --git a/src/app/api/blindbox/room/join/route.ts b/src/app/api/blindbox/room/join/route.ts
new file mode 100644
index 0000000..ab3fe0b
--- /dev/null
+++ b/src/app/api/blindbox/room/join/route.ts
@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { errorResponse } from "@/lib/blindbox";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userId, code } = await req.json();
+
+    if (!userId || typeof userId !== "string") {
+      return errorResponse("请先登录", 401);
+    }
+    if (!code || typeof code !== "string") {
+      return errorResponse("请输入房间号", 400);
+    }
+
+    const room = await prisma.blindBoxRoom.findUnique({
+      where: { code: code.trim().toUpperCase() },
+    });
+    if (!room) {
+      return errorResponse("房间不存在，请检查房间号", 404);
+    }
+
+    const existing = await prisma.blindBoxMember.findUnique({
+      where: { roomId_userId: { roomId: room.id, userId } },
+    });
+    if (existing) {
+      return NextResponse.json({ id: room.id, code: room.code, name: room.name, alreadyMember: true });
+    }
+
+    await prisma.blindBoxMember.create({
+      data: { roomId: room.id, userId },
+    });
+
+    return NextResponse.json({ id: room.id, code: room.code, name: room.name }, { status: 201 });
+  } catch {
+    return errorResponse("加入房间失败", 500);
+  }
+}
diff --git a/src/app/api/blindbox/room/route.ts b/src/app/api/blindbox/room/route.ts
new file mode 100644
index 0000000..46f603c
--- /dev/null
+++ b/src/app/api/blindbox/room/route.ts
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { errorResponse, generateUniqueRoomCode } from "@/lib/blindbox";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userId, name } = await req.json();
+
+    if (!userId || typeof userId !== "string") {
+      return errorResponse("请先登录", 401);
+    }
+
+    const roomName = (name || "").trim() || "我们的周末";
+    if (roomName.length > 30) {
+      return errorResponse("房间名不能超过 30 个字", 400);
+    }
+
+    const user = await prisma.user.findUnique({ where: { id: userId } });
+    if (!user) {
+      return errorResponse("用户不存在", 404);
+    }
+
+    const code = await generateUniqueRoomCode();
+
+    const room = await prisma.blindBoxRoom.create({
+      data: {
+        code,
+        name: roomName,
+        creatorId: userId,
+        members: {
+          create: { userId },
+        },
+      },
+    });
+
+    return NextResponse.json({ id: room.id, code: room.code, name: room.name }, { status: 201 });
+  } catch {
+    return errorResponse("创建房间失败", 500);
+  }
+}
diff --git a/src/app/api/blindbox/rooms/route.ts b/src/app/api/blindbox/rooms/route.ts
new file mode 100644
index 0000000..616dad0
--- /dev/null
+++ b/src/app/api/blindbox/rooms/route.ts
@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { errorResponse } from "@/lib/blindbox";
+
+export async function GET(req: NextRequest) {
+  const userId = req.nextUrl.searchParams.get("userId");
+
+  if (!userId) {
+    return errorResponse("请先登录", 401);
+  }
+
+  try {
+    const memberships = await prisma.blindBoxMember.findMany({
+      where: { userId },
+      include: {
+        room: {
+          include: {
+            members: {
+              include: { user: { select: { id: true, username: true, avatar: true } } },
+              orderBy: { joinedAt: "asc" },
+              take: 5,
+            },
+            _count: {
+              select: {
+                ideas: true,
+                members: true,
+              },
+            },
+            ideas: {
+              where: { status: "drawn" },
+              orderBy: { createdAt: "desc" },
+              take: 1,
+              select: { content: true, createdAt: true },
+            },
+          },
+        },
+      },
+      orderBy: { joinedAt: "desc" },
+    });
+
+    const rooms = memberships.map((m) => ({
+      id: m.room.id,
+      code: m.room.code,
+      name: m.room.name,
+      memberCount: m.room._count.members,
+      ideaCount: m.room._count.ideas,
+      poolCount: 0,
+      members: m.room.members.map((mb) => mb.user),
+      lastDrawn: m.room.ideas[0] ?? null,
+      joinedAt: m.joinedAt,
+    }));
+
+    const roomIds = rooms.map((r) => r.id);
+    const poolCounts = await prisma.blindBoxIdea.groupBy({
+      by: ["roomId"],
+      where: { roomId: { in: roomIds }, status: "in_pool" },
+      _count: true,
+    });
+    const poolMap = new Map(poolCounts.map((p) => [p.roomId, p._count]));
+
+    for (const room of rooms) {
+      room.poolCount = poolMap.get(room.id) ?? 0;
+    }
+
+    return NextResponse.json({ rooms });
+  } catch {
+    return errorResponse("获取房间列表失败", 500);
+  }
+}
diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
index 72a0d42..9c9ef3c 100644
--- a/src/app/api/blindbox/route.ts
+++ b/src/app/api/blindbox/route.ts
@@ -1,50 +1,76 @@
 import { NextRequest, NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
+import { errorResponse, validateMembership } from "@/lib/blindbox";
 
 export async function POST(req: NextRequest) {
   try {
-    const { roomId, content } = await req.json();
+    const { roomId, userId, content } = await req.json();
 
+    if (!userId || typeof userId !== "string") {
+      return errorResponse("请先登录", 401);
+    }
     if (!roomId || typeof roomId !== "string") {
-      return NextResponse.json({ error: "roomId 不能为空" }, { status: 400 });
+      return errorResponse("roomId 不能为空", 400);
     }
     if (!content || typeof content !== "string" || content.trim().length === 0) {
-      return NextResponse.json({ error: "内容不能为空" }, { status: 400 });
+      return errorResponse("内容不能为空", 400);
     }
     if (content.trim().length > 200) {
-      return NextResponse.json({ error: "内容不能超过 200 字" }, { status: 400 });
+      return errorResponse("内容不能超过 200 字", 400);
+    }
+
+    const isMember = await validateMembership(roomId, userId);
+    if (!isMember) {
+      return errorResponse("你不是这个房间的成员", 403);
     }
 
     const idea = await prisma.blindBoxIdea.create({
       data: {
-        roomId: roomId.trim(),
+        roomId,
+        userId,
         content: content.trim(),
       },
     });
 
     return NextResponse.json({ id: idea.id }, { status: 201 });
   } catch {
-    return NextResponse.json({ error: "提交失败" }, { status: 500 });
+    return errorResponse("提交失败", 500);
   }
 }
 
 export async function GET(req: NextRequest) {
   const roomId = req.nextUrl.searchParams.get("roomId");
+  const userId = req.nextUrl.searchParams.get("userId");
 
   if (!roomId) {
-    return NextResponse.json({ error: "缺少 roomId" }, { status: 400 });
+    return errorResponse("缺少 roomId", 400);
+  }
+  if (!userId) {
+    return errorResponse("请先登录", 401);
   }
 
-  const [poolCount, drawn] = await Promise.all([
-    prisma.blindBoxIdea.count({
-      where: { roomId, status: "in_pool" },
-    }),
-    prisma.blindBoxIdea.findMany({
-      where: { roomId, status: "drawn" },
-      orderBy: { createdAt: "desc" },
-      select: { id: true, content: true, createdAt: true },
-    }),
-  ]);
+  const isMember = await validateMembership(roomId, userId);
+  if (!isMember) {
+    return errorResponse("你不是这个房间的成员", 403);
+  }
 
-  return NextResponse.json({ poolCount, drawn });
+  try {
+    const [poolCount, drawn] = await Promise.all([
+      prisma.blindBoxIdea.count({
+        where: { roomId, status: "in_pool" },
+      }),
+      prisma.blindBoxIdea.findMany({
+        where: { roomId, status: "drawn" },
+        orderBy: { createdAt: "desc" },
+        include: {
+          user: { select: { id: true, username: true, avatar: true } },
+          drawnBy: { select: { id: true, username: true, avatar: true } },
+        },
+      }),
+    ]);
+
+    return NextResponse.json({ poolCount, drawn });
+  } catch {
+    return errorResponse("查询失败", 500);
+  }
 }
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
new file mode 100644
index 0000000..1076222
--- /dev/null
+++ b/src/app/blindbox/[code]/page.tsx
@@ -0,0 +1,610 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { motion, AnimatePresence, useAnimation } from "framer-motion";
+import {
+  ArrowLeft,
+  Send,
+  Loader2,
+  Package,
+  Flame,
+  Trophy,
+  Users,
+  Share2,
+  LogIn,
+  Copy,
+} from "lucide-react";
+import confetti from "canvas-confetti";
+import { getCachedProfile, isRegistered } from "@/lib/userId";
+import type { UserProfile } from "@/types";
+
+interface RoomInfo {
+  id: string;
+  code: string;
+  name: string;
+  creatorId: string;
+  poolCount: number;
+  members: { id: string; username: string; avatar: string }[];
+}
+
+interface DrawnIdea {
+  id: string;
+  content: string;
+  createdAt: string;
+  user?: { id: string; username: string; avatar: string };
+  drawnBy?: { id: string; username: string; avatar: string } | null;
+}
+
+type Phase = "pool" | "shaking" | "reveal";
+
+export default function BlindboxRoomPage() {
+  const { code } = useParams<{ code: string }>();
+  const router = useRouter();
+
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [room, setRoom] = useState<RoomInfo | null>(null);
+  const [isMember, setIsMember] = useState(false);
+  const [joiningRoom, setJoiningRoom] = useState(false);
+  const [pageLoading, setPageLoading] = useState(true);
+
+  const [input, setInput] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [poolCount, setPoolCount] = useState(0);
+  const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
+  const [phase, setPhase] = useState<Phase>("pool");
+  const [revealedIdea, setRevealedIdea] = useState<DrawnIdea | null>(null);
+  const [submitFlash, setSubmitFlash] = useState(false);
+  const [error, setError] = useState("");
+  const [showInvite, setShowInvite] = useState(false);
+  const [toast, setToast] = useState("");
+
+  const boxControls = useAnimation();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const confettiCanvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!isRegistered()) {
+      router.replace("/blindbox");
+      return;
+    }
+    setProfile(getCachedProfile());
+  }, [router]);
+
+  const fetchRoom = useCallback(async () => {
+    if (!code) return;
+    try {
+      const res = await fetch(`/api/blindbox/room/${code}`);
+      if (!res.ok) {
+        router.replace("/blindbox");
+        return;
+      }
+      const data: RoomInfo = await res.json();
+      setRoom(data);
+
+      const p = getCachedProfile();
+      const memberCheck = data.members.some((m) => m.id === p?.id);
+      setIsMember(memberCheck);
+      setPoolCount(data.poolCount);
+    } catch {
+      router.replace("/blindbox");
+    } finally {
+      setPageLoading(false);
+    }
+  }, [code, router]);
+
+  useEffect(() => {
+    fetchRoom();
+  }, [fetchRoom]);
+
+  const fetchIdeas = useCallback(async () => {
+    const p = getCachedProfile();
+    if (!room || !p) return;
+    try {
+      const res = await fetch(`/api/blindbox?roomId=${room.id}&userId=${p.id}`);
+      if (res.ok) {
+        const data = await res.json();
+        setPoolCount(data.poolCount ?? 0);
+        setDrawnHistory(data.drawn ?? []);
+      }
+    } catch { /* ignore */ }
+  }, [room]);
+
+  useEffect(() => {
+    if (isMember && room) fetchIdeas();
+  }, [isMember, room, fetchIdeas]);
+
+  useEffect(() => {
+    if (isMember && inputRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 300);
+    }
+  }, [isMember]);
+
+  const handleJoinRoom = async () => {
+    if (joiningRoom || !profile || !room) return;
+    setJoiningRoom(true);
+    try {
+      const res = await fetch("/api/blindbox/room/join", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: profile.id, code }),
+      });
+      if (res.ok) {
+        setIsMember(true);
+        fetchRoom();
+      }
+    } catch { /* ignore */ }
+    finally { setJoiningRoom(false); }
+  };
+
+  const handleSubmit = async () => {
+    const text = input.trim();
+    if (!text || submitting || !profile || !room) return;
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch("/api/blindbox", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ roomId: room.id, userId: profile.id, content: text }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "提交失败");
+      }
+      setInput("");
+      setPoolCount((c) => c + 1);
+      setSubmitFlash(true);
+      setTimeout(() => setSubmitFlash(false), 600);
+      boxControls.start({
+        scale: [1, 1.08, 1],
+        rotate: [0, -3, 3, 0],
+        transition: { duration: 0.5 },
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "提交失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDraw = async () => {
+    if (poolCount === 0 || !profile || !room) {
+      setError("盒子是空的，先往里面塞点想法吧！");
+      return;
+    }
+
+    setPhase("shaking");
+    setError("");
+
+    await boxControls.start({
+      rotate: [0, -8, 8, -10, 10, -12, 12, -8, 8, -4, 4, 0],
+      scale: [1, 1.05, 0.95, 1.08, 0.92, 1.1, 0.9, 1.05, 0.95, 1],
+      transition: { duration: 2.5, ease: "easeInOut" },
+    });
+
+    try {
+      const res = await fetch("/api/blindbox/draw", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ roomId: room.id, userId: profile.id }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "抽取失败");
+      }
+
+      const idea = await res.json();
+      setRevealedIdea(idea);
+      setPhase("reveal");
+      setPoolCount((c) => Math.max(0, c - 1));
+      setDrawnHistory((prev) => [idea, ...prev]);
+      fireConfetti();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "抽取失败");
+      setPhase("pool");
+    }
+  };
+
+  const fireConfetti = () => {
+    const colors = ["#a855f7", "#6366f1", "#ec4899", "#f59e0b", "#10b981"];
+    confetti({ particleCount: 100, spread: 120, origin: { y: 0.4 }, colors, startVelocity: 45, ticks: 250 });
+    const end = Date.now() + 3000;
+    const frame = () => {
+      if (Date.now() > end) return;
+      confetti({ particleCount: 3, angle: 60, spread: 55, origin: { x: 0, y: 0.6 }, colors, startVelocity: 35, ticks: 150 });
+      confetti({ particleCount: 3, angle: 120, spread: 55, origin: { x: 1, y: 0.6 }, colors, startVelocity: 35, ticks: 150 });
+      requestAnimationFrame(frame);
+    };
+    setTimeout(frame, 200);
+  };
+
+  const handleCopyCode = async () => {
+    if (!room) return;
+    try {
+      await navigator.clipboard.writeText(room.code);
+      setToast("房间号已复制");
+      setTimeout(() => setToast(""), 2000);
+    } catch { /* ignore */ }
+  };
+
+  const handleShare = async () => {
+    if (!room) return;
+    const url = typeof window !== "undefined" ? `${window.location.origin}/blindbox/${room.code}` : "";
+    const shareData = {
+      title: `周末契约 · ${room.name}`,
+      text: `来和我一起玩周末盲盒吧！房间号：${room.code}`,
+      url,
+    };
+    try {
+      if (navigator.share && navigator.canShare?.(shareData)) {
+        await navigator.share(shareData);
+        return;
+      }
+    } catch (e) {
+      if (e instanceof Error && e.name === "AbortError") return;
+    }
+    handleCopyCode();
+  };
+
+  if (pageLoading) {
+    return (
+      <div className="flex min-h-dvh items-center justify-center bg-background">
+        <Loader2 size={24} className="animate-spin text-purple-400" />
+      </div>
+    );
+  }
+
+  if (!room) return null;
+
+  return (
+    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
+      <canvas ref={confettiCanvasRef} className="pointer-events-none fixed inset-0 z-50" />
+
+      {/* Header */}
+      <div className="flex w-full max-w-sm items-center gap-3">
+        <button
+          onClick={() => router.push("/blindbox")}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface ring-1 ring-border transition-colors active:bg-elevated"
+        >
+          <ArrowLeft size={16} className="text-muted" />
+        </button>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-bold text-white">{room.name}</p>
+          <p className="text-[10px] text-dim">房间 {room.code}</p>
+        </div>
+
+        {/* Members */}
+        <div className="flex -space-x-1.5">
+          {room.members.slice(0, 4).map((m) => (
+            <div
+              key={m.id}
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-elevated text-xs ring-2 ring-background"
+              title={m.username}
+            >
+              {m.avatar}
+            </div>
+          ))}
+          {room.members.length > 4 && (
+            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-elevated text-[10px] font-bold text-muted ring-2 ring-background">
+              +{room.members.length - 4}
+            </div>
+          )}
+        </div>
+
+        <button
+          onClick={() => setShowInvite(!showInvite)}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-purple-600/15 text-purple-400 ring-1 ring-purple-500/20 transition-colors active:bg-purple-600/25"
+        >
+          <Share2 size={14} />
+        </button>
+      </div>
+
+      {/* Invite panel */}
+      <AnimatePresence>
+        {showInvite && (
+          <motion.div
+            className="mt-3 w-full max-w-sm overflow-hidden rounded-xl bg-surface ring-1 ring-border"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+          >
+            <div className="flex items-center gap-3 p-3">
+              <span className="text-xs text-muted">房间号</span>
+              <span className="font-mono text-base font-bold tracking-[0.2em] text-purple-400">
+                {room.code}
+              </span>
+              <div className="flex-1" />
+              <button
+                onClick={handleCopyCode}
+                className="flex h-8 items-center gap-1 rounded-lg bg-elevated px-3 text-xs font-medium text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+              >
+                <Copy size={12} /> 复制
+              </button>
+              <button
+                onClick={handleShare}
+                className="flex h-8 items-center gap-1 rounded-lg bg-purple-600 px-3 text-xs font-medium text-white transition-colors active:bg-purple-500"
+              >
+                <Share2 size={12} /> 分享
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Non-member state */}
+      {!isMember ? (
+        <motion.div
+          className="mt-16 flex flex-col items-center gap-4"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <Package size={40} className="text-purple-400/50" strokeWidth={1.5} />
+          <p className="text-sm text-gray-400">你还不是这个房间的成员</p>
+          <button
+            onClick={handleJoinRoom}
+            disabled={joiningRoom}
+            className="flex h-11 items-center gap-2 rounded-xl bg-purple-600 px-6 text-sm font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+          >
+            {joiningRoom ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
+            加入房间
+          </button>
+        </motion.div>
+      ) : (
+        <>
+          {/* Blind Box Visual */}
+          <div className="mt-8 flex flex-col items-center">
+            <motion.div
+              animate={boxControls}
+              className="relative flex h-36 w-36 items-center justify-center"
+            >
+              <div className="absolute inset-0 rounded-3xl bg-linear-to-br from-purple-600/20 to-indigo-600/20 blur-xl" />
+              <div className="relative flex h-32 w-32 flex-col items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-700/30">
+                <div className="absolute -top-2 left-1/2 h-5 w-[90%] -translate-x-1/2 rounded-t-xl bg-linear-to-r from-purple-700 to-indigo-700 shadow-md" />
+                <div className="absolute top-3 h-full w-3 bg-linear-to-b from-amber-400/60 to-amber-400/10" />
+                <div className="absolute top-6 h-3 w-full bg-linear-to-r from-amber-400/0 via-amber-400/60 to-amber-400/0" />
+                <motion.div
+                  animate={submitFlash ? { scale: [1, 1.3, 1] } : {}}
+                  transition={{ duration: 0.3 }}
+                >
+                  <Package size={40} className="relative z-10 text-purple-300/60" strokeWidth={1.5} />
+                </motion.div>
+                <motion.div
+                  className="absolute -right-2 -top-2 text-lg"
+                  animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
+                  transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
+                >
+                  ✨
+                </motion.div>
+              </div>
+            </motion.div>
+
+            <motion.p
+              className="mt-4 text-sm font-semibold text-muted"
+              key={poolCount}
+              initial={{ scale: 1.2, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+            >
+              盒子里已有{" "}
+              <span className="text-lg font-black text-purple-400">{poolCount}</span>{" "}
+              个想法
+            </motion.p>
+          </div>
+
+          {/* Pool / Shaking / Reveal phases */}
+          <AnimatePresence mode="wait">
+            {phase === "pool" && (
+              <motion.div
+                key="pool"
+                className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+              >
+                <div className="flex w-full gap-2">
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    placeholder="塞入一个疯狂的周末想法..."
+                    value={input}
+                    onChange={(e) => { setInput(e.target.value); setError(""); }}
+                    onKeyDown={(e) => { if (e.key === "Enter") handleSubmit(); }}
+                    maxLength={200}
+                    disabled={submitting}
+                    className="h-12 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600 disabled:opacity-50"
+                  />
+                  <button
+                    onClick={handleSubmit}
+                    disabled={!input.trim() || submitting}
+                    className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600 text-white transition-colors hover:bg-purple-500 disabled:opacity-30"
+                  >
+                    {submitting ? <Loader2 size={18} className="animate-spin" /> : <Send size={18} />}
+                  </button>
+                </div>
+
+                <motion.button
+                  onClick={handleDraw}
+                  disabled={poolCount === 0}
+                  className="relative flex h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-red-600 to-rose-500 text-base font-black text-white shadow-lg shadow-red-900/40 transition-shadow hover:shadow-xl hover:shadow-red-900/50 disabled:opacity-40 disabled:shadow-none"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.97 }}
+                >
+                  <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/10 to-transparent -translate-x-full animate-[shimmer_3s_infinite]" />
+                  <Flame size={20} />
+                  开启周末盲盒（绝不反悔）
+                </motion.button>
+
+                {error && (
+                  <motion.p
+                    className="text-center text-xs font-medium text-rose-400"
+                    initial={{ opacity: 0, y: -4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                  >
+                    {error}
+                  </motion.p>
+                )}
+              </motion.div>
+            )}
+
+            {phase === "shaking" && (
+              <motion.div
+                key="shaking"
+                className="mt-8 flex flex-col items-center gap-4"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+              >
+                <p className="text-sm font-bold text-purple-300 animate-pulse">
+                  命运正在决定...
+                </p>
+                <div className="flex gap-1">
+                  {[0, 1, 2].map((i) => (
+                    <motion.div
+                      key={i}
+                      className="h-2 w-2 rounded-full bg-purple-400"
+                      animate={{ y: [0, -8, 0] }}
+                      transition={{ duration: 0.6, repeat: Infinity, delay: i * 0.15 }}
+                    />
+                  ))}
+                </div>
+              </motion.div>
+            )}
+
+            {phase === "reveal" && revealedIdea && (
+              <motion.div
+                key="reveal"
+                className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ type: "spring", damping: 15, stiffness: 200 }}
+              >
+                <div className="relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-purple-900 via-indigo-900 to-purple-950 p-6 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-600/30">
+                  <div className="absolute left-3 top-3 h-6 w-6 border-l-2 border-t-2 border-purple-400/30 rounded-tl-sm" />
+                  <div className="absolute right-3 top-3 h-6 w-6 border-r-2 border-t-2 border-purple-400/30 rounded-tr-sm" />
+                  <div className="absolute bottom-3 left-3 h-6 w-6 border-b-2 border-l-2 border-purple-400/30 rounded-bl-sm" />
+                  <div className="absolute bottom-3 right-3 h-6 w-6 border-b-2 border-r-2 border-purple-400/30 rounded-br-sm" />
+
+                  <div className="relative z-10 text-center">
+                    <p className="text-xs font-bold tracking-[0.3em] text-purple-400/70">
+                      ✦ 周末契约 ✦
+                    </p>
+                    <motion.p
+                      className="mt-4 text-xl font-black leading-relaxed text-white"
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.3 }}
+                    >
+                      {revealedIdea.content}
+                    </motion.p>
+                    <div className="mx-auto mt-4 h-px w-16 bg-linear-to-r from-transparent via-purple-400/50 to-transparent" />
+
+                    {/* Attribution */}
+                    <div className="mt-3 flex items-center justify-center gap-2 text-[11px] text-purple-400/50">
+                      {revealedIdea.user && (
+                        <span>
+                          {revealedIdea.user.avatar} {revealedIdea.user.username} 投入
+                        </span>
+                      )}
+                      {revealedIdea.drawnBy && (
+                        <>
+                          <span>·</span>
+                          <span>
+                            {revealedIdea.drawnBy.avatar} {revealedIdea.drawnBy.username} 抽中
+                          </span>
+                        </>
+                      )}
+                    </div>
+
+                    <p className="mt-2 text-[10px] font-medium text-purple-400/40">
+                      此契约一旦开启，绝不反悔
+                    </p>
+                  </div>
+                </div>
+
+                <motion.button
+                  onClick={() => { setPhase("pool"); setRevealedIdea(null); }}
+                  className="flex h-10 items-center gap-2 rounded-full bg-surface px-5 text-xs font-semibold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
+                  whileTap={{ scale: 0.96 }}
+                >
+                  继续投入想法
+                </motion.button>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* History */}
+          {drawnHistory.length > 0 && phase !== "shaking" && (
+            <motion.div
+              className="mt-10 w-full max-w-sm"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.3 }}
+            >
+              <div className="mb-3 flex items-center gap-2">
+                <Trophy size={13} className="text-amber-400" />
+                <h3 className="text-xs font-bold tracking-wider text-muted">
+                  履约记录
+                </h3>
+                <div className="h-px flex-1 bg-border" />
+              </div>
+              <div className="flex flex-col gap-2">
+                {drawnHistory.map((item, i) => (
+                  <motion.div
+                    key={item.id}
+                    className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: i * 0.06 }}
+                  >
+                    <span className="mt-0.5 text-sm">🏆</span>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium text-gray-300">
+                        {item.content}
+                      </p>
+                      <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
+                        {item.user && (
+                          <span>{item.user.avatar} {item.user.username} 投入</span>
+                        )}
+                        {item.drawnBy && (
+                          <>
+                            <span>·</span>
+                            <span>{item.drawnBy.avatar} {item.drawnBy.username} 抽中</span>
+                          </>
+                        )}
+                        <span>·</span>
+                        <span>
+                          {new Date(item.createdAt).toLocaleDateString("zh-CN", {
+                            month: "short",
+                            day: "numeric",
+                            weekday: "short",
+                          })}
+                        </span>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </>
+      )}
+
+      {/* Toast */}
+      <AnimatePresence>
+        {toast && (
+          <motion.div
+            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-gray-300 shadow-xl ring-1 ring-border"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
+          >
+            {toast}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="h-8 shrink-0" />
+    </div>
+  );
+}
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
new file mode 100644
index 0000000..824335f
--- /dev/null
+++ b/src/app/blindbox/page.tsx
@@ -0,0 +1,453 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  ArrowLeft,
+  Package,
+  Plus,
+  LogIn,
+  Users,
+  Sparkles,
+  Loader2,
+  ChevronRight,
+} from "lucide-react";
+import { getCachedProfile, isRegistered } from "@/lib/userId";
+import AuthModal from "@/components/AuthModal";
+import type { UserProfile } from "@/types";
+
+interface RoomSummary {
+  id: string;
+  code: string;
+  name: string;
+  memberCount: number;
+  poolCount: number;
+  members: { id: string; username: string; avatar: string }[];
+  lastDrawn: { content: string; createdAt: string } | null;
+}
+
+export default function BlindboxLobbyPage() {
+  const router = useRouter();
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [showAuth, setShowAuth] = useState(false);
+  const [rooms, setRooms] = useState<RoomSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const [createName, setCreateName] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [joinCode, setJoinCode] = useState("");
+  const [joining, setJoining] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const registered = isRegistered();
+    setLoggedIn(registered);
+    if (registered) {
+      setProfile(getCachedProfile());
+    }
+  }, []);
+
+  const fetchRooms = useCallback(async () => {
+    const p = getCachedProfile();
+    if (!p) return;
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/blindbox/rooms?userId=${p.id}`);
+      const data = await res.json();
+      setRooms(data.rooms ?? []);
+    } catch {
+      /* ignore */
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (loggedIn) fetchRooms();
+    else setLoading(false);
+  }, [loggedIn, fetchRooms]);
+
+  const handleAuth = (p: UserProfile) => {
+    setProfile(p);
+    setLoggedIn(true);
+    setShowAuth(false);
+  };
+
+  const handleCreate = async () => {
+    if (creating || !profile) return;
+    setCreating(true);
+    setError("");
+    try {
+      const res = await fetch("/api/blindbox/room", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: profile.id, name: createName.trim() || undefined }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      router.push(`/blindbox/${data.code}`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "创建失败");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleJoin = async () => {
+    if (joining || !profile || !joinCode.trim()) return;
+    setJoining(true);
+    setError("");
+    try {
+      const res = await fetch("/api/blindbox/room/join", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: profile.id, code: joinCode.trim() }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      router.push(`/blindbox/${data.code}`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "加入失败");
+    } finally {
+      setJoining(false);
+    }
+  };
+
+  return (
+    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
+      {/* Ambient */}
+      <div className="pointer-events-none fixed left-1/3 top-0 h-80 w-80 -translate-y-1/3 rounded-full bg-purple-600/8 blur-3xl" />
+      <div className="pointer-events-none fixed right-0 top-1/2 h-60 w-60 rounded-full bg-indigo-500/5 blur-3xl" />
+
+      {/* Header */}
+      <div className="flex w-full max-w-sm items-center gap-3">
+        <button
+          onClick={() => router.push("/")}
+          className="flex h-8 w-8 items-center justify-center rounded-full bg-surface ring-1 ring-border transition-colors active:bg-elevated"
+        >
+          <ArrowLeft size={16} className="text-muted" />
+        </button>
+        <div className="flex-1">
+          <h1 className="text-lg font-black text-white">🎁 周末契约</h1>
+          <p className="text-[10px] font-medium tracking-wider text-purple-400/60">
+            ADVENTURE ROULETTE
+          </p>
+        </div>
+        {profile && (
+          <div className="flex items-center gap-2 rounded-full bg-surface px-3 py-1.5 ring-1 ring-border">
+            <span className="text-sm">{profile.avatar}</span>
+            <span className="text-xs font-semibold text-gray-300">{profile.username}</span>
+          </div>
+        )}
+      </div>
+
+      <AnimatePresence mode="wait">
+        {!loggedIn ? (
+          /* ============ Layer 1: Unauthenticated — Feature intro ============ */
+          <motion.div
+            key="intro"
+            className="mt-10 flex flex-1 flex-col items-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+          >
+            {/* Hero icon */}
+            <motion.div
+              className="relative flex h-28 w-28 items-center justify-center"
+              animate={{ y: [0, -6, 0] }}
+              transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
+            >
+              <div className="absolute inset-0 rounded-3xl bg-purple-600/20 blur-xl" />
+              <div className="relative flex h-24 w-24 items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl ring-1 ring-purple-700/30">
+                <Package size={36} className="text-purple-300/70" strokeWidth={1.5} />
+              </div>
+              <motion.span
+                className="absolute -right-1 -top-1 text-lg"
+                animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
+                transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
+              >
+                ✨
+              </motion.span>
+            </motion.div>
+
+            <h2 className="mt-6 text-xl font-black text-white">
+              和 TA 一起，拆开周末
+            </h2>
+            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-gray-400">
+              平日蓄水，周末开奖。把所有"想做但一直没做"的事，
+              交给命运来决定。
+            </p>
+
+            {/* Steps */}
+            <div className="mt-8 flex w-full max-w-xs flex-col gap-4">
+              {[
+                { step: "1", icon: Plus, text: "创建专属房间，邀请 TA 加入" },
+                { step: "2", icon: Package, text: "平时随时塞入疯狂想法" },
+                { step: "3", icon: Sparkles, text: "周末一起盲抽，绝不反悔" },
+              ].map((s) => (
+                <div key={s.step} className="flex items-center gap-3">
+                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-purple-600/15 text-sm font-black text-purple-400 ring-1 ring-purple-500/20">
+                    {s.step}
+                  </div>
+                  <p className="text-sm font-medium text-gray-300">{s.text}</p>
+                </div>
+              ))}
+            </div>
+
+            {/* CTA */}
+            <motion.button
+              onClick={() => setShowAuth(true)}
+              className="mt-10 flex h-12 w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-linear-to-r from-purple-600 to-indigo-600 text-sm font-bold text-white shadow-lg shadow-purple-900/40 transition-shadow hover:shadow-xl hover:shadow-purple-900/50"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.97 }}
+            >
+              <LogIn size={18} />
+              登录 / 注册，开始你的第一个盲盒
+            </motion.button>
+
+            <p className="mt-3 text-[11px] text-dim">
+              仅需用户名 + 密码，10 秒注册
+            </p>
+          </motion.div>
+        ) : loading ? (
+          /* ============ Loading ============ */
+          <motion.div
+            key="loading"
+            className="mt-20 flex flex-col items-center gap-3"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+          >
+            <Loader2 size={24} className="animate-spin text-purple-400" />
+            <p className="text-xs text-muted">加载中...</p>
+          </motion.div>
+        ) : rooms.length === 0 ? (
+          /* ============ Layer 2: Logged in, no rooms — Create first ============ */
+          <motion.div
+            key="empty"
+            className="mt-10 flex flex-1 flex-col items-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+          >
+            <motion.div
+              className="relative flex h-20 w-20 items-center justify-center"
+              animate={{ y: [0, -4, 0] }}
+              transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
+            >
+              <div className="absolute inset-0 rounded-2xl bg-purple-600/15 blur-lg" />
+              <Package size={32} className="relative text-purple-400/60" strokeWidth={1.5} />
+            </motion.div>
+
+            <h2 className="mt-5 text-lg font-bold text-white">还没有盲盒房间</h2>
+            <p className="mt-1.5 text-sm text-gray-400">
+              创建第一个房间，邀请 TA 一起玩
+            </p>
+
+            {/* Inline create form */}
+            <div className="mt-7 w-full max-w-xs">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  placeholder="我们的周末"
+                  value={createName}
+                  onChange={(e) => {
+                    setCreateName(e.target.value.slice(0, 30));
+                    setError("");
+                  }}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); }}
+                  maxLength={30}
+                  className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+                />
+                <button
+                  onClick={handleCreate}
+                  disabled={creating}
+                  className="flex h-11 items-center gap-1.5 rounded-xl bg-purple-600 px-4 text-sm font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+                >
+                  {creating ? <Loader2 size={16} className="animate-spin" /> : <Plus size={16} />}
+                  创建
+                </button>
+              </div>
+
+              {/* Join alternative */}
+              <div className="mt-5 flex items-center gap-3">
+                <div className="h-px flex-1 bg-border" />
+                <span className="text-[10px] font-medium text-dim">或输入房间号加入</span>
+                <div className="h-px flex-1 bg-border" />
+              </div>
+
+              <div className="mt-3 flex gap-2">
+                <input
+                  type="text"
+                  placeholder="6 位房间号"
+                  value={joinCode}
+                  onChange={(e) => {
+                    setJoinCode(e.target.value.toUpperCase().slice(0, 6));
+                    setError("");
+                  }}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleJoin(); }}
+                  maxLength={6}
+                  className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+                />
+                <button
+                  onClick={handleJoin}
+                  disabled={joining || joinCode.trim().length < 6}
+                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                >
+                  {joining ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
+                  加入
+                </button>
+              </div>
+
+              {error && (
+                <motion.p
+                  className="mt-3 text-center text-xs font-medium text-rose-400"
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                >
+                  {error}
+                </motion.p>
+              )}
+            </div>
+          </motion.div>
+        ) : (
+          /* ============ Layer 3: Logged in, has rooms — Room list ============ */
+          <motion.div
+            key="rooms"
+            className="mt-6 flex w-full max-w-sm flex-1 flex-col"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+          >
+            {/* Create row */}
+            <div className="flex gap-2">
+              <input
+                type="text"
+                placeholder="新房间名称"
+                value={createName}
+                onChange={(e) => {
+                  setCreateName(e.target.value.slice(0, 30));
+                  setError("");
+                }}
+                onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); }}
+                maxLength={30}
+                className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+              />
+              <button
+                onClick={handleCreate}
+                disabled={creating}
+                className="flex h-10 items-center gap-1.5 rounded-xl bg-purple-600 px-4 text-xs font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+              >
+                {creating ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />}
+                创建
+              </button>
+            </div>
+
+            {/* Join row */}
+            <div className="mt-2 flex gap-2">
+              <input
+                type="text"
+                placeholder="输入 6 位房间号加入"
+                value={joinCode}
+                onChange={(e) => {
+                  setJoinCode(e.target.value.toUpperCase().slice(0, 6));
+                  setError("");
+                }}
+                onKeyDown={(e) => { if (e.key === "Enter") handleJoin(); }}
+                maxLength={6}
+                className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:font-sans placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+              />
+              <button
+                onClick={handleJoin}
+                disabled={joining || joinCode.trim().length < 6}
+                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+              >
+                {joining ? <Loader2 size={14} className="animate-spin" /> : <LogIn size={14} />}
+                加入
+              </button>
+            </div>
+
+            {error && (
+              <motion.p
+                className="mt-2 text-center text-xs font-medium text-rose-400"
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+              >
+                {error}
+              </motion.p>
+            )}
+
+            {/* Room list */}
+            <div className="mt-5 flex flex-col gap-3">
+              {rooms.map((room, i) => (
+                <motion.button
+                  key={room.id}
+                  onClick={() => router.push(`/blindbox/${room.code}`)}
+                  className="group flex w-full items-center gap-3 rounded-2xl bg-surface p-4 text-left ring-1 ring-border transition-all hover:bg-elevated hover:ring-purple-500/30"
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: i * 0.06 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  {/* Icon */}
+                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-purple-600/15 ring-1 ring-purple-500/20">
+                    <Package size={20} className="text-purple-400" strokeWidth={1.5} />
+                  </div>
+
+                  {/* Info */}
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-bold text-white">{room.name}</p>
+                    <div className="mt-1 flex items-center gap-3 text-[11px] text-muted">
+                      <span className="flex items-center gap-1">
+                        <Users size={11} />
+                        {room.memberCount}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Package size={11} />
+                        {room.poolCount} 待抽
+                      </span>
+                    </div>
+                    {room.lastDrawn && (
+                      <p className="mt-1 truncate text-[11px] text-purple-400/60">
+                        最近抽中：{room.lastDrawn.content}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Members preview */}
+                  <div className="flex shrink-0 -space-x-1.5">
+                    {room.members.slice(0, 3).map((m) => (
+                      <div
+                        key={m.id}
+                        className="flex h-7 w-7 items-center justify-center rounded-full bg-elevated text-xs ring-2 ring-surface"
+                        title={m.username}
+                      >
+                        {m.avatar}
+                      </div>
+                    ))}
+                    {room.memberCount > 3 && (
+                      <div className="flex h-7 w-7 items-center justify-center rounded-full bg-elevated text-[10px] font-bold text-muted ring-2 ring-surface">
+                        +{room.memberCount - 3}
+                      </div>
+                    )}
+                  </div>
+
+                  <ChevronRight size={16} className="shrink-0 text-muted/50 transition-colors group-hover:text-purple-400" />
+                </motion.button>
+              ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Auth Modal */}
+      <AuthModal
+        open={showAuth}
+        onClose={() => setShowAuth(false)}
+        onAuth={handleAuth}
+        defaultTab="register"
+      />
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d7076d..eff6e0b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,115 +1,87 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
-import { Zap, Gift, Clock, Trophy } from "lucide-react";
+import { Zap, Gift, Clock, ChevronRight } from "lucide-react";
 import BrandLogo from "@/components/BrandLogo";
 
-function generateRoomCode() {
-  return Math.random().toString(36).substring(2, 8).toUpperCase();
-}
-
-interface DrawnIdea {
-  id: string;
-  content: string;
-  createdAt: string;
-}
-
 export default function LandingPage() {
   const router = useRouter();
-  const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
-  const [blindboxRoom, setBlindboxRoom] = useState("");
-
-  useEffect(() => {
-    const saved = localStorage.getItem("nw_blindbox_room");
-    if (saved) {
-      setBlindboxRoom(saved);
-      fetch(`/api/blindbox?roomId=${saved}`)
-        .then((r) => r.json())
-        .then((data) => {
-          if (data.drawn) setDrawnHistory(data.drawn);
-        })
-        .catch(() => {});
-    }
-  }, []);
-
-  const handlePanicMode = () => {
-    router.push("/panic");
-  };
-
-  const handleAdventureMode = () => {
-    let room = blindboxRoom;
-    if (!room) {
-      room = generateRoomCode();
-      localStorage.setItem("nw_blindbox_room", room);
-      setBlindboxRoom(room);
-    }
-    router.push(`/room/${room}/blindbox`);
-  };
 
   return (
-    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-8 overflow-y-auto scrollbar-none">
+    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-10 overflow-y-auto scrollbar-none">
+      {/* Ambient glow */}
+      <div className="pointer-events-none fixed left-1/2 top-0 -translate-x-1/2 -translate-y-1/3 h-[420px] w-[420px] rounded-full bg-orange-500/8 blur-3xl" />
+      <div className="pointer-events-none fixed left-1/4 top-1/2 h-[300px] w-[300px] rounded-full bg-purple-500/5 blur-3xl" />
+
       {/* Header */}
       <motion.div
-        className="flex items-center gap-3"
+        className="flex flex-col items-center gap-4"
         initial={{ y: -30, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.6, ease: "easeOut" }}
       >
-        <BrandLogo size={40} />
-        <div>
-          <h1 className="text-xl font-black tracking-tight text-white">
+        <BrandLogo size={48} />
+        <div className="text-center">
+          <h1 className="text-2xl font-black tracking-tight text-white">
             NoWhatever
           </h1>
-          <p className="text-[10px] font-medium tracking-[0.2em] text-muted">
+          <p className="mt-1 text-[11px] font-medium tracking-[0.2em] text-gray-500">
             别说随便 · 亲密关系决策引擎
           </p>
         </div>
       </motion.div>
 
       <motion.p
-        className="mt-3 max-w-xs text-center text-xs leading-relaxed text-muted"
+        className="mt-4 max-w-68 text-center text-sm leading-relaxed text-gray-400"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.2 }}
       >
-        别再说"随便"了。两个模式，覆盖你们所有的选择困难症。
+        别再说"随便"了。
+        <br />
+        两个模式，覆盖你们所有的选择困难症。
       </motion.p>
 
       {/* Dual Cards */}
-      <div className="mt-8 flex w-full max-w-sm flex-col gap-5">
+      <div className="mt-9 flex w-full max-w-sm flex-col gap-4">
         {/* Card A: Panic Mode */}
         <motion.button
-          onClick={handlePanicMode}
-          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-yellow-400 to-orange-500 p-6 text-left shadow-lg shadow-orange-500/20 transition-shadow hover:shadow-xl hover:shadow-orange-500/30"
+          onClick={() => router.push("/panic")}
+          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-yellow-400 to-orange-500 p-5 pb-4 text-left shadow-xl shadow-orange-500/25 ring-1 ring-white/15 transition-shadow hover:shadow-2xl hover:shadow-orange-500/35"
           initial={{ x: -40, opacity: 0 }}
           animate={{ x: 0, opacity: 1 }}
           transition={{ duration: 0.5, delay: 0.3 }}
           whileHover={{ scale: 1.02, rotate: -0.5 }}
-          whileTap={{ scale: 0.98 }}
+          whileTap={{ scale: 0.97 }}
         >
-          <div className="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-white/10 blur-2xl" />
-          <div className="absolute -bottom-6 -left-6 h-20 w-20 rounded-full bg-white/10 blur-xl" />
+          <div className="absolute -right-4 -top-4 h-28 w-28 rounded-full bg-white/15 blur-2xl" />
+          <div className="absolute -bottom-6 -left-6 h-20 w-20 rounded-full bg-yellow-300/20 blur-xl" />
 
           <div className="relative z-10">
             <div className="flex items-center gap-2.5">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-black/10">
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-black/15 ring-1 ring-white/10">
                 <Zap size={22} className="text-white" />
               </div>
-              <div>
+              <div className="flex-1">
                 <h2 className="text-lg font-black text-white">⚡️ 极速救场</h2>
-                <p className="text-[10px] font-semibold tracking-wider text-white/70">
+                <p className="text-[10px] font-semibold tracking-wider text-white/60">
                   PANIC MODE
                 </p>
               </div>
             </div>
-            <p className="mt-4 text-sm font-medium leading-relaxed text-white/90">
+            <p className="mt-3.5 text-sm font-medium leading-relaxed text-white/90">
               10秒内出结果，立刻闭嘴，听天由命
             </p>
-            <div className="mt-3 flex items-center gap-1.5 text-xs font-bold text-white/60">
-              <Clock size={12} />
-              <span>即时决策 · 转盘匹配</span>
+            <div className="mt-3 flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-xs font-bold text-white/50">
+                <Clock size={12} />
+                <span>即时决策 · 转盘匹配</span>
+              </div>
+              <div className="flex items-center gap-0.5 text-xs font-semibold text-white/40 transition-colors group-hover:text-white/70">
+                进入
+                <ChevronRight size={14} />
+              </div>
             </div>
           </div>
 
@@ -124,93 +96,56 @@ export default function LandingPage() {
 
         {/* Card B: Adventure Roulette */}
         <motion.button
-          onClick={handleAdventureMode}
-          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-indigo-900 to-purple-800 p-6 text-left shadow-lg shadow-purple-900/30 transition-shadow hover:shadow-xl hover:shadow-purple-500/30"
+          onClick={() => router.push("/blindbox")}
+          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-indigo-900 to-purple-800 p-5 pb-4 text-left shadow-xl shadow-purple-600/20 ring-1 ring-purple-400/15 transition-shadow hover:shadow-2xl hover:shadow-purple-500/30"
           initial={{ x: 40, opacity: 0 }}
           animate={{ x: 0, opacity: 1 }}
           transition={{ duration: 0.5, delay: 0.4 }}
           whileHover={{ scale: 1.02, rotate: 0.5 }}
-          whileTap={{ scale: 0.98 }}
+          whileTap={{ scale: 0.97 }}
         >
-          <div className="absolute -right-6 -top-6 h-28 w-28 rounded-full bg-purple-500/20 blur-2xl transition-all group-hover:bg-purple-400/30 group-hover:blur-3xl" />
-          <div className="absolute -bottom-4 -left-4 h-20 w-20 rounded-full bg-indigo-400/15 blur-xl transition-all group-hover:bg-indigo-300/25" />
+          <div className="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-purple-500/20 blur-2xl transition-all group-hover:bg-purple-400/30 group-hover:blur-3xl" />
+          <div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-indigo-400/15 blur-xl transition-all group-hover:bg-indigo-300/25" />
 
           <div className="relative z-10">
             <div className="flex items-center gap-2.5">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10">
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 ring-1 ring-purple-300/15">
                 <Gift size={22} className="text-purple-200" />
               </div>
-              <div>
+              <div className="flex-1">
                 <h2 className="text-lg font-black text-white drop-shadow-[0_0_12px_rgba(192,132,252,0.5)]">
                   🎁 周末契约
                 </h2>
-                <p className="text-[10px] font-semibold tracking-wider text-purple-300/70">
+                <p className="text-[10px] font-semibold tracking-wider text-purple-300/60">
                   ADVENTURE ROULETTE
                 </p>
               </div>
             </div>
-            <p className="mt-4 text-sm font-medium leading-relaxed text-purple-100/90">
+            <p className="mt-3.5 text-sm font-medium leading-relaxed text-purple-100/90">
               丢入疯狂想法，周末盲盒开奖，绝不反悔
             </p>
-            <div className="mt-3 flex items-center gap-1.5 text-xs font-bold text-purple-300/60">
-              <Gift size={12} />
-              <span>盲盒蓄水 · 仪式开奖</span>
+            <div className="mt-3 flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-xs font-bold text-purple-300/50">
+                <Gift size={12} />
+                <span>盲盒蓄水 · 仪式开奖</span>
+              </div>
+              <div className="flex items-center gap-0.5 text-xs font-semibold text-purple-200/40 transition-colors group-hover:text-purple-200/70">
+                进入
+                <ChevronRight size={14} />
+              </div>
             </div>
           </div>
         </motion.button>
       </div>
 
-      {/* Trophy Wall */}
-      {drawnHistory.length > 0 && (
-        <motion.div
-          className="mt-10 w-full max-w-sm"
-          initial={{ y: 30, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 0.6 }}
-        >
-          <div className="mb-3 flex items-center gap-2">
-            <Trophy size={14} className="text-amber-400" />
-            <h3 className="text-xs font-bold tracking-wider text-muted">
-              契约画廊
-            </h3>
-            <div className="h-px flex-1 bg-border" />
-          </div>
-          <div className="flex flex-col gap-2">
-            {drawnHistory.map((item, i) => (
-              <motion.div
-                key={item.id}
-                className="flex items-start gap-3 rounded-xl bg-surface/80 px-4 py-3 ring-1 ring-border"
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: 0.7 + i * 0.08 }}
-              >
-                <span className="mt-0.5 text-base">🏆</span>
-                <div className="min-w-0 flex-1">
-                  <p className="text-sm font-semibold text-foreground">
-                    {item.content}
-                  </p>
-                  <p className="mt-0.5 text-[10px] text-dim">
-                    {new Date(item.createdAt).toLocaleDateString("zh-CN", {
-                      month: "short",
-                      day: "numeric",
-                      weekday: "short",
-                    })}
-                  </p>
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        </motion.div>
-      )}
-
       {/* Footer */}
       <motion.p
-        className="mt-auto pt-8 text-center text-[10px] text-dim"
+        className="mt-auto pt-10 text-center text-[10px] font-medium tracking-widest text-muted"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.8 }}
       >
-        NoWhatever — 拒绝"随便"，从今天开始
+        NOWHATEVER — 拒绝随便，从今天开始
       </motion.p>
     </div>
   );
diff --git a/src/app/room/[id]/blindbox/page.tsx b/src/app/room/[id]/blindbox/page.tsx
deleted file mode 100644
index 3a4da1e..0000000
--- a/src/app/room/[id]/blindbox/page.tsx
+++ /dev/null
@@ -1,409 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from "react";
-import { useParams, useRouter } from "next/navigation";
-import { motion, AnimatePresence, useAnimation } from "framer-motion";
-import { ArrowLeft, Send, Loader2, Package, Flame, Trophy } from "lucide-react";
-import confetti from "canvas-confetti";
-
-interface DrawnIdea {
-  id: string;
-  content: string;
-  createdAt: string;
-}
-
-type Phase = "pool" | "shaking" | "reveal";
-
-export default function BlindBoxPage() {
-  const params = useParams<{ id: string }>();
-  const router = useRouter();
-  const roomId = params.id;
-
-  const [input, setInput] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-  const [poolCount, setPoolCount] = useState(0);
-  const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
-  const [phase, setPhase] = useState<Phase>("pool");
-  const [revealedIdea, setRevealedIdea] = useState<DrawnIdea | null>(null);
-  const [submitFlash, setSubmitFlash] = useState(false);
-  const [error, setError] = useState("");
-  const boxControls = useAnimation();
-  const confettiCanvasRef = useRef<HTMLCanvasElement>(null);
-
-  const fetchData = useCallback(async () => {
-    try {
-      const res = await fetch(`/api/blindbox?roomId=${roomId}`);
-      const data = await res.json();
-      setPoolCount(data.poolCount ?? 0);
-      setDrawnHistory(data.drawn ?? []);
-    } catch {}
-  }, [roomId]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  const handleSubmit = async () => {
-    const text = input.trim();
-    if (!text || submitting) return;
-    setSubmitting(true);
-    setError("");
-    try {
-      const res = await fetch("/api/blindbox", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ roomId, content: text }),
-      });
-      if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.error || "提交失败");
-      }
-      setInput("");
-      setPoolCount((c) => c + 1);
-      setSubmitFlash(true);
-      setTimeout(() => setSubmitFlash(false), 600);
-      boxControls.start({
-        scale: [1, 1.08, 1],
-        rotate: [0, -3, 3, 0],
-        transition: { duration: 0.5 },
-      });
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "提交失败");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDraw = async () => {
-    if (poolCount === 0) {
-      setError("盒子是空的，先往里面塞点想法吧！");
-      return;
-    }
-
-    setPhase("shaking");
-    setError("");
-
-    await boxControls.start({
-      rotate: [0, -8, 8, -10, 10, -12, 12, -8, 8, -4, 4, 0],
-      scale: [1, 1.05, 0.95, 1.08, 0.92, 1.1, 0.9, 1.05, 0.95, 1],
-      transition: { duration: 2.5, ease: "easeInOut" },
-    });
-
-    try {
-      const res = await fetch("/api/blindbox/draw", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ roomId }),
-      });
-
-      if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.error || "抽取失败");
-      }
-
-      const idea = await res.json();
-      setRevealedIdea(idea);
-      setPhase("reveal");
-      setPoolCount((c) => Math.max(0, c - 1));
-      setDrawnHistory((prev) => [idea, ...prev]);
-
-      fireConfetti();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "抽取失败");
-      setPhase("pool");
-    }
-  };
-
-  const fireConfetti = () => {
-    const colors = ["#a855f7", "#6366f1", "#ec4899", "#f59e0b", "#10b981"];
-
-    confetti({
-      particleCount: 100,
-      spread: 120,
-      origin: { y: 0.4 },
-      colors,
-      startVelocity: 45,
-      ticks: 250,
-    });
-
-    const end = Date.now() + 3000;
-    const frame = () => {
-      if (Date.now() > end) return;
-      confetti({
-        particleCount: 3,
-        angle: 60,
-        spread: 55,
-        origin: { x: 0, y: 0.6 },
-        colors,
-        startVelocity: 35,
-        ticks: 150,
-      });
-      confetti({
-        particleCount: 3,
-        angle: 120,
-        spread: 55,
-        origin: { x: 1, y: 0.6 },
-        colors,
-        startVelocity: 35,
-        ticks: 150,
-      });
-      requestAnimationFrame(frame);
-    };
-    setTimeout(frame, 200);
-  };
-
-  const resetToPool = () => {
-    setPhase("pool");
-    setRevealedIdea(null);
-  };
-
-  return (
-    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
-      <canvas
-        ref={confettiCanvasRef}
-        className="pointer-events-none fixed inset-0 z-50"
-      />
-
-      {/* Header */}
-      <div className="flex w-full max-w-sm items-center justify-between">
-        <button
-          onClick={() => router.push("/")}
-          className="flex h-8 items-center gap-1 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
-        >
-          <ArrowLeft size={14} />
-          返回
-        </button>
-        <div className="text-right">
-          <p className="text-xs font-bold text-purple-300/80">周末契约</p>
-          <p className="text-[10px] text-dim">房间 {roomId}</p>
-        </div>
-      </div>
-
-      {/* Blind Box Visual */}
-      <div className="mt-10 flex flex-col items-center">
-        <motion.div
-          animate={boxControls}
-          className="relative flex h-36 w-36 items-center justify-center"
-        >
-          <div className="absolute inset-0 rounded-3xl bg-linear-to-br from-purple-600/20 to-indigo-600/20 blur-xl" />
-
-          <div className="relative flex h-32 w-32 flex-col items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-700/30">
-            <div className="absolute -top-2 left-1/2 h-5 w-[90%] -translate-x-1/2 rounded-t-xl bg-linear-to-r from-purple-700 to-indigo-700 shadow-md" />
-            <div className="absolute top-3 h-full w-3 bg-linear-to-b from-amber-400/60 to-amber-400/10" />
-            <div className="absolute top-6 h-3 w-full bg-linear-to-r from-amber-400/0 via-amber-400/60 to-amber-400/0" />
-
-            <motion.div
-              animate={submitFlash ? { scale: [1, 1.3, 1] } : {}}
-              transition={{ duration: 0.3 }}
-            >
-              <Package
-                size={40}
-                className="relative z-10 text-purple-300/60"
-                strokeWidth={1.5}
-              />
-            </motion.div>
-
-            <motion.div
-              className="absolute -right-2 -top-2 text-lg"
-              animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
-              transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
-            >
-              ✨
-            </motion.div>
-          </div>
-        </motion.div>
-
-        <motion.p
-          className="mt-4 text-sm font-semibold text-muted"
-          key={poolCount}
-          initial={{ scale: 1.2, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-        >
-          盒子里已有{" "}
-          <span className="text-lg font-black text-purple-400">{poolCount}</span>{" "}
-          个想法
-        </motion.p>
-      </div>
-
-      {/* Pool Phase: Input + Draw */}
-      <AnimatePresence mode="wait">
-        {phase === "pool" && (
-          <motion.div
-            key="pool"
-            className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-          >
-            <div className="flex w-full gap-2">
-              <input
-                type="text"
-                placeholder="丢入一个疯狂的周末想法..."
-                value={input}
-                onChange={(e) => {
-                  setInput(e.target.value);
-                  setError("");
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleSubmit();
-                }}
-                maxLength={200}
-                disabled={submitting}
-                className="h-12 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600 disabled:opacity-50"
-              />
-              <button
-                onClick={handleSubmit}
-                disabled={!input.trim() || submitting}
-                className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600 text-white transition-colors hover:bg-purple-500 disabled:opacity-30"
-              >
-                {submitting ? (
-                  <Loader2 size={18} className="animate-spin" />
-                ) : (
-                  <Send size={18} />
-                )}
-              </button>
-            </div>
-
-            <motion.button
-              onClick={handleDraw}
-              disabled={poolCount === 0}
-              className="relative flex h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-red-600 to-rose-500 text-base font-black text-white shadow-lg shadow-red-900/40 transition-shadow hover:shadow-xl hover:shadow-red-900/50 disabled:opacity-40 disabled:shadow-none"
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.97 }}
-            >
-              <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/10 to-transparent -translate-x-full animate-[shimmer_3s_infinite]" />
-              <Flame size={20} />
-              开启周末盲盒（绝不反悔）
-            </motion.button>
-
-            {error && (
-              <motion.p
-                className="text-center text-xs font-medium text-rose-400"
-                initial={{ opacity: 0, y: -4 }}
-                animate={{ opacity: 1, y: 0 }}
-              >
-                {error}
-              </motion.p>
-            )}
-          </motion.div>
-        )}
-
-        {phase === "shaking" && (
-          <motion.div
-            key="shaking"
-            className="mt-8 flex flex-col items-center gap-4"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          >
-            <p className="text-sm font-bold text-purple-300 animate-pulse">
-              命运正在决定...
-            </p>
-            <div className="flex gap-1">
-              {[0, 1, 2].map((i) => (
-                <motion.div
-                  key={i}
-                  className="h-2 w-2 rounded-full bg-purple-400"
-                  animate={{ y: [0, -8, 0] }}
-                  transition={{
-                    duration: 0.6,
-                    repeat: Infinity,
-                    delay: i * 0.15,
-                  }}
-                />
-              ))}
-            </div>
-          </motion.div>
-        )}
-
-        {phase === "reveal" && revealedIdea && (
-          <motion.div
-            key="reveal"
-            className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ type: "spring", damping: 15, stiffness: 200 }}
-          >
-            <div className="relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-purple-900 via-indigo-900 to-purple-950 p-6 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-600/30">
-              <div className="absolute left-3 top-3 h-6 w-6 border-l-2 border-t-2 border-purple-400/30 rounded-tl-sm" />
-              <div className="absolute right-3 top-3 h-6 w-6 border-r-2 border-t-2 border-purple-400/30 rounded-tr-sm" />
-              <div className="absolute bottom-3 left-3 h-6 w-6 border-b-2 border-l-2 border-purple-400/30 rounded-bl-sm" />
-              <div className="absolute bottom-3 right-3 h-6 w-6 border-b-2 border-r-2 border-purple-400/30 rounded-br-sm" />
-
-              <div className="relative z-10 text-center">
-                <p className="text-xs font-bold tracking-[0.3em] text-purple-400/70">
-                  ✦ 周末契约 ✦
-                </p>
-                <motion.p
-                  className="mt-4 text-xl font-black leading-relaxed text-white"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.3 }}
-                >
-                  {revealedIdea.content}
-                </motion.p>
-                <div className="mx-auto mt-4 h-px w-16 bg-linear-to-r from-transparent via-purple-400/50 to-transparent" />
-                <p className="mt-3 text-[10px] font-medium text-purple-400/50">
-                  此契约一旦开启，绝不反悔
-                </p>
-              </div>
-            </div>
-
-            <motion.button
-              onClick={resetToPool}
-              className="flex h-10 items-center gap-2 rounded-full bg-surface px-5 text-xs font-semibold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
-              whileTap={{ scale: 0.96 }}
-            >
-              继续投入想法
-            </motion.button>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* History */}
-      {drawnHistory.length > 0 && phase !== "shaking" && (
-        <motion.div
-          className="mt-10 w-full max-w-sm"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.3 }}
-        >
-          <div className="mb-3 flex items-center gap-2">
-            <Trophy size={13} className="text-amber-400" />
-            <h3 className="text-xs font-bold tracking-wider text-muted">
-              履约记录
-            </h3>
-            <div className="h-px flex-1 bg-border" />
-          </div>
-          <div className="flex flex-col gap-2">
-            {drawnHistory.map((item, i) => (
-              <motion.div
-                key={item.id}
-                className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: i * 0.06 }}
-              >
-                <span className="mt-0.5 text-sm">🏆</span>
-                <div className="min-w-0 flex-1">
-                  <p className="text-sm font-medium text-gray-300">
-                    {item.content}
-                  </p>
-                  <p className="mt-0.5 text-[10px] text-dim">
-                    {new Date(item.createdAt).toLocaleDateString("zh-CN", {
-                      month: "short",
-                      day: "numeric",
-                      weekday: "short",
-                    })}
-                  </p>
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        </motion.div>
-      )}
-
-      <div className="h-8 shrink-0" />
-    </div>
-  );
-}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 3bcaf1b..2201d2b 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -13,11 +13,12 @@ interface AuthModalProps {
   open: boolean;
   onClose: () => void;
   onAuth: (profile: UserProfile) => void;
+  defaultTab?: Tab;
 }
 
-export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
+export default function AuthModal({ open, onClose, onAuth, defaultTab = "login" }: AuthModalProps) {
   const backdropRef = useRef<HTMLDivElement>(null);
-  const [tab, setTab] = useState<Tab>("login");
+  const [tab, setTab] = useState<Tab>(defaultTab);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
diff --git a/src/lib/blindbox.ts b/src/lib/blindbox.ts
new file mode 100644
index 0000000..3105e85
--- /dev/null
+++ b/src/lib/blindbox.ts
@@ -0,0 +1,43 @@
+import { prisma } from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export function errorResponse(message: string, status: number) {
+  return NextResponse.json({ error: message }, { status });
+}
+
+export function generateRoomCode(): string {
+  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+  let code = "";
+  for (let i = 0; i < 6; i++) {
+    code += chars[Math.floor(Math.random() * chars.length)];
+  }
+  return code;
+}
+
+export async function generateUniqueRoomCode(): Promise<string> {
+  for (let attempt = 0; attempt < 10; attempt++) {
+    const code = generateRoomCode();
+    const existing = await prisma.blindBoxRoom.findUnique({ where: { code } });
+    if (!existing) return code;
+  }
+  throw new Error("无法生成唯一房间号");
+}
+
+export async function validateMembership(roomId: string, userId: string) {
+  const member = await prisma.blindBoxMember.findUnique({
+    where: { roomId_userId: { roomId, userId } },
+  });
+  return !!member;
+}
+
+export async function getRoomByCode(code: string) {
+  return prisma.blindBoxRoom.findUnique({
+    where: { code },
+    include: {
+      members: {
+        include: { user: { select: { id: true, username: true, avatar: true } } },
+      },
+      _count: { select: { ideas: { where: { status: "in_pool" } } } },
+    },
+  });
+}

From 08eb55ca410e6c6fb8ffcfb6f48083da33e0532e Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 13:50:38 +0800
Subject: [PATCH 05/66] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E4=BA=AB=E7=BB=93=E6=9E=9C=E5=8D=A1=E7=89=87=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E5=BD=A2=E6=88=90=E7=94=A8=E6=88=B7=E5=A2=9E=E9=95=BF?=
 =?UTF-8?q?=E9=97=AD=E7=8E=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 ShareCardModal 组件，支持餐厅匹配和盲盒契约两种分享卡片
- 卡片包含品牌标识、匹配结果、餐厅/想法详情、二维码
- 使用 html-to-image 生成高清 PNG，支持保存图片和 Web Share API 分享
- 餐厅图片通过 canvas 转 data URL 处理跨域
- 集成到 MatchResult（极速救场）和 BlindBox reveal（周末契约）
---
 package-lock.json                 |   7 +
 package.json                      |   1 +
 src/app/blindbox/[code]/page.tsx  |  44 +-
 src/components/MatchResult.tsx    |  63 +-
 src/components/ShareCardModal.tsx | 952 ++++++++++++++++++++++++++++++
 5 files changed, 1018 insertions(+), 49 deletions(-)
 create mode 100644 src/components/ShareCardModal.tsx

diff --git a/package-lock.json b/package-lock.json
index ec8835e..664b278 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "bcryptjs": "^3.0.3",
         "canvas-confetti": "^1.9.4",
         "framer-motion": "^12.34.3",
+        "html-to-image": "^1.11.13",
         "lucide-react": "^0.575.0",
         "next": "16.1.6",
         "prisma": "^6.19.2",
@@ -4260,6 +4261,12 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "license": "MIT"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
diff --git a/package.json b/package.json
index 8db0243..11715c8 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "bcryptjs": "^3.0.3",
     "canvas-confetti": "^1.9.4",
     "framer-motion": "^12.34.3",
+    "html-to-image": "^1.11.13",
     "lucide-react": "^0.575.0",
     "next": "16.1.6",
     "prisma": "^6.19.2",
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 1076222..f0938aa 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -17,6 +17,7 @@ import {
 } from "lucide-react";
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
+import ShareCardModal from "@/components/ShareCardModal";
 import type { UserProfile } from "@/types";
 
 interface RoomInfo {
@@ -57,6 +58,7 @@ export default function BlindboxRoomPage() {
   const [submitFlash, setSubmitFlash] = useState(false);
   const [error, setError] = useState("");
   const [showInvite, setShowInvite] = useState(false);
+  const [showShareCard, setShowShareCard] = useState(false);
   const [toast, setToast] = useState("");
 
   const boxControls = useAnimation();
@@ -522,13 +524,23 @@ export default function BlindboxRoomPage() {
                   </div>
                 </div>
 
-                <motion.button
-                  onClick={() => { setPhase("pool"); setRevealedIdea(null); }}
-                  className="flex h-10 items-center gap-2 rounded-full bg-surface px-5 text-xs font-semibold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
-                  whileTap={{ scale: 0.96 }}
-                >
-                  继续投入想法
-                </motion.button>
+                <div className="flex items-center gap-3">
+                  <motion.button
+                    onClick={() => setShowShareCard(true)}
+                    className="flex h-10 items-center gap-2 rounded-full bg-purple-600 px-5 text-xs font-bold text-white shadow-lg shadow-purple-900/30 transition-colors hover:bg-purple-500"
+                    whileTap={{ scale: 0.96 }}
+                  >
+                    <Share2 size={14} />
+                    分享契约
+                  </motion.button>
+                  <motion.button
+                    onClick={() => { setPhase("pool"); setRevealedIdea(null); setShowShareCard(false); }}
+                    className="flex h-10 items-center gap-2 rounded-full bg-surface px-5 text-xs font-semibold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
+                    whileTap={{ scale: 0.96 }}
+                  >
+                    继续投入想法
+                  </motion.button>
+                </div>
               </motion.div>
             )}
           </AnimatePresence>
@@ -590,6 +602,24 @@ export default function BlindboxRoomPage() {
         </>
       )}
 
+      {revealedIdea && room && (
+        <ShareCardModal
+          open={showShareCard}
+          onClose={() => setShowShareCard(false)}
+          data={{
+            type: "blindbox",
+            idea: revealedIdea.content,
+            submitter: revealedIdea.user ?? undefined,
+            drawer: revealedIdea.drawnBy ?? undefined,
+            roomName: room.name,
+          }}
+          onToast={(msg) => {
+            setToast(msg);
+            setTimeout(() => setToast(""), 2200);
+          }}
+        />
+      )}
+
       {/* Toast */}
       <AnimatePresence>
         {toast && (
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index deb561d..2b0ccbe 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -23,6 +23,7 @@ import {
 import { Restaurant, MatchType, RunnerUp, SceneType } from "@/types";
 import { fireCelebration, playChime } from "@/lib/celebrate";
 import { isRegistered } from "@/lib/userId";
+import ShareCardModal from "@/components/ShareCardModal";
 
 interface MatchResultProps {
   restaurant: Restaurant;
@@ -183,6 +184,7 @@ export default function MatchResult({
 }: MatchResultProps) {
   const router = useRouter();
   const [showRunnerUps, setShowRunnerUps] = useState(false);
+  const [showShareCard, setShowShareCard] = useState(false);
   const [toast, setToast] = useState("");
   const celebratedRef = useRef(false);
   const historySavedRef = useRef(false);
@@ -223,46 +225,9 @@ export default function MatchResult({
     }).catch(() => {});
   }, [userId, roomId, restaurant, matchType, userCount]);
 
-  const handleShare = useCallback(async () => {
-    const verb = scene === "drink" ? "喝" : "吃";
-    const lines = [
-      isUnanimous
-        ? `🎉 默契度 100%！${userCount} 人全员一致选了同一家！`
-        : `🎉 我们用 NoWhatever 选好了去哪${verb}！`,
-      ``,
-      `📍 ${restaurant.name}`,
-      restaurant.rating ? `⭐ ${restaurant.rating}` : "",
-      restaurant.price && restaurant.price !== "未知" ? `💰 人均${restaurant.price}` : "",
-      restaurant.address ? `📮 ${restaurant.address}` : "",
-      ``,
-      isUnanimous ? `✨ 这就是心有灵犀吧～` : "",
-    ].filter(Boolean);
-
-    const text = lines.join("\n");
-    const navUrl = buildNavUrl(restaurant);
-
-    const shareData = {
-      title: `我们选了${restaurant.name}！`,
-      text,
-      url: navUrl,
-    };
-
-    try {
-      if (navigator.share && navigator.canShare?.(shareData)) {
-        await navigator.share(shareData);
-        return;
-      }
-    } catch (e) {
-      if (e instanceof Error && e.name === "AbortError") return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(`${text}\n\n${navUrl}`);
-      showToast("已复制，快去发给朋友吧！");
-    } catch {
-      showToast("复制失败，请手动复制");
-    }
-  }, [restaurant, showToast, isUnanimous, userCount, scene]);
+  const handleOpenShareCard = useCallback(() => {
+    setShowShareCard(true);
+  }, []);
 
   if (matchType === "no_match") {
     return <NoMatchResult onReset={onReset} resetting={resetting} />;
@@ -451,12 +416,12 @@ export default function MatchResult({
           )}
 
           <motion.button
-            onClick={handleShare}
+            onClick={handleOpenShareCard}
             className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
             whileTap={{ scale: 0.95 }}
           >
             <Share2 size={15} />
-            分享结果到群里
+            生成分享卡片
           </motion.button>
         </motion.div>
 
@@ -557,6 +522,20 @@ export default function MatchResult({
         </motion.div>
       </div>
 
+      <ShareCardModal
+        open={showShareCard}
+        onClose={() => setShowShareCard(false)}
+        data={{
+          type: "restaurant",
+          restaurant,
+          matchType,
+          matchLikes,
+          userCount,
+          scene,
+        }}
+        onToast={showToast}
+      />
+
       <AnimatePresence>
         {toast && (
           <motion.div
diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
new file mode 100644
index 0000000..f56d85b
--- /dev/null
+++ b/src/components/ShareCardModal.tsx
@@ -0,0 +1,952 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Download, Share2, Loader2, Star, MapPin, Zap } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { toPng } from "html-to-image";
+import type { Restaurant, MatchType, SceneType } from "@/types";
+
+type ShareCardData =
+  | {
+      type: "restaurant";
+      restaurant: Restaurant;
+      matchType: MatchType;
+      matchLikes: number;
+      userCount: number;
+      scene?: SceneType;
+    }
+  | {
+      type: "blindbox";
+      idea: string;
+      submitter?: { avatar: string; username: string };
+      drawer?: { avatar: string; username: string };
+      roomName: string;
+    };
+
+interface ShareCardModalProps {
+  open: boolean;
+  onClose: () => void;
+  data: ShareCardData;
+  onToast?: (msg: string) => void;
+}
+
+async function loadImageAsDataUrl(src: string): Promise<string | null> {
+  try {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.src = src;
+    await new Promise<void>((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = () => reject();
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    const ctx = canvas.getContext("2d")!;
+    ctx.drawImage(img, 0, 0);
+    return canvas.toDataURL("image/jpeg", 0.85);
+  } catch {
+    return null;
+  }
+}
+
+async function generateImage(el: HTMLElement): Promise<string> {
+  return toPng(el, {
+    pixelRatio: 2,
+    quality: 0.95,
+    cacheBust: true,
+    skipAutoScale: true,
+    filter: (node) => {
+      if (node instanceof HTMLElement && node.dataset.shareExclude === "true") {
+        return false;
+      }
+      return true;
+    },
+  });
+}
+
+function downloadDataUrl(dataUrl: string, filename: string) {
+  const link = document.createElement("a");
+  link.download = filename;
+  link.href = dataUrl;
+  link.click();
+}
+
+function dataUrlToFile(dataUrl: string, filename: string): File {
+  const arr = dataUrl.split(",");
+  const mime = arr[0].match(/:(.*?);/)?.[1] || "image/png";
+  const bstr = atob(arr[1]);
+  const u8 = new Uint8Array(bstr.length);
+  for (let i = 0; i < bstr.length; i++) u8[i] = bstr.charCodeAt(i);
+  return new File([u8], filename, { type: mime });
+}
+
+function RestaurantShareCard({
+  data,
+  cardRef,
+  imageDataUrl,
+}: {
+  data: Extract<ShareCardData, { type: "restaurant" }>;
+  cardRef: React.RefObject<HTMLDivElement | null>;
+  imageDataUrl: string | null;
+}) {
+  const { restaurant, matchType, matchLikes, userCount, scene } = data;
+  const isUnanimous = matchType === "unanimous";
+  const verb = scene === "drink" ? "喝" : "吃";
+  const shareUrl =
+    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
+  const accentFrom = isUnanimous ? "#059669" : "#b45309";
+  const accentTo = isUnanimous ? "#34d399" : "#fbbf24";
+  const accentText = isUnanimous ? "#6ee7b7" : "#fcd34d";
+  const accentBg = isUnanimous
+    ? "rgba(16, 185, 129, 0.12)"
+    : "rgba(245, 158, 11, 0.12)";
+
+  return (
+    <div
+      ref={cardRef}
+      style={{
+        width: 340,
+        padding: 1.5,
+        borderRadius: 20,
+        background: `linear-gradient(160deg, ${accentFrom}, ${accentTo}40, ${accentFrom}30)`,
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 18.5,
+          background: "#08080a",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Decorative glows */}
+        <div
+          style={{
+            position: "absolute",
+            top: -40,
+            right: -30,
+            width: 160,
+            height: 160,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, ${accentFrom}25, transparent 70%)`,
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: 60,
+            left: -40,
+            width: 120,
+            height: 120,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, ${accentTo}12, transparent 70%)`,
+          }}
+        />
+
+        {/* Brand header */}
+        <div
+          style={{
+            padding: "14px 20px 12px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            position: "relative",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <span style={{ fontSize: 18 }}>⚡</span>
+            <div>
+              <div
+                style={{
+                  fontSize: 13,
+                  fontWeight: 800,
+                  color: "#ffffff",
+                  letterSpacing: "0.02em",
+                }}
+              >
+                NoWhatever
+              </div>
+              <div
+                style={{
+                  fontSize: 9,
+                  fontWeight: 600,
+                  color: "rgba(255,255,255,0.35)",
+                  letterSpacing: "0.15em",
+                  marginTop: 1,
+                }}
+              >
+                别说随便 · PANIC MODE
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Thin accent line */}
+        <div
+          style={{
+            height: 1,
+            margin: "0 20px",
+            background: `linear-gradient(to right, transparent, ${accentTo}30, transparent)`,
+          }}
+        />
+
+        {/* Hero section */}
+        <div
+          style={{
+            padding: "24px 20px 20px",
+            textAlign: "center",
+            position: "relative",
+          }}
+        >
+          <div style={{ fontSize: 40, lineHeight: 1 }}>
+            {isUnanimous ? "🎉" : "🏆"}
+          </div>
+          <div
+            style={{
+              fontSize: 30,
+              fontWeight: 900,
+              color: "#ffffff",
+              marginTop: 12,
+              letterSpacing: "0.08em",
+            }}
+          >
+            就去这{verb}！
+          </div>
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              marginTop: 12,
+              padding: "6px 16px",
+              borderRadius: 100,
+              background: accentBg,
+              border: `1px solid ${accentTo}20`,
+            }}
+          >
+            {isUnanimous && (
+              <Zap
+                size={12}
+                style={{ color: accentText, fill: accentText }}
+              />
+            )}
+            <span
+              style={{
+                fontSize: 11,
+                fontWeight: 700,
+                color: accentText,
+              }}
+            >
+              {isUnanimous
+                ? `默契度 100% · ${userCount}人全员一致`
+                : `${matchLikes}/${userCount} 人选了这家`}
+            </span>
+            {isUnanimous && (
+              <Zap
+                size={12}
+                style={{ color: accentText, fill: accentText }}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Restaurant card */}
+        <div style={{ padding: "0 16px 16px" }}>
+          <div
+            style={{
+              borderRadius: 14,
+              background: "rgba(255,255,255,0.04)",
+              border: "1px solid rgba(255,255,255,0.06)",
+              overflow: "hidden",
+            }}
+          >
+            {imageDataUrl && (
+              <img
+                src={imageDataUrl}
+                alt={restaurant.name}
+                style={{
+                  width: "100%",
+                  height: 150,
+                  objectFit: "cover",
+                  display: "block",
+                }}
+              />
+            )}
+            <div style={{ padding: "14px 16px 16px" }}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "flex-start",
+                  justifyContent: "space-between",
+                  gap: 8,
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 17,
+                    fontWeight: 800,
+                    color: "#ffffff",
+                    lineHeight: 1.3,
+                  }}
+                >
+                  {restaurant.name}
+                </div>
+                {restaurant.category && (
+                  <span
+                    style={{
+                      flexShrink: 0,
+                      padding: "3px 8px",
+                      borderRadius: 100,
+                      background: accentBg,
+                      fontSize: 10,
+                      fontWeight: 600,
+                      color: accentText,
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {restaurant.category}
+                  </span>
+                )}
+              </div>
+
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  marginTop: 10,
+                  fontSize: 12,
+                }}
+              >
+                {restaurant.rating > 0 && (
+                  <span
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 3,
+                      color: "#e5e7eb",
+                      fontWeight: 600,
+                    }}
+                  >
+                    <Star
+                      size={13}
+                      style={{ color: "#fbbf24", fill: "#fbbf24" }}
+                    />
+                    {restaurant.rating}
+                  </span>
+                )}
+                {restaurant.price && restaurant.price !== "未知" && (
+                  <span style={{ fontWeight: 700, color: accentText }}>
+                    {restaurant.price}
+                  </span>
+                )}
+                {restaurant.distance && (
+                  <span
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 3,
+                      color: "#9ca3af",
+                    }}
+                  >
+                    <MapPin size={12} style={{ color: "#6b7280" }} />
+                    {restaurant.distance}
+                  </span>
+                )}
+              </div>
+
+              {restaurant.address && (
+                <div
+                  style={{
+                    marginTop: 8,
+                    fontSize: 11,
+                    color: "#6b7280",
+                    lineHeight: 1.5,
+                  }}
+                >
+                  📍 {restaurant.address}
+                </div>
+              )}
+
+              {restaurant.tag && (
+                <div
+                  style={{
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 4,
+                    marginTop: 10,
+                  }}
+                >
+                  {restaurant.tag
+                    .split(",")
+                    .slice(0, 4)
+                    .map((t) => (
+                      <span
+                        key={t}
+                        style={{
+                          padding: "2px 8px",
+                          borderRadius: 4,
+                          background: "rgba(255,255,255,0.05)",
+                          fontSize: 10,
+                          fontWeight: 500,
+                          color: "#9ca3af",
+                        }}
+                      >
+                        {t.trim()}
+                      </span>
+                    ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* QR footer */}
+        <div
+          style={{
+            padding: "14px 20px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            borderTop: "1px solid rgba(255,255,255,0.04)",
+          }}
+        >
+          <div
+            style={{
+              padding: 5,
+              borderRadius: 8,
+              background: "#ffffff",
+              flexShrink: 0,
+            }}
+          >
+            <QRCodeSVG
+              value={shareUrl}
+              size={52}
+              level="M"
+              bgColor="#ffffff"
+              fgColor="#08080a"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: 12,
+                fontWeight: 700,
+                color: "rgba(255,255,255,0.7)",
+              }}
+            >
+              扫码一起「别说随便」
+            </div>
+            <div
+              style={{
+                fontSize: 10,
+                color: "rgba(255,255,255,0.25)",
+                marginTop: 3,
+              }}
+            >
+              {shareUrl.replace(/^https?:\/\//, "")}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BlindboxShareCard({
+  data,
+  cardRef,
+}: {
+  data: Extract<ShareCardData, { type: "blindbox" }>;
+  cardRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const { idea, submitter, drawer, roomName } = data;
+  const shareUrl =
+    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
+
+  return (
+    <div
+      ref={cardRef}
+      style={{
+        width: 340,
+        padding: 1.5,
+        borderRadius: 20,
+        background: "linear-gradient(160deg, #7c3aed, #6366f140, #7c3aed30)",
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 18.5,
+          background: "#0a0810",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Decorative glows */}
+        <div
+          style={{
+            position: "absolute",
+            top: -30,
+            right: -20,
+            width: 140,
+            height: 140,
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(124,58,237,0.2), transparent 70%)",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: 80,
+            left: -30,
+            width: 120,
+            height: 120,
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%)",
+          }}
+        />
+
+        {/* Brand header */}
+        <div
+          style={{
+            padding: "14px 20px 12px",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            position: "relative",
+          }}
+        >
+          <span style={{ fontSize: 18 }}>🎁</span>
+          <div>
+            <div
+              style={{
+                fontSize: 13,
+                fontWeight: 800,
+                color: "#ffffff",
+                letterSpacing: "0.02em",
+              }}
+            >
+              NoWhatever
+            </div>
+            <div
+              style={{
+                fontSize: 9,
+                fontWeight: 600,
+                color: "rgba(255,255,255,0.3)",
+                letterSpacing: "0.15em",
+                marginTop: 1,
+              }}
+            >
+              别说随便 · ADVENTURE ROULETTE
+            </div>
+          </div>
+        </div>
+
+        {/* Thin accent line */}
+        <div
+          style={{
+            height: 1,
+            margin: "0 20px",
+            background: "linear-gradient(to right, transparent, rgba(167,139,250,0.25), transparent)",
+          }}
+        />
+
+        {/* Room name badge */}
+        <div
+          style={{
+            textAlign: "center",
+            padding: "20px 20px 8px",
+            position: "relative",
+          }}
+        >
+          <div
+            style={{
+              fontSize: 10,
+              fontWeight: 700,
+              letterSpacing: "0.25em",
+              color: "rgba(167,139,250,0.5)",
+            }}
+          >
+            ✦ {roomName} ✦
+          </div>
+        </div>
+
+        {/* Idea card */}
+        <div style={{ padding: "0 16px 20px" }}>
+          <div
+            style={{
+              borderRadius: 14,
+              background: "rgba(255,255,255,0.04)",
+              border: "1px solid rgba(167,139,250,0.1)",
+              padding: "28px 24px",
+              position: "relative",
+            }}
+          >
+            {/* Corner decorations */}
+            <div
+              style={{
+                position: "absolute",
+                top: 10,
+                left: 10,
+                width: 14,
+                height: 14,
+                borderLeft: "2px solid rgba(167,139,250,0.25)",
+                borderTop: "2px solid rgba(167,139,250,0.25)",
+                borderTopLeftRadius: 3,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                top: 10,
+                right: 10,
+                width: 14,
+                height: 14,
+                borderRight: "2px solid rgba(167,139,250,0.25)",
+                borderTop: "2px solid rgba(167,139,250,0.25)",
+                borderTopRightRadius: 3,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                bottom: 10,
+                left: 10,
+                width: 14,
+                height: 14,
+                borderLeft: "2px solid rgba(167,139,250,0.25)",
+                borderBottom: "2px solid rgba(167,139,250,0.25)",
+                borderBottomLeftRadius: 3,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                bottom: 10,
+                right: 10,
+                width: 14,
+                height: 14,
+                borderRight: "2px solid rgba(167,139,250,0.25)",
+                borderBottom: "2px solid rgba(167,139,250,0.25)",
+                borderBottomRightRadius: 3,
+              }}
+            />
+
+            <div
+              style={{
+                fontSize: 22,
+                fontWeight: 900,
+                color: "#ffffff",
+                textAlign: "center",
+                lineHeight: 1.6,
+                letterSpacing: "0.02em",
+              }}
+            >
+              {idea}
+            </div>
+
+            <div
+              style={{
+                width: 48,
+                height: 1,
+                margin: "16px auto",
+                background:
+                  "linear-gradient(to right, transparent, rgba(167,139,250,0.4), transparent)",
+              }}
+            />
+
+            <div
+              style={{
+                textAlign: "center",
+                fontSize: 10,
+                fontWeight: 500,
+                color: "rgba(167,139,250,0.35)",
+              }}
+            >
+              此契约一旦开启，绝不反悔
+            </div>
+          </div>
+        </div>
+
+        {/* Attribution */}
+        {(submitter || drawer) && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 12,
+              padding: "0 20px 16px",
+            }}
+          >
+            {submitter && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 5,
+                  fontSize: 11,
+                  color: "rgba(196,181,253,0.4)",
+                }}
+              >
+                <span style={{ fontSize: 14 }}>{submitter.avatar}</span>
+                <span>{submitter.username} 投入</span>
+              </div>
+            )}
+            {submitter && drawer && (
+              <span style={{ color: "rgba(196,181,253,0.2)" }}>·</span>
+            )}
+            {drawer && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 5,
+                  fontSize: 11,
+                  color: "rgba(196,181,253,0.4)",
+                }}
+              >
+                <span style={{ fontSize: 14 }}>{drawer.avatar}</span>
+                <span>{drawer.username} 抽中</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* QR footer */}
+        <div
+          style={{
+            padding: "14px 20px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            borderTop: "1px solid rgba(255,255,255,0.04)",
+          }}
+        >
+          <div
+            style={{
+              padding: 5,
+              borderRadius: 8,
+              background: "#ffffff",
+              flexShrink: 0,
+            }}
+          >
+            <QRCodeSVG
+              value={shareUrl}
+              size={52}
+              level="M"
+              bgColor="#ffffff"
+              fgColor="#0a0810"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: 12,
+                fontWeight: 700,
+                color: "rgba(255,255,255,0.7)",
+              }}
+            >
+              扫码一起「别说随便」
+            </div>
+            <div
+              style={{
+                fontSize: 10,
+                color: "rgba(255,255,255,0.2)",
+                marginTop: 3,
+              }}
+            >
+              {shareUrl.replace(/^https?:\/\//, "")}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ShareCardModal({
+  open,
+  onClose,
+  data,
+  onToast,
+}: ShareCardModalProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const [generating, setGenerating] = useState(false);
+  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
+  const [imageLoading, setImageLoading] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setImageDataUrl(null);
+      return;
+    }
+    if (data.type !== "restaurant") return;
+
+    const src = data.restaurant.images?.[0];
+    if (!src) return;
+
+    setImageLoading(true);
+    loadImageAsDataUrl(src)
+      .then(setImageDataUrl)
+      .finally(() => setImageLoading(false));
+  }, [open, data]);
+
+  const handleGenerate = useCallback(async (): Promise<string | null> => {
+    if (!cardRef.current) return null;
+    setGenerating(true);
+    try {
+      return await generateImage(cardRef.current);
+    } catch {
+      try {
+        setImageDataUrl(null);
+        await new Promise((r) => setTimeout(r, 100));
+        if (!cardRef.current) return null;
+        return await generateImage(cardRef.current);
+      } catch {
+        return null;
+      }
+    } finally {
+      setGenerating(false);
+    }
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    const png = await handleGenerate();
+    if (!png) {
+      onToast?.("生成图片失败，请重试");
+      return;
+    }
+    const name =
+      data.type === "restaurant"
+        ? `NoWhatever_${data.restaurant.name}.png`
+        : `NoWhatever_周末契约.png`;
+    downloadDataUrl(png, name);
+    onToast?.("图片已保存");
+  }, [handleGenerate, onToast, data]);
+
+  const handleShare = useCallback(async () => {
+    const png = await handleGenerate();
+    if (!png) {
+      onToast?.("生成图片失败，请重试");
+      return;
+    }
+
+    const file = dataUrlToFile(png, "NoWhatever.png");
+
+    const shareData: ShareData = { files: [file] };
+    try {
+      if (navigator.canShare?.(shareData)) {
+        await navigator.share(shareData);
+        return;
+      }
+    } catch (e) {
+      if (e instanceof Error && e.name === "AbortError") return;
+    }
+
+    downloadDataUrl(png, "NoWhatever.png");
+    onToast?.("图片已保存，快去分享吧！");
+  }, [handleGenerate, onToast]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === backdropRef.current) onClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          ref={backdropRef}
+          className="fixed inset-0 z-70 overflow-y-auto overflow-x-hidden bg-black/80 backdrop-blur-sm scrollbar-none"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          onClick={handleBackdropClick}
+        >
+          <motion.div
+            className="flex min-h-dvh flex-col items-center justify-center px-5 py-6"
+            initial={{ opacity: 0, scale: 0.92 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.92 }}
+            transition={{ duration: 0.25, ease: "easeOut" }}
+          >
+            {/* Close button (floating) */}
+            <button
+              onClick={onClose}
+              className="mb-3 flex h-9 w-9 shrink-0 items-center justify-center self-end rounded-full bg-white/10 text-gray-300 transition-colors active:bg-white/20"
+            >
+              <X size={18} />
+            </button>
+
+            {/* Card */}
+            <div className="flex shrink-0 justify-center">
+              {imageLoading ? (
+                <div
+                  style={{ width: 340, height: 400 }}
+                  className="flex items-center justify-center rounded-2xl bg-[#111113]"
+                >
+                  <Loader2
+                    size={24}
+                    className="animate-spin text-gray-500"
+                  />
+                </div>
+              ) : data.type === "restaurant" ? (
+                <RestaurantShareCard
+                  data={data}
+                  cardRef={cardRef}
+                  imageDataUrl={imageDataUrl}
+                />
+              ) : (
+                <BlindboxShareCard data={data} cardRef={cardRef} />
+              )}
+            </div>
+
+            {/* Action buttons */}
+            <div className="mt-5 flex w-full max-w-[340px] shrink-0 gap-3">
+              <button
+                onClick={handleSave}
+                disabled={generating}
+                className="flex h-12 flex-1 items-center justify-center gap-2 rounded-2xl bg-white/10 text-sm font-semibold text-gray-200 transition-colors active:bg-white/15 disabled:opacity-50"
+              >
+                {generating ? (
+                  <Loader2 size={16} className="animate-spin" />
+                ) : (
+                  <Download size={16} />
+                )}
+                保存图片
+              </button>
+              <button
+                onClick={handleShare}
+                disabled={generating}
+                className={`flex h-12 flex-1 items-center justify-center gap-2 rounded-2xl text-sm font-bold text-white shadow-lg transition-colors disabled:opacity-50 ${
+                  data.type === "blindbox"
+                    ? "bg-purple-600 shadow-purple-900/30 active:bg-purple-500"
+                    : "bg-emerald-600 shadow-emerald-900/30 active:bg-emerald-500"
+                }`}
+              >
+                {generating ? (
+                  <Loader2 size={16} className="animate-spin" />
+                ) : (
+                  <Share2 size={16} />
+                )}
+                分享给好友
+              </button>
+            </div>
+
+            <p className="mt-3 shrink-0 text-center text-[10px] text-gray-500">
+              长按图片也可以保存到相册
+            </p>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

From afde70c98ebdf4367f24759311aaa0586b6463eb Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 13:52:20 +0800
Subject: [PATCH 06/66] =?UTF-8?q?fix:=20=E5=88=86=E4=BA=AB=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E5=88=B0=E5=8D=A1=E7=89=87=E5=8F=B3=E4=B8=8A=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShareCardModal.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
index f56d85b..a6b1790 100644
--- a/src/components/ShareCardModal.tsx
+++ b/src/components/ShareCardModal.tsx
@@ -878,16 +878,14 @@ export default function ShareCardModal({
             exit={{ opacity: 0, scale: 0.92 }}
             transition={{ duration: 0.25, ease: "easeOut" }}
           >
-            {/* Close button (floating) */}
-            <button
-              onClick={onClose}
-              className="mb-3 flex h-9 w-9 shrink-0 items-center justify-center self-end rounded-full bg-white/10 text-gray-300 transition-colors active:bg-white/20"
-            >
-              <X size={18} />
-            </button>
-
-            {/* Card */}
-            <div className="flex shrink-0 justify-center">
+            {/* Card + close button wrapper */}
+            <div className="relative flex shrink-0 justify-center">
+              <button
+                onClick={onClose}
+                className="absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/70 transition-colors active:bg-black/60"
+              >
+                <X size={16} />
+              </button>
               {imageLoading ? (
                 <div
                   style={{ width: 340, height: 400 }}

From 0f83e9c6ae23889190642f231e9d292186f68bbc Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:03:38 +0800
Subject: [PATCH 07/66] =?UTF-8?q?feat:=20=E5=8C=B9=E9=85=8D=E6=88=90?=
 =?UTF-8?q?=E5=8A=9F=E9=A1=B5=E4=BD=93=E9=AA=8C=E4=BC=98=E5=8C=96=20?=
 =?UTF-8?q?=E2=80=94=20=E6=B5=AE=E5=8A=A8=E6=93=8D=E4=BD=9C=E6=A0=8F?=
 =?UTF-8?q?=E3=80=81=E6=94=B6=E8=97=8F=E3=80=81=E5=86=B3=E8=B5=9B=E5=BC=95?=
 =?UTF-8?q?=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 底部操作改为固定浮动栏，"再来一轮"和"换一批店"始终可见
- 结果卡片右上角新增收藏按钮，复用已有收藏 API
- 非全员一致时"Top N 决赛"按钮上方增加引导文案
- 更新 ROADMAP 标记已完成项，移除低优先级条目
---
 ROADMAP.md                     | 113 ++++++++++++++++++++++++++
 src/components/MatchResult.tsx | 140 ++++++++++++++++++++-------------
 2 files changed, 199 insertions(+), 54 deletions(-)
 create mode 100644 ROADMAP.md

diff --git a/ROADMAP.md b/ROADMAP.md
new file mode 100644
index 0000000..4e19d46
--- /dev/null
+++ b/ROADMAP.md
@@ -0,0 +1,113 @@
+# NoWhatever 产品优化路线图
+
+> 基于当前产品形态的全面审视，按优先级排列。  
+> 已完成项标记 ~~删除线~~。
+
+---
+
+## P0 — 核心闭环
+
+### ~~分享结果卡片~~（已完成）
+- ~~匹配成功 / 盲盒开奖后，一键生成品牌分享图~~
+- ~~支持保存图片、Web Share API 分享~~
+- ~~卡片包含餐厅/想法详情 + 二维码，形成增长飞轮~~
+
+### 匹配成功页补全后续动作
+- ~~一键导航提升为首要 CTA~~（已完成，导航按钮已作为 accent 主按钮置顶）
+- ~~加入一键打电话订位~~（已完成，`tel` 字段存在时展示拨号按钮）
+- "不满意？再来一轮" 提升可见度：从底部灰色文字改为固定在页面底部的半透明浮动条，带 `RotateCcw` 图标 + 引导文案
+- 加入"收藏这家"快捷操作（复用已有收藏 API `/api/user/favorite`，用心形图标放在结果卡片右上角）
+- 非全员一致时，在"Top N 决赛"按钮上方增加一句引导语（"还有 X 家不相上下，再选一轮？"），降低用户理解成本
+
+---
+
+## P1 — 体验提升
+
+### 单人也能用（Solo 模式）
+- 只有一人创建房间时，等待页面体验空白
+- 加入 Solo 模式：一人时自动随机推荐 / 转盘选择
+- 降低使用门槛，不依赖必须拉人
+
+### 盲盒想法互动
+- 对想法点赞 / 加权（增加被抽中概率）
+- 想法分类标签（美食 / 旅行 / 运动 / 奇葩挑战）
+- 抽中后打卡确认（拍照上传，形成回忆）
+- "本周契约执行率" 统计
+
+### PWA 支持
+- 添加 Web App Manifest，支持"添加到主屏幕"
+- Service Worker 离线缓存基础页面
+- `viewport-fit=cover` 适配刘海屏
+
+### 首次体验引导优化
+- 极速救场完成一轮后引导注册（"注册保存记录"）
+- 盲盒模式先展示 demo / 动画，让用户看到价值再引导注册
+- 统一两个模式的登录体验（目前极速救场不需登录，盲盒必须登录）
+
+---
+
+## P2 — 场景拓展 & 数据
+
+### 更多极速救场场景
+- 当前只有"吃饭"和"喝酒"两个场景
+- 可扩展：看电影、去公园、玩什么游戏、周末去哪
+- 复用同一套滑卡机制，接入不同 POI 数据源
+
+### 个人数据洞察
+- 你最常吃的菜系 Top 3
+- 你和 TA 的口味重合度
+- 月度决策次数趋势图
+- 在个人中心以简单可视化展示
+
+### 首页社交证明
+- "已帮助 X 对情侣做出 Y 次决定"（全局计数器）
+- 最近一次匹配的匿名动态（"3分钟前，一对情侣在北京选中了 XXX"）
+- 提升首页说服力，推动新用户转化
+
+### 盲盒开奖提醒
+- 周五下午推送"本周盲盒待抽 X 个想法"
+- 浏览器 Notification API 提醒
+- 房间内"设定开奖日"功能，到时间提醒所有成员
+
+---
+
+## P3 — 长期留存
+
+### 成就 & 激励系统
+- 决策次数徽章（"已拯救 10 次选择困难症"）
+- 连续使用天数
+- 盲盒投放数量成就
+- 在个人中心展示，增加用户粘性
+
+### 盲盒房间生命周期
+- 闲置 30 天自动归档
+- 支持删除 / 退出房间
+- 房间设置页（修改名称、管理成员、清空想法池）
+
+### 浅色模式
+- 当前暗色主题是唯一选项
+- 白天户外使用体验差
+- 跟随系统 / 手动切换
+
+### 空状态插图优化
+- 个人中心"还没有决策记录""还没有收藏"用纯文字展示
+- 替换为插图 + CTA 按钮（"去创建第一个房间"）
+
+---
+
+## 技术债务
+
+### 安全 & 稳定性
+- [ ] API 接口加入 Rate Limiting
+- [ ] 添加全局 Error Boundary
+- [ ] 历史记录 / 收藏列表加分页
+- [ ] 餐厅图片加载失败时的 fallback 占位
+
+### 性能优化
+- [ ] 餐厅图片使用 Next.js Image 组件优化
+- [ ] 加入 Loading Skeleton 替代纯 spinner
+- [ ] 盲盒房间过期策略（避免僵尸房间堆积）
+
+### 监控
+- [ ] 接入基础数据埋点（页面 PV、功能使用率）
+- [ ] 错误上报（Sentry 或类似）
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 2b0ccbe..e677175 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -19,6 +19,7 @@ import {
   RefreshCw,
   Share2,
   Zap,
+  Heart,
 } from "lucide-react";
 import { Restaurant, MatchType, RunnerUp, SceneType } from "@/types";
 import { fireCelebration, playChime } from "@/lib/celebrate";
@@ -189,6 +190,8 @@ export default function MatchResult({
   const celebratedRef = useRef(false);
   const historySavedRef = useRef(false);
   const isUnanimous = matchType === "unanimous";
+  const [favorited, setFavorited] = useState(false);
+  const [favLoading, setFavLoading] = useState(false);
 
   const showToast = useCallback((msg: string) => {
     setToast(msg);
@@ -229,6 +232,25 @@ export default function MatchResult({
     setShowShareCard(true);
   }, []);
 
+  const handleFavorite = useCallback(async () => {
+    if (!isRegistered() || favorited || favLoading) return;
+    setFavLoading(true);
+    try {
+      const res = await fetch("/api/user/favorite", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId, restaurant }),
+      });
+      if (res.ok) {
+        setFavorited(true);
+        showToast("已收藏");
+      }
+    } catch {
+      /* ignore */
+    }
+    setFavLoading(false);
+  }, [userId, restaurant, favorited, favLoading, showToast]);
+
   if (matchType === "no_match") {
     return <NoMatchResult onReset={onReset} resetting={resetting} />;
   }
@@ -247,7 +269,7 @@ export default function MatchResult({
 
   return (
     <motion.div
-      className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
+      className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 pb-24 pt-10"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.4 }}
@@ -314,11 +336,27 @@ export default function MatchResult({
 
         {/* Result card */}
         <motion.div
-          className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
+          className="relative mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
           initial={{ y: 60, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
         >
+          {isRegistered() && (
+            <motion.button
+              onClick={handleFavorite}
+              disabled={favLoading}
+              className="absolute right-3 top-3 z-10 rounded-full bg-black/40 p-2 backdrop-blur-sm transition-colors hover:bg-black/60 disabled:opacity-50"
+              whileTap={{ scale: 0.85 }}
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.7, type: "spring", stiffness: 300, damping: 15 }}
+            >
+              <Heart
+                size={18}
+                className={favorited ? "fill-red-500 text-red-500" : "text-white"}
+              />
+            </motion.button>
+          )}
           {restaurant.images?.[0] && (
             <img
               src={restaurant.images[0]}
@@ -466,62 +504,56 @@ export default function MatchResult({
                 </motion.div>
               )}
             </AnimatePresence>
+
+            {canNarrow && (
+              <div className="mt-4 flex flex-col items-center gap-2">
+                <p className="text-xs text-muted">
+                  还有 {runnerUpRestaurants.length} 家不相上下，再选一轮？
+                </p>
+                <motion.button
+                  onClick={() => onNarrow(narrowIds)}
+                  disabled={resetting}
+                  className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <Swords size={15} />
+                  {resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`}
+                </motion.button>
+              </div>
+            )}
           </motion.div>
         )}
-
-        {/* Bottom actions */}
-        <motion.div
-          className="mt-5 flex w-full flex-col items-center gap-2.5"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.8 }}
-        >
-          {canNarrow ? (
-            <>
-              <motion.button
-                onClick={() => onNarrow(narrowIds)}
-                disabled={resetting}
-                className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
-                whileTap={{ scale: 0.95 }}
-              >
-                <Swords size={15} />
-                {resetting ? "加载中..." : `Top ${narrowIds.length} 决赛`}
-              </motion.button>
-              <motion.button
-                onClick={() => router.push("/")}
-                className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-                  isUnanimous ? "text-emerald-400" : "text-amber-400"
-                }`}
-              >
-                <RefreshCw size={13} />
-                换一批店
-              </motion.button>
-            </>
-          ) : (
-            <>
-              <motion.button
-                onClick={onReset}
-                disabled={resetting}
-                className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
-                whileTap={{ scale: 0.95 }}
-              >
-                <RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
-                {resetting ? "重置中..." : "再来一轮"}
-              </motion.button>
-              <motion.button
-                onClick={() => router.push("/")}
-                className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-                  isUnanimous ? "text-emerald-400" : "text-amber-400"
-                }`}
-              >
-                <RefreshCw size={13} />
-                换一批店
-              </motion.button>
-            </>
-          )}
-        </motion.div>
       </div>
 
+      {/* Floating bottom bar */}
+      <motion.div
+        className="fixed inset-x-0 bottom-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-xl"
+        initial={{ y: 60, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.9, type: "spring", stiffness: 200, damping: 20 }}
+      >
+        <div className="mx-auto flex max-w-sm items-center gap-3 px-6 pb-6 pt-3">
+          <span className="shrink-0 text-xs text-muted">不满意？</span>
+          <motion.button
+            onClick={onReset}
+            disabled={resetting}
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+            whileTap={{ scale: 0.95 }}
+          >
+            <RotateCcw size={12} className={resetting ? "animate-spin" : ""} />
+            {resetting ? "重置中..." : "再来一轮"}
+          </motion.button>
+          <motion.button
+            onClick={() => router.push("/")}
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle"
+            whileTap={{ scale: 0.95 }}
+          >
+            <RefreshCw size={12} />
+            换一批店
+          </motion.button>
+        </div>
+      </motion.div>
+
       <ShareCardModal
         open={showShareCard}
         onClose={() => setShowShareCard(false)}

From f8a64b3281689eedb78afd199f0bb958ea417ae0 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:08:23 +0800
Subject: [PATCH 08/66] =?UTF-8?q?docs:=20=E9=87=8D=E5=86=99=20README?=
 =?UTF-8?q?=EF=BC=8C=E5=AF=B9=E9=BD=90=E5=86=B3=E7=AD=96=E5=BC=95=E6=93=8E?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E4=B8=8E=E5=8F=8C=E6=A8=A1=E5=BC=8F=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E5=BD=A2=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 69 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 14bc3a6..3da2142 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,52 @@
 # NoWhatever — 别说随便
 
-像 Tinder 一样滑卡片，和朋友一起决定去哪吃！解决聚餐时"随便都行"的纠结痛点，无需下载 App，用完即走。
+> 亲密关系决策引擎。别再说"随便"了，两个模式覆盖你们所有的选择困难症。
+
+## 两大模式
+
+### ⚡️ 极速救场 · Panic Mode
+
+10 秒内出结果，立刻闭嘴，听天由命。
+
+- 基于 GPS 或手动选点，搜索附近餐厅 / 酒吧
+- Tinder 式滑卡投票 — 右滑想去、左滑跳过
+- 多人实时匹配 — 分享房间链接，所有人同时滑，自动算出最优解
+- 全员一致时触发庆祝特效，非全员一致可发起 Top N 决赛
+- 匹配结果支持一键导航、电话订位、收藏、生成分享卡片
+
+### 🎁 周末契约 · Adventure Roulette
+
+丢入疯狂想法，周末盲盒开奖，绝不反悔。
+
+- 创建专属房间，邀请 TA 用 6 位房间号加入
+- 平日随时向盲盒池投放想法（美食 / 旅行 / 运动 / 奇葩挑战）
+- 周末一起盲抽，开奖结果不可反悔
+- 支持多个房间并行，房间成员共同管理想法池
+
+## 通用能力
+
+- **用户系统** — 用户名 + 密码注册，10 秒完成，头像自选
+- **分享卡片** — 匹配 / 开奖结果一键生成品牌分享图，支持保存 & Web Share API
+- **个人中心** — 决策历史回顾、餐厅收藏管理
+- **多场景** — 吃饭 / 喝酒场景切换，复用同一套滑卡机制
 
 ## Tech Stack
 
-- **Next.js** (App Router) + **React** + **TypeScript**
-- **Tailwind CSS** — Utility-first styling
+- **Next.js 16** (App Router) + **React 19** + **TypeScript**
+- **Prisma** + **SQLite** — 数据持久化
+- **Tailwind CSS v4** — Utility-first styling
 - **Framer Motion** — Physics-based swipe & drag animations
+- **SWR** — 实时轮询 & 数据缓存
 - **Lucide React** — Icon library
+- **canvas-confetti** — 匹配庆祝特效
+- **html-to-image** + **qrcode.react** — 分享卡片 & 邀请二维码
 
 ## Getting Started
 
 ```bash
 npm install
+npx prisma generate
+npx prisma db push
 npm run dev
 ```
 
@@ -23,16 +57,37 @@ Open [http://localhost:3000](http://localhost:3000) in your browser (best viewed
 ```
 src/
 ├── app/
-│   ├── globals.css        # Global styles (mobile-first, no scroll)
-│   ├── layout.tsx         # Root layout with viewport meta
-│   └── page.tsx           # Main entry page
-├── components/
-│   ├── TopNav.tsx         # Navigation bar with room info
-│   ├── RestaurantCard.tsx # Restaurant display card
-│   ├── SwipeableCard.tsx  # Framer Motion drag/swipe logic
-│   ├── SwipeDeck.tsx      # Card stack orchestrator
-│   ├── ActionButtons.tsx  # Nope / Like action buttons
-│   └── MatchResult.tsx    # Match celebration screen
+│   ├── page.tsx                 # 首页 — 双模式入口
+│   ├── panic/page.tsx           # 极速救场 — 定位 / 选点 / 创建房间
+│   ├── room/[id]/page.tsx       # 滑卡房间 — 多人实时投票
+│   ├── invite/[id]/page.tsx     # 邀请页 — 扫码 / 链接加入房间
+│   ├── blindbox/page.tsx        # 周末契约大厅 — 房间列表
+│   ├── blindbox/[code]/page.tsx # 盲盒房间 — 想法投放 & 开奖
+│   ├── profile/page.tsx         # 个人中心 — 历史 / 收藏 / 资料
+│   └── api/                     # API Routes
+│       ├── auth/                #   登录 / 注册
+│       ├── room/                #   房间 CRUD / 滑动 / 匹配
+│       ├── blindbox/            #   盲盒房间 / 想法 / 抽奖
+│       ├── user/                #   用户资料 / 历史 / 收藏
+│       └── location/            #   地理编码 / 地点建议
+├── components/                  # UI 组件
+│   ├── SwipeDeck.tsx            #   卡片堆栈编排器
+│   ├── SwipeableCard.tsx        #   拖拽 / 滑动逻辑
+│   ├── RestaurantCard.tsx       #   餐厅信息展示卡
+│   ├── MatchResult.tsx          #   匹配成功庆祝页
+│   ├── ShareCardModal.tsx       #   分享卡片生成弹窗
+│   ├── AuthModal.tsx            #   登录 / 注册弹窗
+│   ├── TopNav.tsx               #   顶部导航栏
+│   └── ...                      #   其他 UI 组件
+├── hooks/
+│   └── useRoomPolling.ts        # 房间状态实时轮询
+├── lib/                         # 工具函数 & 服务
+│   ├── prisma.ts                #   Prisma 客户端
+│   ├── buildRoomStatus.ts       #   房间状态构建 & 匹配算法
+│   ├── sceneConfig.ts           #   场景配置（吃饭 / 喝酒）
+│   ├── celebrate.ts             #   庆祝特效 & 音效
+│   ├── userId.ts                #   用户 ID & 注册状态管理
+│   └── ...                      #   其他工具
 └── types/
-    └── index.ts           # TypeScript type definitions
+    └── index.ts                 # TypeScript 类型定义
 ```

From 4e60dc3cde6a2ca0118965293f0838c9de8081b6 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:15:14 +0800
Subject: [PATCH 09/66] =?UTF-8?q?fix:=20=E5=8D=95=E4=BA=BA=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E4=BD=93=E9=AA=8C=E4=BC=98=E5=8C=96=20=E2=80=94=20?=
 =?UTF-8?q?=E8=B7=B3=E8=BF=87=E7=AD=89=E5=BE=85=20spinner=EF=BC=8C?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E7=BB=93=E6=9E=9C=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SwipeDeck: userCount === 1 时不再显示"等待其他人完成选择"
- MatchResult: 单人时标题改为"帮你选好了"，副标题改为"你的首选"
- MatchResult: 单人时隐藏"默契度 100%"徽章（无意义）
- 更新 ROADMAP 将 Solo 模式改为单人体验修复
---
 ROADMAP.md                     |  7 +++----
 src/components/MatchResult.tsx | 13 ++++++++-----
 src/components/SwipeDeck.tsx   |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 4e19d46..7b8d538 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -23,10 +23,9 @@
 
 ## P1 — 体验提升
 
-### 单人也能用（Solo 模式）
-- 只有一人创建房间时，等待页面体验空白
-- 加入 Solo 模式：一人时自动随机推荐 / 转盘选择
-- 降低使用门槛，不依赖必须拉人
+### 单人等待体验修复
+- `userCount === 1` 时跳过"等待其他人完成选择"spinner，直接出结果
+- 匹配文案适配单人场景（"就去这了"→"帮你选好了"，"X/X 人想去"→"你的首选"）
 
 ### 盲盒想法互动
 - 对想法点赞 / 加权（增加被抽中概率）
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index e677175..2d84eb3 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -189,6 +189,7 @@ export default function MatchResult({
   const [toast, setToast] = useState("");
   const celebratedRef = useRef(false);
   const historySavedRef = useRef(false);
+  const isSolo = userCount <= 1;
   const isUnanimous = matchType === "unanimous";
   const [favorited, setFavorited] = useState(false);
   const [favLoading, setFavLoading] = useState(false);
@@ -300,7 +301,7 @@ export default function MatchResult({
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.35 }}
         >
-          就去这了！
+          {isSolo ? "帮你选好了！" : "就去这了！"}
         </motion.h1>
 
         <motion.p
@@ -309,12 +310,14 @@ export default function MatchResult({
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.45 }}
         >
-          {isUnanimous
-            ? "大家一拍即合！"
-            : `${matchLikes}/${userCount} 人想去这家`}
+          {isSolo
+            ? "你的首选，别犹豫了"
+            : isUnanimous
+              ? "大家一拍即合！"
+              : `${matchLikes}/${userCount} 人想去这家`}
         </motion.p>
 
-        {isUnanimous && (
+        {isUnanimous && !isSolo && (
           <motion.div
             className="mt-3 flex items-center gap-2 rounded-full bg-emerald-500/15 px-4 py-1.5 ring-1 ring-emerald-500/30"
             initial={{ scale: 0, opacity: 0 }}
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index 5ba0159..fc40e51 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -319,7 +319,7 @@ export default function SwipeDeck({
     ? restaurants.find((r) => r.id === resolvedMatchId) ?? null
     : null;
 
-  const showWaiting = allSwiped && !resolvedMatchId;
+  const showWaiting = allSwiped && !resolvedMatchId && userCount > 1;
 
   return (
     <>

From 26656f1e01d68c1cd47c6e66deb9a1df021ff27c Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:18:32 +0800
Subject: [PATCH 10/66] =?UTF-8?q?feat:=20=E5=8C=B9=E9=85=8D=E6=88=90?=
 =?UTF-8?q?=E5=8A=9F=E9=A1=B5=E5=BC=95=E5=AF=BC=E6=9C=AA=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=B3=A8=E5=86=8C=EF=BC=8C=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E5=86=B3=E7=AD=96=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 未注册用户在匹配成功页看到注册引导卡片
- 注册后自动保存本次决策记录，收藏按钮同步出现
- 将 isRegistered() 调用改为 registered 响应式状态
- 更新 ROADMAP 标记已完成
---
 ROADMAP.md                     |  2 +-
 src/components/MatchResult.tsx | 54 ++++++++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 7b8d538..3b2197d 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -39,7 +39,7 @@
 - `viewport-fit=cover` 适配刘海屏
 
 ### 首次体验引导优化
-- 极速救场完成一轮后引导注册（"注册保存记录"）
+- ~~极速救场完成一轮后引导注册（"注册保存记录"）~~（已完成，匹配成功页展示注册卡片，注册后自动保存记录）
 - 盲盒模式先展示 demo / 动画，让用户看到价值再引导注册
 - 统一两个模式的登录体验（目前极速救场不需登录，盲盒必须登录）
 
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 2d84eb3..4be47f0 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -20,11 +20,13 @@ import {
   Share2,
   Zap,
   Heart,
+  UserPlus,
 } from "lucide-react";
-import { Restaurant, MatchType, RunnerUp, SceneType } from "@/types";
+import { Restaurant, MatchType, RunnerUp, SceneType, UserProfile } from "@/types";
 import { fireCelebration, playChime } from "@/lib/celebrate";
 import { isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
+import AuthModal from "@/components/AuthModal";
 
 interface MatchResultProps {
   restaurant: Restaurant;
@@ -193,6 +195,8 @@ export default function MatchResult({
   const isUnanimous = matchType === "unanimous";
   const [favorited, setFavorited] = useState(false);
   const [favLoading, setFavLoading] = useState(false);
+  const [registered, setRegistered] = useState(() => isRegistered());
+  const [showAuth, setShowAuth] = useState(false);
 
   const showToast = useCallback((msg: string) => {
     setToast(msg);
@@ -212,7 +216,7 @@ export default function MatchResult({
 
   useEffect(() => {
     if (historySavedRef.current) return;
-    if (!isRegistered()) return;
+    if (!registered) return;
     if (matchType === "no_match") return;
 
     historySavedRef.current = true;
@@ -227,14 +231,20 @@ export default function MatchResult({
         participants: userCount,
       }),
     }).catch(() => {});
-  }, [userId, roomId, restaurant, matchType, userCount]);
+  }, [registered, userId, roomId, restaurant, matchType, userCount]);
 
   const handleOpenShareCard = useCallback(() => {
     setShowShareCard(true);
   }, []);
 
+  const handleAuth = useCallback((profile: UserProfile) => {
+    setRegistered(true);
+    setShowAuth(false);
+    showToast(`欢迎，${profile.username}！记录已保存`);
+  }, [showToast]);
+
   const handleFavorite = useCallback(async () => {
-    if (!isRegistered() || favorited || favLoading) return;
+    if (!registered || favorited || favLoading) return;
     setFavLoading(true);
     try {
       const res = await fetch("/api/user/favorite", {
@@ -250,7 +260,7 @@ export default function MatchResult({
       /* ignore */
     }
     setFavLoading(false);
-  }, [userId, restaurant, favorited, favLoading, showToast]);
+  }, [registered, userId, restaurant, favorited, favLoading, showToast]);
 
   if (matchType === "no_match") {
     return <NoMatchResult onReset={onReset} resetting={resetting} />;
@@ -344,7 +354,7 @@ export default function MatchResult({
           animate={{ y: 0, opacity: 1 }}
           transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
         >
-          {isRegistered() && (
+          {registered && (
             <motion.button
               onClick={handleFavorite}
               disabled={favLoading}
@@ -466,6 +476,31 @@ export default function MatchResult({
           </motion.button>
         </motion.div>
 
+        {/* Registration nudge */}
+        {!registered && (
+          <motion.div
+            className="mt-5 w-full rounded-2xl bg-surface/80 p-4 ring-1 ring-border/50 backdrop-blur-sm"
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.75 }}
+          >
+            <p className="text-sm font-medium text-gray-300">
+              注册后，决策记录和收藏不会丢失
+            </p>
+            <p className="mt-1 text-xs text-muted">
+              仅需用户名 + 密码，10 秒完成
+            </p>
+            <motion.button
+              onClick={() => setShowAuth(true)}
+              className="mt-3 flex h-10 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
+              whileTap={{ scale: 0.95 }}
+            >
+              <UserPlus size={15} />
+              注册保存记录
+            </motion.button>
+          </motion.div>
+        )}
+
         {/* Runner ups */}
         {!isUnanimous && runnerUpRestaurants.length > 0 && (
           <motion.div
@@ -557,6 +592,13 @@ export default function MatchResult({
         </div>
       </motion.div>
 
+      <AuthModal
+        open={showAuth}
+        onClose={() => setShowAuth(false)}
+        onAuth={handleAuth}
+        defaultTab="register"
+      />
+
       <ShareCardModal
         open={showShareCard}
         onClose={() => setShowShareCard(false)}

From 1e7851fdb53ce2e9f4890c23bddf11e0fe50d69b Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:22:13 +0800
Subject: [PATCH 11/66] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=94=A8=E6=88=B7=E7=99=BB=E5=BD=95=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=8C=87=E7=A4=BA=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 已登录：右上角显示头像 + 用户名，点击进入个人中心
- 未登录：右上角显示"登录"按钮，点击弹出注册/登录弹窗
---
 src/app/page.tsx | 50 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index eff6e0b..b98f426 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,27 @@
 "use client";
 
+import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
-import { Zap, Gift, Clock, ChevronRight } from "lucide-react";
+import { Zap, Gift, Clock, ChevronRight, User } from "lucide-react";
 import BrandLogo from "@/components/BrandLogo";
+import { getCachedProfile } from "@/lib/userId";
+import AuthModal from "@/components/AuthModal";
+import type { UserProfile } from "@/types";
 
 export default function LandingPage() {
   const router = useRouter();
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [showAuth, setShowAuth] = useState(false);
+
+  useEffect(() => {
+    setProfile(getCachedProfile());
+  }, []);
+
+  const handleAuth = useCallback((p: UserProfile) => {
+    setProfile(p);
+    setShowAuth(false);
+  }, []);
 
   return (
     <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-10 overflow-y-auto scrollbar-none">
@@ -14,6 +29,32 @@ export default function LandingPage() {
       <div className="pointer-events-none fixed left-1/2 top-0 -translate-x-1/2 -translate-y-1/3 h-[420px] w-[420px] rounded-full bg-orange-500/8 blur-3xl" />
       <div className="pointer-events-none fixed left-1/4 top-1/2 h-[300px] w-[300px] rounded-full bg-purple-500/5 blur-3xl" />
 
+      {/* User indicator */}
+      <motion.div
+        className="mb-4 flex w-full max-w-sm justify-end"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.1 }}
+      >
+        {profile ? (
+          <button
+            onClick={() => router.push("/profile")}
+            className="flex items-center gap-2 rounded-full bg-surface/80 px-3 py-1.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated"
+          >
+            <span className="text-sm">{profile.avatar}</span>
+            <span className="text-xs font-semibold text-gray-300">{profile.username}</span>
+          </button>
+        ) : (
+          <button
+            onClick={() => setShowAuth(true)}
+            className="flex items-center gap-1.5 rounded-full bg-surface/80 px-3 py-1.5 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated hover:text-gray-300"
+          >
+            <User size={13} />
+            登录
+          </button>
+        )}
+      </motion.div>
+
       {/* Header */}
       <motion.div
         className="flex flex-col items-center gap-4"
@@ -147,6 +188,13 @@ export default function LandingPage() {
       >
         NOWHATEVER — 拒绝随便，从今天开始
       </motion.p>
+
+      <AuthModal
+        open={showAuth}
+        onClose={() => setShowAuth(false)}
+        onAuth={handleAuth}
+        defaultTab="register"
+      />
     </div>
   );
 }

From d122ee7fb55a0a00e193575bf3fc7f4b0ff96630 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:23:33 +0800
Subject: [PATCH 12/66] =?UTF-8?q?ui:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=80=80=E5=87=BA=E6=8C=89=E9=92=AE=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=81=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶部导航栏右侧新增退出按钮，无需滚到页面底部
- 底部退出按钮从灰色文字链接改为带边框的圆角按钮
---
 src/app/profile/page.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 93aefdb..c4afcde 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -273,7 +273,14 @@ export default function ProfilePage() {
         >
           <ArrowLeft size={20} />
         </button>
-        <h1 className="text-base font-bold text-white">个人中心</h1>
+        <h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
+        <button
+          onClick={handleLogout}
+          className="flex items-center gap-1.5 rounded-full bg-surface px-3 py-1.5 text-xs font-medium text-muted ring-1 ring-border transition-colors hover:text-rose-400 active:bg-elevated"
+        >
+          <LogOut size={13} />
+          退出
+        </button>
       </nav>
 
       <div className="mx-auto max-w-sm px-5">
@@ -666,9 +673,9 @@ export default function ProfilePage() {
         >
           <button
             onClick={handleLogout}
-            className="flex items-center gap-1.5 text-xs font-medium text-muted transition-colors hover:text-rose-400"
+            className="flex items-center justify-center gap-2 rounded-xl bg-surface px-6 py-2.5 text-sm font-medium text-rose-400/80 ring-1 ring-border transition-colors hover:bg-elevated hover:text-rose-400"
           >
-            <LogOut size={13} />
+            <LogOut size={14} />
             退出登录
           </button>
         </motion.div>

From f851eed847d143466bb34846ae344db03f9bb110 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:26:42 +0800
Subject: [PATCH 13/66] =?UTF-8?q?fix:=20=E5=8C=B9=E9=85=8D=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E9=A1=B5=E6=A0=87=E9=A2=98=E5=92=8C=E5=89=AF=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E6=B7=BB=E5=8A=A0=20text-center=20=E7=A1=AE=E4=BF=9D?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MatchResult.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 4be47f0..54c882e 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -306,7 +306,7 @@ export default function MatchResult({
         </motion.div>
 
         <motion.h1
-          className="mt-3 text-4xl font-black text-white"
+          className="mt-3 text-center text-4xl font-black text-white"
           initial={{ y: 30, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.35 }}
@@ -315,7 +315,7 @@ export default function MatchResult({
         </motion.h1>
 
         <motion.p
-          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-400" : "text-amber-400"}`}
+          className={`mt-1 text-center text-sm font-medium ${isUnanimous ? "text-emerald-400" : "text-amber-400"}`}
           initial={{ y: 20, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.45 }}

From 7aa6c7f792d51f0a593636d4e90c1020291002b9 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:42:40 +0800
Subject: [PATCH 14/66] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=A4=B4=E5=83=8F=E5=BE=BD=E7=AB=A0=EF=BC=8C=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E9=A1=B5=E9=9D=A2=E5=8F=B3=E4=B8=8A=E8=A7=92=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 GlobalUserBadge 组件，固定在右上角，已登录显示头像+用户名，未登录显示登录按钮
- 通过 layout.tsx 全局挂载，仅在个人中心页隐藏
- userId.ts 登录/登出时派发 nowhatever_auth 事件，组件实时响应
- 移除各页面重复的用户指示器（首页、极速救场、周末契约大厅、个人中心顶栏退出按钮）
- TopNav 右侧留出空间避免与全局徽章重叠
- 头像徽章采用暗色主题风格（bg-surface/80）
---
 src/app/blindbox/page.tsx          | 16 ++++---
 src/app/layout.tsx                 |  2 +
 src/app/page.tsx                   | 49 +-------------------
 src/app/panic/page.tsx             | 40 ++--------------
 src/app/profile/page.tsx           |  7 ---
 src/components/GlobalUserBadge.tsx | 73 ++++++++++++++++++++++++++++++
 src/components/MatchResult.tsx     | 48 +++++++++++++++-----
 src/components/TopNav.tsx          |  2 +-
 src/lib/userId.ts                  |  2 +
 9 files changed, 129 insertions(+), 110 deletions(-)
 create mode 100644 src/components/GlobalUserBadge.tsx

diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 824335f..5f171ea 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -49,6 +49,16 @@ export default function BlindboxLobbyPage() {
     }
   }, []);
 
+  useEffect(() => {
+    const handler = () => {
+      const registered = isRegistered();
+      setLoggedIn(registered);
+      setProfile(registered ? getCachedProfile() : null);
+    };
+    window.addEventListener("nowhatever_auth", handler);
+    return () => window.removeEventListener("nowhatever_auth", handler);
+  }, []);
+
   const fetchRooms = useCallback(async () => {
     const p = getCachedProfile();
     if (!p) return;
@@ -135,12 +145,6 @@ export default function BlindboxLobbyPage() {
             ADVENTURE ROULETTE
           </p>
         </div>
-        {profile && (
-          <div className="flex items-center gap-2 rounded-full bg-surface px-3 py-1.5 ring-1 ring-border">
-            <span className="text-sm">{profile.avatar}</span>
-            <span className="text-xs font-semibold text-gray-300">{profile.username}</span>
-          </div>
-        )}
       </div>
 
       <AnimatePresence mode="wait">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 216ae40..e6ad5ac 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { Geist } from "next/font/google";
 import "./globals.css";
+import GlobalUserBadge from "@/components/GlobalUserBadge";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
   return (
     <html lang="zh-CN">
       <body className={`${geistSans.variable} font-sans antialiased`}>
+        <GlobalUserBadge />
         {children}
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b98f426..52f5c60 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,27 +1,12 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
-import { Zap, Gift, Clock, ChevronRight, User } from "lucide-react";
+import { Zap, Gift, Clock, ChevronRight } from "lucide-react";
 import BrandLogo from "@/components/BrandLogo";
-import { getCachedProfile } from "@/lib/userId";
-import AuthModal from "@/components/AuthModal";
-import type { UserProfile } from "@/types";
 
 export default function LandingPage() {
   const router = useRouter();
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [showAuth, setShowAuth] = useState(false);
-
-  useEffect(() => {
-    setProfile(getCachedProfile());
-  }, []);
-
-  const handleAuth = useCallback((p: UserProfile) => {
-    setProfile(p);
-    setShowAuth(false);
-  }, []);
 
   return (
     <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-10 overflow-y-auto scrollbar-none">
@@ -29,32 +14,6 @@ export default function LandingPage() {
       <div className="pointer-events-none fixed left-1/2 top-0 -translate-x-1/2 -translate-y-1/3 h-[420px] w-[420px] rounded-full bg-orange-500/8 blur-3xl" />
       <div className="pointer-events-none fixed left-1/4 top-1/2 h-[300px] w-[300px] rounded-full bg-purple-500/5 blur-3xl" />
 
-      {/* User indicator */}
-      <motion.div
-        className="mb-4 flex w-full max-w-sm justify-end"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.1 }}
-      >
-        {profile ? (
-          <button
-            onClick={() => router.push("/profile")}
-            className="flex items-center gap-2 rounded-full bg-surface/80 px-3 py-1.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated"
-          >
-            <span className="text-sm">{profile.avatar}</span>
-            <span className="text-xs font-semibold text-gray-300">{profile.username}</span>
-          </button>
-        ) : (
-          <button
-            onClick={() => setShowAuth(true)}
-            className="flex items-center gap-1.5 rounded-full bg-surface/80 px-3 py-1.5 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated hover:text-gray-300"
-          >
-            <User size={13} />
-            登录
-          </button>
-        )}
-      </motion.div>
-
       {/* Header */}
       <motion.div
         className="flex flex-col items-center gap-4"
@@ -189,12 +148,6 @@ export default function LandingPage() {
         NOWHATEVER — 拒绝随便，从今天开始
       </motion.p>
 
-      <AuthModal
-        open={showAuth}
-        onClose={() => setShowAuth(false)}
-        onAuth={handleAuth}
-        defaultTab="register"
-      />
     </div>
   );
 }
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index d1d508f..2e1cd3e 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -3,12 +3,10 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
-import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, User, ArrowLeft } from "lucide-react";
-import { getUserId, getCachedProfile, getCachedPreferences } from "@/lib/userId";
-import { getAvatarBg } from "@/lib/avatars";
-import AuthModal from "@/components/AuthModal";
+import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, ArrowLeft } from "lucide-react";
+import { getUserId, getCachedPreferences } from "@/lib/userId";
 import { SCENES, getSceneConfig } from "@/lib/sceneConfig";
-import type { UserProfile, SceneType } from "@/types";
+import type { SceneType } from "@/types";
 
 interface LocationSuggestion {
   id: string;
@@ -90,13 +88,7 @@ export default function PanicPage() {
   const [scene, setScene] = useState<SceneType>("eat");
   const sceneConfig = getSceneConfig(scene);
 
-  const [profile, setProfile] = useState<UserProfile | null>(null);
-  const [authModalOpen, setAuthModalOpen] = useState(false);
-
   useEffect(() => {
-    const cached = getCachedProfile();
-    if (cached) setProfile(cached);
-
     const prefs = getCachedPreferences();
     if (prefs.cuisine) setCuisine(prefs.cuisine);
     if (prefs.priceRange) setPriceRange(prefs.priceRange);
@@ -265,27 +257,6 @@ export default function PanicPage() {
         返回
       </button>
 
-      {/* Profile / Auth button */}
-      <div className="absolute right-4 top-3">
-        {profile ? (
-          <button
-            onClick={() => router.push("/profile")}
-            className={`flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
-          >
-            <span className="text-base leading-none">{profile.avatar}</span>
-            <span className="max-w-20 truncate text-xs font-semibold text-foreground">{profile.username}</span>
-          </button>
-        ) : (
-          <button
-            onClick={() => setAuthModalOpen(true)}
-            className="flex h-8 items-center gap-1.5 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
-          >
-            <User size={14} />
-            登录
-          </button>
-        )}
-      </div>
-
       <motion.div
         className="flex items-center gap-3"
         initial={{ y: -20, opacity: 0 }}
@@ -629,11 +600,6 @@ export default function PanicPage() {
         )}
       </motion.div>
 
-      <AuthModal
-        open={authModalOpen}
-        onClose={() => setAuthModalOpen(false)}
-        onAuth={(p) => setProfile(p)}
-      />
     </div>
   );
 }
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index c4afcde..0debe0e 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -274,13 +274,6 @@ export default function ProfilePage() {
           <ArrowLeft size={20} />
         </button>
         <h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
-        <button
-          onClick={handleLogout}
-          className="flex items-center gap-1.5 rounded-full bg-surface px-3 py-1.5 text-xs font-medium text-muted ring-1 ring-border transition-colors hover:text-rose-400 active:bg-elevated"
-        >
-          <LogOut size={13} />
-          退出
-        </button>
       </nav>
 
       <div className="mx-auto max-w-sm px-5">
diff --git a/src/components/GlobalUserBadge.tsx b/src/components/GlobalUserBadge.tsx
new file mode 100644
index 0000000..b514e94
--- /dev/null
+++ b/src/components/GlobalUserBadge.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { motion } from "framer-motion";
+import { User } from "lucide-react";
+import { getCachedProfile } from "@/lib/userId";
+import AuthModal from "@/components/AuthModal";
+import type { UserProfile } from "@/types";
+
+const HIDDEN_PREFIXES = ["/profile"];
+
+export default function GlobalUserBadge() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [showAuth, setShowAuth] = useState(false);
+  const hidden = HIDDEN_PREFIXES.some((p) => pathname.startsWith(p));
+
+  useEffect(() => {
+    setProfile(getCachedProfile());
+  }, [pathname]);
+
+  useEffect(() => {
+    const handler = () => setProfile(getCachedProfile());
+    window.addEventListener("nowhatever_auth", handler);
+    return () => window.removeEventListener("nowhatever_auth", handler);
+  }, []);
+
+  const handleAuth = useCallback((p: UserProfile) => {
+    setProfile(p);
+    setShowAuth(false);
+  }, []);
+
+  if (hidden) return null;
+
+  return (
+    <>
+      <motion.div
+        className="fixed right-4 top-3 z-40"
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ delay: 0.1, duration: 0.3 }}
+      >
+        {profile ? (
+          <button
+            onClick={() => router.push("/profile")}
+            className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated active:opacity-80"
+          >
+            <span className="text-base leading-none">{profile.avatar}</span>
+            <span className="max-w-20 truncate text-xs font-semibold text-gray-300">
+              {profile.username}
+            </span>
+          </button>
+        ) : (
+          <button
+            onClick={() => setShowAuth(true)}
+            className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-gray-300"
+          >
+            <User size={13} />
+            登录
+          </button>
+        )}
+      </motion.div>
+
+      <AuthModal
+        open={showAuth}
+        onClose={() => setShowAuth(false)}
+        onAuth={handleAuth}
+      />
+    </>
+  );
+}
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 54c882e..fb4c6c2 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -22,7 +22,13 @@ import {
   Heart,
   UserPlus,
 } from "lucide-react";
-import { Restaurant, MatchType, RunnerUp, SceneType, UserProfile } from "@/types";
+import {
+  Restaurant,
+  MatchType,
+  RunnerUp,
+  SceneType,
+  UserProfile,
+} from "@/types";
 import { fireCelebration, playChime } from "@/lib/celebrate";
 import { isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
@@ -237,11 +243,14 @@ export default function MatchResult({
     setShowShareCard(true);
   }, []);
 
-  const handleAuth = useCallback((profile: UserProfile) => {
-    setRegistered(true);
-    setShowAuth(false);
-    showToast(`欢迎，${profile.username}！记录已保存`);
-  }, [showToast]);
+  const handleAuth = useCallback(
+    (profile: UserProfile) => {
+      setRegistered(true);
+      setShowAuth(false);
+      showToast(`欢迎，${profile.username}！记录已保存`);
+    },
+    [showToast],
+  );
 
   const handleFavorite = useCallback(async () => {
     if (!registered || favorited || favLoading) return;
@@ -296,7 +305,12 @@ export default function MatchResult({
         <motion.div
           initial={{ scale: 0, rotate: -20 }}
           animate={{ scale: 1, rotate: 0 }}
-          transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
+          transition={{
+            type: "spring",
+            stiffness: 200,
+            damping: 12,
+            delay: 0.2,
+          }}
         >
           {isUnanimous ? (
             <PartyPopper size={56} className="text-emerald-400" />
@@ -311,7 +325,7 @@ export default function MatchResult({
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.35 }}
         >
-          {isSolo ? "帮你选好了！" : "就去这了！"}
+          {isSolo ? "帮你选好了" : "就去这了"}
         </motion.h1>
 
         <motion.p
@@ -352,7 +366,12 @@ export default function MatchResult({
           className="relative mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
           initial={{ y: 60, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
-          transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
+          transition={{
+            type: "spring",
+            stiffness: 180,
+            damping: 18,
+            delay: 0.5,
+          }}
         >
           {registered && (
             <motion.button
@@ -362,11 +381,18 @@ export default function MatchResult({
               whileTap={{ scale: 0.85 }}
               initial={{ scale: 0, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
-              transition={{ delay: 0.7, type: "spring", stiffness: 300, damping: 15 }}
+              transition={{
+                delay: 0.7,
+                type: "spring",
+                stiffness: 300,
+                damping: 15,
+              }}
             >
               <Heart
                 size={18}
-                className={favorited ? "fill-red-500 text-red-500" : "text-white"}
+                className={
+                  favorited ? "fill-red-500 text-red-500" : "text-white"
+                }
               />
             </motion.button>
           )}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 29cd89f..63eed2e 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -47,7 +47,7 @@ export default function TopNav({
 
   return (
     <>
-      <nav className="relative z-10 flex h-14 items-center justify-between px-4">
+      <nav className="relative z-10 flex h-14 items-center justify-between pl-4 pr-24">
         <div className="flex items-center gap-1.5">
           <button
             onClick={() => setShowQr(true)}
diff --git a/src/lib/userId.ts b/src/lib/userId.ts
index b41ddc3..90a77dd 100644
--- a/src/lib/userId.ts
+++ b/src/lib/userId.ts
@@ -31,6 +31,7 @@ export function setCachedProfile(profile: UserProfile | null): void {
   } else {
     localStorage.removeItem(PROFILE_KEY);
   }
+  window.dispatchEvent(new CustomEvent("nowhatever_auth"));
 }
 
 export function isRegistered(): boolean {
@@ -60,4 +61,5 @@ export function logout(): void {
   localStorage.removeItem("nowhatever_preferences");
   const newId = crypto.randomUUID();
   localStorage.setItem(STORAGE_KEY, newId);
+  window.dispatchEvent(new CustomEvent("nowhatever_auth"));
 }

From 05e42ffe22bc818bb148d881b3c528fee100bb2a Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 14:54:46 +0800
Subject: [PATCH 15/66] =?UTF-8?q?feat:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E5=B1=95=E7=A4=BA=E5=86=B3=E7=AD=96=E6=AC=A1=E6=95=B0?=
 =?UTF-8?q?=E5=BE=BD=E7=AB=A0=E3=80=8C=E5=B7=B2=E6=8B=AF=E6=95=91=20X=20?=
 =?UTF-8?q?=E6=AC=A1=E9=80=89=E6=8B=A9=E5=9B=B0=E9=9A=BE=E7=97=87=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/user/route.ts | 3 +++
 src/app/profile/page.tsx  | 9 ++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index 60a8725..2719750 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -13,6 +13,8 @@ export async function GET(req: NextRequest) {
     return NextResponse.json(null);
   }
 
+  const decisionCount = await prisma.decision.count({ where: { userId } });
+
   return NextResponse.json({
     id: user.id,
     username: user.username,
@@ -20,6 +22,7 @@ export async function GET(req: NextRequest) {
     email: user.email,
     preferences: JSON.parse(user.preferences),
     createdAt: user.createdAt.toISOString(),
+    decisionCount,
   });
 }
 
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 0debe0e..62fe551 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -19,6 +19,7 @@ import {
   X,
   Eye,
   EyeOff,
+  Zap,
 } from "lucide-react";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
 import { getAvatarBg, AVATARS } from "@/lib/avatars";
@@ -33,7 +34,7 @@ function firstImage(r: Restaurant): string {
 export default function ProfilePage() {
   const router = useRouter();
   const [userId, setUserId] = useState("");
-  const [profile, setProfile] = useState<(UserProfile & { email?: string; preferences?: UserPreferences }) | null>(null);
+  const [profile, setProfile] = useState<(UserProfile & { email?: string; preferences?: UserPreferences; decisionCount?: number }) | null>(null);
   const [loading, setLoading] = useState(true);
 
   const [history, setHistory] = useState<DecisionRecord[]>([]);
@@ -333,6 +334,12 @@ export default function ProfilePage() {
                 </div>
               )}
               {usernameMsg && <p className="mt-1 text-xs text-rose-400">{usernameMsg}</p>}
+              {(profile.decisionCount ?? 0) > 0 && (
+                <p className="mt-1 flex items-center gap-1 text-xs text-muted">
+                  <Zap size={11} className="text-amber-400" />
+                  已拯救 {profile.decisionCount} 次选择困难症
+                </p>
+              )}
             </div>
           </div>
 

From 69dc78300e5edde40cbcc026d6b19ce2bb15f361 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 15:00:30 +0800
Subject: [PATCH 16/66] =?UTF-8?q?feat:=20=E7=9B=B2=E7=9B=92=E6=88=BF?=
 =?UTF-8?q?=E9=97=B4=E6=94=AF=E6=8C=81=E5=88=A0=E9=99=A4=EF=BC=88=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E8=80=85=EF=BC=89=E5=92=8C=E9=80=80=E5=87=BA=EF=BC=88?=
 =?UTF-8?q?=E6=88=90=E5=91=98=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DELETE /api/blindbox/room/[code] 根据身份区分行为
- 房间页底部两步确认按钮，防止误操作
- 更新 ROADMAP：该功能从 P3 提升至 P1，移除低价值项
---
 ROADMAP.md                                |  9 ++--
 src/app/api/blindbox/room/[code]/route.ts | 33 ++++++++++++
 src/app/blindbox/[code]/page.tsx          | 65 +++++++++++++++++++++++
 3 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 3b2197d..498edc5 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -38,6 +38,10 @@
 - Service Worker 离线缓存基础页面
 - `viewport-fit=cover` 适配刘海屏
 
+### 盲盒房间删除 / 退出
+- 房间创建者可删除房间（级联清理成员 & 想法）
+- 非创建者可退出房间（从成员列表移除自己）
+
 ### 首次体验引导优化
 - ~~极速救场完成一轮后引导注册（"注册保存记录"）~~（已完成，匹配成功页展示注册卡片，注册后自动保存记录）
 - 盲盒模式先展示 demo / 动画，让用户看到价值再引导注册
@@ -78,11 +82,6 @@
 - 盲盒投放数量成就
 - 在个人中心展示，增加用户粘性
 
-### 盲盒房间生命周期
-- 闲置 30 天自动归档
-- 支持删除 / 退出房间
-- 房间设置页（修改名称、管理成员、清空想法池）
-
 ### 浅色模式
 - 当前暗色主题是唯一选项
 - 白天户外使用体验差
diff --git a/src/app/api/blindbox/room/[code]/route.ts b/src/app/api/blindbox/room/[code]/route.ts
index 8baa90b..498b199 100644
--- a/src/app/api/blindbox/room/[code]/route.ts
+++ b/src/app/api/blindbox/room/[code]/route.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
 import { errorResponse, getRoomByCode } from "@/lib/blindbox";
 
 export async function GET(
@@ -28,3 +29,35 @@ export async function GET(
     return errorResponse("获取房间信息失败", 500);
   }
 }
+
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: Promise<{ code: string }> },
+) {
+  try {
+    const { code } = await params;
+    const { userId } = await req.json();
+
+    if (!userId) return errorResponse("缺少用户 ID", 400);
+
+    const room = await prisma.blindBoxRoom.findUnique({
+      where: { code: code.toUpperCase() },
+    });
+    if (!room) return errorResponse("房间不存在", 404);
+
+    if (room.creatorId === userId) {
+      await prisma.blindBoxRoom.delete({ where: { id: room.id } });
+      return NextResponse.json({ action: "deleted" });
+    }
+
+    const membership = await prisma.blindBoxMember.findUnique({
+      where: { roomId_userId: { roomId: room.id, userId } },
+    });
+    if (!membership) return errorResponse("你不是该房间成员", 403);
+
+    await prisma.blindBoxMember.delete({ where: { id: membership.id } });
+    return NextResponse.json({ action: "left" });
+  } catch {
+    return errorResponse("操作失败", 500);
+  }
+}
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index f0938aa..fda5a94 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -14,6 +14,8 @@ import {
   Share2,
   LogIn,
   Copy,
+  Trash2,
+  LogOut,
 } from "lucide-react";
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
@@ -60,6 +62,8 @@ export default function BlindboxRoomPage() {
   const [showInvite, setShowInvite] = useState(false);
   const [showShareCard, setShowShareCard] = useState(false);
   const [toast, setToast] = useState("");
+  const [confirmLeave, setConfirmLeave] = useState(false);
+  const [leaving, setLeaving] = useState(false);
 
   const boxControls = useAnimation();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -250,6 +254,36 @@ export default function BlindboxRoomPage() {
     handleCopyCode();
   };
 
+  const isCreator = profile?.id === room?.creatorId;
+
+  const handleLeaveOrDelete = async () => {
+    if (!confirmLeave) {
+      setConfirmLeave(true);
+      setTimeout(() => setConfirmLeave(false), 3000);
+      return;
+    }
+    if (leaving || !profile || !room) return;
+    setLeaving(true);
+    try {
+      const res = await fetch(`/api/blindbox/room/${room.code}`, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: profile.id }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "操作失败");
+      }
+      router.replace("/blindbox");
+    } catch (e) {
+      setToast(e instanceof Error ? e.message : "操作失败");
+      setTimeout(() => setToast(""), 2200);
+      setConfirmLeave(false);
+    } finally {
+      setLeaving(false);
+    }
+  };
+
   if (pageLoading) {
     return (
       <div className="flex min-h-dvh items-center justify-center bg-background">
@@ -620,6 +654,37 @@ export default function BlindboxRoomPage() {
         />
       )}
 
+      {/* Leave / Delete */}
+      {isMember && room && (
+        <motion.div
+          className="mt-12 w-full max-w-sm"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5 }}
+        >
+          <button
+            onClick={handleLeaveOrDelete}
+            disabled={leaving}
+            className={`flex w-full items-center justify-center gap-2 rounded-xl py-2.5 text-xs font-medium transition-colors ${
+              confirmLeave
+                ? "bg-rose-600/15 text-rose-400 ring-1 ring-rose-500/30"
+                : "text-muted hover:text-rose-400/80"
+            }`}
+          >
+            {leaving ? (
+              <Loader2 size={13} className="animate-spin" />
+            ) : isCreator ? (
+              <Trash2 size={13} />
+            ) : (
+              <LogOut size={13} />
+            )}
+            {confirmLeave
+              ? isCreator ? "确认删除房间？所有想法将被清除" : "确认退出房间？"
+              : isCreator ? "删除房间" : "退出房间"}
+          </button>
+        </motion.div>
+      )}
+
       {/* Toast */}
       <AnimatePresence>
         {toast && (

From 12279117f3815f85290a4c9e9a10720b2c0c59dd Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 15:15:32 +0800
Subject: [PATCH 17/66] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=EF=BC=88=E6=B5=85=E8=89=B2/?=
 =?UTF-8?q?=E6=B7=B1=E8=89=B2/=E8=B7=9F=E9=9A=8F=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS 变量驱动的主题系统，所有颜色响应 data-theme 属性
- 新增语义化色彩 heading/secondary/tertiary，替换硬编码 text-white/text-gray-*
- 右上角三态主题按钮（自动/浅色/深色），全局可用无需登录
- layout.tsx 内联脚本防闪烁
- 修复个人中心页面溢出无法滚动
---
 src/app/blindbox/[code]/page.tsx     | 10 +++---
 src/app/blindbox/page.tsx            | 18 +++++-----
 src/app/globals.css                  | 54 +++++++++++++++++++++-------
 src/app/invite/[id]/page.tsx         | 12 +++----
 src/app/layout.tsx                   |  7 +++-
 src/app/page.tsx                     |  6 ++--
 src/app/panic/page.tsx               |  8 ++---
 src/app/profile/page.tsx             | 28 +++++++--------
 src/app/room/[id]/page.tsx           |  2 +-
 src/components/AuthModal.tsx         | 12 +++----
 src/components/GlobalUserBadge.tsx   | 32 ++++++++++++++---
 src/components/LeaveConfirmModal.tsx |  4 +--
 src/components/MatchResult.tsx       | 24 ++++++-------
 src/components/QrInviteModal.tsx     |  4 +--
 src/components/RestaurantCard.tsx    |  2 +-
 src/components/RoomManageModal.tsx   | 10 +++---
 src/components/TopNav.tsx            |  8 ++---
 src/lib/theme.ts                     | 37 +++++++++++++++++++
 18 files changed, 186 insertions(+), 92 deletions(-)
 create mode 100644 src/lib/theme.ts

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index fda5a94..cfc9ff0 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -307,7 +307,7 @@ export default function BlindboxRoomPage() {
           <ArrowLeft size={16} className="text-muted" />
         </button>
         <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-bold text-white">{room.name}</p>
+          <p className="truncate text-sm font-bold text-heading">{room.name}</p>
           <p className="text-[10px] text-dim">房间 {room.code}</p>
         </div>
 
@@ -354,7 +354,7 @@ export default function BlindboxRoomPage() {
               <div className="flex-1" />
               <button
                 onClick={handleCopyCode}
-                className="flex h-8 items-center gap-1 rounded-lg bg-elevated px-3 text-xs font-medium text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+                className="flex h-8 items-center gap-1 rounded-lg bg-elevated px-3 text-xs font-medium text-secondary ring-1 ring-border transition-colors active:bg-subtle"
               >
                 <Copy size={12} /> 复制
               </button>
@@ -377,7 +377,7 @@ export default function BlindboxRoomPage() {
           animate={{ opacity: 1, y: 0 }}
         >
           <Package size={40} className="text-purple-400/50" strokeWidth={1.5} />
-          <p className="text-sm text-gray-400">你还不是这个房间的成员</p>
+          <p className="text-sm text-tertiary">你还不是这个房间的成员</p>
           <button
             onClick={handleJoinRoom}
             disabled={joiningRoom}
@@ -605,7 +605,7 @@ export default function BlindboxRoomPage() {
                   >
                     <span className="mt-0.5 text-sm">🏆</span>
                     <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-gray-300">
+                      <p className="text-sm font-medium text-secondary">
                         {item.content}
                       </p>
                       <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
@@ -689,7 +689,7 @@ export default function BlindboxRoomPage() {
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-gray-300 shadow-xl ring-1 ring-border"
+            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-secondary shadow-xl ring-1 ring-border"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 20 }}
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 5f171ea..0eb27b6 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -140,7 +140,7 @@ export default function BlindboxLobbyPage() {
           <ArrowLeft size={16} className="text-muted" />
         </button>
         <div className="flex-1">
-          <h1 className="text-lg font-black text-white">🎁 周末契约</h1>
+          <h1 className="text-lg font-black text-heading">🎁 周末契约</h1>
           <p className="text-[10px] font-medium tracking-wider text-purple-400/60">
             ADVENTURE ROULETTE
           </p>
@@ -176,10 +176,10 @@ export default function BlindboxLobbyPage() {
               </motion.span>
             </motion.div>
 
-            <h2 className="mt-6 text-xl font-black text-white">
+            <h2 className="mt-6 text-xl font-black text-heading">
               和 TA 一起，拆开周末
             </h2>
-            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-gray-400">
+            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-tertiary">
               平日蓄水，周末开奖。把所有"想做但一直没做"的事，
               交给命运来决定。
             </p>
@@ -195,7 +195,7 @@ export default function BlindboxLobbyPage() {
                   <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-purple-600/15 text-sm font-black text-purple-400 ring-1 ring-purple-500/20">
                     {s.step}
                   </div>
-                  <p className="text-sm font-medium text-gray-300">{s.text}</p>
+                  <p className="text-sm font-medium text-secondary">{s.text}</p>
                 </div>
               ))}
             </div>
@@ -244,8 +244,8 @@ export default function BlindboxLobbyPage() {
               <Package size={32} className="relative text-purple-400/60" strokeWidth={1.5} />
             </motion.div>
 
-            <h2 className="mt-5 text-lg font-bold text-white">还没有盲盒房间</h2>
-            <p className="mt-1.5 text-sm text-gray-400">
+            <h2 className="mt-5 text-lg font-bold text-heading">还没有盲盒房间</h2>
+            <p className="mt-1.5 text-sm text-tertiary">
               创建第一个房间，邀请 TA 一起玩
             </p>
 
@@ -297,7 +297,7 @@ export default function BlindboxLobbyPage() {
                 <button
                   onClick={handleJoin}
                   disabled={joining || joinCode.trim().length < 6}
-                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
                 >
                   {joining ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
                   加入
@@ -365,7 +365,7 @@ export default function BlindboxLobbyPage() {
               <button
                 onClick={handleJoin}
                 disabled={joining || joinCode.trim().length < 6}
-                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
               >
                 {joining ? <Loader2 size={14} className="animate-spin" /> : <LogIn size={14} />}
                 加入
@@ -401,7 +401,7 @@ export default function BlindboxLobbyPage() {
 
                   {/* Info */}
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-bold text-white">{room.name}</p>
+                    <p className="truncate text-sm font-bold text-heading">{room.name}</p>
                     <div className="mt-1 flex items-center gap-3 text-[11px] text-muted">
                       <span className="flex items-center gap-1">
                         <Users size={11} />
diff --git a/src/app/globals.css b/src/app/globals.css
index 0790fe0..3bd166d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,24 +3,52 @@
 :root {
   --background: #030712;
   --foreground: #f3f4f6;
+  --surface: #111827;
+  --elevated: #1f2937;
+  --inset: #0a0f1a;
+  --border: #1f2937;
+  --subtle: #374151;
+  --muted: #6b7280;
+  --dim: #4b5563;
+  --accent: #10b981;
+  --accent-hover: #059669;
+  --heading: #ffffff;
+  --secondary: #d1d5db;
+  --tertiary: #9ca3af;
+}
+
+[data-theme="light"] {
+  --background: #f8fafc;
+  --foreground: #1e293b;
+  --surface: #ffffff;
+  --elevated: #f1f5f9;
+  --inset: #e2e8f0;
+  --border: #e2e8f0;
+  --subtle: #cbd5e1;
+  --muted: #64748b;
+  --dim: #94a3b8;
+  --accent: #059669;
+  --accent-hover: #047857;
+  --heading: #0f172a;
+  --secondary: #334155;
+  --tertiary: #64748b;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-
-  --color-surface: #111827;
-  --color-elevated: #1f2937;
-  --color-inset: #0a0f1a;
-
-  --color-border: #1f2937;
-  --color-subtle: #374151;
-
-  --color-muted: #6b7280;
-  --color-dim: #4b5563;
-
-  --color-accent: #10b981;
-  --color-accent-hover: #059669;
+  --color-surface: var(--surface);
+  --color-elevated: var(--elevated);
+  --color-inset: var(--inset);
+  --color-border: var(--border);
+  --color-subtle: var(--subtle);
+  --color-muted: var(--muted);
+  --color-dim: var(--dim);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-heading: var(--heading);
+  --color-secondary: var(--secondary);
+  --color-tertiary: var(--tertiary);
 
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index cccc86b..796037f 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -73,7 +73,7 @@ export default function InvitePage() {
         <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
           <Utensils size={28} className="text-muted" />
         </div>
-        <h1 className="text-xl font-bold text-white">房间不存在</h1>
+        <h1 className="text-xl font-bold text-heading">房间不存在</h1>
         <p className="text-center text-sm text-muted">
           这个房间已过期或不存在，请让朋友重新分享链接
         </p>
@@ -99,7 +99,7 @@ export default function InvitePage() {
           {scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
         </div>
 
-        <h1 className="mt-5 text-3xl font-black tracking-tight text-white">
+        <h1 className="mt-5 text-3xl font-black tracking-tight text-heading">
           NoWhatever
         </h1>
         <p className="mt-0.5 text-sm font-medium tracking-widest text-muted">
@@ -113,7 +113,7 @@ export default function InvitePage() {
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.1 }}
       >
-        <p className="text-center text-lg font-bold text-white">
+        <p className="text-center text-lg font-bold text-heading">
           {sceneConfig.inviteText}
         </p>
         <div className="flex items-center gap-2 text-sm text-muted">
@@ -141,7 +141,7 @@ export default function InvitePage() {
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
             <Users size={18} className="text-accent" />
           </div>
-          <span className="text-xs font-semibold text-gray-300">加入房间</span>
+          <span className="text-xs font-semibold text-secondary">加入房间</span>
           <span className="text-[10px] leading-tight text-muted text-center">
             和朋友一起
           </span>
@@ -153,7 +153,7 @@ export default function InvitePage() {
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
             <Heart size={18} className="text-amber-400" />
           </div>
-          <span className="text-xs font-semibold text-gray-300">各自滑卡</span>
+          <span className="text-xs font-semibold text-secondary">各自滑卡</span>
           <span className="text-[10px] leading-tight text-muted text-center">
             右滑喜欢的店
           </span>
@@ -165,7 +165,7 @@ export default function InvitePage() {
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
             <Sparkles size={18} className="text-rose-400" />
           </div>
-          <span className="text-xs font-semibold text-gray-300">匹配结果</span>
+          <span className="text-xs font-semibold text-secondary">匹配结果</span>
           <span className="text-[10px] leading-tight text-muted text-center">
             滑中同一家就去
           </span>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e6ad5ac..dbb8c48 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,13 +21,18 @@ export const viewport: Viewport = {
   userScalable: false,
 };
 
+const themeScript = `(function(){try{var t=localStorage.getItem("nowhatever-theme")||"system";var r=t;if(t==="system")r=window.matchMedia("(prefers-color-scheme:light)").matches?"light":"dark";document.documentElement.setAttribute("data-theme",r)}catch(e){}})()`;
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="zh-CN">
+    <html lang="zh-CN" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
       <body className={`${geistSans.variable} font-sans antialiased`}>
         <GlobalUserBadge />
         {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 52f5c60..7154bf6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,17 +23,17 @@ export default function LandingPage() {
       >
         <BrandLogo size={48} />
         <div className="text-center">
-          <h1 className="text-2xl font-black tracking-tight text-white">
+          <h1 className="text-2xl font-black tracking-tight text-heading">
             NoWhatever
           </h1>
-          <p className="mt-1 text-[11px] font-medium tracking-[0.2em] text-gray-500">
+          <p className="mt-1 text-[11px] font-medium tracking-[0.2em] text-muted">
             别说随便 · 亲密关系决策引擎
           </p>
         </div>
       </motion.div>
 
       <motion.p
-        className="mt-4 max-w-68 text-center text-sm leading-relaxed text-gray-400"
+        className="mt-4 max-w-68 text-center text-sm leading-relaxed text-tertiary"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.2 }}
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index 2e1cd3e..46f9fe8 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -365,7 +365,7 @@ export default function PanicPage() {
             {(selectedLocation || locationQuery) && !loading && (
               <button
                 onClick={clearLocation}
-                className="absolute right-2.5 flex h-5 w-5 items-center justify-center rounded-full text-muted hover:text-gray-300"
+                className="absolute right-2.5 flex h-5 w-5 items-center justify-center rounded-full text-muted hover:text-secondary"
               >
                 <X size={14} />
               </button>
@@ -467,7 +467,7 @@ export default function PanicPage() {
               {cuisine && !loading && (
                 <button
                   onClick={() => setCuisine("")}
-                  className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-muted hover:text-gray-300"
+                  className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-muted hover:text-secondary"
                 >
                   <X size={12} />
                 </button>
@@ -578,12 +578,12 @@ export default function PanicPage() {
               setError("");
             }}
             disabled={loading}
-            className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center text-lg font-semibold tracking-[0.3em] text-white outline-none ring-1 ring-border transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
+            className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center text-lg font-semibold tracking-[0.3em] text-heading outline-none ring-1 ring-border transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
           />
           <button
             type="submit"
             disabled={loading || roomCode.length !== 4}
-            className="flex h-11 w-11 items-center justify-center rounded-xl bg-elevated text-gray-300 ring-1 ring-subtle transition-colors hover:bg-subtle disabled:opacity-30"
+            className="flex h-11 w-11 items-center justify-center rounded-xl bg-elevated text-secondary ring-1 ring-subtle transition-colors hover:bg-subtle disabled:opacity-30"
           >
             <LogIn size={18} />
           </button>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 62fe551..f6296c8 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -266,7 +266,7 @@ export default function ProfilePage() {
       : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
 
   return (
-    <div className="min-h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
+    <div className="h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
       <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
         <button
           onClick={() => router.push("/")}
@@ -324,10 +324,10 @@ export default function ProfilePage() {
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-bold text-white">{profile.username}</h2>
+                  <h2 className="text-lg font-bold text-heading">{profile.username}</h2>
                   <button
                     onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }}
-                    className="text-muted transition-colors active:text-gray-300"
+                    className="text-muted transition-colors active:text-secondary"
                   >
                     <Edit3 size={13} />
                   </button>
@@ -385,7 +385,7 @@ export default function ProfilePage() {
             className="flex w-full items-center gap-2"
           >
             <Lock size={15} className="text-muted" />
-            <h3 className="text-sm font-semibold text-gray-300">修改密码</h3>
+            <h3 className="text-sm font-semibold text-secondary">修改密码</h3>
           </button>
 
           <AnimatePresence>
@@ -405,7 +405,7 @@ export default function ProfilePage() {
                         type={showPassword ? "text" : "password"}
                         value={currentPassword}
                         onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
-                        className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
+                        className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-heading outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
                       />
                       <button
                         type="button"
@@ -423,7 +423,7 @@ export default function ProfilePage() {
                       value={newPassword}
                       onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="至少 6 个字符"
-                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
                   <div>
@@ -433,7 +433,7 @@ export default function ProfilePage() {
                       value={confirmPassword}
                       onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="再次输入新密码"
-                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
 
@@ -465,7 +465,7 @@ export default function ProfilePage() {
         >
           <div className="flex items-center gap-2">
             <Mail size={15} className="text-muted" />
-            <h3 className="text-sm font-semibold text-gray-300">绑定邮箱</h3>
+            <h3 className="text-sm font-semibold text-secondary">绑定邮箱</h3>
             <span className="text-[10px] text-dim">（可选）</span>
           </div>
           <div className="mt-3 flex gap-2">
@@ -477,7 +477,7 @@ export default function ProfilePage() {
                 setEmail(e.target.value);
                 setEmailMsg("");
               }}
-              className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+              className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
             />
             <button
               onClick={handleSaveEmail}
@@ -507,7 +507,7 @@ export default function ProfilePage() {
           >
             <div className="flex items-center gap-2">
               <Clock size={15} className="text-muted" />
-              <h3 className="text-sm font-semibold text-gray-300">
+              <h3 className="text-sm font-semibold text-secondary">
                 决策记录 {history.length > 0 && `(${history.length})`}
               </h3>
             </div>
@@ -556,7 +556,7 @@ export default function ProfilePage() {
                           />
                         )}
                         <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <p className="truncate text-sm font-semibold text-white">{d.restaurantName}</p>
+                          <p className="truncate text-sm font-semibold text-heading">{d.restaurantName}</p>
                           <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                             <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
                             <span>{d.participants} 人参与</span>
@@ -585,7 +585,7 @@ export default function ProfilePage() {
           >
             <div className="flex items-center gap-2">
               <Star size={15} className="text-muted" />
-              <h3 className="text-sm font-semibold text-gray-300">
+              <h3 className="text-sm font-semibold text-secondary">
                 收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
               </h3>
             </div>
@@ -633,7 +633,7 @@ export default function ProfilePage() {
                             />
                           )}
                           <div className="flex min-w-0 flex-1 flex-col justify-center">
-                            <p className="truncate text-sm font-semibold text-white">{r.name}</p>
+                            <p className="truncate text-sm font-semibold text-heading">{r.name}</p>
                             <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                               <span className="flex items-center gap-0.5">
                                 <Star size={10} className="fill-amber-400 text-amber-400" />
@@ -684,7 +684,7 @@ export default function ProfilePage() {
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 7d027f0..2538574 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -93,7 +93,7 @@ export default function RoomPage() {
     return (
       <div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
         <p className="text-4xl">🍜</p>
-        <p className="text-base font-semibold text-gray-300">房间不存在或已过期</p>
+        <p className="text-base font-semibold text-secondary">房间不存在或已过期</p>
         <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
         <button
           onClick={() => router.push("/")}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 2201d2b..52c9119 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -133,7 +133,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
             transition={{ type: "spring", damping: 28, stiffness: 350 }}
           >
             <div className="mb-4 flex items-center justify-between">
-              <span className="text-lg font-bold text-white">欢迎</span>
+              <span className="text-lg font-bold text-heading">欢迎</span>
               <button
                 onClick={onClose}
                 className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
@@ -149,7 +149,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                   key={t}
                   onClick={() => switchTab(t)}
                   className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
-                    tab === t ? "text-white" : "text-muted"
+                    tab === t ? "text-heading" : "text-muted"
                   }`}
                 >
                   {tab === t && (
@@ -178,7 +178,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                 }}
                 placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
                 maxLength={16}
-                className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
               />
             </div>
 
@@ -194,12 +194,12 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                     setError("");
                   }}
                   placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
-                  className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                  className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-gray-300"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-secondary"
                 >
                   {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                 </button>
@@ -218,7 +218,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
                     setError("");
                   }}
                   placeholder="再次输入密码"
-                  className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                  className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
               </div>
             )}
diff --git a/src/components/GlobalUserBadge.tsx b/src/components/GlobalUserBadge.tsx
index b514e94..ff99244 100644
--- a/src/components/GlobalUserBadge.tsx
+++ b/src/components/GlobalUserBadge.tsx
@@ -3,8 +3,9 @@
 import { useState, useEffect, useCallback } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { motion } from "framer-motion";
-import { User } from "lucide-react";
+import { User, Sun, Moon, Monitor } from "lucide-react";
 import { getCachedProfile } from "@/lib/userId";
+import { type Theme, getStoredTheme, setStoredTheme } from "@/lib/theme";
 import AuthModal from "@/components/AuthModal";
 import type { UserProfile } from "@/types";
 
@@ -15,12 +16,17 @@ export default function GlobalUserBadge() {
   const pathname = usePathname();
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [showAuth, setShowAuth] = useState(false);
+  const [theme, setTheme] = useState<Theme>("system");
   const hidden = HIDDEN_PREFIXES.some((p) => pathname.startsWith(p));
 
   useEffect(() => {
     setProfile(getCachedProfile());
   }, [pathname]);
 
+  useEffect(() => {
+    setTheme(getStoredTheme());
+  }, []);
+
   useEffect(() => {
     const handler = () => setProfile(getCachedProfile());
     window.addEventListener("nowhatever_auth", handler);
@@ -32,30 +38,48 @@ export default function GlobalUserBadge() {
     setShowAuth(false);
   }, []);
 
+  const cycleTheme = useCallback(() => {
+    const order: Theme[] = ["system", "light", "dark"];
+    const next = order[(order.indexOf(theme) + 1) % 3];
+    setTheme(next);
+    setStoredTheme(next);
+  }, [theme]);
+
+  const ThemeIcon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
+  const themeLabel = theme === "light" ? "浅色" : theme === "dark" ? "深色" : "自动";
+
   if (hidden) return null;
 
   return (
     <>
       <motion.div
-        className="fixed right-4 top-3 z-40"
+        className="fixed right-4 top-3 z-40 flex items-center gap-1.5"
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ delay: 0.1, duration: 0.3 }}
       >
+        <button
+          onClick={cycleTheme}
+          className="flex h-8 items-center gap-1 rounded-full bg-surface/80 px-2.5 text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-heading"
+        >
+          <ThemeIcon size={13} />
+          <span className="text-[10px] font-medium">{themeLabel}</span>
+        </button>
+
         {profile ? (
           <button
             onClick={() => router.push("/profile")}
             className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated active:opacity-80"
           >
             <span className="text-base leading-none">{profile.avatar}</span>
-            <span className="max-w-20 truncate text-xs font-semibold text-gray-300">
+            <span className="max-w-20 truncate text-xs font-semibold text-secondary">
               {profile.username}
             </span>
           </button>
         ) : (
           <button
             onClick={() => setShowAuth(true)}
-            className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-gray-300"
+            className="flex h-8 items-center gap-1.5 rounded-full bg-surface/80 px-3 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-md transition-colors hover:bg-elevated hover:text-secondary"
           >
             <User size={13} />
             登录
diff --git a/src/components/LeaveConfirmModal.tsx b/src/components/LeaveConfirmModal.tsx
index 3920615..db8d566 100644
--- a/src/components/LeaveConfirmModal.tsx
+++ b/src/components/LeaveConfirmModal.tsx
@@ -45,7 +45,7 @@ export default function LeaveConfirmModal({
                 <LogOut size={22} className="text-rose-400" />
               </div>
 
-              <h2 className="mt-4 text-base font-bold text-white">
+              <h2 className="mt-4 text-base font-bold text-heading">
                 确定要退出房间吗？
               </h2>
               <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
@@ -55,7 +55,7 @@ export default function LeaveConfirmModal({
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={onCancel}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   继续滑卡
                 </button>
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index fb4c6c2..9e9f60c 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -82,7 +82,7 @@ function NoMatchResult({
       </motion.div>
 
       <motion.h1
-        className="mt-4 text-3xl font-black text-white"
+        className="mt-4 text-3xl font-black text-heading"
         initial={{ y: 30, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.35 }}
@@ -153,10 +153,10 @@ function RunnerUpCard({
         />
       )}
       <div className="flex min-w-0 flex-1 flex-col justify-center">
-        <p className="truncate text-sm font-bold text-white">
+        <p className="truncate text-sm font-bold text-heading">
           {restaurant.name}
         </p>
-        <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
+        <div className="mt-1 flex items-center gap-2 text-xs text-tertiary">
           <span className="flex items-center gap-0.5">
             <Star size={11} className="fill-yellow-300 text-yellow-300" />
             {restaurant.rating}
@@ -320,7 +320,7 @@ export default function MatchResult({
         </motion.div>
 
         <motion.h1
-          className="mt-3 text-center text-4xl font-black text-white"
+          className="mt-3 text-center text-4xl font-black text-heading"
           initial={{ y: 30, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.35 }}
@@ -406,7 +406,7 @@ export default function MatchResult({
           )}
           <div className="p-4">
             <div className="flex items-start justify-between gap-2">
-              <h2 className="text-lg font-bold leading-tight text-white">
+              <h2 className="text-lg font-bold leading-tight text-heading">
                 {restaurant.name}
               </h2>
               {restaurant.category && (
@@ -484,7 +484,7 @@ export default function MatchResult({
           {restaurant.tel && (
             <motion.a
               href={`tel:${restaurant.tel}`}
-              className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
+              className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
               whileTap={{ scale: 0.95 }}
             >
               <Phone size={15} />
@@ -494,7 +494,7 @@ export default function MatchResult({
 
           <motion.button
             onClick={handleOpenShareCard}
-            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
+            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
             whileTap={{ scale: 0.95 }}
           >
             <Share2 size={15} />
@@ -510,7 +510,7 @@ export default function MatchResult({
             animate={{ y: 0, opacity: 1 }}
             transition={{ delay: 0.75 }}
           >
-            <p className="text-sm font-medium text-gray-300">
+            <p className="text-sm font-medium text-secondary">
               注册后，决策记录和收藏不会丢失
             </p>
             <p className="mt-1 text-xs text-muted">
@@ -577,7 +577,7 @@ export default function MatchResult({
                 <motion.button
                   onClick={() => onNarrow(narrowIds)}
                   disabled={resetting}
-                  className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+                  className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                   whileTap={{ scale: 0.95 }}
                 >
                   <Swords size={15} />
@@ -601,7 +601,7 @@ export default function MatchResult({
           <motion.button
             onClick={onReset}
             disabled={resetting}
-            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-secondary ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
             whileTap={{ scale: 0.95 }}
           >
             <RotateCcw size={12} className={resetting ? "animate-spin" : ""} />
@@ -609,7 +609,7 @@ export default function MatchResult({
           </motion.button>
           <motion.button
             onClick={() => router.push("/")}
-            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle"
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-full bg-elevated py-2.5 text-xs font-bold text-secondary ring-1 ring-border transition-colors hover:bg-subtle"
             whileTap={{ scale: 0.95 }}
           >
             <RefreshCw size={12} />
@@ -642,7 +642,7 @@ export default function MatchResult({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-border"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-border"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index a0bf83d..0e3d77d 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -88,7 +88,7 @@ export default function QrInviteModal({
             </button>
 
             <div className="flex flex-col items-center">
-              <div className="flex items-center gap-2 text-white">
+              <div className="flex items-center gap-2 text-heading">
                 <QrCode size={18} className="text-accent" />
                 <h2 className="text-lg font-bold">邀请饭搭子</h2>
               </div>
@@ -116,7 +116,7 @@ export default function QrInviteModal({
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={handleCopy}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   <Copy size={15} />
                   复制链接
diff --git a/src/components/RestaurantCard.tsx b/src/components/RestaurantCard.tsx
index 0e54e9b..3569dfb 100644
--- a/src/components/RestaurantCard.tsx
+++ b/src/components/RestaurantCard.tsx
@@ -172,7 +172,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
 
       <div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
         <div className="flex items-start justify-between gap-2">
-          <h2 className="text-lg font-bold leading-tight text-white">
+          <h2 className="text-lg font-bold leading-tight text-heading">
             {restaurant.name}
           </h2>
           <div className="mt-0.5 flex shrink-0 gap-1.5">
diff --git a/src/components/RoomManageModal.tsx b/src/components/RoomManageModal.tsx
index 7e3211f..dbc155a 100644
--- a/src/components/RoomManageModal.tsx
+++ b/src/components/RoomManageModal.tsx
@@ -118,7 +118,7 @@ export default function RoomManageModal({
 
             <div className="flex items-center gap-2">
               <Crown size={18} className="text-amber-400" />
-              <h2 className="text-lg font-bold text-white">房间管理</h2>
+              <h2 className="text-lg font-bold text-heading">房间管理</h2>
             </div>
             <p className="mt-1 text-xs text-muted">
               房间号 {roomId}
@@ -132,7 +132,7 @@ export default function RoomManageModal({
                 className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
                   locked
                     ? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
-                    : "bg-elevated text-gray-300 ring-1 ring-border active:bg-subtle"
+                    : "bg-elevated text-secondary ring-1 ring-border active:bg-subtle"
                 }`}
               >
                 {loading === "lock" || loading === "unlock" ? (
@@ -179,7 +179,7 @@ export default function RoomManageModal({
                               房主
                             </span>
                           )}
-                          <span className="truncate text-xs font-medium text-gray-400">
+                          <span className="truncate text-xs font-medium text-tertiary">
                             {displayName}
                           </span>
                         </div>
@@ -211,7 +211,7 @@ export default function RoomManageModal({
                               </button>
                               <button
                                 onClick={() => setConfirmKick(null)}
-                                className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-gray-400 transition-colors active:bg-elevated"
+                                className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-tertiary transition-colors active:bg-elevated"
                               >
                                 取消
                               </button>
@@ -255,7 +255,7 @@ export default function RoomManageModal({
                     </button>
                     <button
                       onClick={() => setConfirmEnd(false)}
-                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-gray-400 transition-colors active:bg-subtle"
+                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-tertiary transition-colors active:bg-subtle"
                     >
                       再等等
                     </button>
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 63eed2e..9c8b822 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -67,7 +67,7 @@ export default function TopNav({
           )}
         </div>
 
-        <h1 className="text-center text-base font-bold tracking-tight text-white">
+        <h1 className="text-center text-base font-bold tracking-tight text-heading">
           <span className="block leading-tight">NoWhatever</span>
           <span className="block text-[10px] font-medium tracking-widest text-muted">
             别说随便
@@ -78,7 +78,7 @@ export default function TopNav({
           {locked && (
             <Lock size={12} className="text-amber-500" />
           )}
-          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-gray-400">
+          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-tertiary">
             {roomId}
           </span>
           <div className="flex items-center gap-0.5">
@@ -87,7 +87,7 @@ export default function TopNav({
           </div>
           <button
             onClick={onExit}
-            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-gray-300"
+            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-secondary"
             aria-label="退出房间"
           >
             <LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
+            className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..dfddbd9
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,37 @@
+export type Theme = "light" | "dark" | "system";
+
+const STORAGE_KEY = "nowhatever-theme";
+
+export function getStoredTheme(): Theme {
+  if (typeof window === "undefined") return "system";
+  return (localStorage.getItem(STORAGE_KEY) as Theme) || "system";
+}
+
+export function setStoredTheme(theme: Theme): void {
+  localStorage.setItem(STORAGE_KEY, theme);
+  applyTheme(theme);
+}
+
+function resolveTheme(theme: Theme): "light" | "dark" {
+  if (theme !== "system") return theme;
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
+}
+
+export function applyTheme(theme: Theme): void {
+  const resolved = resolveTheme(theme);
+  document.documentElement.setAttribute("data-theme", resolved);
+}
+
+export function initTheme(): void {
+  const theme = getStoredTheme();
+  applyTheme(theme);
+
+  if (theme === "system") {
+    window
+      .matchMedia("(prefers-color-scheme: light)")
+      .addEventListener("change", () => applyTheme("system"));
+  }
+}

From e86f643c26a7822c02d720315a03f822ade252fd Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 15:18:22 +0800
Subject: [PATCH 18/66] =?UTF-8?q?ui:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E7=A9=BA=E7=8A=B6=E6=80=81=E6=8F=92=E5=9B=BE=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=8C=E6=9B=BF=E6=8D=A2=E7=BA=AF=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E4=B8=BA=E5=9B=BE=E6=A0=87=E5=8A=A8=E7=94=BB=20+=20CTA=20?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

提取可复用 EmptyState 组件，决策记录和收藏餐厅空状态
增加浮动图标、光晕动画和"去创建第一个房间"引导按钮
---
 src/app/profile/page.tsx      | 25 +++++++++++----
 src/components/EmptyState.tsx | 58 +++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 src/components/EmptyState.tsx

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index f6296c8..fbb50ac 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -20,7 +20,10 @@ import {
   Eye,
   EyeOff,
   Zap,
+  ClipboardList,
+  Heart,
 } from "lucide-react";
+import EmptyState from "@/components/EmptyState";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
 import { getAvatarBg, AVATARS } from "@/lib/avatars";
 import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Restaurant } from "@/types";
@@ -534,9 +537,14 @@ export default function ProfilePage() {
                     <Loader2 size={18} className="animate-spin text-muted" />
                   </div>
                 ) : history.length === 0 ? (
-                  <p className="py-6 text-center text-xs text-muted">
-                    还没有决策记录
-                  </p>
+                  <EmptyState
+                    icon={ClipboardList}
+                    title="还没有决策记录"
+                    subtitle="创建房间开始一起选餐厅"
+                    ctaLabel="去创建第一个房间"
+                    onCta={() => router.push("/blindbox")}
+                    color="purple"
+                  />
                 ) : (
                   <div className="mt-3 flex flex-col gap-2">
                     {history.map((d) => (
@@ -612,9 +620,14 @@ export default function ProfilePage() {
                     <Loader2 size={18} className="animate-spin text-muted" />
                   </div>
                 ) : favorites.length === 0 ? (
-                  <p className="py-6 text-center text-xs text-muted">
-                    还没有收藏的餐厅
-                  </p>
+                  <EmptyState
+                    icon={Heart}
+                    title="还没有收藏的餐厅"
+                    subtitle="在匹配结果中收藏喜欢的店"
+                    ctaLabel="去创建第一个房间"
+                    onCta={() => router.push("/blindbox")}
+                    color="amber"
+                  />
                 ) : (
                   <div className="mt-3 flex flex-col gap-2">
                     {favorites.map((f) => {
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
new file mode 100644
index 0000000..8593294
--- /dev/null
+++ b/src/components/EmptyState.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { LucideIcon } from "lucide-react";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  subtitle?: string;
+  ctaLabel?: string;
+  onCta?: () => void;
+  color?: string;
+}
+
+export default function EmptyState({
+  icon: Icon,
+  title,
+  subtitle,
+  ctaLabel,
+  onCta,
+  color = "purple",
+}: EmptyStateProps) {
+  const colorMap: Record<string, { glow: string; icon: string; btn: string; btnHover: string }> = {
+    purple: { glow: "bg-purple-600/15", icon: "text-purple-400/60", btn: "bg-purple-600 hover:bg-purple-500", btnHover: "" },
+    amber:  { glow: "bg-amber-500/15",  icon: "text-amber-400/60",  btn: "bg-amber-600 hover:bg-amber-500",   btnHover: "" },
+    rose:   { glow: "bg-rose-500/15",   icon: "text-rose-400/60",   btn: "bg-rose-600 hover:bg-rose-500",     btnHover: "" },
+    sky:    { glow: "bg-sky-500/15",    icon: "text-sky-400/60",    btn: "bg-sky-600 hover:bg-sky-500",       btnHover: "" },
+  };
+  const c = colorMap[color] ?? colorMap.purple;
+
+  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>
+
+      <p className="mt-3 text-sm font-semibold text-secondary">{title}</p>
+      {subtitle && (
+        <p className="mt-1 text-xs text-muted">{subtitle}</p>
+      )}
+
+      {ctaLabel && onCta && (
+        <motion.button
+          onClick={onCta}
+          className={`mt-4 rounded-lg px-4 py-1.5 text-xs font-semibold text-white transition-colors ${c.btn}`}
+          whileTap={{ scale: 0.95 }}
+        >
+          {ctaLabel}
+        </motion.button>
+      )}
+    </div>
+  );
+}

From 4ce6ea469c6dbe26480fabeaa925dd96eda88a31 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 15:22:29 +0800
Subject: [PATCH 19/66] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=20Error=20Boundary=20=E5=92=8C=E9=A4=90=E5=8E=85?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8A=A0=E8=BD=BD=E5=A4=B1=E8=B4=A5=20fallba?=
 =?UTF-8?q?ck?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- error.tsx: 路由级错误边界，提供重试和返回首页操作
- global-error.tsx: 根布局级兜底，纯内联样式避免依赖加载
- RestaurantImage: 可复用图片组件，加载失败显示餐具占位图标
- 替换 RestaurantCard、MatchResult、profile 中所有餐厅图片
---
 src/app/error.tsx                  | 58 ++++++++++++++++++++++++++++++
 src/app/global-error.tsx           | 45 +++++++++++++++++++++++
 src/app/profile/page.tsx           |  7 ++--
 src/components/MatchResult.tsx     |  7 ++--
 src/components/RestaurantCard.tsx  |  7 ++--
 src/components/RestaurantImage.tsx | 50 ++++++++++++++++++++++++++
 6 files changed, 162 insertions(+), 12 deletions(-)
 create mode 100644 src/app/error.tsx
 create mode 100644 src/app/global-error.tsx
 create mode 100644 src/components/RestaurantImage.tsx

diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..0204dd2
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect } from "react";
+import { motion } from "framer-motion";
+import { AlertTriangle, RotateCcw, Home } from "lucide-react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[ErrorBoundary]", error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6">
+      <motion.div
+        className="flex flex-col items-center text-center"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+      >
+        <motion.div
+          className="relative flex h-20 w-20 items-center justify-center"
+          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">
+          页面遇到了意外错误，请重试或返回首页
+        </p>
+
+        <div className="mt-8 flex gap-3">
+          <button
+            onClick={reset}
+            className="flex items-center gap-1.5 rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-rose-500"
+          >
+            <RotateCcw size={15} />
+            重试
+          </button>
+          <a
+            href="/"
+            className="flex items-center gap-1.5 rounded-xl bg-surface px-5 py-2.5 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
+          >
+            <Home size={15} />
+            首页
+          </a>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
new file mode 100644
index 0000000..6cfba47
--- /dev/null
+++ b/src/app/global-error.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[GlobalError]", error);
+  }, [error]);
+
+  return (
+    <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>
+          <h1 style={{ marginTop: "1.5rem", fontSize: "1.25rem", fontWeight: 700 }}>应用崩溃了</h1>
+          <p style={{ marginTop: "0.5rem", fontSize: "0.875rem", color: "#a3a3a3", textAlign: "center" }}>
+            发生了严重错误，请尝试刷新页面
+          </p>
+          <button
+            onClick={reset}
+            style={{
+              marginTop: "2rem",
+              padding: "0.625rem 1.5rem",
+              fontSize: "0.875rem",
+              fontWeight: 600,
+              color: "#fff",
+              background: "#e11d48",
+              border: "none",
+              borderRadius: "0.75rem",
+              cursor: "pointer",
+            }}
+          >
+            刷新重试
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index fbb50ac..ba1915d 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -24,6 +24,7 @@ import {
   Heart,
 } from "lucide-react";
 import EmptyState from "@/components/EmptyState";
+import RestaurantImage from "@/components/RestaurantImage";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
 import { getAvatarBg, AVATARS } from "@/lib/avatars";
 import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Restaurant } from "@/types";
@@ -556,11 +557,10 @@ export default function ProfilePage() {
                         className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
                       >
                         {firstImage(d.restaurantData) && (
-                          <img
+                          <RestaurantImage
                             src={firstImage(d.restaurantData)}
                             alt={d.restaurantName}
                             className="h-12 w-12 shrink-0 rounded-lg object-cover"
-                            referrerPolicy="no-referrer"
                           />
                         )}
                         <div className="flex min-w-0 flex-1 flex-col justify-center">
@@ -638,11 +638,10 @@ export default function ProfilePage() {
                           className="flex gap-3 rounded-xl bg-elevated p-2.5"
                         >
                           {firstImage(r) && (
-                            <img
+                            <RestaurantImage
                               src={firstImage(r)}
                               alt={r.name}
                               className="h-12 w-12 shrink-0 rounded-lg object-cover"
-                              referrerPolicy="no-referrer"
                             />
                           )}
                           <div className="flex min-w-0 flex-1 flex-col justify-center">
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 9e9f60c..a736f6c 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -32,6 +32,7 @@ import {
 import { fireCelebration, playChime } from "@/lib/celebrate";
 import { isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
+import RestaurantImage from "@/components/RestaurantImage";
 import AuthModal from "@/components/AuthModal";
 
 interface MatchResultProps {
@@ -145,11 +146,10 @@ function RunnerUpCard({
       className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
     >
       {restaurant.images?.[0] && (
-        <img
+        <RestaurantImage
           src={restaurant.images[0]}
           alt={restaurant.name}
           className="h-16 w-16 shrink-0 rounded-lg object-cover"
-          referrerPolicy="no-referrer"
         />
       )}
       <div className="flex min-w-0 flex-1 flex-col justify-center">
@@ -397,11 +397,10 @@ export default function MatchResult({
             </motion.button>
           )}
           {restaurant.images?.[0] && (
-            <img
+            <RestaurantImage
               src={restaurant.images[0]}
               alt={restaurant.name}
               className="h-44 w-full object-cover"
-              referrerPolicy="no-referrer"
             />
           )}
           <div className="p-4">
diff --git a/src/components/RestaurantCard.tsx b/src/components/RestaurantCard.tsx
index 3569dfb..e4a810a 100644
--- a/src/components/RestaurantCard.tsx
+++ b/src/components/RestaurantCard.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState, useEffect } from "react";
 import { Star, MapPin, Clock, ExternalLink, Flame, Bookmark, ChevronLeft, ChevronRight } from "lucide-react";
 import { Restaurant } from "@/types";
 import { getUserId, isRegistered } from "@/lib/userId";
+import RestaurantImage from "@/components/RestaurantImage";
 
 interface RestaurantCardProps {
   restaurant: Restaurant;
@@ -57,16 +58,15 @@ function ImageGallery({ images, name }: { images: string[]; name: string }) {
 
   return (
     <div className="relative h-full w-full" onClick={handleTap} onPointerDown={stopAll}>
-      <img
+      <RestaurantImage
         src={images[idx]}
         alt={name}
         className="absolute inset-0 h-full w-full object-cover"
         draggable={false}
-        referrerPolicy="no-referrer"
       />
 
       {fadingOut !== null && (
-        <img
+        <RestaurantImage
           key={fadingOut}
           src={images[fadingOut]}
           alt=""
@@ -74,7 +74,6 @@ function ImageGallery({ images, name }: { images: string[]; name: string }) {
           style={{ animation: "img-fade-out 280ms ease-out forwards" }}
           onAnimationEnd={() => setFadingOut(null)}
           draggable={false}
-          referrerPolicy="no-referrer"
         />
       )}
 
diff --git a/src/components/RestaurantImage.tsx b/src/components/RestaurantImage.tsx
new file mode 100644
index 0000000..f41a558
--- /dev/null
+++ b/src/components/RestaurantImage.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { UtensilsCrossed } from "lucide-react";
+
+interface RestaurantImageProps {
+  src: string;
+  alt: string;
+  className?: string;
+  draggable?: boolean;
+  style?: React.CSSProperties;
+  onAnimationEnd?: () => void;
+}
+
+export default function RestaurantImage({
+  src,
+  alt,
+  className = "",
+  draggable,
+  style,
+  onAnimationEnd,
+}: RestaurantImageProps) {
+  const [failed, setFailed] = useState(false);
+
+  const handleError = useCallback(() => setFailed(true), []);
+
+  if (failed) {
+    return (
+      <div
+        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} />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={className}
+      draggable={draggable}
+      style={style}
+      referrerPolicy="no-referrer"
+      onError={handleError}
+      onAnimationEnd={onAnimationEnd}
+    />
+  );
+}

From 798b883250e5d2ececeb03219a00bff7091e71b4 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 15:50:51 +0800
Subject: [PATCH 20/66] =?UTF-8?q?ui:=20=E6=88=BF=E9=97=B4=E9=A1=B5?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96=20=E2=80=94=20TopNav=20?=
 =?UTF-8?q?=E9=87=8D=E6=8E=92=E3=80=81=E8=BF=9B=E5=BA=A6=E8=B4=B4=E8=BF=91?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E3=80=81=E6=8C=89=E9=92=AE=E9=97=B4=E8=B7=9D?=
 =?UTF-8?q?=E6=94=B6=E7=B4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TopNav: 退出按钮移到最左侧，房间号合并到邀请按钮，移除右侧内容避免与全局徽章重叠
- SwipeDeck: 移除绿色进度条，UserProgressBar 始终显示并贴在卡片正上方
- ActionButtons: 缩小与卡片的垂直间距
---
 src/components/ActionButtons.tsx |   2 +-
 src/components/SwipeDeck.tsx     | 112 ++++++++++++++-----------------
 src/components/TopNav.tsx        |  38 ++++-------
 3 files changed, 64 insertions(+), 88 deletions(-)

diff --git a/src/components/ActionButtons.tsx b/src/components/ActionButtons.tsx
index 29f600f..e9e6f8b 100644
--- a/src/components/ActionButtons.tsx
+++ b/src/components/ActionButtons.tsx
@@ -14,7 +14,7 @@ export default function ActionButtons({
   disabled,
 }: ActionButtonsProps) {
   return (
-    <div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
+    <div className="relative z-10 -mt-2 flex items-center justify-center gap-4 pb-5">
       <motion.button
         className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-rose-500/10 ring-1 ring-rose-500/20 disabled:opacity-40"
         whileTap={{ scale: 0.85 }}
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index fc40e51..494d7a8 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -16,48 +16,59 @@ function UserProgressBar({
   localIndex,
   total,
   userProfiles,
+  onUndo,
 }: {
   userId: string;
   swipeCounts: Record<string, number>;
   localIndex: number;
   total: number;
   userProfiles: Record<string, UserProfile>;
+  onUndo: () => void;
 }) {
   const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
-  if (others.length === 0) return null;
 
   const myProfile = userProfiles[userId];
   const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
   const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
 
   return (
-    <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
-      <span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
-        <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
-          {myAvatar}
-        </span>
-        你 {localIndex}/{total}
-      </span>
-      {others.map(([id, count]) => {
-        const finished = count >= total;
-        const profile = userProfiles[id];
-        const emoji = profile?.avatar ?? getAvatar(id).emoji;
-        const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
-        const label = profile?.username ?? "";
-        return (
-          <span
-            key={id}
-            className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
-          >
-            <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
-              {emoji}
-            </span>
-            {label && <span className="max-w-12 truncate">{label}</span>}
-            {count}/{total}
-            {finished && <Check size={10} className="text-emerald-400" />}
+    <div className="flex items-center gap-x-3">
+      <div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
+        <span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
+          <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
+            {myAvatar}
           </span>
-        );
-      })}
+          你 {localIndex}/{total}
+        </span>
+        {others.map(([id, count]) => {
+          const finished = count >= total;
+          const profile = userProfiles[id];
+          const emoji = profile?.avatar ?? getAvatar(id).emoji;
+          const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
+          const label = profile?.username ?? "";
+          return (
+            <span
+              key={id}
+              className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
+            >
+              <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
+                {emoji}
+              </span>
+              {label && <span className="max-w-12 truncate">{label}</span>}
+              {count}/{total}
+              {finished && <Check size={10} className="text-emerald-400" />}
+            </span>
+          );
+        })}
+      </div>
+      <button
+        onClick={onUndo}
+        disabled={localIndex === 0}
+        className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
+      >
+        <Undo2 size={12} />
+        撤回
+      </button>
     </div>
   );
 }
@@ -323,43 +334,20 @@ export default function SwipeDeck({
 
   return (
     <>
-      {!allSwiped && !resolvedMatchId && (
-        <div className="mx-auto w-full max-w-sm px-4 pb-1">
-          <div className="flex items-center gap-2">
-            <div className="h-1 flex-1 overflow-hidden rounded-full bg-elevated">
-              <motion.div
-                className="h-full rounded-full bg-emerald-400"
-                initial={{ width: 0 }}
-                animate={{
-                  width: `${((currentIndex) / restaurants.length) * 100}%`,
-                }}
-                transition={{ type: "spring", stiffness: 300, damping: 30 }}
-              />
-            </div>
-            <span className="shrink-0 text-[11px] tabular-nums text-muted">
-              {currentIndex}/{restaurants.length}
-            </span>
-            <button
-              onClick={handleUndo}
-              disabled={currentIndex === 0}
-              className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
-            >
-              <Undo2 size={12} />
-              撤回
-            </button>
-          </div>
-          <UserProgressBar
-            userId={userId}
-            swipeCounts={swipeCounts}
-            localIndex={currentIndex}
-            total={restaurants.length}
-            userProfiles={userProfiles}
-          />
-        </div>
-      )}
-
       <div className="relative flex flex-1 items-center justify-center px-4">
           <div className="relative h-[60vh] w-full max-w-sm">
+          {!allSwiped && !resolvedMatchId && (
+            <div className="absolute inset-x-0 bottom-full mb-2">
+              <UserProgressBar
+                userId={userId}
+                swipeCounts={swipeCounts}
+                localIndex={currentIndex}
+                total={restaurants.length}
+                userProfiles={userProfiles}
+                onUndo={handleUndo}
+              />
+            </div>
+          )}
           {currentIndex === 0 && !resolvedMatchId && guideVisible && (
             <SwipeGuide onDismiss={() => setGuideVisible(false)} />
           )}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 9c8b822..e078c08 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { Users, QrCode, LogOut, Crown, Lock } from "lucide-react";
+import { QrCode, LogOut, Crown, Lock } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import QrInviteModal from "./QrInviteModal";
 import RoomManageModal from "./RoomManageModal";
@@ -10,7 +10,7 @@ import { getSceneConfig } from "@/lib/sceneConfig";
 
 interface TopNavProps {
   roomId: string;
-  userCount: number;
+  userCount?: number;
   onExit?: () => void;
   isCreator?: boolean;
   userId?: string;
@@ -47,14 +47,21 @@ export default function TopNav({
 
   return (
     <>
-      <nav className="relative z-10 flex h-14 items-center justify-between pl-4 pr-24">
+      <nav className="relative z-10 flex h-14 items-center px-4">
         <div className="flex items-center gap-1.5">
+          <button
+            onClick={onExit}
+            className="flex items-center justify-center rounded-full p-1.5 text-muted transition-colors active:bg-elevated active:text-secondary"
+            aria-label="退出房间"
+          >
+            <LogOut size={15} />
+          </button>
           <button
             onClick={() => setShowQr(true)}
             className="flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent transition-colors active:bg-accent/25"
           >
             <QrCode size={13} />
-            邀请
+            邀请（{roomId}）
           </button>
           {isCreator && (
             <button
@@ -63,36 +70,17 @@ export default function TopNav({
             >
               <Crown size={13} />
               管理
+              {locked && <Lock size={11} />}
             </button>
           )}
         </div>
 
-        <h1 className="text-center text-base font-bold tracking-tight text-heading">
+        <h1 className="pointer-events-none absolute inset-x-0 text-center text-base font-bold tracking-tight text-heading">
           <span className="block leading-tight">NoWhatever</span>
           <span className="block text-[10px] font-medium tracking-widest text-muted">
             别说随便
           </span>
         </h1>
-
-        <div className="flex items-center justify-end gap-1.5 text-xs text-muted">
-          {locked && (
-            <Lock size={12} className="text-amber-500" />
-          )}
-          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-tertiary">
-            {roomId}
-          </span>
-          <div className="flex items-center gap-0.5">
-            <Users size={13} />
-            <span className="font-semibold text-accent">{userCount}</span>
-          </div>
-          <button
-            onClick={onExit}
-            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-secondary"
-            aria-label="退出房间"
-          >
-            <LogOut size={15} />
-          </button>
-        </div>
       </nav>
 
       <AnimatePresence>

From b2b18327cc7989471f35b496ddaa16fa1dc60438 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:11:01 +0800
Subject: [PATCH 21/66] =?UTF-8?q?ui:=20=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
 =?UTF-8?q?=E6=9B=BF=E4=BB=A3=E5=85=A8=E9=83=A8=E9=A1=B5=E9=9D=A2=E7=BA=A7?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=20spinner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 Skeleton 组件库：Skeleton、SkeletonCircle 基础元素 + 5 个业务骨架
  （SwipeDeck、ProfileCard、RecordItem、BlindboxRoom、BlindboxList、RoomCard）
- 替换 room、profile、blindbox 列表、blindbox 房间、invite 5 个页面的加载态
- 替换 profile 历史记录 / 收藏列表的内联加载 spinner
- 更新 project-conventions.mdc：新增 Loading States 规范，
  要求页面级和列表级加载必须使用骨架屏
---
 .cursor/rules/project-conventions.mdc |   8 ++
 src/app/blindbox/[code]/page.tsx      |   7 +-
 src/app/blindbox/page.tsx             |  12 +--
 src/app/invite/[id]/page.tsx          |  20 +++-
 src/app/profile/page.tsx              |  33 ++++--
 src/app/room/[id]/page.tsx            |   8 +-
 src/components/Skeleton.tsx           | 141 ++++++++++++++++++++++++++
 7 files changed, 200 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Skeleton.tsx

diff --git a/.cursor/rules/project-conventions.mdc b/.cursor/rules/project-conventions.mdc
index 695b350..2eaf669 100644
--- a/.cursor/rules/project-conventions.mdc
+++ b/.cursor/rules/project-conventions.mdc
@@ -35,6 +35,14 @@ alwaysApply: true
 - `overflow-y-auto scrollbar-none` for scrollable pages
 - Extract reusable UI patterns into shared components (modals, cards, empty states)
 
+## Loading States
+
+- **Page-level and list-level loading**: always use skeleton screens (`src/components/Skeleton.tsx`), never bare spinners
+- Skeleton shape should mimic the actual content layout (cards, list items, avatars, text lines)
+- Compose page skeletons from reusable skeleton primitives: `Skeleton`, `SkeletonCircle`, `RecordItemSkeleton`, `RoomCardSkeleton`, etc.
+- **Button-level loading** (submit, save, join): keep using inline `Loader2` spinner — skeleton screens don't apply to buttons
+- When adding a new page or async data section, always include a skeleton loading state
+
 ## API Routes
 
 - Located in `src/app/api/`
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index cfc9ff0..25e5f93 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -20,6 +20,7 @@ import {
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
+import { BlindboxRoomSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
 
 interface RoomInfo {
@@ -285,11 +286,7 @@ export default function BlindboxRoomPage() {
   };
 
   if (pageLoading) {
-    return (
-      <div className="flex min-h-dvh items-center justify-center bg-background">
-        <Loader2 size={24} className="animate-spin text-purple-400" />
-      </div>
-    );
+    return <BlindboxRoomSkeleton />;
   }
 
   if (!room) return null;
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 0eb27b6..86f5c52 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import AuthModal from "@/components/AuthModal";
+import { BlindboxListSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
 
 interface RoomSummary {
@@ -216,16 +217,7 @@ export default function BlindboxLobbyPage() {
             </p>
           </motion.div>
         ) : loading ? (
-          /* ============ Loading ============ */
-          <motion.div
-            key="loading"
-            className="mt-20 flex flex-col items-center gap-3"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-          >
-            <Loader2 size={24} className="animate-spin text-purple-400" />
-            <p className="text-xs text-muted">加载中...</p>
-          </motion.div>
+          <BlindboxListSkeleton />
         ) : rooms.length === 0 ? (
           /* ============ Layer 2: Logged in, no rooms — Create first ============ */
           <motion.div
diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 796037f..859a1fc 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -13,6 +13,7 @@ import {
   Coffee,
 } from "lucide-react";
 import { getUserId } from "@/lib/userId";
+import { Skeleton, SkeletonCircle } from "@/components/Skeleton";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import type { SceneType } from "@/types";
 
@@ -61,8 +62,23 @@ export default function InvitePage() {
 
   if (status === "loading") {
     return (
-      <div className="flex min-h-dvh flex-col items-center justify-center bg-background">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
+      <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6">
+        <Skeleton className="h-16 w-16 rounded-2xl" />
+        <Skeleton className="mt-5 h-8 w-40" />
+        <Skeleton className="mt-2 h-4 w-24" />
+        <div className="mt-8 w-full max-w-xs rounded-2xl bg-surface px-6 py-5 ring-1 ring-border">
+          <div className="flex flex-col items-center gap-3">
+            <Skeleton className="h-5 w-44" />
+            <Skeleton className="h-7 w-24 rounded-full" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+        </div>
+        <div className="mt-6 flex gap-3">
+          <SkeletonCircle className="h-10 w-10" />
+          <SkeletonCircle className="h-10 w-10" />
+          <SkeletonCircle className="h-10 w-10" />
+        </div>
+        <Skeleton className="mt-8 h-12 w-full max-w-xs rounded-xl" />
       </div>
     );
   }
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index ba1915d..ad22db1 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -25,6 +25,7 @@ import {
 } from "lucide-react";
 import EmptyState from "@/components/EmptyState";
 import RestaurantImage from "@/components/RestaurantImage";
+import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
 import { getAvatarBg, AVATARS } from "@/lib/avatars";
 import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Restaurant } from "@/types";
@@ -256,8 +257,26 @@ export default function ProfilePage() {
 
   if (loading) {
     return (
-      <div className="flex min-h-dvh items-center justify-center bg-background">
-        <Loader2 size={24} className="animate-spin text-muted" />
+      <div className="h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
+        <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
+          <div className="h-8 w-8" />
+          <h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
+        </nav>
+        <div className="mx-auto max-w-sm px-5">
+          <ProfileCardSkeleton />
+          <div className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border">
+            <div className="flex flex-col gap-2">
+              <RecordItemSkeleton />
+              <RecordItemSkeleton />
+            </div>
+          </div>
+          <div className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border">
+            <div className="flex flex-col gap-2">
+              <RecordItemSkeleton />
+              <RecordItemSkeleton />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
@@ -534,8 +553,9 @@ export default function ProfilePage() {
                 className="overflow-hidden"
               >
                 {historyLoading ? (
-                  <div className="flex justify-center py-6">
-                    <Loader2 size={18} className="animate-spin text-muted" />
+                  <div className="mt-3 flex flex-col gap-2">
+                    <RecordItemSkeleton />
+                    <RecordItemSkeleton />
                   </div>
                 ) : history.length === 0 ? (
                   <EmptyState
@@ -616,8 +636,9 @@ export default function ProfilePage() {
                 className="overflow-hidden"
               >
                 {favLoading ? (
-                  <div className="flex justify-center py-6">
-                    <Loader2 size={18} className="animate-spin text-muted" />
+                  <div className="mt-3 flex flex-col gap-2">
+                    <RecordItemSkeleton />
+                    <RecordItemSkeleton />
                   </div>
                 ) : favorites.length === 0 ? (
                   <EmptyState
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 2538574..9b42599 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback, useRef } from "react";
 import { useParams, useRouter } from "next/navigation";
 import TopNav from "@/components/TopNav";
 import SwipeDeck from "@/components/SwipeDeck";
+import { SwipeDeckSkeleton } from "@/components/Skeleton";
 import LeaveConfirmModal from "@/components/LeaveConfirmModal";
 import { useRoomPolling } from "@/hooks/useRoomPolling";
 import { getUserId } from "@/lib/userId";
@@ -111,12 +112,7 @@ export default function RoomPage() {
   const sceneConfig = getSceneConfig(scene);
 
   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-subtle border-t-accent" />
-        <p className="text-sm text-muted">正在加载数据...</p>
-      </div>
-    );
+    return <SwipeDeckSkeleton />;
   }
 
   return (
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
new file mode 100644
index 0000000..34e5015
--- /dev/null
+++ b/src/components/Skeleton.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className = "" }: SkeletonProps) {
+  return (
+    <div
+      className={`animate-pulse rounded-lg bg-elevated ${className}`}
+    />
+  );
+}
+
+export function SkeletonCircle({ className = "" }: SkeletonProps) {
+  return (
+    <div
+      className={`animate-pulse rounded-full bg-elevated ${className}`}
+    />
+  );
+}
+
+export function RoomCardSkeleton() {
+  return (
+    <div className="flex w-full items-center gap-3 rounded-2xl bg-surface p-4 ring-1 ring-border">
+      <Skeleton className="h-11 w-11 shrink-0 rounded-xl" />
+      <div className="flex flex-1 flex-col gap-2">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-3 w-36" />
+      </div>
+      <Skeleton className="h-3 w-10" />
+    </div>
+  );
+}
+
+export function ProfileCardSkeleton() {
+  return (
+    <div className="rounded-2xl bg-surface p-4 ring-1 ring-border">
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-14 w-14 rounded-2xl" />
+        <div className="flex flex-1 flex-col gap-2">
+          <Skeleton className="h-5 w-28" />
+          <Skeleton className="h-3 w-40" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function RecordItemSkeleton() {
+  return (
+    <div className="flex gap-3 rounded-xl bg-elevated p-2.5">
+      <Skeleton className="h-12 w-12 shrink-0 rounded-lg" />
+      <div className="flex flex-1 flex-col justify-center gap-2">
+        <Skeleton className="h-4 w-28" />
+        <Skeleton className="h-3 w-36" />
+      </div>
+    </div>
+  );
+}
+
+export function SwipeDeckSkeleton() {
+  return (
+    <div className="flex h-dvh flex-col bg-background">
+      <nav className="flex h-14 items-center px-4">
+        <div className="flex items-center gap-1.5">
+          <Skeleton className="h-8 w-8 rounded-full" />
+          <Skeleton className="h-7 w-28 rounded-full" />
+          <Skeleton className="h-7 w-16 rounded-full" />
+        </div>
+      </nav>
+      <div className="flex flex-1 items-center justify-center px-4">
+        <div className="h-[60vh] w-full max-w-sm">
+          <div className="h-full overflow-hidden rounded-2xl bg-surface ring-1 ring-border">
+            <Skeleton className="h-[58%] w-full rounded-none" />
+            <div className="flex flex-col gap-3 px-5 py-4">
+              <Skeleton className="h-5 w-40" />
+              <div className="flex gap-3">
+                <Skeleton className="h-4 w-12" />
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-10" />
+              </div>
+              <Skeleton className="h-3 w-full" />
+              <Skeleton className="h-3 w-32" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-center gap-4 pb-5">
+        <SkeletonCircle className="h-13 w-13" />
+        <SkeletonCircle className="h-13 w-13" />
+      </div>
+    </div>
+  );
+}
+
+export function BlindboxRoomSkeleton() {
+  return (
+    <div className="flex min-h-dvh flex-col items-center bg-background px-5 py-6">
+      <div className="flex w-full max-w-sm items-center gap-3">
+        <Skeleton className="h-8 w-8 rounded-full" />
+        <div className="flex flex-1 flex-col gap-1.5">
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-2.5 w-16" />
+        </div>
+        <div className="flex -space-x-1.5">
+          <SkeletonCircle className="h-7 w-7 ring-2 ring-background" />
+          <SkeletonCircle className="h-7 w-7 ring-2 ring-background" />
+        </div>
+        <Skeleton className="h-8 w-8 rounded-full" />
+      </div>
+      <Skeleton className="mt-10 h-36 w-36 rounded-2xl" />
+      <Skeleton className="mt-6 h-5 w-32" />
+      <Skeleton className="mt-2 h-3 w-48" />
+      <div className="mt-8 w-full max-w-sm space-y-3">
+        <Skeleton className="h-12 w-full rounded-xl" />
+        <Skeleton className="h-12 w-full rounded-xl" />
+      </div>
+    </div>
+  );
+}
+
+export function BlindboxListSkeleton() {
+  return (
+    <div className="mt-6 flex w-full max-w-sm flex-col gap-3">
+      <div className="flex gap-2">
+        <Skeleton className="h-10 flex-1 rounded-xl" />
+        <Skeleton className="h-10 w-20 rounded-xl" />
+      </div>
+      <div className="flex gap-2">
+        <Skeleton className="h-10 flex-1 rounded-xl" />
+        <Skeleton className="h-10 w-20 rounded-xl" />
+      </div>
+      <div className="mt-3 flex flex-col gap-3">
+        <RoomCardSkeleton />
+        <RoomCardSkeleton />
+        <RoomCardSkeleton />
+      </div>
+    </div>
+  );
+}

From 9759db54cabd4513142693971061f896d5642e98 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:18:38 +0800
Subject: [PATCH 22/66] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=85?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E4=B8=8B=20text-white=20=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E4=B8=8D=E5=8F=AF=E8=A7=81=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=AE=89=E5=85=A8=E8=89=B2=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

极速救场标题、个人中心导航和输入框改用语义色
---
 .cursor/rules/project-conventions.mdc | 7 +++++++
 src/app/panic/page.tsx                | 2 +-
 src/app/profile/page.tsx              | 6 +++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.cursor/rules/project-conventions.mdc b/.cursor/rules/project-conventions.mdc
index 2eaf669..c9fde6f 100644
--- a/.cursor/rules/project-conventions.mdc
+++ b/.cursor/rules/project-conventions.mdc
@@ -35,6 +35,13 @@ alwaysApply: true
 - `overflow-y-auto scrollbar-none` for scrollable pages
 - Extract reusable UI patterns into shared components (modals, cards, empty states)
 
+## Theme-Safe Colors
+
+- **Never use `text-white` for content text on page backgrounds** — it becomes invisible in light mode
+- Use semantic colors: `text-heading`, `text-foreground`, `text-secondary`, `text-muted` for content text
+- `text-white` is only correct on **colored backgrounds** (buttons, badges, gradient cards, overlays)
+- Same applies to `bg-black` — prefer `bg-background`, `bg-surface`, `bg-elevated`
+
 ## Loading States
 
 - **Page-level and list-level loading**: always use skeleton screens (`src/components/Skeleton.tsx`), never bare spinners
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index 46f9fe8..b6b6e8c 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -267,7 +267,7 @@ export default function PanicPage() {
           <Sparkles size={22} className="text-white" />
         </div>
         <div>
-          <h1 className="text-2xl font-black tracking-tight text-white">
+          <h1 className="text-2xl font-black tracking-tight text-heading">
             ⚡ 极速救场
           </h1>
           <p className="text-xs font-medium tracking-widest text-muted">
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index ad22db1..28ca239 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -260,7 +260,7 @@ export default function ProfilePage() {
       <div className="h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
         <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
           <div className="h-8 w-8" />
-          <h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
+          <h1 className="flex-1 text-base font-bold text-heading">个人中心</h1>
         </nav>
         <div className="mx-auto max-w-sm px-5">
           <ProfileCardSkeleton />
@@ -297,7 +297,7 @@ export default function ProfilePage() {
         >
           <ArrowLeft size={20} />
         </button>
-        <h1 className="flex-1 text-base font-bold text-white">个人中心</h1>
+        <h1 className="flex-1 text-base font-bold text-heading">个人中心</h1>
       </nav>
 
       <div className="mx-auto max-w-sm px-5">
@@ -329,7 +329,7 @@ export default function ProfilePage() {
                     }}
                     maxLength={16}
                     autoFocus
-                    className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
+                    className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
                   />
                   <button
                     onClick={handleSaveUsername}

From 37eb7f07d73370335ad61ef28fdf0b19ea64de80 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:32:00 +0800
Subject: [PATCH 23/66] =?UTF-8?q?ui:=20=E6=BB=91=E5=8D=A1=E4=BA=92?=
 =?UTF-8?q?=E5=8A=A8=E5=A2=9E=E5=BC=BA=20=E2=80=94=20like=20=E5=BE=BD?=
 =?UTF-8?q?=E7=AB=A0=E5=8A=A8=E7=94=BB=E3=80=81=E5=88=86=E7=B1=BB=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E5=8F=AF=E8=AF=BB=E6=80=A7=E3=80=81=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=8C=BA=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- RestaurantCard: like 徽章实时弹跳动画，首次出现滑入效果
- RestaurantCard: 分类标签改为白底黑字，图片上始终清晰
- SwipeDeck: 进度数字加背景色块包裹，与用户名视觉分离
---
 src/components/RestaurantCard.tsx | 44 +++++++++++++++++++++++++------
 src/components/SwipeDeck.tsx      | 13 ++++++---
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/RestaurantCard.tsx b/src/components/RestaurantCard.tsx
index e4a810a..e0ebeac 100644
--- a/src/components/RestaurantCard.tsx
+++ b/src/components/RestaurantCard.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useState, useEffect } from "react";
+import { useCallback, useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { Star, MapPin, Clock, ExternalLink, Flame, Bookmark, ChevronLeft, ChevronRight } from "lucide-react";
 import { Restaurant } from "@/types";
 import { getUserId, isRegistered } from "@/lib/userId";
@@ -118,6 +119,17 @@ function ImageGallery({ images, name }: { images: string[]; name: string }) {
 
 export default function RestaurantCard({ restaurant, likeCount = 0 }: RestaurantCardProps) {
   const [favorited, setFavorited] = useState(false);
+  const [likeBounce, setLikeBounce] = useState(false);
+  const prevLikeRef = useRef(likeCount);
+
+  useEffect(() => {
+    if (likeCount > prevLikeRef.current) {
+      setLikeBounce(true);
+      const t = setTimeout(() => setLikeBounce(false), 600);
+      return () => clearTimeout(t);
+    }
+    prevLikeRef.current = likeCount;
+  }, [likeCount]);
 
   const images = restaurant.images?.filter(Boolean);
   const hasImage = images && images.length > 0;
@@ -156,16 +168,32 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
 
         <div className="absolute bottom-3 left-4 flex items-center gap-1.5">
           {restaurant.category && (
-            <span className="rounded-full bg-elevated/90 px-2.5 py-0.5 text-xs font-semibold text-gray-200 shadow-sm backdrop-blur-sm">
+            <span className="rounded-full bg-white/80 px-2.5 py-0.5 text-xs font-semibold text-gray-800 shadow-sm backdrop-blur-sm">
               {restaurant.category}
             </span>
           )}
-          {likeCount > 0 && (
-            <span className="flex items-center gap-0.5 rounded-full bg-rose-500/90 px-2 py-0.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm">
-              <Flame size={11} />
-              {likeCount} 人想去
-            </span>
-          )}
+          <AnimatePresence>
+            {likeCount > 0 && (
+              <motion.span
+                key="like-badge"
+                className="flex items-center gap-0.5 rounded-full bg-rose-500/90 px-2 py-0.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm"
+                initial={{ opacity: 0, scale: 0.5, x: -8 }}
+                animate={{
+                  opacity: 1,
+                  scale: likeBounce ? [1, 1.3, 1] : 1,
+                  x: 0,
+                }}
+                exit={{ opacity: 0, scale: 0.5 }}
+                transition={likeBounce
+                  ? { scale: { duration: 0.4, ease: "easeInOut" }, default: { type: "spring", stiffness: 400, damping: 20 } }
+                  : { type: "spring", stiffness: 400, damping: 20 }
+                }
+              >
+                <Flame size={11} className={likeBounce ? "animate-pulse" : ""} />
+                {likeCount} 人想去
+              </motion.span>
+            )}
+          </AnimatePresence>
         </div>
       </div>
 
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index 494d7a8..54b6779 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -34,11 +34,14 @@ function UserProgressBar({
   return (
     <div className="flex items-center gap-x-3">
       <div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
-        <span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
+        <span className="flex items-center gap-1.5 text-[11px] text-accent">
           <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
             {myAvatar}
           </span>
-          你 {localIndex}/{total}
+          你
+          <span className="rounded bg-accent/10 px-1 py-px tabular-nums font-medium">
+            {localIndex}/{total}
+          </span>
         </span>
         {others.map(([id, count]) => {
           const finished = count >= total;
@@ -49,13 +52,15 @@ function UserProgressBar({
           return (
             <span
               key={id}
-              className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
+              className={`flex items-center gap-1.5 text-[11px] ${finished ? "text-emerald-400" : "text-muted"}`}
             >
               <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
                 {emoji}
               </span>
               {label && <span className="max-w-12 truncate">{label}</span>}
-              {count}/{total}
+              <span className={`rounded px-1 py-px tabular-nums font-medium ${finished ? "bg-emerald-500/10" : "bg-elevated"}`}>
+                {count}/{total}
+              </span>
               {finished && <Check size={10} className="text-emerald-400" />}
             </span>
           );

From 31003110e1ea8c2ceccea000a33cf9548f767165 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:33:41 +0800
Subject: [PATCH 24/66] =?UTF-8?q?fix:=20=E6=BB=91=E5=8D=A1=E9=80=80?=
 =?UTF-8?q?=E5=87=BA=E8=B7=9D=E7=A6=BB=E8=87=AA=E9=80=82=E5=BA=94=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95=E5=AE=BD=E5=BA=A6=EF=BC=8C=E5=B0=8F=E5=B1=8F=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E4=BD=93=E9=AA=8C=E6=9B=B4=E9=A1=BA=E6=BB=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SwipeableCard.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/SwipeableCard.tsx b/src/components/SwipeableCard.tsx
index 0b777f3..3e25774 100644
--- a/src/components/SwipeableCard.tsx
+++ b/src/components/SwipeableCard.tsx
@@ -13,7 +13,8 @@ import RestaurantCard from "./RestaurantCard";
 import { Restaurant, SwipeDirection } from "@/types";
 
 const SWIPE_THRESHOLD = 120;
-const EXIT_X = 600;
+const getExitX = () =>
+  typeof window !== "undefined" ? window.innerWidth * 1.5 : 600;
 const ROTATION_RANGE = 18;
 
 interface SwipeableCardProps {
@@ -66,7 +67,8 @@ export default function SwipeableCard({
   const flyOut = (direction: SwipeDirection) => {
     if (isSwiping.current) return;
     isSwiping.current = true;
-    const exitX = direction === "right" ? EXIT_X : -EXIT_X;
+    const exit = getExitX();
+    const exitX = direction === "right" ? exit : -exit;
     animate(x, exitX, {
       type: "spring",
       stiffness: 600,

From 20f63c67cbf80fe9143af2f3e9eb0c7dbed1d7f7 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:37:40 +0800
Subject: [PATCH 25/66] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20PWA=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=20=E2=80=94=20=E5=8F=AF=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=E5=88=B0=E4=B8=BB=E5=B1=8F=E5=B9=95=E3=80=81=E7=A6=BB=E7=BA=BF?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98=E3=80=81=E5=88=98=E6=B5=B7=E5=B1=8F=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ROADMAP.md                                |   8 +--
 public/apple-touch-icon.png               | Bin 0 -> 3724 bytes
 public/icon-192x192.png                   | Bin 0 -> 4052 bytes
 public/icon-512x512.png                   | Bin 0 -> 14959 bytes
 public/sw.js                              |  68 ++++++++++++++++++++++
 scripts/generate-pwa-icons.mjs            |  37 ++++++++++++
 src/app/layout.tsx                        |   5 ++
 src/app/manifest.ts                       |  32 ++++++++++
 src/app/offline/page.tsx                  |  23 ++++++++
 src/components/ServiceWorkerRegistrar.tsx |  13 +++++
 10 files changed, 182 insertions(+), 4 deletions(-)
 create mode 100644 public/apple-touch-icon.png
 create mode 100644 public/icon-192x192.png
 create mode 100644 public/icon-512x512.png
 create mode 100644 public/sw.js
 create mode 100644 scripts/generate-pwa-icons.mjs
 create mode 100644 src/app/manifest.ts
 create mode 100644 src/app/offline/page.tsx
 create mode 100644 src/components/ServiceWorkerRegistrar.tsx

diff --git a/ROADMAP.md b/ROADMAP.md
index 498edc5..1f08ee8 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -33,10 +33,10 @@
 - 抽中后打卡确认（拍照上传，形成回忆）
 - "本周契约执行率" 统计
 
-### PWA 支持
-- 添加 Web App Manifest，支持"添加到主屏幕"
-- Service Worker 离线缓存基础页面
-- `viewport-fit=cover` 适配刘海屏
+### ~~PWA 支持~~（已完成）
+- ~~添加 Web App Manifest，支持"添加到主屏幕"~~
+- ~~Service Worker 离线缓存基础页面~~
+- ~~`viewport-fit=cover` 适配刘海屏~~
 
 ### 盲盒房间删除 / 退出
 - 房间创建者可删除房间（级联清理成员 & 想法）
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c1d427667612ddb61f8a46c3e04a761f47bf396
GIT binary patch
literal 3724
zcmd7V`8O2Y9|!PRn4ydr`x0YBlgPf5eWZjWJvBTblXWPvj9r+a^pvGdBw~<#7cq@x
z)S#?W_O&4fLnzBA+gIoL{tw^p51;!v_q>1k+;h*l=XD?0Sf7U-k~{<e0ALp8Xa73r
zHGhf+a<Ce9Lo^N=ub=rf0swGW=uZIwFEhje0DdEjvnE$VGrqras1$CMXrJq<>uaRq
zRq^3)yUPac`bT3B+S4$r2C@Q*T!@M>5f(8)TxJq2IvjXUxF*=<v<X%vy!32fsi%ag
zqw_7h(~}=v20t|@!fF&DPv4ir7esjAg9}1>qKo$~Ep0CRif-Q9OwU|yt9}_7lq6|k
z)m4`^FQ?*EN!bo@aXIB*m0G`*Qol;J3R^9caX<%eSFv1DyXm4X)0UrN29oSl?6!ga
zA=K{H^YqpzuvJ{W0CLIrBVCT-==0Kj^O&LzVMrik-<{}>@P)$1FUf1BV3izLjv^-G
z6Ty{t)oAknjP}Mh(kIGNut9zDln*`e$LMr1h&agoL#&~WP>FJ9wL`pyjDKl29S2hb
zbdaGsLMzuA0<13ljYhKs#c+9%eKv!Je*1X+<$-Ru5%lu1`Mz1UGpj|eTfyW-#w9H#
zi#)Z^vX<hm`=G^}@FO31iW}w%_g0xS2eJ8Gmfv`N<>P|S6QNX>=Q4$9K*6-RmJf+7
zU33sw58eXyHUBkLAD{ENOQ{_pwtWK)5l&lZF^ac~_%J<AN<|kz`KE8ez0s4;OK*C;
zr9{Z_aohAmki%jAjgYyAD0Gt*H5Xw(Rzs?B2%W{j+|yR$jc_#}`lcLwhD8Eooa4TL
z>4PKWbHXbNmc!ZL_%&w*1BA~Use8OO2npFOQ!fhPkAVu0fH}|fA^^_v2jL>=+tmWT
zDDm;k;QOdhj76hh9c4=#15~*A=U7Gtfwv(^lIDh}$Nwz0M3r1+r^G*IeXs(YyS7Sv
z5LO*E`7-=GDwOsu;)Z6`$kTQLP~qR`Re<^zXi*4P4Ag+c*FC{;hwVxbK{m<U@E60%
z7m^JBjReTe$(U#`86bRcK^4kiJzxu1^#mNCb>nCC43MaU;&}{U5CLG)<7^<%eH@%D
z1>ph;0wfVPPzVhz6geS+`1Au2g#lr}AU>`$aS*O#f4EJ6ID*R@;E5rUFdrF2qQ)}N
zk{=uc;03^V)DS!pk_ekNL(C^<3<3ot1A!2btSK1OQ4dwn<>LX#1GG>y49d+DgOT6>
zj@<{E5V?pDE^(f_d@vq`Z%Fct+W%@Oa+llu7xRi8Mk2`tZ*9HgE5ho%x>xo-=5SmT
zek8AB#a#FNhE{*p^uv*sNQ$$qsgIs(QvYUM{rc1OZ<$y!;rSD%p{zRY;@@8&y%Ldb
zN25#X!!v*S29>`uUe_PGUbvHVbuZ^l4yS<e9gCwJ-)f4Et~>wBekS-=S6}U}vg1Z>
z|2HFVQi`H+WkWU-4Xn}pA@8&Quns3dQFR^-N-|dYZCKvm_;vZg@z+R>Gc540Yk30X
zU8~<e&1N}@&GsS`)qA(r)0)+yJ!XPC^=&<)en@uicq#N@LK-Qp1nV?LIGM6)85v(2
z`HUlwr<%8&>a{`%{JQaZxoY@eq_Njc?Gfb`hAijjK4f?F&V;?{koLP-j2J7U;`@>G
z086b^r$)Omj}16ys~O=u7KF|y^wEqS(JgA1!ocH}%S-I}Yx??1RN<n#rvr_Li;mw%
z(tA!EzjwRN?_LyBTTc#5PJf&Yt?s&quNC$z>L7#^cg8lgPHk6h<uEw*4VyWP?;S1W
z+xIRU`J&Kq=ac$YLH!deA?SS1#^Hg=20y#`sE-t8CC5I>FKjC~nrd%&dhl#kB9NgB
z7=_MPIT)~|K5LL?D`Gb1?krvY9Tk|gS{ywp6}8&b)S6qpXGCyG7~1Hub$19z((^IT
z^&EDaj}l424Qh}Ha*xcp#C3xHn%Q={vH{OnO8CSMo*ZG%nn^tgZvfVy&AmrorvQ|(
zVLx>?F8%K4tc_GS`AQ^`Iq6rlH<{v?vE>*xDj6&>3hyu9$kx2%NRB^+%if6!Yri;Z
zlw4PWyVLK(5&Io{!5CMJ^j7jHK;8mKYcTf?|AX*to(6RnWaaNPl_p|?8jVB07UGQU
zf+rW?Jv6aX*V(^9D4V7Or>;GH4O1W{{d{8(V%A6M!Jhx+S2XHpZKS@sy|jKMR&)N#
zh2%xGt@S?8SWp}1rp(FQrcYWXY0A38$q$@nTVbQ*1<?sQw_cb1gZB+<;ASNm7x0Sz
z7cTA9Q@GEod<hw7EBzioxZmL7_l+%hfhS&K#-LPD=oql3>ve~Yj>;h<-=p$UV{zO_
zC{v^^<4Z*Co_#{cw-$I%tHYe)wtOlrA9kE*#5b=-T8pg<ce+CIcy?TItkB?1{xT=v
zddsY(*IF$&OKI2JYsRatL)F)I(?SJ%@rX6xI@FUw&HK6NP;0Zcmah%-jCTGkBXT$%
zMEi#4Hnw4@8rIw>RP!~f30wYaHI_wMlJOxuv*<8lXqX}+N;fa2@9>7SCHnF+G~)Nx
z!#9Y<YXG~36I-NS-Dw-#tK5i~=*VU9-)wu8BJ4(9O^^j!9l|(7&ik2~RUpk3(8O8o
zN)~3^<JNrsy?+e;cbGSJqSrQxu+8W-qUP`6vzp|>ac8>rUKBe&$==3}29|9`1YjLB
ziNQ(w*3Irqt3jf^oO_v#j~(8<J5w(9<nU&0_>hXEEoSbf>rSdb$4b+{T!o>vq-PN=
z6}5YK4ca(AHD?Xm@ov2SeJ8_<l+}wf*xlX@4fbK;mGp=5kT`&}Z0E=8M@`avQH8w~
zYXP-Y55N<YA2;0{st0An%}ZEk!>6X2X<@m0gfnw-CGg1G^wS%=rMMS*$pF3S-h9XU
z+|JcJ<#-{ep7El$yF)BqB}P>H`3g>SIO^9_R=*6HIw;dIgTLg{Va9VstJE?HC_>$B
z)qkfWPqY9j-x^W#nSB?V`bt!k-*6b+Rqj_%5W+-c(2N@13=qr`FBmof^b{F_<#LZ~
zk)zZ54b5*Yu5rw`?TdH%rAa>6%=&?SzAXRn!fLmVhOhkYFgY`mCi^SKl?GcY#$gU@
z3~1g=Bk-<JY~aH~fj@%JwMA2VJ1Mzf{7FbEf6(&^ZhqPq*5Xcd>e_dc=;qMQjD8Xq
zL!HR~#zM=BJbT0f8xgQ(!Z2#?(HGOYV?2<$GH5ORbK%Mrs34}D%f5&IYNk`426^|_
zY+Vfg+76UT{GEpLi;JQ;`g!<`6(_!x9lTT*8#iY<<s5*{AYXrzA<S?Vg>a|HO}K7M
z_P5<EIJWq{$@LuDpPRu8R6f?*a!Z6!tldMR8NSm9+@2*KD^RTM^rz^_nsU;gRCsZQ
zk8#(OK1=6yy!>YGUFMA7P>nMegV$qz&lMU-b$kjK#U)qhqWpRMp1qgRTky2)lU51y
zaOz*Pv=Y%+pBmAmtE3KNI;&B1iyYJ7g1bJ=s7Gs9U!wF$iV4aG@#pFBw@u(K%QYAD
z46||dWX?zh&^Ps0uoZ<zO2hZd%&3PX-esx>q;`HQd3h-Cg{${BDSY}+>5&H!?B*g6
z!-OV1A;dOdnUOZXjy4LHJIOTYA6q9%XscXZxEkqiI+oD`C%e9UmKAw>jmS@#B2O+S
zR~8#&f4y)bwI&}XOSIl<wal>B;%7KR64>6bR}Ymu7CY0f;S2a>iMM4Ldn#hBEwlc_
z6s5gDj=<c$qnj*?dgKJ&%GP0!QOzQ>aTK1<G!);Nm0Ay(MxIiFJKIg3S8wwN-Md|T
z$!8sR(d~#Q57O_z4xyWdn7IFQl7KYUPZ7a>HaZ4d_MpagViIPR7XKY6gtMp9@oGZg
zht*7=5LG#yD)V|$fCss{g&ZD_#HC140m8(blc6*^A*K5)jx9}M0xzLVHLENJ8Frxm
zl8%xxpnFr^zsh){2eV3S|H;%p;NaUCcft>W1KIVrA%`7zKCqkrp^o(}Be>uSnNT<k
z@Tzkl|BnfMmJXbG91cjVmfIy_j>bWkkAICFfxe_H-cY3F=&aK`mPchV4z^`hj!PG*
zgahSzBA1>l4FX4_Pme<mfLQzF!0PE`%o4Vs5bpJa1rO3j9R6b4w=<yR5P4U3!5wf2
zbNNW<jk#O#WeB_b-Sh~r5YZUuYZdLiqt{^I8uuR^>hxA440qv2D|l0NXzkF$00E&j
z*!*cOc!MlbO<h&63v5I9!Nb=|KKjNWl=09%2tmkFXQEM|OaZap&alHutl44523}M3
zLWOe&Hg-xqY0rCI*Jb$%QPSp$y+euMUCKTirGkX?6JOfTwd}=e6Fx3bASy1kx__?$
z3yT(z_4~EbA=v{@55(_-o;>#!GTdL9if$Nnt=(c*uDS54a|lFO<p~M+=J5FS&;5d?
z(O9ZC`YqF39dj|!czt({R;=57CU?+D&N3jow!5|c<1jJ(eX^+I9XHJ?vufA0JG$0E
z4>JU+C|d>NPW&|BY3Ws_etJB7Hf~Th0x-r>eEx2h8WL8Vc&E>m!11Ni3!oQ-rDoF&
uhns)6b{_0p8~YwL8gS+Bk0+p=_Mr=f*wm#o??3-efW<lMv*l-Q#QX=WsMBHq

literal 0
HcmV?d00001

diff --git a/public/icon-192x192.png b/public/icon-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fcc54eae1923fc600abc70093afed5113550b61
GIT binary patch
literal 4052
zcmc(i`8!nY|G>{I#$=r#43QZ;_PsE+3|Y%wX)%~cvWM`57+Z}*CRr1Dtd+)=os4Bl
zCV2{3vwLKjY{|}Nrtcr|{oy|6I`4Dt_xp9<*L7d#^-i$0Hsj_H;Q#=D+rr$~o_VLT
z1{}t`+K>6LGjGRkn_mqA08W0^00G%KC;;HSZ((eB@$Vdl)8!OVn()tOM>oSlS2XWT
zh@C4T@u3rPQgO1^B;e#Eu#p6(u{Fn#G`71-o(pT6UI~4|HDnYg^Q`LizUv9Z@k#lD
z=`WcQEh#7UD7k&ltwXi?PE}WrR_jh&Jg^Dvn|ijgr+W~k;<g!n&BxKQt{!iQKjRay
zmP4C!4xBwRz0N<qeq#D-ygNA7zuEt1*S&|3hn)I3DGJBUj$ghKq&N4FMjPmy;|ZLN
zx&Y{vAysedQI;#}@h`ERBFml_GsRW&URuWcwm1ze%qZZ;Roct9kGTZ3(@X?~j#PO?
z%7oP_>LW(GKNdZzbVx6LAgY#Ezn$SpBwTI7HJjl-o$3jHzb+>E5$V_i0n;U5f*DO$
zDeB+gTOY|nh>W~!7$`lMt8+eGN%^JBmUh5e=}vM7F<OrpEm^Dn?RmM{7F~c&jsmSB
z#ETFRIx@<Q=4$3!@A5;$FJR~Xf^|C)#Fjv$*IjiE86;FLJs*l8QmIz@u;d7r08PyA
z#46g{(tBMt2u!d24vAieQb?5lXrSq#y<UzM?=s^iMbC8&_7_|E?50Xa`8D#Z5^w{A
zNm5V1$0%eM`??)JfiOH>b!)jdL2Z%PcBkVymH4D>vf5nt?A}bZA&xMq$q5q_((SOi
zSD)$KSjn7TL(P{d)X6*|EkbunJ=G8^^2vKP_k02xc1+ue(PhFg!{{I-=VWC#9K0^g
zn@0E~qPMkR;dXi)hf>YYc2hN0x3b|;p|Zo&IZ;01xF|bm<#*<W9Rw=%O$U5+&alpE
zxwR2G3xWALsM>}iHif9xecUl1i27-6uePE~XmNLLh*`vs@275zrU}140fE4p4^cz4
zneTs33?%RZTw`U|C!MNH@Ml~bF-%-jRRr%Vw$%+Z8g4G!Nu74h$OgA~{@*Jo+U0VV
zi#U;pM!O>+W<M`@6CWpOL1A3=NKix}bX9}72767l?T1DANL9jQb~^wDcE%Ll08rti
zBvlFu@ZsQbNI;4xnUV>PhTew8X#nPc8M+b<J2nZ2H{sAA(dbT1S!N7}We1osDV}y5
z7z=K<P-T6G<N)zekqFmlRxE*lO#zaL2yPB$%slRFEGu6Gz>MJ}Ffe8f^o=-H4L&(C
zGc5=sgOWlMh=qTr;BJaQ#yH3^kAYMKvpfc2`e%|W2b7ik8}J800>#R({D+cnG@q4W
zO7sso77k&-%Cxb*GnR$2U`cFX7HrHE3(V*=YXN8^4>v2{I_M8<9Et^-f`qYP3yot~
zusMVjA`$dt+7O)O$#q-7nBxrC(ui3;4u=9wlk;nWo-XCwE-bGJ36|lYeAid5I8*+4
zy&`sk9(-$JZCv-p#r+VmGXt&5ZY3X9f|PHJ>dw@Cf2u({-le@DTerRldFL>8C+Ymo
z=gvjCi;ix^8TZdG9`J;f|LVWS2;ZU4clupkSQrJ<Yt51qE>ZNSY<-(v%S{xz8v)%M
z^!XD)xT$o`nw1)VyvXB1w-4U*&prAY4#N$1OT6gHhwC?I^hj=5NZedn(ts6&4*?h~
zK^fsi9zP$MeT^^iru#K*Jh|d7<mX%#s;Z@=`8gJwE(Vef^lj?!Wr%uO0&m15$GYh!
zeqBiTSxFx459xK^Jv6u%UUry%vdPX-(_jYsrvM*L<H92;=p@;bz8R+8qa&wdQTHAB
z>gad<8oAq7No?BTcNwqp)*N?kz10Rf+1(oG4ov*4Doxyf6~DXC89YC5gS@zTFm|fo
zdibx?zFD-MLE(8Eo?ZxaN8#sn_+><p#1Z9wzQr%z1vT@{SyN`zy>gPn@4x16(LcFt
zD$R(Jyt9rItG=dsH&3;UgY#W8WT@0F7yP_^_;zhgd6Pu*cIY^RvGhP?Z*=#a^xFnP
zySf74|0<w^ZBq!y@LOZQ>^)IeA|^=DZ{VrhUv?tz`r2fPHkKDne5Z(66_7N1(>+0@
zZ|ox9R|Yfp{9(hcCoSG1-YZf6uKjG}yh^qJWqGQg#=XWMB5iHOCCS|p7=JpcJa|&A
zkpiwLu^M<+UaN7oX0E+jVyoexiEfnE<8iWFsIRCxDeA~eaRY2CUb#IpKsNg8l>kx8
zcld7T<X+K48TWu-&6^Wff2oYk+dF2|F1Ih5j8rXm6r*I+ptdwPLIzgi1(KbnwAwq~
z*Cg2-^BmN#++F&F#gFz*KX&jm>y_nPJS}2M9OrHHxc4L8gAWX^4*qCkV143X;r!?C
zOAxcH_Ozhby{wgArVpj+F819*P>G&quTjoIprIL=A7({qoNg;$>ip}~S694b9>$Dl
zxd-;}9`7S$A&ENCO7TO=T-Dpm^U!^+m7B-q8~N=)I34oQ(<b{k*2wltlvw`w;O3W;
z{7PjKN$J9%(ruCX&VuGQy<Q#nQ~7YC451~V*O7@q8YVjjEr+wqC+83HIEWj*Gi#?@
z>y(xy^cm@Lpwc5Hd^qKI6kTO(WrSb49}hHW%Ph4l&sv;)=WS!4c+n?v)K`d>?V1)@
zDP7^@>z#o*`ia1Cfl3*zUwbKihf$t%?styy7RPW!28*Urt#?EIy?$-#{>I+n<2*)Q
ztnHZIolkb&?)92J&w6#fVDDmxSnz69iS(^dtR8QJ*L5ql$-5&TV%->N?Ba_p(~=4Y
zdtvKe*t-<(?>#ux`u2L4NvkGdB`wL%`|`}(5s!P;Gw|j$zc$aQsxE76RWaE1MQ^m^
zmsD?9>)^M!^rPFYE7Ku_6qmJ<!R?vAkx5%bjfu!m@dv-thdmggJX?Ml!}*?I8pmmG
zv2RYNK&uxXe+hTId%G$j=xNlW$hAEMcK)zoy@?|gd=#Ov-<vV9HsQ2Bezm0w8-O7~
zq4}gsBVn(9fB*f!LG;daRw2;8DJQ?LT~P)qutmHW7(b%w^n>!swW1;_v<6Kw<eRPd
zg}~-G;NI-NMf=>O&zAN;_d|oLV#@*SIU}%mS*`}}LL=#rF@`}qm#%92aKQ(*E#KbV
zw$PIr749M2|4wk6KhXEeYpJKGtSWedj;HtVink0$lKhR5x;cL*_8iOpxfVGzdz0P2
zM=+|sdwc6Xz$ZwQNZPGvRPR4*yhe~#0_M9UjXVNgF2BYO=0d+S`o8(wxcI&>6;2ZQ
zt_ogeH~Q}7FfJha&oX)L+g}NsM2_cvJK9GVoZP*Z91i>=Y2YYw-i%71M$ejVkgR_2
z<i*R+xuLagVO^FrFf};Z6-=5ZpN&JC@!?3%Gsbc*guxp<YmNq_vYWJHe{NL{I2n6|
z2iF~ina4Xz-KE_S;R2%oQZ`Q<((o&|OGR7v@5O+=>0I5gh>%D93$?Y$uMha~ft=Qy
zV@l^1t&83YLsbz^T{9fRri&Xn(XxSklH2J^;W0ZAhm>N|Mx7it52$I|e;NyEJG4_t
z{DR<8n#A8|;Sx)p9FBh0$r)Ywr4rP;OJ&#uV~gLMwF<~>?bT{}UDyD&bE3LuS0Hd=
zP=wZS^EFUh!$e=GpEF!b%Rh>6wM^%nSE2@6Ts*KS1=KJ~9W$ksh+`248ncnZE;aQg
zlqb}lubx_EATZSq`8c}oNgP`~#UtUu<){6|42zZ5ZB4d4HxanZcsG(lPbz|_9y}yi
zLm6K#|2KGlG5uC>bJdq7Df;QF7-E=pw8Z%1)TaQ4_b&reJBCVisRE{;-%dncs>y;&
z5{Js?cs?#Lxyk&$Y}A`?{^~vCaQYzkp}(2O3lR$#f#=-GJ3bg`IY1?Lsc7{A<#5>L
z#ggm}d;cXP>7LVxhQP6-EBG3)tzgJoVfj6UJ7T;p0u+@qo~b>q2%Ir><Y&X%|G>5e
zSftmXf${IlKXjCH1t>h5{MB-3c_`sFa%|$7LdV$G^1*Kx0Ygl0BWnqkIVei<+%6)~
zRPzy_hTEWM4c;JMk|gFAZmEXC{@Uyq5g2$}a5nDB=?aZ_U|F&_Y!D918tJvEvKBxI
zUd+>%-?e$p)2t*>8lj?I-Tf?UBct~i<?O+>3CX+v#BjC|!1OSdnwX*0z(kfQ$RSt{
zl`xhP!4nBA$8i;cvkb*2mZcJW^DJutO`*A1j+09G<2Z3f|Bu!cXnSsU5MXQ1_i<fK
z<D-6%y9MV$)dzo|lEu{mXW0R9aG|2>WY@h<)9Y3<+|eM2a}<}NvWthHP;V?tFA<Q$
zL?<uqRno$JDiI{yhSMu8#wp-%h!k~FbXw~9EZ@Y1;uBy9>;?cC6*N<Qe}z+f`fLh9
zs!;LzB#BpGD-Gz^Av{=vwGlz(3b4^DD{cV|d{8Jz?kwsGUU`KdaQnv+A920Wj=9&t
zZMcY!R~o+B0GTku2=((Q9|O{UE+AToX5)?pLF#xUsm+F9TLsrdddoI|z-Xv3yB7an
zj6<#nMMwP2#%Px2A15j)pM0|4atbp&t<M4}?!+}0>_?;k{aIAe4eodlBufvLoGEU8
z`0gb_sA(01Hu6&D%5{H{mxHpxN2bS^GW(oo04%SnSyaFo7_TkGgI6&)uL!O~vt+zz
z!aln(y0$PM!ZhpmA8<adm-NO0XTAUMpke8fhn=XPS4hCkGX3Ju!iCSwT{FQLWQ4QR
z_Btb3{T6v8HV%!^0K<~^wG{3o6B5qEQ>IYI>{kP>Q{Hd1($=e<4g4o}xk4H^CRc>I
zlDuEd!SK+C#4<aux|XLg)*VF9re%1pIic;uA*N&|g4stR5KyTC6sb2D<X02kOsgE?
zK;ob`T)R8w{L=Z|G8Z1yXP(D5b7FAti{j-+JOSFzik2(8UMg1AZ|lYZ7+YVxL+2HB
zh4-YQZBIKnkIuPM=5HS$O2hoimA!}F86*Y#u%!Gt^H1~9B8@RiIwIU4qGh>Y`uO4T
zpx^|>O6j}T`Y+vauvV5-K54JbKHhe%_gM8VnP=bLDg?S-v(+QE^Nu!W5Wa5H8S53+
g7w&YuCHDv-B|Y4<BCdOj*`@;)Cf3FjBSOso0Ci&}Q~&?~

literal 0
HcmV?d00001

diff --git a/public/icon-512x512.png b/public/icon-512x512.png
new file mode 100644
index 0000000000000000000000000000000000000000..281918f99585684fce2fe970cd4c7f1b7016e8d5
GIT binary patch
literal 14959
zcmeIZ`8$;DA2)tYQ=`SwM%lF?vP3A`SXxLSWsA_AB|D96jA0@wiprKHTV$u~jAh#F
zjI1#j>b4t0gTWZ{y=>Lz`wu+Na~$^%4vul1=k;D*@8vw_^?s_WeT8K&*IobsSTr>*
z>H)wG@XsB<ZW#D$-m7y3{I$nL!x#Yo`wp%DK!DizqW~ZPXkJvk<rPmFur1@&e?y*2
z>CU^2A|qM{ZE_K;oEr7O$-8?WA=~!96QC&SJbfvtb4&&EXy-+)TNgPG7wH$3mq_hC
z{~)ot6q`uULFIRJ*wu_r^yPXGis=5?{@?ez5N$}z@y#|F`cvlmMDGL!0pUUKPB)-?
zlCtz~e39)Idp_SbbCvM(AIE56#~J-h`mLN6gsUAxs(aB{-;QByOPj2a$`^H1ILv7Q
zK#zV;csOHP?lgFf1h4B`JE`4bURK`K^5JS6s=K8eT6ejk*u+!Z`W~fZqT5NN*hbW`
z`%9mXe%c~K#F02GV12v}fJyG}$0;~zhZZ9TTfRBvnGuh^|M1*f%ibMvF+O(WgRDeW
z=V~xiaS5XR5(1Nyl!s<6>*uuWbG38I>}nalarjg`TW?9fw@1SM9+K5nf=xt8&8W(~
zg0JAty0XyGh4V6g9O;X-8BQJ}w~R)_c;ngAJ*;v_VV^&z)`J@0R1#qSIQkt<U(6Hc
z?LRR;@kA^v_pIav?UrC8Le1TRy9FP?oiLCtM_4o4&(3}h873iDDe)c-tinQ%`Ji72
zGy%#7ZUewNyQRGd^lM3aD5t}hira)FO3pfye0#oScCPscyb0jlc<8c~KruY*Cc^%3
zjI7X)6o(3>JGL}T`y#^?hrr!imj`#=na}6CE#+y(AY5#I;<=+qoD*I*bGfqJLySq0
zNpW2mW=jW)+^a1%1JT#Czvz`z#7tI5r;+@A?}4#_I%jtJd_zw#qgS$LW!p;E^x#6i
ztX_g>X3%XHxFu^0`}+AWsaGZAgY^46CdK>0V+{d(>SM_I|5aI1M~U|wqb}b_RZHa2
zsyfv$1o<EfAHs}b)*Xg{Xo4oIjy_4Et0xL+m0h=WGyjD{tbTlX(-M@;0_P+eP&^<6
zOWC88jE_zG9>HhyevO1mIsskZ{HQPnLJ2GOX52`|CtezSwLn}!lAK(cHvy&lwrPlM
zDi3zic0AnnLy4P3s7YK5G!)9ZVZC4nf$l{i&3_hI(6`0DaM)vwY$=z=Ro`wn5`f(j
z<b2)pa|M@{jL&~1SLLh9&nhnkdPWlS@E4~BDSY+h`{nNU*e{uM?b(mXTZ@Wnm_cRu
zyIS&8tF5&NuTuT;uC~-XXmf45y8(|=%%CyCEoX5VjdAUxJJVX61K41fVCx>2OrkX7
zD)ZXcZl;JheJJTU?MNI=`kC~3<Bh>wM%?xY{aa~b+AX9V{^?t<liwlbC6M*$UD0w9
z=Kbj{=|Yp3`JP>^B&F)n$}lf}e_F<@M|rJac=;6J{PN?VOY8W@JWM$U8R_jObAMD%
z+uCyPU7R9M<Xsbn8b9Qr-i8YR=vT@8AkJ_3U!nUmX>P29FduGFG3~svQ{PVe0sedt
z>x<)C4#{{}sxR+y`&O!$CX7wDuToGzF_?KBW)?{}ShKxmd%_X+f9${C>6fn?R^K-E
zRSN+b28Rqx@XDvsliDQnU2GxS`@MX4UWQ>ZpZ!SRE^#;S!7XFyUWH~N&%G-9+9%G+
z$GZLDKTucnP`gHFRG(6$Y|TDi=Iwttfw3#h`<i!8?<=D?av)pa_U<(gjpF!&%lK7n
zX)oLE>Tc=VC1o+g=JSi+D5(f7<g<ShO*oY_=E|GdR6Lv8N@6=0L_&~b+Y8vwS*(3~
z6M}%#MIGThzGK@~7vYxVZ(R5{@g$uF`g3p1&)-|I<hVDH$K2P#?m7AjSfp<+XykrU
zybOlC!ZMs@kKO5l+3-Jv+2}0i7k5<5SO-IeUt(nsylrbE3|E4x-P(y@hbF>=xh+j#
zTxB!rj=s2$>mM7NHkZ2@S;AoVW!icHggHZu8zYwzG;oSSskurD$3S`3gAfd~#ufpY
zFe}tz4{72mK`wxNbjx^{hpiq`UefI(&X_k0eY=F?F0Aq!v4_J%CaT)O!$(RP#UDMN
zY?&0NVzZO8a%6_UO<gv(rMT`G+r%)0`TKFJ*>A21YmQpB6mE!u+7^&3RKm_dDFk6D
z(%Hl{Fe$R0$87`)0CO0YdUCVSCuhtrO^+7Rrl7LD0vD<r(7D!(j^?NL!exXGooC|R
zQi9_=6!9s88)FoA<g=g47VrS5-80TFeTs4wg?@<pDX3?F+aH;1-pkstYI7}@GCFhi
z&nEx2(>RYa>{&7Wz;BDb55x;}kJ3&k(9#16)%=WpZ!TNNd|auBwp*M*(0|nWaLWP0
zVGwG^nua)oaekg@JGvw-3hjZS<>5vAn!9u)?!x$n=>ceo1Lx{7yYF{OC?ulk=^^#)
zz&qO3YrWr|wnmZx&a8b_tyA6HyuxQ)9c(Ve?^7J(6WjhRPbF1aTKN8KT`-BKgB9=O
zAIZ~Nk_-wTJ0O?gGNplQ7F*Z>U^%7CKRO4S$qXJ#9?Q)nlpXo8+l;j+{Ax?SnxEuv
z9lOn8nag3<br==J+z%0(*$i~hg!B_PRBi1#k}f2}x8=Y<rr-f?L(e?90mqqRZmf!1
za1lepT<yqw)j-?6zaNex`>Ti)!%zKrFjoaON|uXf+)N`W4F9$52t1(JiC!bzu8xJW
zx@-uHc{q6#l)*c-NJ)I2X*&-~S|FM&EFNMZv(P^tc^}yz(CzU7wR3i`jsMX$Trn+Y
zp@p?dklB;Th@oxZxl3t~ga&i~{4R#TZ)?e4u%3++2D8&ac_zLsycq}vfays(xR_4(
zpFQ&-ZHrfC_%P=C|9Vzv9ken4gL5@tJ8>Kx|F;KtZP>4-QX}}6{(7+d3U^>||E#L;
zW>$wVk5@`b)*uXlK^X6E)LiAP<lVEhou2@hTQz4J;Idt9FnMOMbHEPR!!1>H&jA7!
z$2UqCgjqNbz+j%P7p3*mv$O};d2Q#WK_Oq2{(jDB$4<zh^<n|$2$i|R!0y+(w?G?Q
z2dLsMu73^!_!sAUR$#Y?-~RQgjKgGE{GWQY3Oh?1u>0uFE$FIz`&-Yl9l#F39b0hx
zAq4D~Jg^}z06R?mpXc`M|H~dX|F#Do^tU~}H`?Ij0fCHF)lDO0`Ge;F@74cf$o~xf
zAI$z=3oZ+cJD{?i*($vM3u=r1o3g0CqLBY>#v^S<iw7QEedR@mj2$iXN{m@VyLfm8
zY-~x>q{742XQrUNVd{9@kws)v>|tMcW@s2QSmcc2Fyr*MRL>O#O({lyD%0xCZN?Wp
zJ{)Omrv6;^aO5<$Cqr55XY<=CbQDV$ikLDK<DB1Kj<Tx8Kfffji<nQ+mqJBRUCF3_
zvxaDz#u6YlFirN*p)8waWSS!8lnl_&95bl1lQd@FR^uAfiZ<!0w7k10RP#8Wx!RnN
zy^=|(3PatSYxqbFFEEozf&kG}7)~EOJe;QR1YDhWTZj0AZu#O`;sHgfqdqY}tAIG>
zJUBo%J~LnKm~Dz6p_)6OV=$slqjv)a2AGzg14#LUy_)Z|CAuD-$%TxUlYGcR0V{j1
z!0_noF6mC&nxgh5<*CnOfy5feTT>l!UcBVR9s~DV`Lif^MyruDD1(kT3nsh!ZBKno
zW)_Y`1wDLVkQ+0~VzUd6wvTKj^bnQJk+)~*gxlpP`<0riz9}#4vcSBrUbhKY<$<PL
zh%kZtw4Dpn_vrMSwdfu%-kR=vJv+h0U6rdB{b;KVQ~qRPw}_HgUeAXazWgIR{66s0
zQ({mq05j4DlpTtQD{Fj#EdmWO)i6a5O{85n9r}quvxzO(mB<!p&7%7&W1|y>svsJR
z@w|VQ5`Z%2TjmwTH@PF^lB1F#_stMN)Hy9GQOIjC?iNuuoxXsrnkh7Maap4G=XjIv
z{Og`bz&H9%1{C~k1&yasE(hd!_m~<iL5==_CWR@s(Z0*H!o|H7k>-1y2VFd7>HU?r
z&C3U-l&SshH)hePIX%qx0Tqr^$asQ=wz=*&)bt<d5T7w3dIBA4LeA3iw}Dr3k>S1A
zu4???VITP8XjDoqRT(P-QzHvmRavV*fdUH_4Ax=FKuUD-sD=aRz_0c`p(ax`Vr&U?
zK^o1qhK6;$CP?P;F_()_o{?nGu-W}G{K9dXps6kPb^~rYf{Ep-|6aGc<OKBpD%QWi
zDX&nS@1<c1{Yb6i%a!Qo@!>x`r3BhGX_q5#5^iGF2@`lz8b&=E{@|vm_flnld_`cC
z8krn4N&BMjOI;X6_>)gqRoQ^D6%DbdP#;M#l0Nay>Tv^9!H<jkJdwQlqwO~X#>kE6
z(8^~e31;FpU7z!Ff1wolQ1_SUsq)q95Q=#MOQNsxzOig9QsbTfhZ~R!r7oi{=8*4c
ztuGb37Lk5)4_QrPG3KWyJTMQX(%ZbgEDBtP(nF31huSf7jH*QU1Ls<mx*1$^E${E?
z7lv0#1Y(h0Itn6X*ji&>b9%q`YTpn|qt|pja^haYaFM7q`x~_vA3$F;_kE@rokF$j
ziLLPsW5}?{<_|_5Ve;%j)a~*OQ#}SJ>vp3+6RI5Q0_Oef-G$y@J&&>aHn3n!KISfr
z5Gq6Ue?EIZb^ctwvXW=wL4!Jb^qO@(?KNM8-|W4Rf^tjHJhH~1>vk@GwHj!`w%1*D
zgSOG%c_sI_PL|XCla@=B-S6yAJl2z!!J@rL`;_jSBQkxjJc8F9d@Jri51?V{nD>N5
zg`P_F;(gma<|IOX>Y^|*lfS!|xbg&AIb%Y+lDFH}^oDFHh%rE@0OFz#ztQ?h^pXS6
z|BuojnS*U!PpFhtRXDnezf$q_1!9O|xg2wla-MM9dKh935r87|+r66BGlCv!F9w0K
z2gG)C=u6sVuH&@P1)D&`@{c<MHgoFJo{3{WrF%W`Lv`#{h$b)&T>jz4JP$j$E7qZ@
z4Ja%9zRbf<eSYrZqSKy<7vde|z0dF&S;}p;@X}8N<>JJeLfx=oJ&%4c^#Pi0VCqAT
z*dAwFJbn(SmWWi4K#rLakkJ-3jK`I?X7YlNyiEryQ{oEVHi9oY_XEU5FP7S`#hnd4
zUks@U8F8zT8C^9p<#YZN?p0_?M_=(CNUx2#!UTUO9A^*el@v|{GenEDsC>ht(<y>a
zz;$`I!&dHy%MFMTY3KSw?EF!yD+A?l@t(?WWHj3=a%pl-G-yJc{u2-%Scu5{@iU+e
zxwN$B<i%%PKPw`f(XC{)^CxoWhsu{{s6TtW3DMorPAtBPH)N^cLX6>Sn83XB_e+jI
z|I@~?*XNv-6-t}KpWYlXGJSB>iAKtko%f^6T&<jZT~KZX;-XAV25?F%XtQrSk_*wT
zQb3{6IVLY9@|&lGmgu}b=enr%UF9Ut3Wl;7HLZH~$xz)PD+C_2hu2p-pnuQUW*Hhf
zbonk9KwVveYOOwRC^hu7qaS+EP&w93@uv}th_?qaV|;jITj8xl-^$8&D63QRa~FI2
z*MrDxm<upeYQpbRzI!+ma^JM5ZOSW^X_SI0L+M<+kNVtH^-?m7?xA&$*7vwOyoU)M
zCCq&iOc1l|>mW1t@@jkfR)a;QfXb79Z<vdjh!nc{ZkJpsQYQbxi6i#8>Cs1g`GrNr
z!4;4Ifz04eps2>%Mkq#J$;jZ69Z->7uY^r$3#ni7Eq~eRjIVa~i72auSs~WzlS7~*
zP;qGXZO={<kuqHt47sV^yt)N7SZ(gCIC|tb(kxMp-(C0g%)O+XGSKupnf+5mZiATm
zu=KBhF?%i~Bhfda$JHfzJj9#RM=>o-sd>s*E^oFpRGs+Q5SEA#<~{?81#nbDT!^23
znMI_55hmqmeOKpE19MFxT5-fcaDF0({MImH#!5Sa{UwA2gHe5PE6@Sx&bN%BVkbhn
zfu-t@YUIMiU_oA@M}#R#M~pJoJb<11bZ1Z*CGVU#gkZG_Sa&l{?;LP!(AwY&ENLtX
zQH36@)-fFsn@UiSXq-VPKX4zVsxPf9pNLUvB6t;>o1R|OCq%TI0>yhD`3~YT;yc!A
ze=X!Y&>05rH(w(fb=`57q~P!Hj~7)xKv^eBE8TaZe(CX@6Q3iiXC%rK30@0>rB4p!
z=6MvVLIo`LpVa>brsODDYVPT<oM3RDAdiVb>0vU09J6er?MYNp;Frkl|DHNOh!rlZ
znM%-|J!|IlF<Ye4FrYwnJztt<f-uR&_rGY$z75Jz_Q0NsQpk*dLsuB#wh^2Cm0RjM
z`mHyHb`u_^TB3{&fZw|y(-^@Xw_&r4tI#&;&?{}qyTU48=zwku_i9ZtnCet0Ssj(=
znFNJGhG0L6nihkut~Dmh3O5vS#>}892u?9Gr6^(`3hy80`T(A(;ax0i6|kO6tNXby
zEaA?S+QLeD*l^ky|Gx`Er|qCgY>8teL}|54;W#^U_=L3VGA$QRjDJIxF05J^rpUBb
z`xYcQB!l|wm)xyy53HB@g-10_ZQNO4`7t|^4(`#0E?t#dt>Qc16gl_mLZLLxbml;P
z3&WSPG9CMEuq)bHUb{t0XIA!dwbSj??Y$!Hfo|gW5en}DcNRHWR6gtM_^Ip^Ss>3;
zyjmIS>+E4@*8kkj7%fhvbd35Da|05)h@N}}l{pC`*Mm)#Vh_&naz(I*ZyF2i3bI@;
zd&qe@dj6>Sf{&XF1`C^nUt*1`*@NKv@S$$sgAWYV`@>JfJSUhHN)xDO_|ZIOx%h#@
zJ_*S=Pc|Y!O`jVx!@!O`aAr8)LvL2BQDgRUhzoLQWg5-DrXrhIc=kJ;Q%DplqhOoO
zs6!7nKQnjn5v0uwKA5og=~p_RJjU4=T#tdN-~?`!Lo!&dwT_&U$dx!l7~PW;%z~>3
zpL%1aj5V<k3Q4^43O#DM7_*{W;ugoKds9@n0<WS<v|9SiyFNx1rXAto`Af7&ZoqH?
zLi0xT+lDtFyH3Se>yLwl963Pjini?L`?==xd|#o$SuFQt$%0?MO^aJ{GILaqBiNrM
zepp_d)OK`vFpCT-IKJgZXRr+-K1b7u!}{>K`sM-=Z|D#QX)cPANvU(5Tl?BOQcjI0
zt>vG|SF@V)=cStM;{Vz1Js&%SV7B@Sf@vc<GGHn)ObY0*rI>kHMo?69v-QWQ6gj|H
z`~wzQ9?klEiXy`#joO!Ba>e3`=a|j%tJKjEp-^Yy0BWzI(y{Onme>d}AF$x;fT`;3
zvIqLpzTdHN>oZ@VVCQG;lzbfpqisXht7`s@#aDCb&ifJJKQuV1zSZ%(BE3yln?ZlC
z?Ej&bJa)7(7)*Si!8Nj8uwX>d)5(Ktj9EJ~WM5gKh&r^b@W&1~ZT45JcFVQHA9icg
zAD!@6V%R~$D|Gf+{({#aJ=41rBuCMnbx*_2x`ru?&V@2JatLnaUNt$uOy_Fco235Z
zlKRfTBw3-Ipq%=6T5c2{+4~kLkw0<rP<rUJpYLkp^dkK|y{?k1<he9Qq~cx;QTAC~
z0@K*Kts)=6aA?$nkjSMK9x!g2gSDkXt?a?#e=_`?H|j#i;!GueO3sBk`gwoI37O~w
z`O&itzvw&Tc>Inm8}AP(2yEHZP-G9Np=VDCHezzB&_TGg=H8v^VrK9xQ4O#Drc=US
z>2obHon~|&bI7#-pAbVQcHg^)B@8O1jAb7qd<)+nk!!kTa7|kf0?ucum74?;r~2=S
z4glx!6*`)fixR8Q4v9A3p2nbq=99|bq9{Ysq6MfyUyFG>Vd@0ytTYFnw4}Ma(O|ng
zodj#~r%9B{(^7olhw2Ym;nOnd1uU2ZzoZ)aYgy^<A;A?Pzve?{-j#xhyV-%baO17t
zX}x>jGy{!xh7_c228)Ks4Y1WaDS!8BI%y(J_;dC`XMuLE-#@3gfl^|%uT!Q({~Yhq
z`WeGoVr-(y`9@pZ@qz51G#<Z&j<CJTrMd>c6|)Cq%{Uh3vE#Fo#=d6Y28PufcOSqd
zo{b{PgqYOi;*E{%(bf_6$I21~5=@SbUS+n@O57?_2f?Rj2od>snaat1Z26YZHY1;c
zCuuf?rU&I?&X$CmO@;T2uI)|{Emcd4KI^p-HALBKbqPFWY&f|ShNDMKm8fF10f38r
zoeRJ>@oS-1Hp1j-TUBte9gB+hkSUz@tL2-Ra(GwdlkOwY&o6}3GHJ8?I`kx8hO@Tn
zjC9xO^&V_JB%V5gCG!s1{`tIEb#bUg=8%*OFknMAH=VFDZ>KNveY43}(5as`do+68
zCggt5WlEtQ<ucr`e6lWVHH*VaG;&L)SL-@i3z{c7hvO@jQte~_&Kk6H_!&Ih=_13N
zUs<A%kvSH&#=3gl>|(?>h0~W2%L7$!KQ+B-Rv;hrF-y*=-|7=y4FYcPpN%0^=-S~!
zW1(j8dL=O2n+)`{7C9^A$~<ErMJZ+#@0>f+Ih{Jki5>ejUHhQ#8SfgLD*ZG}=<Maf
zgU78zqqn5GbRXysG3l2RHBUtR{C7FcM4|ZO9gz;;B&u~W{O9hPU8Q_YquegUx~Ncv
zklKlTQUnHgl=oa>w9~0`uh5jNxtjUlg0!u;$Xahw+mSR6Lleq^vD__kY!kSb8^1cG
zXw)AyhFe@KrPU^Md4(?X?)=<1usgP^n%a-N@jhE(#wM~2vDfPBmJjuBfF=7mm4<Y4
zObyA1$b-0u4iC7$Og!|>KcJN6w}4_hSUQR(+7u#>MVgp-U1^%Fh+L7vqvP{Wy#v3T
z*(j2)vNS*}8)uUb`EtDPwcNp28F*v4m~-_UF!P`|jNbcA3mMxJ|FXqMDQ+N^+G3Bd
zcT%(=eHdVLd3z&AW3Z<p)$u|R>~FR#6$rMhX?=IzA(alWnRhu-#(JB+11E15VCR)$
z!*5JIb?EkTv0t`{ycDH#>RjsuYeI}p{NyPF)%#}~WslV*@R+&T%YcflyjHJ7k6st-
z<Zcx~Lx&oxjvSk!yH3fKiON=+Kb+#|Xb@rQnYAjOxk#=e_{tQZY+tacPxQactx@T1
z+_umG5Kl^_Z^$Hsb53-R!!IACF*hb54nJ3@gK8a|WOQ8NKWI5I@bZ@V<+=b9Llv2l
zK|m(2-f8*ga|Zb<_Hxl{b}P|s<<?vN7H#8!qT+$43(E@f4H33!PQd(!$19wSjw22W
z3>oM1Ceza7=akSEmuuAiNya$szHC06Z-SjEn7MNWgeFcm7`(?Q=y7n)FXlCKs#>YN
zw698Bi>Clm|LfK2>;psFl0`;8ogLYK|9tmIdSM@9^s5O{@dH@NOA?kpc$5(DJ^!7C
zvX09E%8BW%ST$LoIx5ZG@V+bq?iACP6Z;&@hQ0;$_rGOUGetYhl@4^AQeG{qJvDEt
zW<0lfW2vb>55p<#=%yuKQq>u>x(`U1M0rx&CzynsfBAvurh+8`DcZn;cy!`KNP^Xv
z<>L9wN$y{3->s%}ocAe*>6Yx@-e(DBK`(8LN@pi!wF9Y-XUJAH?JWlHnkN74LlKWV
z8<$;r1_lI_I^f2LPK-v@Dv65k{+|tkz>}E5x1}XstOyH+_HObg-{aAgLvqV-u(vxi
zXwY)4d3x|w?T>J|0fvqZf)S8^<=APH$?XGy7WBo!RVT1P>mQilpL6kCp@+z=p{c%@
z=3lXAJDfS#BwGGOETUH%pZgVd!@o7r&b(^C!b;V9)wX+s81P^f=Q0(}H~7KqB@9<}
zOK6I22lpGRP4k`-;(6IXbf7ngeQo$umG%AF^xAc5#Y7H;MEl7dfK7I|yV<0?%DM%L
z9(4g76kV5-1)h_~x~rxM%>z<*Dl?Ik-nGK-C~a$6ewZT8B%rHurg_Lo*yQ!L1}4xU
z$}Tx8XP^R~fijxT@cmIi%ovcPUenIFQiYYjcfc&Nzj9^Xy{@mS7oM9k#(#8>rR((7
zt<)R&0W!N-(N!P^h?mMlBavry!E)7G^~-~P%AMGSs0)no8SOq2m209g*~{K*J>_fm
zKHNX<FUfOQRKPn@YvTFrPVjz3QQnJ#kX;=n)*==H-V-*q{&<<~k4oNdgkNRlfEC<r
zP}yvzLL32Jti*FFhL9p@yh{0J?9_X6Z;y{G^-Uj82l39jeyq^60z*0Gj(460^u>r?
znc0Irly<eTq98T%)w~K^>)6ebqHP>4!f*r4T~u9JyqjSfq<%!d>7Fo^dnM?~UP@Li
zO(!bmYmWiaWN*x$MA|L~%oHsCd#9?pvD5*)nY=5DpR&25<Y{(v)aE3FR$a9#N?1zw
zL^F8QJOcv6bmA@B9%b7jX^@QTuaEyKB@1W`$}(X?I0FZ%VxhT|uzfR+3If49kB$B;
z3%s&0`=VF7dG8otQ=nN@`7ZogJlE(^V|1pX1j3q0PObOTR@0;($%VO%Qls)NBny$j
z1m9wBS!I~K@WuUO!Hbgjx1OMm37Z6OIXp`bIwTUKlub)mYzr@&hpF%*EoQF;86qY!
zhnuer$}Fw1<tJdp_s#?q1cI_}N(0{ha*gqF`y7lO1UgrQEEli#pJ}Yp5VGW(NmEFc
z{;oR{eDOYigqY<PEc8D>T%vVQ<R;%ci(oO%Tj8sg@)FPMlgMRWtB*6mn?H-ZW3#hV
zwO4IBSDpe-6e7+y<#Q#796nOuWt)ca#ReJs<U$QL0^ExgynGhhm$1uf-{z6;#VvhD
zKvsKFjn6auJD`DtnLT=2ojmhHA-S;rr+$5enB%q}<&YO{wub+J2QS!KAoi1u^u2e_
z?v1Q{{aDym$8%7TsgXl=tAWiL1TqqmwWq#i2k1;6=LW`3%vK$oc^<m1-g89Qo~eIF
zWCo5L4s3n+yUEOI1Tk<ne?nTGbmX&dM`RxeVHVn#N2ywa4b20eWYxpWxfP*}9P(SQ
zxDRxX=)xzI&H*NKFPr;L+!tTT2=M1W0XA`gR*|Or9{$d*B3u~HLKlg+Ju>B5RXc|G
zVwe|;zLXkx+Ii?LF$d{`N8JEUO|}8}(%Q|Ewk-@_g3dZ|%vg4;{PWt`3%us+IXZCQ
z-PuW$m+dT?SUJBM;BPr>ke^fRMRy*bGu$Pyd1rDTkZm~uUbzW~4rw|8YIMc+%K1k_
zv}$D6iV$q>8+Dj%C(*N!L;1G~CC#bGWg2)Pk`tIXtt7NG_n~+ab>DWarR~(d0J5Cb
zzU>wf)UqK>xov`0&%T^6z0(}x(zRk*?R+C*wH7=2Rp?(LGpW#Kmj2FRc&i%-hFK7Z
z-UNJZ62vI+3MI(L*%u*a8Kf**qTi5ENO25Gs40BQ74VT7R}cu^QLRH0w3DOF+ao;J
zp!)^(87@$HIaj~G_+@z!Y->J|!4^?{3kTl-2Y4b_N&b~;&|>UKl9kNtV34|&<LAxH
zIy42fBS}9N_dT!&xNJBqE?v*M`DiOxQXt<|FQe7pfLBw7;609U5nq*H^dYmUr&Ip?
zM-;MFK7B^m1FvGF1_M=kKW+67>@2u?gU=MY;Q0wdz*HtG{#DbS{N191T`<pvkzkFf
ziII=g$bz)3lNhML%aP9Wb>t9>;5HzY3Ez?iabXC}S6?kZ-j0|;u74Tx*Ruz#_4&ua
zYm|(37R=;8FD>%LqLwI@A+%H-n#2{N^9u~mBYX$I?;%WLf2(j5X;7SedT?e<{33XE
z{fM-9+H)uYMRyrT^Vp`*NTgDTi=4Xl>x2KlRd>uL9@0F7Mzdsr=OG;4N)s}zB5l0n
z=O49c<qDNn!%oU9)nT{Nul+`!<Vtg_VS+&~3@3)4DuifQAD#-O4(dmHHKib1I6qRu
z3ev!v)(x+rr|%9pyDN+I+Jj$YQ1q14-_$PGS;cjo?8R3(=d7rtyAIF!HphE9EYZ2G
z%4=H)bA@$$f9<f%Q3;0qO%7rIn=}E3{6!)uWBU8K>zKdDCJ8%$zeprU1-3~fI0I#9
zHv~`}VcR5S=(2BS!~b6WhmG@}!4Lljv!wsmgUb;ZWThYb&1U<qDD9=7*H@`J&f~R3
zJ2OdUZYKA$W6U4_#ksrX%UQ{l*}1y+4`XxE@<puS@yI^&oqs(izbpeR+T6$?>Fj<3
zW!q%6S%`+K=8%XNUG3J6|4j{~*aLbLc#2V+&7MEcW=DLC9#8^wb}#)Q{JCj!rY^dc
zvf`?epxXpf17VOYNZ&d8aP}_>VdLolBf=%8V@W?%n6|mGxw<guz7!2M65rY%wx8|=
ztNmTH^h@BRLFNA4Zr2nybhpTU^|4Pl*bY42H$fQT7`BVsL{}ABD{l2p(cO?@B;Owk
zh*-`>K4-z8cvNsqDO<d4$t1cpNYWm`vZ&bMcl@CUu5zYA)14iF;{$zSOMjkjn|q_0
zN{}7|FLefXFYWz^nBAs6BBeE2MC0ODdx*Q2)MnW(Z;O)jQxr<wfdkpYoo9spP!+)@
z(ACblF9nhT4p1b+f0KqGQ(^(P9fy*{xG)Q%JJw={E-Y<xU7vAQR=DoM<@Php>O=Uq
ziQ_oTVj0k8z=cWsW9%q#(5_zz4nRuKn}aLR->lg8#x}E$GtNpP3E=nDA{hFCzvQ=-
z0vXgFJ#^LvU;@RSfon;>`I`<NplzH8ccHif9FH51+otWcA|EQ0lFJ}Qp3*~X>VMOE
zL!225n~OpWcR2Jl;V)S2OH_@IwL0Mhq>Q#*Oe2{j!_RF~r6CFl%!ALo1*a8%!7$NK
zNT?>$1{UShe3tQ{vXQajYJahkJrp_5@VG;Vyn)ER#6yZq{ICrZ;W#8fqG$*<2_6NW
zmzcfmXL*yhz1%j3q7XUa9Or^mSQWR3weNQ|;Z_BMuc3HYR1TkZ<lkF!;<wJ7_0nFF
zTvP*c;=7_d`xJi@Tn|WjHC6RHuY%tJ2<=c7wRrqHGRJu>U-Sv3G?%y=LI!v8&2D+k
z-~r6}a)pu-7QE(X$N65xh2GdA%O7nctSmb7J(VJIc?7qQQgP62a_nAkpy2>G;$lSv
z+!A+7QXdmle-n!BnqWf-^+eguY(0wB5M(=KN5J6r3jv2c__#5`!NqqD`&{|W$aa&p
z+%H5wf>K&`9*2Nq7Fx4BK3lniTQT5#G4W~2{d7exjIid)SVbVnxY%}!t}E0&JXJ}e
z5plCmS-_%hn{2-qWamHI;c(lQ;yLV@u*H(iNP$q;Zk)^IOMyJGTUdJ=Q9^#iwoReU
zh<I3PzpzHVd`!-F@9t2{=9)-pi<yv}4tsQVJqp_7s6Wg)3ZhW;@Fm-m|8%HhMIFud
z@$UWKVT5>g&AuPtc*$_UHfg!hUO>C~(#tQ`(?-9w4R5zVBj+smLU%fA#`iJUl}~Qj
zFG&&hqjRk|o=7h(2B#*l(FY%~{+^f!eAu~a-^mkul>M&O!NRci#h#D92QBtG;#Orf
zSEwPuMVX!P<K4on{CwMTX+WK`ix?3ZPfT)J^mpvooM-}Idu>44dvHd*NqnDvvikO?
z!IlErB;FgGvS}p#K-Tar;|T{rD9IVu;@TIJXOp+X)gPPy`jGL6pnc}>N#Mxl+vJaf
zY39U?DQBen&A$Faik91S-H^tihZ%cK;$sQB9$nwcJ#K0?U}|%}mF7r4;h%E|_wmT;
z(8lD5?p-M(lcg*4+KSVTVTOIHK>=X_n@GyC!d1T0Lp-=OBBt3~EmB;w8-8>vC@>4)
z)Pir!NfI&{Un5nLut%XTa~Uyoc6oydtP;Zlj`U<_TsVJv-qx_s0O6?`#K*HO9ddcp
zInnJ%wR)n%S0`}RL@%vniU-4k*?^%gD|EE@{MjQx$~7GKI!K)0q?`O|(sr15G=rRd
zABn3>Hi62y9FEzi9lPDkAJ;?bAx}0K)L*4$nbKN>QiQLnCtll!?V6-hB4rr@7Lwa&
zZ4H%{^fS+nqdrphi?WO}F!z%gx;}drvXQtkx={Nbu?dA-zLgx~3bAz$7cb{wRNrk+
z3UPy@6g1w_yzAo>%ihvAx9srXJl=(+*O-m?7RUfGBh_u4iFzV7-|#_=pqt-5s+`us
zeGRw<Y$*34A3_Og9~~5qZ9BB$U^I|x^Qm=;W4~05%?^tlo1AhyY;an9yyNI=o|XB!
zlDpYdotv5TXYGq(f`A~f!MU#gjx!M{*0~7IJ{-#L%)M~Vm3|1CF9nf=Y}g)mUSfe!
zLQ{kbtsQqPVNbU%ze>Wt23`XjGFrIFQG5NK-b92bL_boF`|unc5?NAr+A(o>3?c|<
z?^qYJ<lYbooY5OiI2V$l;rc_Yqq~r@v*+8_KA%KQjOHfWy|ZFrrG`7*ItH7mIBy#)
z7IwYVrZ&^~fIUTB5F)tYi%6;2$KYJhm(22kDxc7Br!M|e)8gWm)%7g_AK9*LfPoF1
zW%^KJP8RR$cz;tZ(c`<NQ}ON3d|c^^qegLK`gUf+7M5zYAh%vu5}Z^z)je8%zF4ly
zZgIa{>0{;c_w249K)@l!+RQub_LLk{N5@LE@}nyoV~M(spfB+a__7PP)1Wpk#)&Od
zgAg}VMLYCLU7xr?U;kThva5Yj6zpphyBF)g(FxF%cz3vHnT=)uzwidkKe4!tH5y_O
zHg<lKqk3}b73J;&Joezgq`029#lyIOWo!QDNE)O0zIKG=dnOrhf)voaq<t|@&BFix
E17&vqYybcN

literal 0
HcmV?d00001

diff --git a/public/sw.js b/public/sw.js
new file mode 100644
index 0000000..f9a9905
--- /dev/null
+++ b/public/sw.js
@@ -0,0 +1,68 @@
+const CACHE_NAME = "nowhatever-v1";
+
+const PRECACHE_URLS = ["/", "/offline"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches
+      .open(CACHE_NAME)
+      .then((cache) => cache.addAll(PRECACHE_URLS))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((key) => key !== CACHE_NAME)
+            .map((key) => caches.delete(key))
+        )
+      )
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+
+  if (request.method !== "GET") return;
+
+  const url = new URL(request.url);
+
+  // API calls: network-only
+  if (url.pathname.startsWith("/api/")) return;
+
+  // Static assets (_next/static, icons, fonts): cache-first
+  if (
+    url.pathname.startsWith("/_next/static/") ||
+    url.pathname.match(/\.(png|jpg|svg|ico|woff2?)$/)
+  ) {
+    event.respondWith(
+      caches.match(request).then(
+        (cached) =>
+          cached ||
+          fetch(request).then((response) => {
+            const clone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+            return response;
+          })
+      )
+    );
+    return;
+  }
+
+  // HTML pages: network-first, fallback to cache, then offline page
+  event.respondWith(
+    fetch(request)
+      .then((response) => {
+        const clone = response.clone();
+        caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+        return response;
+      })
+      .catch(() => caches.match(request).then((cached) => cached || caches.match("/offline")))
+  );
+});
diff --git a/scripts/generate-pwa-icons.mjs b/scripts/generate-pwa-icons.mjs
new file mode 100644
index 0000000..07a1676
--- /dev/null
+++ b/scripts/generate-pwa-icons.mjs
@@ -0,0 +1,37 @@
+import sharp from "sharp";
+import { mkdirSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, "..", "public");
+
+const ACCENT = "#10b981";
+const BG_DARK = "#030712";
+
+function buildSvg(size) {
+  const fontSize = Math.round(size * 0.32);
+  const radius = Math.round(size * 0.18);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+    <rect width="${size}" height="${size}" rx="${radius}" fill="${BG_DARK}"/>
+    <text x="50%" y="54%" text-anchor="middle" dominant-baseline="central"
+          font-family="system-ui,-apple-system,sans-serif" font-weight="700"
+          font-size="${fontSize}" fill="${ACCENT}">NW</text>
+  </svg>`;
+}
+
+const sizes = [192, 512];
+
+for (const size of sizes) {
+  const svg = Buffer.from(buildSvg(size));
+  const out = join(publicDir, `icon-${size}x${size}.png`);
+  await sharp(svg).resize(size, size).png().toFile(out);
+  console.log(`✓ ${out}`);
+}
+
+const appleSvg = Buffer.from(buildSvg(180));
+const appleOut = join(publicDir, "apple-touch-icon.png");
+await sharp(appleSvg).resize(180, 180).png().toFile(appleOut);
+console.log(`✓ ${appleOut}`);
+
+console.log("\nPWA icons generated.");
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dbb8c48..25e975b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
 import { Geist } from "next/font/google";
 import "./globals.css";
 import GlobalUserBadge from "@/components/GlobalUserBadge";
+import ServiceWorkerRegistrar from "@/components/ServiceWorkerRegistrar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -19,6 +20,8 @@ export const viewport: Viewport = {
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
+  viewportFit: "cover",
+  themeColor: "#10b981",
 };
 
 const themeScript = `(function(){try{var t=localStorage.getItem("nowhatever-theme")||"system";var r=t;if(t==="system")r=window.matchMedia("(prefers-color-scheme:light)").matches?"light":"dark";document.documentElement.setAttribute("data-theme",r)}catch(e){}})()`;
@@ -32,8 +35,10 @@ export default function RootLayout({
     <html lang="zh-CN" suppressHydrationWarning>
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
       </head>
       <body className={`${geistSans.variable} font-sans antialiased`}>
+        <ServiceWorkerRegistrar />
         <GlobalUserBadge />
         {children}
       </body>
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
new file mode 100644
index 0000000..885ea36
--- /dev/null
+++ b/src/app/manifest.ts
@@ -0,0 +1,32 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "NoWhatever — 别说随便",
+    short_name: "NoWhatever",
+    description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#030712",
+    theme_color: "#10b981",
+    orientation: "portrait",
+    icons: [
+      {
+        src: "/icon-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/icon-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+      {
+        src: "/icon-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  };
+}
diff --git a/src/app/offline/page.tsx b/src/app/offline/page.tsx
new file mode 100644
index 0000000..ca75868
--- /dev/null
+++ b/src/app/offline/page.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { WifiOff } from "lucide-react";
+
+export default function OfflinePage() {
+  return (
+    <div className="min-h-dvh flex flex-col items-center justify-center px-6 bg-background text-foreground">
+      <div className="w-16 h-16 rounded-2xl bg-surface flex items-center justify-center mb-6">
+        <WifiOff className="w-8 h-8 text-muted" />
+      </div>
+      <h1 className="text-xl font-bold text-heading mb-2">没有网络连接</h1>
+      <p className="text-secondary text-center mb-8">
+        请检查你的网络设置，然后重试
+      </p>
+      <button
+        onClick={() => window.location.reload()}
+        className="px-6 py-3 bg-accent text-white rounded-xl font-medium active:scale-95 transition-transform"
+      >
+        重试
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/ServiceWorkerRegistrar.tsx b/src/components/ServiceWorkerRegistrar.tsx
new file mode 100644
index 0000000..9299ca4
--- /dev/null
+++ b/src/components/ServiceWorkerRegistrar.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function ServiceWorkerRegistrar() {
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/sw.js").catch(() => {});
+    }
+  }, []);
+
+  return null;
+}

From add9733bc98707adb094931ec21e7883cd4fdf5a Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:41:39 +0800
Subject: [PATCH 26/66] =?UTF-8?q?ui:=20=E9=A1=B5=E9=9D=A2=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB=20=E2=80=94=20Ani?=
 =?UTF-8?q?matePresence=20=E6=B7=A1=E5=85=A5=E6=BB=91=E5=87=BA=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx                |  3 ++-
 src/components/PageTransition.tsx | 45 +++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 src/components/PageTransition.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 25e975b..d0b1671 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Geist } from "next/font/google";
 import "./globals.css";
 import GlobalUserBadge from "@/components/GlobalUserBadge";
 import ServiceWorkerRegistrar from "@/components/ServiceWorkerRegistrar";
+import PageTransition from "@/components/PageTransition";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -40,7 +41,7 @@ export default function RootLayout({
       <body className={`${geistSans.variable} font-sans antialiased`}>
         <ServiceWorkerRegistrar />
         <GlobalUserBadge />
-        {children}
+        <PageTransition>{children}</PageTransition>
       </body>
     </html>
   );
diff --git a/src/components/PageTransition.tsx b/src/components/PageTransition.tsx
new file mode 100644
index 0000000..35f0550
--- /dev/null
+++ b/src/components/PageTransition.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useContext, useRef, type PropsWithChildren } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+/**
+ * Preserves the previous route's React context during the exit animation
+ * so the old page doesn't break while fading out.
+ */
+function FrozenRoute({ children }: PropsWithChildren) {
+  const ctx = useContext(LayoutRouterContext);
+  const frozen = useRef(ctx).current;
+  return (
+    <LayoutRouterContext.Provider value={frozen}>
+      {children}
+    </LayoutRouterContext.Provider>
+  );
+}
+
+const variants = {
+  enter: { opacity: 0, y: 12 },
+  center: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -12 },
+};
+
+export default function PageTransition({ children }: PropsWithChildren) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={pathname}
+        variants={variants}
+        initial="enter"
+        animate="center"
+        exit="exit"
+        transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+      >
+        <FrozenRoute>{children}</FrozenRoute>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

From b1cbf0d58988bf066b534f08a82a1b971548f8ed Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:49:06 +0800
Subject: [PATCH 27/66] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=20fixed=20=E5=AE=9A=E4=BD=8D=E5=A4=B1=E6=95=88=E5=92=8C?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E5=BE=BD=E7=AB=A0=E8=A2=AB=E9=81=AE=E6=8C=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx                 | 2 +-
 src/components/GlobalUserBadge.tsx | 2 +-
 src/components/PageTransition.tsx  | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d0b1671..2e2b3ac 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -40,8 +40,8 @@ export default function RootLayout({
       </head>
       <body className={`${geistSans.variable} font-sans antialiased`}>
         <ServiceWorkerRegistrar />
-        <GlobalUserBadge />
         <PageTransition>{children}</PageTransition>
+        <GlobalUserBadge />
       </body>
     </html>
   );
diff --git a/src/components/GlobalUserBadge.tsx b/src/components/GlobalUserBadge.tsx
index ff99244..3d3f2e7 100644
--- a/src/components/GlobalUserBadge.tsx
+++ b/src/components/GlobalUserBadge.tsx
@@ -53,7 +53,7 @@ export default function GlobalUserBadge() {
   return (
     <>
       <motion.div
-        className="fixed right-4 top-3 z-40 flex items-center gap-1.5"
+        className="fixed right-4 top-3 z-50 flex items-center gap-1.5"
         initial={{ opacity: 0, scale: 0.9 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ delay: 0.1, duration: 0.3 }}
diff --git a/src/components/PageTransition.tsx b/src/components/PageTransition.tsx
index 35f0550..4187530 100644
--- a/src/components/PageTransition.tsx
+++ b/src/components/PageTransition.tsx
@@ -20,9 +20,9 @@ function FrozenRoute({ children }: PropsWithChildren) {
 }
 
 const variants = {
-  enter: { opacity: 0, y: 12 },
-  center: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: -12 },
+  enter: { opacity: 0 },
+  center: { opacity: 1 },
+  exit: { opacity: 0 },
 };
 
 export default function PageTransition({ children }: PropsWithChildren) {

From ac8cb8c63548348b1eb263e59c6933a2ad5da8b8 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 16:55:58 +0800
Subject: [PATCH 28/66] =?UTF-8?q?feat:=20=E7=9B=B2=E7=9B=92=E6=83=B3?=
 =?UTF-8?q?=E6=B3=95=E6=94=AF=E6=8C=81=E7=BC=96=E8=BE=91=E5=92=8C=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=EF=BC=8C=E5=B1=95=E7=A4=BA=E7=94=A8=E6=88=B7=E5=B7=B2?=
 =?UTF-8?q?=E6=8A=95=E5=85=A5=E7=9A=84=E6=83=B3=E6=B3=95=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/blindbox/route.ts    |  58 ++++++++++-
 src/app/blindbox/[code]/page.tsx | 173 +++++++++++++++++++++++++++++++
 2 files changed, 229 insertions(+), 2 deletions(-)

diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
index 9c9ef3c..31acc9e 100644
--- a/src/app/api/blindbox/route.ts
+++ b/src/app/api/blindbox/route.ts
@@ -55,10 +55,15 @@ export async function GET(req: NextRequest) {
   }
 
   try {
-    const [poolCount, drawn] = await Promise.all([
+    const [poolCount, myIdeas, drawn] = await Promise.all([
       prisma.blindBoxIdea.count({
         where: { roomId, status: "in_pool" },
       }),
+      prisma.blindBoxIdea.findMany({
+        where: { roomId, userId, status: "in_pool" },
+        orderBy: { createdAt: "desc" },
+        select: { id: true, content: true, createdAt: true },
+      }),
       prisma.blindBoxIdea.findMany({
         where: { roomId, status: "drawn" },
         orderBy: { createdAt: "desc" },
@@ -69,8 +74,57 @@ export async function GET(req: NextRequest) {
       }),
     ]);
 
-    return NextResponse.json({ poolCount, drawn });
+    return NextResponse.json({ poolCount, myIdeas, drawn });
   } catch {
     return errorResponse("查询失败", 500);
   }
 }
+
+export async function PUT(req: NextRequest) {
+  try {
+    const { ideaId, userId, content } = await req.json();
+
+    if (!userId) return errorResponse("请先登录", 401);
+    if (!ideaId) return errorResponse("缺少 ideaId", 400);
+    if (!content || typeof content !== "string" || content.trim().length === 0) {
+      return errorResponse("内容不能为空", 400);
+    }
+    if (content.trim().length > 200) {
+      return errorResponse("内容不能超过 200 字", 400);
+    }
+
+    const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
+    if (!idea) return errorResponse("想法不存在", 404);
+    if (idea.userId !== userId) return errorResponse("只能编辑自己的想法", 403);
+    if (idea.status !== "in_pool") return errorResponse("已抽中的想法不能编辑", 400);
+
+    const updated = await prisma.blindBoxIdea.update({
+      where: { id: ideaId },
+      data: { content: content.trim() },
+    });
+
+    return NextResponse.json({ id: updated.id, content: updated.content });
+  } catch {
+    return errorResponse("编辑失败", 500);
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const { ideaId, userId } = await req.json();
+
+    if (!userId) return errorResponse("请先登录", 401);
+    if (!ideaId) return errorResponse("缺少 ideaId", 400);
+
+    const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
+    if (!idea) return errorResponse("想法不存在", 404);
+    if (idea.userId !== userId) return errorResponse("只能删除自己的想法", 403);
+    if (idea.status !== "in_pool") return errorResponse("已抽中的想法不能删除", 400);
+
+    await prisma.blindBoxIdea.delete({ where: { id: ideaId } });
+
+    return NextResponse.json({ deleted: true });
+  } catch {
+    return errorResponse("删除失败", 500);
+  }
+}
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 25e5f93..33819b8 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -16,6 +16,9 @@ import {
   Copy,
   Trash2,
   LogOut,
+  Pencil,
+  Check,
+  X,
 } from "lucide-react";
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
@@ -32,6 +35,12 @@ interface RoomInfo {
   members: { id: string; username: string; avatar: string }[];
 }
 
+interface MyIdea {
+  id: string;
+  content: string;
+  createdAt: string;
+}
+
 interface DrawnIdea {
   id: string;
   content: string;
@@ -42,6 +51,116 @@ interface DrawnIdea {
 
 type Phase = "pool" | "shaking" | "reveal";
 
+function MyIdeaItem({
+  idea,
+  onEdit,
+  onDelete,
+}: {
+  idea: MyIdea;
+  onEdit: (id: string, content: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(idea.content);
+  const [saving, setSaving] = useState(false);
+
+  const handleSave = async () => {
+    if (!draft.trim() || saving) return;
+    setSaving(true);
+    await onEdit(idea.id, draft);
+    setSaving(false);
+    setEditing(false);
+  };
+
+  return (
+    <motion.div
+      layout
+      className="flex items-center gap-2 rounded-xl bg-surface/60 px-3 py-2.5 ring-1 ring-border/80"
+      initial={{ opacity: 0, y: -8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, x: -20 }}
+    >
+      {editing ? (
+        <>
+          <input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value.slice(0, 200))}
+            onKeyDown={(e) => { if (e.key === "Enter") handleSave(); if (e.key === "Escape") { setEditing(false); setDraft(idea.content); } }}
+            maxLength={200}
+            autoFocus
+            className="h-8 min-w-0 flex-1 rounded-lg bg-elevated px-2.5 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-purple-600/50"
+          />
+          <button
+            onClick={handleSave}
+            disabled={saving || !draft.trim()}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-purple-600 text-white disabled:opacity-40"
+          >
+            {saving ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />}
+          </button>
+          <button
+            onClick={() => { setEditing(false); setDraft(idea.content); }}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-elevated text-muted"
+          >
+            <X size={12} />
+          </button>
+        </>
+      ) : (
+        <>
+          <span className="text-sm">💡</span>
+          <p className="min-w-0 flex-1 truncate text-sm text-secondary">{idea.content}</p>
+          <button
+            onClick={() => setEditing(true)}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-purple-400"
+          >
+            <Pencil size={12} />
+          </button>
+          <button
+            onClick={() => onDelete(idea.id)}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-rose-400"
+          >
+            <Trash2 size={12} />
+          </button>
+        </>
+      )}
+    </motion.div>
+  );
+}
+
+function MyIdeasSection({
+  ideas,
+  onEdit,
+  onDelete,
+}: {
+  ideas: MyIdea[];
+  onEdit: (id: string, content: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+}) {
+  return (
+    <motion.div
+      className="mt-6 w-full max-w-sm"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="mb-2 flex items-center gap-2">
+        <Package size={13} className="text-purple-400" />
+        <h3 className="text-xs font-bold tracking-wider text-muted">
+          我投入的想法（{ideas.length}）
+        </h3>
+        <div className="h-px flex-1 bg-border" />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <AnimatePresence>
+          {ideas.map((idea) => (
+            <MyIdeaItem key={idea.id} idea={idea} onEdit={onEdit} onDelete={onDelete} />
+          ))}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}
+
 export default function BlindboxRoomPage() {
   const { code } = useParams<{ code: string }>();
   const router = useRouter();
@@ -55,6 +174,7 @@ export default function BlindboxRoomPage() {
   const [input, setInput] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [poolCount, setPoolCount] = useState(0);
+  const [myIdeas, setMyIdeas] = useState<MyIdea[]>([]);
   const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
   const [phase, setPhase] = useState<Phase>("pool");
   const [revealedIdea, setRevealedIdea] = useState<DrawnIdea | null>(null);
@@ -112,6 +232,7 @@ export default function BlindboxRoomPage() {
       if (res.ok) {
         const data = await res.json();
         setPoolCount(data.poolCount ?? 0);
+        setMyIdeas(data.myIdeas ?? []);
         setDrawnHistory(data.drawn ?? []);
       }
     } catch { /* ignore */ }
@@ -159,8 +280,10 @@ export default function BlindboxRoomPage() {
         const data = await res.json();
         throw new Error(data.error || "提交失败");
       }
+      const { id } = await res.json();
       setInput("");
       setPoolCount((c) => c + 1);
+      setMyIdeas((prev) => [{ id, content: text, createdAt: new Date().toISOString() }, ...prev]);
       setSubmitFlash(true);
       setTimeout(() => setSubmitFlash(false), 600);
       boxControls.start({
@@ -175,6 +298,47 @@ export default function BlindboxRoomPage() {
     }
   };
 
+  const handleEditIdea = useCallback(async (ideaId: string, newContent: string) => {
+    if (!profile) return;
+    const trimmed = newContent.trim();
+    if (!trimmed || trimmed.length > 200) return;
+    try {
+      const res = await fetch("/api/blindbox", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ideaId, userId: profile.id, content: trimmed }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "编辑失败");
+      }
+      setMyIdeas((prev) => prev.map((i) => (i.id === ideaId ? { ...i, content: trimmed } : i)));
+    } catch (e) {
+      setToast(e instanceof Error ? e.message : "编辑失败");
+      setTimeout(() => setToast(""), 2200);
+    }
+  }, [profile]);
+
+  const handleDeleteIdea = useCallback(async (ideaId: string) => {
+    if (!profile) return;
+    try {
+      const res = await fetch("/api/blindbox", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ideaId, userId: profile.id }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "删除失败");
+      }
+      setMyIdeas((prev) => prev.filter((i) => i.id !== ideaId));
+      setPoolCount((c) => Math.max(0, c - 1));
+    } catch (e) {
+      setToast(e instanceof Error ? e.message : "删除失败");
+      setTimeout(() => setToast(""), 2200);
+    }
+  }, [profile]);
+
   const handleDraw = async () => {
     if (poolCount === 0 || !profile || !room) {
       setError("盒子是空的，先往里面塞点想法吧！");
@@ -576,6 +740,15 @@ export default function BlindboxRoomPage() {
             )}
           </AnimatePresence>
 
+          {/* My ideas in pool */}
+          {myIdeas.length > 0 && phase === "pool" && (
+            <MyIdeasSection
+              ideas={myIdeas}
+              onEdit={handleEditIdea}
+              onDelete={handleDeleteIdea}
+            />
+          )}
+
           {/* History */}
           {drawnHistory.length > 0 && phase !== "shaking" && (
             <motion.div

From 948274bcb9826bb0ee5a5adeaec8d63ce75e8640 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 17:45:52 +0800
Subject: [PATCH 29/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20Modal=20?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B6=88=E9=99=A4?=
 =?UTF-8?q?=204=20=E4=B8=AA=E5=BC=B9=E7=AA=97=E7=9A=84=E9=87=8D=E5=A4=8D?=
 =?UTF-8?q?=E6=A0=B7=E6=9D=BF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 backdrop 遮罩、点击关闭、AnimatePresence 动画封装为 Modal 组件，
支持 sheet（底部弹出）和 dialog（居中缩放）两种变体，净减约 110 行。
---
 src/components/AuthModal.tsx         | 297 +++++++++++------------
 src/components/LeaveConfirmModal.tsx |  85 +++----
 src/components/Modal.tsx             |  75 ++++++
 src/components/QrInviteModal.tsx     | 131 +++++-----
 src/components/RoomManageModal.tsx   | 342 ++++++++++++---------------
 5 files changed, 448 insertions(+), 482 deletions(-)
 create mode 100644 src/components/Modal.tsx

diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 52c9119..0e39765 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { useState, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+import { motion } from "framer-motion";
 import { X, Loader2, Eye, EyeOff } from "lucide-react";
 import { AVATARS } from "@/lib/avatars";
 import { setCachedProfile } from "@/lib/userId";
 import type { UserProfile } from "@/types";
+import Modal from "@/components/Modal";
 
 type Tab = "login" | "register";
 
@@ -17,7 +18,6 @@ interface AuthModalProps {
 }
 
 export default function AuthModal({ open, onClose, onAuth, defaultTab = "login" }: AuthModalProps) {
-  const backdropRef = useRef<HTMLDivElement>(null);
   const [tab, setTab] = useState<Tab>(defaultTab);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -27,10 +27,6 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (e.target === backdropRef.current) onClose();
-  };
-
   const resetForm = () => {
     setUsername("");
     setPassword("");
@@ -114,169 +110,144 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
   };
 
   return (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.2 }}
-          onClick={handleBackdropClick}
+    <Modal open={open} onClose={onClose}>
+      <div className="mb-4 flex items-center justify-between">
+        <span className="text-lg font-bold text-heading">欢迎</span>
+        <button
+          onClick={onClose}
+          className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
         >
-          <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
-            initial={{ y: "100%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "100%" }}
-            transition={{ type: "spring", damping: 28, stiffness: 350 }}
+          <X size={16} />
+        </button>
+      </div>
+
+      <div className="flex gap-1 rounded-xl bg-elevated p-1">
+        {(["login", "register"] as const).map((t) => (
+          <button
+            key={t}
+            onClick={() => switchTab(t)}
+            className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
+              tab === t ? "text-heading" : "text-muted"
+            }`}
           >
-            <div className="mb-4 flex items-center justify-between">
-              <span className="text-lg font-bold text-heading">欢迎</span>
-              <button
-                onClick={onClose}
-                className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
-              >
-                <X size={16} />
-              </button>
-            </div>
-
-            {/* Tabs */}
-            <div className="flex gap-1 rounded-xl bg-elevated p-1">
-              {(["login", "register"] as const).map((t) => (
-                <button
-                  key={t}
-                  onClick={() => switchTab(t)}
-                  className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
-                    tab === t ? "text-heading" : "text-muted"
-                  }`}
-                >
-                  {tab === t && (
-                    <motion.div
-                      layoutId="auth-tab"
-                      className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
-                      transition={{ type: "spring", stiffness: 400, damping: 30 }}
-                    />
-                  )}
-                  <span className="relative z-10">
-                    {t === "login" ? "登录" : "注册"}
-                  </span>
-                </button>
-              ))}
-            </div>
-
-            {/* Username */}
-            <div className="mt-5">
-              <p className="text-xs font-medium text-muted">用户名</p>
-              <input
-                type="text"
-                value={username}
-                onChange={(e) => {
-                  setUsername(e.target.value.slice(0, 16));
-                  setError("");
-                }}
-                placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
-                maxLength={16}
-                className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+            {tab === t && (
+              <motion.div
+                layoutId="auth-tab"
+                className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
+                transition={{ type: "spring", stiffness: 400, damping: 30 }}
               />
-            </div>
-
-            {/* Password */}
-            <div className="mt-4">
-              <p className="text-xs font-medium text-muted">密码</p>
-              <div className="relative mt-2">
-                <input
-                  type={showPassword ? "text" : "password"}
-                  value={password}
-                  onChange={(e) => {
-                    setPassword(e.target.value);
-                    setError("");
-                  }}
-                  placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
-                  className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-secondary"
-                >
-                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-              </div>
-            </div>
-
-            {/* Confirm password (register only) */}
-            {tab === "register" && (
-              <div className="mt-4">
-                <p className="text-xs font-medium text-muted">确认密码</p>
-                <input
-                  type={showPassword ? "text" : "password"}
-                  value={confirmPassword}
-                  onChange={(e) => {
-                    setConfirmPassword(e.target.value);
-                    setError("");
-                  }}
-                  placeholder="再次输入密码"
-                  className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
-                />
-              </div>
             )}
+            <span className="relative z-10">
+              {t === "login" ? "登录" : "注册"}
+            </span>
+          </button>
+        ))}
+      </div>
 
-            {/* Avatar picker (register only) */}
-            {tab === "register" && (
-              <div className="mt-4">
-                <p className="text-xs font-medium text-muted">
-                  选择头像
-                  <span className="ml-1 text-dim">（可选）</span>
-                </p>
-                <div className="mt-2 grid grid-cols-6 gap-2">
-                  {AVATARS.map((a) => (
-                    <button
-                      key={a.emoji}
-                      onClick={() => setAvatar(a.emoji)}
-                      className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
-                        avatar === a.emoji
-                          ? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
-                          : "bg-elevated hover:bg-subtle"
-                      }`}
-                    >
-                      {a.emoji}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
+      <div className="mt-5">
+        <p className="text-xs font-medium text-muted">用户名</p>
+        <input
+          type="text"
+          value={username}
+          onChange={(e) => {
+            setUsername(e.target.value.slice(0, 16));
+            setError("");
+          }}
+          placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
+          maxLength={16}
+          className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+        />
+      </div>
 
-            {error && (
-              <motion.p
-                className="mt-3 text-center text-xs font-medium text-rose-400"
-                initial={{ opacity: 0, y: -4 }}
-                animate={{ opacity: 1, y: 0 }}
-              >
-                {error}
-              </motion.p>
-            )}
+      <div className="mt-4">
+        <p className="text-xs font-medium text-muted">密码</p>
+        <div className="relative mt-2">
+          <input
+            type={showPassword ? "text" : "password"}
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              setError("");
+            }}
+            placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
+            className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-secondary"
+          >
+            {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+          </button>
+        </div>
+      </div>
 
-            <button
-              onClick={handleSubmit}
-              disabled={loading}
-              className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
-            >
-              {loading ? (
-                <>
-                  <Loader2 size={16} className="animate-spin" />
-                  {tab === "login" ? "登录中..." : "注册中..."}
-                </>
-              ) : tab === "login" ? (
-                "登录"
-              ) : (
-                "注册"
-              )}
-            </button>
-          </motion.div>
-        </motion.div>
+      {tab === "register" && (
+        <div className="mt-4">
+          <p className="text-xs font-medium text-muted">确认密码</p>
+          <input
+            type={showPassword ? "text" : "password"}
+            value={confirmPassword}
+            onChange={(e) => {
+              setConfirmPassword(e.target.value);
+              setError("");
+            }}
+            placeholder="再次输入密码"
+            className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+          />
+        </div>
       )}
-    </AnimatePresence>
+
+      {tab === "register" && (
+        <div className="mt-4">
+          <p className="text-xs font-medium text-muted">
+            选择头像
+            <span className="ml-1 text-dim">（可选）</span>
+          </p>
+          <div className="mt-2 grid grid-cols-6 gap-2">
+            {AVATARS.map((a) => (
+              <button
+                key={a.emoji}
+                onClick={() => setAvatar(a.emoji)}
+                className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
+                  avatar === a.emoji
+                    ? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
+                    : "bg-elevated hover:bg-subtle"
+                }`}
+              >
+                {a.emoji}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <motion.p
+          className="mt-3 text-center text-xs font-medium text-rose-400"
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          {error}
+        </motion.p>
+      )}
+
+      <button
+        onClick={handleSubmit}
+        disabled={loading}
+        className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
+      >
+        {loading ? (
+          <>
+            <Loader2 size={16} className="animate-spin" />
+            {tab === "login" ? "登录中..." : "注册中..."}
+          </>
+        ) : tab === "login" ? (
+          "登录"
+        ) : (
+          "注册"
+        )}
+      </button>
+    </Modal>
   );
 }
diff --git a/src/components/LeaveConfirmModal.tsx b/src/components/LeaveConfirmModal.tsx
index db8d566..030ccbb 100644
--- a/src/components/LeaveConfirmModal.tsx
+++ b/src/components/LeaveConfirmModal.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
 import { LogOut } from "lucide-react";
+import Modal from "@/components/Modal";
 
 interface LeaveConfirmModalProps {
   open: boolean;
@@ -15,61 +14,35 @@ export default function LeaveConfirmModal({
   onConfirm,
   onCancel,
 }: LeaveConfirmModalProps) {
-  const backdropRef = useRef<HTMLDivElement>(null);
-
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (e.target === backdropRef.current) onCancel();
-  };
-
   return (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.15 }}
-          onClick={handleBackdropClick}
-        >
-          <motion.div
-            className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.9, opacity: 0 }}
-            transition={{ type: "spring", damping: 25, stiffness: 350 }}
+    <Modal open={open} onClose={onCancel} variant="dialog">
+      <div className="flex flex-col items-center">
+        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
+          <LogOut size={22} className="text-rose-400" />
+        </div>
+
+        <h2 className="mt-4 text-base font-bold text-heading">
+          确定要退出房间吗？
+        </h2>
+        <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
+          退出后你的滑卡进度不会丢失，可以用房间号重新加入
+        </p>
+
+        <div className="mt-5 flex w-full gap-2.5">
+          <button
+            onClick={onCancel}
+            className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
           >
-            <div className="flex flex-col items-center">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
-                <LogOut size={22} className="text-rose-400" />
-              </div>
-
-              <h2 className="mt-4 text-base font-bold text-heading">
-                确定要退出房间吗？
-              </h2>
-              <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
-                退出后你的滑卡进度不会丢失，可以用房间号重新加入
-              </p>
-
-              <div className="mt-5 flex w-full gap-2.5">
-                <button
-                  onClick={onCancel}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
-                >
-                  继续滑卡
-                </button>
-                <button
-                  onClick={onConfirm}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
-                >
-                  退出房间
-                </button>
-              </div>
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
+            继续滑卡
+          </button>
+          <button
+            onClick={onConfirm}
+            className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
+          >
+            退出房间
+          </button>
+        </div>
+      </div>
+    </Modal>
   );
 }
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..5da8018
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+type ModalVariant = "sheet" | "dialog";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  variant?: ModalVariant;
+}
+
+const sheet = {
+  backdrop:
+    "fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center",
+  content:
+    "relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6",
+  initial: { y: "100%" },
+  animate: { y: 0 },
+  exit: { y: "100%" },
+  transition: { type: "spring" as const, damping: 28, stiffness: 350 },
+};
+
+const dialog = {
+  backdrop:
+    "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm",
+  content:
+    "mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border",
+  initial: { scale: 0.9, opacity: 0 },
+  animate: { scale: 1, opacity: 1 },
+  exit: { scale: 0.9, opacity: 0 },
+  transition: { type: "spring" as const, damping: 25, stiffness: 350 },
+};
+
+const variants = { sheet, dialog };
+
+export default function Modal({
+  open,
+  onClose,
+  children,
+  variant = "sheet",
+}: ModalProps) {
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const v = variants[variant];
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          ref={backdropRef}
+          className={v.backdrop}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          onClick={(e) => {
+            if (e.target === backdropRef.current) onClose();
+          }}
+        >
+          <motion.div
+            className={v.content}
+            initial={v.initial}
+            animate={v.animate}
+            exit={v.exit}
+            transition={v.transition}
+          >
+            {children}
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index 0e3d77d..467362f 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useCallback, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { useCallback } from "react";
 import { QRCodeSVG } from "qrcode.react";
 import { X, Copy, Share2, QrCode } from "lucide-react";
 import type { SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
+import Modal from "@/components/Modal";
 
 interface QrInviteModalProps {
   open: boolean;
@@ -27,11 +27,6 @@ export default function QrInviteModal({
     typeof window !== "undefined"
       ? `${window.location.origin}/invite/${roomId}`
       : "";
-  const backdropRef = useRef<HTMLDivElement>(null);
-
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (e.target === backdropRef.current) onClose();
-  };
 
   const handleCopy = useCallback(async () => {
     try {
@@ -62,77 +57,57 @@ export default function QrInviteModal({
   }, [inviteUrl, handleCopy, sceneConfig]);
 
   return (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.2 }}
-          onClick={handleBackdropClick}
-        >
-          <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-6 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
-            initial={{ y: "100%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "100%" }}
-            transition={{ type: "spring", damping: 28, stiffness: 350 }}
+    <Modal open={open} onClose={onClose}>
+      <button
+        onClick={onClose}
+        className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
+      >
+        <X size={16} />
+      </button>
+
+      <div className="flex flex-col items-center">
+        <div className="flex items-center gap-2 text-heading">
+          <QrCode size={18} className="text-accent" />
+          <h2 className="text-lg font-bold">邀请饭搭子</h2>
+        </div>
+        <p className="mt-1 text-xs text-muted">
+          {sceneConfig.qrSubtitle}
+        </p>
+
+        <div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
+          <QRCodeSVG
+            value={inviteUrl}
+            size={180}
+            level="M"
+            bgColor="transparent"
+            fgColor="#e5e7eb"
+          />
+        </div>
+
+        <div className="mt-4 flex items-center gap-2">
+          <span className="text-xs text-muted">房间号</span>
+          <span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
+            {roomId}
+          </span>
+        </div>
+
+        <div className="mt-5 flex w-full gap-2.5">
+          <button
+            onClick={handleCopy}
+            className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
           >
-            <button
-              onClick={onClose}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
-            >
-              <X size={16} />
-            </button>
-
-            <div className="flex flex-col items-center">
-              <div className="flex items-center gap-2 text-heading">
-                <QrCode size={18} className="text-accent" />
-                <h2 className="text-lg font-bold">邀请饭搭子</h2>
-              </div>
-              <p className="mt-1 text-xs text-muted">
-                {sceneConfig.qrSubtitle}
-              </p>
-
-              <div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
-                <QRCodeSVG
-                  value={inviteUrl}
-                  size={180}
-                  level="M"
-                  bgColor="transparent"
-                  fgColor="#e5e7eb"
-                />
-              </div>
-
-              <div className="mt-4 flex items-center gap-2">
-                <span className="text-xs text-muted">房间号</span>
-                <span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
-                  {roomId}
-                </span>
-              </div>
-
-              <div className="mt-5 flex w-full gap-2.5">
-                <button
-                  onClick={handleCopy}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
-                >
-                  <Copy size={15} />
-                  复制链接
-                </button>
-                <button
-                  onClick={handleShare}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
-                >
-                  <Share2 size={15} />
-                  发送邀请
-                </button>
-              </div>
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
+            <Copy size={15} />
+            复制链接
+          </button>
+          <button
+            onClick={handleShare}
+            className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
+          >
+            <Share2 size={15} />
+            发送邀请
+          </button>
+        </div>
+      </div>
+    </Modal>
   );
 }
diff --git a/src/components/RoomManageModal.tsx b/src/components/RoomManageModal.tsx
index dbc155a..f700c5b 100644
--- a/src/components/RoomManageModal.tsx
+++ b/src/components/RoomManageModal.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { useState, useRef, useCallback } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { useState, useCallback } from "react";
 import {
   X,
   Lock,
@@ -13,6 +12,7 @@ import {
 } from "lucide-react";
 import { UserProfile } from "@/types";
 import { getAvatar, getAvatarBg } from "@/lib/avatars";
+import Modal from "@/components/Modal";
 
 interface RoomManageModalProps {
   open: boolean;
@@ -39,15 +39,10 @@ export default function RoomManageModal({
   userProfiles,
   onToast,
 }: RoomManageModalProps) {
-  const backdropRef = useRef<HTMLDivElement>(null);
   const [loading, setLoading] = useState<string | null>(null);
   const [confirmKick, setConfirmKick] = useState<string | null>(null);
   const [confirmEnd, setConfirmEnd] = useState(false);
 
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (e.target === backdropRef.current) onClose();
-  };
-
   const manage = useCallback(
     async (action: string, targetUserId?: string) => {
       setLoading(action + (targetUserId ?? ""));
@@ -91,190 +86,167 @@ export default function RoomManageModal({
   const otherUsers = users.filter((u) => u !== userId);
 
   return (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.2 }}
-          onClick={handleBackdropClick}
+    <Modal open={open} onClose={onClose}>
+      <button
+        onClick={onClose}
+        className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
+      >
+        <X size={16} />
+      </button>
+
+      <div className="flex items-center gap-2">
+        <Crown size={18} className="text-amber-400" />
+        <h2 className="text-lg font-bold text-heading">房间管理</h2>
+      </div>
+      <p className="mt-1 text-xs text-muted">
+        房间号 {roomId}
+      </p>
+
+      <div className="mt-5">
+        <button
+          onClick={() => manage(locked ? "unlock" : "lock")}
+          disabled={loading !== null}
+          className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
+            locked
+              ? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
+              : "bg-elevated text-secondary ring-1 ring-border active:bg-subtle"
+          }`}
         >
-          <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
-            initial={{ y: "100%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "100%" }}
-            transition={{ type: "spring", damping: 28, stiffness: 350 }}
-          >
-            <button
-              onClick={onClose}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
-            >
-              <X size={16} />
-            </button>
+          {loading === "lock" || loading === "unlock" ? (
+            <Loader2 size={15} className="animate-spin" />
+          ) : locked ? (
+            <Unlock size={15} />
+          ) : (
+            <Lock size={15} />
+          )}
+          {locked ? "解锁房间（允许新人加入）" : "锁定房间（阻止新人加入）"}
+        </button>
+      </div>
 
-            <div className="flex items-center gap-2">
-              <Crown size={18} className="text-amber-400" />
-              <h2 className="text-lg font-bold text-heading">房间管理</h2>
-            </div>
-            <p className="mt-1 text-xs text-muted">
-              房间号 {roomId}
-            </p>
+      <div className="mt-5">
+        <h3 className="text-xs font-semibold text-muted">
+          房间成员（{users.length}）
+        </h3>
+        <div className="mt-2 flex flex-col gap-1.5">
+          {users.map((uid) => {
+            const profile = userProfiles[uid];
+            const emoji = profile?.avatar ?? getAvatar(uid).emoji;
+            const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(uid).bg;
+            const displayName = profile?.username ?? uid.slice(0, 8);
+            const isCreator = uid === userId;
+            const swiped = swipeCounts[uid] ?? 0;
+            const finished = swiped >= totalCards;
 
-            {/* Lock/Unlock */}
-            <div className="mt-5">
-              <button
-                onClick={() => manage(locked ? "unlock" : "lock")}
-                disabled={loading !== null}
-                className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
-                  locked
-                    ? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
-                    : "bg-elevated text-secondary ring-1 ring-border active:bg-subtle"
-                }`}
+            return (
+              <div
+                key={uid}
+                className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
               >
-                {loading === "lock" || loading === "unlock" ? (
-                  <Loader2 size={15} className="animate-spin" />
-                ) : locked ? (
-                  <Unlock size={15} />
-                ) : (
-                  <Lock size={15} />
+                <span
+                  className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
+                >
+                  {emoji}
+                </span>
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <div className="flex items-center gap-1.5">
+                    {isCreator && (
+                      <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
+                        <Crown size={10} />
+                        房主
+                      </span>
+                    )}
+                    <span className="truncate text-xs font-medium text-tertiary">
+                      {displayName}
+                    </span>
+                  </div>
+                  <span
+                    className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
+                  >
+                    {swiped}/{totalCards}
+                    {finished ? " 已完成" : " 进行中"}
+                  </span>
+                </div>
+
+                {!isCreator && (
+                  <>
+                    {confirmKick === uid ? (
+                      <div className="flex items-center gap-1">
+                        <button
+                          onClick={() => manage("kick", uid)}
+                          disabled={loading !== null}
+                          className="rounded-lg bg-rose-500 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors active:bg-rose-600 disabled:opacity-50"
+                        >
+                          {loading === "kick" + uid ? (
+                            <Loader2
+                              size={12}
+                              className="animate-spin"
+                            />
+                          ) : (
+                            "确认"
+                          )}
+                        </button>
+                        <button
+                          onClick={() => setConfirmKick(null)}
+                          className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-tertiary transition-colors active:bg-elevated"
+                        >
+                          取消
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => setConfirmKick(uid)}
+                        className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
+                      >
+                        <UserX size={13} />
+                        移出
+                      </button>
+                    )}
+                  </>
                 )}
-                {locked ? "解锁房间（允许新人加入）" : "锁定房间（阻止新人加入）"}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="mt-5">
+        {confirmEnd ? (
+          <div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
+            <p className="text-xs font-medium text-amber-300">
+              确定要结束投票吗？将根据当前已有的投票结果直接结算。
+            </p>
+            <div className="flex gap-2">
+              <button
+                onClick={() => manage("end_voting")}
+                disabled={loading !== null}
+                className="flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg bg-amber-500 text-xs font-semibold text-white transition-colors active:bg-amber-600 disabled:opacity-50"
+              >
+                {loading === "end_voting" ? (
+                  <Loader2 size={13} className="animate-spin" />
+                ) : (
+                  <Flag size={13} />
+                )}
+                确认结束
+              </button>
+              <button
+                onClick={() => setConfirmEnd(false)}
+                className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-tertiary transition-colors active:bg-subtle"
+              >
+                再等等
               </button>
             </div>
-
-            {/* User list with kick */}
-            <div className="mt-5">
-              <h3 className="text-xs font-semibold text-muted">
-                房间成员（{users.length}）
-              </h3>
-              <div className="mt-2 flex flex-col gap-1.5">
-                {users.map((uid) => {
-                  const profile = userProfiles[uid];
-                  const emoji = profile?.avatar ?? getAvatar(uid).emoji;
-                  const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(uid).bg;
-                  const displayName = profile?.username ?? uid.slice(0, 8);
-                  const isCreator = uid === userId;
-                  const swiped = swipeCounts[uid] ?? 0;
-                  const finished = swiped >= totalCards;
-
-                  return (
-                    <div
-                      key={uid}
-                      className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
-                    >
-                      <span
-                        className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
-                      >
-                        {emoji}
-                      </span>
-                      <div className="flex min-w-0 flex-1 flex-col">
-                        <div className="flex items-center gap-1.5">
-                          {isCreator && (
-                            <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
-                              <Crown size={10} />
-                              房主
-                            </span>
-                          )}
-                          <span className="truncate text-xs font-medium text-tertiary">
-                            {displayName}
-                          </span>
-                        </div>
-                        <span
-                          className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
-                        >
-                          {swiped}/{totalCards}
-                          {finished ? " 已完成" : " 进行中"}
-                        </span>
-                      </div>
-
-                      {!isCreator && (
-                        <>
-                          {confirmKick === uid ? (
-                            <div className="flex items-center gap-1">
-                              <button
-                                onClick={() => manage("kick", uid)}
-                                disabled={loading !== null}
-                                className="rounded-lg bg-rose-500 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors active:bg-rose-600 disabled:opacity-50"
-                              >
-                                {loading === "kick" + uid ? (
-                                  <Loader2
-                                    size={12}
-                                    className="animate-spin"
-                                  />
-                                ) : (
-                                  "确认"
-                                )}
-                              </button>
-                              <button
-                                onClick={() => setConfirmKick(null)}
-                                className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-tertiary transition-colors active:bg-elevated"
-                              >
-                                取消
-                              </button>
-                            </div>
-                          ) : (
-                            <button
-                              onClick={() => setConfirmKick(uid)}
-                              className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
-                            >
-                              <UserX size={13} />
-                              移出
-                            </button>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-
-            {/* End voting */}
-            <div className="mt-5">
-              {confirmEnd ? (
-                <div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
-                  <p className="text-xs font-medium text-amber-300">
-                    确定要结束投票吗？将根据当前已有的投票结果直接结算。
-                  </p>
-                  <div className="flex gap-2">
-                    <button
-                      onClick={() => manage("end_voting")}
-                      disabled={loading !== null}
-                      className="flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg bg-amber-500 text-xs font-semibold text-white transition-colors active:bg-amber-600 disabled:opacity-50"
-                    >
-                      {loading === "end_voting" ? (
-                        <Loader2 size={13} className="animate-spin" />
-                      ) : (
-                        <Flag size={13} />
-                      )}
-                      确认结束
-                    </button>
-                    <button
-                      onClick={() => setConfirmEnd(false)}
-                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-tertiary transition-colors active:bg-subtle"
-                    >
-                      再等等
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <button
-                  onClick={() => setConfirmEnd(true)}
-                  disabled={loading !== null}
-                  className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
-                >
-                  <Flag size={15} />
-                  结束投票（立即出结果）
-                </button>
-              )}
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
+          </div>
+        ) : (
+          <button
+            onClick={() => setConfirmEnd(true)}
+            disabled={loading !== null}
+            className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
+          >
+            <Flag size={15} />
+            结束投票（立即出结果）
+          </button>
+        )}
+      </div>
+    </Modal>
   );
 }

From b98920858cc44725689fe8eea0afcf4f18520025 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 17:50:28 +0800
Subject: [PATCH 30/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20useToast?=
 =?UTF-8?q?=20hook=20+=20Toast=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B6=88?=
 =?UTF-8?q?=E9=99=A4=204=20=E5=A4=84=E9=87=8D=E5=A4=8D=E7=9A=84=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 state + setTimeout 自动消失逻辑封装为 useToast hook，
Toast UI 统一为组件支持 top/bottom 两种位置，净减约 12 行。
---
 src/app/blindbox/[code]/page.tsx | 35 ++++++++------------------------
 src/app/profile/page.tsx         | 35 +++++++++-----------------------
 src/components/MatchResult.tsx   | 33 ++++++++----------------------
 src/components/Toast.tsx         | 34 +++++++++++++++++++++++++++++++
 src/components/TopNav.tsx        | 30 +++++++--------------------
 src/hooks/useToast.ts            | 17 ++++++++++++++++
 6 files changed, 86 insertions(+), 98 deletions(-)
 create mode 100644 src/components/Toast.tsx
 create mode 100644 src/hooks/useToast.ts

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 33819b8..4f02594 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -23,6 +23,8 @@ import {
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
+import Toast from "@/components/Toast";
+import { useToast } from "@/hooks/useToast";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
 
@@ -182,7 +184,7 @@ export default function BlindboxRoomPage() {
   const [error, setError] = useState("");
   const [showInvite, setShowInvite] = useState(false);
   const [showShareCard, setShowShareCard] = useState(false);
-  const [toast, setToast] = useState("");
+  const toast = useToast();
   const [confirmLeave, setConfirmLeave] = useState(false);
   const [leaving, setLeaving] = useState(false);
 
@@ -314,8 +316,7 @@ export default function BlindboxRoomPage() {
       }
       setMyIdeas((prev) => prev.map((i) => (i.id === ideaId ? { ...i, content: trimmed } : i)));
     } catch (e) {
-      setToast(e instanceof Error ? e.message : "编辑失败");
-      setTimeout(() => setToast(""), 2200);
+      toast.show(e instanceof Error ? e.message : "编辑失败");
     }
   }, [profile]);
 
@@ -334,8 +335,7 @@ export default function BlindboxRoomPage() {
       setMyIdeas((prev) => prev.filter((i) => i.id !== ideaId));
       setPoolCount((c) => Math.max(0, c - 1));
     } catch (e) {
-      setToast(e instanceof Error ? e.message : "删除失败");
-      setTimeout(() => setToast(""), 2200);
+      toast.show(e instanceof Error ? e.message : "删除失败");
     }
   }, [profile]);
 
@@ -395,8 +395,7 @@ export default function BlindboxRoomPage() {
     if (!room) return;
     try {
       await navigator.clipboard.writeText(room.code);
-      setToast("房间号已复制");
-      setTimeout(() => setToast(""), 2000);
+      toast.show("房间号已复制");
     } catch { /* ignore */ }
   };
 
@@ -441,8 +440,7 @@ export default function BlindboxRoomPage() {
       }
       router.replace("/blindbox");
     } catch (e) {
-      setToast(e instanceof Error ? e.message : "操作失败");
-      setTimeout(() => setToast(""), 2200);
+      toast.show(e instanceof Error ? e.message : "操作失败");
       setConfirmLeave(false);
     } finally {
       setLeaving(false);
@@ -817,10 +815,7 @@ export default function BlindboxRoomPage() {
             drawer: revealedIdea.drawnBy ?? undefined,
             roomName: room.name,
           }}
-          onToast={(msg) => {
-            setToast(msg);
-            setTimeout(() => setToast(""), 2200);
-          }}
+          onToast={toast.show}
         />
       )}
 
@@ -855,19 +850,7 @@ export default function BlindboxRoomPage() {
         </motion.div>
       )}
 
-      {/* Toast */}
-      <AnimatePresence>
-        {toast && (
-          <motion.div
-            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-secondary shadow-xl ring-1 ring-border"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 20 }}
-          >
-            {toast}
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <Toast message={toast.message} position="bottom" />
 
       <div className="h-8 shrink-0" />
     </div>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 28ca239..9d17bbd 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -24,6 +24,8 @@ import {
   Heart,
 } from "lucide-react";
 import EmptyState from "@/components/EmptyState";
+import Toast from "@/components/Toast";
+import { useToast } from "@/hooks/useToast";
 import RestaurantImage from "@/components/RestaurantImage";
 import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
@@ -68,12 +70,7 @@ export default function ProfilePage() {
 
   const [showHistory, setShowHistory] = useState(true);
   const [showFavorites, setShowFavorites] = useState(true);
-  const [toast, setToast] = useState("");
-
-  const showToast = useCallback((msg: string) => {
-    setToast(msg);
-    setTimeout(() => setToast(""), 2200);
-  }, []);
+  const toast = useToast();
 
   useEffect(() => {
     const cached = getCachedProfile();
@@ -141,7 +138,7 @@ export default function ProfilePage() {
         setProfile((prev) => prev ? { ...prev, username: trimmed } : prev);
         setCachedProfile({ id: userId, username: trimmed, avatar: profile!.avatar });
         setEditingUsername(false);
-        showToast("用户名已更新");
+        toast.show("用户名已更新");
       } else {
         setUsernameMsg(data.error ?? "更新失败");
       }
@@ -180,7 +177,7 @@ export default function ProfilePage() {
         setCurrentPassword("");
         setNewPassword("");
         setConfirmPassword("");
-        showToast("密码已更新");
+        toast.show("密码已更新");
       } else {
         setPasswordMsg(data.error ?? "更新失败");
       }
@@ -202,10 +199,10 @@ export default function ProfilePage() {
         setProfile((prev) => prev ? { ...prev, avatar: emoji } : prev);
         setCachedProfile({ id: userId, username: profile!.username, avatar: emoji });
         setEditingAvatar(false);
-        showToast("头像已更新");
+        toast.show("头像已更新");
       }
     } catch {
-      showToast("更新失败");
+      toast.show("更新失败");
     }
   };
 
@@ -244,9 +241,9 @@ export default function ProfilePage() {
         body: JSON.stringify({ userId, favoriteId: favId }),
       });
       setFavorites((f) => f.filter((x) => x.id !== favId));
-      showToast("已取消收藏");
+      toast.show("已取消收藏");
     } catch {
-      showToast("操作失败");
+      toast.show("操作失败");
     }
   };
 
@@ -714,19 +711,7 @@ export default function ProfilePage() {
         </motion.div>
       </div>
 
-      <AnimatePresence>
-        {toast && (
-          <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle"
-            initial={{ opacity: 0, y: -12, x: "-50%" }}
-            animate={{ opacity: 1, y: 0, x: "-50%" }}
-            exit={{ opacity: 0, y: -12, x: "-50%" }}
-            transition={{ type: "spring", stiffness: 400, damping: 25 }}
-          >
-            {toast}
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <Toast message={toast.message} />
     </div>
   );
 }
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index a736f6c..9c7c99d 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -34,6 +34,8 @@ import { isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
 import RestaurantImage from "@/components/RestaurantImage";
 import AuthModal from "@/components/AuthModal";
+import Toast from "@/components/Toast";
+import { useToast } from "@/hooks/useToast";
 
 interface MatchResultProps {
   restaurant: Restaurant;
@@ -194,7 +196,7 @@ export default function MatchResult({
   const router = useRouter();
   const [showRunnerUps, setShowRunnerUps] = useState(false);
   const [showShareCard, setShowShareCard] = useState(false);
-  const [toast, setToast] = useState("");
+  const toast = useToast();
   const celebratedRef = useRef(false);
   const historySavedRef = useRef(false);
   const isSolo = userCount <= 1;
@@ -204,11 +206,6 @@ export default function MatchResult({
   const [registered, setRegistered] = useState(() => isRegistered());
   const [showAuth, setShowAuth] = useState(false);
 
-  const showToast = useCallback((msg: string) => {
-    setToast(msg);
-    setTimeout(() => setToast(""), 2200);
-  }, []);
-
   useEffect(() => {
     if (isUnanimous && !celebratedRef.current) {
       const timer = setTimeout(() => {
@@ -247,9 +244,9 @@ export default function MatchResult({
     (profile: UserProfile) => {
       setRegistered(true);
       setShowAuth(false);
-      showToast(`欢迎，${profile.username}！记录已保存`);
+      toast.show(`欢迎，${profile.username}！记录已保存`);
     },
-    [showToast],
+    [toast],
   );
 
   const handleFavorite = useCallback(async () => {
@@ -263,13 +260,13 @@ export default function MatchResult({
       });
       if (res.ok) {
         setFavorited(true);
-        showToast("已收藏");
+        toast.show("已收藏");
       }
     } catch {
       /* ignore */
     }
     setFavLoading(false);
-  }, [registered, userId, restaurant, favorited, favLoading, showToast]);
+  }, [registered, userId, restaurant, favorited, favLoading, toast]);
 
   if (matchType === "no_match") {
     return <NoMatchResult onReset={onReset} resetting={resetting} />;
@@ -635,22 +632,10 @@ export default function MatchResult({
           userCount,
           scene,
         }}
-        onToast={showToast}
+        onToast={toast.show}
       />
 
-      <AnimatePresence>
-        {toast && (
-          <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-border"
-            initial={{ opacity: 0, y: -12, x: "-50%" }}
-            animate={{ opacity: 1, y: 0, x: "-50%" }}
-            exit={{ opacity: 0, y: -12, x: "-50%" }}
-            transition={{ type: "spring", stiffness: 400, damping: 25 }}
-          >
-            {toast}
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <Toast message={toast.message} />
     </motion.div>
   );
 }
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
new file mode 100644
index 0000000..1bd6b42
--- /dev/null
+++ b/src/components/Toast.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+
+interface ToastProps {
+  message: string;
+  position?: "top" | "bottom";
+}
+
+const positionClass = {
+  top: "top-10",
+  bottom: "bottom-8",
+};
+
+export default function Toast({ message, position = "top" }: ToastProps) {
+  const isTop = position === "top";
+  const y = isTop ? -12 : 12;
+
+  return (
+    <AnimatePresence>
+      {message && (
+        <motion.div
+          className={`fixed left-1/2 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle ${positionClass[position]}`}
+          initial={{ opacity: 0, y, x: "-50%" }}
+          animate={{ opacity: 1, y: 0, x: "-50%" }}
+          exit={{ opacity: 0, y, x: "-50%" }}
+          transition={{ type: "spring", stiffness: 400, damping: 25 }}
+        >
+          {message}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index e078c08..edccb5f 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState } from "react";
 import { QrCode, LogOut, Crown, Lock } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
 import QrInviteModal from "./QrInviteModal";
 import RoomManageModal from "./RoomManageModal";
+import Toast from "@/components/Toast";
 import type { UserProfile, SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
+import { useToast } from "@/hooks/useToast";
 
 interface TopNavProps {
   roomId: string;
@@ -36,15 +37,10 @@ export default function TopNav({
   scene = "eat",
 }: TopNavProps) {
   const sceneConfig = getSceneConfig(scene);
-  const [toast, setToast] = useState("");
+  const toast = useToast();
   const [showQr, setShowQr] = useState(false);
   const [showManage, setShowManage] = useState(false);
 
-  const showToast = useCallback((msg: string) => {
-    setToast(msg);
-    setTimeout(() => setToast(""), 2200);
-  }, []);
-
   return (
     <>
       <nav className="relative z-10 flex h-14 items-center px-4">
@@ -83,25 +79,13 @@ export default function TopNav({
         </h1>
       </nav>
 
-      <AnimatePresence>
-        {toast && (
-          <motion.div
-            className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle"
-            initial={{ opacity: 0, y: -12, x: "-50%" }}
-            animate={{ opacity: 1, y: 0, x: "-50%" }}
-            exit={{ opacity: 0, y: -12, x: "-50%" }}
-            transition={{ type: "spring", stiffness: 400, damping: 25 }}
-          >
-            {toast}
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <Toast message={toast.message} />
 
       <QrInviteModal
         open={showQr}
         onClose={() => setShowQr(false)}
         roomId={roomId}
-        onToast={showToast}
+        onToast={toast.show}
         scene={scene}
       />
 
@@ -116,7 +100,7 @@ export default function TopNav({
           swipeCounts={swipeCounts}
           totalCards={totalCards}
           userProfiles={userProfiles}
-          onToast={showToast}
+          onToast={toast.show}
         />
       )}
     </>
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
new file mode 100644
index 0000000..16abab4
--- /dev/null
+++ b/src/hooks/useToast.ts
@@ -0,0 +1,17 @@
+import { useState, useCallback, useRef } from "react";
+
+export function useToast(duration = 2200) {
+  const [message, setMessage] = useState("");
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const show = useCallback(
+    (msg: string) => {
+      clearTimeout(timerRef.current);
+      setMessage(msg);
+      timerRef.current = setTimeout(() => setMessage(""), duration);
+    },
+    [duration],
+  );
+
+  return { message, show } as const;
+}

From d4c6da57a12fdf3e24a7fd9ba9255f000e9c205a Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 17:57:34 +0800
Subject: [PATCH 31/66] =?UTF-8?q?refactor:=20Toast=20=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E4=B8=BA=E5=85=A8=E5=B1=80=20Context=EF=BC=8C=E6=B6=88?=
 =?UTF-8?q?=E9=99=A4=20onToast=20prop=20=E9=80=8F=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 useToast 从独立 state hook 改为 Context-based，在 layout 中
挂载 ToastProvider 全局渲染 Toast。QrInviteModal、RoomManageModal、
ShareCardModal 不再需要 onToast prop，直接 useToast() 调用即可。
父组件 TopNav、MatchResult、profile、blindbox 移除了本地 Toast
渲染和 onToast 传递逻辑。
---
 src/app/blindbox/[code]/page.tsx   |  4 ----
 src/app/layout.tsx                 |  7 +++++--
 src/app/profile/page.tsx           |  2 --
 src/components/MatchResult.tsx     |  4 ----
 src/components/QrInviteModal.tsx   | 10 +++++-----
 src/components/RoomManageModal.tsx | 18 +++++++++---------
 src/components/ShareCardModal.tsx  | 16 ++++++++--------
 src/components/ToastProvider.tsx   | 29 +++++++++++++++++++++++++++++
 src/components/TopNav.tsx          |  7 -------
 src/hooks/useToast.ts              | 26 ++++++++++++--------------
 10 files changed, 68 insertions(+), 55 deletions(-)
 create mode 100644 src/components/ToastProvider.tsx

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 4f02594..97d737f 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -23,7 +23,6 @@ import {
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
-import Toast from "@/components/Toast";
 import { useToast } from "@/hooks/useToast";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
@@ -815,7 +814,6 @@ export default function BlindboxRoomPage() {
             drawer: revealedIdea.drawnBy ?? undefined,
             roomName: room.name,
           }}
-          onToast={toast.show}
         />
       )}
 
@@ -850,8 +848,6 @@ export default function BlindboxRoomPage() {
         </motion.div>
       )}
 
-      <Toast message={toast.message} position="bottom" />
-
       <div className="h-8 shrink-0" />
     </div>
   );
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2e2b3ac..1c31eaf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import GlobalUserBadge from "@/components/GlobalUserBadge";
 import ServiceWorkerRegistrar from "@/components/ServiceWorkerRegistrar";
 import PageTransition from "@/components/PageTransition";
+import ToastProvider from "@/components/ToastProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -40,8 +41,10 @@ export default function RootLayout({
       </head>
       <body className={`${geistSans.variable} font-sans antialiased`}>
         <ServiceWorkerRegistrar />
-        <PageTransition>{children}</PageTransition>
-        <GlobalUserBadge />
+        <ToastProvider>
+          <PageTransition>{children}</PageTransition>
+          <GlobalUserBadge />
+        </ToastProvider>
       </body>
     </html>
   );
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 9d17bbd..d8a0500 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -24,7 +24,6 @@ import {
   Heart,
 } from "lucide-react";
 import EmptyState from "@/components/EmptyState";
-import Toast from "@/components/Toast";
 import { useToast } from "@/hooks/useToast";
 import RestaurantImage from "@/components/RestaurantImage";
 import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
@@ -711,7 +710,6 @@ export default function ProfilePage() {
         </motion.div>
       </div>
 
-      <Toast message={toast.message} />
     </div>
   );
 }
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 9c7c99d..9919a58 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -34,7 +34,6 @@ import { isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
 import RestaurantImage from "@/components/RestaurantImage";
 import AuthModal from "@/components/AuthModal";
-import Toast from "@/components/Toast";
 import { useToast } from "@/hooks/useToast";
 
 interface MatchResultProps {
@@ -632,10 +631,7 @@ export default function MatchResult({
           userCount,
           scene,
         }}
-        onToast={toast.show}
       />
-
-      <Toast message={toast.message} />
     </motion.div>
   );
 }
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index 467362f..3f5f4ac 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -6,12 +6,12 @@ import { X, Copy, Share2, QrCode } from "lucide-react";
 import type { SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import Modal from "@/components/Modal";
+import { useToast } from "@/hooks/useToast";
 
 interface QrInviteModalProps {
   open: boolean;
   onClose: () => void;
   roomId: string;
-  onToast: (msg: string) => void;
   scene?: SceneType;
 }
 
@@ -19,9 +19,9 @@ export default function QrInviteModal({
   open,
   onClose,
   roomId,
-  onToast,
   scene = "eat",
 }: QrInviteModalProps) {
+  const toast = useToast();
   const sceneConfig = getSceneConfig(scene);
   const inviteUrl =
     typeof window !== "undefined"
@@ -31,11 +31,11 @@ export default function QrInviteModal({
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(inviteUrl);
-      onToast("邀请链接已复制，快去发给朋友吧！");
+      toast.show("邀请链接已复制，快去发给朋友吧！");
     } catch {
-      onToast("复制失败，请手动复制链接");
+      toast.show("复制失败，请手动复制链接");
     }
-  }, [inviteUrl, onToast]);
+  }, [inviteUrl, toast]);
 
   const handleShare = useCallback(async () => {
     const shareData = {
diff --git a/src/components/RoomManageModal.tsx b/src/components/RoomManageModal.tsx
index f700c5b..81efe0a 100644
--- a/src/components/RoomManageModal.tsx
+++ b/src/components/RoomManageModal.tsx
@@ -13,6 +13,7 @@ import {
 import { UserProfile } from "@/types";
 import { getAvatar, getAvatarBg } from "@/lib/avatars";
 import Modal from "@/components/Modal";
+import { useToast } from "@/hooks/useToast";
 
 interface RoomManageModalProps {
   open: boolean;
@@ -24,7 +25,6 @@ interface RoomManageModalProps {
   swipeCounts: Record<string, number>;
   totalCards: number;
   userProfiles: Record<string, UserProfile>;
-  onToast: (msg: string) => void;
 }
 
 export default function RoomManageModal({
@@ -37,8 +37,8 @@ export default function RoomManageModal({
   swipeCounts,
   totalCards,
   userProfiles,
-  onToast,
 }: RoomManageModalProps) {
+  const toast = useToast();
   const [loading, setLoading] = useState<string | null>(null);
   const [confirmKick, setConfirmKick] = useState<string | null>(null);
   const [confirmEnd, setConfirmEnd] = useState(false);
@@ -54,33 +54,33 @@ export default function RoomManageModal({
         });
         if (!res.ok) {
           const data = await res.json().catch(() => ({}));
-          onToast(data.error ?? "操作失败");
+          toast.show(data.error ?? "操作失败");
           return;
         }
         switch (action) {
           case "lock":
-            onToast("房间已锁定，其他人无法加入");
+            toast.show("房间已锁定，其他人无法加入");
             break;
           case "unlock":
-            onToast("房间已解锁");
+            toast.show("房间已解锁");
             break;
           case "kick":
-            onToast("已将该用户移出房间");
+            toast.show("已将该用户移出房间");
             setConfirmKick(null);
             break;
           case "end_voting":
-            onToast("已结束投票，正在结算结果");
+            toast.show("已结束投票，正在结算结果");
             setConfirmEnd(false);
             onClose();
             break;
         }
       } catch {
-        onToast("操作失败，请重试");
+        toast.show("操作失败，请重试");
       } finally {
         setLoading(null);
       }
     },
-    [roomId, userId, onToast, onClose],
+    [roomId, userId, toast, onClose],
   );
 
   const otherUsers = users.filter((u) => u !== userId);
diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
index a6b1790..8c6da4e 100644
--- a/src/components/ShareCardModal.tsx
+++ b/src/components/ShareCardModal.tsx
@@ -6,6 +6,7 @@ import { X, Download, Share2, Loader2, Star, MapPin, Zap } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { toPng } from "html-to-image";
 import type { Restaurant, MatchType, SceneType } from "@/types";
+import { useToast } from "@/hooks/useToast";
 
 type ShareCardData =
   | {
@@ -28,7 +29,6 @@ interface ShareCardModalProps {
   open: boolean;
   onClose: () => void;
   data: ShareCardData;
-  onToast?: (msg: string) => void;
 }
 
 async function loadImageAsDataUrl(src: string): Promise<string | null> {
@@ -775,8 +775,8 @@ export default function ShareCardModal({
   open,
   onClose,
   data,
-  onToast,
 }: ShareCardModalProps) {
+  const toast = useToast();
   const cardRef = useRef<HTMLDivElement>(null);
   const backdropRef = useRef<HTMLDivElement>(null);
   const [generating, setGenerating] = useState(false);
@@ -821,7 +821,7 @@ export default function ShareCardModal({
   const handleSave = useCallback(async () => {
     const png = await handleGenerate();
     if (!png) {
-      onToast?.("生成图片失败，请重试");
+      toast.show("生成图片失败，请重试");
       return;
     }
     const name =
@@ -829,13 +829,13 @@ export default function ShareCardModal({
         ? `NoWhatever_${data.restaurant.name}.png`
         : `NoWhatever_周末契约.png`;
     downloadDataUrl(png, name);
-    onToast?.("图片已保存");
-  }, [handleGenerate, onToast, data]);
+    toast.show("图片已保存");
+  }, [handleGenerate, toast, data]);
 
   const handleShare = useCallback(async () => {
     const png = await handleGenerate();
     if (!png) {
-      onToast?.("生成图片失败，请重试");
+      toast.show("生成图片失败，请重试");
       return;
     }
 
@@ -852,8 +852,8 @@ export default function ShareCardModal({
     }
 
     downloadDataUrl(png, "NoWhatever.png");
-    onToast?.("图片已保存，快去分享吧！");
-  }, [handleGenerate, onToast]);
+    toast.show("图片已保存，快去分享吧！");
+  }, [handleGenerate, toast]);
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === backdropRef.current) onClose();
diff --git a/src/components/ToastProvider.tsx b/src/components/ToastProvider.tsx
new file mode 100644
index 0000000..85d50d7
--- /dev/null
+++ b/src/components/ToastProvider.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import { ToastContext, type ToastPosition } from "@/hooks/useToast";
+import Toast from "./Toast";
+
+export default function ToastProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [message, setMessage] = useState("");
+  const [position, setPosition] = useState<ToastPosition>("top");
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const show = useCallback((msg: string, pos: ToastPosition = "top") => {
+    clearTimeout(timerRef.current);
+    setMessage(msg);
+    setPosition(pos);
+    timerRef.current = setTimeout(() => setMessage(""), 2200);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ show }}>
+      {children}
+      <Toast message={message} position={position} />
+    </ToastContext.Provider>
+  );
+}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index edccb5f..e13bf03 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -4,10 +4,8 @@ import { useState } from "react";
 import { QrCode, LogOut, Crown, Lock } from "lucide-react";
 import QrInviteModal from "./QrInviteModal";
 import RoomManageModal from "./RoomManageModal";
-import Toast from "@/components/Toast";
 import type { UserProfile, SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
-import { useToast } from "@/hooks/useToast";
 
 interface TopNavProps {
   roomId: string;
@@ -37,7 +35,6 @@ export default function TopNav({
   scene = "eat",
 }: TopNavProps) {
   const sceneConfig = getSceneConfig(scene);
-  const toast = useToast();
   const [showQr, setShowQr] = useState(false);
   const [showManage, setShowManage] = useState(false);
 
@@ -79,13 +76,10 @@ export default function TopNav({
         </h1>
       </nav>
 
-      <Toast message={toast.message} />
-
       <QrInviteModal
         open={showQr}
         onClose={() => setShowQr(false)}
         roomId={roomId}
-        onToast={toast.show}
         scene={scene}
       />
 
@@ -100,7 +94,6 @@ export default function TopNav({
           swipeCounts={swipeCounts}
           totalCards={totalCards}
           userProfiles={userProfiles}
-          onToast={toast.show}
         />
       )}
     </>
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
index 16abab4..8b561c4 100644
--- a/src/hooks/useToast.ts
+++ b/src/hooks/useToast.ts
@@ -1,17 +1,15 @@
-import { useState, useCallback, useRef } from "react";
+import { createContext, useContext } from "react";
 
-export function useToast(duration = 2200) {
-  const [message, setMessage] = useState("");
-  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+export type ToastPosition = "top" | "bottom";
 
-  const show = useCallback(
-    (msg: string) => {
-      clearTimeout(timerRef.current);
-      setMessage(msg);
-      timerRef.current = setTimeout(() => setMessage(""), duration);
-    },
-    [duration],
-  );
-
-  return { message, show } as const;
+export interface ToastContextValue {
+  show: (msg: string, position?: ToastPosition) => void;
+}
+
+export const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
 }

From 059588748057c2b713ce7dea827a0e4f4077e81e Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 18:08:47 +0800
Subject: [PATCH 32/66] =?UTF-8?q?refactor:=20=E5=BC=95=E5=85=A5=20apiHandl?=
 =?UTF-8?q?er=20+=20ApiError=EF=BC=8C=E6=B6=88=E9=99=A4=2020=20=E4=B8=AA?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E7=9A=84=20try/catch=20=E6=A0=B7=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 src/lib/api.ts：ApiError 错误类 + apiHandler 统一包装器
- 20 个 API 路由统一使用 apiHandler，删除重复的 try/catch 块
- 验证错误改用 throw new ApiError()，减少嵌套层级
- join/manage 路由的错误码映射改为直接抛出 ApiError
- 删除已无引用的 errorResponse 辅助函数
- 净减 273 行代码
---
 src/app/api/auth/login/route.ts           |  19 +--
 src/app/api/auth/register/route.ts        |  22 +--
 src/app/api/blindbox/draw/route.ts        |  79 ++++-----
 src/app/api/blindbox/room/[code]/route.ts |  97 +++++------
 src/app/api/blindbox/room/join/route.ts   |  62 ++++---
 src/app/api/blindbox/room/route.ts        |  56 +++----
 src/app/api/blindbox/rooms/route.ts       | 106 ++++++------
 src/app/api/blindbox/route.ts             | 187 +++++++++-------------
 src/app/api/location/regeo/route.ts       |  73 ++++-----
 src/app/api/location/suggest/route.ts     |  71 ++++----
 src/app/api/room/[id]/join/route.ts       |  78 +++------
 src/app/api/room/[id]/manage/route.ts     | 143 +++++++----------
 src/app/api/room/[id]/reset/route.ts      |  48 +++---
 src/app/api/room/[id]/route.ts            |  28 ++--
 src/app/api/room/[id]/swipe/route.ts      |  88 +++++-----
 src/app/api/room/[id]/undo/route.ts       |  76 ++++-----
 src/app/api/room/create/route.ts          | 112 ++++++-------
 src/app/api/user/favorite/route.ts        |  35 ++--
 src/app/api/user/history/route.ts         |  21 ++-
 src/app/api/user/route.ts                 |  47 ++----
 src/lib/api.ts                            |  36 +++++
 src/lib/blindbox.ts                       |   5 -
 22 files changed, 626 insertions(+), 863 deletions(-)
 create mode 100644 src/lib/api.ts

diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
index 8d72ef7..c802679 100644
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -1,27 +1,22 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcryptjs";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(req: NextRequest) {
+export const POST = apiHandler(async (req) => {
   const { username, password } = await req.json();
 
-  if (!username || !password) {
-    return NextResponse.json({ error: "请输入用户名和密码" }, { status: 400 });
-  }
+  if (!username || !password) throw new ApiError("请输入用户名和密码");
 
   const user = await prisma.user.findUnique({ where: { username: username.trim() } });
-  if (!user) {
-    return NextResponse.json({ error: "用户名或密码错误" }, { status: 401 });
-  }
+  if (!user) throw new ApiError("用户名或密码错误", 401);
 
   const valid = await bcrypt.compare(password, user.passwordHash);
-  if (!valid) {
-    return NextResponse.json({ error: "用户名或密码错误" }, { status: 401 });
-  }
+  if (!valid) throw new ApiError("用户名或密码错误", 401);
 
   return NextResponse.json({
     id: user.id,
     username: user.username,
     avatar: user.avatar,
   });
-}
+});
diff --git a/src/app/api/auth/register/route.ts b/src/app/api/auth/register/route.ts
index 3f5cc28..37a3c73 100644
--- a/src/app/api/auth/register/route.ts
+++ b/src/app/api/auth/register/route.ts
@@ -1,27 +1,21 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcryptjs";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(req: NextRequest) {
+export const POST = apiHandler(async (req) => {
   const { username, password, avatar } = await req.json();
 
-  if (!username || !password) {
-    return NextResponse.json({ error: "用户名和密码为必填项" }, { status: 400 });
-  }
+  if (!username || !password) throw new ApiError("用户名和密码为必填项");
 
   const trimmedUsername = username.trim();
   if (trimmedUsername.length < 2 || trimmedUsername.length > 16) {
-    return NextResponse.json({ error: "用户名需要 2-16 个字符" }, { status: 400 });
-  }
-
-  if (password.length < 6) {
-    return NextResponse.json({ error: "密码至少 6 个字符" }, { status: 400 });
+    throw new ApiError("用户名需要 2-16 个字符");
   }
+  if (password.length < 6) throw new ApiError("密码至少 6 个字符");
 
   const existing = await prisma.user.findUnique({ where: { username: trimmedUsername } });
-  if (existing) {
-    return NextResponse.json({ error: "用户名已被注册" }, { status: 409 });
-  }
+  if (existing) throw new ApiError("用户名已被注册", 409);
 
   const passwordHash = await bcrypt.hash(password, 10);
 
@@ -38,4 +32,4 @@ export async function POST(req: NextRequest) {
     username: user.username,
     avatar: user.avatar,
   });
-}
+});
diff --git a/src/app/api/blindbox/draw/route.ts b/src/app/api/blindbox/draw/route.ts
index bc14902..cab04e2 100644
--- a/src/app/api/blindbox/draw/route.ts
+++ b/src/app/api/blindbox/draw/route.ts
@@ -1,51 +1,42 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { errorResponse, validateMembership } from "@/lib/blindbox";
+import { validateMembership } from "@/lib/blindbox";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(req: NextRequest) {
-  try {
-    const { roomId, userId } = await req.json();
+export const POST = apiHandler(async (req) => {
+  const { roomId, userId } = await req.json();
 
-    if (!userId || typeof userId !== "string") {
-      return errorResponse("请先登录", 401);
-    }
-    if (!roomId || typeof roomId !== "string") {
-      return errorResponse("roomId 不能为空", 400);
-    }
+  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
+  if (!roomId || typeof roomId !== "string") throw new ApiError("roomId 不能为空");
 
-    const isMember = await validateMembership(roomId, userId);
-    if (!isMember) {
-      return errorResponse("你不是这个房间的成员", 403);
-    }
+  const isMember = await validateMembership(roomId, userId);
+  if (!isMember) throw new ApiError("你不是这个房间的成员", 403);
 
-    const pool = await prisma.blindBoxIdea.findMany({
-      where: { roomId, status: "in_pool" },
-      select: { id: true },
-    });
+  const pool = await prisma.blindBoxIdea.findMany({
+    where: { roomId, status: "in_pool" },
+    select: { id: true },
+  });
 
-    if (pool.length === 0) {
-      return errorResponse("盒子是空的，先往里面塞点想法吧！", 404);
-    }
-
-    const picked = pool[Math.floor(Math.random() * pool.length)];
-
-    const idea = await prisma.blindBoxIdea.update({
-      where: { id: picked.id },
-      data: { status: "drawn", drawnById: userId },
-      include: {
-        user: { select: { id: true, username: true, avatar: true } },
-        drawnBy: { select: { id: true, username: true, avatar: true } },
-      },
-    });
-
-    return NextResponse.json({
-      id: idea.id,
-      content: idea.content,
-      createdAt: idea.createdAt,
-      submitter: idea.user,
-      drawnBy: idea.drawnBy,
-    });
-  } catch {
-    return errorResponse("抽取失败", 500);
+  if (pool.length === 0) {
+    throw new ApiError("盒子是空的，先往里面塞点想法吧！", 404);
   }
-}
+
+  const picked = pool[Math.floor(Math.random() * pool.length)];
+
+  const idea = await prisma.blindBoxIdea.update({
+    where: { id: picked.id },
+    data: { status: "drawn", drawnById: userId },
+    include: {
+      user: { select: { id: true, username: true, avatar: true } },
+      drawnBy: { select: { id: true, username: true, avatar: true } },
+    },
+  });
+
+  return NextResponse.json({
+    id: idea.id,
+    content: idea.content,
+    createdAt: idea.createdAt,
+    submitter: idea.user,
+    drawnBy: idea.drawnBy,
+  });
+});
diff --git a/src/app/api/blindbox/room/[code]/route.ts b/src/app/api/blindbox/room/[code]/route.ts
index 498b199..5ba4ab9 100644
--- a/src/app/api/blindbox/room/[code]/route.ts
+++ b/src/app/api/blindbox/room/[code]/route.ts
@@ -1,63 +1,48 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { errorResponse, getRoomByCode } from "@/lib/blindbox";
+import { getRoomByCode } from "@/lib/blindbox";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function GET(
-  _req: NextRequest,
-  { params }: { params: Promise<{ code: string }> },
-) {
-  try {
-    const { code } = await params;
-    const room = await getRoomByCode(code.toUpperCase());
+export const GET = apiHandler(async (_req, { params }) => {
+  const { code } = await params;
+  const room = await getRoomByCode(code.toUpperCase());
 
-    if (!room) {
-      return errorResponse("房间不存在", 404);
-    }
+  if (!room) throw new ApiError("房间不存在", 404);
 
-    return NextResponse.json({
-      id: room.id,
-      code: room.code,
-      name: room.name,
-      creatorId: room.creatorId,
-      poolCount: room._count.ideas,
-      members: room.members.map((m) => ({
-        ...m.user,
-        joinedAt: m.joinedAt,
-      })),
-    });
-  } catch {
-    return errorResponse("获取房间信息失败", 500);
+  return NextResponse.json({
+    id: room.id,
+    code: room.code,
+    name: room.name,
+    creatorId: room.creatorId,
+    poolCount: room._count.ideas,
+    members: room.members.map((m) => ({
+      ...m.user,
+      joinedAt: m.joinedAt,
+    })),
+  });
+});
+
+export const DELETE = apiHandler(async (req, { params }) => {
+  const { code } = await params;
+  const { userId } = await req.json();
+
+  if (!userId) throw new ApiError("缺少用户 ID");
+
+  const room = await prisma.blindBoxRoom.findUnique({
+    where: { code: code.toUpperCase() },
+  });
+  if (!room) throw new ApiError("房间不存在", 404);
+
+  if (room.creatorId === userId) {
+    await prisma.blindBoxRoom.delete({ where: { id: room.id } });
+    return NextResponse.json({ action: "deleted" });
   }
-}
 
-export async function DELETE(
-  req: NextRequest,
-  { params }: { params: Promise<{ code: string }> },
-) {
-  try {
-    const { code } = await params;
-    const { userId } = await req.json();
+  const membership = await prisma.blindBoxMember.findUnique({
+    where: { roomId_userId: { roomId: room.id, userId } },
+  });
+  if (!membership) throw new ApiError("你不是该房间成员", 403);
 
-    if (!userId) return errorResponse("缺少用户 ID", 400);
-
-    const room = await prisma.blindBoxRoom.findUnique({
-      where: { code: code.toUpperCase() },
-    });
-    if (!room) return errorResponse("房间不存在", 404);
-
-    if (room.creatorId === userId) {
-      await prisma.blindBoxRoom.delete({ where: { id: room.id } });
-      return NextResponse.json({ action: "deleted" });
-    }
-
-    const membership = await prisma.blindBoxMember.findUnique({
-      where: { roomId_userId: { roomId: room.id, userId } },
-    });
-    if (!membership) return errorResponse("你不是该房间成员", 403);
-
-    await prisma.blindBoxMember.delete({ where: { id: membership.id } });
-    return NextResponse.json({ action: "left" });
-  } catch {
-    return errorResponse("操作失败", 500);
-  }
-}
+  await prisma.blindBoxMember.delete({ where: { id: membership.id } });
+  return NextResponse.json({ action: "left" });
+});
diff --git a/src/app/api/blindbox/room/join/route.ts b/src/app/api/blindbox/room/join/route.ts
index ab3fe0b..8ac094c 100644
--- a/src/app/api/blindbox/room/join/route.ts
+++ b/src/app/api/blindbox/room/join/route.ts
@@ -1,38 +1,36 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { errorResponse } from "@/lib/blindbox";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(req: NextRequest) {
-  try {
-    const { userId, code } = await req.json();
+export const POST = apiHandler(async (req) => {
+  const { userId, code } = await req.json();
 
-    if (!userId || typeof userId !== "string") {
-      return errorResponse("请先登录", 401);
-    }
-    if (!code || typeof code !== "string") {
-      return errorResponse("请输入房间号", 400);
-    }
+  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
+  if (!code || typeof code !== "string") throw new ApiError("请输入房间号");
 
-    const room = await prisma.blindBoxRoom.findUnique({
-      where: { code: code.trim().toUpperCase() },
+  const room = await prisma.blindBoxRoom.findUnique({
+    where: { code: code.trim().toUpperCase() },
+  });
+  if (!room) throw new ApiError("房间不存在，请检查房间号", 404);
+
+  const existing = await prisma.blindBoxMember.findUnique({
+    where: { roomId_userId: { roomId: room.id, userId } },
+  });
+  if (existing) {
+    return NextResponse.json({
+      id: room.id,
+      code: room.code,
+      name: room.name,
+      alreadyMember: true,
     });
-    if (!room) {
-      return errorResponse("房间不存在，请检查房间号", 404);
-    }
-
-    const existing = await prisma.blindBoxMember.findUnique({
-      where: { roomId_userId: { roomId: room.id, userId } },
-    });
-    if (existing) {
-      return NextResponse.json({ id: room.id, code: room.code, name: room.name, alreadyMember: true });
-    }
-
-    await prisma.blindBoxMember.create({
-      data: { roomId: room.id, userId },
-    });
-
-    return NextResponse.json({ id: room.id, code: room.code, name: room.name }, { status: 201 });
-  } catch {
-    return errorResponse("加入房间失败", 500);
   }
-}
+
+  await prisma.blindBoxMember.create({
+    data: { roomId: room.id, userId },
+  });
+
+  return NextResponse.json(
+    { id: room.id, code: room.code, name: room.name },
+    { status: 201 },
+  );
+});
diff --git a/src/app/api/blindbox/room/route.ts b/src/app/api/blindbox/room/route.ts
index 46f603c..c5942e8 100644
--- a/src/app/api/blindbox/room/route.ts
+++ b/src/app/api/blindbox/room/route.ts
@@ -1,40 +1,32 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { errorResponse, generateUniqueRoomCode } from "@/lib/blindbox";
+import { generateUniqueRoomCode } from "@/lib/blindbox";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(req: NextRequest) {
-  try {
-    const { userId, name } = await req.json();
+export const POST = apiHandler(async (req) => {
+  const { userId, name } = await req.json();
 
-    if (!userId || typeof userId !== "string") {
-      return errorResponse("请先登录", 401);
-    }
+  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
 
-    const roomName = (name || "").trim() || "我们的周末";
-    if (roomName.length > 30) {
-      return errorResponse("房间名不能超过 30 个字", 400);
-    }
+  const roomName = (name || "").trim() || "我们的周末";
+  if (roomName.length > 30) throw new ApiError("房间名不能超过 30 个字");
 
-    const user = await prisma.user.findUnique({ where: { id: userId } });
-    if (!user) {
-      return errorResponse("用户不存在", 404);
-    }
+  const user = await prisma.user.findUnique({ where: { id: userId } });
+  if (!user) throw new ApiError("用户不存在", 404);
 
-    const code = await generateUniqueRoomCode();
+  const code = await generateUniqueRoomCode();
 
-    const room = await prisma.blindBoxRoom.create({
-      data: {
-        code,
-        name: roomName,
-        creatorId: userId,
-        members: {
-          create: { userId },
-        },
-      },
-    });
+  const room = await prisma.blindBoxRoom.create({
+    data: {
+      code,
+      name: roomName,
+      creatorId: userId,
+      members: { create: { userId } },
+    },
+  });
 
-    return NextResponse.json({ id: room.id, code: room.code, name: room.name }, { status: 201 });
-  } catch {
-    return errorResponse("创建房间失败", 500);
-  }
-}
+  return NextResponse.json(
+    { id: room.id, code: room.code, name: room.name },
+    { status: 201 },
+  );
+});
diff --git a/src/app/api/blindbox/rooms/route.ts b/src/app/api/blindbox/rooms/route.ts
index 616dad0..6983317 100644
--- a/src/app/api/blindbox/rooms/route.ts
+++ b/src/app/api/blindbox/rooms/route.ts
@@ -1,69 +1,59 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { errorResponse } from "@/lib/blindbox";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function GET(req: NextRequest) {
+export const GET = apiHandler(async (req) => {
   const userId = req.nextUrl.searchParams.get("userId");
+  if (!userId) throw new ApiError("请先登录", 401);
 
-  if (!userId) {
-    return errorResponse("请先登录", 401);
-  }
-
-  try {
-    const memberships = await prisma.blindBoxMember.findMany({
-      where: { userId },
-      include: {
-        room: {
-          include: {
-            members: {
-              include: { user: { select: { id: true, username: true, avatar: true } } },
-              orderBy: { joinedAt: "asc" },
-              take: 5,
-            },
-            _count: {
-              select: {
-                ideas: true,
-                members: true,
-              },
-            },
-            ideas: {
-              where: { status: "drawn" },
-              orderBy: { createdAt: "desc" },
-              take: 1,
-              select: { content: true, createdAt: true },
-            },
+  const memberships = await prisma.blindBoxMember.findMany({
+    where: { userId },
+    include: {
+      room: {
+        include: {
+          members: {
+            include: { user: { select: { id: true, username: true, avatar: true } } },
+            orderBy: { joinedAt: "asc" },
+            take: 5,
+          },
+          _count: {
+            select: { ideas: true, members: true },
+          },
+          ideas: {
+            where: { status: "drawn" },
+            orderBy: { createdAt: "desc" },
+            take: 1,
+            select: { content: true, createdAt: true },
           },
         },
       },
-      orderBy: { joinedAt: "desc" },
-    });
+    },
+    orderBy: { joinedAt: "desc" },
+  });
 
-    const rooms = memberships.map((m) => ({
-      id: m.room.id,
-      code: m.room.code,
-      name: m.room.name,
-      memberCount: m.room._count.members,
-      ideaCount: m.room._count.ideas,
-      poolCount: 0,
-      members: m.room.members.map((mb) => mb.user),
-      lastDrawn: m.room.ideas[0] ?? null,
-      joinedAt: m.joinedAt,
-    }));
+  const rooms = memberships.map((m) => ({
+    id: m.room.id,
+    code: m.room.code,
+    name: m.room.name,
+    memberCount: m.room._count.members,
+    ideaCount: m.room._count.ideas,
+    poolCount: 0,
+    members: m.room.members.map((mb) => mb.user),
+    lastDrawn: m.room.ideas[0] ?? null,
+    joinedAt: m.joinedAt,
+  }));
 
-    const roomIds = rooms.map((r) => r.id);
-    const poolCounts = await prisma.blindBoxIdea.groupBy({
-      by: ["roomId"],
-      where: { roomId: { in: roomIds }, status: "in_pool" },
-      _count: true,
-    });
-    const poolMap = new Map(poolCounts.map((p) => [p.roomId, p._count]));
+  const roomIds = rooms.map((r) => r.id);
+  const poolCounts = await prisma.blindBoxIdea.groupBy({
+    by: ["roomId"],
+    where: { roomId: { in: roomIds }, status: "in_pool" },
+    _count: true,
+  });
+  const poolMap = new Map(poolCounts.map((p) => [p.roomId, p._count]));
 
-    for (const room of rooms) {
-      room.poolCount = poolMap.get(room.id) ?? 0;
-    }
-
-    return NextResponse.json({ rooms });
-  } catch {
-    return errorResponse("获取房间列表失败", 500);
+  for (const room of rooms) {
+    room.poolCount = poolMap.get(room.id) ?? 0;
   }
-}
+
+  return NextResponse.json({ rooms });
+});
diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
index 31acc9e..64237bf 100644
--- a/src/app/api/blindbox/route.ts
+++ b/src/app/api/blindbox/route.ts
@@ -1,130 +1,95 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { errorResponse, validateMembership } from "@/lib/blindbox";
+import { validateMembership } from "@/lib/blindbox";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(req: NextRequest) {
-  try {
-    const { roomId, userId, content } = await req.json();
+export const POST = apiHandler(async (req) => {
+  const { roomId, userId, content } = await req.json();
 
-    if (!userId || typeof userId !== "string") {
-      return errorResponse("请先登录", 401);
-    }
-    if (!roomId || typeof roomId !== "string") {
-      return errorResponse("roomId 不能为空", 400);
-    }
-    if (!content || typeof content !== "string" || content.trim().length === 0) {
-      return errorResponse("内容不能为空", 400);
-    }
-    if (content.trim().length > 200) {
-      return errorResponse("内容不能超过 200 字", 400);
-    }
-
-    const isMember = await validateMembership(roomId, userId);
-    if (!isMember) {
-      return errorResponse("你不是这个房间的成员", 403);
-    }
-
-    const idea = await prisma.blindBoxIdea.create({
-      data: {
-        roomId,
-        userId,
-        content: content.trim(),
-      },
-    });
-
-    return NextResponse.json({ id: idea.id }, { status: 201 });
-  } catch {
-    return errorResponse("提交失败", 500);
+  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
+  if (!roomId || typeof roomId !== "string") throw new ApiError("roomId 不能为空");
+  if (!content || typeof content !== "string" || content.trim().length === 0) {
+    throw new ApiError("内容不能为空");
   }
-}
+  if (content.trim().length > 200) throw new ApiError("内容不能超过 200 字");
 
-export async function GET(req: NextRequest) {
+  const isMember = await validateMembership(roomId, userId);
+  if (!isMember) throw new ApiError("你不是这个房间的成员", 403);
+
+  const idea = await prisma.blindBoxIdea.create({
+    data: { roomId, userId, content: content.trim() },
+  });
+
+  return NextResponse.json({ id: idea.id }, { status: 201 });
+});
+
+export const GET = apiHandler(async (req) => {
   const roomId = req.nextUrl.searchParams.get("roomId");
   const userId = req.nextUrl.searchParams.get("userId");
 
-  if (!roomId) {
-    return errorResponse("缺少 roomId", 400);
-  }
-  if (!userId) {
-    return errorResponse("请先登录", 401);
-  }
+  if (!roomId) throw new ApiError("缺少 roomId");
+  if (!userId) throw new ApiError("请先登录", 401);
 
   const isMember = await validateMembership(roomId, userId);
-  if (!isMember) {
-    return errorResponse("你不是这个房间的成员", 403);
+  if (!isMember) throw new ApiError("你不是这个房间的成员", 403);
+
+  const [poolCount, myIdeas, drawn] = await Promise.all([
+    prisma.blindBoxIdea.count({
+      where: { roomId, status: "in_pool" },
+    }),
+    prisma.blindBoxIdea.findMany({
+      where: { roomId, userId, status: "in_pool" },
+      orderBy: { createdAt: "desc" },
+      select: { id: true, content: true, createdAt: true },
+    }),
+    prisma.blindBoxIdea.findMany({
+      where: { roomId, status: "drawn" },
+      orderBy: { createdAt: "desc" },
+      include: {
+        user: { select: { id: true, username: true, avatar: true } },
+        drawnBy: { select: { id: true, username: true, avatar: true } },
+      },
+    }),
+  ]);
+
+  return NextResponse.json({ poolCount, myIdeas, drawn });
+});
+
+export const PUT = apiHandler(async (req) => {
+  const { ideaId, userId, content } = await req.json();
+
+  if (!userId) throw new ApiError("请先登录", 401);
+  if (!ideaId) throw new ApiError("缺少 ideaId");
+  if (!content || typeof content !== "string" || content.trim().length === 0) {
+    throw new ApiError("内容不能为空");
   }
+  if (content.trim().length > 200) throw new ApiError("内容不能超过 200 字");
 
-  try {
-    const [poolCount, myIdeas, drawn] = await Promise.all([
-      prisma.blindBoxIdea.count({
-        where: { roomId, status: "in_pool" },
-      }),
-      prisma.blindBoxIdea.findMany({
-        where: { roomId, userId, status: "in_pool" },
-        orderBy: { createdAt: "desc" },
-        select: { id: true, content: true, createdAt: true },
-      }),
-      prisma.blindBoxIdea.findMany({
-        where: { roomId, status: "drawn" },
-        orderBy: { createdAt: "desc" },
-        include: {
-          user: { select: { id: true, username: true, avatar: true } },
-          drawnBy: { select: { id: true, username: true, avatar: true } },
-        },
-      }),
-    ]);
+  const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
+  if (!idea) throw new ApiError("想法不存在", 404);
+  if (idea.userId !== userId) throw new ApiError("只能编辑自己的想法", 403);
+  if (idea.status !== "in_pool") throw new ApiError("已抽中的想法不能编辑");
 
-    return NextResponse.json({ poolCount, myIdeas, drawn });
-  } catch {
-    return errorResponse("查询失败", 500);
-  }
-}
+  const updated = await prisma.blindBoxIdea.update({
+    where: { id: ideaId },
+    data: { content: content.trim() },
+  });
 
-export async function PUT(req: NextRequest) {
-  try {
-    const { ideaId, userId, content } = await req.json();
+  return NextResponse.json({ id: updated.id, content: updated.content });
+});
 
-    if (!userId) return errorResponse("请先登录", 401);
-    if (!ideaId) return errorResponse("缺少 ideaId", 400);
-    if (!content || typeof content !== "string" || content.trim().length === 0) {
-      return errorResponse("内容不能为空", 400);
-    }
-    if (content.trim().length > 200) {
-      return errorResponse("内容不能超过 200 字", 400);
-    }
+export const DELETE = apiHandler(async (req) => {
+  const { ideaId, userId } = await req.json();
 
-    const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
-    if (!idea) return errorResponse("想法不存在", 404);
-    if (idea.userId !== userId) return errorResponse("只能编辑自己的想法", 403);
-    if (idea.status !== "in_pool") return errorResponse("已抽中的想法不能编辑", 400);
+  if (!userId) throw new ApiError("请先登录", 401);
+  if (!ideaId) throw new ApiError("缺少 ideaId");
 
-    const updated = await prisma.blindBoxIdea.update({
-      where: { id: ideaId },
-      data: { content: content.trim() },
-    });
+  const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
+  if (!idea) throw new ApiError("想法不存在", 404);
+  if (idea.userId !== userId) throw new ApiError("只能删除自己的想法", 403);
+  if (idea.status !== "in_pool") throw new ApiError("已抽中的想法不能删除");
 
-    return NextResponse.json({ id: updated.id, content: updated.content });
-  } catch {
-    return errorResponse("编辑失败", 500);
-  }
-}
+  await prisma.blindBoxIdea.delete({ where: { id: ideaId } });
 
-export async function DELETE(req: NextRequest) {
-  try {
-    const { ideaId, userId } = await req.json();
-
-    if (!userId) return errorResponse("请先登录", 401);
-    if (!ideaId) return errorResponse("缺少 ideaId", 400);
-
-    const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
-    if (!idea) return errorResponse("想法不存在", 404);
-    if (idea.userId !== userId) return errorResponse("只能删除自己的想法", 403);
-    if (idea.status !== "in_pool") return errorResponse("已抽中的想法不能删除", 400);
-
-    await prisma.blindBoxIdea.delete({ where: { id: ideaId } });
-
-    return NextResponse.json({ deleted: true });
-  } catch {
-    return errorResponse("删除失败", 500);
-  }
-}
+  return NextResponse.json({ deleted: true });
+});
diff --git a/src/app/api/location/regeo/route.ts b/src/app/api/location/regeo/route.ts
index 8225c5a..ec3b6cc 100644
--- a/src/app/api/location/regeo/route.ts
+++ b/src/app/api/location/regeo/route.ts
@@ -1,54 +1,39 @@
 import { NextResponse } from "next/server";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function GET(req: Request) {
-  const { searchParams } = new URL(req.url);
-  const lat = searchParams.get("lat");
-  const lng = searchParams.get("lng");
+export const GET = apiHandler(async (req) => {
+  const lat = req.nextUrl.searchParams.get("lat");
+  const lng = req.nextUrl.searchParams.get("lng");
 
-  if (!lat || !lng) {
-    return NextResponse.json(
-      { error: "lat and lng are required" },
-      { status: 400 },
-    );
-  }
+  if (!lat || !lng) throw new ApiError("lat and lng are required");
 
   const apiKey = process.env.AMAP_API_KEY;
-  if (!apiKey) {
-    return NextResponse.json(
-      { error: "AMAP_API_KEY not configured" },
-      { status: 500 },
-    );
-  }
+  if (!apiKey) throw new ApiError("AMAP_API_KEY not configured", 500);
 
-  try {
-    const url = new URL("https://restapi.amap.com/v3/geocode/regeo");
-    url.searchParams.set("key", apiKey);
-    url.searchParams.set("location", `${lng},${lat}`);
-    url.searchParams.set("extensions", "base");
+  const url = new URL("https://restapi.amap.com/v3/geocode/regeo");
+  url.searchParams.set("key", apiKey);
+  url.searchParams.set("location", `${lng},${lat}`);
+  url.searchParams.set("extensions", "base");
 
-    const res = await fetch(url.toString());
-    const data = await res.json();
+  const res = await fetch(url.toString());
+  const data = await res.json();
 
-    if (data.status !== "1" || !data.regeocode) {
-      return NextResponse.json({ name: null });
-    }
-
-    const comp = data.regeocode.addressComponent;
-    const district = comp?.district || comp?.city || "";
-    const township = comp?.township || "";
-    const neighborhood = comp?.neighborhood?.name || "";
-
-    const name = [district, township, neighborhood]
-      .filter(Boolean)
-      .join(" ")
-      .trim();
-
-    return NextResponse.json({
-      name: name || data.regeocode.formatted_address || null,
-      formatted: data.regeocode.formatted_address || null,
-    });
-  } catch (e) {
-    console.error("Regeo error:", e);
+  if (data.status !== "1" || !data.regeocode) {
     return NextResponse.json({ name: null });
   }
-}
+
+  const comp = data.regeocode.addressComponent;
+  const district = comp?.district || comp?.city || "";
+  const township = comp?.township || "";
+  const neighborhood = comp?.neighborhood?.name || "";
+
+  const name = [district, township, neighborhood]
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+
+  return NextResponse.json({
+    name: name || data.regeocode.formatted_address || null,
+    formatted: data.regeocode.formatted_address || null,
+  });
+});
diff --git a/src/app/api/location/suggest/route.ts b/src/app/api/location/suggest/route.ts
index 2771b72..01c1caf 100644
--- a/src/app/api/location/suggest/route.ts
+++ b/src/app/api/location/suggest/route.ts
@@ -1,52 +1,37 @@
 import { NextResponse } from "next/server";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function GET(req: Request) {
-  const { searchParams } = new URL(req.url);
-  const keywords = searchParams.get("keywords")?.trim();
-
-  if (!keywords) {
-    return NextResponse.json([]);
-  }
+export const GET = apiHandler(async (req) => {
+  const keywords = req.nextUrl.searchParams.get("keywords")?.trim();
+  if (!keywords) return NextResponse.json([]);
 
   const apiKey = process.env.AMAP_API_KEY;
-  if (!apiKey) {
-    return NextResponse.json(
-      { error: "AMAP_API_KEY not configured" },
-      { status: 500 },
-    );
-  }
+  if (!apiKey) throw new ApiError("AMAP_API_KEY not configured", 500);
 
-  try {
-    const url = new URL("https://restapi.amap.com/v3/assistant/inputtips");
-    url.searchParams.set("key", apiKey);
-    url.searchParams.set("keywords", keywords);
-    url.searchParams.set("datatype", "poi");
+  const url = new URL("https://restapi.amap.com/v3/assistant/inputtips");
+  url.searchParams.set("key", apiKey);
+  url.searchParams.set("keywords", keywords);
+  url.searchParams.set("datatype", "poi");
 
-    const res = await fetch(url.toString());
-    const data = await res.json();
+  const res = await fetch(url.toString());
+  const data = await res.json();
 
-    if (data.status !== "1" || !data.tips) {
-      return NextResponse.json([]);
-    }
+  if (data.status !== "1" || !data.tips) return NextResponse.json([]);
 
-    const suggestions = data.tips
-      .filter((t: { location?: string }) => t.location && t.location !== "")
-      .slice(0, 8)
-      .map((t: { id: string; name: string; district?: string; address?: string; location: string }) => {
-        const [lng, lat] = t.location.split(",").map(Number);
-        return {
-          id: t.id,
-          name: t.name,
-          district: t.district || "",
-          address: t.address || "",
-          lat,
-          lng,
-        };
-      });
+  const suggestions = data.tips
+    .filter((t: { location?: string }) => t.location && t.location !== "")
+    .slice(0, 8)
+    .map((t: { id: string; name: string; district?: string; address?: string; location: string }) => {
+      const [lng, lat] = t.location.split(",").map(Number);
+      return {
+        id: t.id,
+        name: t.name,
+        district: t.district || "",
+        address: t.address || "",
+        lat,
+        lng,
+      };
+    });
 
-    return NextResponse.json(suggestions);
-  } catch (e) {
-    console.error("Location suggest error:", e);
-    return NextResponse.json([]);
-  }
-}
+  return NextResponse.json(suggestions);
+});
diff --git a/src/app/api/room/[id]/join/route.ts b/src/app/api/room/[id]/join/route.ts
index ea49960..fb901ae 100644
--- a/src/app/api/room/[id]/join/route.ts
+++ b/src/app/api/room/[id]/join/route.ts
@@ -1,64 +1,38 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(
-  req: Request,
-  { params }: { params: Promise<{ id: string }> },
-) {
+export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
+  const { userId } = await req.json();
 
-  try {
-    const { userId } = await req.json();
-    if (!userId) {
-      return NextResponse.json({ error: "userId required" }, { status: 400 });
+  if (!userId) throw new ApiError("userId required");
+
+  const updated = await atomicUpdateRoom(id, (data) => {
+    if (data.kickedUsers.includes(userId)) {
+      throw new ApiError("你已被移出该房间", 403);
     }
-
-    const updated = await atomicUpdateRoom(id, (data) => {
-      if (data.kickedUsers.includes(userId)) {
-        throw new Error("KICKED");
-      }
-      if (data.locked && !data.users.includes(userId)) {
-        throw new Error("LOCKED");
-      }
-      if (!data.users.includes(userId)) {
-        data.users.push(userId);
-      }
-      return data;
-    });
-
-    if (!updated) {
-      return NextResponse.json(
-        { error: "房间不存在或已过期" },
-        { status: 404 },
-      );
+    if (data.locked && !data.users.includes(userId)) {
+      throw new ApiError("房间已锁定，无法加入", 403);
     }
-
-    notify(id);
-
-    return NextResponse.json({
-      roomId: id,
-      userCount: updated.users.length,
-    });
-  } catch (e) {
-    if (e instanceof Error) {
-      if (e.message === "LOCKED") {
-        return NextResponse.json(
-          { error: "房间已锁定，无法加入" },
-          { status: 403 },
-        );
-      }
-      if (e.message === "KICKED") {
-        return NextResponse.json(
-          { error: "你已被移出该房间" },
-          { status: 403 },
-        );
-      }
+    if (!data.users.includes(userId)) {
+      data.users.push(userId);
     }
-    console.error("Failed to join room:", e);
+    return data;
+  });
+
+  if (!updated) {
     return NextResponse.json(
-      { error: "加入房间失败" },
-      { status: 500 },
+      { error: "房间不存在或已过期" },
+      { status: 404 },
     );
   }
-}
+
+  notify(id);
+
+  return NextResponse.json({
+    roomId: id,
+    userCount: updated.users.length,
+  });
+});
diff --git a/src/app/api/room/[id]/manage/route.ts b/src/app/api/room/[id]/manage/route.ts
index 1219256..bf900b3 100644
--- a/src/app/api/room/[id]/manage/route.ts
+++ b/src/app/api/room/[id]/manage/route.ts
@@ -1,106 +1,73 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(
-  req: Request,
-  { params }: { params: Promise<{ id: string }> },
-) {
+export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
+  const { userId, action, targetUserId } = await req.json();
 
-  try {
-    const { userId, action, targetUserId } = await req.json();
-    if (!userId || !action) {
-      return NextResponse.json(
-        { error: "userId and action required" },
-        { status: 400 },
-      );
+  if (!userId || !action) {
+    throw new ApiError("userId and action required");
+  }
+
+  const updated = await atomicUpdateRoom(id, (data) => {
+    if (data.creatorId !== userId) {
+      throw new ApiError("只有房主可以执行此操作", 403);
     }
 
-    const updated = await atomicUpdateRoom(id, (data) => {
-      if (data.creatorId !== userId) {
-        throw new Error("FORBIDDEN");
-      }
+    switch (action) {
+      case "lock":
+        data.locked = true;
+        break;
 
-      switch (action) {
-        case "lock":
-          data.locked = true;
-          break;
+      case "unlock":
+        data.locked = false;
+        break;
 
-        case "unlock":
-          data.locked = false;
-          break;
+      case "kick":
+        if (!targetUserId || targetUserId === userId) {
+          throw new ApiError("无效的操作对象");
+        }
+        data.users = data.users.filter((u) => u !== targetUserId);
+        if (!data.kickedUsers.includes(targetUserId)) {
+          data.kickedUsers.push(targetUserId);
+        }
+        delete data.swipeCounts[targetUserId];
+        for (const rid of Object.keys(data.likes)) {
+          data.likes[rid] = data.likes[rid].filter(
+            (u) => u !== targetUserId,
+          );
+        }
+        if (
+          data.match &&
+          data.likes[data.match]?.length !== data.users.length
+        ) {
+          data.match = null;
+        }
+        break;
 
-        case "kick":
-          if (!targetUserId || targetUserId === userId) {
-            throw new Error("INVALID_TARGET");
-          }
-          data.users = data.users.filter((u) => u !== targetUserId);
-          if (!data.kickedUsers.includes(targetUserId)) {
-            data.kickedUsers.push(targetUserId);
-          }
-          delete data.swipeCounts[targetUserId];
-          for (const rid of Object.keys(data.likes)) {
-            data.likes[rid] = data.likes[rid].filter(
-              (u) => u !== targetUserId,
-            );
-          }
-          if (
-            data.match &&
-            data.likes[data.match]?.length !== data.users.length
-          ) {
-            data.match = null;
-          }
-          break;
+      case "end_voting":
+        for (const u of data.users) {
+          data.swipeCounts[u] = data.restaurants.length;
+        }
+        break;
 
-        case "end_voting":
-          for (const u of data.users) {
-            data.swipeCounts[u] = data.restaurants.length;
-          }
-          break;
-
-        default:
-          throw new Error("UNKNOWN_ACTION");
-      }
-
-      return data;
-    });
-
-    if (!updated) {
-      return NextResponse.json(
-        { error: "房间不存在或已过期" },
-        { status: 404 },
-      );
+      default:
+        throw new ApiError("未知操作");
     }
 
-    notify(id);
+    return data;
+  });
 
-    return NextResponse.json({ ok: true });
-  } catch (e) {
-    if (e instanceof Error) {
-      if (e.message === "FORBIDDEN") {
-        return NextResponse.json(
-          { error: "只有房主可以执行此操作" },
-          { status: 403 },
-        );
-      }
-      if (e.message === "INVALID_TARGET") {
-        return NextResponse.json(
-          { error: "无效的操作对象" },
-          { status: 400 },
-        );
-      }
-      if (e.message === "UNKNOWN_ACTION") {
-        return NextResponse.json(
-          { error: "未知操作" },
-          { status: 400 },
-        );
-      }
-    }
-    console.error("Failed to manage room:", e);
+  if (!updated) {
     return NextResponse.json(
-      { error: "操作失败" },
-      { status: 500 },
+      { error: "房间不存在或已过期" },
+      { status: 404 },
     );
   }
-}
+
+  notify(id);
+
+  return NextResponse.json({ ok: true });
+});
diff --git a/src/app/api/room/[id]/reset/route.ts b/src/app/api/room/[id]/reset/route.ts
index a5272fd..e02a9d2 100644
--- a/src/app/api/room/[id]/reset/route.ts
+++ b/src/app/api/room/[id]/reset/route.ts
@@ -1,11 +1,9 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
+import { apiHandler } from "@/lib/api";
 
-export async function POST(
-  req: Request,
-  { params }: { params: Promise<{ id: string }> },
-) {
+export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
 
   let restaurantIds: string[] | undefined;
@@ -18,33 +16,25 @@ export async function POST(
     // No body or invalid JSON — plain reset
   }
 
-  try {
-    const updated = await atomicUpdateRoom(id, (data) => {
-      if (restaurantIds && restaurantIds.length > 0) {
-        const idSet = new Set(restaurantIds);
-        data.restaurants = data.restaurants.filter((r) => idSet.has(r.id));
-      }
-      data.likes = {};
-      data.swipeCounts = {};
-      data.match = null;
-      return data;
-    });
-
-    if (!updated) {
-      return NextResponse.json(
-        { error: "房间不存在或已过期" },
-        { status: 404 },
-      );
+  const updated = await atomicUpdateRoom(id, (data) => {
+    if (restaurantIds && restaurantIds.length > 0) {
+      const idSet = new Set(restaurantIds);
+      data.restaurants = data.restaurants.filter((r) => idSet.has(r.id));
     }
+    data.likes = {};
+    data.swipeCounts = {};
+    data.match = null;
+    return data;
+  });
 
-    notify(id);
-
-    return NextResponse.json({ ok: true });
-  } catch (e) {
-    console.error("Failed to reset room:", e);
+  if (!updated) {
     return NextResponse.json(
-      { error: "重置失败" },
-      { status: 500 },
+      { error: "房间不存在或已过期" },
+      { status: 404 },
     );
   }
-}
+
+  notify(id);
+
+  return NextResponse.json({ ok: true });
+});
diff --git a/src/app/api/room/[id]/route.ts b/src/app/api/room/[id]/route.ts
index 7c2a1f5..c7a309d 100644
--- a/src/app/api/room/[id]/route.ts
+++ b/src/app/api/room/[id]/route.ts
@@ -1,28 +1,18 @@
 import { NextResponse } from "next/server";
 import { buildRoomStatus } from "@/lib/buildRoomStatus";
+import { apiHandler } from "@/lib/api";
 
-export async function GET(
-  _req: Request,
-  { params }: { params: Promise<{ id: string }> },
-) {
+export const GET = apiHandler(async (_req, { params }) => {
   const { id } = await params;
 
-  try {
-    const status = await buildRoomStatus(id);
+  const status = await buildRoomStatus(id);
 
-    if (!status) {
-      return NextResponse.json(
-        { error: "房间不存在或已过期" },
-        { status: 404 },
-      );
-    }
-
-    return NextResponse.json(status);
-  } catch (e) {
-    console.error("Failed to get room:", e);
+  if (!status) {
     return NextResponse.json(
-      { error: "获取房间信息失败" },
-      { status: 500 },
+      { error: "房间不存在或已过期" },
+      { status: 404 },
     );
   }
-}
+
+  return NextResponse.json(status);
+});
diff --git a/src/app/api/room/[id]/swipe/route.ts b/src/app/api/room/[id]/swipe/route.ts
index ffdedbd..c448003 100644
--- a/src/app/api/room/[id]/swipe/route.ts
+++ b/src/app/api/room/[id]/swipe/route.ts
@@ -1,69 +1,55 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(
-  req: Request,
-  { params }: { params: Promise<{ id: string }> },
-) {
+export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
+  const { userId, restaurantId, action } = await req.json();
 
-  try {
-    const { userId, restaurantId, action } = await req.json();
+  if (!userId || restaurantId == null || !action) {
+    throw new ApiError("userId, restaurantId, and action are required");
+  }
 
-    if (!userId || restaurantId == null || !action) {
-      return NextResponse.json(
-        { error: "userId, restaurantId, and action are required" },
-        { status: 400 },
-      );
-    }
+  const rid = String(restaurantId);
 
-    const rid = String(restaurantId);
+  const updated = await atomicUpdateRoom(id, (data) => {
+    const restaurantIndex = data.restaurants.findIndex((r) => r.id === rid);
+    const alreadySwiped =
+      restaurantIndex >= 0 &&
+      restaurantIndex < (data.swipeCounts[userId] ?? 0);
 
-    const updated = await atomicUpdateRoom(id, (data) => {
-      const restaurantIndex = data.restaurants.findIndex((r) => r.id === rid);
-      const alreadySwiped =
-        restaurantIndex >= 0 &&
-        restaurantIndex < (data.swipeCounts[userId] ?? 0);
+    if (alreadySwiped) return data;
 
-      if (alreadySwiped) return data;
-
-      if (action === "like") {
-        if (!data.likes[rid]) {
-          data.likes[rid] = [];
-        }
-        if (!data.likes[rid].includes(userId)) {
-          data.likes[rid].push(userId);
-        }
-
-        if (data.likes[rid].length === data.users.length) {
-          data.match = rid;
-        }
+    if (action === "like") {
+      if (!data.likes[rid]) {
+        data.likes[rid] = [];
+      }
+      if (!data.likes[rid].includes(userId)) {
+        data.likes[rid].push(userId);
       }
 
-      data.swipeCounts[userId] = (data.swipeCounts[userId] ?? 0) + 1;
-
-      return data;
-    });
-
-    if (!updated) {
-      return NextResponse.json(
-        { error: "房间不存在或已过期" },
-        { status: 404 },
-      );
+      if (data.likes[rid].length === data.users.length) {
+        data.match = rid;
+      }
     }
 
-    notify(id);
+    data.swipeCounts[userId] = (data.swipeCounts[userId] ?? 0) + 1;
 
-    return NextResponse.json({
-      match: updated.match,
-      likeCount: updated.likes[rid]?.length ?? 0,
-    });
-  } catch (e) {
-    console.error("Failed to process swipe:", e);
+    return data;
+  });
+
+  if (!updated) {
     return NextResponse.json(
-      { error: "操作失败" },
-      { status: 500 },
+      { error: "房间不存在或已过期" },
+      { status: 404 },
     );
   }
-}
+
+  notify(id);
+
+  return NextResponse.json({
+    match: updated.match,
+    likeCount: updated.likes[rid]?.length ?? 0,
+  });
+});
diff --git a/src/app/api/room/[id]/undo/route.ts b/src/app/api/room/[id]/undo/route.ts
index 16ca7c3..651f398 100644
--- a/src/app/api/room/[id]/undo/route.ts
+++ b/src/app/api/room/[id]/undo/route.ts
@@ -1,60 +1,46 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function POST(
-  req: Request,
-  { params }: { params: Promise<{ id: string }> },
-) {
+export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
+  const { userId, restaurantId } = await req.json();
 
-  try {
-    const { userId, restaurantId } = await req.json();
+  if (!userId || restaurantId == null) {
+    throw new ApiError("userId and restaurantId are required");
+  }
 
-    if (!userId || restaurantId == null) {
-      return NextResponse.json(
-        { error: "userId and restaurantId are required" },
-        { status: 400 },
-      );
+  const rid = String(restaurantId);
+
+  const updated = await atomicUpdateRoom(id, (data) => {
+    if (data.likes[rid]) {
+      data.likes[rid] = data.likes[rid].filter((u) => u !== userId);
+      if (data.likes[rid].length === 0) {
+        delete data.likes[rid];
+      }
     }
 
-    const rid = String(restaurantId);
-
-    const updated = await atomicUpdateRoom(id, (data) => {
-      if (data.likes[rid]) {
-        data.likes[rid] = data.likes[rid].filter((u) => u !== userId);
-        if (data.likes[rid].length === 0) {
-          delete data.likes[rid];
-        }
-      }
-
-      if (data.match === rid) {
-        data.match = null;
-      }
-
-      const count = data.swipeCounts[userId] ?? 0;
-      if (count > 0) {
-        data.swipeCounts[userId] = count - 1;
-      }
-
-      return data;
-    });
-
-    if (!updated) {
-      return NextResponse.json(
-        { error: "房间不存在或已过期" },
-        { status: 404 },
-      );
+    if (data.match === rid) {
+      data.match = null;
     }
 
-    notify(id);
+    const count = data.swipeCounts[userId] ?? 0;
+    if (count > 0) {
+      data.swipeCounts[userId] = count - 1;
+    }
 
-    return NextResponse.json({ ok: true });
-  } catch (e) {
-    console.error("Failed to undo swipe:", e);
+    return data;
+  });
+
+  if (!updated) {
     return NextResponse.json(
-      { error: "撤回失败" },
-      { status: 500 },
+      { error: "房间不存在或已过期" },
+      { status: 404 },
     );
   }
-}
+
+  notify(id);
+
+  return NextResponse.json({ ok: true });
+});
diff --git a/src/app/api/room/create/route.ts b/src/app/api/room/create/route.ts
index d4c0921..950dd95 100644
--- a/src/app/api/room/create/route.ts
+++ b/src/app/api/room/create/route.ts
@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import { createRoom } from "@/lib/store";
 import { Restaurant, SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
+import { apiHandler, ApiError } from "@/lib/api";
 
 interface AmapPoiV5 {
   id: string;
@@ -101,78 +102,63 @@ function filterByPrice(
   });
 }
 
-export async function POST(req: Request) {
-  try {
-    const body = await req.json();
-    const {
-      lat,
-      lng,
-      radius = 3000,
-      priceRange = "any",
-      cuisine = "不限",
-      userId = "",
-      scene = "eat" as SceneType,
-    } = body;
+export const POST = apiHandler(async (req) => {
+  const body = await req.json();
+  const {
+    lat,
+    lng,
+    radius = 3000,
+    priceRange = "any",
+    cuisine = "不限",
+    userId = "",
+    scene = "eat" as SceneType,
+  } = body;
 
-    const sceneConfig = getSceneConfig(scene === "drink" ? "drink" : "eat");
+  const sceneConfig = getSceneConfig(scene === "drink" ? "drink" : "eat");
 
-    if (!lat || !lng) {
-      return NextResponse.json(
-        { error: "无法获取位置信息，请允许定位权限后重试" },
-        { status: 400 },
-      );
-    }
+  if (!lat || !lng) {
+    throw new ApiError("无法获取位置信息，请允许定位权限后重试");
+  }
 
-    const apiKey = process.env.AMAP_API_KEY;
-    if (!apiKey) {
-      console.error("AMAP_API_KEY not configured");
-      return NextResponse.json(
-        { error: "服务配置异常，请稍后重试" },
-        { status: 500 },
-      );
-    }
+  const apiKey = process.env.AMAP_API_KEY;
+  if (!apiKey) {
+    throw new ApiError("服务配置异常，请稍后重试", 500);
+  }
 
-    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", String(radius));
-    url.searchParams.set("types", sceneConfig.poiTypes);
-    url.searchParams.set("show_fields", "business,photos");
-    url.searchParams.set("sortrule", "weight");
+  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", String(radius));
+  url.searchParams.set("types", sceneConfig.poiTypes);
+  url.searchParams.set("show_fields", "business,photos");
+  url.searchParams.set("sortrule", "weight");
 
-    const needsPriceFilter = priceRange !== "any";
-    url.searchParams.set("page_size", needsPriceFilter ? "25" : "15");
+  const needsPriceFilter = priceRange !== "any";
+  url.searchParams.set("page_size", needsPriceFilter ? "25" : "15");
 
-    if (cuisine && cuisine !== "不限") {
-      url.searchParams.set("keywords", cuisine);
-    }
+  if (cuisine && cuisine !== "不限") {
+    url.searchParams.set("keywords", cuisine);
+  }
 
-    const amapRes = await fetch(url.toString());
-    const amapData = await amapRes.json();
+  const amapRes = await fetch(url.toString());
+  const amapData = await amapRes.json();
 
-    let restaurants: Restaurant[] = [];
-    if (amapData.status === "1" && amapData.pois?.length > 0) {
-      let results: Restaurant[] = amapData.pois.map(
-        (poi: AmapPoiV5) => mapPoiToRestaurant(poi, sceneConfig.defaultImage),
-      );
-      results = filterByPrice(results, priceRange);
-      restaurants = results.slice(0, 15);
-    }
+  let restaurants: Restaurant[] = [];
+  if (amapData.status === "1" && amapData.pois?.length > 0) {
+    let results: Restaurant[] = amapData.pois.map(
+      (poi: AmapPoiV5) => mapPoiToRestaurant(poi, sceneConfig.defaultImage),
+    );
+    results = filterByPrice(results, priceRange);
+    restaurants = results.slice(0, 15);
+  }
 
-    if (restaurants.length === 0) {
-      return NextResponse.json(
-        { error: sceneConfig.emptyError },
-        { status: 404 },
-      );
-    }
-
-    const roomId = await createRoom(restaurants, userId, sceneConfig.key);
-    return NextResponse.json({ roomId, restaurants });
-  } catch (e) {
-    console.error("Failed to create room:", e);
+  if (restaurants.length === 0) {
     return NextResponse.json(
-      { error: "搜索失败，请检查网络后重试" },
-      { status: 500 },
+      { error: sceneConfig.emptyError },
+      { status: 404 },
     );
   }
-}
+
+  const roomId = await createRoom(restaurants, userId, sceneConfig.key);
+  return NextResponse.json({ roomId, restaurants });
+});
diff --git a/src/app/api/user/favorite/route.ts b/src/app/api/user/favorite/route.ts
index e17a8de..6fecf41 100644
--- a/src/app/api/user/favorite/route.ts
+++ b/src/app/api/user/favorite/route.ts
@@ -1,11 +1,10 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function GET(req: NextRequest) {
+export const GET = apiHandler(async (req) => {
   const userId = req.nextUrl.searchParams.get("userId");
-  if (!userId) {
-    return NextResponse.json([]);
-  }
+  if (!userId) return NextResponse.json([]);
 
   const favorites = await prisma.favorite.findMany({
     where: { userId },
@@ -20,19 +19,15 @@ export async function GET(req: NextRequest) {
       createdAt: f.createdAt.toISOString(),
     })),
   );
-}
+});
 
-export async function POST(req: NextRequest) {
+export const POST = apiHandler(async (req) => {
   const { userId, restaurant } = await req.json();
 
-  if (!userId || !restaurant) {
-    return NextResponse.json({ error: "缺少必要字段" }, { status: 400 });
-  }
+  if (!userId || !restaurant) throw new ApiError("缺少必要字段");
 
   const user = await prisma.user.findUnique({ where: { id: userId } });
-  if (!user) {
-    return NextResponse.json({ error: "请先设置个人资料" }, { status: 404 });
-  }
+  if (!user) throw new ApiError("请先设置个人资料", 404);
 
   const existing = await prisma.favorite.findFirst({
     where: {
@@ -53,20 +48,16 @@ export async function POST(req: NextRequest) {
   });
 
   return NextResponse.json({ id: fav.id });
-}
+});
 
-export async function DELETE(req: NextRequest) {
+export const DELETE = apiHandler(async (req) => {
   const { userId, favoriteId } = await req.json();
 
-  if (!userId || !favoriteId) {
-    return NextResponse.json({ error: "缺少必要字段" }, { status: 400 });
-  }
+  if (!userId || !favoriteId) throw new ApiError("缺少必要字段");
 
   const fav = await prisma.favorite.findUnique({ where: { id: favoriteId } });
-  if (!fav || fav.userId !== userId) {
-    return NextResponse.json({ error: "收藏不存在" }, { status: 404 });
-  }
+  if (!fav || fav.userId !== userId) throw new ApiError("收藏不存在", 404);
 
   await prisma.favorite.delete({ where: { id: favoriteId } });
   return NextResponse.json({ ok: true });
-}
+});
diff --git a/src/app/api/user/history/route.ts b/src/app/api/user/history/route.ts
index b5503df..6c40f01 100644
--- a/src/app/api/user/history/route.ts
+++ b/src/app/api/user/history/route.ts
@@ -1,13 +1,12 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
+import { apiHandler, ApiError } from "@/lib/api";
 
 const MAX_HISTORY = 50;
 
-export async function GET(req: NextRequest) {
+export const GET = apiHandler(async (req) => {
   const userId = req.nextUrl.searchParams.get("userId");
-  if (!userId) {
-    return NextResponse.json([]);
-  }
+  if (!userId) return NextResponse.json([]);
 
   const decisions = await prisma.decision.findMany({
     where: { userId },
@@ -26,20 +25,18 @@ export async function GET(req: NextRequest) {
       createdAt: d.createdAt.toISOString(),
     })),
   );
-}
+});
 
-export async function POST(req: NextRequest) {
+export const POST = apiHandler(async (req) => {
   const { userId, roomId, restaurant, matchType, participants } =
     await req.json();
 
   if (!userId || !roomId || !restaurant || !matchType) {
-    return NextResponse.json({ error: "缺少必要字段" }, { status: 400 });
+    throw new ApiError("缺少必要字段");
   }
 
   const user = await prisma.user.findUnique({ where: { id: userId } });
-  if (!user) {
-    return NextResponse.json({ error: "用户未注册" }, { status: 404 });
-  }
+  if (!user) throw new ApiError("用户未注册", 404);
 
   const existing = await prisma.decision.findFirst({
     where: { userId, roomId },
@@ -73,4 +70,4 @@ export async function POST(req: NextRequest) {
   }
 
   return NextResponse.json({ id: decision.id });
-}
+});
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index 2719750..03c8bc0 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -1,17 +1,14 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcryptjs";
+import { apiHandler, ApiError } from "@/lib/api";
 
-export async function GET(req: NextRequest) {
+export const GET = apiHandler(async (req) => {
   const userId = req.nextUrl.searchParams.get("id");
-  if (!userId) {
-    return NextResponse.json(null);
-  }
+  if (!userId) return NextResponse.json(null);
 
   const user = await prisma.user.findUnique({ where: { id: userId } });
-  if (!user) {
-    return NextResponse.json(null);
-  }
+  if (!user) return NextResponse.json(null);
 
   const decisionCount = await prisma.decision.count({ where: { userId } });
 
@@ -24,48 +21,36 @@ export async function GET(req: NextRequest) {
     createdAt: user.createdAt.toISOString(),
     decisionCount,
   });
-}
+});
 
-export async function PUT(req: NextRequest) {
+export const PUT = apiHandler(async (req) => {
   const body = await req.json();
   const { userId } = body;
 
-  if (!userId) {
-    return NextResponse.json({ error: "缺少用户 ID" }, { status: 400 });
-  }
+  if (!userId) throw new ApiError("缺少用户 ID");
 
   const existing = await prisma.user.findUnique({ where: { id: userId } });
-  if (!existing) {
-    return NextResponse.json({ error: "用户不存在" }, { status: 404 });
-  }
+  if (!existing) throw new ApiError("用户不存在", 404);
 
   const updateData: Record<string, unknown> = {};
 
   if (body.username !== undefined) {
     const trimmed = body.username.trim();
     if (trimmed.length < 2 || trimmed.length > 16) {
-      return NextResponse.json({ error: "用户名需要 2-16 个字符" }, { status: 400 });
+      throw new ApiError("用户名需要 2-16 个字符");
     }
     if (trimmed !== existing.username) {
       const taken = await prisma.user.findUnique({ where: { username: trimmed } });
-      if (taken) {
-        return NextResponse.json({ error: "用户名已被占用" }, { status: 409 });
-      }
+      if (taken) throw new ApiError("用户名已被占用", 409);
     }
     updateData.username = trimmed;
   }
 
   if (body.newPassword !== undefined) {
-    if (!body.currentPassword) {
-      return NextResponse.json({ error: "请输入当前密码" }, { status: 400 });
-    }
+    if (!body.currentPassword) throw new ApiError("请输入当前密码");
     const valid = await bcrypt.compare(body.currentPassword, existing.passwordHash);
-    if (!valid) {
-      return NextResponse.json({ error: "当前密码错误" }, { status: 403 });
-    }
-    if (body.newPassword.length < 6) {
-      return NextResponse.json({ error: "新密码至少 6 个字符" }, { status: 400 });
-    }
+    if (!valid) throw new ApiError("当前密码错误", 403);
+    if (body.newPassword.length < 6) throw new ApiError("新密码至少 6 个字符");
     updateData.passwordHash = await bcrypt.hash(body.newPassword, 10);
   }
 
@@ -75,7 +60,7 @@ export async function PUT(req: NextRequest) {
 
   if (body.email !== undefined) {
     if (body.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(body.email)) {
-      return NextResponse.json({ error: "邮箱格式不正确" }, { status: 400 });
+      throw new ApiError("邮箱格式不正确");
     }
     updateData.email = body.email || null;
   }
@@ -96,4 +81,4 @@ export async function PUT(req: NextRequest) {
     email: user.email,
     preferences: JSON.parse(user.preferences),
   });
-}
+});
diff --git a/src/lib/api.ts b/src/lib/api.ts
new file mode 100644
index 0000000..d2d7da1
--- /dev/null
+++ b/src/lib/api.ts
@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    public status: number = 400,
+  ) {
+    super(message);
+  }
+}
+
+type RouteContext = { params: Promise<Record<string, string>> };
+
+type RouteHandler = (
+  req: NextRequest,
+  ctx: RouteContext,
+) => Promise<NextResponse>;
+
+/**
+ * Wraps a Next.js route handler with unified error handling.
+ * - ApiError instances are converted to JSON responses with matching status codes
+ * - Unknown errors are logged and returned as 500
+ */
+export function apiHandler(handler: RouteHandler): RouteHandler {
+  return async (req, ctx) => {
+    try {
+      return await handler(req, ctx);
+    } catch (e) {
+      if (e instanceof ApiError) {
+        return NextResponse.json({ error: e.message }, { status: e.status });
+      }
+      console.error(`[API ${req.method} ${req.nextUrl.pathname}]`, e);
+      return NextResponse.json({ error: "操作失败" }, { status: 500 });
+    }
+  };
+}
diff --git a/src/lib/blindbox.ts b/src/lib/blindbox.ts
index 3105e85..7376c5a 100644
--- a/src/lib/blindbox.ts
+++ b/src/lib/blindbox.ts
@@ -1,9 +1,4 @@
 import { prisma } from "@/lib/prisma";
-import { NextResponse } from "next/server";
-
-export function errorResponse(message: string, status: number) {
-  return NextResponse.json({ error: message }, { status });
-}
 
 export function generateRoomCode(): string {
   const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";

From 19edcaeeb50ed0f884c724ecc687ea2a4332891e Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 18:17:17 +0800
Subject: [PATCH 33/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20requireU?=
 =?UTF-8?q?serId/requireUser/requireMembership=20=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 requireUserId：统一 14 处 userId 非空校验，返回 401
- 新增 requireUser：统一 4 处用户存在性检查，返回 404
- validateMembership 升级为 requireMembership，直接抛 403
- 混合校验拆分为 auth(401) + 字段(400)，状态码更准确
---
 src/app/api/blindbox/draw/route.ts        |  9 ++++-----
 src/app/api/blindbox/room/[code]/route.ts |  4 ++--
 src/app/api/blindbox/room/join/route.ts   |  4 ++--
 src/app/api/blindbox/room/route.ts        |  7 +++----
 src/app/api/blindbox/rooms/route.ts       |  5 ++---
 src/app/api/blindbox/route.ts             | 19 ++++++++-----------
 src/app/api/room/[id]/join/route.ts       |  4 ++--
 src/app/api/room/[id]/manage/route.ts     |  7 +++----
 src/app/api/room/[id]/swipe/route.ts      |  7 ++++---
 src/app/api/room/[id]/undo/route.ts       |  7 +++----
 src/app/api/user/favorite/route.ts        | 11 ++++++-----
 src/app/api/user/history/route.ts         |  8 ++++----
 src/app/api/user/route.ts                 |  8 +++-----
 src/lib/api.ts                            | 16 ++++++++++++++++
 src/lib/blindbox.ts                       |  7 +++++--
 15 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/app/api/blindbox/draw/route.ts b/src/app/api/blindbox/draw/route.ts
index cab04e2..062de1e 100644
--- a/src/app/api/blindbox/draw/route.ts
+++ b/src/app/api/blindbox/draw/route.ts
@@ -1,16 +1,15 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { validateMembership } from "@/lib/blindbox";
-import { apiHandler, ApiError } from "@/lib/api";
+import { requireMembership } from "@/lib/blindbox";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req) => {
   const { roomId, userId } = await req.json();
 
-  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
+  requireUserId(userId);
   if (!roomId || typeof roomId !== "string") throw new ApiError("roomId 不能为空");
 
-  const isMember = await validateMembership(roomId, userId);
-  if (!isMember) throw new ApiError("你不是这个房间的成员", 403);
+  await requireMembership(roomId, userId);
 
   const pool = await prisma.blindBoxIdea.findMany({
     where: { roomId, status: "in_pool" },
diff --git a/src/app/api/blindbox/room/[code]/route.ts b/src/app/api/blindbox/room/[code]/route.ts
index 5ba4ab9..d67408d 100644
--- a/src/app/api/blindbox/room/[code]/route.ts
+++ b/src/app/api/blindbox/room/[code]/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import { getRoomByCode } from "@/lib/blindbox";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const GET = apiHandler(async (_req, { params }) => {
   const { code } = await params;
@@ -26,7 +26,7 @@ export const DELETE = apiHandler(async (req, { params }) => {
   const { code } = await params;
   const { userId } = await req.json();
 
-  if (!userId) throw new ApiError("缺少用户 ID");
+  requireUserId(userId);
 
   const room = await prisma.blindBoxRoom.findUnique({
     where: { code: code.toUpperCase() },
diff --git a/src/app/api/blindbox/room/join/route.ts b/src/app/api/blindbox/room/join/route.ts
index 8ac094c..98b3208 100644
--- a/src/app/api/blindbox/room/join/route.ts
+++ b/src/app/api/blindbox/room/join/route.ts
@@ -1,11 +1,11 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req) => {
   const { userId, code } = await req.json();
 
-  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
+  requireUserId(userId);
   if (!code || typeof code !== "string") throw new ApiError("请输入房间号");
 
   const room = await prisma.blindBoxRoom.findUnique({
diff --git a/src/app/api/blindbox/room/route.ts b/src/app/api/blindbox/room/route.ts
index c5942e8..35b2e19 100644
--- a/src/app/api/blindbox/room/route.ts
+++ b/src/app/api/blindbox/room/route.ts
@@ -1,18 +1,17 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import { generateUniqueRoomCode } from "@/lib/blindbox";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
 
 export const POST = apiHandler(async (req) => {
   const { userId, name } = await req.json();
 
-  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
+  requireUserId(userId);
 
   const roomName = (name || "").trim() || "我们的周末";
   if (roomName.length > 30) throw new ApiError("房间名不能超过 30 个字");
 
-  const user = await prisma.user.findUnique({ where: { id: userId } });
-  if (!user) throw new ApiError("用户不存在", 404);
+  await requireUser(userId);
 
   const code = await generateUniqueRoomCode();
 
diff --git a/src/app/api/blindbox/rooms/route.ts b/src/app/api/blindbox/rooms/route.ts
index 6983317..84400c9 100644
--- a/src/app/api/blindbox/rooms/route.ts
+++ b/src/app/api/blindbox/rooms/route.ts
@@ -1,10 +1,9 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, requireUserId } from "@/lib/api";
 
 export const GET = apiHandler(async (req) => {
-  const userId = req.nextUrl.searchParams.get("userId");
-  if (!userId) throw new ApiError("请先登录", 401);
+  const userId = requireUserId(req.nextUrl.searchParams.get("userId"));
 
   const memberships = await prisma.blindBoxMember.findMany({
     where: { userId },
diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
index 64237bf..5dd4665 100644
--- a/src/app/api/blindbox/route.ts
+++ b/src/app/api/blindbox/route.ts
@@ -1,20 +1,19 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { validateMembership } from "@/lib/blindbox";
-import { apiHandler, ApiError } from "@/lib/api";
+import { requireMembership } from "@/lib/blindbox";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req) => {
   const { roomId, userId, content } = await req.json();
 
-  if (!userId || typeof userId !== "string") throw new ApiError("请先登录", 401);
+  requireUserId(userId);
   if (!roomId || typeof roomId !== "string") throw new ApiError("roomId 不能为空");
   if (!content || typeof content !== "string" || content.trim().length === 0) {
     throw new ApiError("内容不能为空");
   }
   if (content.trim().length > 200) throw new ApiError("内容不能超过 200 字");
 
-  const isMember = await validateMembership(roomId, userId);
-  if (!isMember) throw new ApiError("你不是这个房间的成员", 403);
+  await requireMembership(roomId, userId);
 
   const idea = await prisma.blindBoxIdea.create({
     data: { roomId, userId, content: content.trim() },
@@ -25,13 +24,11 @@ export const POST = apiHandler(async (req) => {
 
 export const GET = apiHandler(async (req) => {
   const roomId = req.nextUrl.searchParams.get("roomId");
-  const userId = req.nextUrl.searchParams.get("userId");
+  const userId = requireUserId(req.nextUrl.searchParams.get("userId"));
 
   if (!roomId) throw new ApiError("缺少 roomId");
-  if (!userId) throw new ApiError("请先登录", 401);
 
-  const isMember = await validateMembership(roomId, userId);
-  if (!isMember) throw new ApiError("你不是这个房间的成员", 403);
+  await requireMembership(roomId, userId);
 
   const [poolCount, myIdeas, drawn] = await Promise.all([
     prisma.blindBoxIdea.count({
@@ -58,7 +55,7 @@ export const GET = apiHandler(async (req) => {
 export const PUT = apiHandler(async (req) => {
   const { ideaId, userId, content } = await req.json();
 
-  if (!userId) throw new ApiError("请先登录", 401);
+  requireUserId(userId);
   if (!ideaId) throw new ApiError("缺少 ideaId");
   if (!content || typeof content !== "string" || content.trim().length === 0) {
     throw new ApiError("内容不能为空");
@@ -81,7 +78,7 @@ export const PUT = apiHandler(async (req) => {
 export const DELETE = apiHandler(async (req) => {
   const { ideaId, userId } = await req.json();
 
-  if (!userId) throw new ApiError("请先登录", 401);
+  requireUserId(userId);
   if (!ideaId) throw new ApiError("缺少 ideaId");
 
   const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
diff --git a/src/app/api/room/[id]/join/route.ts b/src/app/api/room/[id]/join/route.ts
index fb901ae..230357e 100644
--- a/src/app/api/room/[id]/join/route.ts
+++ b/src/app/api/room/[id]/join/route.ts
@@ -1,13 +1,13 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
   const { userId } = await req.json();
 
-  if (!userId) throw new ApiError("userId required");
+  requireUserId(userId);
 
   const updated = await atomicUpdateRoom(id, (data) => {
     if (data.kickedUsers.includes(userId)) {
diff --git a/src/app/api/room/[id]/manage/route.ts b/src/app/api/room/[id]/manage/route.ts
index bf900b3..b2b76b3 100644
--- a/src/app/api/room/[id]/manage/route.ts
+++ b/src/app/api/room/[id]/manage/route.ts
@@ -1,15 +1,14 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
   const { userId, action, targetUserId } = await req.json();
 
-  if (!userId || !action) {
-    throw new ApiError("userId and action required");
-  }
+  requireUserId(userId);
+  if (!action) throw new ApiError("action required");
 
   const updated = await atomicUpdateRoom(id, (data) => {
     if (data.creatorId !== userId) {
diff --git a/src/app/api/room/[id]/swipe/route.ts b/src/app/api/room/[id]/swipe/route.ts
index c448003..835368e 100644
--- a/src/app/api/room/[id]/swipe/route.ts
+++ b/src/app/api/room/[id]/swipe/route.ts
@@ -1,14 +1,15 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
   const { userId, restaurantId, action } = await req.json();
 
-  if (!userId || restaurantId == null || !action) {
-    throw new ApiError("userId, restaurantId, and action are required");
+  requireUserId(userId);
+  if (restaurantId == null || !action) {
+    throw new ApiError("restaurantId and action are required");
   }
 
   const rid = String(restaurantId);
diff --git a/src/app/api/room/[id]/undo/route.ts b/src/app/api/room/[id]/undo/route.ts
index 651f398..f493849 100644
--- a/src/app/api/room/[id]/undo/route.ts
+++ b/src/app/api/room/[id]/undo/route.ts
@@ -1,15 +1,14 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
   const { userId, restaurantId } = await req.json();
 
-  if (!userId || restaurantId == null) {
-    throw new ApiError("userId and restaurantId are required");
-  }
+  requireUserId(userId);
+  if (restaurantId == null) throw new ApiError("restaurantId is required");
 
   const rid = String(restaurantId);
 
diff --git a/src/app/api/user/favorite/route.ts b/src/app/api/user/favorite/route.ts
index 6fecf41..dd97664 100644
--- a/src/app/api/user/favorite/route.ts
+++ b/src/app/api/user/favorite/route.ts
@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
 
 export const GET = apiHandler(async (req) => {
   const userId = req.nextUrl.searchParams.get("userId");
@@ -24,10 +24,10 @@ export const GET = apiHandler(async (req) => {
 export const POST = apiHandler(async (req) => {
   const { userId, restaurant } = await req.json();
 
-  if (!userId || !restaurant) throw new ApiError("缺少必要字段");
+  requireUserId(userId);
+  if (!restaurant) throw new ApiError("缺少必要字段");
 
-  const user = await prisma.user.findUnique({ where: { id: userId } });
-  if (!user) throw new ApiError("请先设置个人资料", 404);
+  await requireUser(userId);
 
   const existing = await prisma.favorite.findFirst({
     where: {
@@ -53,7 +53,8 @@ export const POST = apiHandler(async (req) => {
 export const DELETE = apiHandler(async (req) => {
   const { userId, favoriteId } = await req.json();
 
-  if (!userId || !favoriteId) throw new ApiError("缺少必要字段");
+  requireUserId(userId);
+  if (!favoriteId) throw new ApiError("缺少必要字段");
 
   const fav = await prisma.favorite.findUnique({ where: { id: favoriteId } });
   if (!fav || fav.userId !== userId) throw new ApiError("收藏不存在", 404);
diff --git a/src/app/api/user/history/route.ts b/src/app/api/user/history/route.ts
index 6c40f01..b68e669 100644
--- a/src/app/api/user/history/route.ts
+++ b/src/app/api/user/history/route.ts
@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
 
 const MAX_HISTORY = 50;
 
@@ -31,12 +31,12 @@ export const POST = apiHandler(async (req) => {
   const { userId, roomId, restaurant, matchType, participants } =
     await req.json();
 
-  if (!userId || !roomId || !restaurant || !matchType) {
+  requireUserId(userId);
+  if (!roomId || !restaurant || !matchType) {
     throw new ApiError("缺少必要字段");
   }
 
-  const user = await prisma.user.findUnique({ where: { id: userId } });
-  if (!user) throw new ApiError("用户未注册", 404);
+  await requireUser(userId);
 
   const existing = await prisma.decision.findFirst({
     where: { userId, roomId },
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index 03c8bc0..6c6f8e1 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcryptjs";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
 
 export const GET = apiHandler(async (req) => {
   const userId = req.nextUrl.searchParams.get("id");
@@ -27,10 +27,8 @@ export const PUT = apiHandler(async (req) => {
   const body = await req.json();
   const { userId } = body;
 
-  if (!userId) throw new ApiError("缺少用户 ID");
-
-  const existing = await prisma.user.findUnique({ where: { id: userId } });
-  if (!existing) throw new ApiError("用户不存在", 404);
+  requireUserId(userId);
+  const existing = await requireUser(userId);
 
   const updateData: Record<string, unknown> = {};
 
diff --git a/src/lib/api.ts b/src/lib/api.ts
index d2d7da1..33d1e46 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
 
 export class ApiError extends Error {
   constructor(
@@ -9,6 +10,21 @@ export class ApiError extends Error {
   }
 }
 
+/** Validates that value is a non-empty string; throws 401 otherwise. */
+export function requireUserId(value: unknown): string {
+  if (!value || typeof value !== "string") {
+    throw new ApiError("请先登录", 401);
+  }
+  return value;
+}
+
+/** Finds user by ID; throws 404 if not found. */
+export async function requireUser(userId: string) {
+  const user = await prisma.user.findUnique({ where: { id: userId } });
+  if (!user) throw new ApiError("用户不存在", 404);
+  return user;
+}
+
 type RouteContext = { params: Promise<Record<string, string>> };
 
 type RouteHandler = (
diff --git a/src/lib/blindbox.ts b/src/lib/blindbox.ts
index 7376c5a..c9e5b4a 100644
--- a/src/lib/blindbox.ts
+++ b/src/lib/blindbox.ts
@@ -1,4 +1,5 @@
 import { prisma } from "@/lib/prisma";
+import { ApiError } from "@/lib/api";
 
 export function generateRoomCode(): string {
   const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
@@ -18,11 +19,13 @@ export async function generateUniqueRoomCode(): Promise<string> {
   throw new Error("无法生成唯一房间号");
 }
 
-export async function validateMembership(roomId: string, userId: string) {
+/** Throws 403 if user is not a member of the room. */
+export async function requireMembership(roomId: string, userId: string) {
   const member = await prisma.blindBoxMember.findUnique({
     where: { roomId_userId: { roomId, userId } },
   });
-  return !!member;
+  if (!member) throw new ApiError("你不是这个房间的成员", 403);
+  return member;
 }
 
 export async function getRoomByCode(code: string) {

From 455b9e04d8f7cd4e1d4ec4451e3e960f0af52e02 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 18:39:14 +0800
Subject: [PATCH 34/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20Button?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=BB=9F=E4=B8=80=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=8F=98=E4=BD=93=E3=80=81=E5=B0=BA=E5=AF=B8=E5=92=8C?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 Button.tsx 支持 5 种变体(primary/secondary/danger/ghost/purple)、
3 种尺寸(sm/md/lg)、pill/rounded 形状及内置 loading 状态，
替换 8 个文件中 16 处重复的按钮样板代码。
---
 src/app/blindbox/[code]/page.tsx | 30 +++++++-------
 src/app/blindbox/page.tsx        | 46 +++++++++++----------
 src/app/error.tsx                | 17 +++-----
 src/app/invite/[id]/page.tsx     | 28 +++++--------
 src/app/room/[id]/page.tsx       |  8 ++--
 src/components/AuthModal.tsx     | 25 +++++------
 src/components/Button.tsx        | 71 ++++++++++++++++++++++++++++++++
 src/components/MatchResult.tsx   | 48 +++++++++++----------
 src/components/QrInviteModal.tsx | 20 +++++----
 9 files changed, 178 insertions(+), 115 deletions(-)
 create mode 100644 src/components/Button.tsx

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 97d737f..57e2e1b 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -23,6 +23,7 @@ import {
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
+import Button from "@/components/Button";
 import { useToast } from "@/hooks/useToast";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
@@ -536,14 +537,15 @@ export default function BlindboxRoomPage() {
         >
           <Package size={40} className="text-purple-400/50" strokeWidth={1.5} />
           <p className="text-sm text-tertiary">你还不是这个房间的成员</p>
-          <button
+          <Button
             onClick={handleJoinRoom}
-            disabled={joiningRoom}
-            className="flex h-11 items-center gap-2 rounded-xl bg-purple-600 px-6 text-sm font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+            variant="purple"
+            size="lg"
+            loading={joiningRoom}
+            icon={<LogIn size={16} />}
           >
-            {joiningRoom ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
             加入房间
-          </button>
+          </Button>
         </motion.div>
       ) : (
         <>
@@ -717,21 +719,21 @@ export default function BlindboxRoomPage() {
                 </div>
 
                 <div className="flex items-center gap-3">
-                  <motion.button
+                  <Button
                     onClick={() => setShowShareCard(true)}
-                    className="flex h-10 items-center gap-2 rounded-full bg-purple-600 px-5 text-xs font-bold text-white shadow-lg shadow-purple-900/30 transition-colors hover:bg-purple-500"
-                    whileTap={{ scale: 0.96 }}
+                    variant="purple"
+                    shape="pill"
+                    icon={<Share2 size={14} />}
                   >
-                    <Share2 size={14} />
                     分享契约
-                  </motion.button>
-                  <motion.button
+                  </Button>
+                  <Button
                     onClick={() => { setPhase("pool"); setRevealedIdea(null); setShowShareCard(false); }}
-                    className="flex h-10 items-center gap-2 rounded-full bg-surface px-5 text-xs font-semibold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
-                    whileTap={{ scale: 0.96 }}
+                    variant="secondary"
+                    shape="pill"
                   >
                     继续投入想法
-                  </motion.button>
+                  </Button>
                 </div>
               </motion.div>
             )}
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 86f5c52..8353535 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -10,11 +10,11 @@ import {
   LogIn,
   Users,
   Sparkles,
-  Loader2,
   ChevronRight,
 } from "lucide-react";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import AuthModal from "@/components/AuthModal";
+import Button from "@/components/Button";
 import { BlindboxListSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
 
@@ -256,14 +256,15 @@ export default function BlindboxLobbyPage() {
                   maxLength={30}
                   className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
                 />
-                <button
+                <Button
                   onClick={handleCreate}
-                  disabled={creating}
-                  className="flex h-11 items-center gap-1.5 rounded-xl bg-purple-600 px-4 text-sm font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+                  variant="purple"
+                  size="lg"
+                  loading={creating}
+                  icon={<Plus size={16} />}
                 >
-                  {creating ? <Loader2 size={16} className="animate-spin" /> : <Plus size={16} />}
                   创建
-                </button>
+                </Button>
               </div>
 
               {/* Join alternative */}
@@ -286,14 +287,16 @@ export default function BlindboxLobbyPage() {
                   maxLength={6}
                   className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
                 />
-                <button
+                <Button
                   onClick={handleJoin}
-                  disabled={joining || joinCode.trim().length < 6}
-                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                  variant="secondary"
+                  size="lg"
+                  disabled={joinCode.trim().length < 6}
+                  loading={joining}
+                  icon={<LogIn size={16} />}
                 >
-                  {joining ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
                   加入
-                </button>
+                </Button>
               </div>
 
               {error && (
@@ -330,14 +333,14 @@ export default function BlindboxLobbyPage() {
                 maxLength={30}
                 className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
               />
-              <button
+              <Button
                 onClick={handleCreate}
-                disabled={creating}
-                className="flex h-10 items-center gap-1.5 rounded-xl bg-purple-600 px-4 text-xs font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+                variant="purple"
+                loading={creating}
+                icon={<Plus size={14} />}
               >
-                {creating ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />}
                 创建
-              </button>
+              </Button>
             </div>
 
             {/* Join row */}
@@ -354,14 +357,15 @@ export default function BlindboxLobbyPage() {
                 maxLength={6}
                 className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:font-sans placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-purple-600"
               />
-              <button
+              <Button
                 onClick={handleJoin}
-                disabled={joining || joinCode.trim().length < 6}
-                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                variant="secondary"
+                disabled={joinCode.trim().length < 6}
+                loading={joining}
+                icon={<LogIn size={14} />}
               >
-                {joining ? <Loader2 size={14} className="animate-spin" /> : <LogIn size={14} />}
                 加入
-              </button>
+              </Button>
             </div>
 
             {error && (
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 0204dd2..0c34e22 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import { motion } from "framer-motion";
 import { AlertTriangle, RotateCcw, Home } from "lucide-react";
+import Button from "@/components/Button";
 
 export default function Error({
   error,
@@ -37,20 +38,12 @@ export default function Error({
         </p>
 
         <div className="mt-8 flex gap-3">
-          <button
-            onClick={reset}
-            className="flex items-center gap-1.5 rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-rose-500"
-          >
-            <RotateCcw size={15} />
+          <Button onClick={reset} variant="danger" icon={<RotateCcw size={15} />}>
             重试
-          </button>
-          <a
-            href="/"
-            className="flex items-center gap-1.5 rounded-xl bg-surface px-5 py-2.5 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
-          >
-            <Home size={15} />
+          </Button>
+          <Button onClick={() => window.location.href = "/"} variant="secondary" icon={<Home size={15} />}>
             首页
-          </a>
+          </Button>
         </div>
       </motion.div>
     </div>
diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 859a1fc..163f275 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -9,11 +9,11 @@ import {
   Heart,
   Sparkles,
   ChevronRight,
-  Loader2,
   Coffee,
 } from "lucide-react";
 import { getUserId } from "@/lib/userId";
 import { Skeleton, SkeletonCircle } from "@/components/Skeleton";
+import Button from "@/components/Button";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import type { SceneType } from "@/types";
 
@@ -93,12 +93,9 @@ export default function InvitePage() {
         <p className="text-center text-sm text-muted">
           这个房间已过期或不存在，请让朋友重新分享链接
         </p>
-        <button
-          onClick={() => router.push("/")}
-          className="mt-2 rounded-xl bg-accent px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
-        >
+        <Button onClick={() => router.push("/")} className="mt-2">
           自己创建房间
-        </button>
+        </Button>
       </div>
     );
   }
@@ -194,20 +191,15 @@ export default function InvitePage() {
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.3 }}
       >
-        <button
+        <Button
           onClick={handleJoin}
-          disabled={joining}
-          className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
+          size="lg"
+          fullWidth
+          loading={joining}
+          loadingText="加入中..."
         >
-          {joining ? (
-            <>
-              <Loader2 size={18} className="animate-spin" />
-              加入中...
-            </>
-          ) : (
-            "加入房间"
-          )}
-        </button>
+          加入房间
+        </Button>
       </motion.div>
     </div>
   );
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 9b42599..5b095c1 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -6,6 +6,7 @@ import TopNav from "@/components/TopNav";
 import SwipeDeck from "@/components/SwipeDeck";
 import { SwipeDeckSkeleton } from "@/components/Skeleton";
 import LeaveConfirmModal from "@/components/LeaveConfirmModal";
+import Button from "@/components/Button";
 import { useRoomPolling } from "@/hooks/useRoomPolling";
 import { getUserId } from "@/lib/userId";
 import { getSceneConfig } from "@/lib/sceneConfig";
@@ -96,12 +97,9 @@ export default function RoomPage() {
         <p className="text-4xl">🍜</p>
         <p className="text-base font-semibold text-secondary">房间不存在或已过期</p>
         <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
-        <button
-          onClick={() => router.push("/")}
-          className="mt-2 h-10 rounded-xl bg-accent px-6 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
-        >
+        <Button onClick={() => router.push("/")}>
           返回首页
-        </button>
+        </Button>
       </div>
     );
   }
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 0e39765..e24c397 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -2,11 +2,12 @@
 
 import { useState } from "react";
 import { motion } from "framer-motion";
-import { X, Loader2, Eye, EyeOff } from "lucide-react";
+import { X, Eye, EyeOff } from "lucide-react";
 import { AVATARS } from "@/lib/avatars";
 import { setCachedProfile } from "@/lib/userId";
 import type { UserProfile } from "@/types";
 import Modal from "@/components/Modal";
+import Button from "@/components/Button";
 
 type Tab = "login" | "register";
 
@@ -232,22 +233,16 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
         </motion.p>
       )}
 
-      <button
+      <Button
         onClick={handleSubmit}
-        disabled={loading}
-        className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
+        size="lg"
+        fullWidth
+        loading={loading}
+        loadingText={tab === "login" ? "登录中..." : "注册中..."}
+        className="mt-5"
       >
-        {loading ? (
-          <>
-            <Loader2 size={16} className="animate-spin" />
-            {tab === "login" ? "登录中..." : "注册中..."}
-          </>
-        ) : tab === "login" ? (
-          "登录"
-        ) : (
-          "注册"
-        )}
-      </button>
+        {tab === "login" ? "登录" : "注册"}
+      </Button>
     </Modal>
   );
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..f19215a
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { type ComponentProps, type ReactNode } from "react";
+import { motion } from "framer-motion";
+import { Loader2 } from "lucide-react";
+
+const variantStyles = {
+  primary:
+    "bg-accent text-white shadow-lg shadow-accent/20 hover:bg-accent-hover disabled:opacity-50",
+  secondary:
+    "bg-surface text-secondary ring-1 ring-border hover:bg-elevated disabled:opacity-40",
+  danger:
+    "bg-rose-600 text-white hover:bg-rose-500 disabled:opacity-50",
+  ghost:
+    "text-muted hover:text-secondary hover:bg-elevated disabled:opacity-50",
+  purple:
+    "bg-purple-600 text-white hover:bg-purple-500 disabled:opacity-50",
+} as const;
+
+const sizeStyles = {
+  sm: "h-8 px-3 text-xs gap-1",
+  md: "h-10 px-4 text-sm gap-1.5",
+  lg: "h-11 px-6 text-sm font-bold gap-2",
+} as const;
+
+const spinnerSize = { sm: 13, md: 15, lg: 18 } as const;
+
+interface ButtonProps
+  extends Omit<ComponentProps<typeof motion.button>, "ref" | "children"> {
+  variant?: keyof typeof variantStyles;
+  size?: "sm" | "md" | "lg";
+  shape?: "rounded" | "pill";
+  loading?: boolean;
+  loadingText?: string;
+  icon?: ReactNode;
+  fullWidth?: boolean;
+  children?: ReactNode;
+}
+
+export default function Button({
+  variant = "primary",
+  size = "md",
+  shape = "rounded",
+  loading = false,
+  loadingText,
+  icon,
+  fullWidth = false,
+  className = "",
+  disabled,
+  children,
+  ...rest
+}: ButtonProps) {
+  const base = "flex items-center justify-center font-semibold transition-colors";
+  const shapeClass = shape === "pill" ? "rounded-full" : "rounded-xl";
+
+  return (
+    <motion.button
+      className={`${base} ${variantStyles[variant]} ${sizeStyles[size]} ${shapeClass} ${fullWidth ? "w-full" : ""} ${className}`}
+      disabled={loading || disabled}
+      whileTap={{ scale: 0.95 }}
+      {...rest}
+    >
+      {loading ? (
+        <Loader2 size={spinnerSize[size]} className="animate-spin" />
+      ) : icon ? (
+        icon
+      ) : null}
+      {loading && loadingText ? loadingText : children}
+    </motion.button>
+  );
+}
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 9919a58..ba2e89c 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -34,6 +34,7 @@ import { isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
 import RestaurantImage from "@/components/RestaurantImage";
 import AuthModal from "@/components/AuthModal";
+import Button from "@/components/Button";
 import { useToast } from "@/hooks/useToast";
 
 interface MatchResultProps {
@@ -107,24 +108,26 @@ function NoMatchResult({
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.55 }}
       >
-        <motion.button
+        <Button
           onClick={onReset}
-          disabled={resetting}
-          className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
-          whileTap={{ scale: 0.95 }}
+          shape="pill"
+          loading={resetting}
+          loadingText="重置中..."
+          icon={<RotateCcw size={15} />}
+          className="px-8 py-3"
         >
-          <RotateCcw size={15} className={resetting ? "animate-spin" : ""} />
-          {resetting ? "重置中..." : "再来一轮"}
-        </motion.button>
+          再来一轮
+        </Button>
 
-        <motion.button
+        <Button
           onClick={() => router.push("/")}
-          className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
-          whileTap={{ scale: 0.95 }}
+          variant="secondary"
+          shape="pill"
+          icon={<Home size={15} />}
+          className="px-8 py-3"
         >
-          <Home size={15} />
           换个条件重新搜
-        </motion.button>
+        </Button>
       </motion.div>
     </motion.div>
   );
@@ -487,14 +490,15 @@ export default function MatchResult({
             </motion.a>
           )}
 
-          <motion.button
+          <Button
             onClick={handleOpenShareCard}
-            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
-            whileTap={{ scale: 0.95 }}
+            variant="secondary"
+            shape="pill"
+            icon={<Share2 size={15} />}
+            className="px-8 py-3"
           >
-            <Share2 size={15} />
             生成分享卡片
-          </motion.button>
+          </Button>
         </motion.div>
 
         {/* Registration nudge */}
@@ -511,14 +515,14 @@ export default function MatchResult({
             <p className="mt-1 text-xs text-muted">
               仅需用户名 + 密码，10 秒完成
             </p>
-            <motion.button
+            <Button
               onClick={() => setShowAuth(true)}
-              className="mt-3 flex h-10 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
-              whileTap={{ scale: 0.95 }}
+              fullWidth
+              icon={<UserPlus size={15} />}
+              className="mt-3"
             >
-              <UserPlus size={15} />
               注册保存记录
-            </motion.button>
+            </Button>
           </motion.div>
         )}
 
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index 3f5f4ac..cb48300 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -6,6 +6,7 @@ import { X, Copy, Share2, QrCode } from "lucide-react";
 import type { SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import Modal from "@/components/Modal";
+import Button from "@/components/Button";
 import { useToast } from "@/hooks/useToast";
 
 interface QrInviteModalProps {
@@ -92,20 +93,23 @@ export default function QrInviteModal({
         </div>
 
         <div className="mt-5 flex w-full gap-2.5">
-          <button
+          <Button
             onClick={handleCopy}
-            className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
+            variant="secondary"
+            size="lg"
+            icon={<Copy size={15} />}
+            className="flex-1"
           >
-            <Copy size={15} />
             复制链接
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleShare}
-            className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
+            size="lg"
+            icon={<Share2 size={15} />}
+            className="flex-1"
           >
-            <Share2 size={15} />
             发送邀请
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>

From 1229bb849b2a980bbff1e5d723db6a5f0e8934d2 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 19:22:17 +0800
Subject: [PATCH 35/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20validati?=
 =?UTF-8?q?on.ts=20=E5=92=8C=20amap.ts=EF=BC=8C=E7=BB=9F=E4=B8=80=20API=20?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=A0=A1=E9=AA=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 validation.ts（用户名/密码/邮箱/内容/房间名/必填字段校验）
和 amap.ts（AMAP API key 校验），消除 7 个路由中的重复验证代码。
---
 src/app/api/auth/register/route.ts    |  8 ++---
 src/app/api/blindbox/room/route.ts    |  6 ++--
 src/app/api/blindbox/route.ts         | 25 +++++---------
 src/app/api/location/regeo/route.ts   |  4 +--
 src/app/api/location/suggest/route.ts |  6 ++--
 src/app/api/room/create/route.ts      |  6 ++--
 src/app/api/user/route.ts             | 12 +++----
 src/lib/amap.ts                       |  7 ++++
 src/lib/validation.ts                 | 47 +++++++++++++++++++++++++++
 9 files changed, 80 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/amap.ts
 create mode 100644 src/lib/validation.ts

diff --git a/src/app/api/auth/register/route.ts b/src/app/api/auth/register/route.ts
index 37a3c73..9fbbfd1 100644
--- a/src/app/api/auth/register/route.ts
+++ b/src/app/api/auth/register/route.ts
@@ -2,17 +2,15 @@ import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcryptjs";
 import { apiHandler, ApiError } from "@/lib/api";
+import { validateUsername, validatePassword } from "@/lib/validation";
 
 export const POST = apiHandler(async (req) => {
   const { username, password, avatar } = await req.json();
 
   if (!username || !password) throw new ApiError("用户名和密码为必填项");
 
-  const trimmedUsername = username.trim();
-  if (trimmedUsername.length < 2 || trimmedUsername.length > 16) {
-    throw new ApiError("用户名需要 2-16 个字符");
-  }
-  if (password.length < 6) throw new ApiError("密码至少 6 个字符");
+  const trimmedUsername = validateUsername(username);
+  validatePassword(password);
 
   const existing = await prisma.user.findUnique({ where: { username: trimmedUsername } });
   if (existing) throw new ApiError("用户名已被注册", 409);
diff --git a/src/app/api/blindbox/room/route.ts b/src/app/api/blindbox/room/route.ts
index 35b2e19..f7db278 100644
--- a/src/app/api/blindbox/room/route.ts
+++ b/src/app/api/blindbox/room/route.ts
@@ -1,15 +1,15 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import { generateUniqueRoomCode } from "@/lib/blindbox";
-import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
+import { apiHandler, requireUserId, requireUser } from "@/lib/api";
+import { validateRoomName } from "@/lib/validation";
 
 export const POST = apiHandler(async (req) => {
   const { userId, name } = await req.json();
 
   requireUserId(userId);
 
-  const roomName = (name || "").trim() || "我们的周末";
-  if (roomName.length > 30) throw new ApiError("房间名不能超过 30 个字");
+  const roomName = validateRoomName(name);
 
   await requireUser(userId);
 
diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
index 5dd4665..a5c4de2 100644
--- a/src/app/api/blindbox/route.ts
+++ b/src/app/api/blindbox/route.ts
@@ -2,31 +2,27 @@ import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import { requireMembership } from "@/lib/blindbox";
 import { apiHandler, ApiError, requireUserId } from "@/lib/api";
+import { validateIdeaContent, requireString } from "@/lib/validation";
 
 export const POST = apiHandler(async (req) => {
   const { roomId, userId, content } = await req.json();
 
   requireUserId(userId);
-  if (!roomId || typeof roomId !== "string") throw new ApiError("roomId 不能为空");
-  if (!content || typeof content !== "string" || content.trim().length === 0) {
-    throw new ApiError("内容不能为空");
-  }
-  if (content.trim().length > 200) throw new ApiError("内容不能超过 200 字");
+  requireString(roomId, "roomId");
+  const trimmedContent = validateIdeaContent(content);
 
   await requireMembership(roomId, userId);
 
   const idea = await prisma.blindBoxIdea.create({
-    data: { roomId, userId, content: content.trim() },
+    data: { roomId, userId, content: trimmedContent },
   });
 
   return NextResponse.json({ id: idea.id }, { status: 201 });
 });
 
 export const GET = apiHandler(async (req) => {
-  const roomId = req.nextUrl.searchParams.get("roomId");
   const userId = requireUserId(req.nextUrl.searchParams.get("userId"));
-
-  if (!roomId) throw new ApiError("缺少 roomId");
+  const roomId = requireString(req.nextUrl.searchParams.get("roomId"), "roomId");
 
   await requireMembership(roomId, userId);
 
@@ -56,11 +52,8 @@ export const PUT = apiHandler(async (req) => {
   const { ideaId, userId, content } = await req.json();
 
   requireUserId(userId);
-  if (!ideaId) throw new ApiError("缺少 ideaId");
-  if (!content || typeof content !== "string" || content.trim().length === 0) {
-    throw new ApiError("内容不能为空");
-  }
-  if (content.trim().length > 200) throw new ApiError("内容不能超过 200 字");
+  requireString(ideaId, "ideaId");
+  const trimmedContent = validateIdeaContent(content);
 
   const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
   if (!idea) throw new ApiError("想法不存在", 404);
@@ -69,7 +62,7 @@ export const PUT = apiHandler(async (req) => {
 
   const updated = await prisma.blindBoxIdea.update({
     where: { id: ideaId },
-    data: { content: content.trim() },
+    data: { content: trimmedContent },
   });
 
   return NextResponse.json({ id: updated.id, content: updated.content });
@@ -79,7 +72,7 @@ export const DELETE = apiHandler(async (req) => {
   const { ideaId, userId } = await req.json();
 
   requireUserId(userId);
-  if (!ideaId) throw new ApiError("缺少 ideaId");
+  requireString(ideaId, "ideaId");
 
   const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
   if (!idea) throw new ApiError("想法不存在", 404);
diff --git a/src/app/api/location/regeo/route.ts b/src/app/api/location/regeo/route.ts
index ec3b6cc..833cf8c 100644
--- a/src/app/api/location/regeo/route.ts
+++ b/src/app/api/location/regeo/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { apiHandler, ApiError } from "@/lib/api";
+import { requireAmapApiKey } from "@/lib/amap";
 
 export const GET = apiHandler(async (req) => {
   const lat = req.nextUrl.searchParams.get("lat");
@@ -7,8 +8,7 @@ export const GET = apiHandler(async (req) => {
 
   if (!lat || !lng) throw new ApiError("lat and lng are required");
 
-  const apiKey = process.env.AMAP_API_KEY;
-  if (!apiKey) throw new ApiError("AMAP_API_KEY not configured", 500);
+  const apiKey = requireAmapApiKey();
 
   const url = new URL("https://restapi.amap.com/v3/geocode/regeo");
   url.searchParams.set("key", apiKey);
diff --git a/src/app/api/location/suggest/route.ts b/src/app/api/location/suggest/route.ts
index 01c1caf..69fd5f1 100644
--- a/src/app/api/location/suggest/route.ts
+++ b/src/app/api/location/suggest/route.ts
@@ -1,12 +1,12 @@
 import { NextResponse } from "next/server";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler } from "@/lib/api";
+import { requireAmapApiKey } from "@/lib/amap";
 
 export const GET = apiHandler(async (req) => {
   const keywords = req.nextUrl.searchParams.get("keywords")?.trim();
   if (!keywords) return NextResponse.json([]);
 
-  const apiKey = process.env.AMAP_API_KEY;
-  if (!apiKey) throw new ApiError("AMAP_API_KEY not configured", 500);
+  const apiKey = requireAmapApiKey();
 
   const url = new URL("https://restapi.amap.com/v3/assistant/inputtips");
   url.searchParams.set("key", apiKey);
diff --git a/src/app/api/room/create/route.ts b/src/app/api/room/create/route.ts
index 950dd95..37d12f3 100644
--- a/src/app/api/room/create/route.ts
+++ b/src/app/api/room/create/route.ts
@@ -3,6 +3,7 @@ import { createRoom } from "@/lib/store";
 import { Restaurant, SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import { apiHandler, ApiError } from "@/lib/api";
+import { requireAmapApiKey } from "@/lib/amap";
 
 interface AmapPoiV5 {
   id: string;
@@ -120,10 +121,7 @@ export const POST = apiHandler(async (req) => {
     throw new ApiError("无法获取位置信息，请允许定位权限后重试");
   }
 
-  const apiKey = process.env.AMAP_API_KEY;
-  if (!apiKey) {
-    throw new ApiError("服务配置异常，请稍后重试", 500);
-  }
+  const apiKey = requireAmapApiKey();
 
   const url = new URL("https://restapi.amap.com/v5/place/around");
   url.searchParams.set("key", apiKey);
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index 6c6f8e1..6f07c9e 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcryptjs";
 import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
+import { validateUsername, validatePassword, validateEmail } from "@/lib/validation";
 
 export const GET = apiHandler(async (req) => {
   const userId = req.nextUrl.searchParams.get("id");
@@ -33,10 +34,7 @@ export const PUT = apiHandler(async (req) => {
   const updateData: Record<string, unknown> = {};
 
   if (body.username !== undefined) {
-    const trimmed = body.username.trim();
-    if (trimmed.length < 2 || trimmed.length > 16) {
-      throw new ApiError("用户名需要 2-16 个字符");
-    }
+    const trimmed = validateUsername(body.username);
     if (trimmed !== existing.username) {
       const taken = await prisma.user.findUnique({ where: { username: trimmed } });
       if (taken) throw new ApiError("用户名已被占用", 409);
@@ -48,7 +46,7 @@ export const PUT = apiHandler(async (req) => {
     if (!body.currentPassword) throw new ApiError("请输入当前密码");
     const valid = await bcrypt.compare(body.currentPassword, existing.passwordHash);
     if (!valid) throw new ApiError("当前密码错误", 403);
-    if (body.newPassword.length < 6) throw new ApiError("新密码至少 6 个字符");
+    validatePassword(body.newPassword, "新密码");
     updateData.passwordHash = await bcrypt.hash(body.newPassword, 10);
   }
 
@@ -57,9 +55,7 @@ export const PUT = apiHandler(async (req) => {
   }
 
   if (body.email !== undefined) {
-    if (body.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(body.email)) {
-      throw new ApiError("邮箱格式不正确");
-    }
+    if (body.email) validateEmail(body.email);
     updateData.email = body.email || null;
   }
 
diff --git a/src/lib/amap.ts b/src/lib/amap.ts
new file mode 100644
index 0000000..bb72826
--- /dev/null
+++ b/src/lib/amap.ts
@@ -0,0 +1,7 @@
+import { ApiError } from "@/lib/api";
+
+export function requireAmapApiKey(): string {
+  const key = process.env.AMAP_API_KEY;
+  if (!key) throw new ApiError("服务配置异常，请稍后重试", 500);
+  return key;
+}
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
new file mode 100644
index 0000000..c9f5b5b
--- /dev/null
+++ b/src/lib/validation.ts
@@ -0,0 +1,47 @@
+import { ApiError } from "@/lib/api";
+
+export function validateUsername(raw: string): string {
+  const trimmed = raw.trim();
+  if (trimmed.length < 2 || trimmed.length > 16) {
+    throw new ApiError("用户名需要 2-16 个字符");
+  }
+  return trimmed;
+}
+
+export function validatePassword(password: string, label = "密码"): void {
+  if (password.length < 6) {
+    throw new ApiError(`${label}至少 6 个字符`);
+  }
+}
+
+export function validateEmail(email: string): void {
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    throw new ApiError("邮箱格式不正确");
+  }
+}
+
+export function validateIdeaContent(raw: unknown): string {
+  if (!raw || typeof raw !== "string" || raw.trim().length === 0) {
+    throw new ApiError("内容不能为空");
+  }
+  const trimmed = raw.trim();
+  if (trimmed.length > 200) {
+    throw new ApiError("内容不能超过 200 字");
+  }
+  return trimmed;
+}
+
+export function validateRoomName(raw: unknown, fallback = "我们的周末"): string {
+  const trimmed = ((raw as string) || "").trim() || fallback;
+  if (trimmed.length > 30) {
+    throw new ApiError("房间名不能超过 30 个字");
+  }
+  return trimmed;
+}
+
+export function requireString(value: unknown, fieldName: string): string {
+  if (!value || typeof value !== "string") {
+    throw new ApiError(`${fieldName}不能为空`);
+  }
+  return value;
+}

From c9e20d4c954c5a18dd359aeda6fd1ccc55985409 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 19:25:44 +0800
Subject: [PATCH 36/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20useShare?=
 =?UTF-8?q?=20hook=EF=BC=8C=E7=BB=9F=E4=B8=80=E5=88=86=E4=BA=AB=E5=92=8C?=
 =?UTF-8?q?=E5=89=AA=E8=B4=B4=E6=9D=BF=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 useShare（Web Share API + clipboard fallback），
消除 QrInviteModal、BlindboxRoomPage、ShareCardModal 三处重复的分享代码。
---
 src/app/blindbox/[code]/page.tsx  | 36 +++++++++++-----------------
 src/components/QrInviteModal.tsx  | 38 ++++++++----------------------
 src/components/ShareCardModal.tsx | 21 +++++++----------
 src/hooks/useShare.ts             | 39 +++++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 64 deletions(-)
 create mode 100644 src/hooks/useShare.ts

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 57e2e1b..ea3220e 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -25,6 +25,7 @@ import { getCachedProfile, isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
 import Button from "@/components/Button";
 import { useToast } from "@/hooks/useToast";
+import { useShare } from "@/hooks/useShare";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
 
@@ -391,32 +392,21 @@ export default function BlindboxRoomPage() {
     setTimeout(frame, 200);
   };
 
-  const handleCopyCode = async () => {
-    if (!room) return;
-    try {
-      await navigator.clipboard.writeText(room.code);
-      toast.show("房间号已复制");
-    } catch { /* ignore */ }
-  };
+  const { share, copyToClipboard } = useShare();
 
-  const handleShare = async () => {
+  const handleCopyCode = useCallback(
+    () => room ? copyToClipboard(room.code, "房间号已复制") : undefined,
+    [room, copyToClipboard],
+  );
+
+  const handleShare = useCallback(() => {
     if (!room) return;
     const url = typeof window !== "undefined" ? `${window.location.origin}/blindbox/${room.code}` : "";
-    const shareData = {
-      title: `周末契约 · ${room.name}`,
-      text: `来和我一起玩周末盲盒吧！房间号：${room.code}`,
-      url,
-    };
-    try {
-      if (navigator.share && navigator.canShare?.(shareData)) {
-        await navigator.share(shareData);
-        return;
-      }
-    } catch (e) {
-      if (e instanceof Error && e.name === "AbortError") return;
-    }
-    handleCopyCode();
-  };
+    share(
+      { title: `周末契约 · ${room.name}`, text: `来和我一起玩周末盲盒吧！房间号：${room.code}`, url },
+      handleCopyCode,
+    );
+  }, [room, share, handleCopyCode]);
 
   const isCreator = profile?.id === room?.creatorId;
 
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index cb48300..211efa1 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -7,7 +7,7 @@ import type { SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import Modal from "@/components/Modal";
 import Button from "@/components/Button";
-import { useToast } from "@/hooks/useToast";
+import { useShare } from "@/hooks/useShare";
 
 interface QrInviteModalProps {
   open: boolean;
@@ -22,40 +22,22 @@ export default function QrInviteModal({
   roomId,
   scene = "eat",
 }: QrInviteModalProps) {
-  const toast = useToast();
+  const { share, copyToClipboard } = useShare();
   const sceneConfig = getSceneConfig(scene);
   const inviteUrl =
     typeof window !== "undefined"
       ? `${window.location.origin}/invite/${roomId}`
       : "";
 
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(inviteUrl);
-      toast.show("邀请链接已复制，快去发给朋友吧！");
-    } catch {
-      toast.show("复制失败，请手动复制链接");
-    }
-  }, [inviteUrl, toast]);
+  const handleCopy = useCallback(
+    () => copyToClipboard(inviteUrl, "邀请链接已复制，快去发给朋友吧！"),
+    [inviteUrl, copyToClipboard],
+  );
 
-  const handleShare = useCallback(async () => {
-    const shareData = {
-      title: sceneConfig.shareTitle,
-      text: sceneConfig.shareText,
-      url: inviteUrl,
-    };
-
-    try {
-      if (navigator.share && navigator.canShare?.(shareData)) {
-        await navigator.share(shareData);
-        return;
-      }
-    } catch (e) {
-      if (e instanceof Error && e.name === "AbortError") return;
-    }
-
-    handleCopy();
-  }, [inviteUrl, handleCopy, sceneConfig]);
+  const handleShare = useCallback(
+    () => share({ title: sceneConfig.shareTitle, text: sceneConfig.shareText, url: inviteUrl }, handleCopy),
+    [inviteUrl, sceneConfig, share, handleCopy],
+  );
 
   return (
     <Modal open={open} onClose={onClose}>
diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
index 8c6da4e..acff296 100644
--- a/src/components/ShareCardModal.tsx
+++ b/src/components/ShareCardModal.tsx
@@ -7,6 +7,7 @@ import { QRCodeSVG } from "qrcode.react";
 import { toPng } from "html-to-image";
 import type { Restaurant, MatchType, SceneType } from "@/types";
 import { useToast } from "@/hooks/useToast";
+import { useShare } from "@/hooks/useShare";
 
 type ShareCardData =
   | {
@@ -832,6 +833,8 @@ export default function ShareCardModal({
     toast.show("图片已保存");
   }, [handleGenerate, toast, data]);
 
+  const { share: nativeShare } = useShare();
+
   const handleShare = useCallback(async () => {
     const png = await handleGenerate();
     if (!png) {
@@ -840,20 +843,12 @@ export default function ShareCardModal({
     }
 
     const file = dataUrlToFile(png, "NoWhatever.png");
-
-    const shareData: ShareData = { files: [file] };
-    try {
-      if (navigator.canShare?.(shareData)) {
-        await navigator.share(shareData);
-        return;
-      }
-    } catch (e) {
-      if (e instanceof Error && e.name === "AbortError") return;
+    const shared = await nativeShare({ files: [file] });
+    if (!shared) {
+      downloadDataUrl(png, "NoWhatever.png");
+      toast.show("图片已保存，快去分享吧！");
     }
-
-    downloadDataUrl(png, "NoWhatever.png");
-    toast.show("图片已保存，快去分享吧！");
-  }, [handleGenerate, toast]);
+  }, [handleGenerate, toast, nativeShare]);
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === backdropRef.current) onClose();
diff --git a/src/hooks/useShare.ts b/src/hooks/useShare.ts
new file mode 100644
index 0000000..b95966e
--- /dev/null
+++ b/src/hooks/useShare.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback } from "react";
+import { useToast } from "@/hooks/useToast";
+
+export function useShare() {
+  const toast = useToast();
+
+  const copyToClipboard = useCallback(
+    async (text: string, successMsg = "已复制") => {
+      try {
+        await navigator.clipboard.writeText(text);
+        toast.show(successMsg);
+      } catch {
+        toast.show("复制失败，请手动复制");
+      }
+    },
+    [toast],
+  );
+
+  /** Try the native Web Share API; calls `fallback` if unavailable. Returns true if native share was triggered. */
+  const share = useCallback(
+    async (data: ShareData, fallback?: () => void): Promise<boolean> => {
+      try {
+        if (navigator.share && navigator.canShare?.(data)) {
+          await navigator.share(data);
+          return true;
+        }
+      } catch (e) {
+        if (e instanceof Error && e.name === "AbortError") return true;
+      }
+      fallback?.();
+      return false;
+    },
+    [],
+  );
+
+  return { share, copyToClipboard };
+}

From 9641acbcbda15fb75886a90534b7777841344bdd Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 19:31:00 +0800
Subject: [PATCH 37/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20buildNav?=
 =?UTF-8?q?Url=20=E5=B7=A5=E5=85=B7=E5=87=BD=E6=95=B0=EF=BC=8C=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=20room=20API=20=E9=94=99=E8=AF=AF=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 MatchResult.tsx 和 profile/page.tsx 中重复的导航 URL 构建逻辑提取到 src/lib/navigation.ts
- 7 个 room API 路由从 return NextResponse.json({ error }, { status }) 统一改为 throw ApiError，由 apiHandler 统一捕获
---
 src/app/api/room/[id]/join/route.ts   |  7 +------
 src/app/api/room/[id]/manage/route.ts |  7 +------
 src/app/api/room/[id]/reset/route.ts  |  9 ++-------
 src/app/api/room/[id]/route.ts        | 10 ++--------
 src/app/api/room/[id]/swipe/route.ts  |  7 +------
 src/app/api/room/[id]/undo/route.ts   |  7 +------
 src/app/api/room/create/route.ts      |  7 +------
 src/app/profile/page.tsx              |  7 ++-----
 src/components/MatchResult.tsx        |  9 +--------
 src/lib/navigation.ts                 |  9 +++++++++
 10 files changed, 21 insertions(+), 58 deletions(-)
 create mode 100644 src/lib/navigation.ts

diff --git a/src/app/api/room/[id]/join/route.ts b/src/app/api/room/[id]/join/route.ts
index 230357e..7f7c96b 100644
--- a/src/app/api/room/[id]/join/route.ts
+++ b/src/app/api/room/[id]/join/route.ts
@@ -22,12 +22,7 @@ export const POST = apiHandler(async (req, { params }) => {
     return data;
   });
 
-  if (!updated) {
-    return NextResponse.json(
-      { error: "房间不存在或已过期" },
-      { status: 404 },
-    );
-  }
+  if (!updated) throw new ApiError("房间不存在或已过期", 404);
 
   notify(id);
 
diff --git a/src/app/api/room/[id]/manage/route.ts b/src/app/api/room/[id]/manage/route.ts
index b2b76b3..a806676 100644
--- a/src/app/api/room/[id]/manage/route.ts
+++ b/src/app/api/room/[id]/manage/route.ts
@@ -59,12 +59,7 @@ export const POST = apiHandler(async (req, { params }) => {
     return data;
   });
 
-  if (!updated) {
-    return NextResponse.json(
-      { error: "房间不存在或已过期" },
-      { status: 404 },
-    );
-  }
+  if (!updated) throw new ApiError("房间不存在或已过期", 404);
 
   notify(id);
 
diff --git a/src/app/api/room/[id]/reset/route.ts b/src/app/api/room/[id]/reset/route.ts
index e02a9d2..1570906 100644
--- a/src/app/api/room/[id]/reset/route.ts
+++ b/src/app/api/room/[id]/reset/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
-import { apiHandler } from "@/lib/api";
+import { apiHandler, ApiError } from "@/lib/api";
 
 export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
@@ -27,12 +27,7 @@ export const POST = apiHandler(async (req, { params }) => {
     return data;
   });
 
-  if (!updated) {
-    return NextResponse.json(
-      { error: "房间不存在或已过期" },
-      { status: 404 },
-    );
-  }
+  if (!updated) throw new ApiError("房间不存在或已过期", 404);
 
   notify(id);
 
diff --git a/src/app/api/room/[id]/route.ts b/src/app/api/room/[id]/route.ts
index c7a309d..cda1d39 100644
--- a/src/app/api/room/[id]/route.ts
+++ b/src/app/api/room/[id]/route.ts
@@ -1,18 +1,12 @@
 import { NextResponse } from "next/server";
 import { buildRoomStatus } from "@/lib/buildRoomStatus";
-import { apiHandler } from "@/lib/api";
+import { apiHandler, ApiError } from "@/lib/api";
 
 export const GET = apiHandler(async (_req, { params }) => {
   const { id } = await params;
 
   const status = await buildRoomStatus(id);
-
-  if (!status) {
-    return NextResponse.json(
-      { error: "房间不存在或已过期" },
-      { status: 404 },
-    );
-  }
+  if (!status) throw new ApiError("房间不存在或已过期", 404);
 
   return NextResponse.json(status);
 });
diff --git a/src/app/api/room/[id]/swipe/route.ts b/src/app/api/room/[id]/swipe/route.ts
index 835368e..bc5325c 100644
--- a/src/app/api/room/[id]/swipe/route.ts
+++ b/src/app/api/room/[id]/swipe/route.ts
@@ -40,12 +40,7 @@ export const POST = apiHandler(async (req, { params }) => {
     return data;
   });
 
-  if (!updated) {
-    return NextResponse.json(
-      { error: "房间不存在或已过期" },
-      { status: 404 },
-    );
-  }
+  if (!updated) throw new ApiError("房间不存在或已过期", 404);
 
   notify(id);
 
diff --git a/src/app/api/room/[id]/undo/route.ts b/src/app/api/room/[id]/undo/route.ts
index f493849..92273a4 100644
--- a/src/app/api/room/[id]/undo/route.ts
+++ b/src/app/api/room/[id]/undo/route.ts
@@ -32,12 +32,7 @@ export const POST = apiHandler(async (req, { params }) => {
     return data;
   });
 
-  if (!updated) {
-    return NextResponse.json(
-      { error: "房间不存在或已过期" },
-      { status: 404 },
-    );
-  }
+  if (!updated) throw new ApiError("房间不存在或已过期", 404);
 
   notify(id);
 
diff --git a/src/app/api/room/create/route.ts b/src/app/api/room/create/route.ts
index 37d12f3..e0cfe35 100644
--- a/src/app/api/room/create/route.ts
+++ b/src/app/api/room/create/route.ts
@@ -150,12 +150,7 @@ export const POST = apiHandler(async (req) => {
     restaurants = results.slice(0, 15);
   }
 
-  if (restaurants.length === 0) {
-    return NextResponse.json(
-      { error: sceneConfig.emptyError },
-      { status: 404 },
-    );
-  }
+  if (restaurants.length === 0) throw new ApiError(sceneConfig.emptyError, 404);
 
   const roomId = await createRoom(restaurants, userId, sceneConfig.key);
   return NextResponse.json({ roomId, restaurants });
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index d8a0500..f9d0b7d 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -29,6 +29,7 @@ import RestaurantImage from "@/components/RestaurantImage";
 import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
 import { getAvatarBg, AVATARS } from "@/lib/avatars";
+import { buildNavUrl } from "@/lib/navigation";
 import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Restaurant } from "@/types";
 
 function firstImage(r: Restaurant): string {
@@ -279,10 +280,6 @@ export default function ProfilePage() {
 
   if (!profile) return null;
 
-  const amapNavUrl = (r: Restaurant) =>
-    r.location
-      ? `https://uri.amap.com/marker?position=${r.location}&name=${encodeURIComponent(r.name)}&callnative=1`
-      : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
 
   return (
     <div className="h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
@@ -567,7 +564,7 @@ export default function ProfilePage() {
                     {history.map((d) => (
                       <a
                         key={d.id}
-                        href={amapNavUrl(d.restaurantData)}
+                        href={buildNavUrl(d.restaurantData)}
                         target="_blank"
                         rel="noopener noreferrer"
                         className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index ba2e89c..90ec7d2 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -35,6 +35,7 @@ import ShareCardModal from "@/components/ShareCardModal";
 import RestaurantImage from "@/components/RestaurantImage";
 import AuthModal from "@/components/AuthModal";
 import Button from "@/components/Button";
+import { buildNavUrl } from "@/lib/navigation";
 import { useToast } from "@/hooks/useToast";
 
 interface MatchResultProps {
@@ -52,14 +53,6 @@ interface MatchResultProps {
   scene?: SceneType;
 }
 
-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)}`;
-}
-
 function NoMatchResult({
   onReset,
   resetting,
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
new file mode 100644
index 0000000..49f6871
--- /dev/null
+++ b/src/lib/navigation.ts
@@ -0,0 +1,9 @@
+import type { Restaurant } from "@/types";
+
+export 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)}`;
+}

From 0c5676493ee010a62008e46b391f828bad76e3b2 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 19:43:07 +0800
Subject: [PATCH 38/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20UserAvat?=
 =?UTF-8?q?ar=E3=80=81Input=E3=80=81Card=20=E4=B8=89=E4=B8=AA=E5=8F=AF?=
 =?UTF-8?q?=E5=A4=8D=E7=94=A8=20UI=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- UserAvatar: 统一头像渲染（5 种尺寸），新增 resolveAvatar 工具函数，替换 SwipeDeck 和 RoomManageModal 中的重复逻辑
- Input: 统一表单输入样式（4 种尺寸 + default/purple 变体），替换 AuthModal、ProfilePage、BlindboxPage 共 12 处
- Card: 统一卡片容器样式 + 可选淡入动画和延迟，替换 ProfilePage 中 7 处重复的 motion.div
---
 src/app/blindbox/page.tsx          | 25 ++++++----
 src/app/profile/page.tsx           | 75 +++++++++++-------------------
 src/components/AuthModal.tsx       | 16 ++++---
 src/components/Card.tsx            | 37 +++++++++++++++
 src/components/Input.tsx           | 31 ++++++++++++
 src/components/RoomManageModal.tsx | 13 ++----
 src/components/SwipeDeck.tsx       | 41 +++++-----------
 src/components/UserAvatar.tsx      | 34 ++++++++++++++
 src/lib/avatars.ts                 | 11 +++++
 9 files changed, 182 insertions(+), 101 deletions(-)
 create mode 100644 src/components/Card.tsx
 create mode 100644 src/components/Input.tsx
 create mode 100644 src/components/UserAvatar.tsx

diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 8353535..82f786d 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -15,6 +15,7 @@ import {
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import AuthModal from "@/components/AuthModal";
 import Button from "@/components/Button";
+import Input from "@/components/Input";
 import { BlindboxListSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
 
@@ -244,7 +245,7 @@ export default function BlindboxLobbyPage() {
             {/* Inline create form */}
             <div className="mt-7 w-full max-w-xs">
               <div className="flex gap-2">
-                <input
+                <Input
                   type="text"
                   placeholder="我们的周末"
                   value={createName}
@@ -254,7 +255,9 @@ export default function BlindboxLobbyPage() {
                   }}
                   onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); }}
                   maxLength={30}
-                  className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+                  size="xl"
+                  variant="purple"
+                  className="flex-1"
                 />
                 <Button
                   onClick={handleCreate}
@@ -275,7 +278,7 @@ export default function BlindboxLobbyPage() {
               </div>
 
               <div className="mt-3 flex gap-2">
-                <input
+                <Input
                   type="text"
                   placeholder="6 位房间号"
                   value={joinCode}
@@ -285,7 +288,9 @@ export default function BlindboxLobbyPage() {
                   }}
                   onKeyDown={(e) => { if (e.key === "Enter") handleJoin(); }}
                   maxLength={6}
-                  className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+                  size="xl"
+                  variant="purple"
+                  className="flex-1 text-center font-mono tracking-[0.15em]"
                 />
                 <Button
                   onClick={handleJoin}
@@ -321,7 +326,7 @@ export default function BlindboxLobbyPage() {
           >
             {/* Create row */}
             <div className="flex gap-2">
-              <input
+              <Input
                 type="text"
                 placeholder="新房间名称"
                 value={createName}
@@ -331,7 +336,9 @@ export default function BlindboxLobbyPage() {
                 }}
                 onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); }}
                 maxLength={30}
-                className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+                size="lg"
+                variant="purple"
+                className="flex-1"
               />
               <Button
                 onClick={handleCreate}
@@ -345,7 +352,7 @@ export default function BlindboxLobbyPage() {
 
             {/* Join row */}
             <div className="mt-2 flex gap-2">
-              <input
+              <Input
                 type="text"
                 placeholder="输入 6 位房间号加入"
                 value={joinCode}
@@ -355,7 +362,9 @@ export default function BlindboxLobbyPage() {
                 }}
                 onKeyDown={(e) => { if (e.key === "Enter") handleJoin(); }}
                 maxLength={6}
-                className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:font-sans placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-purple-600"
+                size="lg"
+                variant="purple"
+                className="flex-1 text-center font-mono tracking-[0.15em] placeholder:font-sans placeholder:tracking-normal"
               />
               <Button
                 onClick={handleJoin}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index f9d0b7d..1ce8109 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -24,6 +24,8 @@ import {
   Heart,
 } from "lucide-react";
 import EmptyState from "@/components/EmptyState";
+import Card from "@/components/Card";
+import Input from "@/components/Input";
 import { useToast } from "@/hooks/useToast";
 import RestaurantImage from "@/components/RestaurantImage";
 import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
@@ -261,18 +263,18 @@ export default function ProfilePage() {
         </nav>
         <div className="mx-auto max-w-sm px-5">
           <ProfileCardSkeleton />
-          <div className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border">
+          <Card className="mt-4">
             <div className="flex flex-col gap-2">
               <RecordItemSkeleton />
               <RecordItemSkeleton />
             </div>
-          </div>
-          <div className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border">
+          </Card>
+          <Card className="mt-4">
             <div className="flex flex-col gap-2">
               <RecordItemSkeleton />
               <RecordItemSkeleton />
             </div>
-          </div>
+          </Card>
         </div>
       </div>
     );
@@ -295,11 +297,7 @@ export default function ProfilePage() {
 
       <div className="mx-auto max-w-sm px-5">
         {/* Profile card */}
-        <motion.div
-          className="rounded-2xl bg-surface p-4 ring-1 ring-border"
-          initial={{ y: 10, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-        >
+        <Card animated>
           <div className="flex items-center gap-4">
             <button
               onClick={() => setEditingAvatar(!editingAvatar)}
@@ -313,7 +311,7 @@ export default function ProfilePage() {
             <div className="flex-1">
               {editingUsername ? (
                 <div className="flex items-center gap-2">
-                  <input
+                  <Input
                     type="text"
                     value={newUsername}
                     onChange={(e) => {
@@ -322,7 +320,8 @@ export default function ProfilePage() {
                     }}
                     maxLength={16}
                     autoFocus
-                    className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
+                    size="sm"
+                    className="flex-1"
                   />
                   <button
                     onClick={handleSaveUsername}
@@ -387,15 +386,10 @@ export default function ProfilePage() {
               </motion.div>
             )}
           </AnimatePresence>
-        </motion.div>
+        </Card>
 
         {/* Change password */}
-        <motion.div
-          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
-          initial={{ y: 10, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 0.05 }}
-        >
+        <Card animated className="mt-4" delay={0.05}>
           <button
             onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }}
             className="flex w-full items-center gap-2"
@@ -417,11 +411,11 @@ export default function ProfilePage() {
                   <div>
                     <p className="text-xs text-muted">当前密码</p>
                     <div className="relative mt-1">
-                      <input
+                      <Input
                         type={showPassword ? "text" : "password"}
                         value={currentPassword}
                         onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
-                        className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-heading outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
+                        className="pr-9"
                       />
                       <button
                         type="button"
@@ -434,22 +428,22 @@ export default function ProfilePage() {
                   </div>
                   <div>
                     <p className="text-xs text-muted">新密码</p>
-                    <input
+                    <Input
                       type={showPassword ? "text" : "password"}
                       value={newPassword}
                       onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="至少 6 个字符"
-                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                      className="mt-1"
                     />
                   </div>
                   <div>
                     <p className="text-xs text-muted">确认新密码</p>
-                    <input
+                    <Input
                       type={showPassword ? "text" : "password"}
                       value={confirmPassword}
                       onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="再次输入新密码"
-                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+                      className="mt-1"
                     />
                   </div>
 
@@ -470,22 +464,17 @@ export default function ProfilePage() {
               </motion.div>
             )}
           </AnimatePresence>
-        </motion.div>
+        </Card>
 
         {/* Email binding */}
-        <motion.div
-          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
-          initial={{ y: 10, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 0.1 }}
-        >
+        <Card animated className="mt-4" delay={0.1}>
           <div className="flex items-center gap-2">
             <Mail size={15} className="text-muted" />
             <h3 className="text-sm font-semibold text-secondary">绑定邮箱</h3>
             <span className="text-[10px] text-dim">（可选）</span>
           </div>
           <div className="mt-3 flex gap-2">
-            <input
+            <Input
               type="email"
               placeholder="your@email.com"
               value={email}
@@ -493,7 +482,7 @@ export default function ProfilePage() {
                 setEmail(e.target.value);
                 setEmailMsg("");
               }}
-              className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-heading outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+              className="flex-1"
             />
             <button
               onClick={handleSaveEmail}
@@ -508,15 +497,10 @@ export default function ProfilePage() {
               {emailMsg}
             </p>
           )}
-        </motion.div>
+        </Card>
 
         {/* Decision History */}
-        <motion.div
-          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
-          initial={{ y: 10, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 0.15 }}
-        >
+        <Card animated className="mt-4" delay={0.15}>
           <button
             onClick={() => setShowHistory((v) => !v)}
             className="flex w-full items-center justify-between"
@@ -591,15 +575,10 @@ export default function ProfilePage() {
               </motion.div>
             )}
           </AnimatePresence>
-        </motion.div>
+        </Card>
 
         {/* Favorites */}
-        <motion.div
-          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
-          initial={{ y: 10, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 0.2 }}
-        >
+        <Card animated className="mt-4" delay={0.2}>
           <button
             onClick={() => setShowFavorites((v) => !v)}
             className="flex w-full items-center justify-between"
@@ -688,7 +667,7 @@ export default function ProfilePage() {
               </motion.div>
             )}
           </AnimatePresence>
-        </motion.div>
+        </Card>
 
         {/* Logout */}
         <motion.div
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index e24c397..34a5ee8 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -8,6 +8,7 @@ import { setCachedProfile } from "@/lib/userId";
 import type { UserProfile } from "@/types";
 import Modal from "@/components/Modal";
 import Button from "@/components/Button";
+import Input from "@/components/Input";
 
 type Tab = "login" | "register";
 
@@ -147,7 +148,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
 
       <div className="mt-5">
         <p className="text-xs font-medium text-muted">用户名</p>
-        <input
+        <Input
           type="text"
           value={username}
           onChange={(e) => {
@@ -156,14 +157,15 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
           }}
           placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
           maxLength={16}
-          className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+          size="xl"
+          className="mt-2"
         />
       </div>
 
       <div className="mt-4">
         <p className="text-xs font-medium text-muted">密码</p>
         <div className="relative mt-2">
-          <input
+          <Input
             type={showPassword ? "text" : "password"}
             value={password}
             onChange={(e) => {
@@ -171,7 +173,8 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
               setError("");
             }}
             placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
-            className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+            size="xl"
+            className="pr-10"
           />
           <button
             type="button"
@@ -186,7 +189,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
       {tab === "register" && (
         <div className="mt-4">
           <p className="text-xs font-medium text-muted">确认密码</p>
-          <input
+          <Input
             type={showPassword ? "text" : "password"}
             value={confirmPassword}
             onChange={(e) => {
@@ -194,7 +197,8 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
               setError("");
             }}
             placeholder="再次输入密码"
-            className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-heading outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
+            size="xl"
+            className="mt-2"
           />
         </div>
       )}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..67695f4
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,37 @@
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  animated?: boolean;
+  delay?: number;
+}
+
+const fadeUp = {
+  initial: { y: 10, opacity: 0 },
+  animate: { y: 0, opacity: 1 },
+} as const;
+
+export default function Card({
+  children,
+  className = "",
+  animated = false,
+  delay,
+}: CardProps) {
+  const cls = `rounded-2xl bg-surface p-4 ring-1 ring-border ${className}`;
+
+  if (animated) {
+    return (
+      <motion.div
+        className={cls}
+        {...fadeUp}
+        transition={delay ? { delay } : undefined}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+
+  return <div className={cls}>{children}</div>;
+}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..585cbb5
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,31 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+const sizeStyles = {
+  sm: "h-8 rounded-lg px-2",
+  md: "h-9 rounded-lg px-3",
+  lg: "h-10 rounded-xl px-3",
+  xl: "h-11 rounded-xl px-4",
+} as const;
+
+const variantStyles = {
+  default: "bg-elevated text-heading focus:ring-accent/50",
+  purple: "bg-surface text-foreground focus:ring-purple-600",
+} as const;
+
+interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+  size?: keyof typeof sizeStyles;
+  variant?: keyof typeof variantStyles;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ size = "md", variant = "default", className = "", ...rest }, ref) => (
+    <input
+      ref={ref}
+      className={`w-full border-none text-sm outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 ${sizeStyles[size]} ${variantStyles[variant]} ${className}`}
+      {...rest}
+    />
+  ),
+);
+
+Input.displayName = "Input";
+export default Input;
diff --git a/src/components/RoomManageModal.tsx b/src/components/RoomManageModal.tsx
index 81efe0a..4ac5de6 100644
--- a/src/components/RoomManageModal.tsx
+++ b/src/components/RoomManageModal.tsx
@@ -11,7 +11,7 @@ import {
   Loader2,
 } from "lucide-react";
 import { UserProfile } from "@/types";
-import { getAvatar, getAvatarBg } from "@/lib/avatars";
+import UserAvatar from "@/components/UserAvatar";
 import Modal from "@/components/Modal";
 import { useToast } from "@/hooks/useToast";
 
@@ -129,10 +129,7 @@ export default function RoomManageModal({
         </h3>
         <div className="mt-2 flex flex-col gap-1.5">
           {users.map((uid) => {
-            const profile = userProfiles[uid];
-            const emoji = profile?.avatar ?? getAvatar(uid).emoji;
-            const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(uid).bg;
-            const displayName = profile?.username ?? uid.slice(0, 8);
+            const displayName = userProfiles[uid]?.username ?? uid.slice(0, 8);
             const isCreator = uid === userId;
             const swiped = swipeCounts[uid] ?? 0;
             const finished = swiped >= totalCards;
@@ -142,11 +139,7 @@ export default function RoomManageModal({
                 key={uid}
                 className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
               >
-                <span
-                  className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
-                >
-                  {emoji}
-                </span>
+                <UserAvatar userId={uid} profile={userProfiles[uid]} />
                 <div className="flex min-w-0 flex-1 flex-col">
                   <div className="flex items-center gap-1.5">
                     {isCreator && (
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index 54b6779..28d1a83 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -8,7 +8,7 @@ import MatchResult from "./MatchResult";
 import SwipeGuide from "./SwipeGuide";
 import { Restaurant, SwipeDirection, MatchType, RunnerUp, UserProfile, SceneType } from "@/types";
 import { Heart, Undo2, Check } from "lucide-react";
-import { getAvatar, getAvatarBg } from "@/lib/avatars";
+import UserAvatar from "@/components/UserAvatar";
 
 function UserProgressBar({
   userId,
@@ -27,17 +27,11 @@ function UserProgressBar({
 }) {
   const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
 
-  const myProfile = userProfiles[userId];
-  const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
-  const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
-
   return (
     <div className="flex items-center gap-x-3">
       <div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
         <span className="flex items-center gap-1.5 text-[11px] text-accent">
-          <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
-            {myAvatar}
-          </span>
+          <UserAvatar userId={userId} profile={userProfiles[userId]} size="xs" />
           你
           <span className="rounded bg-accent/10 px-1 py-px tabular-nums font-medium">
             {localIndex}/{total}
@@ -45,18 +39,13 @@ function UserProgressBar({
         </span>
         {others.map(([id, count]) => {
           const finished = count >= total;
-          const profile = userProfiles[id];
-          const emoji = profile?.avatar ?? getAvatar(id).emoji;
-          const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
-          const label = profile?.username ?? "";
+          const label = userProfiles[id]?.username ?? "";
           return (
             <span
               key={id}
               className={`flex items-center gap-1.5 text-[11px] ${finished ? "text-emerald-400" : "text-muted"}`}
             >
-              <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
-                {emoji}
-              </span>
+              <UserAvatar userId={id} profile={userProfiles[id]} size="xs" />
               {label && <span className="max-w-12 truncate">{label}</span>}
               <span className={`rounded px-1 py-px tabular-nums font-medium ${finished ? "bg-emerald-500/10" : "bg-elevated"}`}>
                 {count}/{total}
@@ -95,17 +84,11 @@ function WaitingProgress({
   const others = entries.filter(([id]) => id !== userId);
   const finishedCount = others.filter(([, c]) => c >= total).length;
 
-  const myProfile = userProfiles[userId];
-  const myEmoji = myProfile?.avatar ?? getAvatar(userId).emoji;
-  const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
-
   return (
     <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-surface px-4 py-3 ring-1 ring-border">
       <div className="flex items-center justify-between">
         <span className="flex items-center gap-1.5 text-xs font-medium text-accent">
-          <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
-            {myEmoji}
-          </span>
+          <UserAvatar userId={userId} profile={userProfiles[userId]} size="sm" />
           你 {total}/{total}
         </span>
         <Check size={14} className="text-emerald-400" />
@@ -114,17 +97,17 @@ function WaitingProgress({
       {others.map(([id, count]) => {
         const finished = count >= total;
         const pct = Math.min((count / total) * 100, 100);
-        const profile = userProfiles[id];
-        const emoji = profile?.avatar ?? getAvatar(id).emoji;
-        const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
-        const label = profile?.username ?? "";
+        const label = userProfiles[id]?.username ?? "";
         return (
           <div key={id} className="flex flex-col gap-1">
             <div className="flex items-center justify-between">
               <span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-accent" : "text-muted"}`}>
-                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-500/20" : bg}`}>
-                  {emoji}
-                </span>
+                <UserAvatar
+                  userId={id}
+                  profile={userProfiles[id]}
+                  size="sm"
+                  bg={finished ? "bg-emerald-500/20" : undefined}
+                />
                 {label && <span className="max-w-12 truncate">{label}</span>}
                 {count}/{total}
               </span>
diff --git a/src/components/UserAvatar.tsx b/src/components/UserAvatar.tsx
new file mode 100644
index 0000000..75be9dc
--- /dev/null
+++ b/src/components/UserAvatar.tsx
@@ -0,0 +1,34 @@
+import { resolveAvatar } from "@/lib/avatars";
+
+const sizeStyles = {
+  xs: "h-4 w-4 text-[10px]",
+  sm: "h-5 w-5 text-sm",
+  md: "h-8 w-8 text-base",
+  lg: "h-11 w-11 text-xl",
+  xl: "h-14 w-14 text-2xl",
+} as const;
+
+interface UserAvatarProps {
+  userId: string;
+  profile?: { avatar: string } | null;
+  size?: keyof typeof sizeStyles;
+  bg?: string;
+  className?: string;
+}
+
+export default function UserAvatar({
+  userId,
+  profile,
+  size = "md",
+  bg,
+  className = "",
+}: UserAvatarProps) {
+  const avatar = resolveAvatar(userId, profile);
+  return (
+    <span
+      className={`inline-flex items-center justify-center rounded-full leading-none ${sizeStyles[size]} ${bg ?? avatar.bg} ${className}`}
+    >
+      {avatar.emoji}
+    </span>
+  );
+}
diff --git a/src/lib/avatars.ts b/src/lib/avatars.ts
index c139e5e..88f3cef 100644
--- a/src/lib/avatars.ts
+++ b/src/lib/avatars.ts
@@ -25,3 +25,14 @@ export function getAvatarBg(emoji: string): string {
   const found = AVATARS.find((a) => a.emoji === emoji);
   return found?.bg ?? "bg-zinc-100";
 }
+
+export function resolveAvatar(
+  userId: string,
+  profile?: { avatar: string } | null,
+): { emoji: string; bg: string } {
+  if (profile) {
+    return { emoji: profile.avatar, bg: getAvatarBg(profile.avatar) };
+  }
+  const fallback = getAvatar(userId);
+  return { emoji: fallback.emoji, bg: fallback.bg };
+}

From 07541ed68605df2a4af54553e15679e99aa87180 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 19:49:05 +0800
Subject: [PATCH 39/66] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20useGeolo?=
 =?UTF-8?q?cation=20hook=20=E5=92=8C=20joinRoom=20=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useGeolocation: 将 PanicPage 中 ~50 行 GPS 定位逻辑（requestGps + reverseGeocode + 状态管理）提取为独立 hook
- joinRoom: 统一 3 处重复的 POST /api/room/:id/join 调用（room、invite、panic 页面）
---
 src/app/invite/[id]/page.tsx |  8 +--
 src/app/panic/page.tsx       | 99 ++++++------------------------------
 src/app/room/[id]/page.tsx   | 12 ++---
 src/hooks/useGeolocation.ts  | 70 +++++++++++++++++++++++++
 src/lib/room.ts              | 11 ++++
 5 files changed, 102 insertions(+), 98 deletions(-)
 create mode 100644 src/hooks/useGeolocation.ts
 create mode 100644 src/lib/room.ts

diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 163f275..817475a 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -12,6 +12,7 @@ import {
   Coffee,
 } from "lucide-react";
 import { getUserId } from "@/lib/userId";
+import { joinRoom } from "@/lib/room";
 import { Skeleton, SkeletonCircle } from "@/components/Skeleton";
 import Button from "@/components/Button";
 import { getSceneConfig } from "@/lib/sceneConfig";
@@ -48,12 +49,7 @@ export default function InvitePage() {
   const handleJoin = async () => {
     setJoining(true);
     try {
-      const userId = getUserId();
-      await fetch(`/api/room/${roomId}/join`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ userId }),
-      });
+      await joinRoom(roomId, getUserId());
       router.push(`/room/${roomId}`);
     } catch {
       setJoining(false);
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index b6b6e8c..67b056f 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -6,6 +6,8 @@ import { motion, AnimatePresence } from "framer-motion";
 import { Plus, LogIn, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame, ArrowLeft } from "lucide-react";
 import { getUserId, getCachedPreferences } from "@/lib/userId";
 import { SCENES, getSceneConfig } from "@/lib/sceneConfig";
+import { useGeolocation } from "@/hooks/useGeolocation";
+import { joinRoom } from "@/lib/room";
 import type { SceneType } from "@/types";
 
 interface LocationSuggestion {
@@ -17,52 +19,12 @@ interface LocationSuggestion {
   lng: number;
 }
 
-type GpsStatus = "idle" | "locating" | "success" | "failed" | "denied";
-
 const DISTANCE_OPTIONS = [
   { label: "1km", value: 1000 },
   { label: "3km", value: 3000 },
   { label: "5km", value: 5000 },
 ] as const;
 
-type GpsResult =
-  | { ok: true; lat: number; lng: number }
-  | { ok: false; reason: "unsupported" | "denied" | "timeout" | "unknown" };
-
-function requestGps(): Promise<GpsResult> {
-  return new Promise((resolve) => {
-    if (!navigator.geolocation) {
-      resolve({ ok: false, reason: "unsupported" });
-      return;
-    }
-
-    navigator.geolocation.getCurrentPosition(
-      (pos) =>
-        resolve({ ok: true, lat: pos.coords.latitude, lng: pos.coords.longitude }),
-      (err) => {
-        const reason =
-          err.code === err.PERMISSION_DENIED
-            ? "denied"
-            : err.code === err.TIMEOUT
-              ? "timeout"
-              : "unknown";
-        resolve({ ok: false, reason });
-      },
-      { timeout: 8000, enableHighAccuracy: false },
-    );
-  });
-}
-
-async function reverseGeocode(lat: number, lng: number): Promise<string | null> {
-  try {
-    const res = await fetch(`/api/location/regeo?lat=${lat}&lng=${lng}`);
-    const data = await res.json();
-    return data.name || data.formatted || null;
-  } catch {
-    return null;
-  }
-}
-
 export default function PanicPage() {
   const router = useRouter();
   const [roomCode, setRoomCode] = useState("");
@@ -81,9 +43,7 @@ export default function PanicPage() {
   const suggestRef = useRef<HTMLDivElement>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
 
-  const [gpsStatus, setGpsStatus] = useState<GpsStatus>("idle");
-  const [gpsCoords, setGpsCoords] = useState<{ lat: number; lng: number } | null>(null);
-  const [gpsLocationName, setGpsLocationName] = useState<string | null>(null);
+  const geo = useGeolocation();
 
   const [scene, setScene] = useState<SceneType>("eat");
   const sceneConfig = getSceneConfig(scene);
@@ -101,25 +61,6 @@ export default function PanicPage() {
     setPriceRange("any");
   }, []);
 
-  const doGpsLocate = useCallback(async () => {
-    setGpsStatus("locating");
-    const result = await requestGps();
-    if (result.ok) {
-      setGpsCoords({ lat: result.lat, lng: result.lng });
-      setGpsStatus("success");
-      const name = await reverseGeocode(result.lat, result.lng);
-      if (name) setGpsLocationName(name);
-    } else {
-      setGpsCoords(null);
-      setGpsLocationName(null);
-      setGpsStatus(result.reason === "denied" ? "denied" : "failed");
-    }
-  }, []);
-
-  useEffect(() => {
-    doGpsLocate();
-  }, [doGpsLocate]);
-
   const fetchSuggestions = useCallback(async (query: string) => {
     if (query.length < 1) {
       setSuggestions([]);
@@ -170,16 +111,6 @@ export default function PanicPage() {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  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 () => {
     setError("");
@@ -188,9 +119,9 @@ export default function PanicPage() {
 
     if (selectedLocation) {
       coords = { lat: selectedLocation.lat, lng: selectedLocation.lng };
-    } else if (gpsCoords) {
-      coords = gpsCoords;
-    } else if (gpsStatus === "locating") {
+    } else if (geo.coords) {
+      coords = geo.coords;
+    } else if (geo.status === "locating") {
       setError("正在定位中，请稍候...");
       return;
     } else {
@@ -220,7 +151,7 @@ export default function PanicPage() {
       }
 
       setLoadingText("正在进入房间...");
-      await joinRoom(data.roomId);
+      await joinRoom(data.roomId, getUserId());
       router.push(`/room/${data.roomId}`);
     } catch (e) {
       setError(e instanceof Error ? e.message : "创建失败，请重试");
@@ -238,7 +169,7 @@ export default function PanicPage() {
     setLoading(true);
     setError("");
     try {
-      await joinRoom(roomCode);
+      await joinRoom(roomCode, getUserId());
       router.push(`/room/${roomCode}`);
     } catch {
       setError("房间不存在，请检查房间号");
@@ -384,32 +315,32 @@ export default function PanicPage() {
             </div>
           )}
 
-          {!selectedLocation && !locationQuery && gpsStatus === "locating" && (
+          {!selectedLocation && !locationQuery && geo.status === "locating" && (
             <div className="mt-1.5 flex items-center gap-1.5 px-1">
               <Loader2 size={12} className="shrink-0 animate-spin text-orange-400" />
               <span className="text-xs text-muted">正在获取当前位置...</span>
             </div>
           )}
 
-          {!selectedLocation && !locationQuery && gpsStatus === "success" && (
+          {!selectedLocation && !locationQuery && geo.status === "success" && (
             <div className="mt-1.5 flex items-center gap-1.5 px-1">
               <Navigation size={12} className="shrink-0 text-orange-400" />
               <span className="truncate text-xs text-orange-300/80">
-                当前位置：{gpsLocationName || "已定位"}
+                当前位置：{geo.locationName || "已定位"}
               </span>
             </div>
           )}
 
-          {!selectedLocation && !locationQuery && (gpsStatus === "failed" || gpsStatus === "denied") && (
+          {!selectedLocation && !locationQuery && (geo.status === "failed" || geo.status === "denied") && (
             <div className="mt-1.5 flex items-center justify-between px-1">
               <div className="flex items-center gap-1.5">
                 <MapPin size={12} className="shrink-0 text-amber-500" />
                 <span className="text-xs text-amber-400/80">
-                  {gpsStatus === "denied" ? "定位权限被拒绝" : "定位失败"}，请搜索选择位置
+                  {geo.status === "denied" ? "定位权限被拒绝" : "定位失败"}，请搜索选择位置
                 </span>
               </div>
               <button
-                onClick={doGpsLocate}
+                onClick={geo.retry}
                 className="shrink-0 text-xs font-medium text-orange-400 active:text-orange-300"
               >
                 重试
@@ -417,7 +348,7 @@ export default function PanicPage() {
             </div>
           )}
 
-          {!selectedLocation && !locationQuery && gpsStatus === "idle" && (
+          {!selectedLocation && !locationQuery && geo.status === "idle" && (
             <div className="mt-1.5 flex items-center gap-1.5 px-1">
               <Navigation size={12} className="shrink-0 text-dim" />
               <span className="text-xs text-dim">将使用当前定位</span>
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 5b095c1..f2e9f69 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -9,6 +9,7 @@ import LeaveConfirmModal from "@/components/LeaveConfirmModal";
 import Button from "@/components/Button";
 import { useRoomPolling } from "@/hooks/useRoomPolling";
 import { getUserId } from "@/lib/userId";
+import { joinRoom } from "@/lib/room";
 import { getSceneConfig } from "@/lib/sceneConfig";
 
 export default function RoomPage() {
@@ -31,14 +32,9 @@ export default function RoomPage() {
     const id = getUserId();
     setUserId(id);
 
-    fetch(`/api/room/${roomId}/join`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId: id }),
-    }).then((res) => {
-      if (res.ok) setJoined(true);
-      else setJoinFailed(true);
-    }).catch(() => setJoinFailed(true));
+    joinRoom(roomId, id)
+      .then(() => setJoined(true))
+      .catch(() => setJoinFailed(true));
   }, [roomId]);
 
   useEffect(() => {
diff --git a/src/hooks/useGeolocation.ts b/src/hooks/useGeolocation.ts
new file mode 100644
index 0000000..2f154ca
--- /dev/null
+++ b/src/hooks/useGeolocation.ts
@@ -0,0 +1,70 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+export type GpsStatus = "idle" | "locating" | "success" | "failed" | "denied";
+
+type GpsResult =
+  | { ok: true; lat: number; lng: number }
+  | { ok: false; reason: "unsupported" | "denied" | "timeout" | "unknown" };
+
+function requestGps(): Promise<GpsResult> {
+  return new Promise((resolve) => {
+    if (!navigator.geolocation) {
+      resolve({ ok: false, reason: "unsupported" });
+      return;
+    }
+
+    navigator.geolocation.getCurrentPosition(
+      (pos) =>
+        resolve({ ok: true, lat: pos.coords.latitude, lng: pos.coords.longitude }),
+      (err) => {
+        const reason =
+          err.code === err.PERMISSION_DENIED
+            ? "denied"
+            : err.code === err.TIMEOUT
+              ? "timeout"
+              : "unknown";
+        resolve({ ok: false, reason });
+      },
+      { timeout: 8000, enableHighAccuracy: false },
+    );
+  });
+}
+
+async function reverseGeocode(lat: number, lng: number): Promise<string | null> {
+  try {
+    const res = await fetch(`/api/location/regeo?lat=${lat}&lng=${lng}`);
+    const data = await res.json();
+    return data.name || data.formatted || null;
+  } catch {
+    return null;
+  }
+}
+
+export function useGeolocation() {
+  const [status, setStatus] = useState<GpsStatus>("idle");
+  const [coords, setCoords] = useState<{ lat: number; lng: number } | null>(null);
+  const [locationName, setLocationName] = useState<string | null>(null);
+
+  const locate = useCallback(async () => {
+    setStatus("locating");
+    const result = await requestGps();
+    if (result.ok) {
+      setCoords({ lat: result.lat, lng: result.lng });
+      setStatus("success");
+      const name = await reverseGeocode(result.lat, result.lng);
+      if (name) setLocationName(name);
+    } else {
+      setCoords(null);
+      setLocationName(null);
+      setStatus(result.reason === "denied" ? "denied" : "failed");
+    }
+  }, []);
+
+  useEffect(() => {
+    locate();
+  }, [locate]);
+
+  return { status, coords, locationName, retry: locate };
+}
diff --git a/src/lib/room.ts b/src/lib/room.ts
new file mode 100644
index 0000000..cf617a2
--- /dev/null
+++ b/src/lib/room.ts
@@ -0,0 +1,11 @@
+export async function joinRoom(roomId: string, userId: string): Promise<void> {
+  const res = await fetch(`/api/room/${roomId}/join`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ userId }),
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || "加入房间失败");
+  }
+}

From 423b94440d92891870c8c34e936fc624903f517a Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 19:54:12 +0800
Subject: [PATCH 40/66] =?UTF-8?q?refactor:=20=E6=8B=86=E5=88=86=20ShareCar?=
 =?UTF-8?q?dModal=EF=BC=88951=20=E8=A1=8C=20=E2=86=92=204=20=E4=B8=AA?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ShareCardModal.tsx (199 行): 模态框编排逻辑（图片生成、保存、分享）
- RestaurantShareCard.tsx: 餐厅分享卡片纯展示组件
- BlindboxShareCard.tsx: 盲盒分享卡片纯展示组件
- shareImage.ts: 图片工具函数（toPng 封装、dataUrl 转换、下载）
---
 src/components/BlindboxShareCard.tsx   | 323 +++++++++++
 src/components/RestaurantShareCard.tsx | 387 +++++++++++++
 src/components/ShareCardModal.tsx      | 774 +------------------------
 src/lib/shareImage.ts                  |  52 ++
 4 files changed, 776 insertions(+), 760 deletions(-)
 create mode 100644 src/components/BlindboxShareCard.tsx
 create mode 100644 src/components/RestaurantShareCard.tsx
 create mode 100644 src/lib/shareImage.ts

diff --git a/src/components/BlindboxShareCard.tsx b/src/components/BlindboxShareCard.tsx
new file mode 100644
index 0000000..7389f53
--- /dev/null
+++ b/src/components/BlindboxShareCard.tsx
@@ -0,0 +1,323 @@
+import { QRCodeSVG } from "qrcode.react";
+
+export interface BlindboxShareData {
+  type: "blindbox";
+  idea: string;
+  submitter?: { avatar: string; username: string };
+  drawer?: { avatar: string; username: string };
+  roomName: string;
+}
+
+export default function BlindboxShareCard({
+  data,
+  cardRef,
+}: {
+  data: BlindboxShareData;
+  cardRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const { idea, submitter, drawer, roomName } = data;
+  const shareUrl =
+    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
+
+  return (
+    <div
+      ref={cardRef}
+      style={{
+        width: 340,
+        padding: 1.5,
+        borderRadius: 20,
+        background: "linear-gradient(160deg, #7c3aed, #6366f140, #7c3aed30)",
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 18.5,
+          background: "#0a0810",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Decorative glows */}
+        <div
+          style={{
+            position: "absolute",
+            top: -30,
+            right: -20,
+            width: 140,
+            height: 140,
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(124,58,237,0.2), transparent 70%)",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: 80,
+            left: -30,
+            width: 120,
+            height: 120,
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%)",
+          }}
+        />
+
+        {/* Brand header */}
+        <div
+          style={{
+            padding: "14px 20px 12px",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            position: "relative",
+          }}
+        >
+          <span style={{ fontSize: 18 }}>🎁</span>
+          <div>
+            <div
+              style={{
+                fontSize: 13,
+                fontWeight: 800,
+                color: "#ffffff",
+                letterSpacing: "0.02em",
+              }}
+            >
+              NoWhatever
+            </div>
+            <div
+              style={{
+                fontSize: 9,
+                fontWeight: 600,
+                color: "rgba(255,255,255,0.3)",
+                letterSpacing: "0.15em",
+                marginTop: 1,
+              }}
+            >
+              别说随便 · ADVENTURE ROULETTE
+            </div>
+          </div>
+        </div>
+
+        {/* Thin accent line */}
+        <div
+          style={{
+            height: 1,
+            margin: "0 20px",
+            background: "linear-gradient(to right, transparent, rgba(167,139,250,0.25), transparent)",
+          }}
+        />
+
+        {/* Room name badge */}
+        <div
+          style={{
+            textAlign: "center",
+            padding: "20px 20px 8px",
+            position: "relative",
+          }}
+        >
+          <div
+            style={{
+              fontSize: 10,
+              fontWeight: 700,
+              letterSpacing: "0.25em",
+              color: "rgba(167,139,250,0.5)",
+            }}
+          >
+            ✦ {roomName} ✦
+          </div>
+        </div>
+
+        {/* Idea card */}
+        <div style={{ padding: "0 16px 20px" }}>
+          <div
+            style={{
+              borderRadius: 14,
+              background: "rgba(255,255,255,0.04)",
+              border: "1px solid rgba(167,139,250,0.1)",
+              padding: "28px 24px",
+              position: "relative",
+            }}
+          >
+            {/* Corner decorations */}
+            <div
+              style={{
+                position: "absolute",
+                top: 10,
+                left: 10,
+                width: 14,
+                height: 14,
+                borderLeft: "2px solid rgba(167,139,250,0.25)",
+                borderTop: "2px solid rgba(167,139,250,0.25)",
+                borderTopLeftRadius: 3,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                top: 10,
+                right: 10,
+                width: 14,
+                height: 14,
+                borderRight: "2px solid rgba(167,139,250,0.25)",
+                borderTop: "2px solid rgba(167,139,250,0.25)",
+                borderTopRightRadius: 3,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                bottom: 10,
+                left: 10,
+                width: 14,
+                height: 14,
+                borderLeft: "2px solid rgba(167,139,250,0.25)",
+                borderBottom: "2px solid rgba(167,139,250,0.25)",
+                borderBottomLeftRadius: 3,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                bottom: 10,
+                right: 10,
+                width: 14,
+                height: 14,
+                borderRight: "2px solid rgba(167,139,250,0.25)",
+                borderBottom: "2px solid rgba(167,139,250,0.25)",
+                borderBottomRightRadius: 3,
+              }}
+            />
+
+            <div
+              style={{
+                fontSize: 22,
+                fontWeight: 900,
+                color: "#ffffff",
+                textAlign: "center",
+                lineHeight: 1.6,
+                letterSpacing: "0.02em",
+              }}
+            >
+              {idea}
+            </div>
+
+            <div
+              style={{
+                width: 48,
+                height: 1,
+                margin: "16px auto",
+                background:
+                  "linear-gradient(to right, transparent, rgba(167,139,250,0.4), transparent)",
+              }}
+            />
+
+            <div
+              style={{
+                textAlign: "center",
+                fontSize: 10,
+                fontWeight: 500,
+                color: "rgba(167,139,250,0.35)",
+              }}
+            >
+              此契约一旦开启，绝不反悔
+            </div>
+          </div>
+        </div>
+
+        {/* Attribution */}
+        {(submitter || drawer) && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 12,
+              padding: "0 20px 16px",
+            }}
+          >
+            {submitter && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 5,
+                  fontSize: 11,
+                  color: "rgba(196,181,253,0.4)",
+                }}
+              >
+                <span style={{ fontSize: 14 }}>{submitter.avatar}</span>
+                <span>{submitter.username} 投入</span>
+              </div>
+            )}
+            {submitter && drawer && (
+              <span style={{ color: "rgba(196,181,253,0.2)" }}>·</span>
+            )}
+            {drawer && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 5,
+                  fontSize: 11,
+                  color: "rgba(196,181,253,0.4)",
+                }}
+              >
+                <span style={{ fontSize: 14 }}>{drawer.avatar}</span>
+                <span>{drawer.username} 抽中</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* QR footer */}
+        <div
+          style={{
+            padding: "14px 20px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            borderTop: "1px solid rgba(255,255,255,0.04)",
+          }}
+        >
+          <div
+            style={{
+              padding: 5,
+              borderRadius: 8,
+              background: "#ffffff",
+              flexShrink: 0,
+            }}
+          >
+            <QRCodeSVG
+              value={shareUrl}
+              size={52}
+              level="M"
+              bgColor="#ffffff"
+              fgColor="#0a0810"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: 12,
+                fontWeight: 700,
+                color: "rgba(255,255,255,0.7)",
+              }}
+            >
+              扫码一起「别说随便」
+            </div>
+            <div
+              style={{
+                fontSize: 10,
+                color: "rgba(255,255,255,0.2)",
+                marginTop: 3,
+              }}
+            >
+              {shareUrl.replace(/^https?:\/\//, "")}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/RestaurantShareCard.tsx b/src/components/RestaurantShareCard.tsx
new file mode 100644
index 0000000..e6fe9f5
--- /dev/null
+++ b/src/components/RestaurantShareCard.tsx
@@ -0,0 +1,387 @@
+import { Star, MapPin, Zap } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import type { Restaurant, MatchType, SceneType } from "@/types";
+
+export interface RestaurantShareData {
+  type: "restaurant";
+  restaurant: Restaurant;
+  matchType: MatchType;
+  matchLikes: number;
+  userCount: number;
+  scene?: SceneType;
+}
+
+export default function RestaurantShareCard({
+  data,
+  cardRef,
+  imageDataUrl,
+}: {
+  data: RestaurantShareData;
+  cardRef: React.RefObject<HTMLDivElement | null>;
+  imageDataUrl: string | null;
+}) {
+  const { restaurant, matchType, matchLikes, userCount, scene } = data;
+  const isUnanimous = matchType === "unanimous";
+  const verb = scene === "drink" ? "喝" : "吃";
+  const shareUrl =
+    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
+  const accentFrom = isUnanimous ? "#059669" : "#b45309";
+  const accentTo = isUnanimous ? "#34d399" : "#fbbf24";
+  const accentText = isUnanimous ? "#6ee7b7" : "#fcd34d";
+  const accentBg = isUnanimous
+    ? "rgba(16, 185, 129, 0.12)"
+    : "rgba(245, 158, 11, 0.12)";
+
+  return (
+    <div
+      ref={cardRef}
+      style={{
+        width: 340,
+        padding: 1.5,
+        borderRadius: 20,
+        background: `linear-gradient(160deg, ${accentFrom}, ${accentTo}40, ${accentFrom}30)`,
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 18.5,
+          background: "#08080a",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Decorative glows */}
+        <div
+          style={{
+            position: "absolute",
+            top: -40,
+            right: -30,
+            width: 160,
+            height: 160,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, ${accentFrom}25, transparent 70%)`,
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: 60,
+            left: -40,
+            width: 120,
+            height: 120,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, ${accentTo}12, transparent 70%)`,
+          }}
+        />
+
+        {/* Brand header */}
+        <div
+          style={{
+            padding: "14px 20px 12px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            position: "relative",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <span style={{ fontSize: 18 }}>⚡</span>
+            <div>
+              <div
+                style={{
+                  fontSize: 13,
+                  fontWeight: 800,
+                  color: "#ffffff",
+                  letterSpacing: "0.02em",
+                }}
+              >
+                NoWhatever
+              </div>
+              <div
+                style={{
+                  fontSize: 9,
+                  fontWeight: 600,
+                  color: "rgba(255,255,255,0.35)",
+                  letterSpacing: "0.15em",
+                  marginTop: 1,
+                }}
+              >
+                别说随便 · PANIC MODE
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Thin accent line */}
+        <div
+          style={{
+            height: 1,
+            margin: "0 20px",
+            background: `linear-gradient(to right, transparent, ${accentTo}30, transparent)`,
+          }}
+        />
+
+        {/* Hero section */}
+        <div
+          style={{
+            padding: "24px 20px 20px",
+            textAlign: "center",
+            position: "relative",
+          }}
+        >
+          <div style={{ fontSize: 40, lineHeight: 1 }}>
+            {isUnanimous ? "🎉" : "🏆"}
+          </div>
+          <div
+            style={{
+              fontSize: 30,
+              fontWeight: 900,
+              color: "#ffffff",
+              marginTop: 12,
+              letterSpacing: "0.08em",
+            }}
+          >
+            就去这{verb}！
+          </div>
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              marginTop: 12,
+              padding: "6px 16px",
+              borderRadius: 100,
+              background: accentBg,
+              border: `1px solid ${accentTo}20`,
+            }}
+          >
+            {isUnanimous && (
+              <Zap
+                size={12}
+                style={{ color: accentText, fill: accentText }}
+              />
+            )}
+            <span
+              style={{
+                fontSize: 11,
+                fontWeight: 700,
+                color: accentText,
+              }}
+            >
+              {isUnanimous
+                ? `默契度 100% · ${userCount}人全员一致`
+                : `${matchLikes}/${userCount} 人选了这家`}
+            </span>
+            {isUnanimous && (
+              <Zap
+                size={12}
+                style={{ color: accentText, fill: accentText }}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Restaurant card */}
+        <div style={{ padding: "0 16px 16px" }}>
+          <div
+            style={{
+              borderRadius: 14,
+              background: "rgba(255,255,255,0.04)",
+              border: "1px solid rgba(255,255,255,0.06)",
+              overflow: "hidden",
+            }}
+          >
+            {imageDataUrl && (
+              <img
+                src={imageDataUrl}
+                alt={restaurant.name}
+                style={{
+                  width: "100%",
+                  height: 150,
+                  objectFit: "cover",
+                  display: "block",
+                }}
+              />
+            )}
+            <div style={{ padding: "14px 16px 16px" }}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "flex-start",
+                  justifyContent: "space-between",
+                  gap: 8,
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 17,
+                    fontWeight: 800,
+                    color: "#ffffff",
+                    lineHeight: 1.3,
+                  }}
+                >
+                  {restaurant.name}
+                </div>
+                {restaurant.category && (
+                  <span
+                    style={{
+                      flexShrink: 0,
+                      padding: "3px 8px",
+                      borderRadius: 100,
+                      background: accentBg,
+                      fontSize: 10,
+                      fontWeight: 600,
+                      color: accentText,
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {restaurant.category}
+                  </span>
+                )}
+              </div>
+
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  marginTop: 10,
+                  fontSize: 12,
+                }}
+              >
+                {restaurant.rating > 0 && (
+                  <span
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 3,
+                      color: "#e5e7eb",
+                      fontWeight: 600,
+                    }}
+                  >
+                    <Star
+                      size={13}
+                      style={{ color: "#fbbf24", fill: "#fbbf24" }}
+                    />
+                    {restaurant.rating}
+                  </span>
+                )}
+                {restaurant.price && restaurant.price !== "未知" && (
+                  <span style={{ fontWeight: 700, color: accentText }}>
+                    {restaurant.price}
+                  </span>
+                )}
+                {restaurant.distance && (
+                  <span
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 3,
+                      color: "#9ca3af",
+                    }}
+                  >
+                    <MapPin size={12} style={{ color: "#6b7280" }} />
+                    {restaurant.distance}
+                  </span>
+                )}
+              </div>
+
+              {restaurant.address && (
+                <div
+                  style={{
+                    marginTop: 8,
+                    fontSize: 11,
+                    color: "#6b7280",
+                    lineHeight: 1.5,
+                  }}
+                >
+                  📍 {restaurant.address}
+                </div>
+              )}
+
+              {restaurant.tag && (
+                <div
+                  style={{
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 4,
+                    marginTop: 10,
+                  }}
+                >
+                  {restaurant.tag
+                    .split(",")
+                    .slice(0, 4)
+                    .map((t) => (
+                      <span
+                        key={t}
+                        style={{
+                          padding: "2px 8px",
+                          borderRadius: 4,
+                          background: "rgba(255,255,255,0.05)",
+                          fontSize: 10,
+                          fontWeight: 500,
+                          color: "#9ca3af",
+                        }}
+                      >
+                        {t.trim()}
+                      </span>
+                    ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* QR footer */}
+        <div
+          style={{
+            padding: "14px 20px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            borderTop: "1px solid rgba(255,255,255,0.04)",
+          }}
+        >
+          <div
+            style={{
+              padding: 5,
+              borderRadius: 8,
+              background: "#ffffff",
+              flexShrink: 0,
+            }}
+          >
+            <QRCodeSVG
+              value={shareUrl}
+              size={52}
+              level="M"
+              bgColor="#ffffff"
+              fgColor="#08080a"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: 12,
+                fontWeight: 700,
+                color: "rgba(255,255,255,0.7)",
+              }}
+            >
+              扫码一起「别说随便」
+            </div>
+            <div
+              style={{
+                fontSize: 10,
+                color: "rgba(255,255,255,0.25)",
+                marginTop: 3,
+              }}
+            >
+              {shareUrl.replace(/^https?:\/\//, "")}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
index acff296..1b379a8 100644
--- a/src/components/ShareCardModal.tsx
+++ b/src/components/ShareCardModal.tsx
@@ -2,29 +2,23 @@
 
 import { useState, useRef, useCallback, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { X, Download, Share2, Loader2, Star, MapPin, Zap } from "lucide-react";
-import { QRCodeSVG } from "qrcode.react";
-import { toPng } from "html-to-image";
-import type { Restaurant, MatchType, SceneType } from "@/types";
+import { X, Download, Share2, Loader2 } from "lucide-react";
 import { useToast } from "@/hooks/useToast";
 import { useShare } from "@/hooks/useShare";
+import {
+  loadImageAsDataUrl,
+  generateImage,
+  downloadDataUrl,
+  dataUrlToFile,
+} from "@/lib/shareImage";
+import RestaurantShareCard, {
+  type RestaurantShareData,
+} from "@/components/RestaurantShareCard";
+import BlindboxShareCard, {
+  type BlindboxShareData,
+} from "@/components/BlindboxShareCard";
 
-type ShareCardData =
-  | {
-      type: "restaurant";
-      restaurant: Restaurant;
-      matchType: MatchType;
-      matchLikes: number;
-      userCount: number;
-      scene?: SceneType;
-    }
-  | {
-      type: "blindbox";
-      idea: string;
-      submitter?: { avatar: string; username: string };
-      drawer?: { avatar: string; username: string };
-      roomName: string;
-    };
+export type ShareCardData = RestaurantShareData | BlindboxShareData;
 
 interface ShareCardModalProps {
   open: boolean;
@@ -32,746 +26,6 @@ interface ShareCardModalProps {
   data: ShareCardData;
 }
 
-async function loadImageAsDataUrl(src: string): Promise<string | null> {
-  try {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.src = src;
-    await new Promise<void>((resolve, reject) => {
-      img.onload = () => resolve();
-      img.onerror = () => reject();
-    });
-    const canvas = document.createElement("canvas");
-    canvas.width = img.naturalWidth;
-    canvas.height = img.naturalHeight;
-    const ctx = canvas.getContext("2d")!;
-    ctx.drawImage(img, 0, 0);
-    return canvas.toDataURL("image/jpeg", 0.85);
-  } catch {
-    return null;
-  }
-}
-
-async function generateImage(el: HTMLElement): Promise<string> {
-  return toPng(el, {
-    pixelRatio: 2,
-    quality: 0.95,
-    cacheBust: true,
-    skipAutoScale: true,
-    filter: (node) => {
-      if (node instanceof HTMLElement && node.dataset.shareExclude === "true") {
-        return false;
-      }
-      return true;
-    },
-  });
-}
-
-function downloadDataUrl(dataUrl: string, filename: string) {
-  const link = document.createElement("a");
-  link.download = filename;
-  link.href = dataUrl;
-  link.click();
-}
-
-function dataUrlToFile(dataUrl: string, filename: string): File {
-  const arr = dataUrl.split(",");
-  const mime = arr[0].match(/:(.*?);/)?.[1] || "image/png";
-  const bstr = atob(arr[1]);
-  const u8 = new Uint8Array(bstr.length);
-  for (let i = 0; i < bstr.length; i++) u8[i] = bstr.charCodeAt(i);
-  return new File([u8], filename, { type: mime });
-}
-
-function RestaurantShareCard({
-  data,
-  cardRef,
-  imageDataUrl,
-}: {
-  data: Extract<ShareCardData, { type: "restaurant" }>;
-  cardRef: React.RefObject<HTMLDivElement | null>;
-  imageDataUrl: string | null;
-}) {
-  const { restaurant, matchType, matchLikes, userCount, scene } = data;
-  const isUnanimous = matchType === "unanimous";
-  const verb = scene === "drink" ? "喝" : "吃";
-  const shareUrl =
-    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
-  const accentFrom = isUnanimous ? "#059669" : "#b45309";
-  const accentTo = isUnanimous ? "#34d399" : "#fbbf24";
-  const accentText = isUnanimous ? "#6ee7b7" : "#fcd34d";
-  const accentBg = isUnanimous
-    ? "rgba(16, 185, 129, 0.12)"
-    : "rgba(245, 158, 11, 0.12)";
-
-  return (
-    <div
-      ref={cardRef}
-      style={{
-        width: 340,
-        padding: 1.5,
-        borderRadius: 20,
-        background: `linear-gradient(160deg, ${accentFrom}, ${accentTo}40, ${accentFrom}30)`,
-        fontFamily:
-          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      }}
-    >
-      <div
-        style={{
-          borderRadius: 18.5,
-          background: "#08080a",
-          position: "relative",
-          overflow: "hidden",
-        }}
-      >
-        {/* Decorative glows */}
-        <div
-          style={{
-            position: "absolute",
-            top: -40,
-            right: -30,
-            width: 160,
-            height: 160,
-            borderRadius: "50%",
-            background: `radial-gradient(circle, ${accentFrom}25, transparent 70%)`,
-          }}
-        />
-        <div
-          style={{
-            position: "absolute",
-            bottom: 60,
-            left: -40,
-            width: 120,
-            height: 120,
-            borderRadius: "50%",
-            background: `radial-gradient(circle, ${accentTo}12, transparent 70%)`,
-          }}
-        />
-
-        {/* Brand header */}
-        <div
-          style={{
-            padding: "14px 20px 12px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            position: "relative",
-          }}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-            <span style={{ fontSize: 18 }}>⚡</span>
-            <div>
-              <div
-                style={{
-                  fontSize: 13,
-                  fontWeight: 800,
-                  color: "#ffffff",
-                  letterSpacing: "0.02em",
-                }}
-              >
-                NoWhatever
-              </div>
-              <div
-                style={{
-                  fontSize: 9,
-                  fontWeight: 600,
-                  color: "rgba(255,255,255,0.35)",
-                  letterSpacing: "0.15em",
-                  marginTop: 1,
-                }}
-              >
-                别说随便 · PANIC MODE
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Thin accent line */}
-        <div
-          style={{
-            height: 1,
-            margin: "0 20px",
-            background: `linear-gradient(to right, transparent, ${accentTo}30, transparent)`,
-          }}
-        />
-
-        {/* Hero section */}
-        <div
-          style={{
-            padding: "24px 20px 20px",
-            textAlign: "center",
-            position: "relative",
-          }}
-        >
-          <div style={{ fontSize: 40, lineHeight: 1 }}>
-            {isUnanimous ? "🎉" : "🏆"}
-          </div>
-          <div
-            style={{
-              fontSize: 30,
-              fontWeight: 900,
-              color: "#ffffff",
-              marginTop: 12,
-              letterSpacing: "0.08em",
-            }}
-          >
-            就去这{verb}！
-          </div>
-          <div
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              marginTop: 12,
-              padding: "6px 16px",
-              borderRadius: 100,
-              background: accentBg,
-              border: `1px solid ${accentTo}20`,
-            }}
-          >
-            {isUnanimous && (
-              <Zap
-                size={12}
-                style={{ color: accentText, fill: accentText }}
-              />
-            )}
-            <span
-              style={{
-                fontSize: 11,
-                fontWeight: 700,
-                color: accentText,
-              }}
-            >
-              {isUnanimous
-                ? `默契度 100% · ${userCount}人全员一致`
-                : `${matchLikes}/${userCount} 人选了这家`}
-            </span>
-            {isUnanimous && (
-              <Zap
-                size={12}
-                style={{ color: accentText, fill: accentText }}
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Restaurant card */}
-        <div style={{ padding: "0 16px 16px" }}>
-          <div
-            style={{
-              borderRadius: 14,
-              background: "rgba(255,255,255,0.04)",
-              border: "1px solid rgba(255,255,255,0.06)",
-              overflow: "hidden",
-            }}
-          >
-            {imageDataUrl && (
-              <img
-                src={imageDataUrl}
-                alt={restaurant.name}
-                style={{
-                  width: "100%",
-                  height: 150,
-                  objectFit: "cover",
-                  display: "block",
-                }}
-              />
-            )}
-            <div style={{ padding: "14px 16px 16px" }}>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "flex-start",
-                  justifyContent: "space-between",
-                  gap: 8,
-                }}
-              >
-                <div
-                  style={{
-                    fontSize: 17,
-                    fontWeight: 800,
-                    color: "#ffffff",
-                    lineHeight: 1.3,
-                  }}
-                >
-                  {restaurant.name}
-                </div>
-                {restaurant.category && (
-                  <span
-                    style={{
-                      flexShrink: 0,
-                      padding: "3px 8px",
-                      borderRadius: 100,
-                      background: accentBg,
-                      fontSize: 10,
-                      fontWeight: 600,
-                      color: accentText,
-                      whiteSpace: "nowrap",
-                    }}
-                  >
-                    {restaurant.category}
-                  </span>
-                )}
-              </div>
-
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 12,
-                  marginTop: 10,
-                  fontSize: 12,
-                }}
-              >
-                {restaurant.rating > 0 && (
-                  <span
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 3,
-                      color: "#e5e7eb",
-                      fontWeight: 600,
-                    }}
-                  >
-                    <Star
-                      size={13}
-                      style={{ color: "#fbbf24", fill: "#fbbf24" }}
-                    />
-                    {restaurant.rating}
-                  </span>
-                )}
-                {restaurant.price && restaurant.price !== "未知" && (
-                  <span style={{ fontWeight: 700, color: accentText }}>
-                    {restaurant.price}
-                  </span>
-                )}
-                {restaurant.distance && (
-                  <span
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 3,
-                      color: "#9ca3af",
-                    }}
-                  >
-                    <MapPin size={12} style={{ color: "#6b7280" }} />
-                    {restaurant.distance}
-                  </span>
-                )}
-              </div>
-
-              {restaurant.address && (
-                <div
-                  style={{
-                    marginTop: 8,
-                    fontSize: 11,
-                    color: "#6b7280",
-                    lineHeight: 1.5,
-                  }}
-                >
-                  📍 {restaurant.address}
-                </div>
-              )}
-
-              {restaurant.tag && (
-                <div
-                  style={{
-                    display: "flex",
-                    flexWrap: "wrap",
-                    gap: 4,
-                    marginTop: 10,
-                  }}
-                >
-                  {restaurant.tag
-                    .split(",")
-                    .slice(0, 4)
-                    .map((t) => (
-                      <span
-                        key={t}
-                        style={{
-                          padding: "2px 8px",
-                          borderRadius: 4,
-                          background: "rgba(255,255,255,0.05)",
-                          fontSize: 10,
-                          fontWeight: 500,
-                          color: "#9ca3af",
-                        }}
-                      >
-                        {t.trim()}
-                      </span>
-                    ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* QR footer */}
-        <div
-          style={{
-            padding: "14px 20px 16px",
-            display: "flex",
-            alignItems: "center",
-            gap: 14,
-            borderTop: "1px solid rgba(255,255,255,0.04)",
-          }}
-        >
-          <div
-            style={{
-              padding: 5,
-              borderRadius: 8,
-              background: "#ffffff",
-              flexShrink: 0,
-            }}
-          >
-            <QRCodeSVG
-              value={shareUrl}
-              size={52}
-              level="M"
-              bgColor="#ffffff"
-              fgColor="#08080a"
-            />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div
-              style={{
-                fontSize: 12,
-                fontWeight: 700,
-                color: "rgba(255,255,255,0.7)",
-              }}
-            >
-              扫码一起「别说随便」
-            </div>
-            <div
-              style={{
-                fontSize: 10,
-                color: "rgba(255,255,255,0.25)",
-                marginTop: 3,
-              }}
-            >
-              {shareUrl.replace(/^https?:\/\//, "")}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BlindboxShareCard({
-  data,
-  cardRef,
-}: {
-  data: Extract<ShareCardData, { type: "blindbox" }>;
-  cardRef: React.RefObject<HTMLDivElement | null>;
-}) {
-  const { idea, submitter, drawer, roomName } = data;
-  const shareUrl =
-    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
-
-  return (
-    <div
-      ref={cardRef}
-      style={{
-        width: 340,
-        padding: 1.5,
-        borderRadius: 20,
-        background: "linear-gradient(160deg, #7c3aed, #6366f140, #7c3aed30)",
-        fontFamily:
-          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      }}
-    >
-      <div
-        style={{
-          borderRadius: 18.5,
-          background: "#0a0810",
-          position: "relative",
-          overflow: "hidden",
-        }}
-      >
-        {/* Decorative glows */}
-        <div
-          style={{
-            position: "absolute",
-            top: -30,
-            right: -20,
-            width: 140,
-            height: 140,
-            borderRadius: "50%",
-            background: "radial-gradient(circle, rgba(124,58,237,0.2), transparent 70%)",
-          }}
-        />
-        <div
-          style={{
-            position: "absolute",
-            bottom: 80,
-            left: -30,
-            width: 120,
-            height: 120,
-            borderRadius: "50%",
-            background: "radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%)",
-          }}
-        />
-
-        {/* Brand header */}
-        <div
-          style={{
-            padding: "14px 20px 12px",
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            position: "relative",
-          }}
-        >
-          <span style={{ fontSize: 18 }}>🎁</span>
-          <div>
-            <div
-              style={{
-                fontSize: 13,
-                fontWeight: 800,
-                color: "#ffffff",
-                letterSpacing: "0.02em",
-              }}
-            >
-              NoWhatever
-            </div>
-            <div
-              style={{
-                fontSize: 9,
-                fontWeight: 600,
-                color: "rgba(255,255,255,0.3)",
-                letterSpacing: "0.15em",
-                marginTop: 1,
-              }}
-            >
-              别说随便 · ADVENTURE ROULETTE
-            </div>
-          </div>
-        </div>
-
-        {/* Thin accent line */}
-        <div
-          style={{
-            height: 1,
-            margin: "0 20px",
-            background: "linear-gradient(to right, transparent, rgba(167,139,250,0.25), transparent)",
-          }}
-        />
-
-        {/* Room name badge */}
-        <div
-          style={{
-            textAlign: "center",
-            padding: "20px 20px 8px",
-            position: "relative",
-          }}
-        >
-          <div
-            style={{
-              fontSize: 10,
-              fontWeight: 700,
-              letterSpacing: "0.25em",
-              color: "rgba(167,139,250,0.5)",
-            }}
-          >
-            ✦ {roomName} ✦
-          </div>
-        </div>
-
-        {/* Idea card */}
-        <div style={{ padding: "0 16px 20px" }}>
-          <div
-            style={{
-              borderRadius: 14,
-              background: "rgba(255,255,255,0.04)",
-              border: "1px solid rgba(167,139,250,0.1)",
-              padding: "28px 24px",
-              position: "relative",
-            }}
-          >
-            {/* Corner decorations */}
-            <div
-              style={{
-                position: "absolute",
-                top: 10,
-                left: 10,
-                width: 14,
-                height: 14,
-                borderLeft: "2px solid rgba(167,139,250,0.25)",
-                borderTop: "2px solid rgba(167,139,250,0.25)",
-                borderTopLeftRadius: 3,
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                top: 10,
-                right: 10,
-                width: 14,
-                height: 14,
-                borderRight: "2px solid rgba(167,139,250,0.25)",
-                borderTop: "2px solid rgba(167,139,250,0.25)",
-                borderTopRightRadius: 3,
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                bottom: 10,
-                left: 10,
-                width: 14,
-                height: 14,
-                borderLeft: "2px solid rgba(167,139,250,0.25)",
-                borderBottom: "2px solid rgba(167,139,250,0.25)",
-                borderBottomLeftRadius: 3,
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                bottom: 10,
-                right: 10,
-                width: 14,
-                height: 14,
-                borderRight: "2px solid rgba(167,139,250,0.25)",
-                borderBottom: "2px solid rgba(167,139,250,0.25)",
-                borderBottomRightRadius: 3,
-              }}
-            />
-
-            <div
-              style={{
-                fontSize: 22,
-                fontWeight: 900,
-                color: "#ffffff",
-                textAlign: "center",
-                lineHeight: 1.6,
-                letterSpacing: "0.02em",
-              }}
-            >
-              {idea}
-            </div>
-
-            <div
-              style={{
-                width: 48,
-                height: 1,
-                margin: "16px auto",
-                background:
-                  "linear-gradient(to right, transparent, rgba(167,139,250,0.4), transparent)",
-              }}
-            />
-
-            <div
-              style={{
-                textAlign: "center",
-                fontSize: 10,
-                fontWeight: 500,
-                color: "rgba(167,139,250,0.35)",
-              }}
-            >
-              此契约一旦开启，绝不反悔
-            </div>
-          </div>
-        </div>
-
-        {/* Attribution */}
-        {(submitter || drawer) && (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 12,
-              padding: "0 20px 16px",
-            }}
-          >
-            {submitter && (
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 5,
-                  fontSize: 11,
-                  color: "rgba(196,181,253,0.4)",
-                }}
-              >
-                <span style={{ fontSize: 14 }}>{submitter.avatar}</span>
-                <span>{submitter.username} 投入</span>
-              </div>
-            )}
-            {submitter && drawer && (
-              <span style={{ color: "rgba(196,181,253,0.2)" }}>·</span>
-            )}
-            {drawer && (
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 5,
-                  fontSize: 11,
-                  color: "rgba(196,181,253,0.4)",
-                }}
-              >
-                <span style={{ fontSize: 14 }}>{drawer.avatar}</span>
-                <span>{drawer.username} 抽中</span>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* QR footer */}
-        <div
-          style={{
-            padding: "14px 20px 16px",
-            display: "flex",
-            alignItems: "center",
-            gap: 14,
-            borderTop: "1px solid rgba(255,255,255,0.04)",
-          }}
-        >
-          <div
-            style={{
-              padding: 5,
-              borderRadius: 8,
-              background: "#ffffff",
-              flexShrink: 0,
-            }}
-          >
-            <QRCodeSVG
-              value={shareUrl}
-              size={52}
-              level="M"
-              bgColor="#ffffff"
-              fgColor="#0a0810"
-            />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div
-              style={{
-                fontSize: 12,
-                fontWeight: 700,
-                color: "rgba(255,255,255,0.7)",
-              }}
-            >
-              扫码一起「别说随便」
-            </div>
-            <div
-              style={{
-                fontSize: 10,
-                color: "rgba(255,255,255,0.2)",
-                marginTop: 3,
-              }}
-            >
-              {shareUrl.replace(/^https?:\/\//, "")}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export default function ShareCardModal({
   open,
   onClose,
diff --git a/src/lib/shareImage.ts b/src/lib/shareImage.ts
new file mode 100644
index 0000000..9bb75a9
--- /dev/null
+++ b/src/lib/shareImage.ts
@@ -0,0 +1,52 @@
+import { toPng } from "html-to-image";
+
+export async function loadImageAsDataUrl(src: string): Promise<string | null> {
+  try {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.src = src;
+    await new Promise<void>((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = () => reject();
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    const ctx = canvas.getContext("2d")!;
+    ctx.drawImage(img, 0, 0);
+    return canvas.toDataURL("image/jpeg", 0.85);
+  } catch {
+    return null;
+  }
+}
+
+export async function generateImage(el: HTMLElement): Promise<string> {
+  return toPng(el, {
+    pixelRatio: 2,
+    quality: 0.95,
+    cacheBust: true,
+    skipAutoScale: true,
+    filter: (node) => {
+      if (node instanceof HTMLElement && node.dataset.shareExclude === "true") {
+        return false;
+      }
+      return true;
+    },
+  });
+}
+
+export function downloadDataUrl(dataUrl: string, filename: string) {
+  const link = document.createElement("a");
+  link.download = filename;
+  link.href = dataUrl;
+  link.click();
+}
+
+export function dataUrlToFile(dataUrl: string, filename: string): File {
+  const arr = dataUrl.split(",");
+  const mime = arr[0].match(/:(.*?);/)?.[1] || "image/png";
+  const bstr = atob(arr[1]);
+  const u8 = new Uint8Array(bstr.length);
+  for (let i = 0; i < bstr.length; i++) u8[i] = bstr.charCodeAt(i);
+  return new File([u8], filename, { type: mime });
+}

From 2a3cef890cd7888d40265fe3ff66ff7b67c92430 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 19:59:35 +0800
Subject: [PATCH 41/66] =?UTF-8?q?refactor:=20=E6=8B=86=E5=88=86=20MatchRes?=
 =?UTF-8?q?ult=E3=80=81ProfilePage=E3=80=81BlindboxRoomPage=20=E5=A4=A7?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MatchResult: 提取 NoMatchResult、RunnerUpCard（635 → 513 行）
- ProfilePage: 提取 ProfileHistoryCard、ProfileFavoritesCard（692 → 526 行）
- BlindboxRoomPage: 提取 BlindboxMyIdeas、BlindboxDrawnHistory（855 → 668 行）
---
 src/app/blindbox/[code]/page.tsx        | 188 +---------------------
 src/app/profile/page.tsx                | 205 +++---------------------
 src/components/BlindboxDrawnHistory.tsx |  70 ++++++++
 src/components/BlindboxMyIdeas.tsx      | 121 ++++++++++++++
 src/components/MatchResult.tsx          | 125 +--------------
 src/components/NoMatchResult.tsx        |  78 +++++++++
 src/components/ProfileFavoritesCard.tsx | 128 +++++++++++++++
 src/components/ProfileHistoryCard.tsx   | 113 +++++++++++++
 src/components/RunnerUpCard.tsx         |  52 ++++++
 9 files changed, 589 insertions(+), 491 deletions(-)
 create mode 100644 src/components/BlindboxDrawnHistory.tsx
 create mode 100644 src/components/BlindboxMyIdeas.tsx
 create mode 100644 src/components/NoMatchResult.tsx
 create mode 100644 src/components/ProfileFavoritesCard.tsx
 create mode 100644 src/components/ProfileHistoryCard.tsx
 create mode 100644 src/components/RunnerUpCard.tsx

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index ea3220e..6ca60b7 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -9,21 +9,19 @@ import {
   Loader2,
   Package,
   Flame,
-  Trophy,
   Users,
   Share2,
   LogIn,
   Copy,
   Trash2,
   LogOut,
-  Pencil,
-  Check,
-  X,
 } from "lucide-react";
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
 import Button from "@/components/Button";
+import BlindboxMyIdeas, { type MyIdea } from "@/components/BlindboxMyIdeas";
+import BlindboxDrawnHistory, { type DrawnIdea } from "@/components/BlindboxDrawnHistory";
 import { useToast } from "@/hooks/useToast";
 import { useShare } from "@/hooks/useShare";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
@@ -38,132 +36,8 @@ interface RoomInfo {
   members: { id: string; username: string; avatar: string }[];
 }
 
-interface MyIdea {
-  id: string;
-  content: string;
-  createdAt: string;
-}
-
-interface DrawnIdea {
-  id: string;
-  content: string;
-  createdAt: string;
-  user?: { id: string; username: string; avatar: string };
-  drawnBy?: { id: string; username: string; avatar: string } | null;
-}
-
 type Phase = "pool" | "shaking" | "reveal";
 
-function MyIdeaItem({
-  idea,
-  onEdit,
-  onDelete,
-}: {
-  idea: MyIdea;
-  onEdit: (id: string, content: string) => Promise<void>;
-  onDelete: (id: string) => Promise<void>;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(idea.content);
-  const [saving, setSaving] = useState(false);
-
-  const handleSave = async () => {
-    if (!draft.trim() || saving) return;
-    setSaving(true);
-    await onEdit(idea.id, draft);
-    setSaving(false);
-    setEditing(false);
-  };
-
-  return (
-    <motion.div
-      layout
-      className="flex items-center gap-2 rounded-xl bg-surface/60 px-3 py-2.5 ring-1 ring-border/80"
-      initial={{ opacity: 0, y: -8 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, x: -20 }}
-    >
-      {editing ? (
-        <>
-          <input
-            type="text"
-            value={draft}
-            onChange={(e) => setDraft(e.target.value.slice(0, 200))}
-            onKeyDown={(e) => { if (e.key === "Enter") handleSave(); if (e.key === "Escape") { setEditing(false); setDraft(idea.content); } }}
-            maxLength={200}
-            autoFocus
-            className="h-8 min-w-0 flex-1 rounded-lg bg-elevated px-2.5 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-purple-600/50"
-          />
-          <button
-            onClick={handleSave}
-            disabled={saving || !draft.trim()}
-            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-purple-600 text-white disabled:opacity-40"
-          >
-            {saving ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />}
-          </button>
-          <button
-            onClick={() => { setEditing(false); setDraft(idea.content); }}
-            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-elevated text-muted"
-          >
-            <X size={12} />
-          </button>
-        </>
-      ) : (
-        <>
-          <span className="text-sm">💡</span>
-          <p className="min-w-0 flex-1 truncate text-sm text-secondary">{idea.content}</p>
-          <button
-            onClick={() => setEditing(true)}
-            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-purple-400"
-          >
-            <Pencil size={12} />
-          </button>
-          <button
-            onClick={() => onDelete(idea.id)}
-            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-rose-400"
-          >
-            <Trash2 size={12} />
-          </button>
-        </>
-      )}
-    </motion.div>
-  );
-}
-
-function MyIdeasSection({
-  ideas,
-  onEdit,
-  onDelete,
-}: {
-  ideas: MyIdea[];
-  onEdit: (id: string, content: string) => Promise<void>;
-  onDelete: (id: string) => Promise<void>;
-}) {
-  return (
-    <motion.div
-      className="mt-6 w-full max-w-sm"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ delay: 0.2 }}
-    >
-      <div className="mb-2 flex items-center gap-2">
-        <Package size={13} className="text-purple-400" />
-        <h3 className="text-xs font-bold tracking-wider text-muted">
-          我投入的想法（{ideas.length}）
-        </h3>
-        <div className="h-px flex-1 bg-border" />
-      </div>
-      <div className="flex flex-col gap-1.5">
-        <AnimatePresence>
-          {ideas.map((idea) => (
-            <MyIdeaItem key={idea.id} idea={idea} onEdit={onEdit} onDelete={onDelete} />
-          ))}
-        </AnimatePresence>
-      </div>
-    </motion.div>
-  );
-}
-
 export default function BlindboxRoomPage() {
   const { code } = useParams<{ code: string }>();
   const router = useRouter();
@@ -729,68 +603,16 @@ export default function BlindboxRoomPage() {
             )}
           </AnimatePresence>
 
-          {/* My ideas in pool */}
           {myIdeas.length > 0 && phase === "pool" && (
-            <MyIdeasSection
+            <BlindboxMyIdeas
               ideas={myIdeas}
               onEdit={handleEditIdea}
               onDelete={handleDeleteIdea}
             />
           )}
 
-          {/* History */}
-          {drawnHistory.length > 0 && phase !== "shaking" && (
-            <motion.div
-              className="mt-10 w-full max-w-sm"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.3 }}
-            >
-              <div className="mb-3 flex items-center gap-2">
-                <Trophy size={13} className="text-amber-400" />
-                <h3 className="text-xs font-bold tracking-wider text-muted">
-                  履约记录
-                </h3>
-                <div className="h-px flex-1 bg-border" />
-              </div>
-              <div className="flex flex-col gap-2">
-                {drawnHistory.map((item, i) => (
-                  <motion.div
-                    key={item.id}
-                    className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
-                    initial={{ opacity: 0, x: -10 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    transition={{ delay: i * 0.06 }}
-                  >
-                    <span className="mt-0.5 text-sm">🏆</span>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-secondary">
-                        {item.content}
-                      </p>
-                      <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
-                        {item.user && (
-                          <span>{item.user.avatar} {item.user.username} 投入</span>
-                        )}
-                        {item.drawnBy && (
-                          <>
-                            <span>·</span>
-                            <span>{item.drawnBy.avatar} {item.drawnBy.username} 抽中</span>
-                          </>
-                        )}
-                        <span>·</span>
-                        <span>
-                          {new Date(item.createdAt).toLocaleDateString("zh-CN", {
-                            month: "short",
-                            day: "numeric",
-                            weekday: "short",
-                          })}
-                        </span>
-                      </div>
-                    </div>
-                  </motion.div>
-                ))}
-              </div>
-            </motion.div>
+          {phase !== "shaking" && (
+            <BlindboxDrawnHistory items={drawnHistory} />
           )}
         </>
       )}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 1ce8109..ac5d760 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -6,12 +6,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import {
   ArrowLeft,
   Mail,
-  Clock,
-  Star,
-  MapPin,
-  Trash2,
   Loader2,
-  ChevronDown,
   LogOut,
   Lock,
   Edit3,
@@ -20,25 +15,16 @@ import {
   Eye,
   EyeOff,
   Zap,
-  ClipboardList,
-  Heart,
 } from "lucide-react";
-import EmptyState from "@/components/EmptyState";
 import Card from "@/components/Card";
 import Input from "@/components/Input";
+import ProfileHistoryCard from "@/components/ProfileHistoryCard";
+import ProfileFavoritesCard from "@/components/ProfileFavoritesCard";
 import { useToast } from "@/hooks/useToast";
-import RestaurantImage from "@/components/RestaurantImage";
 import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
 import { getAvatarBg, AVATARS } from "@/lib/avatars";
-import { buildNavUrl } from "@/lib/navigation";
-import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Restaurant } from "@/types";
-
-function firstImage(r: Restaurant): string {
-  if (r.images?.length > 0) return r.images[0];
-  const legacy = (r as unknown as Record<string, unknown>).image;
-  return typeof legacy === "string" ? legacy : "";
-}
+import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord } from "@/types";
 
 export default function ProfilePage() {
   const router = useRouter();
@@ -499,175 +485,24 @@ export default function ProfilePage() {
           )}
         </Card>
 
-        {/* Decision History */}
-        <Card animated className="mt-4" delay={0.15}>
-          <button
-            onClick={() => setShowHistory((v) => !v)}
-            className="flex w-full items-center justify-between"
-          >
-            <div className="flex items-center gap-2">
-              <Clock size={15} className="text-muted" />
-              <h3 className="text-sm font-semibold text-secondary">
-                决策记录 {history.length > 0 && `(${history.length})`}
-              </h3>
-            </div>
-            <motion.span
-              animate={{ rotate: showHistory ? 180 : 0 }}
-              transition={{ duration: 0.2 }}
-              className="text-muted"
-            >
-              <ChevronDown size={16} />
-            </motion.span>
-          </button>
+        <ProfileHistoryCard
+          history={history}
+          loading={historyLoading}
+          open={showHistory}
+          onToggle={() => setShowHistory((v) => !v)}
+          onEmpty={() => router.push("/blindbox")}
+          delay={0.15}
+        />
 
-          <AnimatePresence>
-            {showHistory && (
-              <motion.div
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: "auto", opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="overflow-hidden"
-              >
-                {historyLoading ? (
-                  <div className="mt-3 flex flex-col gap-2">
-                    <RecordItemSkeleton />
-                    <RecordItemSkeleton />
-                  </div>
-                ) : history.length === 0 ? (
-                  <EmptyState
-                    icon={ClipboardList}
-                    title="还没有决策记录"
-                    subtitle="创建房间开始一起选餐厅"
-                    ctaLabel="去创建第一个房间"
-                    onCta={() => router.push("/blindbox")}
-                    color="purple"
-                  />
-                ) : (
-                  <div className="mt-3 flex flex-col gap-2">
-                    {history.map((d) => (
-                      <a
-                        key={d.id}
-                        href={buildNavUrl(d.restaurantData)}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
-                      >
-                        {firstImage(d.restaurantData) && (
-                          <RestaurantImage
-                            src={firstImage(d.restaurantData)}
-                            alt={d.restaurantName}
-                            className="h-12 w-12 shrink-0 rounded-lg object-cover"
-                          />
-                        )}
-                        <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <p className="truncate text-sm font-semibold text-heading">{d.restaurantName}</p>
-                          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
-                            <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
-                            <span>{d.participants} 人参与</span>
-                            <span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
-                          </div>
-                        </div>
-                      </a>
-                    ))}
-                  </div>
-                )}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </Card>
-
-        {/* Favorites */}
-        <Card animated className="mt-4" delay={0.2}>
-          <button
-            onClick={() => setShowFavorites((v) => !v)}
-            className="flex w-full items-center justify-between"
-          >
-            <div className="flex items-center gap-2">
-              <Star size={15} className="text-muted" />
-              <h3 className="text-sm font-semibold text-secondary">
-                收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
-              </h3>
-            </div>
-            <motion.span
-              animate={{ rotate: showFavorites ? 180 : 0 }}
-              transition={{ duration: 0.2 }}
-              className="text-muted"
-            >
-              <ChevronDown size={16} />
-            </motion.span>
-          </button>
-
-          <AnimatePresence>
-            {showFavorites && (
-              <motion.div
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: "auto", opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="overflow-hidden"
-              >
-                {favLoading ? (
-                  <div className="mt-3 flex flex-col gap-2">
-                    <RecordItemSkeleton />
-                    <RecordItemSkeleton />
-                  </div>
-                ) : favorites.length === 0 ? (
-                  <EmptyState
-                    icon={Heart}
-                    title="还没有收藏的餐厅"
-                    subtitle="在匹配结果中收藏喜欢的店"
-                    ctaLabel="去创建第一个房间"
-                    onCta={() => router.push("/blindbox")}
-                    color="amber"
-                  />
-                ) : (
-                  <div className="mt-3 flex flex-col gap-2">
-                    {favorites.map((f) => {
-                      const r = f.restaurantData;
-                      return (
-                        <div
-                          key={f.id}
-                          className="flex gap-3 rounded-xl bg-elevated p-2.5"
-                        >
-                          {firstImage(r) && (
-                            <RestaurantImage
-                              src={firstImage(r)}
-                              alt={r.name}
-                              className="h-12 w-12 shrink-0 rounded-lg object-cover"
-                            />
-                          )}
-                          <div className="flex min-w-0 flex-1 flex-col justify-center">
-                            <p className="truncate text-sm font-semibold text-heading">{r.name}</p>
-                            <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
-                              <span className="flex items-center gap-0.5">
-                                <Star size={10} className="fill-amber-400 text-amber-400" />
-                                {r.rating}
-                              </span>
-                              <span>{r.price}</span>
-                              {r.distance && (
-                                <span className="flex items-center gap-0.5">
-                                  <MapPin size={10} />
-                                  {r.distance}
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                          <button
-                            onClick={() => handleRemoveFavorite(f.id)}
-                            className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
-                          >
-                            <Trash2 size={14} />
-                          </button>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </Card>
+        <ProfileFavoritesCard
+          favorites={favorites}
+          loading={favLoading}
+          open={showFavorites}
+          onToggle={() => setShowFavorites((v) => !v)}
+          onRemove={handleRemoveFavorite}
+          onEmpty={() => router.push("/blindbox")}
+          delay={0.2}
+        />
 
         {/* Logout */}
         <motion.div
diff --git a/src/components/BlindboxDrawnHistory.tsx b/src/components/BlindboxDrawnHistory.tsx
new file mode 100644
index 0000000..ea2c232
--- /dev/null
+++ b/src/components/BlindboxDrawnHistory.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Trophy } from "lucide-react";
+
+export interface DrawnIdea {
+  id: string;
+  content: string;
+  createdAt: string;
+  user?: { id: string; username: string; avatar: string };
+  drawnBy?: { id: string; username: string; avatar: string } | null;
+}
+
+export default function BlindboxDrawnHistory({ items }: { items: DrawnIdea[] }) {
+  if (items.length === 0) return null;
+
+  return (
+    <motion.div
+      className="mt-10 w-full max-w-sm"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.3 }}
+    >
+      <div className="mb-3 flex items-center gap-2">
+        <Trophy size={13} className="text-amber-400" />
+        <h3 className="text-xs font-bold tracking-wider text-muted">
+          履约记录
+        </h3>
+        <div className="h-px flex-1 bg-border" />
+      </div>
+      <div className="flex flex-col gap-2">
+        {items.map((item, i) => (
+          <motion.div
+            key={item.id}
+            className="flex items-start gap-3 rounded-xl bg-surface/60 px-4 py-3 ring-1 ring-border/80"
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: i * 0.06 }}
+          >
+            <span className="mt-0.5 text-sm">🏆</span>
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium text-secondary">
+                {item.content}
+              </p>
+              <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
+                {item.user && (
+                  <span>{item.user.avatar} {item.user.username} 投入</span>
+                )}
+                {item.drawnBy && (
+                  <>
+                    <span>·</span>
+                    <span>{item.drawnBy.avatar} {item.drawnBy.username} 抽中</span>
+                  </>
+                )}
+                <span>·</span>
+                <span>
+                  {new Date(item.createdAt).toLocaleDateString("zh-CN", {
+                    month: "short",
+                    day: "numeric",
+                    weekday: "short",
+                  })}
+                </span>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/components/BlindboxMyIdeas.tsx b/src/components/BlindboxMyIdeas.tsx
new file mode 100644
index 0000000..d8e3019
--- /dev/null
+++ b/src/components/BlindboxMyIdeas.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Package, Loader2, Pencil, Trash2, Check, X } from "lucide-react";
+
+export interface MyIdea {
+  id: string;
+  content: string;
+  createdAt: string;
+}
+
+function MyIdeaItem({
+  idea,
+  onEdit,
+  onDelete,
+}: {
+  idea: MyIdea;
+  onEdit: (id: string, content: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(idea.content);
+  const [saving, setSaving] = useState(false);
+
+  const handleSave = async () => {
+    if (!draft.trim() || saving) return;
+    setSaving(true);
+    await onEdit(idea.id, draft);
+    setSaving(false);
+    setEditing(false);
+  };
+
+  return (
+    <motion.div
+      layout
+      className="flex items-center gap-2 rounded-xl bg-surface/60 px-3 py-2.5 ring-1 ring-border/80"
+      initial={{ opacity: 0, y: -8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, x: -20 }}
+    >
+      {editing ? (
+        <>
+          <input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value.slice(0, 200))}
+            onKeyDown={(e) => { if (e.key === "Enter") handleSave(); if (e.key === "Escape") { setEditing(false); setDraft(idea.content); } }}
+            maxLength={200}
+            autoFocus
+            className="h-8 min-w-0 flex-1 rounded-lg bg-elevated px-2.5 text-sm text-foreground outline-none ring-1 ring-border focus:ring-2 focus:ring-purple-600/50"
+          />
+          <button
+            onClick={handleSave}
+            disabled={saving || !draft.trim()}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-purple-600 text-white disabled:opacity-40"
+          >
+            {saving ? <Loader2 size={12} className="animate-spin" /> : <Check size={12} />}
+          </button>
+          <button
+            onClick={() => { setEditing(false); setDraft(idea.content); }}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-elevated text-muted"
+          >
+            <X size={12} />
+          </button>
+        </>
+      ) : (
+        <>
+          <span className="text-sm">💡</span>
+          <p className="min-w-0 flex-1 truncate text-sm text-secondary">{idea.content}</p>
+          <button
+            onClick={() => setEditing(true)}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-purple-400"
+          >
+            <Pencil size={12} />
+          </button>
+          <button
+            onClick={() => onDelete(idea.id)}
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-rose-400"
+          >
+            <Trash2 size={12} />
+          </button>
+        </>
+      )}
+    </motion.div>
+  );
+}
+
+export default function BlindboxMyIdeas({
+  ideas,
+  onEdit,
+  onDelete,
+}: {
+  ideas: MyIdea[];
+  onEdit: (id: string, content: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+}) {
+  return (
+    <motion.div
+      className="mt-6 w-full max-w-sm"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="mb-2 flex items-center gap-2">
+        <Package size={13} className="text-purple-400" />
+        <h3 className="text-xs font-bold tracking-wider text-muted">
+          我投入的想法（{ideas.length}）
+        </h3>
+        <div className="h-px flex-1 bg-border" />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <AnimatePresence>
+          {ideas.map((idea) => (
+            <MyIdeaItem key={idea.id} idea={idea} onEdit={onEdit} onDelete={onDelete} />
+          ))}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 90ec7d2..7bf7bd0 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -12,8 +12,6 @@ import {
   Clock,
   Trophy,
   RotateCcw,
-  SearchX,
-  Home,
   ChevronDown,
   Swords,
   RefreshCw,
@@ -35,6 +33,8 @@ import ShareCardModal from "@/components/ShareCardModal";
 import RestaurantImage from "@/components/RestaurantImage";
 import AuthModal from "@/components/AuthModal";
 import Button from "@/components/Button";
+import NoMatchResult from "@/components/NoMatchResult";
+import RunnerUpCard from "@/components/RunnerUpCard";
 import { buildNavUrl } from "@/lib/navigation";
 import { useToast } from "@/hooks/useToast";
 
@@ -53,127 +53,6 @@ interface MatchResultProps {
   scene?: SceneType;
 }
 
-function NoMatchResult({
-  onReset,
-  resetting,
-}: {
-  onReset: () => Promise<void>;
-  resetting: boolean;
-}) {
-  const router = useRouter();
-
-  return (
-    <motion.div
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background 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 }}
-      >
-        <SearchX size={56} className="text-muted" />
-      </motion.div>
-
-      <motion.h1
-        className="mt-4 text-3xl font-black text-heading"
-        initial={{ y: 30, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0.35 }}
-      >
-        都不太满意
-      </motion.h1>
-
-      <motion.p
-        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
-        initial={{ y: 20, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0.45 }}
-      >
-        这一轮没有店被选中，换个范围或类型再试试？
-      </motion.p>
-
-      <motion.div
-        className="mt-8 flex w-full max-w-xs flex-col gap-3"
-        initial={{ y: 30, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0.55 }}
-      >
-        <Button
-          onClick={onReset}
-          shape="pill"
-          loading={resetting}
-          loadingText="重置中..."
-          icon={<RotateCcw size={15} />}
-          className="px-8 py-3"
-        >
-          再来一轮
-        </Button>
-
-        <Button
-          onClick={() => router.push("/")}
-          variant="secondary"
-          shape="pill"
-          icon={<Home size={15} />}
-          className="px-8 py-3"
-        >
-          换个条件重新搜
-        </Button>
-      </motion.div>
-    </motion.div>
-  );
-}
-
-function RunnerUpCard({
-  restaurant,
-  likes,
-  userCount,
-}: {
-  restaurant: Restaurant;
-  likes: number;
-  userCount: number;
-}) {
-  return (
-    <a
-      href={buildNavUrl(restaurant)}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
-    >
-      {restaurant.images?.[0] && (
-        <RestaurantImage
-          src={restaurant.images[0]}
-          alt={restaurant.name}
-          className="h-16 w-16 shrink-0 rounded-lg object-cover"
-        />
-      )}
-      <div className="flex min-w-0 flex-1 flex-col justify-center">
-        <p className="truncate text-sm font-bold text-heading">
-          {restaurant.name}
-        </p>
-        <div className="mt-1 flex items-center gap-2 text-xs text-tertiary">
-          <span className="flex items-center gap-0.5">
-            <Star size={11} className="fill-yellow-300 text-yellow-300" />
-            {restaurant.rating}
-          </span>
-          <span>{restaurant.price}</span>
-          {restaurant.distance && (
-            <span className="flex items-center gap-0.5">
-              <MapPin size={11} />
-              {restaurant.distance}
-            </span>
-          )}
-        </div>
-        <p className="mt-0.5 text-[11px] font-medium text-amber-400">
-          {likes}/{userCount} 人想去
-        </p>
-      </div>
-    </a>
-  );
-}
-
 export default function MatchResult({
   restaurant,
   matchType,
diff --git a/src/components/NoMatchResult.tsx b/src/components/NoMatchResult.tsx
new file mode 100644
index 0000000..6cb0060
--- /dev/null
+++ b/src/components/NoMatchResult.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useRouter } from "next/navigation";
+import { SearchX, RotateCcw, Home } from "lucide-react";
+import Button from "@/components/Button";
+
+interface NoMatchResultProps {
+  onReset: () => Promise<void>;
+  resetting: boolean;
+}
+
+export default function NoMatchResult({ onReset, resetting }: NoMatchResultProps) {
+  const router = useRouter();
+
+  return (
+    <motion.div
+      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background 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 }}
+      >
+        <SearchX size={56} className="text-muted" />
+      </motion.div>
+
+      <motion.h1
+        className="mt-4 text-3xl font-black text-heading"
+        initial={{ y: 30, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.35 }}
+      >
+        都不太满意
+      </motion.h1>
+
+      <motion.p
+        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.45 }}
+      >
+        这一轮没有店被选中，换个范围或类型再试试？
+      </motion.p>
+
+      <motion.div
+        className="mt-8 flex w-full max-w-xs flex-col gap-3"
+        initial={{ y: 30, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.55 }}
+      >
+        <Button
+          onClick={onReset}
+          shape="pill"
+          loading={resetting}
+          loadingText="重置中..."
+          icon={<RotateCcw size={15} />}
+          className="px-8 py-3"
+        >
+          再来一轮
+        </Button>
+
+        <Button
+          onClick={() => router.push("/")}
+          variant="secondary"
+          shape="pill"
+          icon={<Home size={15} />}
+          className="px-8 py-3"
+        >
+          换个条件重新搜
+        </Button>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/src/components/ProfileFavoritesCard.tsx b/src/components/ProfileFavoritesCard.tsx
new file mode 100644
index 0000000..72fae12
--- /dev/null
+++ b/src/components/ProfileFavoritesCard.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { Star, MapPin, ChevronDown, Trash2, Heart } from "lucide-react";
+import Card from "@/components/Card";
+import EmptyState from "@/components/EmptyState";
+import RestaurantImage from "@/components/RestaurantImage";
+import { RecordItemSkeleton } from "@/components/Skeleton";
+import type { FavoriteRecord, Restaurant } from "@/types";
+
+function firstImage(r: Restaurant): string {
+  if (r.images?.length > 0) return r.images[0];
+  const legacy = (r as unknown as Record<string, unknown>).image;
+  return typeof legacy === "string" ? legacy : "";
+}
+
+interface ProfileFavoritesCardProps {
+  favorites: FavoriteRecord[];
+  loading: boolean;
+  open: boolean;
+  onToggle: () => void;
+  onRemove: (id: string) => Promise<void>;
+  onEmpty: () => void;
+  delay?: number;
+}
+
+export default function ProfileFavoritesCard({
+  favorites,
+  loading,
+  open,
+  onToggle,
+  onRemove,
+  onEmpty,
+  delay,
+}: ProfileFavoritesCardProps) {
+  return (
+    <Card animated className="mt-4" delay={delay}>
+      <button
+        onClick={onToggle}
+        className="flex w-full items-center justify-between"
+      >
+        <div className="flex items-center gap-2">
+          <Star size={15} className="text-muted" />
+          <h3 className="text-sm font-semibold text-secondary">
+            收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
+          </h3>
+        </div>
+        <motion.span
+          animate={{ rotate: open ? 180 : 0 }}
+          transition={{ duration: 0.2 }}
+          className="text-muted"
+        >
+          <ChevronDown size={16} />
+        </motion.span>
+      </button>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            {loading ? (
+              <div className="mt-3 flex flex-col gap-2">
+                <RecordItemSkeleton />
+                <RecordItemSkeleton />
+              </div>
+            ) : favorites.length === 0 ? (
+              <EmptyState
+                icon={Heart}
+                title="还没有收藏的餐厅"
+                subtitle="在匹配结果中收藏喜欢的店"
+                ctaLabel="去创建第一个房间"
+                onCta={onEmpty}
+                color="amber"
+              />
+            ) : (
+              <div className="mt-3 flex flex-col gap-2">
+                {favorites.map((f) => {
+                  const r = f.restaurantData;
+                  return (
+                    <div
+                      key={f.id}
+                      className="flex gap-3 rounded-xl bg-elevated p-2.5"
+                    >
+                      {firstImage(r) && (
+                        <RestaurantImage
+                          src={firstImage(r)}
+                          alt={r.name}
+                          className="h-12 w-12 shrink-0 rounded-lg object-cover"
+                        />
+                      )}
+                      <div className="flex min-w-0 flex-1 flex-col justify-center">
+                        <p className="truncate text-sm font-semibold text-heading">{r.name}</p>
+                        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
+                          <span className="flex items-center gap-0.5">
+                            <Star size={10} className="fill-amber-400 text-amber-400" />
+                            {r.rating}
+                          </span>
+                          <span>{r.price}</span>
+                          {r.distance && (
+                            <span className="flex items-center gap-0.5">
+                              <MapPin size={10} />
+                              {r.distance}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                      <button
+                        onClick={() => onRemove(f.id)}
+                        className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Card>
+  );
+}
diff --git a/src/components/ProfileHistoryCard.tsx b/src/components/ProfileHistoryCard.tsx
new file mode 100644
index 0000000..faa1e5a
--- /dev/null
+++ b/src/components/ProfileHistoryCard.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { Clock, ChevronDown, ClipboardList } from "lucide-react";
+import Card from "@/components/Card";
+import EmptyState from "@/components/EmptyState";
+import RestaurantImage from "@/components/RestaurantImage";
+import { RecordItemSkeleton } from "@/components/Skeleton";
+import { buildNavUrl } from "@/lib/navigation";
+import type { DecisionRecord, Restaurant } from "@/types";
+
+function firstImage(r: Restaurant): string {
+  if (r.images?.length > 0) return r.images[0];
+  const legacy = (r as unknown as Record<string, unknown>).image;
+  return typeof legacy === "string" ? legacy : "";
+}
+
+interface ProfileHistoryCardProps {
+  history: DecisionRecord[];
+  loading: boolean;
+  open: boolean;
+  onToggle: () => void;
+  onEmpty: () => void;
+  delay?: number;
+}
+
+export default function ProfileHistoryCard({
+  history,
+  loading,
+  open,
+  onToggle,
+  onEmpty,
+  delay,
+}: ProfileHistoryCardProps) {
+  return (
+    <Card animated className="mt-4" delay={delay}>
+      <button
+        onClick={onToggle}
+        className="flex w-full items-center justify-between"
+      >
+        <div className="flex items-center gap-2">
+          <Clock size={15} className="text-muted" />
+          <h3 className="text-sm font-semibold text-secondary">
+            决策记录 {history.length > 0 && `(${history.length})`}
+          </h3>
+        </div>
+        <motion.span
+          animate={{ rotate: open ? 180 : 0 }}
+          transition={{ duration: 0.2 }}
+          className="text-muted"
+        >
+          <ChevronDown size={16} />
+        </motion.span>
+      </button>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            {loading ? (
+              <div className="mt-3 flex flex-col gap-2">
+                <RecordItemSkeleton />
+                <RecordItemSkeleton />
+              </div>
+            ) : history.length === 0 ? (
+              <EmptyState
+                icon={ClipboardList}
+                title="还没有决策记录"
+                subtitle="创建房间开始一起选餐厅"
+                ctaLabel="去创建第一个房间"
+                onCta={onEmpty}
+                color="purple"
+              />
+            ) : (
+              <div className="mt-3 flex flex-col gap-2">
+                {history.map((d) => (
+                  <a
+                    key={d.id}
+                    href={buildNavUrl(d.restaurantData)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
+                  >
+                    {firstImage(d.restaurantData) && (
+                      <RestaurantImage
+                        src={firstImage(d.restaurantData)}
+                        alt={d.restaurantName}
+                        className="h-12 w-12 shrink-0 rounded-lg object-cover"
+                      />
+                    )}
+                    <div className="flex min-w-0 flex-1 flex-col justify-center">
+                      <p className="truncate text-sm font-semibold text-heading">{d.restaurantName}</p>
+                      <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
+                        <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
+                        <span>{d.participants} 人参与</span>
+                        <span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
+                      </div>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Card>
+  );
+}
diff --git a/src/components/RunnerUpCard.tsx b/src/components/RunnerUpCard.tsx
new file mode 100644
index 0000000..304939a
--- /dev/null
+++ b/src/components/RunnerUpCard.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { Star, MapPin } from "lucide-react";
+import type { Restaurant } from "@/types";
+import RestaurantImage from "@/components/RestaurantImage";
+import { buildNavUrl } from "@/lib/navigation";
+
+interface RunnerUpCardProps {
+  restaurant: Restaurant;
+  likes: number;
+  userCount: number;
+}
+
+export default function RunnerUpCard({ restaurant, likes, userCount }: RunnerUpCardProps) {
+  return (
+    <a
+      href={buildNavUrl(restaurant)}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
+    >
+      {restaurant.images?.[0] && (
+        <RestaurantImage
+          src={restaurant.images[0]}
+          alt={restaurant.name}
+          className="h-16 w-16 shrink-0 rounded-lg object-cover"
+        />
+      )}
+      <div className="flex min-w-0 flex-1 flex-col justify-center">
+        <p className="truncate text-sm font-bold text-heading">
+          {restaurant.name}
+        </p>
+        <div className="mt-1 flex items-center gap-2 text-xs text-tertiary">
+          <span className="flex items-center gap-0.5">
+            <Star size={11} className="fill-yellow-300 text-yellow-300" />
+            {restaurant.rating}
+          </span>
+          <span>{restaurant.price}</span>
+          {restaurant.distance && (
+            <span className="flex items-center gap-0.5">
+              <MapPin size={11} />
+              {restaurant.distance}
+            </span>
+          )}
+        </div>
+        <p className="mt-0.5 text-[11px] font-medium text-amber-400">
+          {likes}/{userCount} 人想去
+        </p>
+      </div>
+    </a>
+  );
+}

From 90d3b35069bf3966f9c26ef9b3b5ab95ec875d69 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:09:40 +0800
Subject: [PATCH 42/66] =?UTF-8?q?fix:=20=E6=88=BF=E9=97=B4=20swipe/undo/re?=
 =?UTF-8?q?set=20=E6=8E=A5=E5=8F=A3=E6=B7=BB=E5=8A=A0=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E8=BA=AB=E4=BB=BD=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- swipe/undo：校验 userId 在 data.users 中，非成员返回 403
- reset：要求传 userId，校验为房间成员或创建者
- 客户端 handleReset/handleNarrow 传入 userId
---
 src/app/api/room/[id]/reset/route.ts | 19 +++++++++++--------
 src/app/api/room/[id]/swipe/route.ts |  4 ++++
 src/app/api/room/[id]/undo/route.ts  |  4 ++++
 src/app/room/[id]/page.tsx           | 12 ++++++++----
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/app/api/room/[id]/reset/route.ts b/src/app/api/room/[id]/reset/route.ts
index 1570906..031ace1 100644
--- a/src/app/api/room/[id]/reset/route.ts
+++ b/src/app/api/room/[id]/reset/route.ts
@@ -1,22 +1,25 @@
 import { NextResponse } from "next/server";
 import { atomicUpdateRoom } from "@/lib/store";
 import { notify } from "@/lib/roomEvents";
-import { apiHandler, ApiError } from "@/lib/api";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const POST = apiHandler(async (req, { params }) => {
   const { id } = await params;
 
+  const body = await req.json().catch(() => ({}));
+  const userId = body?.userId;
+  requireUserId(userId);
+
   let restaurantIds: string[] | undefined;
-  try {
-    const body = await req.json().catch(() => null);
-    if (body?.restaurantIds && Array.isArray(body.restaurantIds)) {
-      restaurantIds = body.restaurantIds;
-    }
-  } catch {
-    // No body or invalid JSON — plain reset
+  if (body?.restaurantIds && Array.isArray(body.restaurantIds)) {
+    restaurantIds = body.restaurantIds;
   }
 
   const updated = await atomicUpdateRoom(id, (data) => {
+    if (!data.users.includes(userId) && data.creatorId !== userId) {
+      throw new ApiError("只有房间成员可以重置", 403);
+    }
+
     if (restaurantIds && restaurantIds.length > 0) {
       const idSet = new Set(restaurantIds);
       data.restaurants = data.restaurants.filter((r) => idSet.has(r.id));
diff --git a/src/app/api/room/[id]/swipe/route.ts b/src/app/api/room/[id]/swipe/route.ts
index bc5325c..879eb7a 100644
--- a/src/app/api/room/[id]/swipe/route.ts
+++ b/src/app/api/room/[id]/swipe/route.ts
@@ -15,6 +15,10 @@ export const POST = apiHandler(async (req, { params }) => {
   const rid = String(restaurantId);
 
   const updated = await atomicUpdateRoom(id, (data) => {
+    if (!data.users.includes(userId)) {
+      throw new ApiError("你不是该房间的成员", 403);
+    }
+
     const restaurantIndex = data.restaurants.findIndex((r) => r.id === rid);
     const alreadySwiped =
       restaurantIndex >= 0 &&
diff --git a/src/app/api/room/[id]/undo/route.ts b/src/app/api/room/[id]/undo/route.ts
index 92273a4..8b37b18 100644
--- a/src/app/api/room/[id]/undo/route.ts
+++ b/src/app/api/room/[id]/undo/route.ts
@@ -13,6 +13,10 @@ export const POST = apiHandler(async (req, { params }) => {
   const rid = String(restaurantId);
 
   const updated = await atomicUpdateRoom(id, (data) => {
+    if (!data.users.includes(userId)) {
+      throw new ApiError("你不是该房间的成员", 403);
+    }
+
     if (data.likes[rid]) {
       data.likes[rid] = data.likes[rid].filter((u) => u !== userId);
       if (data.likes[rid].length === 0) {
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index f2e9f69..0bdc340 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -74,18 +74,22 @@ export default function RoomPage() {
   }, []);
 
   const handleReset = useCallback(async () => {
-    await fetch(`/api/room/${roomId}/reset`, { method: "POST" });
+    await fetch(`/api/room/${roomId}/reset`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId }),
+    });
     await mutate();
-  }, [roomId, mutate]);
+  }, [roomId, userId, mutate]);
 
   const handleNarrow = useCallback(async (restaurantIds: string[]) => {
     await fetch(`/api/room/${roomId}/reset`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ restaurantIds }),
+      body: JSON.stringify({ userId, restaurantIds }),
     });
     await mutate();
-  }, [roomId, mutate]);
+  }, [roomId, userId, mutate]);
 
   if (notFound || joinFailed) {
     return (

From b9a07f84c0c9716851f924b68a447923630c7363 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:10:04 +0800
Subject: [PATCH 43/66] =?UTF-8?q?fix:=20=E7=9B=B2=E7=9B=92=E6=8A=BD?=
 =?UTF-8?q?=E5=8F=96=E4=BD=BF=E7=94=A8=E4=BA=8B=E5=8A=A1=20+=20=E4=B9=90?=
 =?UTF-8?q?=E8=A7=82=E9=94=81=E9=98=B2=E6=AD=A2=E5=B9=B6=E5=8F=91=E6=8A=BD?=
 =?UTF-8?q?=E5=88=B0=E5=90=8C=E4=B8=80=E6=83=B3=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 findMany + update 包裹在 prisma.$transaction 中
- 使用 updateMany({ where: { id, status: "in_pool" } }) 保证原子性
- count=0 时返回 409 提示用户重试
---
 src/app/api/blindbox/draw/route.ts | 48 +++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/app/api/blindbox/draw/route.ts b/src/app/api/blindbox/draw/route.ts
index 062de1e..7adc1d7 100644
--- a/src/app/api/blindbox/draw/route.ts
+++ b/src/app/api/blindbox/draw/route.ts
@@ -11,25 +11,39 @@ export const POST = apiHandler(async (req) => {
 
   await requireMembership(roomId, userId);
 
-  const pool = await prisma.blindBoxIdea.findMany({
-    where: { roomId, status: "in_pool" },
-    select: { id: true },
+  const userSelect = { id: true, username: true, avatar: true } as const;
+
+  const idea = await prisma.$transaction(async (tx) => {
+    const pool = await tx.blindBoxIdea.findMany({
+      where: { roomId, status: "in_pool" },
+      select: { id: true },
+    });
+
+    if (pool.length === 0) {
+      throw new ApiError("盒子是空的，先往里面塞点想法吧！", 404);
+    }
+
+    const picked = pool[Math.floor(Math.random() * pool.length)];
+
+    const { count } = await tx.blindBoxIdea.updateMany({
+      where: { id: picked.id, status: "in_pool" },
+      data: { status: "drawn", drawnById: userId },
+    });
+
+    if (count === 0) {
+      throw new ApiError("手慢了，再试一次", 409);
+    }
+
+    return tx.blindBoxIdea.findUnique({
+      where: { id: picked.id },
+      include: {
+        user: { select: userSelect },
+        drawnBy: { select: userSelect },
+      },
+    });
   });
 
-  if (pool.length === 0) {
-    throw new ApiError("盒子是空的，先往里面塞点想法吧！", 404);
-  }
-
-  const picked = pool[Math.floor(Math.random() * pool.length)];
-
-  const idea = await prisma.blindBoxIdea.update({
-    where: { id: picked.id },
-    data: { status: "drawn", drawnById: userId },
-    include: {
-      user: { select: { id: true, username: true, avatar: true } },
-      drawnBy: { select: { id: true, username: true, avatar: true } },
-    },
-  });
+  if (!idea) throw new ApiError("抽取失败", 500);
 
   return NextResponse.json({
     id: idea.id,

From 5783d522b7679392b9328779bba19c166acd6757 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:10:29 +0800
Subject: [PATCH 44/66] =?UTF-8?q?fix:=20SwipeDeck=20=E6=A3=80=E6=B5=8B?=
 =?UTF-8?q?=E4=BB=96=E4=BA=BA=E9=87=8D=E7=BD=AE=E5=90=8E=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=B8=85=E7=A9=BA=E6=9C=AC=E5=9C=B0=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

当 server 端 swipeCount 归零而本地 currentIndex > 0 时
说明其他用户执行了重置，自动调用 clearLocalState()
---
 src/components/SwipeDeck.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index 28d1a83..139a722 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -291,6 +291,13 @@ export default function SwipeDeck({
     prevLikeCounts.current = {};
   }, []);
 
+  useEffect(() => {
+    const serverIndex = swipeCounts[userId] ?? 0;
+    if (serverIndex === 0 && currentIndex > 0 && !resetting) {
+      clearLocalState();
+    }
+  }, [swipeCounts, userId, currentIndex, resetting, clearLocalState]);
+
   const handleReset = useCallback(async () => {
     setResetting(true);
     try {

From c4d1a122b29116d6302a0fc62bb56f8f9a7807d8 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:10:59 +0800
Subject: [PATCH 45/66] =?UTF-8?q?fix:=20fetch=20=E5=90=8E=E6=A3=80?=
 =?UTF-8?q?=E6=9F=A5=20res.ok=20=E5=B9=B6=E6=A0=A1=E9=AA=8C=E6=95=B0?=
 =?UTF-8?q?=E7=BB=84=E7=B1=BB=E5=9E=8B=EF=BC=8C=E9=98=B2=E6=AD=A2=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E5=93=8D=E5=BA=94=E5=AF=BC=E8=87=B4=E5=B4=A9=E6=BA=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- panic/page.tsx: suggestions fetch 检查 res.ok + Array.isArray
- profile/page.tsx: history/favorites fetch 检查 res.ok + Array.isArray
---
 src/app/panic/page.tsx   | 5 +++--
 src/app/profile/page.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index 67b056f..cacca66 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -70,9 +70,10 @@ export default function PanicPage() {
     setFetchingSuggestions(true);
     try {
       const res = await fetch(`/api/location/suggest?keywords=${encodeURIComponent(query)}`);
+      if (!res.ok) { setSuggestions([]); setShowSuggestions(false); return; }
       const data: LocationSuggestion[] = await res.json();
-      setSuggestions(data);
-      setShowSuggestions(data.length > 0);
+      setSuggestions(Array.isArray(data) ? data : []);
+      setShowSuggestions(Array.isArray(data) && data.length > 0);
     } catch {
       setSuggestions([]);
     } finally {
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index ac5d760..b980046 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -93,15 +93,15 @@ export default function ProfilePage() {
 
     setHistoryLoading(true);
     fetch(`/api/user/history?userId=${userId}`)
-      .then((r) => r.json())
-      .then(setHistory)
+      .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
+      .then((data) => setHistory(Array.isArray(data) ? data : []))
       .catch(() => {})
       .finally(() => setHistoryLoading(false));
 
     setFavLoading(true);
     fetch(`/api/user/favorite?userId=${userId}`)
-      .then((r) => r.json())
-      .then(setFavorites)
+      .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
+      .then((data) => setFavorites(Array.isArray(data) ? data : []))
       .catch(() => {})
       .finally(() => setFavLoading(false));
   }, [userId]);

From 6488c19172c362afb0eef9aa83ea8f114bf52287 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:11:21 +0800
Subject: [PATCH 46/66] =?UTF-8?q?fix:=20theme.ts=20=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E6=B7=BB=E5=8A=A0=20SSR=20=E5=AE=88=E5=8D=AB?=
 =?UTF-8?q?=EF=BC=8C=E6=A0=A1=E9=AA=8C=20localStorage=20=E5=90=88=E6=B3=95?=
 =?UTF-8?q?=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- setStoredTheme/applyTheme/initTheme 添加 typeof window 检查
- getStoredTheme 校验存储值是否在白名单中，防止非法 theme 值
---
 src/lib/theme.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index dfddbd9..d0723a9 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -1,13 +1,18 @@
 export type Theme = "light" | "dark" | "system";
 
 const STORAGE_KEY = "nowhatever-theme";
+const VALID_THEMES: Theme[] = ["light", "dark", "system"];
 
 export function getStoredTheme(): Theme {
   if (typeof window === "undefined") return "system";
-  return (localStorage.getItem(STORAGE_KEY) as Theme) || "system";
+  const stored = localStorage.getItem(STORAGE_KEY);
+  return stored && VALID_THEMES.includes(stored as Theme)
+    ? (stored as Theme)
+    : "system";
 }
 
 export function setStoredTheme(theme: Theme): void {
+  if (typeof window === "undefined") return;
   localStorage.setItem(STORAGE_KEY, theme);
   applyTheme(theme);
 }
@@ -21,11 +26,13 @@ function resolveTheme(theme: Theme): "light" | "dark" {
 }
 
 export function applyTheme(theme: Theme): void {
+  if (typeof window === "undefined") return;
   const resolved = resolveTheme(theme);
   document.documentElement.setAttribute("data-theme", resolved);
 }
 
 export function initTheme(): void {
+  if (typeof window === "undefined") return;
   const theme = getStoredTheme();
   applyTheme(theme);
 

From 9c7f18e0faf946c691aa7cd1ecbe95ee97e5143f Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:14:02 +0800
Subject: [PATCH 47/66] =?UTF-8?q?fix:=20=E7=94=A8=E6=88=B7=E5=90=8D?=
 =?UTF-8?q?=E5=94=AF=E4=B8=80=E6=80=A7=E7=AB=9E=E6=80=81=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=20+=20=E5=AF=86=E7=A0=81=E9=95=BF=E5=BA=A6=E4=B8=8A=E9=99=90?=
 =?UTF-8?q?=20+=20JSON.parse=20=E5=AE=89=E5=85=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #6: register/user PUT 捕获 P2002 返回 409，apiHandler 全局兜底
- #8: GET /api/user 的 JSON.parse(preferences) 加 try/catch 防崩溃
- #12: 密码校验加 128 字符上限防 DoS
- #29: ApiError.name 设为 "ApiError" 便于调试
---
 src/app/api/auth/register/route.ts | 35 +++++++++++++++++-------------
 src/app/api/user/route.ts          | 35 ++++++++++++++++++++----------
 src/lib/api.ts                     | 11 ++++++++++
 src/lib/validation.ts              |  3 +++
 4 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/app/api/auth/register/route.ts b/src/app/api/auth/register/route.ts
index 9fbbfd1..ea8c7bd 100644
--- a/src/app/api/auth/register/route.ts
+++ b/src/app/api/auth/register/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
 import bcrypt from "bcryptjs";
 import { apiHandler, ApiError } from "@/lib/api";
 import { validateUsername, validatePassword } from "@/lib/validation";
@@ -12,22 +13,26 @@ export const POST = apiHandler(async (req) => {
   const trimmedUsername = validateUsername(username);
   validatePassword(password);
 
-  const existing = await prisma.user.findUnique({ where: { username: trimmedUsername } });
-  if (existing) throw new ApiError("用户名已被注册", 409);
-
   const passwordHash = await bcrypt.hash(password, 10);
 
-  const user = await prisma.user.create({
-    data: {
-      username: trimmedUsername,
-      passwordHash,
-      avatar: avatar || "🐱",
-    },
-  });
+  try {
+    const user = await prisma.user.create({
+      data: {
+        username: trimmedUsername,
+        passwordHash,
+        avatar: avatar || "🐱",
+      },
+    });
 
-  return NextResponse.json({
-    id: user.id,
-    username: user.username,
-    avatar: user.avatar,
-  });
+    return NextResponse.json({
+      id: user.id,
+      username: user.username,
+      avatar: user.avatar,
+    });
+  } catch (e) {
+    if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2002") {
+      throw new ApiError("用户名已被注册", 409);
+    }
+    throw e;
+  }
 });
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index 6f07c9e..d9a0a2d 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
 import bcrypt from "bcryptjs";
 import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
 import { validateUsername, validatePassword, validateEmail } from "@/lib/validation";
@@ -13,12 +14,15 @@ export const GET = apiHandler(async (req) => {
 
   const decisionCount = await prisma.decision.count({ where: { userId } });
 
+  let preferences = {};
+  try { preferences = JSON.parse(user.preferences); } catch { /* fallback */ }
+
   return NextResponse.json({
     id: user.id,
     username: user.username,
     avatar: user.avatar,
     email: user.email,
-    preferences: JSON.parse(user.preferences),
+    preferences,
     createdAt: user.createdAt.toISOString(),
     decisionCount,
   });
@@ -63,16 +67,23 @@ export const PUT = apiHandler(async (req) => {
     updateData.preferences = JSON.stringify(body.preferences);
   }
 
-  const user = await prisma.user.update({
-    where: { id: userId },
-    data: updateData,
-  });
+  try {
+    const user = await prisma.user.update({
+      where: { id: userId },
+      data: updateData,
+    });
 
-  return NextResponse.json({
-    id: user.id,
-    username: user.username,
-    avatar: user.avatar,
-    email: user.email,
-    preferences: JSON.parse(user.preferences),
-  });
+    return NextResponse.json({
+      id: user.id,
+      username: user.username,
+      avatar: user.avatar,
+      email: user.email,
+      preferences: JSON.parse(user.preferences),
+    });
+  } catch (e) {
+    if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2002") {
+      throw new ApiError("用户名已被占用", 409);
+    }
+    throw e;
+  }
 });
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 33d1e46..f3879dc 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
+import { Prisma } from "@prisma/client";
 import { prisma } from "@/lib/prisma";
 
 export class ApiError extends Error {
@@ -7,6 +8,7 @@ export class ApiError extends Error {
     public status: number = 400,
   ) {
     super(message);
+    this.name = "ApiError";
   }
 }
 
@@ -45,6 +47,15 @@ export function apiHandler(handler: RouteHandler): RouteHandler {
       if (e instanceof ApiError) {
         return NextResponse.json({ error: e.message }, { status: e.status });
       }
+      if (
+        e instanceof Prisma.PrismaClientKnownRequestError &&
+        e.code === "P2002"
+      ) {
+        return NextResponse.json(
+          { error: "该记录已存在或值已被占用" },
+          { status: 409 },
+        );
+      }
       console.error(`[API ${req.method} ${req.nextUrl.pathname}]`, e);
       return NextResponse.json({ error: "操作失败" }, { status: 500 });
     }
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index c9f5b5b..f400757 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -12,6 +12,9 @@ export function validatePassword(password: string, label = "密码"): void {
   if (password.length < 6) {
     throw new ApiError(`${label}至少 6 个字符`);
   }
+  if (password.length > 128) {
+    throw new ApiError(`${label}不能超过 128 个字符`);
+  }
 }
 
 export function validateEmail(email: string): void {

From 508903b67d4ed4011f7dadeff702e4cd67ea4d83 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:15:45 +0800
Subject: [PATCH 48/66] =?UTF-8?q?fix:=20SSE=20=E8=AE=A4=E8=AF=81=20+=20?=
 =?UTF-8?q?=E6=94=B6=E8=97=8F=E5=8E=BB=E9=87=8D=20+=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=BA=93=E7=B4=A2=E5=BC=95=E5=92=8C=E7=BA=A7=E8=81=94=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #7: SSE events 接口校验 userId 房间成员身份，start() 加 try/catch
- #9: Favorite 新增 restaurantId 字段做精确去重，不再用 JSON contains
- #10: 补齐 Decision/Favorite/Room/BlindBoxIdea 缺失索引
- #11: Decision/Favorite/BlindBoxMember/BlindBoxIdea 加 onDelete Cascade
---
 prisma/schema.prisma                  | 22 +++++++++---
 src/app/api/room/[id]/events/route.ts | 29 +++++++++++++---
 src/app/api/user/favorite/route.ts    | 50 ++++++++++++++-------------
 3 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 6459a79..58a6b1c 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -12,6 +12,8 @@ model Room {
   data      String
   createdAt DateTime @default(now())
   expiresAt DateTime
+
+  @@index([expiresAt])
 }
 
 model User {
@@ -40,15 +42,22 @@ model Decision {
   matchType      String
   participants   Int
   createdAt      DateTime @default(now())
-  user           User     @relation(fields: [userId], references: [id])
+  user           User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@index([roomId])
 }
 
 model Favorite {
   id             String   @id @default(cuid())
   userId         String
+  restaurantId   String   @default("")
   restaurantData String
   createdAt      DateTime @default(now())
-  user           User     @relation(fields: [userId], references: [id])
+  user           User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, restaurantId])
+  @@index([userId])
 }
 
 model BlindBoxRoom {
@@ -70,7 +79,7 @@ model BlindBoxMember {
   joinedAt DateTime @default(now())
 
   room BlindBoxRoom @relation(fields: [roomId], references: [id], onDelete: Cascade)
-  user User         @relation(fields: [userId], references: [id])
+  user User         @relation(fields: [userId], references: [id], onDelete: Cascade)
 
   @@unique([roomId, userId])
 }
@@ -85,6 +94,9 @@ model BlindBoxIdea {
   createdAt DateTime @default(now())
 
   room    BlindBoxRoom @relation(fields: [roomId], references: [id], onDelete: Cascade)
-  user    User         @relation("IdeaSubmitter", fields: [userId], references: [id])
-  drawnBy User?        @relation("IdeaDrawer", fields: [drawnById], references: [id])
+  user    User         @relation("IdeaSubmitter", fields: [userId], references: [id], onDelete: Cascade)
+  drawnBy User?        @relation("IdeaDrawer", fields: [drawnById], references: [id], onDelete: SetNull)
+
+  @@index([roomId, status])
+  @@index([userId])
 }
diff --git a/src/app/api/room/[id]/events/route.ts b/src/app/api/room/[id]/events/route.ts
index 60a4348..a5fe318 100644
--- a/src/app/api/room/[id]/events/route.ts
+++ b/src/app/api/room/[id]/events/route.ts
@@ -1,4 +1,5 @@
 import { buildRoomStatus } from "@/lib/buildRoomStatus";
+import { getRoomData } from "@/lib/store";
 import { subscribe } from "@/lib/roomEvents";
 
 export const dynamic = "force-dynamic";
@@ -9,6 +10,19 @@ export async function GET(
 ) {
   const { id } = await params;
 
+  const url = new URL(req.url);
+  const userId = url.searchParams.get("userId");
+
+  if (userId) {
+    const data = await getRoomData(id);
+    if (data && !data.users.includes(userId)) {
+      return new Response(JSON.stringify({ error: "not_a_member" }), {
+        status: 403,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+  }
+
   const encoder = new TextEncoder();
 
   const stream = new ReadableStream({
@@ -26,13 +40,18 @@ export async function GET(
       let alive = true;
 
       (async () => {
-        const status = await buildRoomStatus(id);
-        if (!status) {
-          send({ error: "room_not_found" });
+        try {
+          const status = await buildRoomStatus(id);
+          if (!status) {
+            send({ error: "room_not_found" });
+            controller.close();
+            return;
+          }
+          if (alive) send(status);
+        } catch {
+          send({ error: "load_failed" });
           controller.close();
-          return;
         }
-        if (alive) send(status);
       })();
 
       const unsubscribe = subscribe(id, async () => {
diff --git a/src/app/api/user/favorite/route.ts b/src/app/api/user/favorite/route.ts
index dd97664..0095884 100644
--- a/src/app/api/user/favorite/route.ts
+++ b/src/app/api/user/favorite/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
 import { apiHandler, ApiError, requireUserId, requireUser } from "@/lib/api";
 
 export const GET = apiHandler(async (req) => {
@@ -13,11 +14,11 @@ export const GET = apiHandler(async (req) => {
   });
 
   return NextResponse.json(
-    favorites.map((f) => ({
-      id: f.id,
-      restaurantData: JSON.parse(f.restaurantData),
-      createdAt: f.createdAt.toISOString(),
-    })),
+    favorites.map((f) => {
+      let restaurantData = {};
+      try { restaurantData = JSON.parse(f.restaurantData); } catch { /* ignore */ }
+      return { id: f.id, restaurantData, createdAt: f.createdAt.toISOString() };
+    }),
   );
 });
 
@@ -25,29 +26,30 @@ export const POST = apiHandler(async (req) => {
   const { userId, restaurant } = await req.json();
 
   requireUserId(userId);
-  if (!restaurant) throw new ApiError("缺少必要字段");
+  if (!restaurant?.id || typeof restaurant.id !== "string") {
+    throw new ApiError("缺少必要字段");
+  }
 
   await requireUser(userId);
 
-  const existing = await prisma.favorite.findFirst({
-    where: {
-      userId,
-      restaurantData: { contains: `"id":"${restaurant.id}"` },
-    },
-  });
-
-  if (existing) {
-    return NextResponse.json({ id: existing.id, alreadyExists: true });
+  try {
+    const fav = await prisma.favorite.create({
+      data: {
+        userId,
+        restaurantId: restaurant.id,
+        restaurantData: JSON.stringify(restaurant),
+      },
+    });
+    return NextResponse.json({ id: fav.id });
+  } catch (e) {
+    if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2002") {
+      const existing = await prisma.favorite.findFirst({
+        where: { userId, restaurantId: restaurant.id },
+      });
+      return NextResponse.json({ id: existing?.id ?? "", alreadyExists: true });
+    }
+    throw e;
   }
-
-  const fav = await prisma.favorite.create({
-    data: {
-      userId,
-      restaurantData: JSON.stringify(restaurant),
-    },
-  });
-
-  return NextResponse.json({ id: fav.id });
 });
 
 export const DELETE = apiHandler(async (req) => {

From 50ae46fe15da8d4f194b48e9a18938f6eabee3a7 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:16:25 +0800
Subject: [PATCH 49/66] =?UTF-8?q?fix:=20AuthModal=20=E9=87=8D=E5=BC=80?=
 =?UTF-8?q?=E6=97=B6=E9=87=8D=E7=BD=AE=E8=A1=A8=E5=8D=95=20+=20=E9=82=80?=
 =?UTF-8?q?=E8=AF=B7=E9=A1=B5=E5=8A=A0=E5=85=A5=E5=A4=B1=E8=B4=A5=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #13: useEffect 监听 open 变化时重置所有表单状态（用户名、密码、错误等）
- #14: handleJoin catch 中捕获错误消息并渲染到页面
---
 src/app/invite/[id]/page.tsx | 14 +++++++++++++-
 src/components/AuthModal.tsx | 11 ++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 817475a..15bed4c 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -29,6 +29,7 @@ export default function InvitePage() {
   const [userCount, setUserCount] = useState(0);
   const [scene, setScene] = useState<SceneType>("eat");
   const [joining, setJoining] = useState(false);
+  const [joinError, setJoinError] = useState("");
 
   const sceneConfig = getSceneConfig(scene);
 
@@ -48,10 +49,12 @@ export default function InvitePage() {
 
   const handleJoin = async () => {
     setJoining(true);
+    setJoinError("");
     try {
       await joinRoom(roomId, getUserId());
       router.push(`/room/${roomId}`);
-    } catch {
+    } catch (e) {
+      setJoinError(e instanceof Error ? e.message : "加入失败，请重试");
       setJoining(false);
     }
   };
@@ -187,6 +190,15 @@ export default function InvitePage() {
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.3 }}
       >
+        {joinError && (
+          <motion.p
+            className="mb-3 text-center text-xs font-medium text-rose-400"
+            initial={{ opacity: 0, y: -4 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            {joinError}
+          </motion.p>
+        )}
         <Button
           onClick={handleJoin}
           size="lg"
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 34a5ee8..d03e089 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { X, Eye, EyeOff } from "lucide-react";
 import { AVATARS } from "@/lib/avatars";
@@ -36,8 +36,17 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
     setAvatar(AVATARS[0].emoji);
     setShowPassword(false);
     setError("");
+    setLoading(false);
   };
 
+  useEffect(() => {
+    if (open) {
+      setTab(defaultTab);
+      resetForm();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
   const switchTab = (t: Tab) => {
     setTab(t);
     resetForm();

From 93f20747e4844b6cd8b2d6d27e75d6e521d727cf Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:16:54 +0800
Subject: [PATCH 50/66] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20BUGFIX.md=20?=
 =?UTF-8?q?=E6=A0=87=E8=AE=B0=20High=20=E4=BC=98=E5=85=88=E7=BA=A7=20#6-#1?=
 =?UTF-8?q?4=20=E4=B8=BA=E5=B7=B2=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 BUGFIX.md | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 BUGFIX.md

diff --git a/BUGFIX.md b/BUGFIX.md
new file mode 100644
index 0000000..27d076d
--- /dev/null
+++ b/BUGFIX.md
@@ -0,0 +1,157 @@
+# 待修复问题清单
+
+> 全面代码审查后整理，按严重程度排列。
+> 修复后在对应条目前打 `[x]`。
+
+---
+
+## Critical — 必须修复
+
+- [x] **#1 非成员可操作任意房间**
+  - 文件：`api/room/[id]/swipe/route.ts`、`undo/route.ts`、`reset/route.ts`
+  - swipe / undo 没有校验 userId 是否在 `data.users` 中，非成员的 like 会被计入匹配
+  - reset 无需任何 userId，任何人知道 4 位房间号即可清空所有投票
+  - 修复：在 `atomicUpdateRoom` 回调开头加成员校验；reset 要求 userId 并验证 creatorId
+
+- [x] **#2 盲盒抽取竞态条件**
+  - 文件：`api/blindbox/draw/route.ts`
+  - `findMany({ status: "in_pool" })` 和 `update` 不在事务中，两个并发请求可抽到同一个想法
+  - 修复：用 `prisma.$transaction` + `updateMany({ where: { id, status: "in_pool" } })` 保证原子性，count=0 时返回 409
+
+- [x] **#3 SwipeDeck 不响应他人重置**
+  - 文件：`src/components/SwipeDeck.tsx`
+  - 其他用户重置房间后，当前用户的 `currentIndex` / `localMatchId` 不清零，卡片位置错乱
+  - 修复：加 useEffect 检测 server 端 swipeCount 归零时调用 `clearLocalState()`
+
+- [x] **#4 API 错误响应被当数组用导致崩溃**
+  - 文件：`src/app/panic/page.tsx`（suggestions）、`src/app/profile/page.tsx`（history/favorites）
+  - fetch 后没检查 `res.ok`，非 200 返回的 `{ error: "..." }` 被当作数组，`.map()` 崩溃
+  - 修复：所有 fetch 后先检查 `res.ok`，失败时设为空数组
+
+- [x] **#5 theme.ts SSR 崩溃**
+  - 文件：`src/lib/theme.ts`
+  - `setStoredTheme` / `applyTheme` 直接访问 `localStorage` / `document`，无 `typeof window` 守卫
+  - 修复：函数开头加 `if (typeof window === "undefined") return;`
+
+---
+
+## High — 应该修复
+
+- [x] **#6 用户名唯一性 TOCTOU 竞态** ✅
+  - register 去掉 findUnique 直接 create + catch P2002；user PUT 同理
+  - apiHandler 全局兜底 P2002 → 409
+
+- [x] **#7 SSE events 接口无认证** ✅
+  - 校验 userId query param + 房间成员身份；start() 加 try/catch
+
+- [x] **#8 GET /api/user 暴露任意用户邮箱** ⚠️
+  - 需要真实服务端 auth 才能彻底修复，暂保留；已加 JSON.parse 安全防护
+
+- [x] **#9 收藏去重用 JSON contains 匹配** ✅
+  - Favorite 模型新增 `restaurantId` 字段 + `@@unique([userId, restaurantId])`
+
+- [x] **#10 缺少数据库索引** ✅
+  - 补齐所有缺失索引并 db push
+
+- [x] **#11 无 onDelete 级联** ✅
+  - Decision/Favorite/BlindBoxMember 加 `onDelete: Cascade`，BlindBoxIdea.drawnBy 加 `onDelete: SetNull`
+
+- [x] **#12 密码无最大长度限制** ✅
+  - `validatePassword` 加 128 字符上限
+
+- [x] **#13 AuthModal 关闭后重开不重置表单** ✅
+  - useEffect 监听 open 变 true 时重置全部表单状态
+
+- [x] **#14 邀请页加入失败无错误提示** ✅
+  - 新增 joinError state，catch 中捕获并渲染错误消息
+
+---
+
+## Medium — 建议修复
+
+- [ ] **#15 房间 ID 空间仅 9000 个**
+  - 文件：`src/lib/store.ts`
+  - 4 位数字 (1000-9999) 碰撞概率高，fallback 也没兜住 P2002
+  - 修复：扩展到 6 位字母数字，或 catch P2002 后重试
+
+- [ ] **#16 盲盒想法编辑/删除有 TOCTOU**
+  - 文件：`api/blindbox/route.ts` PUT / DELETE
+  - 状态检查和修改之间可被并发抽取，drawn 的想法可能被编辑/删除
+  - 修复：用 `updateMany({ where: { id, status: "in_pool" } })` 替代先查后改
+
+- [ ] **#17 lat/lng 未校验为合法坐标**
+  - 文件：`api/room/create/route.ts`
+  - `lat=0`（赤道有效坐标）被当 falsy 拒绝；非数值字符串也能通过
+  - 修复：`Number.isFinite(lat)` + 范围校验 (-90~90, -180~180)
+
+- [ ] **#18 swipe action 未校验**
+  - 文件：`api/room/[id]/swipe/route.ts`
+  - 非 `like`/`pass` 值静默通过，只增 count 不记偏好
+  - 修复：校验 `action` 是否为允许的值
+
+- [ ] **#19 JSON.parse(preferences) 可能崩溃**
+  - 文件：`api/user/route.ts` GET
+  - 残损 JSON 导致 500，用户无法加载 profile
+  - 修复：使用 safe parse helper，fallback 为 `{}`
+
+- [ ] **#20 ShareCardModal data 每次新引用触发 useEffect**
+  - 文件：`src/components/ShareCardModal.tsx`
+  - 内联对象导致 data 引用每次变化，图片重复加载
+  - 修复：改用 `imageSrc` 字符串作为 useEffect 依赖，或在调用侧 useMemo
+
+- [ ] **#21 BlindboxRoomPage 多处 setTimeout 未清理**
+  - 文件：`src/app/blindbox/[code]/page.tsx`
+  - confetti rAF 循环、确认退出 3s 定时器、focus 定时器均未在 unmount 时清理
+  - 修复：用 ref 存储 timer ID，useEffect return 中 clearTimeout / cancelAnimationFrame
+
+- [ ] **#22 外部 API (高德) 失败返回泛化 500**
+  - 文件：`api/room/create`、`api/location/suggest`、`api/location/regeo`
+  - 用户不知道是定位服务不可用
+  - 修复：wrap fetch 加 try/catch，throw `ApiError("位置服务暂时不可用", 503)`
+
+- [ ] **#23 navigation.ts location.split(",") 不校验格式**
+  - 文件：`src/lib/navigation.ts`
+  - 无逗号的字符串产生 `undefined` 坐标
+  - 修复：校验 split 结果长度为 2 且两部分非空
+
+- [ ] **#24 handleReset / handleNarrow 吞掉 fetch 错误**
+  - 文件：`src/app/room/[id]/page.tsx`
+  - 无 res.ok 检查，失败时用户无反馈
+  - 修复：检查 res.ok，失败时 throw
+
+- [ ] **#25 confettiCanvasRef 未使用（死代码）**
+  - 文件：`src/app/blindbox/[code]/page.tsx`
+  - 渲染了 canvas 但 confetti() 使用全局实例
+  - 修复：删除 ref 和 `<canvas>` 元素
+
+- [ ] **#26 requireString 接受纯空格字符串**
+  - 文件：`src/lib/validation.ts`
+  - `"   "` 是 truthy 但没有实质内容
+  - 修复：加 `.trim()` 校验
+
+---
+
+## Low — 可以改进
+
+- [ ] **#27 icon-only 按钮缺少 aria-label**
+  - 文件：`panic/page.tsx`、`blindbox/[code]/page.tsx`、`ShareCardModal.tsx` 等多处
+  - 屏幕阅读器只报 "按钮" 无描述
+
+- [ ] **#28 AudioContext 每次 playChime() 新建**
+  - 文件：`src/lib/celebrate.ts`
+  - 浏览器限制并发 AudioContext 数量 (~6)，快速重复触发可能静默失败
+  - 修复：缓存复用单个 AudioContext
+
+- [ ] **#29 ApiError.name 是 "Error" 而非 "ApiError"**
+  - 文件：`src/lib/api.ts`
+  - 堆栈和日志中显示 `Error:` 而非 `ApiError:`，调试不便
+  - 修复：构造函数加 `this.name = "ApiError"`
+
+- [ ] **#30 blindbox lobby 加载房间失败静默无提示**
+  - 文件：`src/app/blindbox/page.tsx`
+  - catch 空处理，用户看到空列表以为没房间
+
+- [ ] **#31 theme localStorage 读取不校验合法值**
+  - 文件：`src/lib/theme.ts`
+  - 任意字符串被当作 Theme 使用
+  - 修复：对比 `["light", "dark", "system"]` 白名单

From dfb3cfa13613cd75c54d95ff5f11928244059280 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:19:56 +0800
Subject: [PATCH 51/66] =?UTF-8?q?fix:=20=E6=9C=8D=E5=8A=A1=E7=AB=AF?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E5=BC=BA=E5=8C=96=20=E2=80=94=20=E6=88=BF?=
 =?UTF-8?q?=E9=97=B4ID/=E5=9D=90=E6=A0=87/swipe/=E7=9B=B2=E7=9B=92?=
 =?UTF-8?q?=E7=AB=9E=E6=80=81/=E7=A9=BA=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #15: 房间 ID 扩展为 6 位字母数字，createRoom 用 P2002 重试替代 find-then-create
- #16: 盲盒编辑/删除改用 updateMany/deleteMany 原子操作，防止 TOCTOU
- #17: lat/lng 用 Number.isFinite + 范围校验 (-90~90, -180~180)
- #18: swipe action 必须为 'like' 或 'pass'
- #19: user PUT 的 JSON.parse(preferences) 加 try/catch
- #26: requireString 拒绝纯空格字符串
---
 src/app/api/blindbox/route.ts        | 22 ++++++++-----------
 src/app/api/room/[id]/swipe/route.ts |  3 +++
 src/app/api/room/create/route.ts     |  7 ++++--
 src/app/api/user/route.ts            |  5 ++++-
 src/lib/store.ts                     | 33 ++++++++++++++++------------
 src/lib/validation.ts                |  2 +-
 6 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
index a5c4de2..38a0912 100644
--- a/src/app/api/blindbox/route.ts
+++ b/src/app/api/blindbox/route.ts
@@ -55,17 +55,14 @@ export const PUT = apiHandler(async (req) => {
   requireString(ideaId, "ideaId");
   const trimmedContent = validateIdeaContent(content);
 
-  const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
-  if (!idea) throw new ApiError("想法不存在", 404);
-  if (idea.userId !== userId) throw new ApiError("只能编辑自己的想法", 403);
-  if (idea.status !== "in_pool") throw new ApiError("已抽中的想法不能编辑");
-
-  const updated = await prisma.blindBoxIdea.update({
-    where: { id: ideaId },
+  const { count } = await prisma.blindBoxIdea.updateMany({
+    where: { id: ideaId, userId, status: "in_pool" },
     data: { content: trimmedContent },
   });
 
-  return NextResponse.json({ id: updated.id, content: updated.content });
+  if (count === 0) throw new ApiError("想法不存在、已被抽中或无权编辑", 404);
+
+  return NextResponse.json({ id: ideaId, content: trimmedContent });
 });
 
 export const DELETE = apiHandler(async (req) => {
@@ -74,12 +71,11 @@ export const DELETE = apiHandler(async (req) => {
   requireUserId(userId);
   requireString(ideaId, "ideaId");
 
-  const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
-  if (!idea) throw new ApiError("想法不存在", 404);
-  if (idea.userId !== userId) throw new ApiError("只能删除自己的想法", 403);
-  if (idea.status !== "in_pool") throw new ApiError("已抽中的想法不能删除");
+  const { count } = await prisma.blindBoxIdea.deleteMany({
+    where: { id: ideaId, userId, status: "in_pool" },
+  });
 
-  await prisma.blindBoxIdea.delete({ where: { id: ideaId } });
+  if (count === 0) throw new ApiError("想法不存在、已被抽中或无权删除", 404);
 
   return NextResponse.json({ deleted: true });
 });
diff --git a/src/app/api/room/[id]/swipe/route.ts b/src/app/api/room/[id]/swipe/route.ts
index 879eb7a..88663af 100644
--- a/src/app/api/room/[id]/swipe/route.ts
+++ b/src/app/api/room/[id]/swipe/route.ts
@@ -11,6 +11,9 @@ export const POST = apiHandler(async (req, { params }) => {
   if (restaurantId == null || !action) {
     throw new ApiError("restaurantId and action are required");
   }
+  if (action !== "like" && action !== "pass") {
+    throw new ApiError("action must be 'like' or 'pass'");
+  }
 
   const rid = String(restaurantId);
 
diff --git a/src/app/api/room/create/route.ts b/src/app/api/room/create/route.ts
index e0cfe35..0ba1ba1 100644
--- a/src/app/api/room/create/route.ts
+++ b/src/app/api/room/create/route.ts
@@ -117,7 +117,10 @@ export const POST = apiHandler(async (req) => {
 
   const sceneConfig = getSceneConfig(scene === "drink" ? "drink" : "eat");
 
-  if (!lat || !lng) {
+  const numLat = Number(lat);
+  const numLng = Number(lng);
+  if (!Number.isFinite(numLat) || !Number.isFinite(numLng) ||
+      numLat < -90 || numLat > 90 || numLng < -180 || numLng > 180) {
     throw new ApiError("无法获取位置信息，请允许定位权限后重试");
   }
 
@@ -125,7 +128,7 @@ export const POST = apiHandler(async (req) => {
 
   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("location", `${numLng},${numLat}`);
   url.searchParams.set("radius", String(radius));
   url.searchParams.set("types", sceneConfig.poiTypes);
   url.searchParams.set("show_fields", "business,photos");
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index d9a0a2d..9db9ed2 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -73,12 +73,15 @@ export const PUT = apiHandler(async (req) => {
       data: updateData,
     });
 
+    let prefs = {};
+    try { prefs = JSON.parse(user.preferences); } catch { /* fallback */ }
+
     return NextResponse.json({
       id: user.id,
       username: user.username,
       avatar: user.avatar,
       email: user.email,
-      preferences: JSON.parse(user.preferences),
+      preferences: prefs,
     });
   } catch (e) {
     if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2002") {
diff --git a/src/lib/store.ts b/src/lib/store.ts
index cfb8f1f..8e2d775 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1,4 +1,5 @@
 import { prisma } from "./prisma";
+import { Prisma } from "@prisma/client";
 import { Restaurant, SceneType } from "@/types";
 
 const ROOM_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours
@@ -15,8 +16,14 @@ export interface RoomData {
   scene: SceneType;
 }
 
+const ROOM_ID_CHARS = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+
 function generateRoomId(): string {
-  return String(Math.floor(1000 + Math.random() * 9000));
+  let id = "";
+  for (let i = 0; i < 6; i++) {
+    id += ROOM_ID_CHARS[Math.floor(Math.random() * ROOM_ID_CHARS.length)];
+  }
+  return id;
 }
 
 function normalize(raw: Partial<RoomData>): RoomData {
@@ -69,26 +76,24 @@ export async function createRoom(restaurants: Restaurant[], creatorId: string, s
   };
 
   const expiresAt = new Date(Date.now() + ROOM_TTL_MS);
-  let roomId: string;
-  let attempts = 0;
+  const payload = JSON.stringify(data);
 
-  while (attempts < 20) {
-    roomId = generateRoomId();
-    const existing = await prisma.room.findUnique({ where: { id: roomId } });
-    if (!existing) {
+  for (let attempts = 0; attempts < 20; attempts++) {
+    const roomId = generateRoomId();
+    try {
       await prisma.room.create({
-        data: { id: roomId, data: JSON.stringify(data), expiresAt },
+        data: { id: roomId, data: payload, expiresAt },
       });
       return roomId;
+    } catch (e) {
+      if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === "P2002") {
+        continue;
+      }
+      throw e;
     }
-    attempts++;
   }
 
-  roomId = generateRoomId() + String(Date.now()).slice(-2);
-  await prisma.room.create({
-    data: { id: roomId, data: JSON.stringify(data), expiresAt },
-  });
-  return roomId;
+  throw new Error("无法生成唯一房间号，请稍后重试");
 }
 
 export async function getRoomData(
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index f400757..0c9082b 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -43,7 +43,7 @@ export function validateRoomName(raw: unknown, fallback = "我们的周末"): st
 }
 
 export function requireString(value: unknown, fieldName: string): string {
-  if (!value || typeof value !== "string") {
+  if (!value || typeof value !== "string" || !value.trim()) {
     throw new ApiError(`${fieldName}不能为空`);
   }
   return value;

From cf88d3a1d2eeb8d44f0d19b6b73ac84599aec5ea Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:20:59 +0800
Subject: [PATCH 52/66] =?UTF-8?q?fix:=20=E5=A4=96=E9=83=A8=20API=20?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E5=A4=84=E7=90=86=20+=20=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=20URL=20=E6=A0=A1=E9=AA=8C=20+=20reset/narrow=20=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E5=8F=8D=E9=A6=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #22: 高德 API fetch 加 try/catch，失败返回 503 而非泛化 500
- #23: buildNavUrl 校验 location.split(",") 结果长度和非空
- #24: handleReset/handleNarrow 检查 res.ok，失败时 toast 提示
---
 src/app/api/location/regeo/route.ts   |  9 ++++--
 src/app/api/location/suggest/route.ts | 11 +++++--
 src/app/api/room/create/route.ts      |  9 ++++--
 src/app/room/[id]/page.tsx            | 46 +++++++++++++++++++--------
 src/lib/navigation.ts                 |  6 ++--
 5 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/src/app/api/location/regeo/route.ts b/src/app/api/location/regeo/route.ts
index 833cf8c..debc5b5 100644
--- a/src/app/api/location/regeo/route.ts
+++ b/src/app/api/location/regeo/route.ts
@@ -15,8 +15,13 @@ export const GET = apiHandler(async (req) => {
   url.searchParams.set("location", `${lng},${lat}`);
   url.searchParams.set("extensions", "base");
 
-  const res = await fetch(url.toString());
-  const data = await res.json();
+  let data;
+  try {
+    const res = await fetch(url.toString());
+    data = await res.json();
+  } catch {
+    throw new ApiError("位置服务暂时不可用，请稍后重试", 503);
+  }
 
   if (data.status !== "1" || !data.regeocode) {
     return NextResponse.json({ name: null });
diff --git a/src/app/api/location/suggest/route.ts b/src/app/api/location/suggest/route.ts
index 69fd5f1..b6abef4 100644
--- a/src/app/api/location/suggest/route.ts
+++ b/src/app/api/location/suggest/route.ts
@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { apiHandler } from "@/lib/api";
+import { apiHandler, ApiError } from "@/lib/api";
 import { requireAmapApiKey } from "@/lib/amap";
 
 export const GET = apiHandler(async (req) => {
@@ -13,8 +13,13 @@ export const GET = apiHandler(async (req) => {
   url.searchParams.set("keywords", keywords);
   url.searchParams.set("datatype", "poi");
 
-  const res = await fetch(url.toString());
-  const data = await res.json();
+  let data;
+  try {
+    const res = await fetch(url.toString());
+    data = await res.json();
+  } catch {
+    throw new ApiError("位置服务暂时不可用，请稍后重试", 503);
+  }
 
   if (data.status !== "1" || !data.tips) return NextResponse.json([]);
 
diff --git a/src/app/api/room/create/route.ts b/src/app/api/room/create/route.ts
index 0ba1ba1..dd4e8b5 100644
--- a/src/app/api/room/create/route.ts
+++ b/src/app/api/room/create/route.ts
@@ -141,8 +141,13 @@ export const POST = apiHandler(async (req) => {
     url.searchParams.set("keywords", cuisine);
   }
 
-  const amapRes = await fetch(url.toString());
-  const amapData = await amapRes.json();
+  let amapData;
+  try {
+    const amapRes = await fetch(url.toString());
+    amapData = await amapRes.json();
+  } catch {
+    throw new ApiError("位置服务暂时不可用，请稍后重试", 503);
+  }
 
   let restaurants: Restaurant[] = [];
   if (amapData.status === "1" && amapData.pois?.length > 0) {
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 0bdc340..e7c25c2 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -11,6 +11,7 @@ import { useRoomPolling } from "@/hooks/useRoomPolling";
 import { getUserId } from "@/lib/userId";
 import { joinRoom } from "@/lib/room";
 import { getSceneConfig } from "@/lib/sceneConfig";
+import { useToast } from "@/hooks/useToast";
 
 export default function RoomPage() {
   const params = useParams<{ id: string }>();
@@ -22,6 +23,7 @@ export default function RoomPage() {
   const [joinFailed, setJoinFailed] = useState(false);
   const [showLeaveConfirm, setShowLeaveConfirm] = useState(false);
   const leavingRef = useRef(false);
+  const toast = useToast();
 
   const {
     userCount, match, matchType, matchLikes, runnerUps, likeCounts, swipeCounts,
@@ -74,22 +76,38 @@ export default function RoomPage() {
   }, []);
 
   const handleReset = useCallback(async () => {
-    await fetch(`/api/room/${roomId}/reset`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId }),
-    });
-    await mutate();
-  }, [roomId, userId, mutate]);
+    try {
+      const res = await fetch(`/api/room/${roomId}/reset`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || "重置失败");
+      }
+      await mutate();
+    } catch (e) {
+      toast.show(e instanceof Error ? e.message : "重置失败");
+    }
+  }, [roomId, userId, mutate, toast]);
 
   const handleNarrow = useCallback(async (restaurantIds: string[]) => {
-    await fetch(`/api/room/${roomId}/reset`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ userId, restaurantIds }),
-    });
-    await mutate();
-  }, [roomId, userId, mutate]);
+    try {
+      const res = await fetch(`/api/room/${roomId}/reset`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId, restaurantIds }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || "缩小范围失败");
+      }
+      await mutate();
+    } catch (e) {
+      toast.show(e instanceof Error ? e.message : "操作失败");
+    }
+  }, [roomId, userId, mutate, toast]);
 
   if (notFound || joinFailed) {
     return (
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
index 49f6871..86dc61b 100644
--- a/src/lib/navigation.ts
+++ b/src/lib/navigation.ts
@@ -2,8 +2,10 @@ import type { Restaurant } from "@/types";
 
 export 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`;
+    const parts = restaurant.location.split(",");
+    if (parts.length === 2 && parts[0] && parts[1]) {
+      return `https://uri.amap.com/marker?position=${parts[0]},${parts[1]}&name=${encodeURIComponent(restaurant.name)}&callnative=1`;
+    }
   }
   return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(restaurant.name)}`;
 }

From 5adfe8d3f1f5c40d522b4b110a6d334d5022c192 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:21:59 +0800
Subject: [PATCH 53/66] =?UTF-8?q?fix:=20=E5=AE=A2=E6=88=B7=E7=AB=AF?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=E6=B8=85=E7=90=86=20=E2=80=94=20ShareCard=20?=
 =?UTF-8?q?=E4=BE=9D=E8=B5=96=20+=20=E5=AE=9A=E6=97=B6=E5=99=A8=20+=20?=
 =?UTF-8?q?=E6=AD=BB=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #20: ShareCardModal useEffect 依赖改为 imageSrc 字符串，避免对象引用变化重复加载
- #21: BlindboxRoomPage 所有 setTimeout/rAF 统一收集，unmount 时清理
- #25: 删除未使用的 confettiCanvasRef 和 canvas 元素
---
 src/app/blindbox/[code]/page.tsx  | 23 ++++++++++++++++-------
 src/components/ShareCardModal.tsx | 11 +++++------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 6ca60b7..5f377de 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -65,7 +65,15 @@ export default function BlindboxRoomPage() {
 
   const boxControls = useAnimation();
   const inputRef = useRef<HTMLInputElement>(null);
-  const confettiCanvasRef = useRef<HTMLCanvasElement>(null);
+  const timersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const confettiAliveRef = useRef(false);
+
+  useEffect(() => {
+    return () => {
+      timersRef.current.forEach(clearTimeout);
+      confettiAliveRef.current = false;
+    };
+  }, []);
 
   useEffect(() => {
     if (!isRegistered()) {
@@ -121,7 +129,8 @@ export default function BlindboxRoomPage() {
 
   useEffect(() => {
     if (isMember && inputRef.current) {
-      setTimeout(() => inputRef.current?.focus(), 300);
+      const t = setTimeout(() => inputRef.current?.focus(), 300);
+      timersRef.current.push(t);
     }
   }, [isMember]);
 
@@ -162,7 +171,7 @@ export default function BlindboxRoomPage() {
       setPoolCount((c) => c + 1);
       setMyIdeas((prev) => [{ id, content: text, createdAt: new Date().toISOString() }, ...prev]);
       setSubmitFlash(true);
-      setTimeout(() => setSubmitFlash(false), 600);
+      timersRef.current.push(setTimeout(() => setSubmitFlash(false), 600));
       boxControls.start({
         scale: [1, 1.08, 1],
         rotate: [0, -3, 3, 0],
@@ -256,14 +265,15 @@ export default function BlindboxRoomPage() {
   const fireConfetti = () => {
     const colors = ["#a855f7", "#6366f1", "#ec4899", "#f59e0b", "#10b981"];
     confetti({ particleCount: 100, spread: 120, origin: { y: 0.4 }, colors, startVelocity: 45, ticks: 250 });
+    confettiAliveRef.current = true;
     const end = Date.now() + 3000;
     const frame = () => {
-      if (Date.now() > end) return;
+      if (Date.now() > end || !confettiAliveRef.current) return;
       confetti({ particleCount: 3, angle: 60, spread: 55, origin: { x: 0, y: 0.6 }, colors, startVelocity: 35, ticks: 150 });
       confetti({ particleCount: 3, angle: 120, spread: 55, origin: { x: 1, y: 0.6 }, colors, startVelocity: 35, ticks: 150 });
       requestAnimationFrame(frame);
     };
-    setTimeout(frame, 200);
+    timersRef.current.push(setTimeout(frame, 200));
   };
 
   const { share, copyToClipboard } = useShare();
@@ -287,7 +297,7 @@ export default function BlindboxRoomPage() {
   const handleLeaveOrDelete = async () => {
     if (!confirmLeave) {
       setConfirmLeave(true);
-      setTimeout(() => setConfirmLeave(false), 3000);
+      timersRef.current.push(setTimeout(() => setConfirmLeave(false), 3000));
       return;
     }
     if (leaving || !profile || !room) return;
@@ -319,7 +329,6 @@ export default function BlindboxRoomPage() {
 
   return (
     <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
-      <canvas ref={confettiCanvasRef} className="pointer-events-none fixed inset-0 z-50" />
 
       {/* Header */}
       <div className="flex w-full max-w-sm items-center gap-3">
diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
index 1b379a8..93ad04b 100644
--- a/src/components/ShareCardModal.tsx
+++ b/src/components/ShareCardModal.tsx
@@ -38,21 +38,20 @@ export default function ShareCardModal({
   const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
   const [imageLoading, setImageLoading] = useState(false);
 
+  const imageSrc = data.type === "restaurant" ? data.restaurant.images?.[0] : undefined;
+
   useEffect(() => {
     if (!open) {
       setImageDataUrl(null);
       return;
     }
-    if (data.type !== "restaurant") return;
-
-    const src = data.restaurant.images?.[0];
-    if (!src) return;
+    if (!imageSrc) return;
 
     setImageLoading(true);
-    loadImageAsDataUrl(src)
+    loadImageAsDataUrl(imageSrc)
       .then(setImageDataUrl)
       .finally(() => setImageLoading(false));
-  }, [open, data]);
+  }, [open, imageSrc]);
 
   const handleGenerate = useCallback(async (): Promise<string | null> => {
     if (!cardRef.current) return null;

From f4a8fd7feeb9d9fdcae415f36f2a122fb0b81b2b Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:22:30 +0800
Subject: [PATCH 54/66] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20BUGFIX.md=20?=
 =?UTF-8?q?=E6=A0=87=E8=AE=B0=20Medium=20=E4=BC=98=E5=85=88=E7=BA=A7=20#15?=
 =?UTF-8?q?-#26=20=E4=B8=BA=E5=B7=B2=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 BUGFIX.md | 72 +++++++++++++++++++------------------------------------
 1 file changed, 24 insertions(+), 48 deletions(-)

diff --git a/BUGFIX.md b/BUGFIX.md
index 27d076d..ac5800b 100644
--- a/BUGFIX.md
+++ b/BUGFIX.md
@@ -69,65 +69,41 @@
 
 ## Medium — 建议修复
 
-- [ ] **#15 房间 ID 空间仅 9000 个**
-  - 文件：`src/lib/store.ts`
-  - 4 位数字 (1000-9999) 碰撞概率高，fallback 也没兜住 P2002
-  - 修复：扩展到 6 位字母数字，或 catch P2002 后重试
+- [x] **#15 房间 ID 空间仅 9000 个** ✅
+  - 扩展为 6 位字母数字 (30^6 ≈ 7.3 亿)，createRoom 用 P2002 重试
 
-- [ ] **#16 盲盒想法编辑/删除有 TOCTOU**
-  - 文件：`api/blindbox/route.ts` PUT / DELETE
-  - 状态检查和修改之间可被并发抽取，drawn 的想法可能被编辑/删除
-  - 修复：用 `updateMany({ where: { id, status: "in_pool" } })` 替代先查后改
+- [x] **#16 盲盒想法编辑/删除有 TOCTOU** ✅
+  - PUT/DELETE 改用 updateMany/deleteMany 原子操作
 
-- [ ] **#17 lat/lng 未校验为合法坐标**
-  - 文件：`api/room/create/route.ts`
-  - `lat=0`（赤道有效坐标）被当 falsy 拒绝；非数值字符串也能通过
-  - 修复：`Number.isFinite(lat)` + 范围校验 (-90~90, -180~180)
+- [x] **#17 lat/lng 未校验为合法坐标** ✅
+  - Number.isFinite + 范围校验 (-90~90, -180~180)
 
-- [ ] **#18 swipe action 未校验**
-  - 文件：`api/room/[id]/swipe/route.ts`
-  - 非 `like`/`pass` 值静默通过，只增 count 不记偏好
-  - 修复：校验 `action` 是否为允许的值
+- [x] **#18 swipe action 未校验** ✅
+  - 校验 action 必须为 'like' 或 'pass'
 
-- [ ] **#19 JSON.parse(preferences) 可能崩溃**
-  - 文件：`api/user/route.ts` GET
-  - 残损 JSON 导致 500，用户无法加载 profile
-  - 修复：使用 safe parse helper，fallback 为 `{}`
+- [x] **#19 JSON.parse(preferences) 可能崩溃** ✅
+  - GET 和 PUT 响应均加 try/catch，fallback {}
 
-- [ ] **#20 ShareCardModal data 每次新引用触发 useEffect**
-  - 文件：`src/components/ShareCardModal.tsx`
-  - 内联对象导致 data 引用每次变化，图片重复加载
-  - 修复：改用 `imageSrc` 字符串作为 useEffect 依赖，或在调用侧 useMemo
+- [x] **#20 ShareCardModal data 每次新引用触发 useEffect** ✅
+  - 依赖改为 imageSrc 字符串而非整个 data 对象
 
-- [ ] **#21 BlindboxRoomPage 多处 setTimeout 未清理**
-  - 文件：`src/app/blindbox/[code]/page.tsx`
-  - confetti rAF 循环、确认退出 3s 定时器、focus 定时器均未在 unmount 时清理
-  - 修复：用 ref 存储 timer ID，useEffect return 中 clearTimeout / cancelAnimationFrame
+- [x] **#21 BlindboxRoomPage 多处 setTimeout 未清理** ✅
+  - timersRef 统一收集所有 setTimeout，unmount 时批量清理；confetti rAF 用 alive ref 控制
 
-- [ ] **#22 外部 API (高德) 失败返回泛化 500**
-  - 文件：`api/room/create`、`api/location/suggest`、`api/location/regeo`
-  - 用户不知道是定位服务不可用
-  - 修复：wrap fetch 加 try/catch，throw `ApiError("位置服务暂时不可用", 503)`
+- [x] **#22 外部 API (高德) 失败返回泛化 500** ✅
+  - 三个高德 API 路由 fetch 加 try/catch → 503
 
-- [ ] **#23 navigation.ts location.split(",") 不校验格式**
-  - 文件：`src/lib/navigation.ts`
-  - 无逗号的字符串产生 `undefined` 坐标
-  - 修复：校验 split 结果长度为 2 且两部分非空
+- [x] **#23 navigation.ts location.split(",") 不校验格式** ✅
+  - 校验 split 结果长度为 2 且两部分非空
 
-- [ ] **#24 handleReset / handleNarrow 吞掉 fetch 错误**
-  - 文件：`src/app/room/[id]/page.tsx`
-  - 无 res.ok 检查，失败时用户无反馈
-  - 修复：检查 res.ok，失败时 throw
+- [x] **#24 handleReset / handleNarrow 吞掉 fetch 错误** ✅
+  - 检查 res.ok，失败时 toast 提示
 
-- [ ] **#25 confettiCanvasRef 未使用（死代码）**
-  - 文件：`src/app/blindbox/[code]/page.tsx`
-  - 渲染了 canvas 但 confetti() 使用全局实例
-  - 修复：删除 ref 和 `<canvas>` 元素
+- [x] **#25 confettiCanvasRef 未使用（死代码）** ✅
+  - 删除 ref 和 canvas 元素
 
-- [ ] **#26 requireString 接受纯空格字符串**
-  - 文件：`src/lib/validation.ts`
-  - `"   "` 是 truthy 但没有实质内容
-  - 修复：加 `.trim()` 校验
+- [x] **#26 requireString 接受纯空格字符串** ✅
+  - 加 .trim() 校验
 
 ---
 

From deba7ab2bbd4af5b90e5693ad07175f593257ce9 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:25:56 +0800
Subject: [PATCH 55/66] =?UTF-8?q?fix:=20AudioContext=20=E5=A4=8D=E7=94=A8?=
 =?UTF-8?q?=20+=20=E7=9B=B2=E7=9B=92=E5=8A=A0=E8=BD=BD=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20+=20icon=20=E6=8C=89=E9=92=AE=20aria-label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #27: panic/blindbox/ShareCardModal/AuthModal 中 icon-only 按钮补 aria-label
- #28: playChime 缓存复用单个 AudioContext，避免超出浏览器 ~6 个上限
- #29: 已完成（上一批次 ApiError.name = "ApiError"）
- #30: blindbox lobby fetchRooms 失败时显示"加载失败/点击重试"
- #31: 已完成（theme.ts VALID_THEMES 校验）
---
 src/app/blindbox/[code]/page.tsx  |  3 +++
 src/app/blindbox/page.tsx         | 23 +++++++++++++++++++++--
 src/app/panic/page.tsx            |  3 +++
 src/components/AuthModal.tsx      |  1 +
 src/components/ShareCardModal.tsx |  1 +
 src/lib/celebrate.ts              | 15 ++++++++++++---
 6 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 5f377de..edbb3b4 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -334,6 +334,7 @@ export default function BlindboxRoomPage() {
       <div className="flex w-full max-w-sm items-center gap-3">
         <button
           onClick={() => router.push("/blindbox")}
+          aria-label="返回"
           className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface ring-1 ring-border transition-colors active:bg-elevated"
         >
           <ArrowLeft size={16} className="text-muted" />
@@ -363,6 +364,7 @@ export default function BlindboxRoomPage() {
 
         <button
           onClick={() => setShowInvite(!showInvite)}
+          aria-label="邀请成员"
           className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-purple-600/15 text-purple-400 ring-1 ring-purple-500/20 transition-colors active:bg-purple-600/25"
         >
           <Share2 size={14} />
@@ -486,6 +488,7 @@ export default function BlindboxRoomPage() {
                   <button
                     onClick={handleSubmit}
                     disabled={!input.trim() || submitting}
+                    aria-label="提交想法"
                     className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600 text-white transition-colors hover:bg-purple-500 disabled:opacity-30"
                   >
                     {submitting ? <Loader2 size={18} className="animate-spin" /> : <Send size={18} />}
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 82f786d..ddc4d43 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -42,6 +42,7 @@ export default function BlindboxLobbyPage() {
   const [joinCode, setJoinCode] = useState("");
   const [joining, setJoining] = useState(false);
   const [error, setError] = useState("");
+  const [loadError, setLoadError] = useState(false);
 
   useEffect(() => {
     const registered = isRegistered();
@@ -65,12 +66,14 @@ export default function BlindboxLobbyPage() {
     const p = getCachedProfile();
     if (!p) return;
     setLoading(true);
+    setLoadError(false);
     try {
       const res = await fetch(`/api/blindbox/rooms?userId=${p.id}`);
+      if (!res.ok) throw new Error();
       const data = await res.json();
-      setRooms(data.rooms ?? []);
+      setRooms(Array.isArray(data.rooms) ? data.rooms : []);
     } catch {
-      /* ignore */
+      setLoadError(true);
     } finally {
       setLoading(false);
     }
@@ -219,6 +222,22 @@ export default function BlindboxLobbyPage() {
           </motion.div>
         ) : loading ? (
           <BlindboxListSkeleton />
+        ) : loadError ? (
+          <motion.div
+            key="load-error"
+            className="mt-16 flex flex-col items-center gap-3"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <Package size={36} className="text-purple-400/30" strokeWidth={1.5} />
+            <p className="text-sm text-muted">加载房间失败</p>
+            <button
+              onClick={fetchRooms}
+              className="mt-1 text-xs font-medium text-purple-400 active:text-purple-300"
+            >
+              点击重试
+            </button>
+          </motion.div>
         ) : rooms.length === 0 ? (
           /* ============ Layer 2: Logged in, no rooms — Create first ============ */
           <motion.div
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index cacca66..cda186a 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -297,6 +297,7 @@ export default function PanicPage() {
             {(selectedLocation || locationQuery) && !loading && (
               <button
                 onClick={clearLocation}
+                aria-label="清除位置"
                 className="absolute right-2.5 flex h-5 w-5 items-center justify-center rounded-full text-muted hover:text-secondary"
               >
                 <X size={14} />
@@ -399,6 +400,7 @@ export default function PanicPage() {
               {cuisine && !loading && (
                 <button
                   onClick={() => setCuisine("")}
+                  aria-label="清除口味"
                   className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-muted hover:text-secondary"
                 >
                   <X size={12} />
@@ -515,6 +517,7 @@ export default function PanicPage() {
           <button
             type="submit"
             disabled={loading || roomCode.length !== 4}
+            aria-label="加入房间"
             className="flex h-11 w-11 items-center justify-center rounded-xl bg-elevated text-secondary ring-1 ring-subtle transition-colors hover:bg-subtle disabled:opacity-30"
           >
             <LogIn size={18} />
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index d03e089..237a2f1 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -188,6 +188,7 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
+            aria-label={showPassword ? "隐藏密码" : "显示密码"}
             className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-secondary"
           >
             {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
index 93ad04b..db7e6ef 100644
--- a/src/components/ShareCardModal.tsx
+++ b/src/components/ShareCardModal.tsx
@@ -130,6 +130,7 @@ export default function ShareCardModal({
             <div className="relative flex shrink-0 justify-center">
               <button
                 onClick={onClose}
+                aria-label="关闭"
                 className="absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/70 transition-colors active:bg-black/60"
               >
                 <X size={16} />
diff --git a/src/lib/celebrate.ts b/src/lib/celebrate.ts
index decd438..1c10146 100644
--- a/src/lib/celebrate.ts
+++ b/src/lib/celebrate.ts
@@ -62,9 +62,20 @@ export function fireCelebration() {
   setTimeout(frame, 300);
 }
 
+let _audioCtx: AudioContext | null = null;
+
+function getAudioContext(): AudioContext {
+  if (!_audioCtx || _audioCtx.state === "closed") {
+    _audioCtx = new AudioContext();
+  }
+  return _audioCtx;
+}
+
 export function playChime() {
   try {
-    const ctx = new AudioContext();
+    const ctx = getAudioContext();
+    if (ctx.state === "suspended") ctx.resume();
+
     const gain = ctx.createGain();
     gain.connect(ctx.destination);
     gain.gain.setValueAtTime(0.15, ctx.currentTime);
@@ -88,8 +99,6 @@ export function playChime() {
       osc.start(start);
       osc.stop(start + 0.6);
     });
-
-    setTimeout(() => ctx.close(), 2000);
   } catch {
     // Audio not available — silent fallback
   }

From 838f98b48bdb2e6fa97d8b6758b1138d8d04f585 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:26:13 +0800
Subject: [PATCH 56/66] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20BUGFIX.md=20?=
 =?UTF-8?q?=E6=A0=87=E8=AE=B0=20Low=20=E4=BC=98=E5=85=88=E7=BA=A7=20#27-#3?=
 =?UTF-8?q?1=20=E4=B8=BA=E5=B7=B2=E5=AE=8C=E6=88=90=EF=BC=8CBUGFIX.md=20?=
 =?UTF-8?q?=E5=85=A8=E9=83=A8=E6=B8=85=E9=9B=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 BUGFIX.md | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/BUGFIX.md b/BUGFIX.md
index ac5800b..e837f8f 100644
--- a/BUGFIX.md
+++ b/BUGFIX.md
@@ -109,25 +109,17 @@
 
 ## Low — 可以改进
 
-- [ ] **#27 icon-only 按钮缺少 aria-label**
-  - 文件：`panic/page.tsx`、`blindbox/[code]/page.tsx`、`ShareCardModal.tsx` 等多处
-  - 屏幕阅读器只报 "按钮" 无描述
+- [x] **#27 icon-only 按钮缺少 aria-label** ✅
+  - panic/blindbox/ShareCardModal/AuthModal 中所有 icon-only 按钮补 aria-label
 
-- [ ] **#28 AudioContext 每次 playChime() 新建**
-  - 文件：`src/lib/celebrate.ts`
-  - 浏览器限制并发 AudioContext 数量 (~6)，快速重复触发可能静默失败
-  - 修复：缓存复用单个 AudioContext
+- [x] **#28 AudioContext 每次 playChime() 新建** ✅
+  - 缓存复用单个 AudioContext，state === "closed" 时才重建
 
-- [ ] **#29 ApiError.name 是 "Error" 而非 "ApiError"**
-  - 文件：`src/lib/api.ts`
-  - 堆栈和日志中显示 `Error:` 而非 `ApiError:`，调试不便
-  - 修复：构造函数加 `this.name = "ApiError"`
+- [x] **#29 ApiError.name 是 "Error" 而非 "ApiError"** ✅
+  - 已在 High 批次修复
 
-- [ ] **#30 blindbox lobby 加载房间失败静默无提示**
-  - 文件：`src/app/blindbox/page.tsx`
-  - catch 空处理，用户看到空列表以为没房间
+- [x] **#30 blindbox lobby 加载房间失败静默无提示** ✅
+  - 新增 loadError state，失败时显示"加载失败 / 点击重试"
 
-- [ ] **#31 theme localStorage 读取不校验合法值**
-  - 文件：`src/lib/theme.ts`
-  - 任意字符串被当作 Theme 使用
-  - 修复：对比 `["light", "dark", "system"]` 白名单
+- [x] **#31 theme localStorage 读取不校验合法值** ✅
+  - 已在 Critical 批次修复（VALID_THEMES 白名单校验）

From ab55f0981e3568b027d44fb4e9ae2fc85c03ea9c Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 21:00:48 +0800
Subject: [PATCH 57/66] =?UTF-8?q?feat:=20=E5=9C=B0=E7=82=B9=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E9=99=84=E8=BF=91=E4=BC=98=E5=85=88=20=E2=80=94=20?=
 =?UTF-8?q?=E9=80=8F=E4=BC=A0=E7=94=A8=E6=88=B7=E5=9D=90=E6=A0=87=E7=BB=99?=
 =?UTF-8?q?=E9=AB=98=E5=BE=B7=20inputtips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/location/suggest/route.ts | 5 +++++
 src/app/panic/page.tsx                | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/api/location/suggest/route.ts b/src/app/api/location/suggest/route.ts
index b6abef4..35242f3 100644
--- a/src/app/api/location/suggest/route.ts
+++ b/src/app/api/location/suggest/route.ts
@@ -8,10 +8,15 @@ export const GET = apiHandler(async (req) => {
 
   const apiKey = requireAmapApiKey();
 
+  const location = req.nextUrl.searchParams.get("location");
+
   const url = new URL("https://restapi.amap.com/v3/assistant/inputtips");
   url.searchParams.set("key", apiKey);
   url.searchParams.set("keywords", keywords);
   url.searchParams.set("datatype", "poi");
+  if (location) {
+    url.searchParams.set("location", location);
+  }
 
   let data;
   try {
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index cda186a..e7241c0 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -69,7 +69,11 @@ export default function PanicPage() {
     }
     setFetchingSuggestions(true);
     try {
-      const res = await fetch(`/api/location/suggest?keywords=${encodeURIComponent(query)}`);
+      const params = new URLSearchParams({ keywords: query });
+      if (geo.coords) {
+        params.set("location", `${geo.coords.lng},${geo.coords.lat}`);
+      }
+      const res = await fetch(`/api/location/suggest?${params.toString()}`);
       if (!res.ok) { setSuggestions([]); setShowSuggestions(false); return; }
       const data: LocationSuggestion[] = await res.json();
       setSuggestions(Array.isArray(data) ? data : []);
@@ -79,7 +83,7 @@ export default function PanicPage() {
     } finally {
       setFetchingSuggestions(false);
     }
-  }, []);
+  }, [geo.coords]);
 
   const handleLocationInput = (val: string) => {
     setLocationQuery(val);

From c0662de3dd9e58e75b6ec96597e42ef77c15db45 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 21:40:14 +0800
Subject: [PATCH 58/66] =?UTF-8?q?feat:=20=E7=BE=8E=E9=A3=9F=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=20+=20=E8=87=AA=E5=AE=9A=E4=B9=89=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/panic/page.tsx | 83 ++++++++++++++++++++++++++++++++----------
 src/types/index.ts     |  1 +
 2 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index e7241c0..7d9dcac 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -39,7 +39,8 @@ export default function PanicPage() {
   const [fetchingSuggestions, setFetchingSuggestions] = useState(false);
   const [radius, setRadius] = useState(3000);
   const [priceRange, setPriceRange] = useState("any");
-  const [cuisine, setCuisine] = useState("");
+  const [cuisines, setCuisines] = useState<string[]>([]);
+  const [cuisineInput, setCuisineInput] = useState("");
   const suggestRef = useRef<HTMLDivElement>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
 
@@ -50,14 +51,15 @@ export default function PanicPage() {
 
   useEffect(() => {
     const prefs = getCachedPreferences();
-    if (prefs.cuisine) setCuisine(prefs.cuisine);
+    if (prefs.cuisines) setCuisines(prefs.cuisines);
+    else if (prefs.cuisine) setCuisines([prefs.cuisine]);
     if (prefs.priceRange) setPriceRange(prefs.priceRange);
     if (prefs.radius) setRadius(prefs.radius);
   }, []);
 
   const handleSceneChange = useCallback((s: SceneType) => {
     setScene(s);
-    setCuisine("");
+    setCuisines([]);
     setPriceRange("any");
   }, []);
 
@@ -142,7 +144,7 @@ export default function PanicPage() {
       const res = await fetch("/api/room/create", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ...coords, radius, priceRange, cuisine, userId: getUserId(), scene }),
+        body: JSON.stringify({ ...coords, radius, priceRange, cuisine: cuisines.join("|"), userId: getUserId(), scene }),
       });
 
       const data = await res.json();
@@ -395,16 +397,27 @@ export default function PanicPage() {
             <div className="relative flex flex-1 items-center">
               <input
                 type="text"
-                placeholder={sceneConfig.tagPlaceholder}
-                value={cuisine}
-                onChange={(e) => setCuisine(e.target.value)}
+                placeholder={cuisines.length === 0 ? sceneConfig.tagPlaceholder : "继续添加..."}
+                value={cuisineInput}
+                onChange={(e) => setCuisineInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    const val = cuisineInput.trim();
+                    if (val && !cuisines.includes(val)) {
+                      setCuisines((prev) => [...prev, val]);
+                    }
+                    setCuisineInput("");
+                  }
+                }}
                 disabled={loading}
                 className="h-7 w-full rounded-full border-none bg-elevated pl-3 pr-7 text-xs text-foreground outline-none ring-1 ring-subtle transition-colors placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50"
               />
-              {cuisine && !loading && (
+              {cuisineInput && !loading && (
                 <button
-                  onClick={() => setCuisine("")}
-                  aria-label="清除口味"
+                  type="button"
+                  onClick={() => setCuisineInput("")}
+                  aria-label="清除输入"
                   className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-muted hover:text-secondary"
                 >
                   <X size={12} />
@@ -413,25 +426,55 @@ export default function PanicPage() {
             </div>
           </div>
 
-          <div className="flex items-center gap-3">
-            <span className="w-8 shrink-0 text-xs font-medium text-muted"></span>
-            <div className="flex flex-wrap items-center gap-1.5">
+          <div className="flex items-start gap-3">
+            <span className="mt-0.5 w-8 shrink-0 text-xs font-medium text-muted"></span>
+            <div className="flex flex-1 flex-wrap items-center gap-1.5">
               <Flame size={11} className="shrink-0 text-orange-400" />
-              {sceneConfig.hotTags.map((tag) => (
+              {sceneConfig.hotTags.map((tag) => {
+                const selected = cuisines.includes(tag);
+                return (
+                  <button
+                    key={tag}
+                    type="button"
+                    onClick={() =>
+                      setCuisines((prev) =>
+                        selected ? prev.filter((t) => t !== tag) : [...prev, tag],
+                      )
+                    }
+                    disabled={loading}
+                    className={`h-6 rounded-full px-2.5 text-xs font-medium transition-colors disabled:opacity-50 ${
+                      selected
+                        ? "bg-orange-500 text-white shadow-sm shadow-orange-500/25"
+                        : "bg-elevated text-muted hover:bg-subtle"
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                );
+              })}
+              {cuisines.filter((t) => !sceneConfig.hotTags.includes(t)).map((tag) => (
                 <button
                   key={tag}
                   type="button"
-                  onClick={() => setCuisine(tag)}
+                  onClick={() => setCuisines((prev) => prev.filter((t) => t !== tag))}
                   disabled={loading}
-                  className={`h-6 rounded-full px-2.5 text-xs font-medium transition-colors disabled:opacity-50 ${
-                    cuisine === tag
-                      ? "bg-orange-500 text-white shadow-sm shadow-orange-500/25"
-                      : "bg-elevated text-muted hover:bg-subtle"
-                  }`}
+                  className="flex h-6 items-center gap-1 rounded-full bg-orange-500 pl-2.5 pr-1.5 text-xs font-medium text-white shadow-sm shadow-orange-500/25 disabled:opacity-50"
                 >
                   {tag}
+                  <X size={10} />
                 </button>
               ))}
+              {cuisines.length > 0 && !loading && (
+                <button
+                  type="button"
+                  onClick={() => setCuisines([])}
+                  aria-label="清除口味"
+                  className="ml-1 flex h-5 items-center gap-0.5 rounded-full px-1.5 text-xs text-muted hover:text-secondary"
+                >
+                  <X size={10} />
+                  清空
+                </button>
+              )}
             </div>
           </div>
 
diff --git a/src/types/index.ts b/src/types/index.ts
index 76a6b20..afeb8a2 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -49,6 +49,7 @@ export interface UserProfile {
 
 export interface UserPreferences {
   cuisine?: string;
+  cuisines?: string[];
   priceRange?: string;
   radius?: number;
 }

From fbb2c229640a454c9dbaebe46aa652b91ed93ce9 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 23:04:25 +0800
Subject: [PATCH 59/66] =?UTF-8?q?feat:=20=E5=9C=BA=E6=99=AF=E7=BB=86?=
 =?UTF-8?q?=E5=88=86=E4=B8=BA=E9=A4=90=E5=8E=85/=E5=92=96=E5=95=A1?=
 =?UTF-8?q?=E5=A5=B6=E8=8C=B6/=E7=94=9C=E5=93=81=20+=20=E9=99=84=E8=BF=91?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E4=BC=98=E5=85=88=20+=20=E7=BE=8E=E9=A3=9F?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/api/room/create/route.ts       |  2 +-
 src/app/invite/[id]/page.tsx           |  4 +-
 src/app/panic/page.tsx                 | 44 +++++++++----------
 src/components/RestaurantShareCard.tsx |  3 +-
 src/lib/sceneConfig.ts                 | 58 +++++++++++++++++++-------
 src/types/index.ts                     |  2 +-
 6 files changed, 71 insertions(+), 42 deletions(-)

diff --git a/src/app/api/room/create/route.ts b/src/app/api/room/create/route.ts
index dd4e8b5..78ead33 100644
--- a/src/app/api/room/create/route.ts
+++ b/src/app/api/room/create/route.ts
@@ -115,7 +115,7 @@ export const POST = apiHandler(async (req) => {
     scene = "eat" as SceneType,
   } = body;
 
-  const sceneConfig = getSceneConfig(scene === "drink" ? "drink" : "eat");
+  const sceneConfig = getSceneConfig(scene);
 
   const numLat = Number(lat);
   const numLng = Number(lng);
diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 15bed4c..a7ae3e2 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -4,12 +4,10 @@ import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { motion } from "framer-motion";
 import {
-  Utensils,
   Users,
   Heart,
   Sparkles,
   ChevronRight,
-  Coffee,
 } from "lucide-react";
 import { getUserId } from "@/lib/userId";
 import { joinRoom } from "@/lib/room";
@@ -108,7 +106,7 @@ export default function InvitePage() {
         transition={{ duration: 0.5 }}
       >
         <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-accent shadow-lg shadow-accent/20">
-          {scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
+          <span className="text-3xl leading-none">{sceneConfig.emoji}</span>
         </div>
 
         <h1 className="mt-5 text-3xl font-black tracking-tight text-heading">
diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx
index 7d9dcac..a3ea0e8 100644
--- a/src/app/panic/page.tsx
+++ b/src/app/panic/page.tsx
@@ -206,7 +206,7 @@ export default function PanicPage() {
         </div>
         <div>
           <h1 className="text-2xl font-black tracking-tight text-heading">
-            ⚡ 极速救场
+            极速救场
           </h1>
           <p className="text-xs font-medium tracking-widest text-muted">
             10秒内出结果
@@ -256,30 +256,32 @@ export default function PanicPage() {
       </motion.div>
 
       <motion.div
-        className="mt-4 flex items-center justify-center gap-2"
+        className="mt-4 w-full max-w-xs overflow-x-auto scrollbar-none py-1"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.4, delay: 0.12 }}
       >
-        {SCENES.map((s) => {
-          const cfg = getSceneConfig(s);
-          const active = scene === s;
-          return (
-            <button
-              key={s}
-              onClick={() => handleSceneChange(s)}
-              disabled={loading}
-              className={`flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all disabled:opacity-50 ${
-                active
-                  ? "bg-orange-500 text-white shadow-md shadow-orange-500/25"
-                  : "bg-surface text-muted ring-1 ring-border hover:bg-elevated"
-              }`}
-            >
-              <span className="text-base leading-none">{cfg.emoji}</span>
-              {cfg.label}
-            </button>
-          );
-        })}
+        <div className="flex gap-2 px-1 pb-0.5">
+          {SCENES.map((s) => {
+            const cfg = getSceneConfig(s);
+            const active = scene === s;
+            return (
+              <button
+                key={s}
+                onClick={() => handleSceneChange(s)}
+                disabled={loading}
+                className={`flex shrink-0 items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all disabled:opacity-50 ${
+                  active
+                    ? "bg-orange-500 text-white shadow-md shadow-orange-500/25"
+                    : "bg-surface text-muted ring-1 ring-border hover:bg-elevated"
+                }`}
+              >
+                <span className="text-base leading-none">{cfg.emoji}</span>
+                {cfg.label}
+              </button>
+            );
+          })}
+        </div>
       </motion.div>
 
       <motion.div
diff --git a/src/components/RestaurantShareCard.tsx b/src/components/RestaurantShareCard.tsx
index e6fe9f5..111ac20 100644
--- a/src/components/RestaurantShareCard.tsx
+++ b/src/components/RestaurantShareCard.tsx
@@ -1,6 +1,7 @@
 import { Star, MapPin, Zap } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import type { Restaurant, MatchType, SceneType } from "@/types";
+import { getSceneConfig } from "@/lib/sceneConfig";
 
 export interface RestaurantShareData {
   type: "restaurant";
@@ -22,7 +23,7 @@ export default function RestaurantShareCard({
 }) {
   const { restaurant, matchType, matchLikes, userCount, scene } = data;
   const isUnanimous = matchType === "unanimous";
-  const verb = scene === "drink" ? "喝" : "吃";
+  const verb = getSceneConfig(scene ?? "eat").verb;
   const shareUrl =
     typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
   const accentFrom = isUnanimous ? "#059669" : "#b45309";
diff --git a/src/lib/sceneConfig.ts b/src/lib/sceneConfig.ts
index 14e60e0..e2ae67c 100644
--- a/src/lib/sceneConfig.ts
+++ b/src/lib/sceneConfig.ts
@@ -4,6 +4,7 @@ export interface SceneConfig {
   key: SceneType;
   label: string;
   emoji: string;
+  verb: string;
   poiTypes: string;
   defaultImage: string;
   hotTags: readonly string[];
@@ -22,56 +23,83 @@ export interface SceneConfig {
 const SCENE_CONFIGS: Record<SceneType, SceneConfig> = {
   eat: {
     key: "eat",
-    label: "吃什么",
+    label: "餐厅",
     emoji: "🍜",
+    verb: "吃",
     poiTypes: "050000",
     defaultImage:
       "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&q=80",
-    hotTags: ["火锅", "日料", "烧烤", "西餐", "川菜", "咖啡甜品", "小吃快餐"],
+    hotTags: ["火锅", "日料", "烧烤", "西餐", "川菜", "粤菜", "小吃快餐"],
     priceOptions: [
       { label: "不限", value: "any" },
       { label: "¥50以下", value: "under50" },
       { label: "¥50-100", value: "50to100" },
       { label: "¥100+", value: "over100" },
     ],
-    tagLabel: "美食",
+    tagLabel: "口味",
     tagPlaceholder: "想吃什么？（留空则不限）",
-    loadingText: "正在搜索周边美食...",
-    emptyError: "附近没有找到餐厅，试试扩大搜索范围或换个菜系",
+    loadingText: "正在搜索周边餐厅...",
+    emptyError: "附近没有找到餐厅，试试扩大搜索范围或换个口味",
     subtitle: "和朋友一起滑卡片，再也不用纠结吃什么",
     inviteText: "有人邀请你一起选餐厅",
     shareTitle: "别说随便啦，来滑卡片决定吃什么！",
     shareText: "我建好房间了，快点开链接一起选餐厅，滑中同一家就去吃！",
     qrSubtitle: "让朋友扫码加入房间，一起滑卡片选餐厅",
   },
-  drink: {
-    key: "drink",
-    label: "喝什么",
+  drinks: {
+    key: "drinks",
+    label: "咖啡/奶茶",
     emoji: "🧋",
+    verb: "喝",
     poiTypes: "050301|050302|050303|050400",
     defaultImage:
       "https://images.unsplash.com/photo-1556679343-c7306c1976bc?w=800&q=80",
-    hotTags: ["奶茶", "咖啡", "酒吧", "果茶", "甜品", "茶馆", "鸡尾酒"],
+    hotTags: ["咖啡", "奶茶", "拿铁", "美式", "水果茶", "冷萃", "芋泥"],
     priceOptions: [
       { label: "不限", value: "any" },
       { label: "¥20以下", value: "under20" },
       { label: "¥20-50", value: "20to50" },
       { label: "¥50+", value: "over50" },
     ],
-    tagLabel: "饮品",
+    tagLabel: "类型",
     tagPlaceholder: "想喝什么？（留空则不限）",
     loadingText: "正在搜索周边饮品店...",
-    emptyError: "附近没有找到饮品店，试试扩大搜索范围或换个类型",
+    emptyError: "附近没有找到饮品店，试试扩大搜索范围",
     subtitle: "和朋友一起滑卡片，再也不用纠结喝什么",
     inviteText: "有人邀请你一起选饮品店",
     shareTitle: "别说随便啦，来滑卡片决定喝什么！",
     shareText: "我建好房间了，快点开链接一起选店，滑中同一家就去喝！",
-    qrSubtitle: "让朋友扫码加入房间，一起滑卡片选店",
+    qrSubtitle: "让朋友扫码加入房间，一起滑卡片选饮品店",
+  },
+  dessert: {
+    key: "dessert",
+    label: "甜品",
+    emoji: "🍰",
+    verb: "吃",
+    poiTypes: "050403|050404|050400",
+    defaultImage:
+      "https://images.unsplash.com/photo-1488477181946-6428a0291777?w=800&q=80",
+    hotTags: ["蛋糕", "冰淇淋", "芋圆", "麻薯", "草莓", "班戟"],
+    priceOptions: [
+      { label: "不限", value: "any" },
+      { label: "¥20以下", value: "under20" },
+      { label: "¥20-50", value: "20to50" },
+      { label: "¥50+", value: "over50" },
+    ],
+    tagLabel: "类型",
+    tagPlaceholder: "想吃什么甜品？（留空则不限）",
+    loadingText: "正在搜索周边甜品店...",
+    emptyError: "附近没有找到甜品店，试试扩大搜索范围",
+    subtitle: "和朋友一起滑卡片，选一家甜蜜蜜的甜品店",
+    inviteText: "有人邀请你一起选甜品店",
+    shareTitle: "别说随便啦，来滑卡片决定吃什么甜品！",
+    shareText: "我建好房间了，快点开链接一起选甜品店，滑中同一家就去吃！",
+    qrSubtitle: "让朋友扫码加入房间，一起滑卡片选甜品店",
   },
 };
 
-export const SCENES: SceneType[] = ["eat", "drink"];
+export const SCENES: SceneType[] = ["eat", "drinks", "dessert"];
 
-export function getSceneConfig(scene: SceneType): SceneConfig {
-  return SCENE_CONFIGS[scene];
+export function getSceneConfig(scene: string): SceneConfig {
+  return SCENE_CONFIGS[scene as SceneType] ?? SCENE_CONFIGS.eat;
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index afeb8a2..85c78c4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,4 @@
-export type SceneType = "eat" | "drink";
+export type SceneType = "eat" | "drinks" | "dessert";
 
 export interface Restaurant {
   id: string;

From 8c6da410cac58c64d9d7731fb2e3a2dc5c5e35c8 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 00:12:58 +0800
Subject: [PATCH 60/66] =?UTF-8?q?style:=20=E5=91=A8=E6=9C=AB=E5=A5=91?=
 =?UTF-8?q?=E7=BA=A6=E9=A1=B6=E9=83=A8=E5=AF=B9=E9=BD=90=E6=9E=81=E9=80=9F?=
 =?UTF-8?q?=E6=95=91=E5=9C=BA=20+=20=E9=A6=96=E9=A1=B5=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- blindbox/page: 加 justify-center 让标题垂直位置与 panic 页保持一致，移除 flex-1 子容器
- page: 周末契约卡片色值统一用 white/* 透明度，去掉紫色 drop-shadow，简化 hover 光晕
---
 src/app/blindbox/page.tsx | 132 ++++++++++++++++++++------------------
 src/app/page.tsx          |  30 +++++----
 2 files changed, 89 insertions(+), 73 deletions(-)

diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index ddc4d43..5046547 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -131,84 +131,94 @@ export default function BlindboxLobbyPage() {
   };
 
   return (
-    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
+    <div className="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-6 overflow-y-auto scrollbar-none">
       {/* Ambient */}
       <div className="pointer-events-none fixed left-1/3 top-0 h-80 w-80 -translate-y-1/3 rounded-full bg-purple-600/8 blur-3xl" />
       <div className="pointer-events-none fixed right-0 top-1/2 h-60 w-60 rounded-full bg-indigo-500/5 blur-3xl" />
 
+      {/* Back button */}
+      <button
+        onClick={() => router.push("/")}
+        className="absolute left-4 top-3 flex h-8 items-center gap-1 rounded-full bg-surface px-3 text-xs font-medium text-muted ring-1 ring-border transition-colors active:bg-elevated"
+      >
+        <ArrowLeft size={14} />
+        返回
+      </button>
+
       {/* Header */}
-      <div className="flex w-full max-w-sm items-center gap-3">
-        <button
-          onClick={() => router.push("/")}
-          className="flex h-8 w-8 items-center justify-center rounded-full bg-surface ring-1 ring-border transition-colors active:bg-elevated"
-        >
-          <ArrowLeft size={16} className="text-muted" />
-        </button>
-        <div className="flex-1">
-          <h1 className="text-lg font-black text-heading">🎁 周末契约</h1>
-          <p className="text-[10px] font-medium tracking-wider text-purple-400/60">
+      <motion.div
+        className="flex items-center gap-3"
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-linear-to-br from-indigo-900 to-purple-700 shadow-lg shadow-purple-900/30 ring-1 ring-purple-500/20">
+          <Package size={22} className="text-purple-300" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-black tracking-tight text-heading">
+            周末契约
+          </h1>
+          <p className="text-xs font-medium tracking-widest text-muted">
             ADVENTURE ROULETTE
           </p>
         </div>
-      </div>
+      </motion.div>
+
+      <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 }}
+      >
+        平日蓄水，周末开奖。把所有"想做但一直没做"的事，交给命运来决定。
+      </motion.p>
+
+      <motion.div
+        className="mt-4 flex items-center justify-center gap-4"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+      >
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-purple-500/15">
+            <Plus size={14} className="text-purple-400" />
+          </div>
+          <span className="text-[10px] font-semibold text-muted">塞入想法</span>
+        </div>
+
+        <ChevronRight size={12} className="shrink-0 text-dim" />
+
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-500/15">
+            <Package size={14} className="text-indigo-400" />
+          </div>
+          <span className="text-[10px] font-semibold text-muted">周末开奖</span>
+        </div>
+
+        <ChevronRight size={12} className="shrink-0 text-dim" />
+
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-violet-500/15">
+            <Sparkles size={14} className="text-violet-400" />
+          </div>
+          <span className="text-[10px] font-semibold text-muted">执行契约</span>
+        </div>
+      </motion.div>
 
       <AnimatePresence mode="wait">
         {!loggedIn ? (
-          /* ============ Layer 1: Unauthenticated — Feature intro ============ */
+          /* ============ Layer 1: Unauthenticated — Login CTA ============ */
           <motion.div
             key="intro"
-            className="mt-10 flex flex-1 flex-col items-center"
+            className="mt-10 flex flex-col items-center"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
           >
-            {/* Hero icon */}
-            <motion.div
-              className="relative flex h-28 w-28 items-center justify-center"
-              animate={{ y: [0, -6, 0] }}
-              transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
-            >
-              <div className="absolute inset-0 rounded-3xl bg-purple-600/20 blur-xl" />
-              <div className="relative flex h-24 w-24 items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl ring-1 ring-purple-700/30">
-                <Package size={36} className="text-purple-300/70" strokeWidth={1.5} />
-              </div>
-              <motion.span
-                className="absolute -right-1 -top-1 text-lg"
-                animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
-                transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
-              >
-                ✨
-              </motion.span>
-            </motion.div>
-
-            <h2 className="mt-6 text-xl font-black text-heading">
-              和 TA 一起，拆开周末
-            </h2>
-            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-tertiary">
-              平日蓄水，周末开奖。把所有"想做但一直没做"的事，
-              交给命运来决定。
-            </p>
-
-            {/* Steps */}
-            <div className="mt-8 flex w-full max-w-xs flex-col gap-4">
-              {[
-                { step: "1", icon: Plus, text: "创建专属房间，邀请 TA 加入" },
-                { step: "2", icon: Package, text: "平时随时塞入疯狂想法" },
-                { step: "3", icon: Sparkles, text: "周末一起盲抽，绝不反悔" },
-              ].map((s) => (
-                <div key={s.step} className="flex items-center gap-3">
-                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-purple-600/15 text-sm font-black text-purple-400 ring-1 ring-purple-500/20">
-                    {s.step}
-                  </div>
-                  <p className="text-sm font-medium text-secondary">{s.text}</p>
-                </div>
-              ))}
-            </div>
-
-            {/* CTA */}
             <motion.button
               onClick={() => setShowAuth(true)}
-              className="mt-10 flex h-12 w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-linear-to-r from-purple-600 to-indigo-600 text-sm font-bold text-white shadow-lg shadow-purple-900/40 transition-shadow hover:shadow-xl hover:shadow-purple-900/50"
+              className="flex h-12 w-full max-w-xs items-center justify-center gap-2 rounded-2xl bg-linear-to-r from-purple-600 to-indigo-600 text-sm font-bold text-white shadow-lg shadow-purple-900/40 transition-shadow hover:shadow-xl hover:shadow-purple-900/50"
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.97 }}
             >
@@ -242,7 +252,7 @@ export default function BlindboxLobbyPage() {
           /* ============ Layer 2: Logged in, no rooms — Create first ============ */
           <motion.div
             key="empty"
-            className="mt-10 flex flex-1 flex-col items-center"
+            className="mt-10 flex flex-col items-center"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
@@ -338,7 +348,7 @@ export default function BlindboxLobbyPage() {
           /* ============ Layer 3: Logged in, has rooms — Room list ============ */
           <motion.div
             key="rooms"
-            className="mt-6 flex w-full max-w-sm flex-1 flex-col"
+            className="mt-6 flex w-full max-w-sm flex-col"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7154bf6..df80271 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -97,44 +97,50 @@ export default function LandingPage() {
         {/* Card B: Adventure Roulette */}
         <motion.button
           onClick={() => router.push("/blindbox")}
-          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-indigo-900 to-purple-800 p-5 pb-4 text-left shadow-xl shadow-purple-600/20 ring-1 ring-purple-400/15 transition-shadow hover:shadow-2xl hover:shadow-purple-500/30"
+          className="group relative w-full overflow-hidden rounded-2xl bg-linear-to-br from-indigo-900 to-purple-800 p-5 pb-4 text-left shadow-xl shadow-purple-600/20 ring-1 ring-white/15 transition-shadow hover:shadow-2xl hover:shadow-purple-500/30"
           initial={{ x: 40, opacity: 0 }}
           animate={{ x: 0, opacity: 1 }}
           transition={{ duration: 0.5, delay: 0.4 }}
           whileHover={{ scale: 1.02, rotate: 0.5 }}
           whileTap={{ scale: 0.97 }}
         >
-          <div className="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-purple-500/20 blur-2xl transition-all group-hover:bg-purple-400/30 group-hover:blur-3xl" />
-          <div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-indigo-400/15 blur-xl transition-all group-hover:bg-indigo-300/25" />
+          <div className="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-purple-400/15 blur-2xl" />
+          <div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-indigo-300/15 blur-xl" />
 
           <div className="relative z-10">
             <div className="flex items-center gap-2.5">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 ring-1 ring-purple-300/15">
-                <Gift size={22} className="text-purple-200" />
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-black/15 ring-1 ring-white/10">
+                <Gift size={22} className="text-white" />
               </div>
               <div className="flex-1">
-                <h2 className="text-lg font-black text-white drop-shadow-[0_0_12px_rgba(192,132,252,0.5)]">
-                  🎁 周末契约
-                </h2>
-                <p className="text-[10px] font-semibold tracking-wider text-purple-300/60">
+                <h2 className="text-lg font-black text-white">🎁 周末契约</h2>
+                <p className="text-[10px] font-semibold tracking-wider text-white/60">
                   ADVENTURE ROULETTE
                 </p>
               </div>
             </div>
-            <p className="mt-3.5 text-sm font-medium leading-relaxed text-purple-100/90">
+            <p className="mt-3.5 text-sm font-medium leading-relaxed text-white/90">
               丢入疯狂想法，周末盲盒开奖，绝不反悔
             </p>
             <div className="mt-3 flex items-center justify-between">
-              <div className="flex items-center gap-1.5 text-xs font-bold text-purple-300/50">
+              <div className="flex items-center gap-1.5 text-xs font-bold text-white/50">
                 <Gift size={12} />
                 <span>盲盒蓄水 · 仪式开奖</span>
               </div>
-              <div className="flex items-center gap-0.5 text-xs font-semibold text-purple-200/40 transition-colors group-hover:text-purple-200/70">
+              <div className="flex items-center gap-0.5 text-xs font-semibold text-white/40 transition-colors group-hover:text-white/70">
                 进入
                 <ChevronRight size={14} />
               </div>
             </div>
           </div>
+
+          <motion.div
+            className="absolute inset-0 rounded-2xl"
+            whileHover={{
+              x: [0, -2, 2, -2, 2, 0],
+              transition: { duration: 0.4, repeat: Infinity },
+            }}
+          />
         </motion.button>
       </div>
 

From 9c680ec11e031087c94d475b51bf3aa057ba95ec Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 01:51:47 +0800
Subject: [PATCH 61/66] =?UTF-8?q?feat:=20AI=20=E5=91=A8=E6=9C=AB=E8=A1=8C?=
 =?UTF-8?q?=E7=A8=8B=E8=A7=84=E5=88=92=20=E2=80=94=20DeepSeek=20=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E6=8E=92=E6=9C=9F=20+=20=E9=AB=98=E5=BE=B7=20POI=20+?=
 =?UTF-8?q?=20=E5=A4=9A=E6=97=A5=E7=BF=BB=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 接入 DeepSeek API，提交想法时自动 AI 打标（品类/时段/时长/搜索策略）
- 新增行程规划 API：智能选取想法 → 高德 POI 搜索 → AI 生成最优行程
- 支持多日计划（"整个周末"拆分周六/周日，并行 AI 调用）
- 行程展示逐日翻页，时间线可滚动，操作按钮固定底部
- 分享卡适配多日格式，支持图片保存与原生分享
- Prisma schema 新增 WeekendPlan 模型及 BlindBoxIdea AI 标签字段
- Jenkinsfile 集成 DEEPSEEK_API_KEY 环境变量
---
 Jenkinsfile                               |   6 +-
 package-lock.json                         |  24 +-
 package.json                              |   1 +
 prisma/schema.prisma                      |  26 ++
 src/app/api/blindbox/plan/route.ts        | 310 ++++++++++++++++++++
 src/app/api/blindbox/room/[code]/route.ts |  43 ++-
 src/app/api/blindbox/route.ts             |  60 +++-
 src/app/api/location/search/route.ts      |  69 +++++
 src/app/blindbox/[code]/page.tsx          | 326 ++++++++++++++++++----
 src/components/BlindboxMyIdeas.tsx        |  59 +++-
 src/components/BlindboxPlan.tsx           | 268 ++++++++++++++++++
 src/components/BlindboxPlanShareCard.tsx  | 259 +++++++++++++++++
 src/components/ShareCardModal.tsx         |   9 +-
 src/components/WeekendTimeSelector.tsx    | 115 ++++++++
 src/lib/ai.ts                             | 172 ++++++++++++
 src/types/index.ts                        |  44 +++
 16 files changed, 1721 insertions(+), 70 deletions(-)
 create mode 100644 src/app/api/blindbox/plan/route.ts
 create mode 100644 src/app/api/location/search/route.ts
 create mode 100644 src/components/BlindboxPlan.tsx
 create mode 100644 src/components/BlindboxPlanShareCard.tsx
 create mode 100644 src/components/WeekendTimeSelector.tsx
 create mode 100644 src/lib/ai.ts

diff --git a/Jenkinsfile b/Jenkinsfile
index 16cb8d6..2756cf9 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -2,8 +2,9 @@ pipeline {
     agent any
 
     environment {
-        APP_NAME  = 'no-whatever'
-        AMAP_KEY  = '7f6be40a6de3f7fbb7bc3f825b67573b'
+        APP_NAME      = 'no-whatever'
+        AMAP_KEY      = '7f6be40a6de3f7fbb7bc3f825b67573b'
+        DEEPSEEK_KEY  = credentials('deepseek-api-key')
     }
 
     triggers {
@@ -37,6 +38,7 @@ pipeline {
                         -v /data/${APP_NAME}:/app/data \
                         -e DATABASE_URL=file:/app/data/prod.db \
                         -e AMAP_API_KEY=${AMAP_KEY} \
+                        -e DEEPSEEK_API_KEY=${DEEPSEEK_KEY} \
                         --restart unless-stopped \
                         ${APP_NAME}:latest
                 """
diff --git a/package-lock.json b/package-lock.json
index 664b278..91c7b03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "html-to-image": "^1.11.13",
         "lucide-react": "^0.575.0",
         "next": "16.1.6",
+        "openai": "^6.25.0",
         "prisma": "^6.19.2",
         "qrcode.react": "^4.2.0",
         "react": "19.2.3",
@@ -5613,6 +5614,27 @@
       "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
       "license": "MIT"
     },
+    "node_modules/openai": {
+      "version": "6.25.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-6.25.0.tgz",
+      "integrity": "sha512-mEh6VZ2ds2AGGokWARo18aPISI1OhlgdEIC1ewhkZr8pSIT31dec0ecr9Nhxx0JlybyOgoAT1sWeKtwPZzJyww==",
+      "license": "Apache-2.0",
+      "bin": {
+        "openai": "bin/cli"
+      },
+      "peerDependencies": {
+        "ws": "^8.18.0",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "ws": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -7101,7 +7123,7 @@
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "funding": {
diff --git a/package.json b/package.json
index 11715c8..c4d0916 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "html-to-image": "^1.11.13",
     "lucide-react": "^0.575.0",
     "next": "16.1.6",
+    "openai": "^6.25.0",
     "prisma": "^6.19.2",
     "qrcode.react": "^4.2.0",
     "react": "19.2.3",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 58a6b1c..dbe18af 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -31,6 +31,7 @@ model User {
   blindBoxMemberships  BlindBoxMember[]
   submittedIdeas       BlindBoxIdea[]   @relation("IdeaSubmitter")
   drawnIdeas           BlindBoxIdea[]   @relation("IdeaDrawer")
+  weekendPlans         WeekendPlan[]
 }
 
 model Decision {
@@ -65,11 +66,15 @@ model BlindBoxRoom {
   code      String   @unique
   name      String
   creatorId String
+  city      String?
+  lat       Float?
+  lng       Float?
   createdAt DateTime @default(now())
 
   creator User             @relation("RoomCreator", fields: [creatorId], references: [id])
   members BlindBoxMember[]
   ideas   BlindBoxIdea[]
+  plans   WeekendPlan[]
 }
 
 model BlindBoxMember {
@@ -93,6 +98,13 @@ model BlindBoxIdea {
   drawnById String?
   createdAt DateTime @default(now())
 
+  category         String?
+  timeSlot         String?
+  estimatedMinutes Int?
+  outdoor          Boolean?
+  searchQuery      String?
+  searchType       String?
+
   room    BlindBoxRoom @relation(fields: [roomId], references: [id], onDelete: Cascade)
   user    User         @relation("IdeaSubmitter", fields: [userId], references: [id], onDelete: Cascade)
   drawnBy User?        @relation("IdeaDrawer", fields: [drawnById], references: [id], onDelete: SetNull)
@@ -100,3 +112,17 @@ model BlindBoxIdea {
   @@index([roomId, status])
   @@index([userId])
 }
+
+model WeekendPlan {
+  id        String   @id @default(cuid())
+  roomId    String
+  userId    String
+  planData  String
+  status    String   @default("active")
+  createdAt DateTime @default(now())
+
+  room BlindBoxRoom @relation(fields: [roomId], references: [id], onDelete: Cascade)
+  user User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([roomId])
+}
diff --git a/src/app/api/blindbox/plan/route.ts b/src/app/api/blindbox/plan/route.ts
new file mode 100644
index 0000000..b0625fb
--- /dev/null
+++ b/src/app/api/blindbox/plan/route.ts
@@ -0,0 +1,310 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { requireMembership } from "@/lib/blindbox";
+import { apiHandler, ApiError, requireUserId } from "@/lib/api";
+import { requireAmapApiKey } from "@/lib/amap";
+import { generateSchedule, type ScheduleContext } from "@/lib/ai";
+
+interface AvailableTime {
+  date: string;
+  startHour: number;
+  endHour: number;
+}
+
+interface TaggedIdea {
+  id: string;
+  content: string;
+  category: string;
+  timeSlot: string;
+  estimatedMinutes: number;
+  searchQuery: string;
+  searchType: string;
+}
+
+const SLOT_CATEGORY_MAP: Record<string, string[]> = {
+  morning: ["outdoor", "sports", "culture"],
+  lunch: ["dining"],
+  afternoon: ["entertainment", "shopping", "relaxation", "outdoor", "culture"],
+  dinner: ["dining"],
+  evening: ["entertainment", "relaxation"],
+};
+
+function selectIdeasForSlots(ideas: TaggedIdea[], availableHours: number): TaggedIdea[] {
+  const byCategory = new Map<string, TaggedIdea[]>();
+  for (const idea of ideas) {
+    const list = byCategory.get(idea.category) || [];
+    list.push(idea);
+    byCategory.set(idea.category, list);
+  }
+
+  const slots: string[] = [];
+  if (availableHours >= 10) {
+    slots.push("morning", "lunch", "afternoon", "dinner", "evening");
+  } else if (availableHours >= 7) {
+    slots.push("morning", "lunch", "afternoon", "evening");
+  } else if (availableHours >= 5) {
+    slots.push("lunch", "afternoon", "evening");
+  } else {
+    slots.push("afternoon", "evening");
+  }
+
+  const selected: TaggedIdea[] = [];
+  const usedIds = new Set<string>();
+
+  for (const slot of slots) {
+    const preferredCategories = SLOT_CATEGORY_MAP[slot] || [];
+
+    let picked: TaggedIdea | null = null;
+    for (const cat of preferredCategories) {
+      const pool = (byCategory.get(cat) || []).filter((i) => !usedIds.has(i.id));
+      if (pool.length > 0) {
+        picked = pool[Math.floor(Math.random() * pool.length)];
+        break;
+      }
+    }
+
+    if (!picked) {
+      const remaining = ideas.filter((i) => !usedIds.has(i.id));
+      if (remaining.length > 0) {
+        picked = remaining[Math.floor(Math.random() * remaining.length)];
+      }
+    }
+
+    if (picked) {
+      selected.push(picked);
+      usedIds.add(picked.id);
+    }
+  }
+
+  return selected;
+}
+
+async function searchPois(
+  query: string,
+  searchType: string,
+  anchorLat: number,
+  anchorLng: number,
+): Promise<{ name: string; address: string; lat: number; lng: number; rating?: number }[]> {
+  const apiKey = requireAmapApiKey();
+
+  if (searchType === "category") {
+    const url = new URL("https://restapi.amap.com/v5/place/around");
+    url.searchParams.set("key", apiKey);
+    url.searchParams.set("location", `${anchorLng},${anchorLat}`);
+    url.searchParams.set("keywords", query);
+    url.searchParams.set("radius", "5000");
+    url.searchParams.set("show_fields", "business");
+    url.searchParams.set("page_size", "8");
+
+    const res = await fetch(url.toString());
+    const data = await res.json();
+    if (data.status !== "1" || !data.pois?.length) return [];
+    return mapPois(data.pois);
+  }
+
+  // Text/brand search — bias results to the room's location
+  const url = new URL("https://restapi.amap.com/v5/place/text");
+  url.searchParams.set("key", apiKey);
+  url.searchParams.set("keywords", query);
+  url.searchParams.set("location", `${anchorLng},${anchorLat}`);
+  url.searchParams.set("show_fields", "business");
+  url.searchParams.set("page_size", "8");
+
+  const res = await fetch(url.toString());
+  const data = await res.json();
+  if (data.status !== "1" || !data.pois?.length) return [];
+  return mapPois(data.pois);
+}
+
+function mapPois(
+  pois: { name: string; address?: string; location?: string; business?: { rating?: string } }[],
+) {
+  return pois
+    .filter((p) => p.location)
+    .map((p) => {
+      const [lng, lat] = (p.location ?? "0,0").split(",").map(Number);
+      const ratingStr = p.business?.rating;
+      return {
+        name: p.name,
+        address: p.address || "",
+        lat,
+        lng,
+        rating: ratingStr && ratingStr !== "[]" ? parseFloat(ratingStr) || undefined : undefined,
+      };
+    });
+}
+
+export const POST = apiHandler(async (req) => {
+  const { roomId, userId, availableTime } = await req.json();
+
+  requireUserId(userId);
+  if (!roomId) throw new ApiError("roomId 不能为空");
+
+  await requireMembership(roomId, userId);
+
+  const at = availableTime as AvailableTime;
+  if (
+    !at?.date ||
+    typeof at.startHour !== "number" ||
+    typeof at.endHour !== "number" ||
+    at.endHour <= at.startHour
+  ) {
+    throw new ApiError("请选择有效的可用时间");
+  }
+
+  const room = await prisma.blindBoxRoom.findUnique({ where: { id: roomId } });
+  if (!room) throw new ApiError("房间不存在", 404);
+  if (!room.lat || !room.lng) {
+    throw new ApiError("请先设置房间位置", 400);
+  }
+
+  const allIdeas = await prisma.blindBoxIdea.findMany({
+    where: { roomId, status: "in_pool", category: { not: null } },
+    select: {
+      id: true,
+      content: true,
+      category: true,
+      timeSlot: true,
+      estimatedMinutes: true,
+      searchQuery: true,
+      searchType: true,
+    },
+  });
+
+  const taggedIdeas: TaggedIdea[] = allIdeas.filter(
+    (i): i is TaggedIdea =>
+      !!i.category && !!i.timeSlot && !!i.searchQuery && !!i.searchType &&
+      typeof i.estimatedMinutes === "number",
+  );
+
+  if (taggedIdeas.length < 2) {
+    throw new ApiError("盒子里至少需要 2 个已标记的想法才能生成计划", 400);
+  }
+
+  // Split into day configs — "整个周末" generates two separate days
+  const dayConfigs: AvailableTime[] =
+    at.date === "整个周末"
+      ? [
+          { date: "周六", startHour: at.startHour, endHour: at.endHour },
+          { date: "周日", startHour: at.startHour, endHour: at.endHour },
+        ]
+      : [at];
+
+  // Select ideas per day, avoiding duplicates across days when possible
+  const dayIdeas: TaggedIdea[][] = [];
+  const usedIds = new Set<string>();
+  for (const dayConfig of dayConfigs) {
+    const remaining = taggedIdeas.filter((i) => !usedIds.has(i.id));
+    const pool = remaining.length >= 2 ? remaining : taggedIdeas;
+    const selected = selectIdeasForSlots(pool, dayConfig.endHour - dayConfig.startHour);
+    for (const idea of selected) usedIds.add(idea.id);
+    dayIdeas.push(selected);
+  }
+
+  const allSelected = dayIdeas.flat();
+  if (allSelected.length === 0) {
+    throw new ApiError("无法从想法池中选出合适的活动", 400);
+  }
+
+  // Deduplicate search queries across all days
+  const uniqueByQuery = new Map<string, TaggedIdea>();
+  for (const idea of allSelected) {
+    if (!uniqueByQuery.has(idea.searchQuery)) uniqueByQuery.set(idea.searchQuery, idea);
+  }
+
+  // Phase 1: search brand/place type queries in parallel
+  const brandPlaceQueries = [...uniqueByQuery.values()].filter((i) => i.searchType !== "category");
+
+  const searchResults = await Promise.all(
+    brandPlaceQueries.map(async (idea) => {
+      try {
+        const pois = await searchPois(idea.searchQuery, idea.searchType, room.lat!, room.lng!);
+        return { query: idea.searchQuery, pois };
+      } catch {
+        return { query: idea.searchQuery, pois: [] };
+      }
+    }),
+  );
+
+  const candidates: ScheduleContext["candidates"] = {};
+  for (const result of searchResults) {
+    candidates[result.query] = result.pois;
+  }
+
+  // Phase 2: category-type queries anchored to centroid of found POIs
+  const catQueries = [...uniqueByQuery.values()].filter((i) => i.searchType === "category");
+  if (catQueries.length > 0) {
+    const allPois = Object.values(candidates).flat();
+    let anchorLat = room.lat;
+    let anchorLng = room.lng;
+    if (allPois.length > 0) {
+      anchorLat = allPois.reduce((s, p) => s + p.lat, 0) / allPois.length;
+      anchorLng = allPois.reduce((s, p) => s + p.lng, 0) / allPois.length;
+    }
+
+    const catResults = await Promise.all(
+      catQueries.map(async (idea) => {
+        try {
+          const pois = await searchPois(idea.searchQuery, idea.searchType, anchorLat, anchorLng);
+          return { query: idea.searchQuery, pois };
+        } catch {
+          return { query: idea.searchQuery, pois: [] };
+        }
+      }),
+    );
+
+    for (const result of catResults) {
+      candidates[result.query] = result.pois;
+    }
+  }
+
+  // Generate schedule for each day (parallel AI calls)
+  const schedules = await Promise.all(
+    dayConfigs.map((dayConfig, idx) => {
+      const ideas = dayIdeas[idx];
+      const ctx: ScheduleContext = {
+        ideas: ideas.map((i) => ({
+          content: i.content,
+          category: i.category,
+          timeSlot: i.timeSlot,
+          estimatedMinutes: i.estimatedMinutes,
+          searchQuery: i.searchQuery,
+          searchType: i.searchType,
+        })),
+        candidates,
+        userLocation: { lat: room.lat!, lng: room.lng! },
+        availableTime: dayConfig,
+      };
+      return generateSchedule(ctx);
+    }),
+  );
+
+  const days = schedules
+    .map((schedule, idx) =>
+      schedule
+        ? { date: dayConfigs[idx].date, items: schedule.items, summary: schedule.summary }
+        : null,
+    )
+    .filter((d) => d !== null);
+
+  if (days.length === 0) {
+    throw new ApiError("AI 规划失败，请稍后重试", 500);
+  }
+
+  const plan = await prisma.weekendPlan.create({
+    data: {
+      roomId,
+      userId,
+      planData: JSON.stringify({
+        days,
+        selectedIdeaIds: allSelected.map((i) => i.id),
+      }),
+    },
+  });
+
+  return NextResponse.json({
+    id: plan.id,
+    days,
+    createdAt: plan.createdAt,
+  });
+});
diff --git a/src/app/api/blindbox/room/[code]/route.ts b/src/app/api/blindbox/room/[code]/route.ts
index d67408d..62d1f30 100644
--- a/src/app/api/blindbox/room/[code]/route.ts
+++ b/src/app/api/blindbox/room/[code]/route.ts
@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
-import { getRoomByCode } from "@/lib/blindbox";
+import { getRoomByCode, requireMembership } from "@/lib/blindbox";
 import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 
 export const GET = apiHandler(async (_req, { params }) => {
@@ -14,6 +14,9 @@ export const GET = apiHandler(async (_req, { params }) => {
     code: room.code,
     name: room.name,
     creatorId: room.creatorId,
+    city: room.city,
+    lat: room.lat,
+    lng: room.lng,
     poolCount: room._count.ideas,
     members: room.members.map((m) => ({
       ...m.user,
@@ -22,6 +25,44 @@ export const GET = apiHandler(async (_req, { params }) => {
   });
 });
 
+export const PATCH = apiHandler(async (req, { params }) => {
+  const { code } = await params;
+  const { userId, city, lat, lng } = await req.json();
+
+  requireUserId(userId);
+
+  const room = await prisma.blindBoxRoom.findUnique({
+    where: { code: code.toUpperCase() },
+  });
+  if (!room) throw new ApiError("房间不存在", 404);
+
+  await requireMembership(room.id, userId);
+
+  const numLat = Number(lat);
+  const numLng = Number(lng);
+  if (
+    !Number.isFinite(numLat) || !Number.isFinite(numLng) ||
+    numLat < -90 || numLat > 90 || numLng < -180 || numLng > 180
+  ) {
+    throw new ApiError("位置坐标无效");
+  }
+
+  const updated = await prisma.blindBoxRoom.update({
+    where: { id: room.id },
+    data: {
+      city: typeof city === "string" ? city.trim() : null,
+      lat: numLat,
+      lng: numLng,
+    },
+  });
+
+  return NextResponse.json({
+    city: updated.city,
+    lat: updated.lat,
+    lng: updated.lng,
+  });
+});
+
 export const DELETE = apiHandler(async (req, { params }) => {
   const { code } = await params;
   const { userId } = await req.json();
diff --git a/src/app/api/blindbox/route.ts b/src/app/api/blindbox/route.ts
index 38a0912..91d4a42 100644
--- a/src/app/api/blindbox/route.ts
+++ b/src/app/api/blindbox/route.ts
@@ -3,6 +3,9 @@ import { prisma } from "@/lib/prisma";
 import { requireMembership } from "@/lib/blindbox";
 import { apiHandler, ApiError, requireUserId } from "@/lib/api";
 import { validateIdeaContent, requireString } from "@/lib/validation";
+import { tagIdea } from "@/lib/ai";
+
+const TAG_TIMEOUT_MS = 3000;
 
 export const POST = apiHandler(async (req) => {
   const { roomId, userId, content } = await req.json();
@@ -17,7 +20,29 @@ export const POST = apiHandler(async (req) => {
     data: { roomId, userId, content: trimmedContent },
   });
 
-  return NextResponse.json({ id: idea.id }, { status: 201 });
+  const tags = await Promise.race([
+    tagIdea(trimmedContent),
+    new Promise<null>((resolve) => setTimeout(() => resolve(null), TAG_TIMEOUT_MS)),
+  ]);
+
+  if (tags) {
+    await prisma.blindBoxIdea.update({
+      where: { id: idea.id },
+      data: {
+        category: tags.category,
+        timeSlot: tags.timeSlot,
+        estimatedMinutes: tags.estimatedMinutes,
+        outdoor: tags.outdoor,
+        searchQuery: tags.searchQuery,
+        searchType: tags.searchType,
+      },
+    });
+  }
+
+  return NextResponse.json(
+    { id: idea.id, ...tags && { tags } },
+    { status: 201 },
+  );
 });
 
 export const GET = apiHandler(async (req) => {
@@ -33,7 +58,17 @@ export const GET = apiHandler(async (req) => {
     prisma.blindBoxIdea.findMany({
       where: { roomId, userId, status: "in_pool" },
       orderBy: { createdAt: "desc" },
-      select: { id: true, content: true, createdAt: true },
+      select: {
+        id: true,
+        content: true,
+        createdAt: true,
+        category: true,
+        timeSlot: true,
+        estimatedMinutes: true,
+        outdoor: true,
+        searchQuery: true,
+        searchType: true,
+      },
     }),
     prisma.blindBoxIdea.findMany({
       where: { roomId, status: "drawn" },
@@ -62,7 +97,26 @@ export const PUT = apiHandler(async (req) => {
 
   if (count === 0) throw new ApiError("想法不存在、已被抽中或无权编辑", 404);
 
-  return NextResponse.json({ id: ideaId, content: trimmedContent });
+  const tags = await Promise.race([
+    tagIdea(trimmedContent),
+    new Promise<null>((resolve) => setTimeout(() => resolve(null), TAG_TIMEOUT_MS)),
+  ]);
+
+  if (tags) {
+    await prisma.blindBoxIdea.updateMany({
+      where: { id: ideaId, userId, status: "in_pool" },
+      data: {
+        category: tags.category,
+        timeSlot: tags.timeSlot,
+        estimatedMinutes: tags.estimatedMinutes,
+        outdoor: tags.outdoor,
+        searchQuery: tags.searchQuery,
+        searchType: tags.searchType,
+      },
+    });
+  }
+
+  return NextResponse.json({ id: ideaId, content: trimmedContent, ...tags && { tags } });
 });
 
 export const DELETE = apiHandler(async (req) => {
diff --git a/src/app/api/location/search/route.ts b/src/app/api/location/search/route.ts
new file mode 100644
index 0000000..6462ab3
--- /dev/null
+++ b/src/app/api/location/search/route.ts
@@ -0,0 +1,69 @@
+import { NextResponse } from "next/server";
+import { apiHandler, ApiError } from "@/lib/api";
+import { requireAmapApiKey } from "@/lib/amap";
+
+interface AmapPoiV5 {
+  id: string;
+  name: string;
+  address?: string;
+  location?: string;
+  type?: string;
+  business?: {
+    rating?: string;
+    cost?: string;
+    tel?: string;
+  };
+}
+
+export const GET = apiHandler(async (req) => {
+  const keywords = req.nextUrl.searchParams.get("keywords")?.trim();
+  if (!keywords) throw new ApiError("keywords 不能为空");
+
+  const city = req.nextUrl.searchParams.get("city")?.trim();
+  const types = req.nextUrl.searchParams.get("types")?.trim();
+
+  const apiKey = requireAmapApiKey();
+
+  const url = new URL("https://restapi.amap.com/v5/place/text");
+  url.searchParams.set("key", apiKey);
+  url.searchParams.set("keywords", keywords);
+  url.searchParams.set("show_fields", "business");
+  url.searchParams.set("page_size", "10");
+
+  if (city) url.searchParams.set("region", city);
+  if (types) url.searchParams.set("types", types);
+
+  let data;
+  try {
+    const res = await fetch(url.toString());
+    data = await res.json();
+  } catch {
+    throw new ApiError("位置服务暂时不可用，请稍后重试", 503);
+  }
+
+  if (data.status !== "1" || !data.pois?.length) {
+    return NextResponse.json([]);
+  }
+
+  const results = data.pois
+    .filter((poi: AmapPoiV5) => poi.location)
+    .map((poi: AmapPoiV5) => {
+      const [lng, lat] = (poi.location ?? "0,0").split(",").map(Number);
+      const ratingStr = poi.business?.rating;
+      const rating = ratingStr && ratingStr !== "[]" ? parseFloat(ratingStr) || null : null;
+      const costStr = poi.business?.cost;
+      const cost = costStr && costStr !== "[]" && costStr !== "0" ? Number(costStr) : null;
+
+      return {
+        id: poi.id,
+        name: poi.name,
+        address: poi.address || "",
+        lat,
+        lng,
+        rating,
+        cost,
+      };
+    });
+
+  return NextResponse.json(results);
+});
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index edbb3b4..740aba3 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -15,6 +15,9 @@ import {
   Copy,
   Trash2,
   LogOut,
+  MapPin,
+  Calendar,
+  Sparkles,
 } from "lucide-react";
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
@@ -22,21 +25,26 @@ import ShareCardModal from "@/components/ShareCardModal";
 import Button from "@/components/Button";
 import BlindboxMyIdeas, { type MyIdea } from "@/components/BlindboxMyIdeas";
 import BlindboxDrawnHistory, { type DrawnIdea } from "@/components/BlindboxDrawnHistory";
+import WeekendTimeSelector from "@/components/WeekendTimeSelector";
+import BlindboxPlan from "@/components/BlindboxPlan";
 import { useToast } from "@/hooks/useToast";
 import { useShare } from "@/hooks/useShare";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
-import type { UserProfile } from "@/types";
+import type { UserProfile, WeekendPlanData } from "@/types";
 
 interface RoomInfo {
   id: string;
   code: string;
   name: string;
   creatorId: string;
+  city: string | null;
+  lat: number | null;
+  lng: number | null;
   poolCount: number;
   members: { id: string; username: string; avatar: string }[];
 }
 
-type Phase = "pool" | "shaking" | "reveal";
+type Phase = "pool" | "shaking" | "reveal" | "time_select" | "planning" | "plan_reveal";
 
 export default function BlindboxRoomPage() {
   const { code } = useParams<{ code: string }>();
@@ -62,6 +70,11 @@ export default function BlindboxRoomPage() {
   const toast = useToast();
   const [confirmLeave, setConfirmLeave] = useState(false);
   const [leaving, setLeaving] = useState(false);
+  const [locating, setLocating] = useState(false);
+  const [planDays, setPlanDays] = useState<WeekendPlanData[]>([]);
+  const [planAccepted, setPlanAccepted] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [showPlanShareCard, setShowPlanShareCard] = useState(false);
 
   const boxControls = useAnimation();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -151,6 +164,66 @@ export default function BlindboxRoomPage() {
     finally { setJoiningRoom(false); }
   };
 
+  const handleSetLocation = useCallback(async () => {
+    if (locating || !profile || !room) return;
+    setLocating(true);
+    try {
+      const pos = await new Promise<GeolocationPosition>((resolve, reject) =>
+        navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 10000 }),
+      );
+      const { latitude: lat, longitude: lng } = pos.coords;
+      const regeoRes = await fetch(`/api/location/regeo?lat=${lat}&lng=${lng}`);
+      const regeo = regeoRes.ok ? await regeoRes.json() : {};
+      const cityName = regeo.name || "未知位置";
+
+      const patchRes = await fetch(`/api/blindbox/room/${room.code}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId: profile.id, city: cityName, lat, lng }),
+      });
+      if (!patchRes.ok) throw new Error("保存位置失败");
+
+      setRoom((prev) => prev ? { ...prev, city: cityName, lat, lng } : prev);
+      toast.show("位置已设置");
+    } catch {
+      toast.show("获取位置失败，请允许定位权限");
+    } finally {
+      setLocating(false);
+    }
+  }, [locating, profile, room, toast]);
+
+  const handleGeneratePlan = useCallback(async (timeConfig: { date: string; startHour: number; endHour: number }) => {
+    if (generating || !profile || !room) return;
+    setGenerating(true);
+    setPhase("planning");
+    setError("");
+    try {
+      const res = await fetch("/api/blindbox/plan", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          roomId: room.id,
+          userId: profile.id,
+          availableTime: timeConfig,
+        }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "生成失败");
+      }
+      const data = await res.json();
+      setPlanDays(data.days);
+      setPlanAccepted(false);
+      setPhase("plan_reveal");
+      fireConfetti();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "生成计划失败");
+      setPhase("pool");
+    } finally {
+      setGenerating(false);
+    }
+  }, [generating, profile, room]);
+
   const handleSubmit = async () => {
     const text = input.trim();
     if (!text || submitting || !profile || !room) return;
@@ -166,10 +239,22 @@ export default function BlindboxRoomPage() {
         const data = await res.json();
         throw new Error(data.error || "提交失败");
       }
-      const { id } = await res.json();
+      const data = await res.json();
       setInput("");
       setPoolCount((c) => c + 1);
-      setMyIdeas((prev) => [{ id, content: text, createdAt: new Date().toISOString() }, ...prev]);
+      setMyIdeas((prev) => [{
+        id: data.id,
+        content: text,
+        createdAt: new Date().toISOString(),
+        ...data.tags && {
+          category: data.tags.category,
+          timeSlot: data.tags.timeSlot,
+          estimatedMinutes: data.tags.estimatedMinutes,
+          outdoor: data.tags.outdoor,
+          searchQuery: data.tags.searchQuery,
+          searchType: data.tags.searchType,
+        },
+      }, ...prev]);
       setSubmitFlash(true);
       timersRef.current.push(setTimeout(() => setSubmitFlash(false), 600));
       boxControls.start({
@@ -198,11 +283,23 @@ export default function BlindboxRoomPage() {
         const data = await res.json();
         throw new Error(data.error || "编辑失败");
       }
-      setMyIdeas((prev) => prev.map((i) => (i.id === ideaId ? { ...i, content: trimmed } : i)));
+      const data = await res.json();
+      setMyIdeas((prev) => prev.map((i) => (i.id === ideaId ? {
+        ...i,
+        content: trimmed,
+        ...data.tags && {
+          category: data.tags.category,
+          timeSlot: data.tags.timeSlot,
+          estimatedMinutes: data.tags.estimatedMinutes,
+          outdoor: data.tags.outdoor,
+          searchQuery: data.tags.searchQuery,
+          searchType: data.tags.searchType,
+        },
+      } : i)));
     } catch (e) {
       toast.show(e instanceof Error ? e.message : "编辑失败");
     }
-  }, [profile]);
+  }, [profile, toast]);
 
   const handleDeleteIdea = useCallback(async (ideaId: string) => {
     if (!profile) return;
@@ -328,7 +425,9 @@ export default function BlindboxRoomPage() {
   if (!room) return null;
 
   return (
-    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
+    <div className={`relative flex h-dvh flex-col items-center bg-background px-5 py-6 scrollbar-none ${
+      phase === "plan_reveal" ? "overflow-hidden" : "overflow-y-auto"
+    }`}>
 
       {/* Header */}
       <div className="flex w-full max-w-sm items-center gap-3">
@@ -341,7 +440,21 @@ export default function BlindboxRoomPage() {
         </button>
         <div className="min-w-0 flex-1">
           <p className="truncate text-sm font-bold text-heading">{room.name}</p>
-          <p className="text-[10px] text-dim">房间 {room.code}</p>
+          <div className="mt-0.5 flex items-center gap-2">
+            <p className="text-[10px] text-dim">房间 {room.code}</p>
+            <button
+              onClick={handleSetLocation}
+              disabled={locating}
+              className="flex items-center gap-0.5 text-[10px] font-medium text-purple-400/70 transition-colors active:text-purple-400"
+            >
+              {locating ? (
+                <Loader2 size={9} className="animate-spin" />
+              ) : (
+                <MapPin size={9} />
+              )}
+              {room.city || "设置位置"}
+            </button>
+          </div>
         </div>
 
         {/* Members */}
@@ -424,44 +537,46 @@ export default function BlindboxRoomPage() {
         </motion.div>
       ) : (
         <>
-          {/* Blind Box Visual */}
-          <div className="mt-8 flex flex-col items-center">
-            <motion.div
-              animate={boxControls}
-              className="relative flex h-36 w-36 items-center justify-center"
-            >
-              <div className="absolute inset-0 rounded-3xl bg-linear-to-br from-purple-600/20 to-indigo-600/20 blur-xl" />
-              <div className="relative flex h-32 w-32 flex-col items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-700/30">
-                <div className="absolute -top-2 left-1/2 h-5 w-[90%] -translate-x-1/2 rounded-t-xl bg-linear-to-r from-purple-700 to-indigo-700 shadow-md" />
-                <div className="absolute top-3 h-full w-3 bg-linear-to-b from-amber-400/60 to-amber-400/10" />
-                <div className="absolute top-6 h-3 w-full bg-linear-to-r from-amber-400/0 via-amber-400/60 to-amber-400/0" />
-                <motion.div
-                  animate={submitFlash ? { scale: [1, 1.3, 1] } : {}}
-                  transition={{ duration: 0.3 }}
-                >
-                  <Package size={40} className="relative z-10 text-purple-300/60" strokeWidth={1.5} />
-                </motion.div>
-                <motion.div
-                  className="absolute -right-2 -top-2 text-lg"
-                  animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
-                  transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
-                >
-                  ✨
-                </motion.div>
-              </div>
-            </motion.div>
+          {/* Blind Box Visual — hidden during plan phases */}
+          {phase !== "planning" && phase !== "plan_reveal" && (
+            <div className="mt-8 flex flex-col items-center">
+              <motion.div
+                animate={boxControls}
+                className="relative flex h-36 w-36 items-center justify-center"
+              >
+                <div className="absolute inset-0 rounded-3xl bg-linear-to-br from-purple-600/20 to-indigo-600/20 blur-xl" />
+                <div className="relative flex h-32 w-32 flex-col items-center justify-center rounded-2xl bg-linear-to-br from-indigo-900 to-purple-900 shadow-2xl shadow-purple-900/50 ring-1 ring-purple-700/30">
+                  <div className="absolute -top-2 left-1/2 h-5 w-[90%] -translate-x-1/2 rounded-t-xl bg-linear-to-r from-purple-700 to-indigo-700 shadow-md" />
+                  <div className="absolute top-3 h-full w-3 bg-linear-to-b from-amber-400/60 to-amber-400/10" />
+                  <div className="absolute top-6 h-3 w-full bg-linear-to-r from-amber-400/0 via-amber-400/60 to-amber-400/0" />
+                  <motion.div
+                    animate={submitFlash ? { scale: [1, 1.3, 1] } : {}}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <Package size={40} className="relative z-10 text-purple-300/60" strokeWidth={1.5} />
+                  </motion.div>
+                  <motion.div
+                    className="absolute -right-2 -top-2 text-lg"
+                    animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.2, 1] }}
+                    transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
+                  >
+                    ✨
+                  </motion.div>
+                </div>
+              </motion.div>
 
-            <motion.p
-              className="mt-4 text-sm font-semibold text-muted"
-              key={poolCount}
-              initial={{ scale: 1.2, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-            >
-              盒子里已有{" "}
-              <span className="text-lg font-black text-purple-400">{poolCount}</span>{" "}
-              个想法
-            </motion.p>
-          </div>
+              <motion.p
+                className="mt-4 text-sm font-semibold text-muted"
+                key={poolCount}
+                initial={{ scale: 1.2, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+              >
+                盒子里已有{" "}
+                <span className="text-lg font-black text-purple-400">{poolCount}</span>{" "}
+                个想法
+              </motion.p>
+            </div>
+          )}
 
           {/* Pool / Shaking / Reveal phases */}
           <AnimatePresence mode="wait">
@@ -495,17 +610,35 @@ export default function BlindboxRoomPage() {
                   </button>
                 </div>
 
-                <motion.button
-                  onClick={handleDraw}
-                  disabled={poolCount === 0}
-                  className="relative flex h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-red-600 to-rose-500 text-base font-black text-white shadow-lg shadow-red-900/40 transition-shadow hover:shadow-xl hover:shadow-red-900/50 disabled:opacity-40 disabled:shadow-none"
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.97 }}
-                >
-                  <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/10 to-transparent -translate-x-full animate-[shimmer_3s_infinite]" />
-                  <Flame size={20} />
-                  开启周末盲盒（绝不反悔）
-                </motion.button>
+                <div className="flex w-full gap-2">
+                  <motion.button
+                    onClick={handleDraw}
+                    disabled={poolCount === 0}
+                    className="relative flex h-14 flex-1 items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-red-600 to-rose-500 text-sm font-black text-white shadow-lg shadow-red-900/40 transition-shadow hover:shadow-xl hover:shadow-red-900/50 disabled:opacity-40 disabled:shadow-none"
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.97 }}
+                  >
+                    <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/10 to-transparent -translate-x-full animate-[shimmer_3s_infinite]" />
+                    <Flame size={18} />
+                    抽一个
+                  </motion.button>
+                  <motion.button
+                    onClick={() => {
+                      if (!room?.city) {
+                        toast.show("请先点击房间名下方设置位置");
+                        return;
+                      }
+                      setPhase("time_select");
+                    }}
+                    disabled={poolCount < 2}
+                    className="relative flex h-14 flex-1 items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-purple-600 to-indigo-600 text-sm font-black text-white shadow-lg shadow-purple-900/40 transition-shadow hover:shadow-xl hover:shadow-purple-900/50 disabled:opacity-40 disabled:shadow-none"
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.97 }}
+                  >
+                    <Calendar size={18} />
+                    周末计划
+                  </motion.button>
+                </div>
 
                 {error && (
                   <motion.p
@@ -613,6 +746,69 @@ export default function BlindboxRoomPage() {
                 </div>
               </motion.div>
             )}
+
+            {phase === "planning" && (
+              <motion.div
+                key="planning"
+                className="mt-8 flex flex-col items-center gap-4"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+              >
+                <motion.div
+                  className="relative flex h-20 w-20 items-center justify-center"
+                  animate={{ rotate: [0, 360] }}
+                  transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
+                >
+                  <div className="absolute inset-0 rounded-full bg-purple-600/15 blur-lg" />
+                  <Sparkles size={28} className="relative text-purple-400" />
+                </motion.div>
+                <p className="text-sm font-bold text-purple-300 animate-pulse">
+                  AI 正在规划你的周末...
+                </p>
+                <p className="text-[11px] text-dim">搜索地点 · 优化路线 · 安排时间</p>
+              </motion.div>
+            )}
+
+            {phase === "plan_reveal" && planDays.length > 0 && (
+              <motion.div
+                key="plan_reveal"
+                className="mt-4 flex min-h-0 flex-1 w-full"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+              >
+                <BlindboxPlan
+                  days={planDays}
+                  accepted={planAccepted}
+                  regenerating={generating}
+                  onAccept={() => {
+                    setPlanAccepted(true);
+                    fireConfetti();
+                  }}
+                  onRegenerate={() => {
+                    setPhase("time_select");
+                  }}
+                  onShare={() => setShowPlanShareCard(true)}
+                  onBack={() => {
+                    setPhase("pool");
+                    setPlanDays([]);
+                    setPlanAccepted(false);
+                  }}
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Time selector modal */}
+          <AnimatePresence>
+            {phase === "time_select" && (
+              <WeekendTimeSelector
+                onConfirm={handleGeneratePlan}
+                onClose={() => setPhase("pool")}
+                loading={generating}
+              />
+            )}
           </AnimatePresence>
 
           {myIdeas.length > 0 && phase === "pool" && (
@@ -623,7 +819,7 @@ export default function BlindboxRoomPage() {
             />
           )}
 
-          {phase !== "shaking" && (
+          {phase !== "shaking" && phase !== "planning" && (
             <BlindboxDrawnHistory items={drawnHistory} />
           )}
         </>
@@ -643,8 +839,20 @@ export default function BlindboxRoomPage() {
         />
       )}
 
-      {/* Leave / Delete */}
-      {isMember && room && (
+      {planDays.length > 0 && room && (
+        <ShareCardModal
+          open={showPlanShareCard}
+          onClose={() => setShowPlanShareCard(false)}
+          data={{
+            type: "plan",
+            days: planDays,
+            roomName: room.name,
+          }}
+        />
+      )}
+
+      {/* Leave / Delete — hidden during plan view */}
+      {isMember && room && phase !== "plan_reveal" && phase !== "planning" && (
         <motion.div
           className="mt-12 w-full max-w-sm"
           initial={{ opacity: 0 }}
diff --git a/src/components/BlindboxMyIdeas.tsx b/src/components/BlindboxMyIdeas.tsx
index d8e3019..0b85877 100644
--- a/src/components/BlindboxMyIdeas.tsx
+++ b/src/components/BlindboxMyIdeas.tsx
@@ -2,12 +2,64 @@
 
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Package, Loader2, Pencil, Trash2, Check, X } from "lucide-react";
+import {
+  Package,
+  Loader2,
+  Pencil,
+  Trash2,
+  Check,
+  X,
+  UtensilsCrossed,
+  TreePine,
+  Film,
+  ShoppingBag,
+  Dumbbell,
+  Landmark,
+  Coffee,
+} from "lucide-react";
+import type { IdeaCategory } from "@/types";
 
 export interface MyIdea {
   id: string;
   content: string;
   createdAt: string;
+  category?: string | null;
+  timeSlot?: string | null;
+  estimatedMinutes?: number | null;
+  outdoor?: boolean | null;
+  searchQuery?: string | null;
+  searchType?: string | null;
+}
+
+const CATEGORY_CONFIG: Record<
+  IdeaCategory,
+  { icon: typeof UtensilsCrossed; color: string; label: string }
+> = {
+  dining: { icon: UtensilsCrossed, color: "text-orange-400", label: "美食" },
+  outdoor: { icon: TreePine, color: "text-emerald-400", label: "户外" },
+  entertainment: { icon: Film, color: "text-sky-400", label: "娱乐" },
+  shopping: { icon: ShoppingBag, color: "text-pink-400", label: "购物" },
+  sports: { icon: Dumbbell, color: "text-amber-400", label: "运动" },
+  culture: { icon: Landmark, color: "text-violet-400", label: "文化" },
+  relaxation: { icon: Coffee, color: "text-teal-400", label: "休闲" },
+};
+
+function CategoryBadge({ category }: { category?: string | null }) {
+  if (!category) return <span className="text-sm">💡</span>;
+  const cfg = CATEGORY_CONFIG[category as IdeaCategory];
+  if (!cfg) return <span className="text-sm">💡</span>;
+  const Icon = cfg.icon;
+  return <Icon size={14} className={`shrink-0 ${cfg.color}`} />;
+}
+
+function DurationLabel({ minutes }: { minutes?: number | null }) {
+  if (!minutes) return null;
+  const display = minutes >= 60 ? `${(minutes / 60).toFixed(minutes % 60 === 0 ? 0 : 1)}h` : `${minutes}min`;
+  return (
+    <span className="shrink-0 rounded-md bg-elevated px-1.5 py-0.5 text-[10px] font-medium text-dim">
+      ~{display}
+    </span>
+  );
 }
 
 function MyIdeaItem({
@@ -66,8 +118,9 @@ function MyIdeaItem({
         </>
       ) : (
         <>
-          <span className="text-sm">💡</span>
+          <CategoryBadge category={idea.category} />
           <p className="min-w-0 flex-1 truncate text-sm text-secondary">{idea.content}</p>
+          <DurationLabel minutes={idea.estimatedMinutes} />
           <button
             onClick={() => setEditing(true)}
             className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-muted transition-colors active:bg-elevated active:text-purple-400"
@@ -119,3 +172,5 @@ export default function BlindboxMyIdeas({
     </motion.div>
   );
 }
+
+export { CATEGORY_CONFIG, CategoryBadge, DurationLabel };
diff --git a/src/components/BlindboxPlan.tsx b/src/components/BlindboxPlan.tsx
new file mode 100644
index 0000000..c487dd5
--- /dev/null
+++ b/src/components/BlindboxPlan.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  MapPin,
+  Clock,
+  Navigation,
+  Share2,
+  RefreshCw,
+  Sparkles,
+  ChevronRight,
+  ChevronLeft,
+  CornerDownLeft,
+} from "lucide-react";
+import { CategoryBadge } from "@/components/BlindboxMyIdeas";
+import Button from "@/components/Button";
+import type { WeekendPlanData } from "@/types";
+
+interface BlindboxPlanProps {
+  days: WeekendPlanData[];
+  onAccept: () => void;
+  onRegenerate: () => void;
+  onShare: () => void;
+  onBack: () => void;
+  accepted?: boolean;
+  regenerating?: boolean;
+}
+
+function guessCategory(activity: string): string | null {
+  const lower = activity.toLowerCase();
+  if (/吃|餐|饭|火锅|烧烤|面|菜|厨|食/.test(lower)) return "dining";
+  if (/公园|山|湖|海|户外|骑|徒步|露营/.test(lower)) return "outdoor";
+  if (/电影|KTV|密室|游戏|桌游|剧/.test(lower)) return "entertainment";
+  if (/逛街|购物|商场|买/.test(lower)) return "shopping";
+  if (/运动|健身|球|跑|游泳|瑜伽/.test(lower)) return "sports";
+  if (/博物馆|展览|美术|书/.test(lower)) return "culture";
+  if (/咖啡|茶|SPA|按摩|下午茶/.test(lower)) return "relaxation";
+  return null;
+}
+
+function formatDuration(minutes: number): string {
+  if (minutes >= 60) {
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    return m > 0 ? `${h}h${m}min` : `${h}h`;
+  }
+  return `${minutes}min`;
+}
+
+export default function BlindboxPlan({
+  days,
+  onAccept,
+  onRegenerate,
+  onShare,
+  onBack,
+  accepted,
+  regenerating,
+}: BlindboxPlanProps) {
+  const [dayIndex, setDayIndex] = useState(0);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const currentDay = days[dayIndex];
+  const hasNext = dayIndex < days.length - 1;
+  const hasPrev = dayIndex > 0;
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [dayIndex]);
+
+  if (!currentDay) return null;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* Day header — sticky top */}
+      <div className="shrink-0 pb-3 text-center">
+        <motion.div
+          className="inline-flex items-center gap-1.5 rounded-full bg-purple-600/15 px-3 py-1 text-xs font-bold text-purple-400"
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ delay: 0.2 }}
+        >
+          <Sparkles size={12} />
+          {currentDay.date} · 行程规划
+        </motion.div>
+
+        {days.length > 1 && (
+          <div className="mt-2 flex items-center justify-center gap-1.5">
+            {days.map((day, i) => (
+              <button
+                key={day.date}
+                onClick={() => setDayIndex(i)}
+                className={`rounded-full transition-all ${
+                  i === dayIndex
+                    ? "h-1.5 w-5 bg-purple-400"
+                    : "h-1.5 w-1.5 bg-purple-400/25"
+                }`}
+              />
+            ))}
+          </div>
+        )}
+
+        {currentDay.summary && (
+          <motion.p
+            className="mt-2 text-xs text-muted"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.4 }}
+          >
+            {currentDay.summary}
+          </motion.p>
+        )}
+      </div>
+
+      {/* Scrollable timeline */}
+      <div
+        ref={scrollRef}
+        className="min-h-0 flex-1 overflow-y-auto scrollbar-none"
+      >
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={dayIndex}
+            className="relative mx-auto max-w-sm pl-6"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            transition={{ duration: 0.25 }}
+          >
+            <div className="absolute left-[9px] top-2 bottom-2 w-px bg-purple-500/20" />
+
+            {currentDay.items.map((item, i) => (
+              <motion.div
+                key={i}
+                className="relative mb-4 last:mb-0"
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.1 + i * 0.08 }}
+              >
+                <div className="absolute -left-6 top-3 flex h-[18px] w-[18px] items-center justify-center rounded-full bg-purple-600/20 ring-2 ring-background">
+                  <div className="h-2 w-2 rounded-full bg-purple-400" />
+                </div>
+
+                <div className="rounded-xl bg-surface/80 p-3.5 ring-1 ring-border/80">
+                  <div className="flex items-start gap-2">
+                    <span className="mt-0.5 text-sm font-black text-purple-400">{item.time}</span>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-1.5">
+                        <CategoryBadge category={guessCategory(item.activity)} />
+                        <p className="truncate text-sm font-bold text-heading">{item.activity}</p>
+                      </div>
+                      <div className="mt-1.5 flex items-center gap-1 text-[11px] text-muted">
+                        <MapPin size={10} className="shrink-0" />
+                        <span className="truncate">{item.poi}</span>
+                      </div>
+                      {item.address && (
+                        <p className="mt-0.5 truncate text-[10px] text-dim">{item.address}</p>
+                      )}
+                      <div className="mt-2 flex items-center gap-3">
+                        <span className="flex items-center gap-1 text-[10px] text-dim">
+                          <Clock size={9} />
+                          {formatDuration(item.duration)}
+                        </span>
+                        {item.lat !== 0 && item.lng !== 0 && (
+                          <a
+                            href={`https://uri.amap.com/marker?position=${item.lng},${item.lat}&name=${encodeURIComponent(item.poi)}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-1 text-[10px] font-medium text-purple-400/70 active:text-purple-400"
+                          >
+                            <Navigation size={9} />
+                            导航
+                          </a>
+                        )}
+                      </div>
+                      {item.reason && (
+                        <p className="mt-1.5 text-[10px] leading-relaxed text-dim italic">
+                          {item.reason}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Back to pool — at end of scroll content */}
+        <div className="mt-6 flex justify-center pb-4">
+          <button
+            onClick={onBack}
+            className="flex items-center gap-1.5 text-xs font-medium text-muted active:text-foreground"
+          >
+            <CornerDownLeft size={12} />
+            返回想法池
+          </button>
+        </div>
+      </div>
+
+      {/* Fixed bottom bar — actions + day navigation */}
+      <div className="shrink-0 border-t border-border/40 bg-background/80 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] backdrop-blur-lg">
+        {/* Day navigation */}
+        {days.length > 1 && (
+          <div className="mx-auto mb-2.5 flex max-w-sm items-center justify-center gap-2 px-4">
+            {hasPrev && (
+              <motion.button
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                onClick={() => setDayIndex(dayIndex - 1)}
+                className="flex items-center gap-1 rounded-full bg-surface px-3 py-1.5 text-[11px] font-bold text-purple-400 ring-1 ring-border/60 active:bg-elevated"
+              >
+                <ChevronLeft size={12} />
+                {days[dayIndex - 1].date}
+              </motion.button>
+            )}
+            <span className="text-[10px] text-dim">
+              {dayIndex + 1} / {days.length}
+            </span>
+            {hasNext && (
+              <motion.button
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                onClick={() => setDayIndex(dayIndex + 1)}
+                className="flex items-center gap-1 rounded-full bg-purple-600/15 px-3 py-1.5 text-[11px] font-bold text-purple-400 active:bg-purple-600/25"
+              >
+                {days[dayIndex + 1].date}
+                <ChevronRight size={12} />
+              </motion.button>
+            )}
+          </div>
+        )}
+
+        {/* Action buttons */}
+        <div className="mx-auto flex max-w-sm items-center justify-center gap-3 px-4">
+          {accepted ? (
+            <Button
+              onClick={onShare}
+              variant="purple"
+              shape="pill"
+              icon={<Share2 size={14} />}
+            >
+              分享计划
+            </Button>
+          ) : (
+            <>
+              <Button
+                onClick={onAccept}
+                variant="purple"
+                shape="pill"
+                icon={<Sparkles size={14} />}
+              >
+                接受契约
+              </Button>
+              <Button
+                onClick={onRegenerate}
+                variant="secondary"
+                shape="pill"
+                loading={regenerating}
+                icon={<RefreshCw size={14} />}
+              >
+                换一个方案
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BlindboxPlanShareCard.tsx b/src/components/BlindboxPlanShareCard.tsx
new file mode 100644
index 0000000..dc4ff8b
--- /dev/null
+++ b/src/components/BlindboxPlanShareCard.tsx
@@ -0,0 +1,259 @@
+import { QRCodeSVG } from "qrcode.react";
+import type { WeekendPlanData } from "@/types";
+
+export interface PlanShareData {
+  type: "plan";
+  days: WeekendPlanData[];
+  roomName: string;
+}
+
+export default function BlindboxPlanShareCard({
+  data,
+  cardRef,
+}: {
+  data: PlanShareData;
+  cardRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const { days, roomName } = data;
+  const shareUrl =
+    typeof window !== "undefined" ? window.location.origin : "nowhatever.app";
+
+  return (
+    <div
+      ref={cardRef}
+      style={{
+        width: 340,
+        padding: 1.5,
+        borderRadius: 20,
+        background: "linear-gradient(160deg, #7c3aed, #6366f140, #7c3aed30)",
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 18.5,
+          background: "#0a0810",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Decorative glows */}
+        <div
+          style={{
+            position: "absolute",
+            top: -30,
+            right: -20,
+            width: 140,
+            height: 140,
+            borderRadius: "50%",
+            background: "radial-gradient(circle, rgba(124,58,237,0.2), transparent 70%)",
+          }}
+        />
+
+        {/* Brand header */}
+        <div
+          style={{
+            padding: "14px 20px 12px",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            position: "relative",
+          }}
+        >
+          <span style={{ fontSize: 18 }}>📋</span>
+          <div>
+            <div
+              style={{
+                fontSize: 13,
+                fontWeight: 800,
+                color: "#ffffff",
+                letterSpacing: "0.02em",
+              }}
+            >
+              NoWhatever
+            </div>
+            <div
+              style={{
+                fontSize: 9,
+                fontWeight: 600,
+                color: "rgba(255,255,255,0.3)",
+                letterSpacing: "0.15em",
+                marginTop: 1,
+              }}
+            >
+              别说随便 · WEEKEND PLAN
+            </div>
+          </div>
+        </div>
+
+        {/* Thin accent line */}
+        <div
+          style={{
+            height: 1,
+            margin: "0 20px",
+            background: "linear-gradient(to right, transparent, rgba(167,139,250,0.25), transparent)",
+          }}
+        />
+
+        {/* Each day */}
+        {days.map((day, dayIdx) => (
+          <div key={day.date}>
+            {/* Room + date badge */}
+            <div style={{ textAlign: "center", padding: "16px 20px 8px" }}>
+              <div
+                style={{
+                  fontSize: 10,
+                  fontWeight: 700,
+                  letterSpacing: "0.25em",
+                  color: "rgba(167,139,250,0.5)",
+                }}
+              >
+                ✦ {roomName} · {day.date} ✦
+              </div>
+              {day.summary && (
+                <div
+                  style={{
+                    fontSize: 11,
+                    color: "rgba(255,255,255,0.5)",
+                    marginTop: 6,
+                    lineHeight: 1.5,
+                  }}
+                >
+                  {day.summary}
+                </div>
+              )}
+            </div>
+
+            {/* Timeline items */}
+            <div style={{ padding: "12px 20px 20px" }}>
+              {day.items.map((item, i) => (
+                <div
+                  key={i}
+                  style={{
+                    display: "flex",
+                    gap: 10,
+                    marginBottom: i < day.items.length - 1 ? 12 : 0,
+                    position: "relative",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 40,
+                      flexShrink: 0,
+                      fontSize: 12,
+                      fontWeight: 900,
+                      color: "#a78bfa",
+                      textAlign: "right",
+                      paddingTop: 2,
+                    }}
+                  >
+                    {item.time}
+                  </div>
+
+                  <div style={{ width: 16, flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center" }}>
+                    <div
+                      style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        background: "#7c3aed",
+                        marginTop: 5,
+                        flexShrink: 0,
+                      }}
+                    />
+                    {i < day.items.length - 1 && (
+                      <div style={{ width: 1, flex: 1, background: "rgba(124,58,237,0.2)", marginTop: 4 }} />
+                    )}
+                  </div>
+
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 13, fontWeight: 700, color: "#ffffff" }}>
+                      {item.activity}
+                    </div>
+                    <div style={{ fontSize: 10, color: "rgba(167,139,250,0.5)", marginTop: 3 }}>
+                      📍 {item.poi}
+                    </div>
+                    {item.reason && (
+                      <div
+                        style={{
+                          fontSize: 9,
+                          color: "rgba(255,255,255,0.25)",
+                          marginTop: 3,
+                          fontStyle: "italic",
+                          lineHeight: 1.4,
+                        }}
+                      >
+                        {item.reason}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Separator between days */}
+            {dayIdx < days.length - 1 && (
+              <div
+                style={{
+                  height: 1,
+                  margin: "0 20px",
+                  background: "linear-gradient(to right, transparent, rgba(167,139,250,0.15), transparent)",
+                }}
+              />
+            )}
+          </div>
+        ))}
+
+        {/* Contract stamp */}
+        <div
+          style={{
+            textAlign: "center",
+            padding: "0 20px 16px",
+            fontSize: 10,
+            fontWeight: 500,
+            color: "rgba(167,139,250,0.3)",
+          }}
+        >
+          此契约一旦开启，绝不反悔
+        </div>
+
+        {/* QR footer */}
+        <div
+          style={{
+            padding: "14px 20px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            borderTop: "1px solid rgba(255,255,255,0.04)",
+          }}
+        >
+          <div
+            style={{
+              padding: 5,
+              borderRadius: 8,
+              background: "#ffffff",
+              flexShrink: 0,
+            }}
+          >
+            <QRCodeSVG
+              value={shareUrl}
+              size={52}
+              level="M"
+              bgColor="#ffffff"
+              fgColor="#0a0810"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 12, fontWeight: 700, color: "rgba(255,255,255,0.7)" }}>
+              扫码一起「别说随便」
+            </div>
+            <div style={{ fontSize: 10, color: "rgba(255,255,255,0.2)", marginTop: 3 }}>
+              {shareUrl.replace(/^https?:\/\//, "")}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ShareCardModal.tsx b/src/components/ShareCardModal.tsx
index db7e6ef..e87f7b3 100644
--- a/src/components/ShareCardModal.tsx
+++ b/src/components/ShareCardModal.tsx
@@ -17,8 +17,11 @@ import RestaurantShareCard, {
 import BlindboxShareCard, {
   type BlindboxShareData,
 } from "@/components/BlindboxShareCard";
+import BlindboxPlanShareCard, {
+  type PlanShareData,
+} from "@/components/BlindboxPlanShareCard";
 
-export type ShareCardData = RestaurantShareData | BlindboxShareData;
+export type ShareCardData = RestaurantShareData | BlindboxShareData | PlanShareData;
 
 interface ShareCardModalProps {
   open: boolean;
@@ -151,6 +154,8 @@ export default function ShareCardModal({
                   cardRef={cardRef}
                   imageDataUrl={imageDataUrl}
                 />
+              ) : data.type === "plan" ? (
+                <BlindboxPlanShareCard data={data} cardRef={cardRef} />
               ) : (
                 <BlindboxShareCard data={data} cardRef={cardRef} />
               )}
@@ -174,7 +179,7 @@ export default function ShareCardModal({
                 onClick={handleShare}
                 disabled={generating}
                 className={`flex h-12 flex-1 items-center justify-center gap-2 rounded-2xl text-sm font-bold text-white shadow-lg transition-colors disabled:opacity-50 ${
-                  data.type === "blindbox"
+                  data.type === "blindbox" || data.type === "plan"
                     ? "bg-purple-600 shadow-purple-900/30 active:bg-purple-500"
                     : "bg-emerald-600 shadow-emerald-900/30 active:bg-emerald-500"
                 }`}
diff --git a/src/components/WeekendTimeSelector.tsx b/src/components/WeekendTimeSelector.tsx
new file mode 100644
index 0000000..3c1f997
--- /dev/null
+++ b/src/components/WeekendTimeSelector.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Calendar, Clock, Sparkles, X } from "lucide-react";
+import Button from "@/components/Button";
+
+interface TimeConfig {
+  date: string;
+  startHour: number;
+  endHour: number;
+}
+
+const PRESETS: { label: string; value: TimeConfig }[] = [
+  { label: "周六全天", value: { date: "周六", startHour: 10, endHour: 21 } },
+  { label: "周日全天", value: { date: "周日", startHour: 10, endHour: 21 } },
+  { label: "整个周末", value: { date: "整个周末", startHour: 10, endHour: 21 } },
+];
+
+const HOURS = Array.from({ length: 15 }, (_, i) => i + 7);
+
+export default function WeekendTimeSelector({
+  onConfirm,
+  onClose,
+  loading,
+}: {
+  onConfirm: (config: TimeConfig) => void;
+  onClose: () => void;
+  loading?: boolean;
+}) {
+  const [config, setConfig] = useState<TimeConfig>(PRESETS[0].value);
+
+  return (
+    <motion.div
+      className="fixed inset-0 z-50 flex items-end justify-center bg-black/50"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      onClick={onClose}
+    >
+      <motion.div
+        className="w-full max-w-md rounded-t-3xl bg-surface px-6 pb-8 pt-4"
+        initial={{ y: "100%" }}
+        animate={{ y: 0 }}
+        exit={{ y: "100%" }}
+        transition={{ type: "spring", damping: 25, stiffness: 300 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mx-auto mb-4 h-1 w-10 rounded-full bg-border" />
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Calendar size={16} className="text-purple-400" />
+            <h3 className="text-sm font-bold text-heading">选择可用时间</h3>
+          </div>
+          <button onClick={onClose} aria-label="关闭" className="text-muted active:text-foreground">
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="mt-4 flex gap-2">
+          {PRESETS.map((preset) => (
+            <button
+              key={preset.value.date}
+              onClick={() => setConfig({ ...preset.value })}
+              className={`flex-1 rounded-xl py-2.5 text-xs font-bold transition-all ${
+                config.date === preset.value.date
+                  ? "bg-purple-600 text-white shadow-lg shadow-purple-900/30"
+                  : "bg-elevated text-secondary ring-1 ring-border"
+              }`}
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-5 flex items-center gap-3">
+          <Clock size={14} className="shrink-0 text-muted" />
+          <div className="flex flex-1 items-center gap-2">
+            <select
+              value={config.startHour}
+              onChange={(e) => setConfig((c) => ({ ...c, startHour: Number(e.target.value) }))}
+              className="h-9 flex-1 rounded-lg bg-elevated px-2 text-center text-sm font-semibold text-foreground ring-1 ring-border"
+            >
+              {HOURS.filter((h) => h < config.endHour).map((h) => (
+                <option key={h} value={h}>{String(h).padStart(2, "0")}:00</option>
+              ))}
+            </select>
+            <span className="text-xs text-muted">至</span>
+            <select
+              value={config.endHour}
+              onChange={(e) => setConfig((c) => ({ ...c, endHour: Number(e.target.value) }))}
+              className="h-9 flex-1 rounded-lg bg-elevated px-2 text-center text-sm font-semibold text-foreground ring-1 ring-border"
+            >
+              {HOURS.filter((h) => h > config.startHour).map((h) => (
+                <option key={h} value={h}>{String(h).padStart(2, "0")}:00</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <Button
+          onClick={() => onConfirm(config)}
+          variant="purple"
+          size="lg"
+          loading={loading}
+          icon={<Sparkles size={16} />}
+          className="mt-6 w-full"
+        >
+          生成周末计划
+        </Button>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/src/lib/ai.ts b/src/lib/ai.ts
new file mode 100644
index 0000000..47f9db3
--- /dev/null
+++ b/src/lib/ai.ts
@@ -0,0 +1,172 @@
+import OpenAI from "openai";
+import type { IdeaTags, PlanItem } from "@/types";
+
+function getClient() {
+  const apiKey = process.env.DEEPSEEK_API_KEY;
+  if (!apiKey) throw new Error("DEEPSEEK_API_KEY is not configured");
+  return new OpenAI({ baseURL: "https://api.deepseek.com", apiKey });
+}
+
+const TAG_SYSTEM_PROMPT = `你是一个周末活动分析助手。用户会输入一条周末活动想法，你需要分析并返回结构化 JSON。
+
+返回字段：
+- category: 活动品类，必须是以下之一：
+  "dining"（餐饮美食）| "outdoor"（户外活动）| "entertainment"（娱乐休闲，如电影、KTV、密室）| "shopping"（购物逛街）| "sports"（运动健身）| "culture"（文化艺术，如博物馆、展览）| "relaxation"（放松休息，如SPA、咖啡、下午茶）
+- timeSlot: 最适合的时间段，必须是以下之一：
+  "morning"（上午）| "afternoon"（下午）| "evening"（晚上）| "flexible"（任意时间都可以）| "all_day"（需要一整天）
+- estimatedMinutes: 预估活动时长（整数，单位分钟）
+- outdoor: 是否户外活动（布尔值）
+- searchQuery: 在地图服务上搜索的关键词（品牌名、地名或品类名）
+- searchType: 搜索策略，必须是以下之一：
+  "brand"（连锁品牌，有多个分店）| "place"（唯一地点，如某个公园）| "category"（模糊品类，搜附近匹配的）
+
+只返回 JSON，不要任何额外文字。`;
+
+const SCHEDULE_SYSTEM_PROMPT = `你是一个周末行程规划师。根据用户选定的活动和候选地点坐标，生成最优行程安排。
+
+规划原则：
+1. 选择地理位置相近的 POI，最小化总移动距离
+2. 尊重活动的时间偏好（公园上午、正餐在饭点、电影灵活）
+3. 活动之间留出合理的交通时间（15-30分钟）
+4. 如果有"category"类型的活动，选择离其他已确定地点最近的候选
+
+返回 JSON 格式：
+{
+  "items": [
+    {
+      "time": "10:00",
+      "activity": "原始活动描述",
+      "poi": "选定的具体 POI 名称",
+      "address": "详细地址",
+      "lat": 31.2,
+      "lng": 121.5,
+      "duration": 120,
+      "reason": "选择这个时间和地点的简短理由"
+    }
+  ],
+  "summary": "一句话总结这个行程的亮点"
+}
+
+按时间顺序排列。只返回 JSON。`;
+
+export interface ScheduleContext {
+  ideas: {
+    content: string;
+    category: string;
+    timeSlot: string;
+    estimatedMinutes: number;
+    searchQuery: string;
+    searchType: string;
+  }[];
+  candidates: Record<
+    string,
+    { name: string; address: string; lat: number; lng: number; rating?: number }[]
+  >;
+  userLocation: { lat: number; lng: number };
+  availableTime: { date: string; startHour: number; endHour: number };
+}
+
+export async function tagIdea(content: string): Promise<IdeaTags | null> {
+  try {
+    const client = getClient();
+    const response = await client.chat.completions.create({
+      model: "deepseek-chat",
+      messages: [
+        { role: "system", content: TAG_SYSTEM_PROMPT },
+        { role: "user", content },
+      ],
+      response_format: { type: "json_object" },
+      max_tokens: 200,
+      temperature: 0.3,
+    });
+
+    const text = response.choices[0]?.message?.content;
+    if (!text) return null;
+
+    const parsed = JSON.parse(text);
+
+    const validCategories = ["dining", "outdoor", "entertainment", "shopping", "sports", "culture", "relaxation"];
+    const validTimeSlots = ["morning", "afternoon", "evening", "flexible", "all_day"];
+    const validSearchTypes = ["brand", "place", "category"];
+
+    if (
+      !validCategories.includes(parsed.category) ||
+      !validTimeSlots.includes(parsed.timeSlot) ||
+      !validSearchTypes.includes(parsed.searchType) ||
+      typeof parsed.estimatedMinutes !== "number" ||
+      typeof parsed.outdoor !== "boolean" ||
+      typeof parsed.searchQuery !== "string"
+    ) {
+      return null;
+    }
+
+    return {
+      category: parsed.category,
+      timeSlot: parsed.timeSlot,
+      estimatedMinutes: parsed.estimatedMinutes,
+      outdoor: parsed.outdoor,
+      searchQuery: parsed.searchQuery,
+      searchType: parsed.searchType,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export async function generateSchedule(
+  ctx: ScheduleContext,
+): Promise<{ items: PlanItem[]; summary: string } | null> {
+  try {
+    const client = getClient();
+
+    const userPrompt = `
+可用时间：${ctx.availableTime.date}，${ctx.availableTime.startHour}:00 - ${ctx.availableTime.endHour}:00
+用户出发位置：纬度 ${ctx.userLocation.lat}，经度 ${ctx.userLocation.lng}
+
+活动列表：
+${ctx.ideas.map((idea, i) => `${i + 1}. "${idea.content}"（品类：${idea.category}，偏好时间：${idea.timeSlot}，预估${idea.estimatedMinutes}分钟）`).join("\n")}
+
+各活动的候选地点：
+${Object.entries(ctx.candidates)
+  .map(
+    ([query, pois]) =>
+      `"${query}" 的候选：\n${pois.map((p) => `  - ${p.name} | ${p.address} | 坐标(${p.lat},${p.lng})${p.rating ? ` | 评分${p.rating}` : ""}`).join("\n")}`,
+  )
+  .join("\n\n")}
+
+请为以上活动生成最优行程安排。`;
+
+    const response = await client.chat.completions.create({
+      model: "deepseek-chat",
+      messages: [
+        { role: "system", content: SCHEDULE_SYSTEM_PROMPT },
+        { role: "user", content: userPrompt },
+      ],
+      response_format: { type: "json_object" },
+      max_tokens: 1500,
+      temperature: 0.5,
+    });
+
+    const text = response.choices[0]?.message?.content;
+    if (!text) return null;
+
+    const parsed = JSON.parse(text);
+    if (!Array.isArray(parsed.items) || parsed.items.length === 0) return null;
+
+    return {
+      items: parsed.items.map((item: Record<string, unknown>) => ({
+        time: String(item.time ?? ""),
+        activity: String(item.activity ?? ""),
+        poi: String(item.poi ?? ""),
+        address: String(item.address ?? ""),
+        lat: Number(item.lat) || 0,
+        lng: Number(item.lng) || 0,
+        duration: Number(item.duration) || 60,
+        reason: String(item.reason ?? ""),
+      })),
+      summary: String(parsed.summary ?? ""),
+    };
+  } catch {
+    return null;
+  }
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 85c78c4..c9df25e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -69,3 +69,47 @@ export interface FavoriteRecord {
   restaurantData: Restaurant;
   createdAt: string;
 }
+
+export type IdeaCategory =
+  | "dining"
+  | "outdoor"
+  | "entertainment"
+  | "shopping"
+  | "sports"
+  | "culture"
+  | "relaxation";
+
+export type IdeaTimeSlot =
+  | "morning"
+  | "afternoon"
+  | "evening"
+  | "flexible"
+  | "all_day";
+
+export type IdeaSearchType = "brand" | "place" | "category";
+
+export interface IdeaTags {
+  category: IdeaCategory;
+  timeSlot: IdeaTimeSlot;
+  estimatedMinutes: number;
+  outdoor: boolean;
+  searchQuery: string;
+  searchType: IdeaSearchType;
+}
+
+export interface PlanItem {
+  time: string;
+  activity: string;
+  poi: string;
+  address: string;
+  lat: number;
+  lng: number;
+  duration: number;
+  reason: string;
+}
+
+export interface WeekendPlanData {
+  date: string;
+  items: PlanItem[];
+  summary: string;
+}

From d8e42b860fb400553307aa41fcc1232f782102df Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 01:57:42 +0800
Subject: [PATCH 62/66] =?UTF-8?q?feat:=20=E5=B7=B2=E6=8E=A5=E5=8F=97?=
 =?UTF-8?q?=E5=A5=91=E7=BA=A6=E6=8C=81=E4=B9=85=E5=8C=96=20=E2=80=94=20?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98/=E5=8A=A0=E8=BD=BD/=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PATCH /api/blindbox/plan: 接受契约时更新状态为 accepted
- GET /api/blindbox/plan: 查询房间内最近一次已接受的计划
- 进入房间时自动加载已接受计划并展示行程视图
- 修复整个周末想法不足时重复活动的问题（不足则只生成一天）
---
 src/app/api/blindbox/plan/route.ts | 56 +++++++++++++++++++++++++++---
 src/app/blindbox/[code]/page.tsx   | 37 ++++++++++++++++++--
 2 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/src/app/api/blindbox/plan/route.ts b/src/app/api/blindbox/plan/route.ts
index b0625fb..5b9bc3b 100644
--- a/src/app/api/blindbox/plan/route.ts
+++ b/src/app/api/blindbox/plan/route.ts
@@ -190,16 +190,18 @@ export const POST = apiHandler(async (req) => {
         ]
       : [at];
 
-  // Select ideas per day, avoiding duplicates across days when possible
+  // Select ideas per day — skip extra days when ideas run out
   const dayIdeas: TaggedIdea[][] = [];
   const usedIds = new Set<string>();
   for (const dayConfig of dayConfigs) {
     const remaining = taggedIdeas.filter((i) => !usedIds.has(i.id));
-    const pool = remaining.length >= 2 ? remaining : taggedIdeas;
-    const selected = selectIdeasForSlots(pool, dayConfig.endHour - dayConfig.startHour);
+    if (remaining.length < 2) break;
+    const selected = selectIdeasForSlots(remaining, dayConfig.endHour - dayConfig.startHour);
     for (const idea of selected) usedIds.add(idea.id);
     dayIdeas.push(selected);
   }
+  // Trim to actual days generated (may be fewer than requested for "整个周末")
+  const actualDayConfigs = dayConfigs.slice(0, dayIdeas.length);
 
   const allSelected = dayIdeas.flat();
   if (allSelected.length === 0) {
@@ -260,7 +262,7 @@ export const POST = apiHandler(async (req) => {
 
   // Generate schedule for each day (parallel AI calls)
   const schedules = await Promise.all(
-    dayConfigs.map((dayConfig, idx) => {
+    actualDayConfigs.map((dayConfig, idx) => {
       const ideas = dayIdeas[idx];
       const ctx: ScheduleContext = {
         ideas: ideas.map((i) => ({
@@ -282,7 +284,7 @@ export const POST = apiHandler(async (req) => {
   const days = schedules
     .map((schedule, idx) =>
       schedule
-        ? { date: dayConfigs[idx].date, items: schedule.items, summary: schedule.summary }
+        ? { date: actualDayConfigs[idx].date, items: schedule.items, summary: schedule.summary }
         : null,
     )
     .filter((d) => d !== null);
@@ -308,3 +310,47 @@ export const POST = apiHandler(async (req) => {
     createdAt: plan.createdAt,
   });
 });
+
+export const PATCH = apiHandler(async (req) => {
+  const { planId, userId } = await req.json();
+  requireUserId(userId);
+  if (!planId) throw new ApiError("planId 不能为空");
+
+  const plan = await prisma.weekendPlan.findUnique({ where: { id: planId } });
+  if (!plan) throw new ApiError("计划不存在", 404);
+  if (plan.userId !== userId) throw new ApiError("只能接受自己的计划", 403);
+
+  await prisma.weekendPlan.update({
+    where: { id: planId },
+    data: { status: "accepted" },
+  });
+
+  return NextResponse.json({ ok: true });
+});
+
+export const GET = apiHandler(async (req) => {
+  const { searchParams } = new URL(req.url);
+  const roomId = searchParams.get("roomId");
+  const userId = searchParams.get("userId");
+
+  requireUserId(userId);
+  if (!roomId) throw new ApiError("roomId 不能为空");
+
+  const plan = await prisma.weekendPlan.findFirst({
+    where: { roomId, userId: userId!, status: "accepted" },
+    orderBy: { createdAt: "desc" },
+    select: { id: true, planData: true, createdAt: true },
+  });
+
+  if (!plan) return NextResponse.json({ plan: null });
+
+  const parsed = JSON.parse(plan.planData);
+
+  return NextResponse.json({
+    plan: {
+      id: plan.id,
+      days: parsed.days,
+      createdAt: plan.createdAt,
+    },
+  });
+});
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index 740aba3..f8046b0 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -71,6 +71,7 @@ export default function BlindboxRoomPage() {
   const [confirmLeave, setConfirmLeave] = useState(false);
   const [leaving, setLeaving] = useState(false);
   const [locating, setLocating] = useState(false);
+  const [planId, setPlanId] = useState<string | null>(null);
   const [planDays, setPlanDays] = useState<WeekendPlanData[]>([]);
   const [planAccepted, setPlanAccepted] = useState(false);
   const [generating, setGenerating] = useState(false);
@@ -136,9 +137,28 @@ export default function BlindboxRoomPage() {
     } catch { /* ignore */ }
   }, [room]);
 
+  const fetchAcceptedPlan = useCallback(async () => {
+    const p = getCachedProfile();
+    if (!room || !p) return;
+    try {
+      const res = await fetch(`/api/blindbox/plan?roomId=${room.id}&userId=${p.id}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.plan) {
+        setPlanId(data.plan.id);
+        setPlanDays(data.plan.days);
+        setPlanAccepted(true);
+        setPhase("plan_reveal");
+      }
+    } catch { /* ignore */ }
+  }, [room]);
+
   useEffect(() => {
-    if (isMember && room) fetchIdeas();
-  }, [isMember, room, fetchIdeas]);
+    if (isMember && room) {
+      fetchIdeas();
+      fetchAcceptedPlan();
+    }
+  }, [isMember, room, fetchIdeas, fetchAcceptedPlan]);
 
   useEffect(() => {
     if (isMember && inputRef.current) {
@@ -212,6 +232,7 @@ export default function BlindboxRoomPage() {
         throw new Error(data.error || "生成失败");
       }
       const data = await res.json();
+      setPlanId(data.id);
       setPlanDays(data.days);
       setPlanAccepted(false);
       setPhase("plan_reveal");
@@ -782,9 +803,18 @@ export default function BlindboxRoomPage() {
                   days={planDays}
                   accepted={planAccepted}
                   regenerating={generating}
-                  onAccept={() => {
+                  onAccept={async () => {
                     setPlanAccepted(true);
                     fireConfetti();
+                    if (planId && profile) {
+                      try {
+                        await fetch("/api/blindbox/plan", {
+                          method: "PATCH",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ planId, userId: profile.id }),
+                        });
+                      } catch { /* best-effort */ }
+                    }
                   }}
                   onRegenerate={() => {
                     setPhase("time_select");
@@ -792,6 +822,7 @@ export default function BlindboxRoomPage() {
                   onShare={() => setShowPlanShareCard(true)}
                   onBack={() => {
                     setPhase("pool");
+                    setPlanId(null);
                     setPlanDays([]);
                     setPlanAccepted(false);
                   }}

From c17b13b6a8c780a671f15a97e717aa69709bcb62 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 02:12:18 +0800
Subject: [PATCH 63/66] =?UTF-8?q?feat:=20=E5=A5=91=E7=BA=A6=E7=94=9F?=
 =?UTF-8?q?=E5=91=BD=E5=91=A8=E6=9C=9F=20+=20=E5=88=B0=E6=9C=9F=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=20+=20=E6=88=90=E5=B0=B1=E5=A2=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 扩展 WeekendPlan schema: 新增 endTime 字段与 userId 索引
- PATCH /api/blindbox/plan 支持 accept/complete/expire 操作，
  接受时自动计算契约结束时间
- GET /api/blindbox/plan 支持 mode 参数 (latest/pending/history)
- 房间页接受契约后自动返回想法池，顶部显示"契约进行中"指示器
- 契约到期时触发浏览器通知 + 页面加载时弹出完成确认弹窗
- 新增 /achievements 成就墙页面：统计数据 + 决策记录/契约记录双标签
- 首页和个人中心新增成就墙入口
---
 prisma/schema.prisma                       |   8 +-
 src/app/achievements/page.tsx              | 274 +++++++++++++++++++++
 src/app/api/blindbox/plan/route.ts         | 171 +++++++++++--
 src/app/api/user/achievements/route.ts     |  77 ++++++
 src/app/blindbox/[code]/page.tsx           | 118 ++++++++-
 src/app/page.tsx                           |  21 +-
 src/app/profile/page.tsx                   |  17 +-
 src/components/ContractCompletionModal.tsx | 126 ++++++++++
 src/components/ContractHistoryItem.tsx     | 102 ++++++++
 src/types/index.ts                         |  11 +
 10 files changed, 889 insertions(+), 36 deletions(-)
 create mode 100644 src/app/achievements/page.tsx
 create mode 100644 src/app/api/user/achievements/route.ts
 create mode 100644 src/components/ContractCompletionModal.tsx
 create mode 100644 src/components/ContractHistoryItem.tsx

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index dbe18af..3d294e0 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -114,15 +114,17 @@ model BlindBoxIdea {
 }
 
 model WeekendPlan {
-  id        String   @id @default(cuid())
+  id        String    @id @default(cuid())
   roomId    String
   userId    String
   planData  String
-  status    String   @default("active")
-  createdAt DateTime @default(now())
+  status    String    @default("active")
+  endTime   DateTime?
+  createdAt DateTime  @default(now())
 
   room BlindBoxRoom @relation(fields: [roomId], references: [id], onDelete: Cascade)
   user User         @relation(fields: [userId], references: [id], onDelete: Cascade)
 
   @@index([roomId])
+  @@index([userId])
 }
diff --git a/src/app/achievements/page.tsx b/src/app/achievements/page.tsx
new file mode 100644
index 0000000..644c174
--- /dev/null
+++ b/src/app/achievements/page.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  ArrowLeft,
+  Trophy,
+  Zap,
+  Gift,
+  ClipboardList,
+  Target,
+  TrendingUp,
+  BarChart3,
+} from "lucide-react";
+import { isRegistered, getCachedProfile } from "@/lib/userId";
+import RestaurantImage from "@/components/RestaurantImage";
+import ContractHistoryItem from "@/components/ContractHistoryItem";
+import EmptyState from "@/components/EmptyState";
+import { Skeleton, RecordItemSkeleton } from "@/components/Skeleton";
+import { buildNavUrl } from "@/lib/navigation";
+import type { DecisionRecord, ContractRecord, Restaurant } from "@/types";
+
+type Tab = "decisions" | "contracts";
+
+interface Stats {
+  totalDecisions: number;
+  totalContracts: number;
+  completedContracts: number;
+  completionRate: number;
+}
+
+function firstImage(r: Restaurant): string {
+  if (r.images?.length > 0) return r.images[0];
+  const legacy = (r as unknown as Record<string, unknown>).image;
+  return typeof legacy === "string" ? legacy : "";
+}
+
+export default function AchievementsPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [tab, setTab] = useState<Tab>("decisions");
+  const [stats, setStats] = useState<Stats>({
+    totalDecisions: 0,
+    totalContracts: 0,
+    completedContracts: 0,
+    completionRate: 0,
+  });
+  const [decisions, setDecisions] = useState<DecisionRecord[]>([]);
+  const [contracts, setContracts] = useState<ContractRecord[]>([]);
+
+  useEffect(() => {
+    if (!isRegistered()) {
+      router.replace("/");
+      return;
+    }
+    const p = getCachedProfile();
+    if (!p) return;
+
+    (async () => {
+      try {
+        const res = await fetch(`/api/user/achievements?userId=${p.id}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        setStats(data.stats);
+        setDecisions(data.decisions);
+        setContracts(data.contracts);
+      } catch { /* ignore */ }
+      finally { setLoading(false); }
+    })();
+  }, [router]);
+
+  const statCards = [
+    {
+      label: "决策记录",
+      value: stats.totalDecisions,
+      icon: Target,
+      color: "text-amber-400",
+      bg: "bg-amber-600/15",
+    },
+    {
+      label: "契约完成",
+      value: stats.completedContracts,
+      icon: Trophy,
+      color: "text-emerald-400",
+      bg: "bg-emerald-600/15",
+    },
+    {
+      label: "完成率",
+      value: stats.totalContracts > 0 ? `${stats.completionRate}%` : "—",
+      icon: TrendingUp,
+      color: "text-purple-400",
+      bg: "bg-purple-600/15",
+    },
+  ];
+
+  const tabs: { id: Tab; label: string; icon: typeof Zap }[] = [
+    { id: "decisions", label: "极速救场", icon: Zap },
+    { id: "contracts", label: "周末契约", icon: Gift },
+  ];
+
+  return (
+    <div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-6 overflow-y-auto scrollbar-none">
+      {/* Ambient glow */}
+      <div className="pointer-events-none fixed left-1/2 top-0 -translate-x-1/2 -translate-y-1/3 h-[320px] w-[320px] rounded-full bg-purple-500/8 blur-3xl" />
+
+      {/* Header */}
+      <div className="flex w-full max-w-sm items-center gap-3">
+        <button
+          onClick={() => router.back()}
+          aria-label="返回"
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface ring-1 ring-border transition-colors active:bg-elevated"
+        >
+          <ArrowLeft size={16} className="text-muted" />
+        </button>
+        <div className="flex items-center gap-2">
+          <Trophy size={18} className="text-amber-400" />
+          <h1 className="text-base font-bold text-heading">成就墙</h1>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <motion.div
+        className="mt-6 grid w-full max-w-sm grid-cols-3 gap-3"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        {statCards.map((s) => (
+          <div
+            key={s.label}
+            className="flex flex-col items-center gap-1.5 rounded-xl bg-surface p-3 ring-1 ring-border"
+          >
+            <div className={`flex h-8 w-8 items-center justify-center rounded-lg ${s.bg}`}>
+              <s.icon size={16} className={s.color} />
+            </div>
+            {loading ? (
+              <Skeleton className="h-5 w-10" />
+            ) : (
+              <p className="text-lg font-black text-heading">{s.value}</p>
+            )}
+            <p className="text-[10px] text-muted">{s.label}</p>
+          </div>
+        ))}
+      </motion.div>
+
+      {/* Tab switcher */}
+      <motion.div
+        className="mt-6 flex w-full max-w-sm rounded-xl bg-surface p-1 ring-1 ring-border"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2 }}
+      >
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            className={`relative flex flex-1 items-center justify-center gap-1.5 rounded-lg py-2 text-xs font-semibold transition-colors ${
+              tab === t.id ? "text-heading" : "text-muted"
+            }`}
+          >
+            {tab === t.id && (
+              <motion.div
+                layoutId="activeTab"
+                className="absolute inset-0 rounded-lg bg-elevated ring-1 ring-border"
+                transition={{ type: "spring", damping: 25, stiffness: 350 }}
+              />
+            )}
+            <t.icon size={13} className="relative z-10" />
+            <span className="relative z-10">{t.label}</span>
+          </button>
+        ))}
+      </motion.div>
+
+      {/* Content */}
+      <div className="mt-4 w-full max-w-sm">
+        <AnimatePresence mode="wait">
+          {tab === "decisions" && (
+            <motion.div
+              key="decisions"
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              transition={{ duration: 0.2 }}
+              className="flex flex-col gap-2"
+            >
+              {loading ? (
+                <>
+                  <RecordItemSkeleton />
+                  <RecordItemSkeleton />
+                  <RecordItemSkeleton />
+                </>
+              ) : decisions.length === 0 ? (
+                <EmptyState
+                  icon={ClipboardList}
+                  title="还没有决策记录"
+                  subtitle="使用极速救场后会在这里记录"
+                  color="amber"
+                />
+              ) : (
+                decisions.map((d) => (
+                  <a
+                    key={d.id}
+                    href={buildNavUrl(d.restaurantData)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
+                  >
+                    {firstImage(d.restaurantData) && (
+                      <RestaurantImage
+                        src={firstImage(d.restaurantData)}
+                        alt={d.restaurantName}
+                        className="h-12 w-12 shrink-0 rounded-lg object-cover"
+                      />
+                    )}
+                    <div className="flex min-w-0 flex-1 flex-col justify-center">
+                      <p className="truncate text-sm font-semibold text-heading">
+                        {d.restaurantName}
+                      </p>
+                      <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
+                        <span>
+                          {d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}
+                        </span>
+                        <span>{d.participants} 人参与</span>
+                        <span>
+                          {new Date(d.createdAt).toLocaleDateString("zh-CN", {
+                            month: "short",
+                            day: "numeric",
+                          })}
+                        </span>
+                      </div>
+                    </div>
+                  </a>
+                ))
+              )}
+            </motion.div>
+          )}
+
+          {tab === "contracts" && (
+            <motion.div
+              key="contracts"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.2 }}
+              className="flex flex-col gap-2"
+            >
+              {loading ? (
+                <>
+                  <RecordItemSkeleton />
+                  <RecordItemSkeleton />
+                  <RecordItemSkeleton />
+                </>
+              ) : contracts.length === 0 ? (
+                <EmptyState
+                  icon={BarChart3}
+                  title="还没有契约记录"
+                  subtitle="完成或过期的契约会在这里显示"
+                  color="purple"
+                />
+              ) : (
+                contracts.map((c) => (
+                  <ContractHistoryItem key={c.id} record={c} />
+                ))
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <div className="h-8 shrink-0" />
+    </div>
+  );
+}
diff --git a/src/app/api/blindbox/plan/route.ts b/src/app/api/blindbox/plan/route.ts
index 5b9bc3b..924b784 100644
--- a/src/app/api/blindbox/plan/route.ts
+++ b/src/app/api/blindbox/plan/route.ts
@@ -311,46 +311,169 @@ export const POST = apiHandler(async (req) => {
   });
 });
 
+/**
+ * Map "周六"/"周日" to the next occurrence of that weekday from a reference date.
+ * Returns a Date at 00:00 of that day.
+ */
+function nextWeekday(dayLabel: string, from: Date): Date {
+  const targetDow = dayLabel === "周日" ? 0 : 6; // Sunday=0, Saturday=6
+  const d = new Date(from);
+  d.setHours(0, 0, 0, 0);
+  const diff = (targetDow - d.getDay() + 7) % 7;
+  d.setDate(d.getDate() + (diff === 0 ? 0 : diff));
+  return d;
+}
+
+function computeEndTime(planData: string, now: Date): Date | null {
+  try {
+    const parsed = JSON.parse(planData);
+    const days = parsed.days as { date: string; items: { time: string; duration: number }[] }[];
+    if (!days?.length) return null;
+
+    const lastDay = days[days.length - 1];
+    const lastItem = lastDay.items[lastDay.items.length - 1];
+    if (!lastItem) return null;
+
+    const base = nextWeekday(lastDay.date, now);
+    const [h, m] = lastItem.time.split(":").map(Number);
+    base.setHours(h, m, 0, 0);
+    base.setMinutes(base.getMinutes() + (lastItem.duration || 60));
+
+    // If computed end time is in the past, it's for next week
+    if (base.getTime() < now.getTime()) {
+      base.setDate(base.getDate() + 7);
+    }
+
+    return base;
+  } catch {
+    return null;
+  }
+}
+
 export const PATCH = apiHandler(async (req) => {
-  const { planId, userId } = await req.json();
+  const { planId, userId, action } = await req.json();
   requireUserId(userId);
   if (!planId) throw new ApiError("planId 不能为空");
 
   const plan = await prisma.weekendPlan.findUnique({ where: { id: planId } });
   if (!plan) throw new ApiError("计划不存在", 404);
-  if (plan.userId !== userId) throw new ApiError("只能接受自己的计划", 403);
+  if (plan.userId !== userId) throw new ApiError("只能操作自己的计划", 403);
 
-  await prisma.weekendPlan.update({
-    where: { id: planId },
-    data: { status: "accepted" },
-  });
+  const act = action || "accept";
 
-  return NextResponse.json({ ok: true });
+  if (act === "accept") {
+    if (plan.status !== "active") throw new ApiError("该计划无法接受", 400);
+    const endTime = computeEndTime(plan.planData, new Date());
+    await prisma.weekendPlan.update({
+      where: { id: planId },
+      data: { status: "accepted", endTime },
+    });
+    return NextResponse.json({ ok: true, endTime });
+  }
+
+  if (act === "complete" || act === "expire") {
+    if (plan.status !== "accepted") throw new ApiError("只能更新已接受的计划", 400);
+    await prisma.weekendPlan.update({
+      where: { id: planId },
+      data: { status: act === "complete" ? "completed" : "expired" },
+    });
+    return NextResponse.json({ ok: true });
+  }
+
+  throw new ApiError("无效的操作", 400);
 });
 
 export const GET = apiHandler(async (req) => {
   const { searchParams } = new URL(req.url);
-  const roomId = searchParams.get("roomId");
+  const mode = searchParams.get("mode") || "latest";
   const userId = searchParams.get("userId");
-
   requireUserId(userId);
-  if (!roomId) throw new ApiError("roomId 不能为空");
 
-  const plan = await prisma.weekendPlan.findFirst({
-    where: { roomId, userId: userId!, status: "accepted" },
-    orderBy: { createdAt: "desc" },
-    select: { id: true, planData: true, createdAt: true },
-  });
+  if (mode === "latest") {
+    const roomId = searchParams.get("roomId");
+    if (!roomId) throw new ApiError("roomId 不能为空");
 
-  if (!plan) return NextResponse.json({ plan: null });
+    const plan = await prisma.weekendPlan.findFirst({
+      where: { roomId, userId: userId!, status: "accepted" },
+      orderBy: { createdAt: "desc" },
+      select: { id: true, planData: true, endTime: true, createdAt: true },
+    });
 
-  const parsed = JSON.parse(plan.planData);
+    if (!plan) return NextResponse.json({ plan: null });
+    const parsed = JSON.parse(plan.planData);
+    return NextResponse.json({
+      plan: { id: plan.id, days: parsed.days, endTime: plan.endTime, createdAt: plan.createdAt },
+    });
+  }
 
-  return NextResponse.json({
-    plan: {
-      id: plan.id,
-      days: parsed.days,
-      createdAt: plan.createdAt,
-    },
-  });
+  if (mode === "pending") {
+    const plans = await prisma.weekendPlan.findMany({
+      where: {
+        userId: userId!,
+        status: "accepted",
+        endTime: { not: null, lt: new Date() },
+      },
+      orderBy: { createdAt: "desc" },
+      select: { id: true, planData: true, roomId: true, createdAt: true },
+      take: 5,
+    });
+
+    const result = await Promise.all(
+      plans.map(async (p) => {
+        const room = await prisma.blindBoxRoom.findUnique({
+          where: { id: p.roomId },
+          select: { name: true, code: true },
+        });
+        const parsed = JSON.parse(p.planData);
+        const days = parsed.days as { date: string; items: { activity: string }[] }[];
+        return {
+          id: p.id,
+          roomName: room?.name ?? "未知房间",
+          roomCode: room?.code ?? "",
+          date: days.map((d) => d.date).join(" + "),
+          activities: days.flatMap((d) => d.items.map((i) => i.activity)),
+          createdAt: p.createdAt,
+        };
+      }),
+    );
+
+    return NextResponse.json({ pending: result });
+  }
+
+  if (mode === "history") {
+    const plans = await prisma.weekendPlan.findMany({
+      where: {
+        userId: userId!,
+        status: { in: ["completed", "expired"] },
+      },
+      orderBy: { createdAt: "desc" },
+      select: { id: true, planData: true, status: true, roomId: true, createdAt: true },
+      take: 50,
+    });
+
+    const result = await Promise.all(
+      plans.map(async (p) => {
+        const room = await prisma.blindBoxRoom.findUnique({
+          where: { id: p.roomId },
+          select: { name: true, code: true },
+        });
+        const parsed = JSON.parse(p.planData);
+        const days = parsed.days as { date: string; items: { activity: string }[] }[];
+        return {
+          id: p.id,
+          status: p.status,
+          roomName: room?.name ?? "未知房间",
+          roomCode: room?.code ?? "",
+          date: days.map((d) => d.date).join(" + "),
+          dayCount: days.length,
+          activities: days.flatMap((d) => d.items.map((i) => i.activity)),
+          createdAt: p.createdAt,
+        };
+      }),
+    );
+
+    return NextResponse.json({ history: result });
+  }
+
+  throw new ApiError("无效的 mode 参数", 400);
 });
diff --git a/src/app/api/user/achievements/route.ts b/src/app/api/user/achievements/route.ts
new file mode 100644
index 0000000..4b4a5e3
--- /dev/null
+++ b/src/app/api/user/achievements/route.ts
@@ -0,0 +1,77 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { apiHandler, requireUserId } from "@/lib/api";
+
+export const GET = apiHandler(async (req) => {
+  const userId = req.nextUrl.searchParams.get("userId");
+  requireUserId(userId);
+
+  const [decisions, contracts] = await Promise.all([
+    prisma.decision.findMany({
+      where: { userId: userId! },
+      orderBy: { createdAt: "desc" },
+      take: 50,
+    }),
+    prisma.weekendPlan.findMany({
+      where: {
+        userId: userId!,
+        status: { in: ["completed", "expired"] },
+      },
+      orderBy: { createdAt: "desc" },
+      take: 50,
+      select: {
+        id: true,
+        planData: true,
+        status: true,
+        roomId: true,
+        createdAt: true,
+      },
+    }),
+  ]);
+
+  const roomIds = [...new Set(contracts.map((c) => c.roomId))];
+  const rooms = await prisma.blindBoxRoom.findMany({
+    where: { id: { in: roomIds } },
+    select: { id: true, name: true, code: true },
+  });
+  const roomMap = new Map(rooms.map((r) => [r.id, r]));
+
+  const completedCount = contracts.filter((c) => c.status === "completed").length;
+
+  const contractRecords = contracts.map((c) => {
+    const parsed = JSON.parse(c.planData);
+    const days = parsed.days as { date: string; items: { activity: string }[] }[];
+    const room = roomMap.get(c.roomId);
+    return {
+      id: c.id,
+      status: c.status,
+      roomName: room?.name ?? "未知房间",
+      roomCode: room?.code ?? "",
+      date: days.map((d) => d.date).join(" + "),
+      dayCount: days.length,
+      activities: days.flatMap((d) => d.items.map((i) => i.activity)),
+      createdAt: c.createdAt.toISOString(),
+    };
+  });
+
+  const decisionRecords = decisions.map((d) => ({
+    id: d.id,
+    roomId: d.roomId,
+    restaurantName: d.restaurantName,
+    restaurantData: JSON.parse(d.restaurantData),
+    matchType: d.matchType,
+    participants: d.participants,
+    createdAt: d.createdAt.toISOString(),
+  }));
+
+  return NextResponse.json({
+    stats: {
+      totalDecisions: decisions.length,
+      totalContracts: contracts.length,
+      completedContracts: completedCount,
+      completionRate: contracts.length > 0 ? Math.round((completedCount / contracts.length) * 100) : 0,
+    },
+    decisions: decisionRecords,
+    contracts: contractRecords,
+  });
+});
diff --git a/src/app/blindbox/[code]/page.tsx b/src/app/blindbox/[code]/page.tsx
index f8046b0..938f4bf 100644
--- a/src/app/blindbox/[code]/page.tsx
+++ b/src/app/blindbox/[code]/page.tsx
@@ -18,6 +18,8 @@ import {
   MapPin,
   Calendar,
   Sparkles,
+  ClipboardCheck,
+  ChevronRight,
 } from "lucide-react";
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
@@ -27,6 +29,7 @@ import BlindboxMyIdeas, { type MyIdea } from "@/components/BlindboxMyIdeas";
 import BlindboxDrawnHistory, { type DrawnIdea } from "@/components/BlindboxDrawnHistory";
 import WeekendTimeSelector from "@/components/WeekendTimeSelector";
 import BlindboxPlan from "@/components/BlindboxPlan";
+import ContractCompletionModal, { type PendingContract } from "@/components/ContractCompletionModal";
 import { useToast } from "@/hooks/useToast";
 import { useShare } from "@/hooks/useShare";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
@@ -76,6 +79,12 @@ export default function BlindboxRoomPage() {
   const [planAccepted, setPlanAccepted] = useState(false);
   const [generating, setGenerating] = useState(false);
   const [showPlanShareCard, setShowPlanShareCard] = useState(false);
+  const [activeContract, setActiveContract] = useState<{
+    id: string;
+    days: WeekendPlanData[];
+    endTime: string | null;
+  } | null>(null);
+  const [pendingContracts, setPendingContracts] = useState<PendingContract[]>([]);
 
   const boxControls = useAnimation();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -141,14 +150,15 @@ export default function BlindboxRoomPage() {
     const p = getCachedProfile();
     if (!room || !p) return;
     try {
-      const res = await fetch(`/api/blindbox/plan?roomId=${room.id}&userId=${p.id}`);
+      const res = await fetch(`/api/blindbox/plan?mode=latest&roomId=${room.id}&userId=${p.id}`);
       if (!res.ok) return;
       const data = await res.json();
       if (data.plan) {
-        setPlanId(data.plan.id);
-        setPlanDays(data.plan.days);
-        setPlanAccepted(true);
-        setPhase("plan_reveal");
+        setActiveContract({
+          id: data.plan.id,
+          days: data.plan.days,
+          endTime: data.plan.endTime ?? null,
+        });
       }
     } catch { /* ignore */ }
   }, [room]);
@@ -160,6 +170,53 @@ export default function BlindboxRoomPage() {
     }
   }, [isMember, room, fetchIdeas, fetchAcceptedPlan]);
 
+  // Check for expired contracts on load
+  useEffect(() => {
+    const p = getCachedProfile();
+    if (!isMember || !p) return;
+    (async () => {
+      try {
+        const res = await fetch(`/api/blindbox/plan?mode=pending&userId=${p.id}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.pending?.length) setPendingContracts(data.pending);
+      } catch { /* ignore */ }
+    })();
+  }, [isMember]);
+
+  // Browser notification timer for active contract
+  useEffect(() => {
+    if (!activeContract?.endTime) return;
+    const end = new Date(activeContract.endTime).getTime();
+    const now = Date.now();
+    const ms = end - now;
+    if (ms <= 0) return;
+
+    if (typeof Notification !== "undefined" && Notification.permission === "default") {
+      Notification.requestPermission();
+    }
+
+    const timer = setTimeout(() => {
+      if (typeof Notification !== "undefined" && Notification.permission === "granted") {
+        const n = new Notification("周末契约到期", {
+          body: "你的周末契约已结束，完成了吗？",
+          icon: "/icon-192x192.png",
+        });
+        n.onclick = () => { window.focus(); n.close(); };
+      }
+      // Refresh pending contracts
+      const p = getCachedProfile();
+      if (p) {
+        fetch(`/api/blindbox/plan?mode=pending&userId=${p.id}`)
+          .then((r) => r.json())
+          .then((d) => { if (d.pending?.length) setPendingContracts(d.pending); })
+          .catch(() => {});
+      }
+    }, ms);
+
+    return () => clearTimeout(timer);
+  }, [activeContract?.endTime]);
+
   useEffect(() => {
     if (isMember && inputRef.current) {
       const t = setTimeout(() => inputRef.current?.focus(), 300);
@@ -505,6 +562,28 @@ export default function BlindboxRoomPage() {
         </button>
       </div>
 
+      {/* Active contract indicator */}
+      {activeContract && phase !== "plan_reveal" && (
+        <motion.button
+          className="mt-3 flex w-full max-w-sm items-center gap-2 rounded-xl bg-purple-600/10 px-3 py-2 ring-1 ring-purple-500/20 transition-colors active:bg-purple-600/20"
+          initial={{ opacity: 0, y: -8 }}
+          animate={{ opacity: 1, y: 0 }}
+          onClick={() => {
+            setPlanId(activeContract.id);
+            setPlanDays(activeContract.days);
+            setPlanAccepted(true);
+            setPhase("plan_reveal");
+          }}
+        >
+          <ClipboardCheck size={14} className="shrink-0 text-purple-400" />
+          <span className="text-xs font-medium text-purple-300">契约进行中</span>
+          <span className="text-[10px] text-purple-400/50">
+            {activeContract.days.map((d) => d.date).join(" + ")}
+          </span>
+          <ChevronRight size={12} className="ml-auto text-purple-400/40" />
+        </motion.button>
+      )}
+
       {/* Invite panel */}
       <AnimatePresence>
         {showInvite && (
@@ -808,13 +887,26 @@ export default function BlindboxRoomPage() {
                     fireConfetti();
                     if (planId && profile) {
                       try {
-                        await fetch("/api/blindbox/plan", {
+                        const res = await fetch("/api/blindbox/plan", {
                           method: "PATCH",
                           headers: { "Content-Type": "application/json" },
-                          body: JSON.stringify({ planId, userId: profile.id }),
+                          body: JSON.stringify({ planId, userId: profile.id, action: "accept" }),
+                        });
+                        const data = await res.json();
+                        setActiveContract({
+                          id: planId,
+                          days: planDays,
+                          endTime: data.endTime ?? null,
                         });
                       } catch { /* best-effort */ }
                     }
+                    toast.show("契约已接受！");
+                    timersRef.current.push(setTimeout(() => {
+                      setPhase("pool");
+                      setPlanId(null);
+                      setPlanDays([]);
+                      setPlanAccepted(false);
+                    }, 1500));
                   }}
                   onRegenerate={() => {
                     setPhase("time_select");
@@ -914,6 +1006,18 @@ export default function BlindboxRoomPage() {
       )}
 
       <div className="h-8 shrink-0" />
+
+      {/* Contract expiration check modal */}
+      {pendingContracts.length > 0 && profile && (
+        <ContractCompletionModal
+          contracts={pendingContracts}
+          userId={profile.id}
+          onDone={() => {
+            setPendingContracts([]);
+            setActiveContract(null);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index df80271..6f27208 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
-import { Zap, Gift, Clock, ChevronRight } from "lucide-react";
+import { Zap, Gift, Clock, ChevronRight, Trophy } from "lucide-react";
 import BrandLogo from "@/components/BrandLogo";
 
 export default function LandingPage() {
@@ -144,6 +144,25 @@ export default function LandingPage() {
         </motion.button>
       </div>
 
+      {/* Achievements entry */}
+      <motion.button
+        onClick={() => router.push("/achievements")}
+        className="mt-6 flex w-full max-w-sm items-center gap-3 rounded-xl bg-surface px-4 py-3 ring-1 ring-border transition-colors active:bg-elevated"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.5 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-600/15">
+          <Trophy size={16} className="text-amber-400" />
+        </div>
+        <div className="flex-1 text-left">
+          <p className="text-sm font-semibold text-heading">成就墙</p>
+          <p className="text-[10px] text-muted">查看决策记录和契约成就</p>
+        </div>
+        <ChevronRight size={14} className="text-muted" />
+      </motion.button>
+
       {/* Footer */}
       <motion.p
         className="mt-auto pt-10 text-center text-[10px] font-medium tracking-widest text-muted"
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index b980046..1dc0121 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -15,6 +15,8 @@ import {
   Eye,
   EyeOff,
   Zap,
+  Trophy,
+  ChevronRight,
 } from "lucide-react";
 import Card from "@/components/Card";
 import Input from "@/components/Input";
@@ -485,13 +487,26 @@ export default function ProfilePage() {
           )}
         </Card>
 
+        {/* Achievements link */}
+        <Card animated className="mt-4" delay={0.15}>
+          <button
+            onClick={() => router.push("/achievements")}
+            className="flex w-full items-center gap-2"
+          >
+            <Trophy size={15} className="text-amber-400" />
+            <h3 className="text-sm font-semibold text-secondary">成就墙</h3>
+            <span className="text-[10px] text-dim">决策记录 · 契约成就</span>
+            <ChevronRight size={14} className="ml-auto text-muted" />
+          </button>
+        </Card>
+
         <ProfileHistoryCard
           history={history}
           loading={historyLoading}
           open={showHistory}
           onToggle={() => setShowHistory((v) => !v)}
           onEmpty={() => router.push("/blindbox")}
-          delay={0.15}
+          delay={0.2}
         />
 
         <ProfileFavoritesCard
diff --git a/src/components/ContractCompletionModal.tsx b/src/components/ContractCompletionModal.tsx
new file mode 100644
index 0000000..82740c9
--- /dev/null
+++ b/src/components/ContractCompletionModal.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { CheckCircle2, XCircle, Loader2 } from "lucide-react";
+
+interface PendingContract {
+  id: string;
+  roomName: string;
+  date: string;
+  activities: string[];
+}
+
+interface ContractCompletionModalProps {
+  contracts: PendingContract[];
+  userId: string;
+  onDone: () => void;
+}
+
+export default function ContractCompletionModal({
+  contracts,
+  userId,
+  onDone,
+}: ContractCompletionModalProps) {
+  const [current, setCurrent] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  if (contracts.length === 0) return null;
+
+  const contract = contracts[current];
+
+  const handleAction = async (action: "complete" | "expire") => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      await fetch("/api/blindbox/plan", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ planId: contract.id, userId, action }),
+      });
+    } catch { /* best-effort */ }
+    setLoading(false);
+
+    if (current < contracts.length - 1) {
+      setCurrent((c) => c + 1);
+    } else {
+      onDone();
+    }
+  };
+
+  const summary =
+    contract.activities.length <= 3
+      ? contract.activities.join(" → ")
+      : contract.activities.slice(0, 3).join(" → ") + "…";
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-6 backdrop-blur-sm"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
+        <motion.div
+          className="w-full max-w-sm overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
+          initial={{ scale: 0.9, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ type: "spring", damping: 20, stiffness: 300 }}
+        >
+          <div className="bg-linear-to-br from-purple-600/15 to-indigo-600/15 px-5 py-4">
+            <p className="text-center text-xs font-bold tracking-wider text-purple-400/70">
+              ✦ 契约到期 ✦
+            </p>
+            <p className="mt-2 text-center text-base font-bold text-heading">
+              {contract.roomName}
+            </p>
+            <p className="mt-1 text-center text-[11px] text-muted">
+              {contract.date} · {summary}
+            </p>
+          </div>
+
+          <div className="px-5 py-4">
+            <p className="text-center text-sm text-secondary">
+              这份契约已到期，你完成了吗？
+            </p>
+
+            <div className="mt-4 flex gap-3">
+              <button
+                onClick={() => handleAction("complete")}
+                disabled={loading}
+                className="flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-emerald-600 py-3 text-sm font-bold text-white transition-colors hover:bg-emerald-500 disabled:opacity-50"
+              >
+                {loading ? (
+                  <Loader2 size={16} className="animate-spin" />
+                ) : (
+                  <CheckCircle2 size={16} />
+                )}
+                完成了！
+              </button>
+              <button
+                onClick={() => handleAction("expire")}
+                disabled={loading}
+                className="flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-surface py-3 text-sm font-medium text-muted ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-50"
+              >
+                {loading ? (
+                  <Loader2 size={16} className="animate-spin" />
+                ) : (
+                  <XCircle size={16} />
+                )}
+                没完成
+              </button>
+            </div>
+
+            {contracts.length > 1 && (
+              <p className="mt-3 text-center text-[10px] text-dim">
+                {current + 1} / {contracts.length}
+              </p>
+            )}
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+export type { PendingContract };
diff --git a/src/components/ContractHistoryItem.tsx b/src/components/ContractHistoryItem.tsx
new file mode 100644
index 0000000..fb88a74
--- /dev/null
+++ b/src/components/ContractHistoryItem.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { CheckCircle2, XCircle, ChevronDown } from "lucide-react";
+import type { ContractRecord } from "@/types";
+
+interface ContractHistoryItemProps {
+  record: ContractRecord;
+}
+
+export default function ContractHistoryItem({ record }: ContractHistoryItemProps) {
+  const [expanded, setExpanded] = useState(false);
+  const isCompleted = record.status === "completed";
+
+  const summary =
+    record.activities.length <= 3
+      ? record.activities.join(" → ")
+      : record.activities.slice(0, 3).join(" → ") + "…";
+
+  return (
+    <button
+      onClick={() => setExpanded(!expanded)}
+      className="w-full rounded-xl bg-elevated p-3 text-left transition-colors active:bg-subtle"
+    >
+      <div className="flex items-start gap-3">
+        <div
+          className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${
+            isCompleted
+              ? "bg-emerald-600/15 text-emerald-400"
+              : "bg-rose-600/15 text-rose-400/70"
+          }`}
+        >
+          {isCompleted ? <CheckCircle2 size={15} /> : <XCircle size={15} />}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <p className="truncate text-sm font-semibold text-heading">
+              {record.roomName}
+            </p>
+            <span
+              className={`shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
+                isCompleted
+                  ? "bg-emerald-600/15 text-emerald-400"
+                  : "bg-rose-600/15 text-rose-400/70"
+              }`}
+            >
+              {isCompleted ? "已完成" : "未完成"}
+            </span>
+          </div>
+          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
+            <span>{record.date}</span>
+            <span>·</span>
+            <span>{record.activities.length} 项活动</span>
+            <span>·</span>
+            <span>
+              {new Date(record.createdAt).toLocaleDateString("zh-CN", {
+                month: "short",
+                day: "numeric",
+              })}
+            </span>
+          </div>
+          <p className="mt-1 truncate text-xs text-dim">{summary}</p>
+        </div>
+
+        <motion.span
+          animate={{ rotate: expanded ? 180 : 0 }}
+          transition={{ duration: 0.2 }}
+          className="mt-1 shrink-0 text-muted"
+        >
+          <ChevronDown size={14} />
+        </motion.span>
+      </div>
+
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="mt-3 border-t border-border pt-3">
+              <div className="flex flex-col gap-1.5">
+                {record.activities.map((activity, i) => (
+                  <div key={i} className="flex items-center gap-2">
+                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-purple-600/15 text-[10px] font-bold text-purple-400">
+                      {i + 1}
+                    </div>
+                    <span className="text-xs text-secondary">{activity}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </button>
+  );
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index c9df25e..4860caa 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -113,3 +113,14 @@ export interface WeekendPlanData {
   items: PlanItem[];
   summary: string;
 }
+
+export interface ContractRecord {
+  id: string;
+  status: "completed" | "expired";
+  roomName: string;
+  roomCode: string;
+  date: string;
+  dayCount: number;
+  activities: string[];
+  createdAt: string;
+}

From beb2c632bb7f90a4c304b1f67a8d65993e6118f9 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 10:05:22 +0800
Subject: [PATCH 64/66] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E9=A1=B5=E9=9D=A2=E5=86=B3=E7=AD=96=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=9F=E4=B8=80=E7=94=B1=E6=88=90=E5=B0=B1=E5=A2=99?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

决策记录已完整迁移至 /achievements 成就墙页面，
个人中心不再重复展示，减少冗余数据请求。
---
 src/app/profile/page.tsx | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 1dc0121..317ab09 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -20,13 +20,12 @@ import {
 } from "lucide-react";
 import Card from "@/components/Card";
 import Input from "@/components/Input";
-import ProfileHistoryCard from "@/components/ProfileHistoryCard";
 import ProfileFavoritesCard from "@/components/ProfileFavoritesCard";
 import { useToast } from "@/hooks/useToast";
 import { ProfileCardSkeleton, RecordItemSkeleton } from "@/components/Skeleton";
 import { getUserId, getCachedProfile, setCachedProfile, setCachedPreferences, logout } from "@/lib/userId";
 import { getAvatarBg, AVATARS } from "@/lib/avatars";
-import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord } from "@/types";
+import type { UserProfile, UserPreferences, FavoriteRecord } from "@/types";
 
 export default function ProfilePage() {
   const router = useRouter();
@@ -34,9 +33,7 @@ export default function ProfilePage() {
   const [profile, setProfile] = useState<(UserProfile & { email?: string; preferences?: UserPreferences; decisionCount?: number }) | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const [history, setHistory] = useState<DecisionRecord[]>([]);
   const [favorites, setFavorites] = useState<FavoriteRecord[]>([]);
-  const [historyLoading, setHistoryLoading] = useState(false);
   const [favLoading, setFavLoading] = useState(false);
 
   const [editingUsername, setEditingUsername] = useState(false);
@@ -58,7 +55,6 @@ export default function ProfilePage() {
   const [emailSaving, setEmailSaving] = useState(false);
   const [emailMsg, setEmailMsg] = useState("");
 
-  const [showHistory, setShowHistory] = useState(true);
   const [showFavorites, setShowFavorites] = useState(true);
   const toast = useToast();
 
@@ -93,13 +89,6 @@ export default function ProfilePage() {
   useEffect(() => {
     if (!userId) return;
 
-    setHistoryLoading(true);
-    fetch(`/api/user/history?userId=${userId}`)
-      .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
-      .then((data) => setHistory(Array.isArray(data) ? data : []))
-      .catch(() => {})
-      .finally(() => setHistoryLoading(false));
-
     setFavLoading(true);
     fetch(`/api/user/favorite?userId=${userId}`)
       .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
@@ -500,15 +489,6 @@ export default function ProfilePage() {
           </button>
         </Card>
 
-        <ProfileHistoryCard
-          history={history}
-          loading={historyLoading}
-          open={showHistory}
-          onToggle={() => setShowHistory((v) => !v)}
-          onEmpty={() => router.push("/blindbox")}
-          delay={0.2}
-        />
-
         <ProfileFavoritesCard
           favorites={favorites}
           loading={favLoading}

From 4cc9d66403e573629625227d9ec52f07a928fa32 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 10:28:23 +0800
Subject: [PATCH 65/66] =?UTF-8?q?fix:=20SW=20=E7=BC=93=E5=AD=98=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E9=A1=B5=E9=9D=A2=E4=B8=8D=E6=9B=B4=E6=96=B0=20?=
 =?UTF-8?q?=E2=80=94=20fetch=20=E7=BB=95=E8=BF=87=20HTTP=20=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=20+=20hydration=20=E9=97=AA=E5=B1=8F=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sw.js: HTML fetch 加 cache:"no-cache"，避免从浏览器缓存拿旧页面
- ServiceWorkerRegistrar: 注册时 updateViaCache:"none"，确保 SW 自身及时更新
- blindbox/page: 增加 hydrated 状态，防止 SSR/CSR 内容不一致导致闪屏
---
 public/sw.js                              | 2 +-
 src/app/blindbox/page.tsx                 | 8 +++++---
 src/components/ServiceWorkerRegistrar.tsx | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index f9a9905..d70112b 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -57,7 +57,7 @@ self.addEventListener("fetch", (event) => {
 
   // HTML pages: network-first, fallback to cache, then offline page
   event.respondWith(
-    fetch(request)
+    fetch(request, { cache: "no-cache" })
       .then((response) => {
         const clone = response.clone();
         caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index 5046547..fd9031a 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -31,6 +31,7 @@ interface RoomSummary {
 
 export default function BlindboxLobbyPage() {
   const router = useRouter();
+  const [hydrated, setHydrated] = useState(false);
   const [loggedIn, setLoggedIn] = useState(false);
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [showAuth, setShowAuth] = useState(false);
@@ -50,6 +51,7 @@ export default function BlindboxLobbyPage() {
     if (registered) {
       setProfile(getCachedProfile());
     }
+    setHydrated(true);
   }, []);
 
   useEffect(() => {
@@ -207,7 +209,9 @@ export default function BlindboxLobbyPage() {
       </motion.div>
 
       <AnimatePresence mode="wait">
-        {!loggedIn ? (
+        {!hydrated || (loggedIn && loading) ? (
+          <BlindboxListSkeleton />
+        ) : !loggedIn ? (
           /* ============ Layer 1: Unauthenticated — Login CTA ============ */
           <motion.div
             key="intro"
@@ -230,8 +234,6 @@ export default function BlindboxLobbyPage() {
               仅需用户名 + 密码，10 秒注册
             </p>
           </motion.div>
-        ) : loading ? (
-          <BlindboxListSkeleton />
         ) : loadError ? (
           <motion.div
             key="load-error"
diff --git a/src/components/ServiceWorkerRegistrar.tsx b/src/components/ServiceWorkerRegistrar.tsx
index 9299ca4..5a25659 100644
--- a/src/components/ServiceWorkerRegistrar.tsx
+++ b/src/components/ServiceWorkerRegistrar.tsx
@@ -5,7 +5,7 @@ import { useEffect } from "react";
 export default function ServiceWorkerRegistrar() {
   useEffect(() => {
     if ("serviceWorker" in navigator) {
-      navigator.serviceWorker.register("/sw.js").catch(() => {});
+      navigator.serviceWorker.register("/sw.js", { updateViaCache: "none" }).catch(() => {});
     }
   }, []);
 

From 3335f7f87292a9b749de8f06906abff71b1e19c5 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Fri, 27 Feb 2026 10:38:33 +0800
Subject: [PATCH 66/66] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20Service?=
 =?UTF-8?q?=20Worker=20=E7=A6=BB=E7=BA=BF=E7=BC=93=E5=AD=98=20+=20?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=B3=A8=E5=86=8C=E5=BC=95=E5=AF=BC=E6=96=87?=
 =?UTF-8?q?=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删除 sw.js、ServiceWorkerRegistrar、offline 页面
- 保留 manifest 和 PWA 图标（添加到主屏幕仍可用）
- 注册引导文案统一为"10 秒注册，无需手机号"
---
 public/sw.js                              | 68 -----------------------
 src/app/blindbox/page.tsx                 |  4 +-
 src/app/layout.tsx                        |  3 +-
 src/app/offline/page.tsx                  | 23 --------
 src/components/MatchResult.tsx            |  2 +-
 src/components/ServiceWorkerRegistrar.tsx | 13 -----
 6 files changed, 4 insertions(+), 109 deletions(-)
 delete mode 100644 public/sw.js
 delete mode 100644 src/app/offline/page.tsx
 delete mode 100644 src/components/ServiceWorkerRegistrar.tsx

diff --git a/public/sw.js b/public/sw.js
deleted file mode 100644
index d70112b..0000000
--- a/public/sw.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const CACHE_NAME = "nowhatever-v1";
-
-const PRECACHE_URLS = ["/", "/offline"];
-
-self.addEventListener("install", (event) => {
-  event.waitUntil(
-    caches
-      .open(CACHE_NAME)
-      .then((cache) => cache.addAll(PRECACHE_URLS))
-      .then(() => self.skipWaiting())
-  );
-});
-
-self.addEventListener("activate", (event) => {
-  event.waitUntil(
-    caches
-      .keys()
-      .then((keys) =>
-        Promise.all(
-          keys
-            .filter((key) => key !== CACHE_NAME)
-            .map((key) => caches.delete(key))
-        )
-      )
-      .then(() => self.clients.claim())
-  );
-});
-
-self.addEventListener("fetch", (event) => {
-  const { request } = event;
-
-  if (request.method !== "GET") return;
-
-  const url = new URL(request.url);
-
-  // API calls: network-only
-  if (url.pathname.startsWith("/api/")) return;
-
-  // Static assets (_next/static, icons, fonts): cache-first
-  if (
-    url.pathname.startsWith("/_next/static/") ||
-    url.pathname.match(/\.(png|jpg|svg|ico|woff2?)$/)
-  ) {
-    event.respondWith(
-      caches.match(request).then(
-        (cached) =>
-          cached ||
-          fetch(request).then((response) => {
-            const clone = response.clone();
-            caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
-            return response;
-          })
-      )
-    );
-    return;
-  }
-
-  // HTML pages: network-first, fallback to cache, then offline page
-  event.respondWith(
-    fetch(request, { cache: "no-cache" })
-      .then((response) => {
-        const clone = response.clone();
-        caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
-        return response;
-      })
-      .catch(() => caches.match(request).then((cached) => cached || caches.match("/offline")))
-  );
-});
diff --git a/src/app/blindbox/page.tsx b/src/app/blindbox/page.tsx
index fd9031a..02e0575 100644
--- a/src/app/blindbox/page.tsx
+++ b/src/app/blindbox/page.tsx
@@ -227,11 +227,11 @@ export default function BlindboxLobbyPage() {
               whileTap={{ scale: 0.97 }}
             >
               <LogIn size={18} />
-              登录 / 注册，开始你的第一个盲盒
+              登录 / 注册
             </motion.button>
 
             <p className="mt-3 text-[11px] text-dim">
-              仅需用户名 + 密码，10 秒注册
+              10 秒注册，无需手机号
             </p>
           </motion.div>
         ) : loadError ? (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1c31eaf..e622b2d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata, Viewport } from "next";
 import { Geist } from "next/font/google";
 import "./globals.css";
 import GlobalUserBadge from "@/components/GlobalUserBadge";
-import ServiceWorkerRegistrar from "@/components/ServiceWorkerRegistrar";
+
 import PageTransition from "@/components/PageTransition";
 import ToastProvider from "@/components/ToastProvider";
 
@@ -40,7 +40,6 @@ export default function RootLayout({
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
       </head>
       <body className={`${geistSans.variable} font-sans antialiased`}>
-        <ServiceWorkerRegistrar />
         <ToastProvider>
           <PageTransition>{children}</PageTransition>
           <GlobalUserBadge />
diff --git a/src/app/offline/page.tsx b/src/app/offline/page.tsx
deleted file mode 100644
index ca75868..0000000
--- a/src/app/offline/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import { WifiOff } from "lucide-react";
-
-export default function OfflinePage() {
-  return (
-    <div className="min-h-dvh flex flex-col items-center justify-center px-6 bg-background text-foreground">
-      <div className="w-16 h-16 rounded-2xl bg-surface flex items-center justify-center mb-6">
-        <WifiOff className="w-8 h-8 text-muted" />
-      </div>
-      <h1 className="text-xl font-bold text-heading mb-2">没有网络连接</h1>
-      <p className="text-secondary text-center mb-8">
-        请检查你的网络设置，然后重试
-      </p>
-      <button
-        onClick={() => window.location.reload()}
-        className="px-6 py-3 bg-accent text-white rounded-xl font-medium active:scale-95 transition-transform"
-      >
-        重试
-      </button>
-    </div>
-  );
-}
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index 7bf7bd0..bbe99d2 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -385,7 +385,7 @@ export default function MatchResult({
               注册后，决策记录和收藏不会丢失
             </p>
             <p className="mt-1 text-xs text-muted">
-              仅需用户名 + 密码，10 秒完成
+              10 秒注册，无需手机号
             </p>
             <Button
               onClick={() => setShowAuth(true)}
diff --git a/src/components/ServiceWorkerRegistrar.tsx b/src/components/ServiceWorkerRegistrar.tsx
deleted file mode 100644
index 5a25659..0000000
--- a/src/components/ServiceWorkerRegistrar.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-
-export default function ServiceWorkerRegistrar() {
-  useEffect(() => {
-    if ("serviceWorker" in navigator) {
-      navigator.serviceWorker.register("/sw.js", { updateViaCache: "none" }).catch(() => {});
-    }
-  }, []);
-
-  return null;
-}