'多语言'

app/components/Header.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/i18n/navigation";
 import AuthModal from "./AuthModal";
 
 const navLinks = [
-  { label: "学习路径", href: "#roadmap" },
-  { label: "工具推荐", href: "#tools" },
-  { label: "精选资源", href: "#resources" },
-  { label: "社区", href: "#community" },
+  { labelKey: "roadmap" as const, href: "#roadmap" },
+  { labelKey: "tools" as const, href: "#tools" },
+  { labelKey: "community" as const, href: "#community" },
 ];
 
 function getStoredUser(): string | null {
@@ -23,6 +23,11 @@ function getStoredUser(): string | null {
 }
 
 export default function Header() {
+  const { t } = useTranslation("common");
+  const { t: tNav } = useTranslation("nav");
+  const locale = useLocale();
+  const pathname = usePathname();
+  const router = useRouter();
   const [mobileOpen, setMobileOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const [authOpen, setAuthOpen] = useState(false);
@@ -48,11 +53,11 @@ export default function Header() {
     >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
-          <a href="#" className="flex items-center gap-2 text-lg font-bold">
+          <Link href="/" className="flex items-center gap-2 text-lg font-bold">
             <span className="text-2xl">🌍</span>
-            <span className="hidden sm:inline">数字游民指南</span>
-            <span className="sm:hidden">DN Guide</span>
-          </a>
+            <span className="hidden sm:inline">{t("siteName")}</span>
+            <span className="sm:hidden">{t("siteNameShort")}</span>
+          </Link>
 
           <nav className="hidden items-center gap-1 md:flex">
             {navLinks.map((link) => (
@@ -61,9 +66,16 @@ export default function Header() {
                 href={link.href}
                 className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
               >
-                {link.label}
+                {tNav(link.labelKey)}
               </a>
             ))}
+            <button
+              type="button"
+              onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
+              className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
+            >
+              {locale === "zh" ? "EN" : "中文"}
+            </button>
           </nav>
 
           <div className="flex items-center gap-3">
@@ -76,7 +88,7 @@ export default function Header() {
                   onClick={handleLogout}
                   className="rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50"
                 >
-                  退出
+                  {t("logout")}
                 </button>
               </div>
             ) : (
@@ -84,20 +96,20 @@ export default function Header() {
                 onClick={() => setAuthOpen(true)}
                 className="hidden rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 sm:inline-flex"
               >
-                登录 / 注册
+                {t("loginRegister")}
               </button>
             )}
             <a
               href="#roadmap"
               className="hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 sm:inline-flex"
             >
-              开始探索 →
+              {t("explore")}
             </a>
 
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
               className="inline-flex items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 md:hidden"
-              aria-label="切换菜单"
+              aria-label={t("toggleMenu")}
             >
               {mobileOpen ? (
                 <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -123,9 +135,19 @@ export default function Header() {
                 onClick={() => setMobileOpen(false)}
                 className="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
               >
-                {link.label}
+                {tNav(link.labelKey)}
               </a>
             ))}
+            <button
+              type="button"
+              onClick={() => {
+                setMobileOpen(false);
+                router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" });
+              }}
+              className="block w-full rounded-lg px-3 py-2.5 text-left text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
+            >
+              {locale === "zh" ? "EN" : "中文"}
+            </button>
             {userEmail ? (
               <div className="mt-2 flex items-center justify-between rounded-lg border border-slate-100 bg-slate-50 px-4 py-2.5">
                 <span className="truncate text-sm text-slate-600">{userEmail}</span>
@@ -136,7 +158,7 @@ export default function Header() {
                   }}
                   className="text-sm font-medium text-sky-500"
                 >
-                  退出
+                  {t("logout")}
                 </button>
               </div>
             ) : (
@@ -147,7 +169,7 @@ export default function Header() {
                 }}
                 className="mt-2 block w-full rounded-full border border-slate-200 px-4 py-2.5 text-center text-base font-medium text-slate-600"
               >
-                登录 / 注册
+                {t("loginRegister")}
               </button>
             )}
             <a
@@ -155,7 +177,7 @@ export default function Header() {
               onClick={() => setMobileOpen(false)}
               className="mt-2 block rounded-full bg-sky-500 px-4 py-2.5 text-center text-base font-medium text-white transition-colors hover:bg-sky-600"
             >
-              开始探索 →
+              {t("explore")}
             </a>
           </nav>
         </div>