feat: add interactive React Flow canvas and floating toolbars

src/components/workspace/graph-page.tsx

@@ -6,6 +6,7 @@ import { api, errorText } from "@/lib/api";
 import { readDemoBoards } from "@/lib/demo-workspace";
 import type { Board } from "@/lib/workspace";
 import styles from "./workspace.module.css";
+import GraphCanvas from "@/components/canvas/graph-canvas";
 
 export default function GraphPage({ workspaceId, boardId }: { workspaceId: string; boardId: string }) {
   const demo = useSearchParams().get("demo") === "1";
@@ -46,7 +47,7 @@ export default function GraphPage({ workspaceId, boardId }: { workspaceId: strin
 
   return (
     <main className={styles.graph} aria-label={board ? board.title + " · 无限图谱" : "无限图谱"} aria-busy={!board && !error}>
-      <div className={styles.graphSurface} aria-label={board ? board.title + "的画布" : "画布"} />
+      {board ? <GraphCanvas key={workspaceId + ":" + boardId} board={board} /> : <div className={styles.graphSurface} aria-label="正在读取画布" />}
       {error ? <p className={styles.graphStatus} role="alert">{error}</p>
         : !board && <p className={styles.graphStatus} role="status">正在打开图谱…</p>}
     </main>

src/components/workspace/workspace.module.css

@@ -116,3 +116,7 @@
 .logoLink img { display: block; width: 16px; height: 16px; }
 .logoLink:hover { background: #e9e7e3; }
 .logoLink:focus-visible { outline: 2px solid #9d7d66; outline-offset: 2px; }
+
+.floatingAvatarButton { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 5px; }
+.floatingAvatarButton:hover { background: #e9e7e3; }
+.accountPopup[data-floating="true"] { inset: 56px auto auto 12px; max-height: calc(100dvh - 70px); transform-origin: top left; }