feat: 盲盒想法支持编辑和删除,展示用户已投入的想法列表
This commit is contained in:
@@ -55,10 +55,15 @@ export async function GET(req: NextRequest) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const [poolCount, drawn] = await Promise.all([
|
const [poolCount, myIdeas, drawn] = await Promise.all([
|
||||||
prisma.blindBoxIdea.count({
|
prisma.blindBoxIdea.count({
|
||||||
where: { roomId, status: "in_pool" },
|
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({
|
prisma.blindBoxIdea.findMany({
|
||||||
where: { roomId, status: "drawn" },
|
where: { roomId, status: "drawn" },
|
||||||
orderBy: { createdAt: "desc" },
|
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 {
|
} catch {
|
||||||
return errorResponse("查询失败", 500);
|
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,
|
Copy,
|
||||||
Trash2,
|
Trash2,
|
||||||
LogOut,
|
LogOut,
|
||||||
|
Pencil,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import confetti from "canvas-confetti";
|
import confetti from "canvas-confetti";
|
||||||
import { getCachedProfile, isRegistered } from "@/lib/userId";
|
import { getCachedProfile, isRegistered } from "@/lib/userId";
|
||||||
@@ -32,6 +35,12 @@ interface RoomInfo {
|
|||||||
members: { id: string; username: string; avatar: string }[];
|
members: { id: string; username: string; avatar: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface MyIdea {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface DrawnIdea {
|
interface DrawnIdea {
|
||||||
id: string;
|
id: string;
|
||||||
content: string;
|
content: string;
|
||||||
@@ -42,6 +51,116 @@ interface DrawnIdea {
|
|||||||
|
|
||||||
type Phase = "pool" | "shaking" | "reveal";
|
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() {
|
export default function BlindboxRoomPage() {
|
||||||
const { code } = useParams<{ code: string }>();
|
const { code } = useParams<{ code: string }>();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -55,6 +174,7 @@ export default function BlindboxRoomPage() {
|
|||||||
const [input, setInput] = useState("");
|
const [input, setInput] = useState("");
|
||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
const [poolCount, setPoolCount] = useState(0);
|
const [poolCount, setPoolCount] = useState(0);
|
||||||
|
const [myIdeas, setMyIdeas] = useState<MyIdea[]>([]);
|
||||||
const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
|
const [drawnHistory, setDrawnHistory] = useState<DrawnIdea[]>([]);
|
||||||
const [phase, setPhase] = useState<Phase>("pool");
|
const [phase, setPhase] = useState<Phase>("pool");
|
||||||
const [revealedIdea, setRevealedIdea] = useState<DrawnIdea | null>(null);
|
const [revealedIdea, setRevealedIdea] = useState<DrawnIdea | null>(null);
|
||||||
@@ -112,6 +232,7 @@ export default function BlindboxRoomPage() {
|
|||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
setPoolCount(data.poolCount ?? 0);
|
setPoolCount(data.poolCount ?? 0);
|
||||||
|
setMyIdeas(data.myIdeas ?? []);
|
||||||
setDrawnHistory(data.drawn ?? []);
|
setDrawnHistory(data.drawn ?? []);
|
||||||
}
|
}
|
||||||
} catch { /* ignore */ }
|
} catch { /* ignore */ }
|
||||||
@@ -159,8 +280,10 @@ export default function BlindboxRoomPage() {
|
|||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
throw new Error(data.error || "提交失败");
|
throw new Error(data.error || "提交失败");
|
||||||
}
|
}
|
||||||
|
const { id } = await res.json();
|
||||||
setInput("");
|
setInput("");
|
||||||
setPoolCount((c) => c + 1);
|
setPoolCount((c) => c + 1);
|
||||||
|
setMyIdeas((prev) => [{ id, content: text, createdAt: new Date().toISOString() }, ...prev]);
|
||||||
setSubmitFlash(true);
|
setSubmitFlash(true);
|
||||||
setTimeout(() => setSubmitFlash(false), 600);
|
setTimeout(() => setSubmitFlash(false), 600);
|
||||||
boxControls.start({
|
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 () => {
|
const handleDraw = async () => {
|
||||||
if (poolCount === 0 || !profile || !room) {
|
if (poolCount === 0 || !profile || !room) {
|
||||||
setError("盒子是空的,先往里面塞点想法吧!");
|
setError("盒子是空的,先往里面塞点想法吧!");
|
||||||
@@ -576,6 +740,15 @@ export default function BlindboxRoomPage() {
|
|||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{/* My ideas in pool */}
|
||||||
|
{myIdeas.length > 0 && phase === "pool" && (
|
||||||
|
<MyIdeasSection
|
||||||
|
ideas={myIdeas}
|
||||||
|
onEdit={handleEditIdea}
|
||||||
|
onDelete={handleDeleteIdea}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* History */}
|
{/* History */}
|
||||||
{drawnHistory.length > 0 && phase !== "shaking" && (
|
{drawnHistory.length > 0 && phase !== "shaking" && (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|||||||
Reference in New Issue
Block a user