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:
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user