GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cdc823611b04dfb2f15ebf404f1cda8686a2369a
Genarrative/TRACKING.md
kdletters cdc823611b 拆分图片画布素材拖拽桥接 
新增素材拖拽桥接 hook，承接素材拖向画布或文件夹的全局 pointer 监听

恢复认证弹窗 portal 渲染，避免全屏画布遮住账号入口

优化画布背景设置面板，补回当前色、色域、色相、预设、HEX 和恢复默认

补充素材拖拽、认证弹窗和背景面板回归测试并更新文档与 TRACKING
2026-06-17 12:20:04 +08:00

47 KiB
Raw Blame History

图片画布编辑器 Lovart 化执行跟踪

更新时间：2026-06-17

目标

  • 先落文档、测试用例和进度跟踪文件。
  • 再实施 /editor/canvas 的 Lovart 风格画布交互、缩放二级菜单、吸附线、元数据窗口、真实生成 / 修改入口和工程 / 画布持久化。

进度

阶段 状态 记录
文档 已完成 已补领域词、技术方案和后端表 / API 边界。
测试用例 已完成 已补前端交互测试和 editor project client 测试。
后端持久化 已完成 已新增 editor project/resource 表、SpacetimeDB procedure、spacetime-client facade 与 api-server BFF。
前端交互 已完成 已实现缩放菜单、工具模式、Space 抓手、中键平移、吸附线、元数据弹窗和右侧真实修改结果。
素材库增强 已完成 已实现账号级素材库持久化、文件夹新建 / 折叠 / 重命名 / 删除、多文件上传、拖拽定向上传、素材框选与批量删除。
画布增强 已完成 已实现拖拽上传到画布并创建图层、图层打组、Ctrl/Cmd 滚轮缩放、普通滚轮纵向滚动和小地图拖拽移动视图。
前端拆分 进行中 已新增前端拆分计划，抽出类型、画布模型、生成模型、导出模型和素材 / 图层整合侧栏视图，主视图保留状态编排与跨画布状态机。
验证 已完成 聚焦测试、类型检查、Rust 检查、schema guard、编码检查、diff 空白检查和浏览器 smoke 已通过。

待办清单

  • 更新图片画布编辑器技术方案，明确 v2 范围。
  • 补充 /editor/canvas 领域词，区分图片画布工程和单图资产编辑。
  • 添加前端组件交互测试。
  • 添加 editor project API client 测试。
  • 新增 editor_project、editor_canvas 与 editor_project_resource 表。
  • 同步 SpacetimeDB migration 表清单、生成绑定和后端架构表目录。
  • 新增 api-server /api/editor/projects* BFF。
  • 接入前端自动保存与资源创建 API。
  • 实现 Lovart 风格缩放菜单和快捷键。
  • 实现 AI 画布底部工具栏、工具模式和临时抓手。
  • 实现核心吸附线和拖拽吸附。
  • 实现生成资源元数据窗口和真实修改右侧结果。
  • 执行并记录验证命令。
  • 新增 /project 项目页，接入项目列表、单项重命名 / 删除、批量选择和批量删除。
  • 接入“我的”页项目入口与 /editor/canvas?projectid=<projectId> 精准加载。
  • 新增账号级素材库表、API、前端服务和编辑器接入。
  • 素材文件夹支持新建、折叠、重命名和删除。
  • 上传按钮与拖拽上传均支持多文件；拖到文件夹 / 素材行进入对应文件夹，拖到画布进入默认文件夹并创建图层。
  • 素材选择模式支持框选多选和批量删除。
  • 图层面板支持对当前选中图层打组并持久化 groupId。
  • 小地图支持拖拽移动画布视图。
  • 滚轮语义调整为普通滚轮纵向滚动，Ctrl/Cmd 滚轮缩放并阻止浏览器缩放。

决策记录

  • /editor/canvas 的长期领域对象命名为“图片画布工程的画布入口”。
  • project 保存工程元数据；canvas 保存 viewport 与图层布局；资源表保存 OSS 引用和上传 / 生成元数据。
  • 本期工程与资源持久化真实落库；图片生成 / 修改已接入 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 素材库修正：素材栏按文件夹分组，文件夹支持折叠和新建；上传入口可定向到当前文件夹，上传素材进入素材库并支持删除，内置素材只保留添加和重命名。
  • 2026-06-13 生图鉴权修正：编辑器工程和真实生图请求不再使用禁止 refresh 的局部鉴权策略，可通过 refresh cookie 静默补 access token；真实生图遇到 401 / 403 时弹窗显示“请先登录后再生成图片”，不再暴露后端 requestId 主文案。
  • 2026-06-13 Lovart 生图交互修正：纯文本生图不再使用居中弹窗，点击底部生成工具后在画布中心显示 Image Generator 占位框，并在占位框下方显示跟随式生成输入框、参考图入口、比例和模型占位按钮；生成成功后真实图片落在占位框位置。
  • 2026-06-13 Lovart 生图 smoke：http://127.0.0.1:10003/editor 点击底部生成工具后已显示画布内占位框和底部浮动输入框，截图留存于 output/playwright/editor-lovart-generation-composer.png。
  • 2026-06-13 生图占位交互修正：Image Generator 占位框支持拖拽移动，生成输入框跟随占位框；生成成功图层沿用拖拽后的占位位置，生成输入框继续锚定在新生成图片下方，点击其它图片或画布空白不会自动关闭。
  • 2026-06-13 生图锚定 smoke：http://127.0.0.1:10003/editor 中占位框拖拽前后坐标从 (616,217) 到 (712,289)，生成输入框同步从 (516,571) 到 (612,643)，保持锚定在生成对象下方；截图留存于 output/playwright/editor-generation-composer-anchored.png。
  • 2026-06-13 Lovart 小地图与背景色修正：画布左下角补回背景色圆点、小地图开关和小地图预览；小地图展示图层缩略分布与当前视口框，点击执行显示所有元素，背景色菜单可切换工作区底色且不恢复网格 / 棋盘底纹。
  • 2026-06-13 小地图与背景色 smoke：http://127.0.0.1:10003/editor 可见左下角小地图、背景色按钮和小地图开关；切换暖灰后画布工作区 background-color 为 rgb(243, 240, 234)，background-image 仍为 none；截图留存于 output/playwright/editor-minimap-background-warm.png。
  • 2026-06-13 路由与数据归属修正：图片画布页面路由改为 /editor/canvas；新增 editor_canvas 表作为 project 下的画布数据表，当前工程创建时同步创建默认画布，保存 layout 时写入默认画布，API 响应同时返回 project.canvas 和兼容顶层 viewport/layers。
  • 2026-06-13 项目页修正：新增 /project 作为图片画布工程列表入口；从“我的”页进入项目页，项目卡片进入 /editor/canvas?projectid=<projectId>，并补齐项目列表、重命名、删除和批量删除 API。GET /api/editor/projects 在重启后的 api-server 上返回未登录 401，不再是旧进程的 405；/project 前端路由 smoke 可渲染项目页白底布局。
  • 2026-06-14 组件复用修正：项目页重命名弹窗改为复用 UnifiedModal、PlatformTextField 和 PlatformActionButton，删除项目页局部 modal / input 样式，避免同类弹窗和表单 chrome 重复实现。
  • 2026-06-14 组件复用修正：新增 PlatformFloatingMenu / PlatformFloatingMenuItem，项目卡片右下角更多菜单改为复用平台浮层菜单原语；验证命令：npm run test -- src/components/common/PlatformFloatingMenu.test.tsx src/components/project/ProjectGalleryView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：PlatformFloatingMenu 增加菜单标签和四向定位，编辑器顶部缩放菜单改为复用同一浮层菜单原语；验证命令：npm run test -- src/components/common/PlatformFloatingMenu.test.tsx src/components/project/ProjectGalleryView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：编辑器生成图元数据弹窗改为复用 UnifiedModal，不再手写元数据弹窗遮罩、dialog role 和关闭按钮；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：编辑器“修改图片”弹窗改为复用 UnifiedModal，删除编辑器局部 modal backdrop、dialog role、header 和关闭按钮样式；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：新增 PlatformBatchActionToolbar，项目页选择模式底部批量操作栏改为复用平台批量工具栏原语；验证命令：npm run test -- src/components/common/PlatformBatchActionToolbar.test.tsx src/components/project/ProjectGalleryView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：项目页读取失败提示改为复用 PlatformStatusMessage，页面局部错误样式只保留布局间距；验证命令：npm run test -- src/components/project/ProjectGalleryView.test.tsx src/components/common/PlatformStatusMessage.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：编辑器生成 / 修改流程中的生成中与失败提示改为复用 PlatformStatusMessage，删除局部状态条颜色和错误变体样式；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformStatusMessage.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：编辑器画布背景色菜单改为复用 PlatformFloatingMenu 和 PlatformFloatingMenuItem，删除局部菜单容器定位 / 边框 / 阴影样式；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformFloatingMenu.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：编辑器“修改图片”弹窗提交按钮改为复用 PlatformActionButton，删除局部提交按钮颜色、边框和禁用态样式；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformActionButton.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 组件复用修正：项目卡片预览改为复用 PlatformMediaFrame，删除项目页局部预览框比例、图片填充和背景样式；验证命令：npm run test -- src/components/project/ProjectGalleryView.test.tsx src/components/common/PlatformMediaFrame.test.tsx、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-14 素材库与画布持久化修正：新增 editor_asset_folder / editor_asset 账号级素材库表、SpacetimeDB procedure、spacetime-client facade 和 api-server /api/editor/assets* BFF；编辑器接入文件夹新建 / 折叠 / 重命名 / 删除、素材重命名 / 删除、多文件上传、拖拽定向上传、拖入画布生成图层、素材框选批量删除、图层打组、小地图拖拽、普通滚轮纵向滚动与 Ctrl/Cmd 滚轮缩放。验证命令：npm run spacetime:generate -- --rust-only、npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/services/image-editor/editorProjectClient.test.ts、npm run typecheck、npm run check:spacetime-schema、npm run check:encoding、cargo check -p spacetime-client -p api-server --manifest-path server-rs/Cargo.toml、git diff --check。
  • 2026-06-14 组件复用修正：编辑器 EditorIconButton 改为委托 PlatformIconButton 的薄包装，保留编辑器局部 class 与调用方式，但不再维护重复的原生图标按钮可访问性和基础 chrome；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器生成输入框的提交按钮改为复用 PlatformActionButton，仅保留生成器局部尺寸和 Lovart 式浅灰覆盖，不再直接维护原生 submit 按钮基础 chrome；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformActionButton.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器生成输入框的“参考图”按钮改为复用 PlatformIconButton variant="surfaceFloating"，用 children 承载短标签，仅保留生成器局部尺寸和浅灰覆盖；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器生成图右上角元数据角标改为复用 PlatformIconButton asChild="spanButton"，保留嵌套在图层按钮内的合法 DOM 结构，同时把 Enter / Space 键盘触发和 darkMini chrome 收口到共享组件；验证命令：npm run test -- src/components/common/PlatformIconButton.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器画布内生成输入框和“修改图片”弹窗提示词改为复用 PlatformTextField variant="textarea"，删除编辑器里按标签选择器手写 textarea 基础输入 chrome 的做法，仅保留生成器局部尺寸和 Lovart 式覆盖；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformTextField.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：新增 PlatformInlineOptionButton，编辑器生成输入框里的比例和模型选择 pill 改为复用平台内联选项按钮原语，删除两个局部按钮重复维护基础 inline chrome 的做法；验证命令：npm run test -- src/components/common/PlatformInlineOptionButton.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：PlatformEmptyState 增加 asChild="button" 形态，项目页空列表“新建项目”卡片改为复用平台空态原语，避免项目页单独维护可点击空态卡片基础 chrome；验证命令：npm run test -- src/components/common/PlatformEmptyState.test.tsx src/components/project/ProjectGalleryView.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器顶部缩放百分比触发器改为复用 PlatformInlineOptionButton，让缩放菜单入口和生成器比例 / 模型 pill 共用“当前选项触发菜单”的按钮原语；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformInlineOptionButton.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器左下面板 dock 的画布背景色入口改为复用 PlatformIconButton，用色块作为 icon 承载当前背景色，和素材 / 图层 / 小地图入口保持同一图标按钮原语；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器素材侧栏的新建文件夹、文件夹重命名和素材重命名输入框改为复用 PlatformTextField，输入框局部样式改为明确 class 覆盖，不再按 input 标签选择器重复维护基础输入 chrome；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformTextField.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：编辑器侧栏素材和图层缩略图通过 SidebarMediaItem 改为复用 PlatformMediaFrame，删除缩略图内部图片填充的重复 CSS，统一媒体预览框和 fallback 结构；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformMediaFrame.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：画布图片 hover 尺寸标签改为复用 PlatformPillBadge tone="lightOverlay"，局部 CSS 只保留定位和深色覆盖，不再重复维护 badge 的圆角、字号和基础排版；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformPillBadge.test.tsx、npm run typecheck。
  • 2026-06-14 组件复用修正：生成跟随框的关闭按钮改为复用 PlatformIconButton variant="surfaceFloating"，编辑器薄包装 EditorIconButton 增加 variant 透传，删除局部关闭按钮基础 chrome；验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx、npm run typecheck。
  • 2026-06-16 编辑器回归修正：工程 / 素材 / 上传等编辑器请求恢复全局 401 / 403 登录弹窗；未登录上传会先弹登录并在登录后续传；画布背景入口恢复为 画布背景设置 面板，支持预设色、自定义颜色、HEX 输入、非法值不应用、恢复默认和 Escape 关闭。验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/services/image-editor/editorProjectClient.test.ts、npm run typecheck、npm run check:encoding、git diff --check；浏览器 smoke：http://127.0.0.1:10006/editor/canvas 未登录打开 账号入口，登录后上传素材成功，背景面板打开后点击“暖灰”使画布背景变为 rgb(243, 240, 234)。
  • 2026-06-17 前端拆分第一阶段：新增 ImageCanvasEditorTypes、ImageCanvasEditorModel、ImageCanvasGenerationModel 和 ImageCanvasExportModel，把类型、画布快照 / 吸附 / 背景、生成输入快照和导出元数据规则从 ImageCanvasEditorView 抽出；新增模型层单测，主视图从 8286 行降至 7054 行。
  • 2026-06-17 浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录打开工程和未登录上传均弹出 账号入口；关闭登录后点击 画布背景色 打开 画布背景设置 面板，点击 暖灰 后画布背景为 rgb(243, 240, 234)；登录开发账号后上传图片成功进入 项目素材，AI画布工具栏 保持可见。
  • 2026-06-17 前端拆分第二阶段：新增 ImageCanvasSidebarView，把素材 / 图层共用左侧整合面板从主视图抽出；上传链路、登录弹窗、素材拖到画布、持久化、图层历史和右键菜单状态机仍保留在主视图，避免过度拆分。验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx、npm run typecheck。
  • 2026-06-17 侧栏拆分浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新弹出 账号入口；画布背景色 打开 画布背景设置 dialog，包含预设、自定义颜色、HEX 和恢复默认；使用临时开发账号登录后上传图片成功进入 项目素材，点击素材可添加到画布，切换 图层 侧栏后能看到同一图片图层，AI画布工具栏 保持可见。
  • 2026-06-17 前端拆分第三阶段：新增 ImageCanvasStageView，把画布工作区视觉树、图层渲染、生成占位框、右键菜单、左下 dock、小地图和底部 AI 工具栏从主视图抽出；拖拽 / 缩放、历史、上传、登录、生成提交、素材持久化和右键命令仍保留在主视图，避免拆散状态机。
  • 2026-06-17 舞台拆分浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新弹出 账号入口；关闭登录后点击 画布背景色 打开完整 画布背景设置 dialog，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234)；使用临时开发账号密码登录后上传 smoke.png 成功进入 项目素材，点击素材添加到画布，切换 图层 后显示同一图层，图片浮动工具栏、小地图和 AI画布工具栏 保持可见。
  • 2026-06-17 前端拆分第四阶段：新增 ImageCanvasGenerationComposerView，把生成图片、生成规范、生成角色形象、生成图标素材、快速编辑、角色动画和修改图片弹窗从主视图抽出；生成提交、上传 input、引用选择、占位框拖拽、结果回写、历史和画布状态机仍保留在主视图。验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx、npm run typecheck。
  • 2026-06-17 生成面板拆分浏览器回归：http://127.0.0.1:10003/editor/canvas 清空浏览器数据后未登录刷新弹出 账号入口；关闭登录后 画布背景色 打开 画布背景设置，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234)；点击 生成工具 后画布显示 Image Generator 占位框和 生成图片 跟随对话框，AI画布工具栏 保持可见；使用临时开发账号密码登录后上传素材成功，点击素材可添加到画布，切换 图层 面板可看到对应图层。
  • 2026-06-17 前端拆分第五阶段：新增 ImageCanvasLayerCommandModel，把右键图层目标解析、复制 / 粘贴 / 创建副本、层级移动、分组 / 解组、显隐、锁定、翻转和删除的数据规则从主视图抽出；主视图只保留历史、选中态、菜单关闭、元数据清理和导出下载副作用。验证命令：npm run test -- src/components/image-editor/ImageCanvasLayerCommandModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新弹出 账号入口，背景入口打开完整 画布背景设置 面板；登录后上传素材成功，点击素材可加入画布，图片右键打开 图片功能面板，创建副本、水平翻转、锁定和隐藏均生效，AI画布工具栏 保持可见。
  • 2026-06-17 前端拆分第六阶段：新增 ImageCanvasInteractionModel，把适合视图、中心缩放、普通滚轮纵向滚动、Ctrl / Cmd 滚轮缩放、坐标换算、框选命中、平移、生成占位框拖拽、图层拖拽吸附、小地图投影、小地图点击定位和小地图拖拽视图移动的纯规则从主视图抽出；主视图保留事件、pointer capture、history、生成对象回写、选中态和状态更新。验证命令：npm run test -- src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 登录态刷新后素材、画布图层、小地图和 AI画布工具栏 保持可见，Ctrl 滚轮从 110% 缩放到 121%，普通滚轮不改变缩放，浏览器控制台无 passive wheel 错误。
  • 2026-06-17 新增素材持久化修正：素材库图片、上传到画布、生成图、修改图和图标素材加入画布时会先用当前图层快照更新本地画布，再在资源创建完成后立刻保存带真实 resourceId 的 layout，避免资源创建异步返回时把空 layers 写回工程。验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录弹出 账号入口，登录后上传素材、点击素材加入画布并刷新，画布图片和 AI画布工具栏 均保持可见。
  • 2026-06-17 前端拆分第七阶段：新增 useCanvasHistory，把画布历史快照、撤销、重做、历史栈长度限制和 canUndo / canRedo 派生状态从主视图抽出；主视图只在具体动作前捕获历史，并注入恢复快照后的菜单 / hover / 框选 / 拖拽清理。验证命令：npm run test -- src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck。
  • 2026-06-17 前端拆分第八阶段：新增 useImageCanvasProjectPersistence，把项目加载、projectId 状态、未就绪资源队列、工程资源创建、资源创建后即时保存和 450ms 自动保存从主视图抽出；新增 hook 单测锁定新增图层资源创建后保存真实 resourceId 的 layout。验证命令：npm run test -- src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck。
  • 2026-06-17 前端拆分第九阶段：新增 useCanvasGenerationDialogs，把画布生成对象的 active / inactive 注册表、归档、激活、按 id 更新 / 删除、按图层清理和生成中最新占位框查询从主视图抽出；主视图继续保留生成提交、结果落图、quick edit 和跨图层副作用。同步把 画布背景设置 调整为 Lovart 式紧凑色板弹层。验证命令：npm run test -- src/components/image-editor/useCanvasGenerationDialogs.test.tsx src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 清空会话后未登录弹出 账号入口，关闭后点击 画布背景色 显示色域、色相条、圆形预设和 HEX 输入，点击 生成工具 后画布显示 Image Generator 占位框和 生成图片 对话框，AI画布工具栏 保持可见。
  • 2026-06-17 前端拆分第十阶段：新增 useImageCanvasAssetLibrary，把账号级素材库加载、文件夹新建 / 折叠 / 重命名 / 删除、素材重命名 / 删除、素材选择模式、框选、多选删除、素材拖到文件夹和素材库 401 登录弹窗从主视图抽出；主视图继续保留上传读取、上传进度、拖到画布坐标、画布图层创建和工程资源持久化。新增 hook 单测覆盖素材库归一化、401 登录、新建文件夹临时 id 替换、素材移动、删除回调和多选删除。验证命令：npm run test -- src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新弹出 账号入口，背景面板点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，点击 生成工具 后生成占位和 生成图片 对话框出现且 AI画布工具栏 保持可见；登录临时开发账号后上传图片成功进入 项目素材，点击素材加入画布，切换 图层 可看到对应图层，控制台无前端 error。
  • 2026-06-17 前端拆分第十一阶段：新增 ImageCanvasFileModel 和 useImageCanvasUploadWorkflow，把隐藏上传 input、上传目标分发、未登录续传、上传占位卡片、素材落库、拖到画布建层、生成参考图上传从主视图抽出；主视图保留画布 drop 外层判断和项目资源持久化注入。验证命令：npm run test -- src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新弹出 账号入口，登录临时开发账号后 画布背景设置 面板点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，点击 生成工具 后显示 Image Generator 占位框和 生成图片 对话框且 AI画布工具栏 保持可见；上传图片后素材数增加，点击素材加入画布，切换 图层 面板可看到 2 个图层，登录后控制台无前端 error。
  • 2026-06-17 前端拆分第十二阶段：新增 ImageCanvasGenerationLayerModel，把普通生图、修改图片、快速编辑和图标素材批量生成结果落画布的图层 id、临时 resourceId、标题、位置、原始分辨率尺寸、zIndex、source metadata、源图关联和 generationInputs 纯规则从主视图抽出；主视图继续负责 API 提交、生成对象状态、资源持久化、选中态、侧栏和适合视图副作用。验证命令：npm run test -- src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 清空会话后未登录刷新弹出 账号入口，登录临时开发账号后 画布背景设置 面板保留色相 / 自定义颜色 / 预设 / HEX / 恢复默认，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，点击 生成工具 后显示 Image Generator 占位框和 生成图片 对话框且 AI画布工具栏 保持可见；真实上传图片后素材数从 2 增至 3，登录后控制台无前端 error。
  • 2026-06-17 前端拆分第十三阶段：新增 useImageCanvasAssetExportWorkflow，把画布素材导出状态、单图右键导出、整包 ZIP 组包、图片去重、读取失败记录、metadata / manifest 和下载链接副作用从主视图抽出；主视图保留右键目标解析和状态提示渲染。验证命令：npm run test -- src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 清空会话后未登录刷新弹出 账号入口，登录临时开发账号后下载按钮启用，点击后触发真实下载 未命名画布-画布素材-20260617.zip 并显示导出状态；背景设置点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，点击 生成工具 后 生成图片 对话框出现且 AI画布工具栏 保持可见，登录后控制台无前端 error。
  • 2026-06-17 前端拆分第十四阶段：新增 useImageCanvasLayerCommands，把画布剪贴板、右键目标解析、复制 / 剪切 / 粘贴、创建副本、层级移动、分组 / 解组、显隐、锁定、翻转、删除选中图层、按 id 删除和单图导出委托从主视图抽出；主视图保留菜单定位、画布事件、生成、上传、项目持久化和实际导出下载。验证命令：npm run test -- src/components/image-editor/useImageCanvasLayerCommands.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 清空会话后未登录刷新弹出 账号入口，关闭后 画布背景色 打开完整 画布背景设置，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，点击 生成工具 后 Image Generator 占位框、生成图片 对话框和 AI画布工具栏 均可见；登录临时开发账号后新标签素材、画布图层、返回项目入口、小地图和底部工具栏可见，控制台无前端 error。
  • 2026-06-17 前端拆分第十五阶段：新增 useImageCanvasGenerationWorkflow，把生成入口、规范 / 角色 / 图标 / 修改 / 快速编辑 / 角色动画状态机、真实生成提交、结果落图、失败恢复和删除图层后的生成态清理从主视图抽出；主视图保留画布事件、浮层定位、上传、项目资源持久化和历史捕获。验证命令：npm run test -- src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 清空会话后未登录刷新弹出 账号入口，关闭登录后 画布背景色 打开完整 画布背景设置 面板，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；点击 生成工具 后 Image Generator 占位框、生成图片 对话框和 AI画布工具栏 均可见；登录临时开发账号后上传素材成功，素材数增加，点击素材可加入画布，切换 图层 面板可看到对应图层，登录后控制台无前端 error。
  • 2026-06-17 上传鉴权回归修正：普通素材上传入口在未登录时先打开 账号入口，不再先弹系统文件选择器；登录后用户再次点击上传即可打开文件选择器，避免浏览器拦截登录后异步触发的系统选择器。拖拽 / 已选中文件的续传逻辑仍保留，角色 / 图标生成参考图仍作为本地引用上传，不强制登录。验证命令：npm run test -- src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新弹出 账号入口，画布背景色 打开完整 画布背景设置，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；未登录点击侧栏上传直接弹登录，不出现文件选择器；登录后再次点击上传可以打开文件选择器并上传成功，素材计数从 4 增至 5，AI画布工具栏 保持可见。
  • 2026-06-17 前端拆分第十六阶段：新增 useImageCanvasEditorChrome，把项目标题 / 重命名、侧栏开关、当前工具、缩放菜单、背景设置、小地图和背景 HEX 状态从主视图抽出；主视图继续保留上传 / 生成 / 键盘 Escape 的跨工作流编排。新增 hook 单测覆盖重命名、鉴权登录、背景色输入、面板开关和工具状态；主视图从 2039 行降至 1966 行。验证命令：npm run test -- src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck。
  • 2026-06-17 前端拆分第十七阶段：新增 useImageCanvasViewportControls，把视口状态、画布尺寸、小地图投影、适合视图、中心缩放、滚轮语义、坐标换算和小地图移动从主视图抽出；主视图继续保留图层拖拽、框选、生成占位拖拽、上传 drop 和历史触发时机。验证命令：npm run test -- src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新弹出 账号入口，登录后素材 / 画布 / 小地图和底部工具栏可见；普通滚轮不改变缩放，Ctrl 滚轮从 100% 到 110%；背景设置点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，登录后控制台无前端 error。
  • 2026-06-17 前端拆分第十八阶段：新增 useImageCanvasStageInteractions，把画布舞台 pointer 状态机、选择 / 框选、多选拖拽、生成占位拖拽、抓手 / Space 临时抓手 / 中键平移、小地图 click / drag 分流和吸附线状态从主视图抽出；主视图继续保留上传 drop、右键菜单、生成提交、项目持久化和工具栏动作分流。新增 hook 单测覆盖多选拖拽、框选、临时抓手、生成占位和小地图分流；主视图从 1802 行降至 1452 行。验证命令：npm run test -- src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录刷新和未登录上传均弹出 账号入口，登录后素材 / 画布 / 小地图和底部工具栏保持可见；画布背景设置 点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；普通滚轮不改变缩放，Ctrl 滚轮从 146% 到 161%；抓手 / 文字 / 选择工具可连续切换；点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，关闭对话框后占位图保留，登录后控制台无前端 error。
  • 2026-06-17 前端拆分第十九阶段：新增 useImageCanvasCanvasDropWorkflow，把画布区域 drag over / drag leave / drop 分流从主视图抽出，覆盖素材库图片拖入画布、本地文件拖入画布、无关拖拽不拦截、默认文件夹选择和画布遮罩清理；主视图继续注入素材建层、文件上传、drop 点换算和素材移动高亮清理。新增 hook 单测覆盖拖拽入画布细节，主视图从 1452 行降至 1405 行。验证命令：npm run test -- src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 登录态刷新后素材 / 画布 / 小地图和底部工具栏可见，真实鼠标拖拽素材库图片到画布时出现 添加到画布 遮罩，松手后画布图层数量从 4 增至 5；画布背景设置 点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；抓手工具可切回选择工具，登录后控制台无前端 error。
  • 2026-06-17 前端拆分第二十阶段：新增 ImageCanvasMetadataModalView，把图片信息弹窗从主视图抽出，承载图片类型、生成输入、参考图、模型、分辨率、Provider、Task 和 Object 信息渲染；主视图只保留 metadataLayer 状态和关闭回调。同步修复未登录进入编辑器时项目 / 素材接口抢跑 401、重置画布视图 点击事件误传给适合视图函数的问题。新增组件单测覆盖生成图 metadata、上传图 fallback 和关闭回调，新增 hook / 主视图测试覆盖未登录不请求受保护素材 / 工程数据和重置按钮回归；主视图从 1405 行降至 1337 行。验证命令：npm run test -- src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 清空会话后直接弹出 账号入口，且未登录状态下没有发起 /api/editor/* 请求；登录临时开发账号后 重置画布视图 无控制台错误，画布背景设置 保持 Lovart 式白色浮层，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234)，上传素材可加入画布，右上角图片信息按钮可打开不透明白底元数据弹窗，关闭后 AI画布工具栏 仍可见。
  • 2026-06-17 前端拆分第二十一阶段：新增 useImageCanvasKeyboardShortcuts，把 Ctrl / Cmd + Z 撤销、Ctrl / Cmd + Shift + Z 重做、Shift 状态、Backspace / Delete 删除、Escape 关闭临时面板和 Space 临时抓手从主视图抽出；主视图继续注入图层删除、生成对话框、快速编辑和 chrome 面板 setter。新增 hook 单测覆盖输入框忽略快捷键、删除选中图层、删除生成占位、Escape 保留生成中面板、Space 和 Shift；主视图从 1337 行降至 1250 行。验证命令：npm run test -- src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10003/editor/canvas 未登录直接弹出 账号入口 且未抢跑 /api/editor/*，登录后 /api/editor/assets/library 和 /api/editor/projects/recent 为 200，AI画布工具栏 与 画布面板入口 可见，viewport 背景为 rgb(248, 250, 252) 且 background-image: none；按住 Space 从 文字工具 临时切到 抓手工具，松开恢复 文字工具；画布背景设置 点击 暖灰 后背景变为 rgb(243, 240, 234)；点击 生成工具 后 Image Generator 占位框、生成图片 对话框和 AI画布工具栏 同时可见，登录后控制台无前端 error。
  • 2026-06-17 前端拆分第二十二阶段：新增 useImageCanvasAssetPointerDragBridge，把素材卡片 pointer 拖拽到画布 / 文件夹的全局监听、拖拽激活、画布 drop 提示、文件夹高亮、移动素材、加入画布和点击抑制从主视图抽出；主视图继续负责素材库事实、画布建层、历史和工程资源持久化。同步恢复 账号入口 认证弹窗 portal 渲染，避免全屏画布遮住登录弹窗；画布背景设置 调整为独立白色浮层，包含当前色、色域、色相、自定义颜色、预设网格、HEX 输入和恢复默认。验证命令：npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 未登录打开直接显示 账号入口；登录临时开发账号后 画布背景设置 显示当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；上传图片进入 项目素材，真实 pointer 拖拽素材到画布后图层数从 0 到 1 且 AI画布工具栏 保持可见；新建 SmokeFolder 后真实 pointer 拖拽素材到文件夹，项目素材 变 0、SmokeFolder 变 1，素材执行移动而非拷贝。控制台仅有未登录 refresh 401，登录后编辑器 API 均为 200。
Reference in New Issue View Git Blame Copy Permalink