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>

src/app/(dashboard)/tools/audio-compress/page.tsx

@@ -110,7 +110,7 @@ export default function AudioCompressPage() {
     [addFile]
   );
 
-  const handleConfigChange = (id: string, value: any) => {
+  const handleConfigChange = (id: string, value: string | number | boolean | undefined) => {
     setConfig((prev) => ({ ...prev, [id]: value }));
   };
 

src/app/(dashboard)/tools/image-compress/page.tsx

@@ -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}
             />

src/app/(dashboard)/tools/texture-atlas/page.tsx

@@ -1,487 +1,103 @@
 "use client";
 
-import { useState, useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { motion } from "framer-motion";
-import { Layers as LayersIcon, Box, Download, Archive } from "lucide-react";
-import { FileUploader } from "@/components/tools/FileUploader";
-import { ProgressBar } from "@/components/tools/ProgressBar";
-import { ConfigPanel, type ConfigOption } from "@/components/tools/ConfigPanel";
-import { Button } from "@/components/ui/button";
-import { useUploadStore } from "@/store/uploadStore";
-import { generateId } from "@/lib/utils";
-import { useTranslation, getServerTranslations } from "@/lib/i18n";
-import type { UploadedFile, TextureAtlasConfig } from "@/types";
-
-const imageAccept = {
-  "image/*": [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp"],
-};
-
-const defaultConfig: TextureAtlasConfig = {
-  maxWidth: 1024,
-  maxHeight: 1024,
-  padding: 2,
-  allowRotation: false,
-  pot: true,
-  format: "png",
-  quality: 80,
-  outputFormat: "cocos2d",
-  algorithm: "MaxRects",
-};
-
-function useConfigOptions(config: TextureAtlasConfig, getT: (key: string) => string): ConfigOption[] {
-  return [
-    {
-      id: "maxWidth",
-      type: "slider",
-      label: getT("config.textureAtlas.maxWidth"),
-      description: getT("config.textureAtlas.maxWidthDescription"),
-      value: config.maxWidth,
-      min: 256,
-      max: 4096,
-      step: 256,
-      suffix: "px",
-      icon: <Box className="h-4 w-4" />,
-    },
-    {
-      id: "maxHeight",
-      type: "slider",
-      label: getT("config.textureAtlas.maxHeight"),
-      description: getT("config.textureAtlas.maxHeightDescription"),
-      value: config.maxHeight,
-      min: 256,
-      max: 4096,
-      step: 256,
-      suffix: "px",
-      icon: <Box className="h-4 w-4" />,
-    },
-    {
-      id: "padding",
-      type: "slider",
-      label: getT("config.textureAtlas.padding"),
-      description: getT("config.textureAtlas.paddingDescription"),
-      value: config.padding,
-      min: 0,
-      max: 16,
-      step: 1,
-      suffix: "px",
-    },
-    {
-      id: "allowRotation",
-      type: "select",
-      label: getT("config.textureAtlas.allowRotation"),
-      description: getT("config.textureAtlas.allowRotationDescription"),
-      value: config.allowRotation,
-      options: [
-        { label: getT("common.no"), value: false },
-        { label: getT("common.yes"), value: true },
-      ],
-    },
-    {
-      id: "pot",
-      type: "select",
-      label: getT("config.textureAtlas.pot"),
-      description: getT("config.textureAtlas.potDescription"),
-      value: config.pot,
-      options: [
-        { label: getT("common.no"), value: false },
-        { label: getT("common.yes"), value: true },
-      ],
-    },
-    {
-      id: "format",
-      type: "select",
-      label: getT("config.textureAtlas.format"),
-      description: getT("config.textureAtlas.formatDescription"),
-      value: config.format,
-      options: [
-        { label: getT("config.textureAtlas.formatPng"), value: "png" },
-        { label: getT("config.textureAtlas.formatWebp"), value: "webp" },
-      ],
-    },
-    {
-      id: "quality",
-      type: "slider",
-      label: getT("config.textureAtlas.quality"),
-      description: getT("config.textureAtlas.qualityDescription"),
-      value: config.quality,
-      min: 1,
-      max: 100,
-      step: 1,
-      suffix: "%",
-    },
-    {
-      id: "outputFormat",
-      type: "select",
-      label: getT("config.textureAtlas.outputFormat"),
-      description: getT("config.textureAtlas.outputFormatDescription"),
-      value: config.outputFormat,
-      options: [
-        { label: getT("config.textureAtlas.outputCocosCreator"), value: "cocos-creator" },
-        { label: getT("config.textureAtlas.outputCocos2d"), value: "cocos2d" },
-        { label: getT("config.textureAtlas.outputGeneric"), value: "generic-json" },
-      ],
-    },
-    {
-      id: "algorithm",
-      type: "select",
-      label: getT("config.textureAtlas.algorithm"),
-      description: getT("config.textureAtlas.algorithmDescription"),
-      value: config.algorithm,
-      options: [
-        { label: getT("config.textureAtlas.algorithmMaxRects"), value: "MaxRects" },
-        { label: getT("config.textureAtlas.algorithmShelf"), value: "Shelf" },
-      ],
-    },
-  ];
-}
-
-/**
- * Upload a file to the server
- */
-async function uploadFile(file: File): Promise<{ fileId: string } | null> {
-  const formData = new FormData();
-  formData.append("file", file);
-
-  const response = await fetch("/api/upload", {
-    method: "POST",
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.error || "Upload failed");
-  }
-
-  const data = await response.json();
-  return { fileId: data.fileId };
-}
-
-/**
- * Process texture atlas creation
- */
-async function processTextureAtlas(
-  fileIds: string[],
-  filenames: string[],
-  config: TextureAtlasConfig
-): Promise<{ success: boolean; data?: any; error?: string }> {
-  const response = await fetch("/api/process/texture-atlas", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ fileIds, filenames, config }),
-  });
-
-  const data = await response.json();
-
-  if (!response.ok) {
-    return { success: false, error: data.error || "Processing failed" };
-  }
-
-  return { success: true, data };
-}
-
-interface AtlasResult {
-  id: string;
-  imageUrl: string;
-  metadataUrl: string;
-  zipUrl: string;
-  imageFilename: string;
-  metadataFilename: string;
-  zipFilename: string;
-  metadata: {
-    width: number;
-    height: number;
-    format: string;
-    frameCount: number;
-    outputFormat: string;
-  };
-  createdAt: Date;
-}
+import { Layers as LayersIcon } from "lucide-react";
+import { 
+  FileListPanel, 
+  CanvasPreview, 
+  AtlasConfigPanel, 
+  AnimationPreviewDialog 
+} from "@/components/tools/atlas";
+import { useAtlasStore } from "@/store/atlasStore";
+import { useAtlasWorker } from "@/hooks/useAtlasWorker";
+import { useSafeTranslation } from "@/lib/i18n";
 
 export default function TextureAtlasPage() {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  const { t } = useTranslation();
+  const { t, mounted } = useSafeTranslation();
+  
+  const { sprites, config } = useAtlasStore();
+  const { pack } = useAtlasWorker();
 
-  const getT = (key: string, params?: Record<string, string | number>) => {
-    if (!mounted) return getServerTranslations("en").t(key, params);
-    return t(key, params);
+  // Auto-pack when sprites or config changes (with debounce)
+  useEffect(() => {
+    if (sprites.length === 0) return;
+
+    const timer = setTimeout(() => {
+      pack();
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [sprites, config, pack]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      // Don't clear sprites on unmount - keep state for when user returns
+    };
+  }, []);
+
+  const getT = (key: string) => {
+    if (!mounted) return key.split(".").pop() || key;
+    return t(key);
   };
 
-  const { files, addFile, removeFile, clearFiles, processingStatus, setProcessingStatus } =
-    useUploadStore();
-
-  const [config, setConfig] = useState<TextureAtlasConfig>(defaultConfig);
-  const [atlasResult, setAtlasResult] = useState<AtlasResult | null>(null);
-
-  const handleFilesDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      const newFiles: UploadedFile[] = acceptedFiles.map((file) => ({
-        id: generateId(),
-        file,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        uploadedAt: new Date(),
-      }));
-
-      newFiles.forEach((file) => addFile(file));
-    },
-    [addFile]
-  );
-
-  const handleConfigChange = (id: string, value: any) => {
-    setConfig((prev) => ({ ...prev, [id]: value }));
-  };
-
-  const handleResetConfig = () => {
-    setConfig(defaultConfig);
-  };
-
-  const handleProcess = async () => {
-    if (files.length === 0) return;
-
-    setProcessingStatus({
-      status: "uploading",
-      progress: 0,
-      message: getT("processing.uploadingSprites"),
-    });
-
-    const fileIds: string[] = [];
-    const filenames: string[] = [];
-    const errors: string[] = [];
-
-    try {
-      // Upload all files
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i];
-
-        const uploadProgress = Math.round(((i + 0.5) / files.length) * 50);
-        setProcessingStatus({
-          status: "uploading",
-          progress: uploadProgress,
-          message: getT("processing.uploadProgress", { progress: uploadProgress }),
-        });
-
-        try {
-          const uploadResult = await uploadFile(file.file);
-          if (!uploadResult) {
-            throw new Error("Upload failed");
-          }
-          fileIds.push(uploadResult.fileId);
-          filenames.push(file.name);
-        } catch (error) {
-          errors.push(
-            `${file.name}: ${error instanceof Error ? error.message : "Upload failed"}`
-          );
-        }
-      }
-
-      if (fileIds.length === 0) {
-        throw new Error("No files were successfully uploaded");
-      }
-
-      // Create atlas
-      setProcessingStatus({
-        status: "processing",
-        progress: 75,
-        message: getT("processing.creatingAtlas"),
-      });
-
-      const result = await processTextureAtlas(fileIds, filenames, config);
-
-      if (result.success && result.data) {
-        setAtlasResult({
-          id: generateId(),
-          imageUrl: result.data.imageUrl,
-          metadataUrl: result.data.metadataUrl,
-          zipUrl: result.data.zipUrl,
-          imageFilename: result.data.imageFilename,
-          metadataFilename: result.data.metadataFilename,
-          zipFilename: result.data.zipFilename,
-          metadata: result.data.metadata,
-          createdAt: new Date(),
-        });
-
-        clearFiles();
-
-        setProcessingStatus({
-          status: "completed",
-          progress: 100,
-          message: getT("processing.atlasComplete"),
-        });
-      } else {
-        throw new Error(result.error || "Failed to create texture atlas");
-      }
-    } catch (error) {
-      setProcessingStatus({
-        status: "failed",
-        progress: 0,
-        message: getT("processing.processingFailed"),
-        error: error instanceof Error ? error.message : getT("processing.unknownError"),
-      });
-    }
-  };
-
-  const handleDownload = (url: string, filename: string) => {
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  const canProcess =
-    files.length > 0 && processingStatus.status !== "processing" && files.length <= 500;
-  const configOptions = useConfigOptions(config, getT);
-
   return (
-    <div className="p-6">
-      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
-        <div className="mb-8">
-          <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-              <LayersIcon className="h-6 w-6 text-primary" />
-            </div>
-            <div>
-              <h1 className="text-3xl font-bold">{getT("tools.textureAtlas.title")}</h1>
-              <p className="text-muted-foreground">
-                {getT("tools.textureAtlas.description")}
-              </p>
-            </div>
+    <div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden">
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="shrink-0 border-b border-border/40 bg-background/80 backdrop-blur-sm"
+      >
+        <div className="flex items-center gap-3 px-5 py-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10">
+            <LayersIcon className="h-5 w-5 text-primary" />
           </div>
-        </div>
-
-        <div className="grid gap-6 lg:grid-cols-2">
-          <div className="space-y-6">
-            <FileUploader
-              files={files}
-              onFilesDrop={handleFilesDrop}
-              onRemoveFile={removeFile}
-              accept={imageAccept}
-              maxSize={10 * 1024 * 1024} // 10MB per file
-              maxFiles={500}
-              disabled={processingStatus.status === "processing"}
-            />
-
-            <ConfigPanel
-              title={getT("config.textureAtlas.title")}
-              description={getT("config.textureAtlas.description")}
-              options={configOptions.map((opt) => ({
-                ...opt,
-                value: config[opt.id as keyof TextureAtlasConfig],
-              }))}
-              onChange={handleConfigChange}
-              onReset={handleResetConfig}
-            />
-
-            {canProcess && (
-              <Button onClick={handleProcess} size="lg" className="w-full">
-                <LayersIcon className="mr-2 h-4 w-4" />
-                {getT("tools.textureAtlas.createAtlas")}
-              </Button>
-            )}
-          </div>
-
-          <div className="space-y-6">
-            {processingStatus.status !== "idle" && (
-              <ProgressBar progress={processingStatus} />
-            )}
-
-            {atlasResult && (
-              <div className="rounded-lg border border-border/40 bg-card/50 p-6">
-                <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold">
-                  <Download className="h-5 w-5 text-primary" />
-                  {getT("results.processingComplete")}
-                </h3>
-
-                <div className="mb-4 rounded-lg bg-background p-4">
-                  <img
-                    src={atlasResult.imageUrl}
-                    alt="Texture Atlas"
-                    className="h-auto w-full rounded border border-border/40"
-                  />
-                </div>
-
-                <div className="mb-4 grid grid-cols-2 gap-4 text-sm">
-                  <div>
-                    <span className="text-muted-foreground">{getT("tools.textureAtlas.dimensions")}:</span>
-                    <p className="font-medium">
-                      {atlasResult.metadata.width} x {atlasResult.metadata.height}
-                    </p>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">{getT("tools.textureAtlas.sprites")}:</span>
-                    <p className="font-medium">{atlasResult.metadata.frameCount}</p>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">{getT("tools.textureAtlas.imageFormat")}:</span>
-                    <p className="font-medium capitalize">{atlasResult.metadata.format}</p>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">{getT("tools.textureAtlas.dataFormat")}:</span>
-                    <p className="font-medium capitalize">
-                      {atlasResult.metadata.outputFormat === "cocos-creator"
-                        ? "Cocos Creator JSON"
-                        : atlasResult.metadata.outputFormat === "cocos2d"
-                          ? "Cocos2d plist"
-                          : "Generic JSON"}
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex flex-col gap-3">
-                  <Button
-                    onClick={() =>
-                      handleDownload(atlasResult.zipUrl, atlasResult.zipFilename)
-                    }
-                    size="lg"
-                    className="w-full"
-                  >
-                    <Archive className="mr-2 h-4 w-4" />
-                    {getT("tools.textureAtlas.downloadAll")}
-                  </Button>
-                  <div className="flex gap-3">
-                    <Button
-                      onClick={() =>
-                        handleDownload(atlasResult.imageUrl, atlasResult.imageFilename)
-                      }
-                      variant="outline"
-                      className="flex-1"
-                    >
-                      <Download className="mr-2 h-4 w-4" />
-                      {getT("tools.textureAtlas.downloadImage")}
-                    </Button>
-                    <Button
-                      onClick={() =>
-                        handleDownload(atlasResult.metadataUrl, atlasResult.metadataFilename)
-                      }
-                      variant="outline"
-                      className="flex-1"
-                    >
-                      <Download className="mr-2 h-4 w-4" />
-                      {getT("tools.textureAtlas.downloadData")}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <div className="rounded-lg border border-border/40 bg-card/50 p-6">
-              <h3 className="mb-3 font-semibold">{getT("tools.textureAtlas.features")}</h3>
-              <ul className="space-y-2 text-sm text-muted-foreground">
-                {(getT("tools.textureAtlas.featureList") as unknown as string[]).map(
-                  (feature, index) => (
-                    <li key={index}>• {feature}</li>
-                  )
-                )}
-              </ul>
-            </div>
+          <div>
+            <h1 className="text-lg font-semibold">{getT("tools.textureAtlas.title")}</h1>
+            <p className="text-xs text-muted-foreground">
+              {getT("tools.textureAtlas.description")}
+            </p>
           </div>
         </div>
       </motion.div>
+
+      {/* Three-column layout */}
+      <div className="flex flex-1 gap-4 overflow-hidden p-4">
+        {/* Left panel - File list */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.1 }}
+          className="relative w-64 shrink-0"
+        >
+          <FileListPanel />
+        </motion.div>
+
+        {/* Center panel - Canvas preview */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.98 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.2 }}
+          className="flex-1 min-w-0"
+        >
+          <CanvasPreview />
+        </motion.div>
+
+        {/* Right panel - Config */}
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.3 }}
+          className="w-72 shrink-0"
+        >
+          <AtlasConfigPanel />
+        </motion.div>
+      </div>
+
+      {/* Animation preview dialog */}
+      <AnimationPreviewDialog />
     </div>
   );
 }

src/app/(dashboard)/tools/video-frames/page.tsx

@@ -97,7 +97,7 @@ export default function VideoFramesPage() {
     [addFile]
   );
 
-  const handleConfigChange = (id: string, value: any) => {
+  const handleConfigChange = (id: string, value: string | number | boolean | undefined) => {
     setConfig((prev) => ({ ...prev, [id]: value }));
   };