新增图片画布编辑器

新增 /editor 图片画布入口与 Lovart 风格画布交互

新增图片画布工程和资源持久化的 SpacetimeDB 表、绑定与 api-server BFF

接入图片生成和修改的 VectorEngine gpt-image-2 后端通道

完善素材库文件夹、重命名、上传删除、图层和元数据交互

补充图片画布技术方案、领域词、执行跟踪和浏览器 smoke 截图

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

@@ -0,0 +1,74 @@
+# 图片画布编辑器 Lovart 化与持久化接入方案
+
+## 背景
+
+网站需要新增一个面向图片素材的独立 `/editor` 画布入口。第一阶段已经提供纯前端画布体验，本轮把它升级为 Lovart 风格的 AI 图片画布：支持更接近专业画布的拖拽、缩放、吸附、工具模式、元数据查看和图片修改结果并排展示，同时补上工程与资源持久化。
+
+## V2 边界
+
+- 主站新增 `/editor` 路由，进入独立图片画布编辑器阶段。
+- 创作 Tab 顶部提供编辑器入口，入口只负责跳转，不参与玩法创作链路。
+- 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。
+- 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。
+- 画布中的图片可展示、悬浮显示图片尺寸与边框，点击后在图片上方显示浮动工具栏。
+- 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成、局部修改 / 蒙版、文字、形状 / 标注、导出。
+- 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
+- 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
+- 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。
+- 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine `gpt-image-2`：纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。前端不持有 provider 密钥；上游失败或配置缺失时只在对话框展示失败，不创建 mock 成功图。
+
+## 交互规则
+
+- `适合视图` 的正式语义为“显示画布所有可见元素”，不再回到固定 `x/y/scale`。
+- 右上角缩放控件只展示当前缩放百分比；点击后弹出菜单：放大、缩小、显示画布所有元素、缩放至 50%、缩放至 100%、缩放至 200%。
+- 缩放菜单支持 `Ctrl/Cmd +`、`Ctrl/Cmd -` 和 `Shift + 1`；快捷键只改变 viewport，不修改工程资源。
+- 吸附阈值以屏幕像素为准，换算到世界坐标后参与拖拽计算；拖拽结束后只保存最终图层布局，不保存临时参考线。
+- 画布自动保存使用防抖策略：图层拖拽、缩放、资源新增和修改结果创建后延迟保存工程快照。
+- 移动端保留同一套状态模型，底部工具栏可横向滚动，侧边栏默认可收起。
+
+## 数据与持久化
+
+- 新增 `editor_project` 表保存图片画布工程：`projectId`、`ownerUserId`、标题、viewport、图层布局 JSON、创建时间和更新时间。
+- 新增 `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。
+- 前端不直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。
+- 未登录用户可以使用本地演示态，但不触发工程自动保存。
+
+## 后端接口
+
+- `GET /api/editor/projects/recent`：读取当前用户最近编辑的图片画布工程，没有则返回 `project: null`。
+- `POST /api/editor/projects`：创建图片画布工程。
+- `GET /api/editor/projects/{projectId}`：读取指定工程及资源列表。
+- `PATCH /api/editor/projects/{projectId}`：保存 viewport 与图层布局快照。
+- `POST /api/editor/projects/{projectId}/resources`：创建画布资源记录，接收上传资源或真实生成资源元数据。
+- `POST /api/editor/images/generations`：按提示词调用 VectorEngine `gpt-image-2` 生成图片，返回 data URL、尺寸、prompt、model、provider 和 taskId。
+- `POST /api/editor/images/edits`：按提示词和当前生成图 Data URL 调用 VectorEngine edits，返回新的生成图片元数据。
+
+所有写接口都必须校验 Bearer 登录态和 owner；接口只返回当前用户有权读取的工程与资源。
+
+## 实现约束
+
+- 前端只维护表现、交互和临时 UI 状态，工程真相以后端 project/resource 快照为准。
+- 示例素材可继续复用 `public/creation-type-references/` 下的站内图片；用户上传和后续生成资源必须通过资源记录表达。
+- 不把 hover、dragging、临时吸附线、Space 临时抓手等瞬时 UI 状态写入后端。
+- 不在 UI 中加入大段功能说明，编辑器界面只展示必要的工具、素材和状态信息。
+- 不复用或改写 `CreativeImageInputPanel` 的单图资产编辑语义；`/editor` 是独立图片画布工程。
+
+## 验收用例
+
+- 缩放百分比按钮能打开 Lovart 风格菜单，菜单项能放大、缩小、显示所有元素和缩放到固定比例。
+- `显示画布所有元素` 按可见图层外接矩形计算 viewport。
+- 默认选择模式；底部工具栏能切换工具；中键拖拽和 Space 临时抓手都能平移画布。
+- 拖拽图片接近其它图片边缘或中心时显示吸附线，并保存吸附后的最终布局。
+- 生成资源显示元数据按钮，元数据窗口展示来源、prompt、model、provider、task、尺寸和 OSS 引用。
+- 修改生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图。
+- 工程刷新后能从后端恢复资源、图层布局和 viewport。
+
+## 后续扩展点
+
+- 接入图片生成 / 修改计费、队列进度状态、OSS 落盘和更完整失败审计。
+- 资产库接入：素材栏从用户资产、历史生成图或上传结果读取。
+- 图层模型：引入稳定 layer id、z-index、锁定、隐藏和多选。
+- 图像编辑：将占位工具替换为裁剪、抠图、局部修改、蒙版和导出等真实能力。