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

src/components/layout/Footer.tsx

@@ -1,175 +1,96 @@
 "use client";
 
 import Link from "next/link";
-import { Sparkles, Github, Twitter } from "lucide-react";
+import { Sparkles } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation, getServerTranslations } from "@/lib/i18n";
-import { useState, useEffect } from "react";
-
-function useFooterLinks() {
-  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);
-  };
-
-  return {
-    product: [
-      { name: getT("common.features"), href: "/features" },
-      { name: getT("nav.pricing"), href: "/pricing" },
-      { name: "API", href: "/api" },
-      { name: getT("nav.docs"), href: "/docs" },
-    ],
-    tools: [
-      { name: getT("sidebar.videoToFrames"), href: "/tools/video-frames" },
-      { name: getT("sidebar.imageCompression"), href: "/tools/image-compress" },
-      { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress" },
-      { name: getT("home.tools.aiTools.title"), href: "/tools/ai-tools" },
-    ],
-    company: [
-      { name: getT("nav.about"), href: "/about" },
-      { name: "Blog", href: "/blog" },
-      { name: "Careers", href: "/careers" },
-      { name: "Contact", href: "/contact" },
-    ],
-    legal: [
-      { name: "Privacy", href: "/privacy" },
-      { name: "Terms", href: "/terms" },
-      { name: "Cookie Policy", href: "/cookies" },
-    ],
-  };
-}
-
-const socialLinks = [
-  { name: "Twitter", icon: Twitter, href: "https://twitter.com" },
-  { name: "GitHub", icon: Github, href: "https://github.com" },
-];
-
-const sectionTitles: Record<string, string> = {
-  product: "Product",
-  tools: "Tools",
-  company: "Company",
-  legal: "Legal",
-};
 
 export function Footer() {
   const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
   const { t } = useTranslation();
-  const footerLinks = useFooterLinks();
 
-  const getT = (key: string) => {
-    if (!mounted) return getServerTranslations("en").t(key);
-    return t(key);
+  useEffect(() => setMounted(true), []);
+
+  const getT = (key: string, params?: Record<string, string | number>) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
   };
 
+  const toolLinks = useMemo(
+    () => [
+      { name: getT("sidebar.videoToFrames"), href: "/tools/video-frames" },
+      { name: getT("sidebar.imageCompression"), href: "/tools/image-compress" },
+      { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress" },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mounted]
+  );
+
   return (
-    <footer className="border-t border-border/40 bg-background/50">
-      <div className="container py-12 md:py-16">
-        <div className="grid grid-cols-2 gap-8 md:grid-cols-6">
-          {/* Brand */}
-          <div className="col-span-2">
-            <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">{getT("common.appName")}</span>
+    <footer className="border-t border-white/5 bg-background/50">
+      <div className="container py-12">
+        <div className="grid gap-10 md:grid-cols-[1.5fr_1fr]">
+          <div>
+            <Link href="/" className="inline-flex items-center gap-2">
+              <span className="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>
+              <span className="text-base font-semibold tracking-tight">{getT("common.appName")}</span>
             </Link>
-            <p className="mt-4 text-sm text-muted-foreground">
+
+            <p className="mt-4 max-w-md text-sm leading-relaxed text-muted-foreground">
               {getT("footer.tagline")}
             </p>
+
+            <p className="mt-6 text-xs text-muted-foreground">
+              {getT("footer.note")}
+            </p>
           </div>
 
-          {/* Product */}
-          <div>
-            <h3 className="mb-4 text-sm font-semibold">{sectionTitles.product}</h3>
-            <ul className="space-y-3 text-sm">
-              {footerLinks.product.map((link) => (
-                <li key={link.name}>
-                  <Link
-                    href={link.href}
-                    className="text-muted-foreground transition-colors hover:text-foreground"
-                  >
-                    {link.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
+          <div className="grid grid-cols-2 gap-8">
+            <div>
+              <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {getT("footer.sections.tools")}
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                {toolLinks.map((link) => (
+                  <li key={link.href}>
+                    <Link href={link.href} className="text-muted-foreground hover:text-foreground">
+                      {link.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
 
-          {/* Tools */}
-          <div>
-            <h3 className="mb-4 text-sm font-semibold">{sectionTitles.tools}</h3>
-            <ul className="space-y-3 text-sm">
-              {footerLinks.tools.map((link) => (
-                <li key={link.name}>
-                  <Link
-                    href={link.href}
-                    className="text-muted-foreground transition-colors hover:text-foreground"
-                  >
-                    {link.name}
+            <div>
+              <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {getT("footer.sections.company")}
+              </div>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li>
+                  <Link href="/" className="text-muted-foreground hover:text-foreground">
+                    {getT("footer.links.home")}
                   </Link>
                 </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Company */}
-          <div>
-            <h3 className="mb-4 text-sm font-semibold">{sectionTitles.company}</h3>
-            <ul className="space-y-3 text-sm">
-              {footerLinks.company.map((link) => (
-                <li key={link.name}>
-                  <Link
-                    href={link.href}
-                    className="text-muted-foreground transition-colors hover:text-foreground"
-                  >
-                    {link.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Legal */}
-          <div>
-            <h3 className="mb-4 text-sm font-semibold">{sectionTitles.legal}</h3>
-            <ul className="space-y-3 text-sm">
-              {footerLinks.legal.map((link) => (
-                <li key={link.name}>
-                  <Link
-                    href={link.href}
-                    className="text-muted-foreground transition-colors hover:text-foreground"
-                  >
-                    {link.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
+              </ul>
+            </div>
           </div>
         </div>
 
-        {/* Bottom section */}
-        <div className="mt-12 flex flex-col items-center justify-between border-t border-border/40 pt-8 md:flex-row">
-          <p className="text-sm text-muted-foreground">
-            © {new Date().getFullYear()} {getT("common.appName")}. All rights reserved.
-          </p>
-          <div className="mt-4 flex space-x-6 md:mt-0">
-            {socialLinks.map((link) => {
-              const Icon = link.icon;
-              return (
-                <Link
-                  key={link.name}
-                  href={link.href}
-                  className="text-muted-foreground transition-colors hover:text-foreground"
-                  aria-label={link.name}
-                >
-                  <Icon className="h-5 w-5" />
-                </Link>
-              );
-            })}
+        <div className="mt-10 border-t border-white/5 pt-6">
+          <div className="flex flex-col items-center justify-center gap-2 text-center">
+            <p className="text-xs text-muted-foreground">
+              © {new Date().getFullYear()} {getT("common.appName")}. {getT("footer.copyright")}
+            </p>
+            <Link
+              href="https://beian.miit.gov.cn"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-muted-foreground hover:text-foreground"
+            >
+              粤ICP备2021179543号
+            </Link>
           </div>
         </div>
       </div>

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>

src/components/layout/Sidebar.tsx

@@ -7,7 +7,6 @@ import {
   Video,
   Image,
   Music,
-  Sparkles,
   LayoutDashboard,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -39,21 +38,6 @@ function useSidebarNavItems() {
         { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress", icon: Music },
       ],
     },
-    {
-      title: getT("sidebar.aiTools"),
-      items: [
-        { name: getT("sidebar.aiImage"), href: "/tools/ai-tools", icon: Sparkles },
-        { name: getT("sidebar.aiAudio"), href: "/tools/ai-tools", icon: Sparkles },
-      ],
-    },
-    {
-      title: getT("nav.account"),
-      items: [
-        // TODO: Create pricing and settings pages
-        // { name: t("nav.pricing"), href: "/pricing", icon: CreditCard },
-        // { name: t("common.settings"), href: "/settings", icon: Settings },
-      ],
-    },
   ];
 }
 
@@ -62,8 +46,6 @@ interface SidebarProps {
 }
 
 export function Sidebar({ className }: SidebarProps) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
   const pathname = usePathname();
   const sidebarNavItems = useSidebarNavItems();