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>