refactor: remove "use client" directive from multiple files and update project structure to align with Vite and React Router

2026-08-05 17:04:27 +08:00 · 2026-06-26 17:24:48 +08:00
parent e635ec6908
commit 443afab7bd
88 changed files with 94 additions and 230 deletions
@@ -0,0 +1,77 @@
+import { Check, Download, Pencil, Trash2, X } from "lucide-react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Button, Input } from "antd";
+
+import { useCanvasStore, type CanvasProject } from "@/stores/canvas/use-canvas-store";
+import { useCanvasUiStore } from "@/stores/canvas/use-canvas-ui-store";
+import { exportCanvasProjects } from "@/lib/canvas/canvas-export";
+
+export function CanvasProjectCard({ project }: { project: CanvasProject }) {
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const renameProject = useCanvasStore((state) => state.renameProject);
+    const selectedIds = useCanvasUiStore((state) => state.selectedProjectIds);
+    const editingId = useCanvasUiStore((state) => state.editingProjectId);
+    const editingTitle = useCanvasUiStore((state) => state.editingProjectTitle);
+    const startEditing = useCanvasUiStore((state) => state.startEditingProject);
+    const setEditingTitle = useCanvasUiStore((state) => state.setEditingProjectTitle);
+    const stopEditing = useCanvasUiStore((state) => state.stopEditingProject);
+    const toggleSelected = useCanvasUiStore((state) => state.toggleSelectedProjectId);
+    const setDeleteIds = useCanvasUiStore((state) => state.setDeleteProjectIds);
+    const editing = editingId === project.id;
+    const selected = selectedIds.includes(project.id);
+    const open = () => navigate(`/canvas/${project.id}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`);
+    const saveTitle = () => {
+        renameProject(project.id, editingTitle);
+        stopEditing();
+    };
+
+    return (
+        <article className="group flex min-h-44 cursor-pointer flex-col justify-between rounded-2xl bg-[#f1eee8] p-5 transition hover:bg-[#ebe6dc] dark:bg-white/5 dark:hover:bg-white/10" onClick={() => !editing && open()}>
+            <div className="flex items-start gap-3">
+                <input
+                    type="checkbox"
+                    checked={selected}
+                    onClick={(event) => event.stopPropagation()}
+                    onChange={(event) => toggleSelected(project.id, event.target.checked)}
+                    className="mt-1 size-4 accent-stone-950 dark:accent-stone-100"
+                    aria-label={`选择 ${project.title}`}
+                />
+                {editing ? (
+                    <Input className="min-w-0" value={editingTitle} onClick={(event) => event.stopPropagation()} onChange={(event) => setEditingTitle(event.target.value)} onKeyDown={(event) => event.key === "Enter" && saveTitle()} autoFocus />
+                ) : (
+                    <button
+                        type="button"
+                        className="min-w-0 cursor-pointer text-left"
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            open();
+                        }}
+                    >
+                        <h2 className="truncate text-xl font-semibold">{project.title}</h2>
+                        <p className="mt-3 text-sm leading-6 text-stone-600 dark:text-stone-400">
+                            {project.nodes.length} 个节点 · {project.connections.length} 条连线
+                        </p>
+                    </button>
+                )}
+            </div>
+            <div className="mt-8 flex items-end justify-between gap-3">
+                <p className="text-xs text-stone-500">更新于 {new Date(project.updatedAt).toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" })}</p>
+                <div className="flex items-center gap-1" onClick={(event) => event.stopPropagation()}>
+                    {editing ? (
+                        <>
+                            <Button type="text" size="small" shape="circle" icon={<Check className="size-4" />} onClick={saveTitle} aria-label="保存名称" />
+                            <Button type="text" size="small" shape="circle" icon={<X className="size-4" />} onClick={stopEditing} aria-label="取消重命名" />
+                        </>
+                    ) : (
+                        <>
+                            <Button type="text" size="small" shape="circle" icon={<Download className="size-4" />} onClick={() => void exportCanvasProjects([project], project.title || "无限画布")} aria-label="导出" />
+                            <Button type="text" size="small" shape="circle" icon={<Pencil className="size-4" />} onClick={() => startEditing(project.id, project.title)} aria-label="重命名" />
+                            <Button type="text" size="small" shape="circle" icon={<Trash2 className="size-4" />} onClick={() => setDeleteIds([project.id])} aria-label="删除" />
+                        </>
+                    )}
+                </div>
+            </div>
+        </article>
+    );
+}