feat: 支持多语言能力

src/components/layout/Header.tsx

@@ -5,19 +5,27 @@ import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X, Sparkles } from "lucide-react";
-import { Button } from "@/components/ui/button";
+// import { Button } from "@/components/ui/button"; // TODO: Uncomment when adding login/register buttons
+import { LanguageSwitcher } from "./LanguageSwitcher";
+import { useTranslation } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
-const navItems = [
-  { name: "Tools", href: "/tools" },
-  { name: "Pricing", href: "/pricing" },
-  { name: "Docs", href: "/docs" },
-  { name: "About", href: "/about" },
-];
+function useNavItems() {
+  const { t } = useTranslation();
+  return [
+    { name: t("nav.tools"), href: "/tools/image-compress" },
+    { name: t("nav.pricing"), href: "/tools/video-frames" },
+    { name: t("nav.docs"), href: "/tools/audio-compress" },
+    // Note: Temporarily redirecting to existing tool pages
+    // TODO: Create dedicated pages for pricing, docs, about
+  ];
+}
 
 export function Header() {
   const pathname = usePathname();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const navItems = useNavItems();
+  const { t } = useTranslation();
 
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -27,7 +35,7 @@ export function Header() {
           <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
             <Sparkles className="h-5 w-5 text-primary-foreground" />
           </div>
-          <span className="text-xl font-bold">Mini Game AI</span>
+          <span className="text-xl font-bold">{t("common.appName")}</span>
         </Link>
 
         {/* Desktop Navigation */}
@@ -48,12 +56,15 @@ export function Header() {
 
         {/* CTA Buttons */}
         <div className="hidden md:flex md:items-center md:space-x-4">
+          <LanguageSwitcher />
+          {/* TODO: Create login/register pages
           <Button variant="ghost" size="sm" asChild>
-            <Link href="/login">Sign In</Link>
+            <Link href="/login">{t("common.signIn")}</Link>
           </Button>
           <Button size="sm" asChild>
-            <Link href="/register">Get Started</Link>
+            <Link href="/register">{t("common.getStarted")}</Link>
           </Button>
+          */}
         </div>
 
         {/* Mobile Menu Button */}
@@ -95,12 +106,15 @@ export function Header() {
                 </Link>
               ))}
               <div className="flex flex-col space-y-2 pt-4">
+                <LanguageSwitcher />
+                {/* TODO: Create login/register pages
                 <Button variant="ghost" size="sm" asChild className="w-full">
-                  <Link href="/login">Sign In</Link>
+                  <Link href="/login">{t("common.signIn")}</Link>
                 </Button>
                 <Button size="sm" asChild className="w-full">
-                  <Link href="/register">Get Started</Link>
+                  <Link href="/register">{t("common.getStarted")}</Link>
                 </Button>
+                */}
               </div>
             </div>
           </motion.div>