拆分图片画布上传工作流

新增图片文件读取模型和上传工作流 hook

把上传目标分发、登录续传、占位卡片和画布建层从主视图抽出

补充上传工作流单测并更新拆分计划和进度记录

docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md

@@ -99,14 +99,25 @@
   - 主视图继续保留上传文件读取、上传占位卡片进度、拖到画布坐标、创建画布图层、工程资源持久化和画布图层清理；素材删除通过 `onDeleteAssets` 回调通知主视图清理关联图层。
   - 该 hook 有独立单测覆盖素材库加载归一化、401 登录、新建文件夹临时 id 替换、素材移动、删除回调和多选删除，避免后续整理侧栏 JSX 时丢失素材库能力。
 
+## 第十一阶段模块
+
+- `ImageCanvasFileModel.ts`
+  - 承载图片文件判定和 `FileReader` Data URL 读取工具，供素材上传、生成参考图上传和后续导入能力复用。
+  - 该模块不依赖素材库状态，避免把通用文件读取继续挂在素材库 hook 上。
+
+- `useImageCanvasUploadWorkflow.ts`
+  - 承载图片画布上传工作流：隐藏文件 input、上传目标分发、未登录拦截和登录后续传、上传占位卡片、文件读取、素材落库、拖到画布建层、选中新图层、打开图层侧栏，以及角色 / 图标生成参考图上传。
+  - 主视图继续负责画布 drop 外层事件判断、素材库已有素材加入画布、项目资源持久化 hook 注入和画布历史捕获，避免上传 hook 反向成为画布全局状态真相。
+  - 该 hook 用独立单测覆盖登录续传、上传占位 / 成功回写、上传到画布建层、鉴权失败和生成参考图分发，主视图保留 DOM 级 smoke 覆盖侧栏上传、画布 drop 上传和文件夹定向上传。
+
 ## 后续阶段
 
 - 生成状态机模型：等生成对象归档、占位框拖拽、生成完成回写、失败恢复和 undo / redo 规则进一步稳定后，再从主视图抽出深层状态模型。
-- 上传状态模型：上传占位卡片、读取图片、登录后续传、素材落库和拖到画布创建图层仍在主视图与侧栏之间协作，后续需要等上传错误恢复规则进一步稳定后再收口。
+- 生成状态机模型之后，可继续评估快速编辑 / 角色动画结果回写是否已经稳定到足以形成深模块。
 
 ## 验证计划
 
-- `npm run test -- src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`
+- `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`