GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2d90a30b8bf93850717ab14c0f29481a8405f42c
Genarrative/TRACKING.md
kdletters d8bd371c69 抽出素材上传生命周期模型 
扩展 ImageCanvasUploadModel 承载素材上传占位、进度、失败和持久化回写状态迁移

精简 useImageCanvasUploadWorkflow 中的资产与图层状态补丁逻辑

补充上传模型单测覆盖生命周期状态和图层绑定

更新 TRACKING.md 记录第四十六执行批次与验证结果
2026-06-17 20:36:11 +08:00

113 KiB
Raw Blame History

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

更新时间：2026-06-17

目标

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

拆分口径

  • docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md 中的二十七个“阶段模块”是原始计划项，用来描述目标边界。
  • 本文件验证记录里的“执行批次”按每次实际修改、验证、提交和推送递增，包含原始计划项落地、计划外回归修复、组件复用、测试迁移和后续模型收口。
  • 因此“第四十一执行批次”不代表原始计划有四十一个阶段；它表示已完成并推送的第四十一次前端拆分相关增量。
  • 当前原始二十七个计划项已经覆盖到第二十七阶段模块，后续执行批次属于对已拆模块的深化收口或回归修复。

进度

工作项 状态 记录
文档 已完成 已补领域词、技术方案和后端表 / 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。
  • 2026-06-17 前端拆分第二十三执行批次：新增 ImageCanvasOverlayModel，把生成输入框锚定、图标素材生成面板宽度、选中图片工具栏边界、快速编辑面板和角色动画面板定位从主视图抽出为纯模型；主视图继续保留生成 / quick edit / 角色动画状态机和舞台编排。新增模型单测覆盖锚定优先级、生成中隐藏、icon 宽度、工具栏 clamp、quick edit / 角色动画边界和生成 dialog 模式识别；主视图从 1182 行降至 1133 行。验证命令：npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx、npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts 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/useImageCanvasGenerationWorkflow.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 未登录打开显示 账号入口，登录后 画布背景设置 点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见；素材库已有素材真实 pointer 拖入画布后图层数从 0 到 1，工具栏保持可见，截图留存于 output/playwright/editor-overlay-model-regression-20260617.png。
  • 2026-06-17 前端拆分第二十四执行批次：新增 useImageCanvasAssetCanvasBridge，把删除素材清理画布图层、素材加入画布、素材 pointer 拖入画布 / 文件夹、画布 drag/drop 分流和文件拖入画布参数组装从主视图抽成素材到画布桥接 hook；主视图继续保留素材库事实、上传读取、工程资源持久化和历史触发。新增 hook 单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态；主视图从 1133 行降至 1086 行。验证命令：npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.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，HEX 输入 #ffffff 后变为白色，按 Escape 关闭面板；登录后上传图片请求 /api/editor/assets 返回 200，素材库出现上传素材，AI画布工具栏 保持可见。
  • 2026-06-17 前端拆分第二十五执行批次：新增 ImageCanvasStageControllerModel 和 useImageCanvasStageController，把舞台派生状态、生成 / 选中浮层位置、右键菜单目标、空白画布右键、图层右键和清空画布焦点从主视图抽出；主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机。新增模型和 hook 单测覆盖选中 / 生成锚定、右键菜单位置、显示 / 解锁判断、清空焦点和空白 / 图层右键菜单；主视图从 1086 行降至 993 行。验证命令：npm run test -- src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx、npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/routing/appPageRoutes.test.ts、npm run typecheck；浏览器回归：http://127.0.0.1:10007/editor/canvas 清空会话后未登录直接显示 账号入口，关闭登录后 画布背景色 打开完整 画布背景设置 dialog，包含色相、自定义颜色、预设、HEX 和恢复默认；点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，AI画布工具栏 保持可见，截图留存于 output/playwright/editor-stage-controller-smoke-20260617.png。
  • 2026-06-17 前端拆分第二十六执行批次：新增 ImageCanvasTopbarView，把返回项目入口、项目标题展示 / 重命名表单、下载画布素材按钮和导出状态提示从主视图抽出；主视图继续保留 chrome hook、项目持久化、导出工作流和实际导出副作用。新增组件单测覆盖返回入口、标题编辑入口、重命名提交 / 取消、导出按钮禁用 / 启用和导出状态提示；主视图从 993 行降至 905 行。验证命令：npm run test -- src/components/image-editor/ImageCanvasTopbarView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 未登录直接显示 账号入口，顶栏返回项目入口、项目名、画布 标签和下载按钮均可见；关闭登录后打开 画布背景设置，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，AI画布工具栏 保持可见，截图留存于 output/playwright/editor-topbar-smoke-20260617.png。
  • 2026-06-17 前端拆分第二十七执行批次：新增 useImageCanvasGenerationSurface，把生成 Composer JSX、生成工具切换分流、普通生图 / 图标生成 / 快速编辑 / 角色动画浮层定位从主视图抽出；useImageCanvasGenerationWorkflow 继续负责生成状态机和真实 API 提交。同步移除 ImageCanvasStageControllerModel 中重复的生成锚点 / Composer 位置派生，避免舞台控制器和生成表面重复持有生成浮层职责；主视图从 905 行降至 793 行。rebase 到远端 支持规范参考图输入 后，生成表面继续透传角色形象规范和常规参考图入口，并把左下 dock / 底部工具栏层级提到 Composer 之上，避免生成输入框盖住常用工具和背景面板。验证命令：npm run test -- src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx 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:10007/editor/canvas 未登录直接显示 账号入口，关闭登录后 画布背景设置 保持完整面板，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，再点击 生成角色形象 能打开包含 角色形象规范 和 常规参考图 的对话框，控制台仅有未登录 refresh 401。
  • 2026-06-17 上传侧栏回归修正：上传工作流移除上传到画布后强制切换 图层 侧栏的副作用，保留新增素材卡、创建画布图层和选中新图层。验证命令：npm run test -- src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 登录后点击 上传到项目素材 上传图片，左侧仍显示 素材 且 打开素材 为 pressed；把图片文件 drop 到 画布工作区 后素材库和画布图层均出现 canvas-drop-sidebar-smoke.png，新图层被选中，打开素材=true、打开图层=false，AI画布工具栏 保持可见，登录后控制台无 error。
  • 2026-06-17 前端拆分第二十八执行批次：继续收口 ImageCanvasGenerationComposerView，新增 ImageCanvasGenerationImageOptionsView、ImageCanvasSpecGenerationPanelView、ImageCanvasIconSpritesheetComposerView、ImageCanvasQuickEditPanelView 和 ImageCanvasCharacterAnimationPanelView，把图片生成参数、生成规范、图标素材生成、快速编辑图片和角色动画面板从 Composer 内联 JSX 抽出；Composer 降至 707 行，继续保留生成模式分流、角色引用菜单 portal 和修改图片弹窗编排。新增子视图单测覆盖参数切换、规范表单、图标规范菜单 / 描述列表、快速编辑和角色动画状态。验证命令：npm run test -- src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx 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:10007/editor/canvas 未登录显示 账号入口，关闭后点击 生成工具 能看到 Image Generator、生成图片 对话框和 AI画布工具栏；点击 生成角色形象 能看到 生成角色形象 面板和 角色形象规范；点击 生成规范 后选择 角色形象规范 能打开 生成规范 面板并显示 提交生成规范；点击 生成图标素材 能打开 生成图标素材 面板、图标规范操作和素材描述列表，控制台仅有未登录 refresh 401。
  • 2026-06-17 前端拆分第二十九执行批次：继续收口 ImageCanvasStageView，新增 ImageCanvasBottomToolbarView、ImageCanvasPanelDockView、ImageCanvasContextMenusView 和 ImageCanvasSelectedLayerToolbarView，把底部 AI 工具栏、左下缩放 / 背景 / 小地图控制坞、画布 / 图片右键菜单和选中图片浮动工具栏从 StageView 内联 JSX 抽出；StageView 降至 538 行，继续保留画布世界、图层和生成占位渲染，所有 pointer / 多选 / 拖拽 / 生成状态机仍在既有 hook 中。新增子视图单测覆盖工具切换、缩放 / 背景 / 小地图控制、右键菜单命令和选中图片工具栏接线。验证命令：npm run test -- src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx 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:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录弹出 账号入口，关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；点击 生成工具 后 Image Generator、生成图片 对话框、画布面板入口 和 AI画布工具栏 均可见；点击 生成规范 后页面级 生成规范类型 菜单可见。控制台仅有预期的未登录 /api/auth/refresh 401，截图留存于 output/playwright/editor-stage-view-split-smoke-20260617.png。
  • 2026-06-17 前端拆分第三十执行批次：新增 ImageCanvasEditorShellView，把编辑器最外层 section、隐藏上传 input、素材拖拽预览、侧栏 / 顶栏 / 舞台 / 元数据弹窗组合从 ImageCanvasEditorView 抽成页面壳；主视图继续保留所有 hook 状态编排、上传 / 生成 / 拖拽 / 项目持久化和跨模块副作用，只把已经组装好的 sidebarProps、topbarProps、stageProps 和 metadataProps 交给 shell 渲染。新增 shell 单测覆盖上传 input、拖拽预览坐标兜底、顶栏 / 舞台 / 工具栏 / 元数据弹窗装配；主视图降至 777 行。验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx 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:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口，关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；返回项目页面、画布面板入口 和 AI画布工具栏 均可见；点击 生成工具 后 Image Generator 和 生成图片 对话框可见；点击 生成规范 后页面级 生成规范类型 菜单可见。控制台仅有预期的未登录 /api/auth/refresh 401，截图留存于 output/playwright/editor-shell-split-smoke-20260617.png。
  • 2026-06-17 前端拆分第三十一执行批次：继续收口 ImageCanvasSidebarView，新增 ImageCanvasAssetLibraryPanelView 和 ImageCanvasLayerPanelView，把素材库文件夹 / 拖拽上传 / 素材选择模式与图层列表 / 右键入口拆成两个完整 surface；侧栏外壳只保留标题、计数和当前 tab 分流。同步把 ImageCanvasEditorView.test.tsx 中纯侧栏输入框 chrome 断言迁到 ImageCanvasSidebarView.test.tsx，保留主视图重命名、建文件夹、上传、删除、API 调用和画布集成断言。验证命令：npm run test -- src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx、npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "switches the shared sidebar between assets and layers"、npm run typecheck、npm run check:encoding、git diff --check。
  • 2026-06-17 前端拆分第三十二执行批次：继续收口 ImageCanvasGenerationComposerView，新增 ImageCanvasBasicGenerationComposerView、ImageCanvasCharacterGenerationComposerView 和 ImageCanvasEditGenerationModalView，把普通生图跟随框、角色形象生成面板和修改图片弹窗从 Composer 内联 JSX 中抽出；Composer 降至 312 行，只保留生成模式分流、portal 菜单和各面板装配。新增三组子视图单测覆盖普通生图 prompt / 参考图 / 提交 / 关闭、角色参考图菜单 / 状态恢复 / 提交、修改图片弹窗提示词 / 失败 / 关闭。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx 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:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口 且控制台仅有预期 /api/auth/refresh 401；关闭登录后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏显示 图层，AI画布工具栏 仍可见；点击 生成工具 后 Image Generator、生成图片 对话框和底部工具栏均可见。
  • 2026-06-17 前端拆分第三十三执行批次：继续收口 ImageCanvasAssetLibraryPanelView，新增 ImageCanvasAssetFolderSectionView 和 ImageCanvasAssetRowView，把素材库文件夹头 / 文件夹 drop 区域、素材卡片 / 上传进度 / 重命名 / 选择模式从素材库父面板中拆成两个完整 surface；素材库父面板降至 279 行，只保留素材列表容器、新建文件夹表单、批量操作栏和框选遮罩。新增素材行单测覆盖普通点击加入画布、选择模式改为选中、重命名 Enter 提交和上传中禁用 / 进度显示。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx 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:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口 且控制台仅有预期 /api/auth/refresh 401；默认素材栏显示 项目素材 文件夹、上传入口和底部 AI画布工具栏；关闭登录后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏显示 图层；点击 生成工具 后 Image Generator、生成图片 对话框和底部工具栏均可见。
  • 2026-06-17 前端拆分第三十四执行批次：继续收口 ImageCanvasStageView，新增 ImageCanvasWorldView，把画布世界表面、吸附参考线、可见图层排序 / 悬浮 / 选中 / 锁定 / 生成态、元数据角标、框选矩形、生成占位框和浮动生成状态从 StageView 内联 JSX 中抽出；StageView 降至 324 行，继续保留 viewport 宿主、drop overlay、左下 dock、底部工具栏、右键菜单和选中图片工具栏装配。新增 world view 单测覆盖隐藏图层过滤、悬浮尺寸、生成态、元数据按钮、吸附线、框选矩形和生成占位框事件。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasWorldView.test.tsx、npm run test -- src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx 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:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none，AI画布工具栏 保持可见；打开图层 切换后侧栏显示 图层；点击 生成工具 后 Image Generator、生成图片 对话框和底部工具栏均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第三十五执行批次：继续收口 useImageCanvasGenerationWorkflow，新增 ImageCanvasGenerationSubmissionModel，把普通生图、修改图片、规范生成和角色形象生成的请求 payload、标准化 prompt、结果图层标题 / assetKind 和 generationInputs 快照构建从 workflow hook 中抽成纯模型；workflow hook 保留对话状态、真实 API 调用、图片引用解析、结果落图、选中和 fit 副作用，避免拆散生成生命周期。新增模型单测覆盖普通生图、修改图、带参考图的规范生成、带规范 / 常规参考图的角色生成和缺失源图异常；useImageCanvasGenerationWorkflow 从 1167 行降至 1104 行。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx、npm run test -- src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx 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:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第三十六执行批次：继续收口 useImageCanvasUploadWorkflow，新增 ImageCanvasUploadModel，把上传目标文件夹解析、上传中素材占位卡、上传到画布的临时图层、无效 drop 坐标兜底和图片真实尺寸回填坐标计算从 hook 中抽成纯模型；upload workflow hook 保留登录恢复、文件读取、真实素材创建 API、上传进度状态和生成面板参考图写入副作用。新增模型单测覆盖文件夹兜底、占位素材、画布落点、非法坐标兜底和真实尺寸修正；useImageCanvasUploadWorkflow 从 546 行降至 510 行。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx、npm run test -- src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；点击 生成工具 后 Image Generator、生成图片 对话框、上传到项目素材 入口和 AI画布工具栏 均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第三十七执行批次：继续收口 useImageCanvasAssetLibrary，新增 ImageCanvasAssetLibraryModel，把素材分组、可选择素材筛选、全选状态、素材 / 文件夹重命名、文件夹折叠、本地新建文件夹占位、持久化文件夹替换、本地删除素材、删除文件夹回默认文件夹、选择集合切换、批量删除和本地移动素材到文件夹从 hook 中抽成纯模型；asset library hook 继续保留加载账号素材库、后端 CRUD 调用、登录弹窗、DOM 框选和素材拖拽命中生命周期。新增模型单测覆盖分组 / 选择、重命名 / 折叠 / 本地文件夹、本地文件夹持久化替换、删除文件夹回默认文件夹、全选 / 批量删除和本地移动；useImageCanvasAssetLibrary 从 609 行降至 573 行。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/useImageCanvasAssetLibrary.test.tsx、npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏显示 图层，点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见；切回 打开素材 后侧栏显示 素材 且 上传到项目素材 入口可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第三十八执行批次：继续收口 useImageCanvasGenerationWorkflow，扩展 ImageCanvasGenerationSubmissionModel，把图标素材批量生成的规范校验 / 描述清洗 / 请求 payload / generationInputs，以及角色动画生成的 prompt 清洗 / objectKey 优先源图 / 尺寸 / 价格 / 模型参数从 workflow hook 中抽成纯模型；workflow hook 继续保留对话状态、真实 API 调用、生成结果落图、失败恢复和角色动画面板生命周期。新增模型单测覆盖图标缺少规范、图标空描述、图标描述 trim / 参考快照，以及角色动画 trim、objectKey 源图和价格计算；useImageCanvasGenerationWorkflow 从 1104 行降至 1075 行。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx、npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏显示 图层，点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见；点击 生成图标素材 后 Icon Generator 占位和 生成图标素材 面板可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第三十九执行批次：开始拆分 ImageCanvasEditorView.test.tsx 巨型集成测试，新增 ImageCanvasEditorView.test-utils 共享默认工程 / 素材库 mock、认证上下文、pointer / dataTransfer / deferred helper 和生命周期 setup；新增 ImageCanvasEditorAssetsIntegration.test.tsx，把素材库默认文件夹去重、文件夹折叠 / 新建 / 重命名 / 删除、素材重命名 / 拖拽移动、多文件上传、未登录续传、上传占位、401 登录、素材选择模式、删除素材同步清理画布图层、素材框选、画布 drop 上传和素材库拖入画布等集成用例从主测试文件迁出；ImageCanvasEditorView.test.tsx 从 4817 行降至 3741 行。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx、npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏显示 图层，点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第四十执行批次：继续拆分 ImageCanvasEditorView.test.tsx 巨型集成测试，新增 ImageCanvasEditorGenerationIntegration.test.tsx，把画布生图占位 / 生成提交、生成错误与未登录、规范生成、角色形象生成、图标素材生成、角色动画、快速编辑、生成图元数据和修改结果等生成相关集成用例从主测试文件迁出；ImageCanvasEditorView.test.tsx 从 3741 行降至 1419 行，主测试保留工程加载、导出、画布基础交互、右键菜单、侧栏、缩放、小地图、工具切换、吸附和历史。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx、npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏标题为 图层；点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第四十一执行批次：继续收口 useImageCanvasGenerationWorkflow，新增 ImageCanvasGenerationDialogModel，把普通生图 / 规范 / 角色形象 / 图标素材生成对话框草稿、修改图片 / 快速编辑 / 角色动画面板草稿、角色 / 图标参考选择、规范表单更新、图标描述更新、角色动画时长更新以及生成器失焦 / 关闭规则从 hook 中抽成纯模型；workflow hook 保留真实 API 调用、生成结果落画布、侧栏 / 工具 / 选中态副作用和错误回写。新增模型单测覆盖各类草稿、失败态清理、引用选择、描述限制、动画时长和 composer 可见性；useImageCanvasGenerationWorkflow.ts 从 1075 行降至 870 行。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏标题为 图层；点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第四十二执行批次：继续收口 useImageCanvasStageInteractions，新增 ImageCanvasStageInteractionModel，把 pointer button / client / id 归一化、画布框选初始状态、抓手平移拖拽状态、多选图层选择与图层拖拽初始状态、生成器 composer 随图层点击显隐、生成占位拖拽状态、小地图拖拽状态和拖拽阈值从 hook 中抽成纯模型；stage hook 保留 DOM 事件拦截、pointer capture / release、React 状态写入、拖拽移动执行和回调副作用。新增模型单测覆盖 pointer 兜底、中键识别、框选 / 平移状态、多选 toggle、组拖拽初始层快照、生成器 composer 规则、生成占位状态和小地图 click / drag 分流；useImageCanvasStageInteractions.ts 从 610 行降至 521 行。只读子代理复核结论：当前没有同一轮必须顺手拆的第二个明显大块，ImageCanvasEditorView.tsx 已主要是组合层，generation / asset / upload hooks 剩余复杂度多为异步编排或持久化副作用，后续应随具体需求再拆，避免过度碎片化。统一验证命令：npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasStageInteractions.test.tsx、npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；打开图层 切换后侧栏标题为 图层；点击 生成工具 后 Image Generator、生成图片 对话框和 AI画布工具栏 均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第四十三执行批次：继续收口 useImageCanvasGenerationWorkflow，新增 useImageCanvasGenerationSubmissionWorkflow，把普通生图 / 修改图 / 图标素材批量生成 / 快速编辑 / 角色动画的提交 API、提交中 / 失败 / 完成状态回写、生成结果落画布、选中图层、切换图层侧栏、适合视图和 last image model 记忆从入口 workflow 中抽成生成提交流水线 hook；原 workflow 保留生成入口、菜单开关、画布选取引用、表单字段更新、生成器关闭和删除图层后的状态清理，避免把 UI 选择态和提交态混在一起。新增 hook 单测覆盖 quick edit 成功 / 失败、edit 成功清理 modal、生成使用最新移动占位、icon 缺规范校验、icon 成功批量落图并记住模型、角色动画 completed / failed 状态机；同步修复新测试文件的 mock 隔离，避免 vi.clearAllMocks() 清空并行集成测试的调用记录；useImageCanvasGenerationWorkflow.ts 从 870 行降至 499 行。统一验证命令：npm run test -- src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx、npm run test -- src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx、npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx、npm run typecheck、npm run check:encoding、git diff --check；浏览器回归：http://127.0.0.1:10007/editor/canvas 临时 XDG_CONFIG_HOME 下 Chrome headless 打开成功，未登录显示 账号入口；关闭后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；点击 生成工具 后 Image Generator 占位、生成图片 对话框和 AI画布工具栏 均可见，控制台仅有预期的未登录 /api/auth/refresh 401。
  • 2026-06-17 前端拆分第四十四执行批次：继续收口 useImageCanvasAssetLibrary，扩展 ImageCanvasAssetLibraryModel，把素材文件夹坐标命中、素材拖拽目标文件夹置顶判断、素材框选起点 / 移动 / 反向拖拽矩形归一化、框选只命中 uploaded 素材和框选启动规则从 hook 中抽成纯几何模型；asset library hook 保留 DOM 查询、dataset 读取、pointer capture / release、React 状态写入、后端 CRUD 和登录弹窗副作用，避免把 DOM 与服务调用塞进模型。新增模型单测覆盖文件夹边界命中、列表外返回空、文件夹 header 视野外置顶、反向框选归一化、边缘相交命中、忽略 built-in / unknown 素材；只读子代理复核同意优先抽 Rect/Point + folder hit + pinned + marquee selection，不继续拆新 hook。验证命令：npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/useImageCanvasAssetLibrary.test.tsx、npm run test -- src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx。
  • 2026-06-17 前端拆分第四十四执行批次验证补充：统一编辑器回归命令 npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx 通过 33 个文件 / 219 个测试；npm run typecheck、npm run check:encoding、git diff --check 均通过。浏览器回归：http://127.0.0.1:10007/editor/canvas 使用 Playwright CLI headless 打开成功，未登录显示 账号入口；关闭登录后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；默认素材侧栏显示 素材 / 项目素材 / 上传到项目素材，切换 打开图层 后侧栏显示 图层，点击 生成工具 后 Image Generator 占位、生成图片 对话框和 AI画布工具栏 均可见；网络请求仅有预期未登录 /api/auth/refresh 401，其余 editor smoke 相关请求正常。
  • 2026-06-17 前端拆分第四十五执行批次：继续收口 useImageCanvasUploadWorkflow，扩展 ImageCanvasUploadModel，把生成参考图上传后的 dialog 状态转换从 hook 中抽成纯模型：统一创建上传参考图对象、将 failed 生成面板恢复为 idle、按 spec-reference / character-spec / character-reference / icon-spec 写入对应引用字段，并保持不匹配 dialog 不变；upload workflow hook 继续保留文件筛选、Data URL 读取、文件 input、未登录素材上传续传、真实素材创建 API、上传进度和画布落图副作用。新增模型单测覆盖参考图 fallback label、failed 状态清理、规范 / 角色 / 图标参考图写入和角色参考图追加；局部验证命令：npm run test -- src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx。
  • 2026-06-17 前端拆分第四十五执行批次验证补充：统一编辑器回归命令 npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx 通过 33 个文件 / 223 个测试；npm run typecheck、npm run check:encoding、git diff --check 均通过。浏览器回归：http://127.0.0.1:10007/editor/canvas 使用 Playwright CLI headless 打开成功，未登录显示 账号入口；关闭登录后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；默认素材侧栏显示 素材 / 项目素材 / 上传到项目素材，切换 打开图层 后侧栏显示 图层，点击 生成工具 后 Image Generator 占位、生成图片 对话框和 AI画布工具栏 均可见；网络请求仅有预期未登录 /api/auth/refresh 401，其余 editor smoke 相关请求正常。只读子代理复核生成提交链路后建议暂停继续硬拆，除非后续新增生成模式再考虑按“生成成功后的落图提交事务”抽内部 hook。
  • 2026-06-17 前端拆分第四十六执行批次：继续收口 useImageCanvasUploadWorkflow，扩展 ImageCanvasUploadModel，把素材上传生命周期中的文件夹展开、读取成功 / 失败、上传中、持久化资产替换、上传失败、图片尺寸回写和画布图层绑定持久化素材抽成纯模型；upload workflow hook 继续保留文件筛选、Data URL 读取、登录弹窗、真实素材创建 API、Image 尺寸读取、画布落图和 React setter 编排。新增模型单测覆盖上传占位卡各阶段状态、持久化后清理上传态、尺寸回写和图层绑定；局部验证命令：npm run test -- src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx。
  • 2026-06-17 前端拆分第四十六执行批次验证补充：统一编辑器回归命令 npm run test -- src/components/image-editor/ImageCanvasStageInteractionModel.test.ts src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts src/components/image-editor/ImageCanvasUploadModel.test.ts src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/image-editor/ImageCanvasSidebarView.test.tsx src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx src/components/image-editor/ImageCanvasEditorShellView.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx src/components/image-editor/ImageCanvasPanelDockView.test.tsx src/components/image-editor/ImageCanvasContextMenusView.test.tsx src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx src/components/image-editor/ImageCanvasGenerationImageOptionsView.test.tsx src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasGenerationSurface.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx 通过 33 个文件 / 228 个测试；npm run typecheck、npm run check:encoding、git diff --check 均通过。浏览器回归：http://127.0.0.1:10007/editor/canvas 使用系统 Chrome headless 打开成功，未登录显示 账号入口；默认素材侧栏显示 素材 / 项目素材；关闭登录后 画布背景设置 可打开，点击 暖灰 后 viewport 背景为 rgb(243, 240, 234) 且 background-image: none；切换 打开图层 后侧栏显示 图层；点击 生成工具 后 Image Generator 占位、生成表单控件和 AI画布工具栏 均可见；除预期未登录 /api/auth/refresh 401 外无额外 API 失败或控制台错误。
Reference in New Issue View Git Blame Copy Permalink