src/
├── utils/pixi/ # 渲染层
│ ├── core/ # 应用实例、视口
│ ├── layers/ # 各类图层
│ ├── managers/ # 历史、网格、滤镜
│ ├── tools/ # 画笔、形状、选区等
│ └── types/
├── utils/workers/ # Web Worker
├── utils/export/ # 导出管线
├── store/ # Pinia 状态
├── composables/ # 组合式逻辑
└── views/ # 页面

• 主要原则： 职责正交    真实来源唯一    渲染层与状态层双向解耦
• 数据流闭环： Store负责真相   渲染负责表现 
• ACTION → Store → Watch → 渲染同步 → 自动保存→ Undo / Redo → Command 回调回 Store…怎么说呢，等等循环保证无竞态。
• *避免双向同步死循环* — 用 `

---

二、PixiJS 渲染层架构 —— 性能 & 层次清晰化

• `PixiApp` 优先尝试 WebGPU；失败后 fallback 到 WebGL。可配置 `preference` 与 `didFallback` 给 UI 提示，而非暴露细节。
• `high DPI` 适配 — `resolution: window.devicePixelRatio`,`autoDensity:true` 保持物理像素放大但 CSS 尺寸不变；解决手机模糊问题，
• `antialias:false` — 硬边保持像素感；自动检测 GPU device lost 并给出友好提示。

---

双坐标系与图层分离 —— 避免跨容器事件冲突

世界坐标系 & 屏幕坐标系两套程序
#顺序 zIndex 职责	#Layer 功能
#0 BackgroundLayer 纯色 / 棋盘格 / 渐变背景	#1 PixelLayer 主要像素绘制层
#20 ReferenceLayer 参考图片叠加	#30 GridLayer 网格线
#40 SelectionLayer 选区边框 + 行军蚁 + 拖拽预览	#50 CropLayer 裁剪框 + 手柄 + 九宫格
#屏幕坐标系 图层	CoordinateLayer 类 PS 标尺 固定在屏幕边缘 X/Y 坐标标签 GuideLineLayer 从标尺拖出的水平/垂直辅助线 GuideLineOverlayContainer 拖拽辅助线时的坐标 tooltip 最顶层	PixelLayer —— 混合像素渲染策略 & 省显存技巧 纯色像素： Graphics.rect.fill 一共用一个 Graphics 对象批量绘制。实现极低 drawcall。Pixi v8 内部会把相同 fill 合并为单个 mesh。优点： 显存占用低，CPU 布局快；适合空白或单色块区域， 纹理像素： 每个 pixel 创建独立 Sprite 挂到同一 container。key = “layerIndex:x,y”。通过 TextureCache 重用底层 texture 防止重复上传。优点： 支持贴不同 texture；兼容复杂图案与渐变，通过 cache 降低显存占用。