📦 Batch Processing (批量处理)

[chen201724]

概述

支持一次性上传多张图片，批量应用相同的像素化参数并导出。

背景

当前只能逐张处理图片，对于需要统一风格处理多张图片的用户（如游戏素材、社交媒体头像批量生成）效率较低。

任务清单

核心功能

• 支持多文件选择（<input multiple>）和批量拖拽上传
• 文件队列列表：显示文件名、缩略图、处理状态
• 批量应用当前参数（pixelSize、colorMode、shape、palette）到所有图片
• 进度条显示整体处理进度
• 批量导出：打包为 ZIP 下载

UX

• 队列中可单独预览每张图片的处理效果
• 支持从队列中移除单张图片
• 处理完成后 toast 提示

技术考量

• 使用 Web Worker 或 requestIdleCallback 避免 UI 阻塞
• ZIP 打包使用 fflate（轻量、纯 JS）
• 内存管理：处理完一张释放一张，避免大量图片撑爆内存

技术方案

• 新增 BatchProcessor 组件
• 处理流程：文件队列 → 逐张 canvas 处理 → 收集 Blob → fflate 打包 → 下载
• 建议限制单次最多 50 张，单张最大 10MB

验收标准

• 可以一次上传 10+ 张图片并批量处理
• 导出的 ZIP 中每张图片命名正确（原文件名 + _mosaic 后缀）
• 处理过程中 UI 不卡顿