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