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

docs/content/docs/overview/features.mdx

@@ -75,6 +75,39 @@ description: 影策当前已实现的核心工作台能力与使用入口
 - `backend/internal/service/eagle.go`：Eagle 响应解析和集合字段归一化。
 - `web/src/lib/plugins/builtin/eagle.ts`：外部素材映射、预览和引用处理。
 
+## 自由空白画布起点
+
+新建且没有节点的自由画布会显示“从哪里开始”引导。除短剧流水线和 Agent 生成外，用户可以选择“自由空白画布”，在不预设工作流的情况下开始创作。
+
+进入自由空白画布后，画布中央保留一个带加号的起始框。点击加号会打开与底部工具栏相同的添加菜单，可新建文本、绘图、分镜、背板、文件夹、图片、视频、音频和工作流，也可上传文件或打开素材库。插件提供的节点继续由同一命令注册表控制，不维护第二份素材类型清单。
+
+自由起点选择按画布持久化；画布仍为空时刷新页面不会重新回到起始引导。中央起始框只负责提供入口，不创建占位节点。
+
+### 相关实现
+
+- `web/src/components/canvas/canvas-short-drama-entry.tsx`：起始引导、自由空白起始框和中央加号。
+- `web/src/components/canvas/use-canvas-create-commands.ts`：工具栏与空白起点共用的添加命令解析。
+- `web/src/lib/canvas/canvas-starter.ts`：空画布起点状态决策。
+- `web/src/stores/canvas/use-canvas-store.ts`：按画布保存自由起点选择。
+
+## 画布外观
+
+底部工具栏的“画布外观”面板支持浅色、深色、自定义三种主题，以及点阵、线稿、空白三种网格。浅色画布使用比白色节点更沉的中性雾灰背景，深色画布使用比原深色节点更亮的中性灰背景，让画布底层与内容表面保持稳定区分，同时避免蓝灰背景与黑色工具浮层产生色温割裂。
+
+自定义主题会继承用户进入前的浅色或深色基础界面，并允许在“浅色界面”和“深色界面”之间切换。界面样式复用原项目整套节点、工具浮层、文字、边框和交互状态，不开放这些元素的任意改色；切换界面样式不会覆盖已经选择的画布背景和网格颜色。
+
+自定义主题还允许调整画布背景色、背景明亮度、网格颜色和网格强度。颜色输入支持三位或六位 HEX，可带或不带 `#`；形成合法色码后实时写入当前画布，编辑过程中不会被父级状态覆盖，关闭外观面板也不会撤销。选择新的画布背景色时明亮度自动归零，确保画布首先精确显示输入色；之后仍可沿 OKLCH 亮度轴单独调整。不提供背景透明度，避免画布底色与底层颜色混合后产生偏色。“网格强度”使用 `0%` 最淡、`100%` 最明显的方向，避免“透明度”命名歧义。
+
+自定义外观可以应用到当前画布，也可以保存为当前浏览器、当前账号 scope 下的新建画布默认值。当前画布外观沿用画布项目的既有持久化和同步流程；浏览器默认值不跨设备同步。
+
+### 相关实现
+
+- `web/src/lib/canvas-theme.ts`：浅色、深色画布固定背景与原有节点、浮层 token。
+- `web/src/lib/canvas/canvas-appearance.ts`：自定义外观归一化、解析和本机账号默认值。
+- `web/src/components/canvas/canvas-toolbar.tsx`：画布外观面板入口。
+- `web/src/components/canvas/canvas-appearance-controls.tsx`：主题、颜色、明亮度和网格控件。
+- `web/src/components/canvas/infinite-canvas.tsx`：应用主题背景并保持网格渲染参数。
+
 ## 画布节点自动整理
 
 画布底部的“自动整理节点”按钮用于快速改善节点排布，适合处理节点散落、间距不一致或流程方向不清晰的画布。

docs/content/docs/progress/pending-test.mdx

@@ -14,6 +14,34 @@ description: 影策已实现功能的手工验证清单与未确认边界
 - [ ] 在存在图片、视频和文本长任务时发送 SIGTERM，确认 readiness 立即返回 503、新任务被拒绝、已领取任务在宽限期内完成，超时后租约可由重启实例恢复。
 - [ ] 构建带版本参数的前后端镜像，确认 `/api/system/version`、管理后台版本、OCI Commit 和 Release Tag 一致。
 
+## 自由空白画布与画布外观
+
+- [x] 新建画布引导新增“自由空白画布”主入口；进入后显示中央空白起始框和加号，不创建占位节点。
+- [x] 中央加号复用底部工具栏的添加命令，当前浏览器已确认文本、绘图、分镜、背板、文件夹、图片、视频、导演台、音频、工作流、上传文件和素材库入口完整显示。
+- [x] 自由起点按画布持久化，当前浏览器刷新后仍停留在自由空白起始框；浅色、深色两种主题已完成常规桌面尺寸验收。
+- [x] 浅色画布固定为 `#EDEEEE`，深色画布固定为中性灰 `#262626`；原项目的节点、起始框、工具浮层、边框和阴影颜色保持不变。
+- [x] 画布外观增加“自定义”主题，可调整背景颜色、背景明亮度、网格颜色和网格强度；不开放节点、工具浮层、边框和阴影任意改色。
+- [x] 自定义主题增加“浅色界面／深色界面”，复用原项目对应的节点和工具浮层样式；切换界面样式不覆盖自定义画布和网格颜色。
+- [x] 原“网格透明度”改名为“网格强度”，保持 `0%` 最淡、`100%` 最明显。
+- [x] 颜色选择器与合法的 `#RRGGBB` 输入实时写入当前画布；点击面板外只关闭面板，不撤销刚才的颜色。
+- [x] HEX 输入支持三位／六位、可带或不带 `#`；输入编辑不会被父级状态覆盖，选择新背景色时明亮度归零以精确显示输入色。
+- [x] 删除背景透明度控件并忽略旧存储字段；背景明亮度改为沿 OKLCH 亮度轴调整，`0%` 精确保留输入色码。
+- [x] 自定义主题继承进入前的浅色或深色基础界面；同一基础主题可以恢复上次自定义配置，跨深浅主题则重新继承。
+- [x] 第一次进入或重置自定义主题时，明亮度默认为 `0%`、网格颜色默认为 `#B6B3B3`、网格强度默认为 `70%`；已有用户保存值不被覆盖。
+- [x] 当前画布外观随画布项目保存；“保存为默认”写入当前浏览器并按账号 scope 隔离，不跨设备同步。
+- [x] 深色点阵和线稿网格同步调整为 `rgba(205,205,205,0.28)`，浅色网格与网格图层渲染透明度保持既有值，并有专项回归断言。
+- [x] 自由空白画布与外观专项自动化测试通过，前端生产构建通过。
+- [ ] 在用户当前登录的 Edge 中验收颜色选择器、十六进制输入、明亮度调节、深浅主题继承和本机账号默认值。
+- [ ] 在窄屏和触屏尺寸检查三张起始卡、中央起始框、加号菜单的换行、滚动与点击目标；确认菜单不遮挡底部工具栏。
+- [ ] 由产品验收浅色/深色固定底色，以及原节点和工具浮层恢复后的最终视觉观感。
+- [ ] 从自由起点分别新建每种内置节点和插件节点，并从上传、素材库各导入一次素材，确认第一个节点创建后起始框消失且刷新后节点数据不丢失。
+
+## 画布拖线创建节点落点
+
+- [x] 从普通节点连接端拖到空白处创建节点时，松手点改为新节点靠近来源一侧的边缘中点；单击快捷创建和批量连接仍保留原布局。位置计算与批量连接专项测试、TypeScript 检查和前端生产构建通过。
+- [ ] 分别从节点右侧输出端和左侧输入端拖线创建图片、视频、文本与音频节点，确认新节点向松手点外侧展开，连线落在边缘中点且不会回头遮挡拖线区域。
+- [ ] 单击连接加号创建节点，确认仍自动放在相邻位置并保留 96px 间距；使用批量连接创建节点，确认原有落点和连接关系不变。
+
 ## 素材库网格密度
 
 - [x] 素材库桌面端缩小卡片并改为每行 6 张；新增素材占首格，默认每页 35 项，可切换 70/105 项，首屏正好组成 6×6 完整网格；中窄屏按 4/3/1 列收敛，前端生产构建通过。

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 检查。
+- 在窄屏和触屏尺寸补充检查节点、起始框与添加菜单的布局边界。