Genarrative/TRACKING.md

图片画布编辑器 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 已通过。

待办清单

• 更新图片画布编辑器技术方案，明确 v2 范围。
• 补充 /editor 领域词，区分图片画布工程和单图资产编辑。
• 添加前端组件交互测试。
• 添加 editor project API client 测试。
• 新增 editor_project 与 editor_project_resource 表。
• 同步 SpacetimeDB migration 表清单、生成绑定和后端架构表目录。
• 新增 api-server /api/editor/projects* BFF。
• 接入前端自动保存与资源创建 API。
• 实现 Lovart 风格缩放菜单和快捷键。
• 实现 AI 画布底部工具栏、工具模式和临时抓手。
• 实现核心吸附线和拖拽吸附。
• 实现生成资源元数据窗口和真实修改右侧结果。
• 执行并记录验证命令。

决策记录

• /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 素材库修正：素材栏按文件夹分组，文件夹支持折叠和新建；上传入口可定向到当前文件夹，上传素材进入素材库并支持删除，内置素材只保留添加和重命名。