调整图片画布路由和画布数据模型

将图片画布入口改为 /editor/canvas

新增 editor_canvas 表并关联 editor_project 默认画布

更新 project API 响应中的 canvas 快照兼容层

统一图片画布侧栏列表项和图标按钮组件

同步前端测试、SpacetimeDB bindings、技术文档和 TRACKING 记录

docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md

@@ -2,37 +2,40 @@
 
 ## 背景
 
-网站需要新增一个面向图片素材的独立 `/editor` 画布入口。第一阶段已经提供纯前端画布体验，本轮把它升级为 Lovart 风格的 AI 图片画布：支持更接近专业画布的拖拽、缩放、吸附、工具模式、元数据查看和图片修改结果并排展示，同时补上工程与资源持久化。
+网站需要新增一个面向图片素材的独立 `/editor/canvas` 画布入口。第一阶段已经提供纯前端画布体验，本轮把它升级为 Lovart 风格的 AI 图片画布：支持更接近专业画布的拖拽、缩放、吸附、工具模式、元数据查看和图片修改结果并排展示，同时补上工程、画布与资源持久化。
 
 ## V2 边界
 
-- 主站新增 `/editor` 路由，进入独立图片画布编辑器阶段。
+- 主站新增 `/editor/canvas` 路由，进入独立图片画布编辑器阶段。
 - 创作 Tab 顶部提供编辑器入口，入口只负责跳转，不参与玩法创作链路。
 - 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。
 - 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。
+- 画布左下角提供 Lovart 式状态控件：背景色圆点、素材 / 图层入口、小地图开关；小地图显示图层缩略分布和当前视口框，点击小地图执行显示所有元素。
 - 画布中的图片可展示、悬浮显示图片尺寸与边框，点击后在图片上方显示浮动工具栏。
 - 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成、局部修改 / 蒙版、文字、形状 / 标注、导出。
 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。
 - 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine `gpt-image-2`：纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。前端不持有 provider 密钥；上游失败或配置缺失时只在对话框展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine `gpt-image-2`：纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后先在画布中心创建选中的灰色占位框，输入框跟随占位框显示；提交成功后真实生成图落在占位框位置，输入框继续跟随新生成图；基于已有生成图的修改仍通过轻量弹窗承载。前端不持有 provider 密钥；上游失败或配置缺失时只在当前生成输入框展示失败，不创建 mock 成功图。
 
 ## 交互规则
 
 - `适合视图` 的正式语义为“显示画布所有可见元素”，不再回到固定 `x/y/scale`。
 - 右上角缩放控件只展示当前缩放百分比；点击后弹出菜单：放大、缩小、显示画布所有元素、缩放至 50%、缩放至 100%、缩放至 200%。
 - 缩放菜单支持 `Ctrl/Cmd +`、`Ctrl/Cmd -` 和 `Shift + 1`；快捷键只改变 viewport，不修改工程资源。
+- 背景色控件只修改编辑器工作区底色，不恢复网格线或棋盘格底纹，也不影响图片本体。
 - 吸附阈值以屏幕像素为准，换算到世界坐标后参与拖拽计算；拖拽结束后只保存最终图层布局，不保存临时参考线。
 - 画布自动保存使用防抖策略：图层拖拽、缩放、资源新增和修改结果创建后延迟保存工程快照。
 - 移动端保留同一套状态模型，底部工具栏可横向滚动，侧边栏默认可收起。
 
 ## 数据与持久化
 
-- 新增 `editor_project` 表保存图片画布工程：`projectId`、`ownerUserId`、标题、viewport、图层布局 JSON、创建时间和更新时间。
+- 新增 `editor_project` 表保存图片画布工程：`projectId`、`ownerUserId`、标题、创建时间和更新时间；历史 layout 字段暂保留为兼容列，不再作为权威画布数据。
+- 新增 `editor_canvas` 表保存工程下的画布：`canvasId`、`projectId`、`ownerUserId`、标题、viewport、图层布局 JSON、创建时间和更新时间。当前编辑器使用项目默认画布，后续可扩展为一个 project 下多个 canvas。
 - 新增 `editor_project_resource` 表保存画布资源：`resourceId`、`projectId`、`ownerUserId`、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、sourceResourceId、创建时间和更新时间。
 - 图片文件本体继续走 OSS，浏览器读取私有 generated 对象仍经 `/api/assets/read-url` 换签。
-- 资源表只保存资源元数据；图层位置、尺寸、缩放、层级和选中所需 ID 保存在 `editor_project` 的布局 JSON。
+- 资源表只保存资源元数据；图层位置、尺寸、缩放、层级和选中所需 ID 保存在 `editor_canvas` 的布局 JSON。
 - 前端不直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。
 - 未登录用户可以使用本地演示态，但不触发工程自动保存；真实图片生成 / 修改需要登录。编辑器 API 请求允许使用 refresh cookie 静默补 access token，但 401 / 403 只在编辑器局部提示登录，不清空整站登录态，也不把后端 requestId 直接作为生图弹窗主文案。
 
@@ -54,14 +57,16 @@
 - 示例素材可继续复用 `public/creation-type-references/` 下的站内图片；用户上传和后续生成资源必须通过资源记录表达。
 - 不把 hover、dragging、临时吸附线、Space 临时抓手等瞬时 UI 状态写入后端。
 - 不在 UI 中加入大段功能说明，编辑器界面只展示必要的工具、素材和状态信息。
-- 不复用或改写 `CreativeImageInputPanel` 的单图资产编辑语义；`/editor` 是独立图片画布工程。
+- 不复用或改写 `CreativeImageInputPanel` 的单图资产编辑语义；`/editor/canvas` 是独立图片画布工程的画布入口。
 
 ## 验收用例
 
 - 缩放百分比按钮能打开 Lovart 风格菜单，菜单项能放大、缩小、显示所有元素和缩放到固定比例。
 - `显示画布所有元素` 按可见图层外接矩形计算 viewport。
+- 左下角小地图可展示当前图层分布和视口范围，开关按钮可隐藏 / 恢复小地图，背景色菜单可切换白色、浅灰、暖灰和冷蓝工作区底色。
 - 默认选择模式；底部工具栏能切换工具；中键拖拽和 Space 临时抓手都能平移画布。
 - 拖拽图片接近其它图片边缘或中心时显示吸附线，并保存吸附后的最终布局。
+- 生成工具点击后显示画布内 `Image Generator` 占位框和跟随占位框的生成输入框，生成失败保留占位和输入状态，生成成功后在占位位置创建真实图层，并让输入框继续跟随该生成图。
 - 生成资源显示元数据按钮，元数据窗口展示来源、prompt、model、provider、task、尺寸和 OSS 引用。
 - 修改生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图。
 - 工程刷新后能从后端恢复资源、图层布局和 viewport。