fix: 修复服务端渲染时的翻译不匹配问题

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Image as ImageIcon, Zap } from "lucide-react";
 import { FileUploader } from "@/components/tools/FileUploader";
@@ -10,7 +10,7 @@ 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 } from "@/lib/i18n";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
 import type { UploadedFile, ProcessedFile, ImageCompressConfig } from "@/types";
 
 const imageAccept = {
@@ -22,15 +22,13 @@ const defaultConfig: ImageCompressConfig = {
   format: "original",
 };
 
-function useConfigOptions(config: ImageCompressConfig): ConfigOption[] {
-  const { t } = useTranslation();
-
+function useConfigOptions(config: ImageCompressConfig, getT: (key: string) => string): ConfigOption[] {
   return [
     {
       id: "quality",
       type: "slider",
-      label: t("config.imageCompression.quality"),
-      description: t("config.imageCompression.qualityDescription"),
+      label: getT("config.imageCompression.quality"),
+      description: getT("config.imageCompression.qualityDescription"),
       value: config.quality,
       min: 1,
       max: 100,
@@ -41,21 +39,29 @@ function useConfigOptions(config: ImageCompressConfig): ConfigOption[] {
     {
       id: "format",
       type: "select",
-      label: t("config.imageCompression.format"),
-      description: t("config.imageCompression.formatDescription"),
+      label: getT("config.imageCompression.format"),
+      description: getT("config.imageCompression.formatDescription"),
       value: config.format,
       options: [
-        { label: t("config.imageCompression.formatOriginal"), value: "original" },
-        { label: t("config.imageCompression.formatJpeg"), value: "jpeg" },
-        { label: t("config.imageCompression.formatPng"), value: "png" },
-        { label: t("config.imageCompression.formatWebp"), value: "webp" },
+        { label: getT("config.imageCompression.formatOriginal"), value: "original" },
+        { label: getT("config.imageCompression.formatJpeg"), value: "jpeg" },
+        { label: getT("config.imageCompression.formatPng"), value: "png" },
+        { label: getT("config.imageCompression.formatWebp"), value: "webp" },
       ],
     },
   ];
 }
 
 export default function ImageCompressPage() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
   const { t } = useTranslation();
+
+  const getT = (key: string) => {
+    if (!mounted) return getServerTranslations("en").t(key);
+    return t(key);
+  };
+
   const { files, addFile, removeFile, clearFiles, processingStatus, setProcessingStatus } =
     useUploadStore();
 
@@ -92,7 +98,7 @@ export default function ImageCompressPage() {
     setProcessingStatus({
       status: "uploading",
       progress: 0,
-      message: t("processing.uploadingImages"),
+      message: getT("processing.uploadingImages"),
     });
 
     try {
@@ -102,14 +108,14 @@ export default function ImageCompressPage() {
         setProcessingStatus({
           status: "uploading",
           progress: i,
-          message: t("processing.uploadProgress", { progress: i }),
+          message: getT("processing.uploadProgress", { progress: i }),
         });
       }
 
       setProcessingStatus({
         status: "processing",
         progress: 0,
-        message: t("processing.compressingImages"),
+        message: getT("processing.compressingImages"),
       });
 
       // Simulate processing
@@ -118,7 +124,7 @@ export default function ImageCompressPage() {
         setProcessingStatus({
           status: "processing",
           progress: i,
-          message: t("processing.compressProgress", { progress: i }),
+          message: getT("processing.compressProgress", { progress: i }),
         });
       }
 
@@ -141,14 +147,14 @@ export default function ImageCompressPage() {
       setProcessingStatus({
         status: "completed",
         progress: 100,
-        message: t("processing.compressionComplete"),
+        message: getT("processing.compressionComplete"),
       });
     } catch (error) {
       setProcessingStatus({
         status: "failed",
         progress: 0,
-        message: t("processing.compressionFailed"),
-        error: error instanceof Error ? error.message : t("processing.unknownError"),
+        message: getT("processing.compressionFailed"),
+        error: error instanceof Error ? error.message : getT("processing.unknownError"),
       });
     }
   };
@@ -158,7 +164,7 @@ export default function ImageCompressPage() {
   };
 
   const canProcess = files.length > 0 && processingStatus.status !== "processing";
-  const configOptions = useConfigOptions(config);
+  const configOptions = useConfigOptions(config, getT);
 
   return (
     <div className="p-6">
@@ -172,9 +178,9 @@ export default function ImageCompressPage() {
               <ImageIcon className="h-6 w-6 text-primary" />
             </div>
             <div>
-              <h1 className="text-3xl font-bold">{t("tools.imageCompression.title")}</h1>
+              <h1 className="text-3xl font-bold">{getT("tools.imageCompression.title")}</h1>
               <p className="text-muted-foreground">
-                {t("tools.imageCompression.description")}
+                {getT("tools.imageCompression.description")}
               </p>
             </div>
           </div>
@@ -193,8 +199,8 @@ export default function ImageCompressPage() {
             />
 
             <ConfigPanel
-              title={t("config.imageCompression.title")}
-              description={t("config.imageCompression.description")}
+              title={getT("config.imageCompression.title")}
+              description={getT("config.imageCompression.description")}
               options={configOptions.map((opt) => ({
                 ...opt,
                 value: config[opt.id as keyof ImageCompressConfig],
@@ -206,7 +212,7 @@ export default function ImageCompressPage() {
             {canProcess && (
               <Button onClick={handleProcess} size="lg" className="w-full">
                 <Zap className="mr-2 h-4 w-4" />
-                {t("tools.imageCompression.compressImages")}
+                {getT("tools.imageCompression.compressImages")}
               </Button>
             )}
           </div>
@@ -221,9 +227,9 @@ export default function ImageCompressPage() {
             )}
 
             <div className="rounded-lg border border-border/40 bg-card/50 p-6">
-              <h3 className="mb-3 font-semibold">{t("tools.imageCompression.features")}</h3>
+              <h3 className="mb-3 font-semibold">{getT("tools.imageCompression.features")}</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                {(t("tools.imageCompression.featureList") as unknown as string[]).map((feature, index) => (
+                {(getT("tools.imageCompression.featureList") as unknown as string[]).map((feature, index) => (
                   <li key={index}>• {feature}</li>
                 ))}
               </ul>