first commit

Co-Authored-By: Codex <noreply@openai.com>
2026-05-19 19:50:36 +08:00
commit 472bf8b732
133 changed files with 16869 additions and 0 deletions
@@ -0,0 +1,85 @@
+"use client";
+
+import { useRef } from "react";
+import { useRouter } from "next/navigation";
+import { App, Button } from "antd";
+import { FileUp, Plus } from "lucide-react";
+
+import { CanvasDeleteProjectsDialog } from "./components/canvas-delete-projects-dialog";
+import { CanvasProjectCard } from "./components/canvas-project-card";
+import { useCanvasStore, type CanvasProject } from "./stores/use-canvas-store";
+import { useCanvasUiStore } from "./stores/use-canvas-ui-store";
+
+type CanvasExportFile = {
+  app: "infinite-canvas";
+  version: number;
+  exportedAt: string;
+  project: CanvasProject;
+};
+
+export default function CanvasPage() {
+  const { message } = App.useApp();
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const hydrated = useCanvasStore((state) => state.hydrated);
+  const projects = useCanvasStore((state) => state.projects);
+  const createProject = useCanvasStore((state) => state.createProject);
+  const importProject = useCanvasStore((state) => state.importProject);
+  const selectedIds = useCanvasUiStore((state) => state.selectedProjectIds);
+  const setDeleteIds = useCanvasUiStore((state) => state.setDeleteProjectIds);
+
+  const enterProject = (id: string) => {
+    router.push(`/canvas/${id}`);
+  };
+  const createAndEnter = () => enterProject(createProject(`无限画布 ${projects.length + 1}`));
+  const importCanvas = async (file?: File) => {
+    if (!file) return;
+    try {
+      const data = JSON.parse(await file.text()) as CanvasExportFile;
+      enterProject(importProject(data.project));
+      message.success("画布已导入");
+    } catch {
+      message.error("导入失败，请选择有效的 JSON 文件");
+    } finally {
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  };
+
+  return (
+    <main className="h-full overflow-auto bg-background text-stone-950 dark:text-stone-100">
+      <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-10">
+        <header className="flex flex-wrap items-end justify-between gap-4 border-b border-stone-200 pb-6 dark:border-stone-800">
+          <div>
+            <p className="text-xs text-stone-500">画布库</p>
+            <h1 className="mt-3 text-3xl font-semibold">无限画布</h1>
+          </div>
+          <div className="flex items-center gap-2">
+            {selectedIds.length ? <Button disabled={!hydrated} onClick={() => setDeleteIds(selectedIds)}>删除选中</Button> : null}
+            {projects.length ? <Button disabled={!hydrated} onClick={() => setDeleteIds(projects.map((project) => project.id))}>删除全部</Button> : null}
+            <Button disabled={!hydrated} icon={<FileUp className="size-4" />} onClick={() => inputRef.current?.click()}>导入画布</Button>
+            <Button disabled={!hydrated} type="primary" icon={<Plus className="size-4" />} onClick={createAndEnter}>新建画布</Button>
+          </div>
+        </header>
+
+        {!hydrated ? (
+          <section className="flex min-h-[360px] items-center justify-center border-y border-stone-200 text-sm text-stone-500 dark:border-stone-800">正在加载画布...</section>
+        ) : projects.length ? (
+          <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
+            {projects.map((project) => (
+              <CanvasProjectCard key={project.id} project={project} />
+            ))}
+          </div>
+        ) : (
+          <section className="flex min-h-[360px] flex-col items-center justify-center border-y border-stone-200 text-center dark:border-stone-800">
+            <h2 className="text-xl font-medium">还没有画布</h2>
+            <p className="mt-3 text-sm text-stone-500">新建一个画布后，就可以独立保存节点、连线和画布外观。</p>
+            <Button type="primary" className="mt-6" icon={<Plus className="size-4" />} onClick={createAndEnter}>新建画布</Button>
+          </section>
+        )}
+      </div>
+
+      <input ref={inputRef} type="file" accept="application/json,.json" className="hidden" onChange={(event) => void importCanvas(event.target.files?.[0])} />
+      <CanvasDeleteProjectsDialog />
+    </main>
+  );
+}