kdletters
747473024d
新增 /editor 图片画布入口与 Lovart 风格画布交互 新增图片画布工程和资源持久化的 SpacetimeDB 表、绑定与 api-server BFF 接入图片生成和修改的 VectorEngine gpt-image-2 后端通道 完善素材库文件夹、重命名、上传删除、图层和元数据交互 补充图片画布技术方案、领域词、执行跟踪和浏览器 smoke 截图
66 lines
5.5 KiB
Markdown
66 lines
5.5 KiB
Markdown
# 图片画布编辑器 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 素材库修正：素材栏按文件夹分组，文件夹支持折叠和新建；上传入口可定向到当前文件夹，上传素材进入素材库并支持删除，内置素材只保留添加和重命名。
|