拆分图片画布编辑器前端模型

抽出编辑器共享类型、画布模型、生成模型和导出模型

补充模型层单测覆盖素材、吸附、生成快照和导出规则

新增前端拆分计划并更新 TRACKING 浏览器回归记录

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

@@ -0,0 +1,49 @@
+# 图片画布编辑器前端拆分计划
+
+日期：2026-06-17
+
+## 背景
+
+`src/components/image-editor/ImageCanvasEditorView.tsx` 已承载图片画布的素材库、图层、生成对象、导出、右键菜单、拖拽、缩放、吸附、小地图和登录恢复等能力。文件体量超过八千行，阅读一个局部交互时需要先穿过大量无关类型、常量和纯函数，后续继续补齐 Lovart 式画布能力会持续放大维护成本。
+
+本轮拆分目标不是把界面拆成很多浅模块，而是先把稳定模型和纯逻辑放到有深度的模块中。主视图继续保留 React 状态编排和 JSX 工作面，避免第一轮把复杂交互拆成大量 props 透传。
+
+## 拆分原则
+
+- 类型、常量和纯函数优先拆出，React 状态闭环暂不拆散。
+- 模块接口要承载真实规则，不建立只转发一两个属性的浅模块。
+- 画布坐标、素材快照、生成输入快照和导出元数据分别放在相近规则的模块内，提升局部修改能力。
+- `ImageCanvasEditorView.tsx` 不再反向作为模型模块的依赖；依赖方向固定为 `View -> model/types/services`。
+- 任何拆分必须保持现有交互、持久化和测试断言不变。
+
+## 第一阶段模块
+
+- `ImageCanvasEditorTypes.ts`
+  - 承载编辑器前端共享类型：素材、图层、视口、工具、生成对象、历史快照、剪贴板、右键菜单、拖拽状态等。
+  - 只暴露类型，不承载运行时逻辑。
+
+- `ImageCanvasEditorModel.ts`
+  - 承载画布基础模型：尺寸、缩放、背景色、素材默认文件夹、快照序列化 / 水合、素材库快照映射、吸附、右键菜单定位、DataTransfer 工具和通用数值格式化。
+  - 保留“图片显示尺寸跟随 Resolution”“只保留一个默认素材文件夹”“右键菜单不滚动而是限制到视口内”等规则。
+
+- `ImageCanvasGenerationModel.ts`
+  - 承载生成相关模型：生成占位尺寸、默认模型、规范表单默认值、角色动画选项、生成输入快照、规范 prompt 构建、生成对象识别和错误文案。
+  - 保留角色动画优先用 `objectKey` 的体积保护规则。
+
+- `ImageCanvasExportModel.ts`
+  - 承载画布素材导出的底层规则：文件名清理、日期格式、图片去重 key、Data URL 转 Blob、Blob 读取和图层导出元数据。
+  - ZIP 组包和下载触发仍留在主视图，作为 UI 状态编排的一部分。
+
+## 后续阶段
+
+- `ImageCanvasSidebarView`：素材 / 图层共用侧栏，等模型层稳定后再拆。
+- `ImageCanvasStageView`：画布 viewport、图层渲染、右键菜单和生成占位框，等交互回归覆盖更强后再拆。
+- `ImageCanvasGenerationDock`：底部 AI 工具栏和生成面板族，等生成对象状态机进一步收口后再拆。
+
+## 验证计划
+
+- `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx`
+- `npm run typecheck`
+- `npm run check:encoding`
+- `git diff --check`
+- 浏览器回归 `/editor/canvas`：确认登录弹窗、素材上传、背景设置面板、底部工具栏和画布基础渲染仍正常。