refactor: 拆分 MatchResult、ProfilePage、BlindboxRoomPage 大组件

- MatchResult: 提取 NoMatchResult、RunnerUpCard（635 → 513 行）
- ProfilePage: 提取 ProfileHistoryCard、ProfileFavoritesCard（692 → 526 行）
- BlindboxRoomPage: 提取 BlindboxMyIdeas、BlindboxDrawnHistory（855 → 668 行）

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} />
           )}
         </>
       )}

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