新增图片画布编辑器

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

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

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

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

补充图片画布技术方案、领域词、执行跟踪和浏览器 smoke 截图
This commit is contained in:
2026-06-13 16:22:18 +08:00
parent f8a80cd795
commit 747473024d
53 changed files with 6694 additions and 29 deletions

65
TRACKING.md Normal file
View File

@@ -0,0 +1,65 @@
# 图片画布编辑器 Lovart 化执行跟踪
更新时间:`2026-06-12`
## 目标
- 先落文档、测试用例和进度跟踪文件。
- 再实施 `/editor` 的 Lovart 风格画布交互、缩放二级菜单、吸附线、元数据窗口、真实生成 / 修改入口和工程持久化。
## 进度
| 阶段 | 状态 | 记录 |
| --- | --- | --- |
| 文档 | 已完成 | 已补领域词、技术方案和后端表 / API 边界。 |
| 测试用例 | 已完成 | 已补前端交互测试和 editor project client 测试。 |
| 后端持久化 | 已完成 | 已新增 editor project/resource 表、SpacetimeDB procedure、spacetime-client facade 与 api-server BFF。 |
| 前端交互 | 已完成 | 已实现缩放菜单、工具模式、Space 抓手、中键平移、吸附线、元数据弹窗和右侧真实修改结果。 |
| 验证 | 已完成 | 聚焦测试、类型检查、Rust 检查、schema guard、编码检查、diff 空白检查和浏览器 smoke 已通过。 |
## 待办清单
- [x] 更新图片画布编辑器技术方案,明确 v2 范围。
- [x] 补充 `/editor` 领域词,区分图片画布工程和单图资产编辑。
- [x] 添加前端组件交互测试。
- [x] 添加 editor project API client 测试。
- [x] 新增 `editor_project``editor_project_resource` 表。
- [x] 同步 SpacetimeDB migration 表清单、生成绑定和后端架构表目录。
- [x] 新增 api-server `/api/editor/projects*` BFF。
- [x] 接入前端自动保存与资源创建 API。
- [x] 实现 Lovart 风格缩放菜单和快捷键。
- [x] 实现 AI 画布底部工具栏、工具模式和临时抓手。
- [x] 实现核心吸附线和拖拽吸附。
- [x] 实现生成资源元数据窗口和真实修改右侧结果。
- [x] 执行并记录验证命令。
## 决策记录
- `/editor` 的长期领域对象命名为“图片画布工程”。
- 资源表保存 OSS 引用和上传 / 生成元数据;图层位置、缩放、层级保存在 project 布局 JSON。
- 本期工程与资源持久化真实落库;图片生成 / 修改已接入 api-server VectorEngine BFF暂不接入计费和队列进度。
- `适合视图` 的语义为显示画布所有可见元素。
- 吸附范围为核心对齐:左右 / 上下边缘和水平 / 垂直中心线。
- 缩放控件采用 Lovart 风格百分比按钮和二级菜单。
## 验证记录
- `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx`
- `npm run test -- src/services/image-editor/editorProjectClient.test.ts`
- `npm run test -- src/routing/appPageRoutes.test.ts`
- `npm run typecheck`
- `cargo check -p spacetime-client --manifest-path server-rs/Cargo.toml`
- `cargo check -p api-server --manifest-path server-rs/Cargo.toml`
- `npm run check:spacetime-schema`
- `npm run check:encoding`
- `git diff --check`
- Headless Playwright smoke`http://127.0.0.1:10000/editor` 可展示画布、缩放菜单、底部工具栏和图片工具栏;只启动 `dev:web``/api/*` 代理 500 属于未启动后端的预期现象。
- 2026-06-12 Lovart 布局修正 smoke`http://127.0.0.1:10000/editor` 已移除左侧竖向工具栏和右侧独立图层栏;素材、已生成文件、图层统一收在左侧可折叠面板,中央画布和周边面板保持浅色一体布局;截图留存于 `output/playwright/editor-left-integrated-light.png`
- 2026-06-12 外圈背景修正 smoke`http://127.0.0.1:10000/editor` 的编辑器宿主和画布根容器已铺成同一块白色工作台,不再通过圆角边框露出底部平台背景;截图留存于 `output/playwright/editor-no-outer-background.png`
- 2026-06-12 画布背景与原生菜单修正 smoke`http://127.0.0.1:10000/editor` 已拦截编辑器区域右键菜单,禁用长按文本选择 / iOS callout并移除画布网格线与棋盘格底纹截图留存于 `output/playwright/editor-plain-background.png`
- 2026-06-12 Lovart 面板与外层 padding 修正:`/editor` 外层 `platform-ui-shell` 已按 `image-editor` stage 使用 `p-0 bg-white`,其它页面保留原 padding已生成文件和图层改为画布左下入口按钮触发的浮层面板不再堆叠在左侧素材栏浏览器样式检查确认 shell padding 为 `0px`、画布背景无 `background-image`,截图留存于 `output/playwright/editor-lovart-panel-popup-final.png`
- 2026-06-12 侧栏切换修正:删除“已生成文件”入口,删除侧栏内展开 / 折叠按钮;画布左下仅保留“素材”和“图层”入口,二者复用同一个左侧栏,点击当前已打开入口会关闭侧栏。
- 2026-06-12 工具栏能力修正:删除底部“局部修改工具”入口;上传工具接入隐藏文件选择并将图片加入画布图层;图片浮动工具栏的删除按钮改为真实删除当前图层。
- 2026-06-12 生成工具修正:移除拼图素材的生成图 mock 元数据,使其作为普通素材显示;底部生成工具改为先打开生成图片对话框,再进入生成中状态并把生成结果加入画布,生成结果保留元数据与修改入口。
- 2026-06-13 真实生图修正:`/api/editor/images/generations``/api/editor/images/edits` 统一走 api-server VectorEngine `gpt-image-2` BFF前端不再创建 mock 成功图,生成 / 修改失败会留在对话框内显示错误;生成图右上角 `{}` 元数据按钮可直接点击打开元数据窗口。
- 2026-06-13 素材库修正:素材栏按文件夹分组,文件夹支持折叠和新建;上传入口可定向到当前文件夹,上传素材进入素材库并支持删除,内置素材只保留添加和重命名。