feat(canvas): 自由画布 - 增强空白起点、外观设置与节点连接体验 (#356)

docs/design/canvas-node-visual-contrast.mdx

@@ -2,12 +2,13 @@
 
 > 范围：无限画布中的节点外壳、节点内容空态、节点标题、图片创作面板和节点间连接线。
 > 目标：节点和连接在浅色、深色，以及点阵/线稿/空白画布背景上都能被快速识别和操作。
-> 状态：已实现首版，浏览器回归待确认。
+> 状态：已实现并完成常规桌面尺寸下的浅色、深色浏览器回归。
 
 ## 1. 问题定义
 
-画布节点可能直接落在白色或黑色背景上。只依赖全局卡片表面会造成两个问题：
+画布节点可能直接落在白色或黑色背景上。只依赖全局卡片表面会造成四个问题：
 
+- 浅色画布与白色节点没有表面明度差，深色画布与节点的明度差也不足。
 - 节点边界消失，空态内容看起来像画布的一部分。
 - 图片创作面板的“将使用默认模型与参数”提示、输入区和操作控件缺少稳定的表面层级。
 - 节点间普通连接线使用过低的透明度和线宽，在低缩放比例或点阵背景上难以追踪。
@@ -18,7 +19,9 @@
 
 ### 2.1 节点使用画布主题 token
 
-`canvasThemes`（画布主题 token）中的 `node` 语义负责节点自身的可读性：
+`canvasThemes`（画布主题 token）中的 `canvas` 与 `node` 语义共同负责画布层级：
+
+- `canvas.background`：创作空间的底层表面，与节点主体保持稳定明度差。
 
 - `fill`：节点主体表面。
 - `panel`：节点内部面板和空态子表面。
@@ -26,11 +29,13 @@
 - `shadow` / `hoverShadow`：静止与悬停时的空间层级。
 - `text` / `muted` / `faint`：正文、辅助说明和占位内容。
 
-浅色和深色主题必须成对提供这些 token。节点不能回退到全局 `--card-surface`，因为它不知道当前画布背景和节点层级。
+浅色和深色主题必须成对提供这些 token。节点不能回退到全局 `--card-surface`，因为它不知道当前画布背景和节点层级。本轮调整固定的 `canvas.background`，并单独增强深色点阵与线稿网格；节点、浮层、边框、阴影和网格图层渲染透明度保持既有值。
+
+深色画布底层使用比原节点和浮层更亮的中性灰，使原有深色工具表面作为更深一层自然显现，避免蓝灰背景与中性黑工具框的色温割裂；浅色画布底层使用比白色节点更沉的中性雾灰。该方案不通过整体提亮工具表面制造层级。自定义主题只调整画布底层和网格，允许设置背景色、明亮度、网格颜色与强度以及基础浅色/深色界面；节点、工具浮层、文字、边框和阴影继续使用原项目主题 token。
 
 ### 2.2 节点外壳与空态
 
-`CanvasNode`（画布节点外壳）使用 `node.fill`、`node.edge` 和主题阴影。选中状态继续使用现有 active stroke，边界只用于提供识别度，不作为装饰性竖线或强调色。
+`CanvasNode`（画布节点外壳）继续使用原项目的 `node.fill` 和主题阴影。普通状态保留透明的固定 1px 边界占位，不改变 Note 与其他节点的既有外观；选中状态继续沿用原有 active stroke。
 
 `CanvasNodeContent`（节点内容渲染）的绘图空态在节点内部增加一个轻量子表面和图标边界，使“打开绘图”在白色和黑色背景下都能被识别；真实媒体内容不增加额外遮罩，不改变原始比例。
 
@@ -64,7 +69,7 @@
 | 连接线默认 | 中性颜色的外层 + 清晰内芯 + 端点圆点 | 在低缩放和点阵背景下保持连贯可见 |
 | 连接线悬停/选中 | 强调色、增强线宽、流动虚线 | 快速识别当前连接，不改变连接数据 |
 
-本次不调整画布背景色、节点尺寸、面板定位、参考图尺寸选项、生成参数和资源同步逻辑。
+本次不调整节点尺寸、面板定位、参考图尺寸选项、生成参数和资源同步逻辑。
 
 ## 4. 实现地图
 
@@ -80,11 +85,13 @@
 已完成：
 
 - `git diff --check` 通过。
-- Impeccable 受限扫描未发现本次新增的反模式；扫描到的渐变文字、宽高过渡和既有布局规则位于其他历史区域。
+- `bun test test/canvas-starter.test.ts test/canvas-visual-contrast.test.ts` 通过（8 项）。
+- `bun run build` 通过，包含 TypeScript 检查和 Vite 生产构建；只有既有的大分块体积提示。
+- 本地前端与后端入口可用；已登录浏览器确认浅色背景 `#EDEEEE`、深色背景 `#262626` 正常生效，原节点与工具浮层颜色保持不变；自定义主题支持背景色与明亮度、网格颜色与强度以及基础浅色/深色界面，深色点阵和线稿网格使用 `rgba(205,205,205,0.28)`。
 
 待确认：
 
-- 浏览器中分别切换浅色/深色主题，检查图片创作面板默认、悬停、选中和展开编辑状态。
+- 在真实媒体节点中分别检查图片创作面板默认、悬停、选中和展开编辑状态。
 - 在点阵、线稿和空白背景下检查节点边缘、空绘图态和“将使用默认模型与参数”的对比度。
 - 在 25%、40% 和 100% 缩放下检查普通连接线、悬停/选中连接线及两个端点的可见度。
-- 本项目按规则未自动运行 TypeScript、构建或测试；提交前只做了静态 diff 检查。
+- 在窄屏和触屏尺寸补充检查节点、起始框与添加菜单的布局边界。