feat: 盲盒想法支持编辑和删除，展示用户已投入的想法列表

2026-02-26 16:55:58 +08:00
parent b1cbf0d589
commit ac8cb8c635
2 changed files with 229 additions and 2 deletions
@@ -55,10 +55,15 @@ export async function GET(req: NextRequest) {
  }

  try {
-    const [poolCount, drawn] = await Promise.all([
+    const [poolCount, myIdeas, drawn] = await Promise.all([
      prisma.blindBoxIdea.count({
        where: { roomId, status: "in_pool" },
      }),
+      prisma.blindBoxIdea.findMany({
+        where: { roomId, userId, status: "in_pool" },
+        orderBy: { createdAt: "desc" },
+        select: { id: true, content: true, createdAt: true },
+      }),
      prisma.blindBoxIdea.findMany({
        where: { roomId, status: "drawn" },
        orderBy: { createdAt: "desc" },
@@ -69,8 +74,57 @@ export async function GET(req: NextRequest) {
      }),
    ]);

-    return NextResponse.json({ poolCount, drawn });
+    return NextResponse.json({ poolCount, myIdeas, drawn });
  } catch {
    return errorResponse("查询失败", 500);
  }
 }
+
+export async function PUT(req: NextRequest) {
+  try {
+    const { ideaId, userId, content } = await req.json();
+
+    if (!userId) return errorResponse("请先登录", 401);
+    if (!ideaId) return errorResponse("缺少 ideaId", 400);
+    if (!content || typeof content !== "string" || content.trim().length === 0) {
+      return errorResponse("内容不能为空", 400);
+    }
+    if (content.trim().length > 200) {
+      return errorResponse("内容不能超过 200 字", 400);
+    }
+
+    const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
+    if (!idea) return errorResponse("想法不存在", 404);
+    if (idea.userId !== userId) return errorResponse("只能编辑自己的想法", 403);
+    if (idea.status !== "in_pool") return errorResponse("已抽中的想法不能编辑", 400);
+
+    const updated = await prisma.blindBoxIdea.update({
+      where: { id: ideaId },
+      data: { content: content.trim() },
+    });
+
+    return NextResponse.json({ id: updated.id, content: updated.content });
+  } catch {
+    return errorResponse("编辑失败", 500);
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const { ideaId, userId } = await req.json();
+
+    if (!userId) return errorResponse("请先登录", 401);
+    if (!ideaId) return errorResponse("缺少 ideaId", 400);
+
+    const idea = await prisma.blindBoxIdea.findUnique({ where: { id: ideaId } });
+    if (!idea) return errorResponse("想法不存在", 404);
+    if (idea.userId !== userId) return errorResponse("只能删除自己的想法", 403);
+    if (idea.status !== "in_pool") return errorResponse("已抽中的想法不能删除", 400);
+
+    await prisma.blindBoxIdea.delete({ where: { id: ideaId } });
+
+    return NextResponse.json({ deleted: true });
+  } catch {
+    return errorResponse("删除失败", 500);
+  }
+}
@@ -16,6 +16,9 @@ import {
  Copy,
  Trash2,
  LogOut,
+  Pencil,
+  Check,
+  X,
 } from "lucide-react";
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
@@ -32,6 +35,12 @@ interface RoomInfo {
  members: { id: string; username: string; avatar: string }[];
 }

+interface MyIdea {
+  id: string;
+  content: string;
+  createdAt: string;
+}
+
 interface DrawnIdea {
  id: string;
  content: string;
@@ -42,6 +51,116 @@ interface DrawnIdea {

 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();
@@ -55,6 +174,7 @@ export default function BlindboxRoomPage() {
  const [input, setInput] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [poolCount, setPoolCount] = useState(0);
+  const [myIdeas, setMyIdeas] = useState<MyIdea[]>([]);
  const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
  const [phase, setPhase] = useState<Phase>("pool");
  const [revealedIdea, setRevealedIdea] = useState<DrawnIdea | null>(null);
@@ -112,6 +232,7 @@ export default function BlindboxRoomPage() {
      if (res.ok) {
        const data = await res.json();
        setPoolCount(data.poolCount ?? 0);
+        setMyIdeas(data.myIdeas ?? []);
        setDrawnHistory(data.drawn ?? []);
      }
    } catch { /* ignore */ }
@@ -159,8 +280,10 @@ export default function BlindboxRoomPage() {
        const data = await res.json();
        throw new Error(data.error || "提交失败");
      }
+      const { id } = await res.json();
      setInput("");
      setPoolCount((c) => c + 1);
+      setMyIdeas((prev) => [{ id, content: text, createdAt: new Date().toISOString() }, ...prev]);
      setSubmitFlash(true);
      setTimeout(() => setSubmitFlash(false), 600);
      boxControls.start({
@@ -175,6 +298,47 @@ export default function BlindboxRoomPage() {
    }
  };

+  const handleEditIdea = useCallback(async (ideaId: string, newContent: string) => {
+    if (!profile) return;
+    const trimmed = newContent.trim();
+    if (!trimmed || trimmed.length > 200) return;
+    try {
+      const res = await fetch("/api/blindbox", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ideaId, userId: profile.id, content: trimmed }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "编辑失败");
+      }
+      setMyIdeas((prev) => prev.map((i) => (i.id === ideaId ? { ...i, content: trimmed } : i)));
+    } catch (e) {
+      setToast(e instanceof Error ? e.message : "编辑失败");
+      setTimeout(() => setToast(""), 2200);
+    }
+  }, [profile]);
+
+  const handleDeleteIdea = useCallback(async (ideaId: string) => {
+    if (!profile) return;
+    try {
+      const res = await fetch("/api/blindbox", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ideaId, userId: profile.id }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "删除失败");
+      }
+      setMyIdeas((prev) => prev.filter((i) => i.id !== ideaId));
+      setPoolCount((c) => Math.max(0, c - 1));
+    } catch (e) {
+      setToast(e instanceof Error ? e.message : "删除失败");
+      setTimeout(() => setToast(""), 2200);
+    }
+  }, [profile]);
+
  const handleDraw = async () => {
    if (poolCount === 0 || !profile || !room) {
      setError("盒子是空的，先往里面塞点想法吧！");
@@ -576,6 +740,15 @@ export default function BlindboxRoomPage() {
            )}
          </AnimatePresence>

+          {/* My ideas in pool */}
+          {myIdeas.length > 0 && phase === "pool" && (
+            <MyIdeasSection
+              ideas={myIdeas}
+              onEdit={handleEditIdea}
+              onDelete={handleDeleteIdea}
+            />
+          )}
+
          {/* History */}
          {drawnHistory.length > 0 && phase !== "shaking" && (
            <motion.div