Show nested canvas directory and reduce canvas loading overhead

src/components/workspace/graph-page.tsx

@@ -9,7 +9,8 @@ import { loadBoardCanvas } from "@/lib/canvas-loader";
 import type { CanvasSnapshot } from "@/lib/canvas-sync";
 import styles from "./workspace.module.css";
 import { useActiveBoard } from "./active-board";
-import GraphCanvas from "@/components/canvas/graph-canvas";
+import dynamic from "next/dynamic";
+const GraphCanvas = dynamic(() => import("@/components/canvas/graph-canvas"), { ssr: false, loading: () => <p role="status">正在准备画布…</p> });
 
 type Loaded = { board: Board; snapshot?: CanvasSnapshot; route: string };
 export default function GraphPage({ workspaceId, boardId }: { workspaceId: string; boardId: string }) {
@@ -22,6 +23,8 @@ export default function GraphPage({ workspaceId, boardId }: { workspaceId: strin
   const [retry, setRetry] = useState(0);
   useEffect(() => {
     setLoaded(null); setError("");
+    // Fetch data while the much larger editor chunk loads.
+    void import("@/components/canvas/graph-canvas").catch(() => {});
     if (demo) {
       const item = readDemoBoards(workspaceId).find((board) => matchesRef(board, boardId));
       if (item) setLoaded({ board: item, route });