feat(canvas): 画布视觉 - 优化浮动控件与连接线可读性

docs/design/canvas-floating-controls.mdx

@@ -0,0 +1,64 @@
+# 画布浮动控件设计沉淀：顶部操作区与底部 Dock
+
+> 范围：无限画布的顶部项目操作区、底部画布工具 Dock，以及工作模式切换。
+> 目标：让画布操作控件形成统一的浮动面板系统，并在不同主题和视口下保持稳定对齐。
+> 状态：已实现首版，浏览器回归待确认。
+
+## 1. 设计方向
+
+画布本身是创作空间，操作控件不应占用固定内容栏，也不应把按钮散落在画布节点之间。因此控件采用独立浮动面板：
+
+- 左上放置项目菜单、画布名称和重命名入口。
+- 右上放置搜索、导入、性能、积分、专注、分享和 Agent 等操作。
+- 左下保留画布视图控制和素材空间 Dock。
+- 工作模式切换放在右下，与左下 Dock 共用底部安全区，避免顶部中央出现额外的孤立控件。
+
+## 2. 视觉合同
+
+顶部操作区和底部 `FloatingDock`（浮动 Dock）复用 `canvasDockStyle`（画布 Dock 样式合同）：
+
+- `--dock-surface`：浮动面板表面。
+- `--dock-border`：主题边界。
+- `--elevation-overlay`：面板层级阴影。
+- `--dock-command-hover`：控件悬停表面。
+- `--dock-command-active`：持续激活状态表面。
+
+普通操作按钮默认透明，只有悬停或持续激活时才显示控件表面；面板本身负责边界和阴影，避免每个按钮都形成独立卡片。
+
+## 3. 工作模式切换
+
+`CanvasWorkspaceModeSwitch`（画布工作模式切换）是右下角独立浮动面板，不再挂在顶部栏中间：
+
+- 触发器与底部 Dock 使用同一高度、圆角、边界和阴影。
+- 菜单从触发器上方展开，并与右侧边缘对齐，避免遮挡底部工具栏和画布主体。
+- 外层定位使用 `--canvas-inset-x` / `--canvas-inset-y`，与左下视图控制保持同一水平基线。
+- 简洁模式和专业模式继续使用原有 `workspaceMode` 状态，不改变节点渲染和生成逻辑。
+
+## 4. 实现地图
+
+- `web/src/pages/canvas/canvas-project-top-bar.tsx`：顶部左右浮动面板，以及工作模式切换组件和下拉菜单。
+- `web/src/pages/canvas/project.tsx`：将工作模式切换定位到画布右下角，并与底部控制使用同一安全区。
+- `web/src/components/canvas/canvas-zoom-controls.tsx`：底部视图控制 Dock 的既有实现，作为浮动控件视觉基准。
+- `web/src/lib/canvas/canvas-aceternity-style.ts`：提供 `canvasDockStyle` 样式合同。
+- `web/src/styles/globals.css`：维护顶部面板、控件状态和工作模式菜单的唯一样式规则。
+
+## 5. 响应式与交互边界
+
+- 桌面端顶部左右面板保持同一顶部安全区；底部左右面板保持同一底部安全区。
+- 窄视口沿用 `--canvas-inset-y + --space-16` 的底部避让规则，避免与移动端底部工具区域重叠。
+- 工作模式菜单打开时支持点击外部区域和 `Escape` 关闭。
+- `prefers-reduced-motion` 下关闭或缩短面板和选项的进入动画。
+- 本次只调整控件位置和视觉层级，不改变菜单命令、模式持久化和画布操作行为。
+
+## 6. 验证与待回归
+
+已完成：
+
+- `git diff --check` 通过。
+- Impeccable 受限扫描未发现本次新增的 UI 反模式。
+
+待确认：
+
+- 浅色/深色主题下检查顶部左右面板、底部三个 Dock 的边界和阴影一致性。
+- 检查工作模式菜单在桌面、窄视口和底部工具栏打开时的对齐与遮挡关系。
+- 本项目按规则未自动运行 TypeScript、构建或测试；提交前只做了静态检查。

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

@@ -1,7 +1,7 @@
 # 画布节点可读性设计沉淀：节点与图片创作面板
 
-> 范围：无限画布中的节点外壳、节点内容空态、节点标题和图片创作面板。
-> 目标：节点在浅色、深色，以及点阵/线稿/空白画布背景上都能被快速识别和操作。
+> 范围：无限画布中的节点外壳、节点内容空态、节点标题、图片创作面板和节点间连接线。
+> 目标：节点和连接在浅色、深色，以及点阵/线稿/空白画布背景上都能被快速识别和操作。
 > 状态：已实现首版，浏览器回归待确认。
 
 ## 1. 问题定义
@@ -10,6 +10,7 @@
 
 - 节点边界消失，空态内容看起来像画布的一部分。
 - 图片创作面板的“将使用默认模型与参数”提示、输入区和操作控件缺少稳定的表面层级。
+- 节点间普通连接线使用过低的透明度和线宽，在低缩放比例或点阵背景上难以追踪。
 
 这不是生成逻辑或参考图尺寸逻辑的问题，因此本次只调整视觉契约，不改变节点数据、生成参数、定位和交互流程。
 
@@ -42,6 +43,15 @@
 - 展开编辑 Modal 使用相同的表面、边界和阴影，避免节点内面板与放大面板产生两套视觉语言。
 - “将使用默认模型与参数”仍是状态说明，不改变模型解析或生成默认值。
 
+### 2.4 连接线可读性
+
+`ConnectionPath`（节点连接线）把交互命中层和视觉展示层分开：透明路径继续保留 16px 点击区域，视觉路径不承担点击事件。
+
+- 普通状态使用“柔和外层 + 清晰内芯”两层路径，提高连接在画布背景上的连续性，但不使用高亮色制造噪音。
+- 悬停或选中状态切换到 `accent.primary`（主题强调色），同时提高线宽、透明度和流动虚线强度。
+- 起点和终点使用轻量圆点标识，让用户能快速判断连接的两端。
+- 所有路径使用 `vectorEffect="non-scaling-stroke"`，保证缩放画布时线宽保持可读；动效继续服从 `prefers-reduced-motion`。
+
 ## 3. 状态与边界
 
 | 状态 | 处理 | 目的 |
@@ -51,6 +61,8 @@
 | 选中 | 沿用 active stroke | 与节点选中态保持一致 |
 | 禁用/无内容 | 沿用 `faint` 和既有空态文案 | 不伪造生成成功或配置状态 |
 | 展开编辑 | Modal 复用同一套主题 token | 保持放大编辑与节点内编辑一致 |
+| 连接线默认 | 中性颜色的外层 + 清晰内芯 + 端点圆点 | 在低缩放和点阵背景下保持连贯可见 |
+| 连接线悬停/选中 | 强调色、增强线宽、流动虚线 | 快速识别当前连接，不改变连接数据 |
 
 本次不调整画布背景色、节点尺寸、面板定位、参考图尺寸选项、生成参数和资源同步逻辑。
 
@@ -60,6 +72,7 @@
 - `web/src/components/canvas/canvas-node.tsx`：应用节点外壳和节点标题的主题表面。
 - `web/src/components/canvas/canvas-node-content.tsx`：应用绘图空态子表面。
 - `web/src/components/canvas/canvas-node-prompt-panel.tsx`：注入图片创作面板和放大编辑面板的主题变量。
+- `web/src/components/canvas/canvas-connections.tsx`：渲染连接线的命中层、普通层级、选中流动线和端点标识。
 - `web/src/styles/globals.css`：维护面板控件 hover 与尺寸调整手柄的唯一规则。
 
 ## 5. 验证与待回归
@@ -73,4 +86,5 @@
 
 - 浏览器中分别切换浅色/深色主题，检查图片创作面板默认、悬停、选中和展开编辑状态。
 - 在点阵、线稿和空白背景下检查节点边缘、空绘图态和“将使用默认模型与参数”的对比度。
-- 本项目按规则未自动运行 TypeScript、构建或测试；提交前只做了静态 diff 检查。
+- 在 25%、40% 和 100% 缩放下检查普通连接线、悬停/选中连接线及两个端点的可见度。
+- 本项目按规则未自动运行 TypeScript、构建或测试；提交前只做了静态 diff 检查。

docs/index.md

@@ -8,6 +8,8 @@
 
 - [画布节点可读性设计沉淀](design/canvas-node-visual-contrast.mdx)：节点外壳、空态和图片创作面板在浅色/深色画布上的表面、边界、阴影与控件状态约束。
 
+- [画布浮动控件设计沉淀](design/canvas-floating-controls.mdx)：顶部操作区、底部 Dock 和右下角工作模式切换的浮动面板、定位与响应式约束。
+
 ## 本地协作文档（不随仓库分发）
 
 - [beautifului 创作设计](beautifului-creation-design.md)：本地设计参考，未纳入版本控制。