拆分图片画布素材入画布桥接

新增 useImageCanvasAssetCanvasBridge 承载素材加入画布和画布 drop 桥接

新增 hook 单测覆盖素材建层、pointer drop 和删除素材清理图层

精简 ImageCanvasEditorView 中的素材到画布胶水

更新图片画布拆分计划和 TRACKING 浏览器回归记录
This commit is contained in:
2026-06-17 13:14:36 +08:00
parent d0ad8402de
commit 015716945e
5 changed files with 480 additions and 75 deletions

View File

@@ -199,6 +199,14 @@
- 该模块用独立单测覆盖生成结果优先锚定、生成中 / 手动关闭隐藏输入框、icon 描述项宽度、图片工具栏 clamp、quick edit 和角色动画面板边界,以及画布生成 dialog 模式识别。
- 本阶段主视图从 1182 行降至 1133 行;下一步若继续拆分,可在该模型基础上抽更大的 `useImageCanvasStageController`,承接舞台派生状态、右键菜单和工具切换胶水。
## 第二十四阶段模块
- `useImageCanvasAssetCanvasBridge.ts`
- 承载素材库与画布之间的桥接工作流:删除素材时清理关联画布图层、素材加入画布创建图层、素材 pointer 拖入画布 / 文件夹、画布区域 drag over / leave / drop 分流,以及拖拽文件上传到画布的参数组装。
- 主视图继续掌握素材库事实、上传文件读取、工程资源持久化、历史捕获触发时机和实际 API 副作用;该 hook 只负责把已有素材 / 文件 drop 转成画布动作,不反向读取路由、登录态或项目数据。
- 该 hook 用独立单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态;原有 pointer drag 和 canvas drop hook 单测继续保留,主视图 DOM 测试继续覆盖真实素材库拖入画布路径。
- 本阶段主视图从 1133 行降至 1086 行;下一步可继续抽 `useImageCanvasStageController` 或顶栏视图,但应优先选择能收敛舞台派生状态和右键菜单胶水的深边界。
## 后续阶段
- 后续可继续选择更高内聚的交互 workflow 或持久化边界,不再把生成链路继续拆成浅层 wrapper。
@@ -206,7 +214,7 @@
## 验证计划
- `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/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`
- `npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx 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/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`