feat: 支持多语言能力

2026-01-24 10:10:52 +08:00
parent 77c048b6a2
commit e2280b12e2
23 changed files with 2373 additions and 374 deletions
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,38 +1,55 @@
+"use client";
+
 import Link from "next/link";
 import { Sparkles, Github, Twitter } from "lucide-react";
+import { useTranslation } from "@/lib/i18n";

-const footerLinks = {
-  product: [
-    { name: "Features", href: "/features" },
-    { name: "Pricing", href: "/pricing" },
-    { name: "API", href: "/api" },
-    { name: "Documentation", href: "/docs" },
-  ],
-  tools: [
-    { name: "Video to Frames", href: "/tools/video-frames" },
-    { name: "Image Compression", href: "/tools/image-compress" },
-    { name: "Audio Compression", href: "/tools/audio-compress" },
-    { name: "AI Tools", href: "/tools/ai-tools" },
-  ],
-  company: [
-    { name: "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" },
-  ],
-};
+function useFooterLinks() {
+  const { t } = useTranslation();
+
+  return {
+    product: [
+      { name: t("common.features"), href: "/features" },
+      { name: t("nav.pricing"), href: "/pricing" },
+      { name: "API", href: "/api" },
+      { name: t("nav.docs"), href: "/docs" },
+    ],
+    tools: [
+      { name: t("sidebar.videoToFrames"), href: "/tools/video-frames" },
+      { name: t("sidebar.imageCompression"), href: "/tools/image-compress" },
+      { name: t("sidebar.audioCompression"), href: "/tools/audio-compress" },
+      { name: t("home.tools.aiTools.title"), href: "/tools/ai-tools" },
+    ],
+    company: [
+      { name: t("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 { t } = useTranslation();
+  const footerLinks = useFooterLinks();
+
  return (
    <footer className="border-t border-border/40 bg-background/50">
      <div className="container py-12 md:py-16">
@@ -43,16 +60,16 @@ export function Footer() {
              <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>
            <p className="mt-4 text-sm text-muted-foreground">
-              AI-powered tools for mini game developers. Process media files with ease.
+              {t("footer.tagline")}
            </p>
          </div>

          {/* Product */}
          <div>
-            <h3 className="mb-4 text-sm font-semibold">Product</h3>
+            <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}>
@@ -69,7 +86,7 @@ export function Footer() {

          {/* Tools */}
          <div>
-            <h3 className="mb-4 text-sm font-semibold">Tools</h3>
+            <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}>
@@ -86,7 +103,7 @@ export function Footer() {

          {/* Company */}
          <div>
-            <h3 className="mb-4 text-sm font-semibold">Company</h3>
+            <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}>
@@ -103,7 +120,7 @@ export function Footer() {

          {/* Legal */}
          <div>
-            <h3 className="mb-4 text-sm font-semibold">Legal</h3>
+            <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}>
@@ -122,7 +139,7 @@ export function Footer() {
        {/* 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()} Mini Game AI. All rights reserved.
+            © {new Date().getFullYear()} {t("common.appName")}. All rights reserved.
          </p>
          <div className="mt-4 flex space-x-6 md:mt-0">
            {socialLinks.map((link) => {
--- a/src/components/layout/Header.tsx
+++ b/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>
--- a/src/components/layout/LanguageSwitcher.tsx
+++ b/src/components/layout/LanguageSwitcher.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTranslation, type Locale } from "@/lib/i18n";
+import { Check, Globe } from "lucide-react";
+
+export function LanguageSwitcher() {
+  const { locale, setLocale, locales } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const handleLocaleChange = (newLocale: Locale) => {
+    setLocale(newLocale);
+    setOpen(false);
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="gap-2">
+          <Globe className="h-4 w-4" />
+          <span className="hidden md:inline">{locales[locale].flag}</span>
+          <span className="hidden lg:inline">{locales[locale].name}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[160px]">
+        {Object.entries(locales).map(([key, { name, flag }]) => (
+          <DropdownMenuItem
+            key={key}
+            onClick={() => handleLocaleChange(key as Locale)}
+            className="flex cursor-pointer items-center justify-between gap-2"
+          >
+            <span className="flex items-center gap-2">
+              <span>{flag}</span>
+              <span>{name}</span>
+            </span>
+            {locale === key && (
+              <Check className="h-4 w-4 text-primary" />
+            )}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -9,41 +9,44 @@ import {
  Music,
  Sparkles,
  LayoutDashboard,
-  CreditCard,
-  Settings,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "@/lib/i18n";

-const sidebarNavItems = [
-  {
-    title: "Dashboard",
-    items: [
-      { name: "Overview", href: "/dashboard", icon: LayoutDashboard },
-    ],
-  },
-  {
-    title: "Tools",
-    items: [
-      { name: "Video to Frames", href: "/tools/video-frames", icon: Video },
-      { name: "Image Compression", href: "/tools/image-compress", icon: Image },
-      { name: "Audio Compression", href: "/tools/audio-compress", icon: Music },
-    ],
-  },
-  {
-    title: "AI Tools",
-    items: [
-      { name: "AI Image", href: "/tools/ai-image", icon: Sparkles },
-      { name: "AI Audio", href: "/tools/ai-audio", icon: Sparkles },
-    ],
-  },
-  {
-    title: "Account",
-    items: [
-      { name: "Pricing", href: "/pricing", icon: CreditCard },
-      { name: "Settings", href: "/settings", icon: Settings },
-    ],
-  },
-];
+function useSidebarNavItems() {
+  const { t } = useTranslation();
+  return [
+    {
+      title: t("nav.dashboard"),
+      items: [
+        { name: t("nav.overview"), href: "/", icon: LayoutDashboard },
+      ],
+    },
+    {
+      title: t("sidebar.tools"),
+      items: [
+        { name: t("sidebar.videoToFrames"), href: "/tools/video-frames", icon: Video },
+        { name: t("sidebar.imageCompression"), href: "/tools/image-compress", icon: Image },
+        { name: t("sidebar.audioCompression"), href: "/tools/audio-compress", icon: Music },
+      ],
+    },
+    {
+      title: t("sidebar.aiTools"),
+      items: [
+        { name: t("sidebar.aiImage"), href: "/tools/ai-tools", icon: Sparkles },
+        { name: t("sidebar.aiAudio"), href: "/tools/ai-tools", icon: Sparkles },
+      ],
+    },
+    {
+      title: t("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 },
+      ],
+    },
+  ];
+}

 interface SidebarProps {
  className?: string;
@@ -51,6 +54,7 @@ interface SidebarProps {

 export function Sidebar({ className }: SidebarProps) {
  const pathname = usePathname();
+  const sidebarNavItems = useSidebarNavItems();

  return (
    <aside
@@ -61,7 +65,9 @@ export function Sidebar({ className }: SidebarProps) {
    >
      <div className="h-full overflow-y-auto py-6 pr-4">
        <nav className="space-y-8 px-4">
-          {sidebarNavItems.map((section) => (
+          {sidebarNavItems
+            .filter((section) => section.items.length > 0)
+            .map((section) => (
            <div key={section.title}>
              <h3 className="mb-4 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                {section.title}