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

- MatchResult: 提取 NoMatchResult、RunnerUpCard（635 → 513 行） - ProfilePage: 提取 ProfileHistoryCard、ProfileFavoritesCard（692 → 526 行） - BlindboxRoomPage: 提取 BlindboxMyIdeas、BlindboxDrawnHistory（855 → 668 行）
2026-02-26 19:59:35 +08:00
parent 423b94440d
commit 2a3cef890c
9 changed files with 589 additions and 491 deletions
@@ -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>
+  );
+}