refactor: 重构纹理图集工具,实现浏览器端实时处理

将合图处理从服务端迁移到浏览器端,使用 Web Worker 实现高性能打包算法,新增三栏布局界面和精灵动画预览功能

- 新增 atlasStore 状态管理,实现文件、配置、结果的统一管理
- 新增 atlas-packer 打包算法库(MaxRects/Shelf),支持浏览器端快速合图
- 新增 atlas-worker Web Worker,实现异步打包处理避免阻塞 UI
- 新增三栏布局组件:FileListPanel、CanvasPreview、AtlasConfigPanel
- 新增 AnimationPreviewDialog 支持精灵动画帧预览和帧率控制
- 优化所有工具页面的响应式布局和交互体验

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-26 22:05:25 +08:00
parent 663917f663
commit 140608845a
27 changed files with 4034 additions and 499 deletions

View File

@@ -75,13 +75,31 @@ async function uploadFile(file: File): Promise<{ fileId: string } | null> {
return { fileId: data.fileId };
}
interface ProcessResult {
success: boolean;
data?: {
fileUrl: string;
filename: string;
metadata: {
originalSize: number;
compressedSize: number;
compressionRatio: number;
format: string;
quality?: number;
width?: number;
height?: number;
};
};
error?: string;
}
/**
* Process image compression
*/
async function processImageCompression(
fileId: string,
config: ImageCompressConfig
): Promise<{ success: boolean; data?: any; error?: string }> {
): Promise<ProcessResult> {
const response = await fetch("/api/process/image-compress", {
method: "POST",
headers: {
@@ -131,7 +149,7 @@ export default function ImageCompressPage() {
[addFile]
);
const handleConfigChange = (id: string, value: any) => {
const handleConfigChange = (id: string, value: string | number | boolean | undefined) => {
setConfig((prev) => ({ ...prev, [id]: value }));
};
@@ -299,10 +317,7 @@ export default function ImageCompressPage() {
<ConfigPanel
title={getT("config.imageCompression.title")}
description={getT("config.imageCompression.description")}
options={configOptions.map((opt) => ({
...opt,
value: config[opt.id as keyof ImageCompressConfig],
}))}
options={configOptions}
onChange={handleConfigChange}
onReset={handleResetConfig}
/>