feat: 优化翻译函数支持参数传递

src/components/layout/Header.tsx

@@ -2,151 +2,136 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Menu, X, Sparkles } from "lucide-react";
-// import { Button } from "@/components/ui/button"; // TODO: Uncomment when adding login/register buttons
+import { ArrowRight, Menu, X, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 import { useTranslation, getServerTranslations } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
-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 [mounted, setMounted] = useState(false);
-  const navItems = useNavItems();
   const { t, locale, setLocale } = useTranslation();
 
   useEffect(() => {
     setMounted(true);
-    
+
     // Auto detect language on first mount if not manually set
     const stored = localStorage.getItem("locale-storage");
     if (!stored) {
       const lang = navigator.language.toLowerCase();
-      if (lang.includes("zh")) {
-        setLocale("zh");
-      }
+      if (lang.includes("zh")) setLocale("zh");
     }
   }, [setLocale]);
 
   useEffect(() => {
-    if (mounted) {
-      document.documentElement.lang = locale;
-    }
+    if (!mounted) return;
+    document.documentElement.lang = locale;
   }, [locale, mounted]);
 
   // Prevent hydration mismatch by rendering a stable version initially
-  const displayT = (key: string, params?: any) => {
+  const displayT = (key: string, params?: Record<string, string | number>) => {
     if (!mounted) return getServerTranslations("en").t(key, params);
     return t(key, params);
   };
-  
-  const currentNavItems = mounted ? navItems : [
-    { name: "Tools", href: "/tools/image-compress" },
-    { name: "Pricing", href: "/tools/video-frames" },
-    { name: "Docs", href: "/tools/audio-compress" },
-  ];
+
+  const navItems = useMemo(
+    () => [
+      { name: displayT("sidebar.videoToFrames"), href: "/tools/video-frames" },
+      { name: displayT("sidebar.imageCompression"), href: "/tools/image-compress" },
+      { name: displayT("sidebar.audioCompression"), href: "/tools/audio-compress" },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mounted, locale]
+  );
 
   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">
+    <header className="sticky top-0 z-50 w-full border-b border-white/5 bg-background/70 backdrop-blur-xl supports-[backdrop-filter]:bg-background/50">
       <nav className="container flex h-16 items-center justify-between">
-        {/* Logo */}
-        <Link href="/" className="flex items-center space-x-2">
-          <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">{displayT("common.appName")}</span>
+        <Link href="/" className="group flex items-center gap-2">
+          <span className="relative grid h-9 w-9 place-items-center rounded-xl bg-primary text-primary-foreground shadow-[0_0_0_1px_rgba(255,255,255,0.1)]">
+            <Sparkles className="h-5 w-5" />
+            <span className="pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-500 group-hover:opacity-100 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.35),transparent_60%)]" />
+          </span>
+          <span className="text-base font-semibold tracking-tight">{displayT("common.appName")}</span>
         </Link>
 
-        {/* Desktop Navigation */}
-        <div className="hidden md:flex md:items-center md:space-x-6">
-          {currentNavItems.map((item) => (
-            <Link
-              key={item.name}
-              href={item.href}
-              className={cn(
-                "text-sm font-medium transition-colors hover:text-primary",
-                pathname === item.href ? "text-primary" : "text-muted-foreground"
-              )}
-            >
-              {item.name}
-            </Link>
-          ))}
+        <div className="hidden md:flex items-center gap-1">
+          {navItems.map((item) => {
+            const active = pathname === item.href || pathname?.startsWith(item.href + "/");
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+                  active
+                    ? "bg-white/8 text-foreground"
+                    : "text-muted-foreground hover:bg-white/5 hover:text-foreground"
+                )}
+              >
+                {item.name}
+              </Link>
+            );
+          })}
         </div>
 
-        {/* CTA Buttons */}
-        <div className="hidden md:flex md:items-center md:space-x-4">
+        <div className="hidden md:flex items-center gap-2">
           {mounted && <LanguageSwitcher />}
-          {/* TODO: Create login/register pages
-          <Button variant="ghost" size="sm" asChild>
-            <Link href="/login">{displayT("common.signIn")}</Link>
+          <Button asChild size="sm" className="rounded-full px-4">
+            <Link href="/tools/image-compress">
+              {displayT("common.startBuilding")} <ArrowRight className="ml-1 h-4 w-4" />
+            </Link>
           </Button>
-          <Button size="sm" asChild>
-            <Link href="/register">{displayT("common.getStarted")}</Link>
-          </Button>
-          */}
         </div>
 
-        {/* Mobile Menu Button */}
         <button
-          className="md:hidden"
+          className="md:hidden rounded-full p-2 hover:bg-white/5"
           onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
           aria-label={displayT("common.toggleMenu")}
         >
-          {isMobileMenuOpen ? (
-            <X className="h-6 w-6" />
-          ) : (
-            <Menu className="h-6 w-6" />
-          )}
+          {isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </button>
       </nav>
 
-      {/* Mobile Menu */}
       <AnimatePresence>
         {isMobileMenuOpen && (
           <motion.div
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.2 }}
-            className="md:hidden border-t border-border/40"
+            transition={{ duration: 0.18 }}
+            className="md:hidden border-t border-white/5"
           >
-            <div className="container space-y-4 py-6">
-              {currentNavItems.map((item) => (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  onClick={() => setIsMobileMenuOpen(false)}
-                  className={cn(
-                    "block text-sm font-medium transition-colors hover:text-primary",
-                    pathname === item.href ? "text-primary" : "text-muted-foreground"
-                  )}
-                >
-                  {item.name}
-                </Link>
-              ))}
-              <div className="flex flex-col space-y-2 pt-4">
+            <div className="container py-5">
+              <div className="flex flex-col gap-2">
+                {navItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={cn(
+                      "rounded-xl px-3 py-2 text-sm font-medium transition-colors",
+                      pathname === item.href
+                        ? "bg-white/8 text-foreground"
+                        : "text-muted-foreground hover:bg-white/5 hover:text-foreground"
+                    )}
+                  >
+                    {item.name}
+                  </Link>
+                ))}
+              </div>
+
+              <div className="mt-4 flex items-center justify-between">
                 {mounted && <LanguageSwitcher />}
-                {/* TODO: Create login/register pages
-                <Button variant="ghost" size="sm" asChild className="w-full">
-                  <Link href="/login">{displayT("common.signIn")}</Link>
+                <Button asChild size="sm" className="rounded-full px-4">
+                  <Link href="/tools/image-compress" onClick={() => setIsMobileMenuOpen(false)}>
+                    {displayT("common.startBuilding")} <ArrowRight className="ml-1 h-4 w-4" />
+                  </Link>
                 </Button>
-                <Button size="sm" asChild className="w-full">
-                  <Link href="/register">{displayT("common.getStarted")}</Link>
-                </Button>
-                */}
               </div>
             </div>
           </motion.div>