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