style: balance floating toolbar spacing and groups

src/components/canvas/canvas.module.css

@@ -12,7 +12,6 @@
 .node :global(.react-flow__handle) { width: 8px; height: 8px; background: #a47764; border: 2px solid #fff; }
 .toolbar button[aria-pressed="true"] { background: #f1e6df; color: #78523f; }
 .toolbar button:disabled { cursor: not-allowed; }
-.divider { flex: 0 0 1px; width: 1px; height: 16px; margin: 0 2px; background: #ece6df; }
 .topRight { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
 .toolbar .zoomValue { box-sizing: border-box; flex: 0 0 48px; width: 48px; height: var(--toolbar-control-height, 32px); padding: 0; border-radius: 5px; font: inherit; font-variant-numeric: tabular-nums; }
 .toolbar .zoomValue:hover { background: #e9e7e3; }

src/components/canvas/graph-canvas.tsx

@@ -172,25 +172,25 @@ function CanvasEditor({ board }: { board: Board }) {
         <div className={`${toolbar.surface} ${styles.toolbar}`} role="toolbar" aria-label="图谱视图控制">
           <IconButton icon={Undo2} label="撤销" disabled={!state.past.length} onClick={() => dispatch({ type: "undo" })} />
           <IconButton icon={Redo2} label="重做" disabled={!state.future.length} onClick={() => dispatch({ type: "redo" })} />
-          <span className={styles.divider} />
+          <span className={toolbar.divider} aria-hidden="true" />
           <IconButton icon={Minus} label="缩小" onClick={() => void flow.zoomOut({ duration })} />
           <button className={styles.zoomValue} onClick={() => void flow.zoomTo(1, { duration })} title="恢复 100% 缩放">{Math.round(zoom * 100)}%</button>
           <IconButton icon={Plus} label="放大" onClick={() => void flow.zoomIn({ duration })} />
           <IconButton icon={Maximize} label="适应画布" onClick={() => nodes.length ? void flow.fitView({ padding: 0.2, duration }) : void flow.setViewport({ x: 0, y: 0, zoom: 1 }, { duration })} />
-          <span className={styles.divider} />
+          <span className={toolbar.divider} aria-hidden="true" />
           <IconButton icon={Download} label="导出图谱" onClick={exportProject} />
         </div>
         <span className={styles.saveStatus} role="status">{saved ? "保存在此浏览器" : "正在保存到此浏览器…"}</span>
       </div>
-      <div className={`${toolbar.surface} ${styles.toolbar} ${styles.bottomToolbar}`} role="toolbar" aria-label="画布创作工具">
+      <div className={`${toolbar.surface} ${toolbar.relaxed} ${styles.toolbar} ${styles.bottomToolbar}`} role="toolbar" aria-label="画布创作工具">
         <IconButton icon={MousePointer2} label="选择工具（V）" aria-pressed={tool === "select"} onClick={() => setTool("select")} />
         <IconButton icon={Hand} label="抓手工具（H）" aria-pressed={tool === "hand"} onClick={() => setTool("hand")} />
-        <span className={styles.divider} />
+        <span className={toolbar.divider} aria-hidden="true" />
         <IconButton icon={Type} label="添加文字" onClick={() => addNode("text")} />
         <IconButton icon={ImagePlus} label="添加图片" onClick={() => imageInput.current?.click()} />
         <IconButton icon={FileText} label="添加脚本" onClick={() => addNode("script")} />
         <IconButton icon={Sparkles} label="插入创作模板" onClick={addTemplate} />
-        <span className={styles.divider} />
+        <span className={toolbar.divider} aria-hidden="true" />
         <IconButton icon={Upload} label="导入图谱" onClick={() => projectInput.current?.click()} />
       </div>
       <div className={`${toolbar.surface} ${styles.helpToolbar}`}>

src/components/ui/toolbar.module.css

@@ -16,3 +16,7 @@
   font-size: 14px;
   line-height: 20px;
 }
+
+/* Text in the view controls already creates wider visual spacing. */
+.relaxed { column-gap: 6px; padding-inline: 6px; }
+.divider { flex: 0 0 1px; width: 1px; height: 16px; margin: 0 2px; background: #ece6df; }

src/components/workspace/workspace.module.css

@@ -122,5 +122,5 @@
 .accountPopup[data-floating="true"] { inset: 62px auto auto 12px; max-height: calc(100dvh - 76px); transform-origin: top left; }
 
 .floatingAvatarButton .avatar { flex-basis: var(--toolbar-icon-size, 20px); width: var(--toolbar-icon-size, 20px); height: var(--toolbar-icon-size, 20px); font-size: 14px; }
-.floatingTitle { flex: 1 1 auto; min-width: 0; max-width: 240px; margin: 0 4px; color: #37352f; font-size: 14px; line-height: var(--toolbar-control-height, 32px); font-weight: 500; overflow: visible; }
+.floatingTitle { flex: 1 1 auto; min-width: 0; max-width: 240px; margin: 0; color: #37352f; font-size: 14px; line-height: var(--toolbar-control-height, 32px); font-weight: 500; overflow: visible; }
 @media (max-width: 700px) { .floatingTitle { max-width: 180px; } }