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