重构：将 "lobster" 重命名为 "claw" 并添加国际化支持 (i18n)

components/layout/install-banner.tsx

@@ -2,10 +2,12 @@
 
 import { useState } from "react";
 import { Check, Copy, Terminal } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 const INSTALL_COMMAND = "clawhub install openclaw-reporter";
 
 export function InstallBanner() {
+  const t = useTranslations("installBanner");
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -31,10 +33,10 @@ export function InstallBanner() {
           </div>
           <div className="min-w-0">
             <p className="text-sm font-medium text-[var(--text-primary)]">
-              Join the Heatmap
+              {t("title")}
             </p>
             <p className="text-xs text-[var(--text-muted)] truncate">
-              Install the skill and let your lobster light up the globe
+              {t("subtitle")}
             </p>
           </div>
         </div>
@@ -43,7 +45,7 @@ export function InstallBanner() {
         <button
           onClick={handleCopy}
           className="group flex items-center gap-2 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-4 py-2.5 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
-          title="Click to copy"
+          title={t("copyTooltip")}
         >
           <Terminal className="h-3.5 w-3.5 text-[var(--text-muted)]" />
           <code className="font-mono text-sm text-[var(--accent-cyan)] select-all">

components/layout/language-switcher.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { useRouter, usePathname } from "@/i18n/navigation";
+import { Globe } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { routing } from "@/i18n/routing";
+
+export function LanguageSwitcher() {
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+  const t = useTranslations("languageSwitcher");
+
+  const switchLocale = (newLocale: string) => {
+    router.replace(pathname, { locale: newLocale });
+  };
+
+  return (
+    <div className="flex items-center gap-1 rounded-lg border border-white/5 bg-white/5 p-0.5">
+      <Globe className="mx-1 h-3 w-3 text-[var(--text-muted)]" />
+      {routing.locales.map((l) => (
+        <button
+          key={l}
+          onClick={() => switchLocale(l)}
+          className={cn(
+            "rounded-md px-2 py-1 text-xs font-medium transition-all cursor-pointer",
+            locale === l
+              ? "bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
+              : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+          )}
+        >
+          {t(l)}
+        </button>
+      ))}
+    </div>
+  );
+}

components/layout/navbar.tsx

@@ -1,14 +1,18 @@
 "use client";
 
-import Link from "next/link";
 import { Activity, Globe2, Map } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { cn } from "@/lib/utils";
+import { LanguageSwitcher } from "./language-switcher";
 
 interface NavbarProps {
   activeView?: "globe" | "map";
 }
 
 export function Navbar({ activeView = "globe" }: NavbarProps) {
+  const t = useTranslations("navbar");
+
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 bg-[var(--bg-primary)]/80 backdrop-blur-xl">
       <div className="mx-auto flex h-14 max-w-[1800px] items-center justify-between px-4">
@@ -18,7 +22,7 @@ export function Navbar({ activeView = "globe" }: NavbarProps) {
             className="font-mono text-lg font-bold tracking-tight"
             style={{ color: "var(--accent-cyan)", textShadow: "var(--glow-cyan)" }}
           >
-            OpenClaw Market
+            {t("brand")}
           </span>
         </Link>
 
@@ -33,7 +37,7 @@ export function Navbar({ activeView = "globe" }: NavbarProps) {
             )}
           >
             <Globe2 className="h-3.5 w-3.5" />
-            3D Globe
+            {t("globe")}
           </Link>
           <Link
             href="/continent/asia"
@@ -45,15 +49,16 @@ export function Navbar({ activeView = "globe" }: NavbarProps) {
             )}
           >
             <Map className="h-3.5 w-3.5" />
-            2D Map
+            {t("map")}
           </Link>
         </div>
 
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-1.5">
             <Activity className="h-3.5 w-3.5 text-[var(--accent-green)]" />
-            <span className="text-xs text-[var(--text-secondary)]">Live</span>
+            <span className="text-xs text-[var(--text-secondary)]">{t("live")}</span>
           </div>
+          <LanguageSwitcher />
         </div>
       </div>
     </nav>

components/layout/view-switcher.tsx

@@ -1,22 +1,20 @@
 "use client";
 
-import Link from "next/link";
 import { Globe2, Map } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { cn } from "@/lib/utils";
 
-const continents = [
-  { slug: "asia", label: "Asia" },
-  { slug: "europe", label: "Europe" },
-  { slug: "americas", label: "Americas" },
-  { slug: "africa", label: "Africa" },
-  { slug: "oceania", label: "Oceania" },
-];
+const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
 
 interface ViewSwitcherProps {
   activeContinent?: string;
 }
 
 export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
+  const tSwitcher = useTranslations("viewSwitcher");
+  const tContinents = useTranslations("continents");
+
   return (
     <div className="flex flex-wrap items-center gap-2">
       <Link
@@ -29,21 +27,21 @@ export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
         )}
       >
         <Globe2 className="h-3 w-3" />
-        Global
+        {tSwitcher("global")}
       </Link>
-      {continents.map((c) => (
+      {continentSlugs.map((slug) => (
         <Link
-          key={c.slug}
-          href={`/continent/${c.slug}`}
+          key={slug}
+          href={`/continent/${slug}`}
           className={cn(
             "flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
-            activeContinent === c.slug
+            activeContinent === slug
               ? "border-[var(--accent-purple)]/30 bg-[var(--accent-purple)]/10 text-[var(--accent-purple)]"
               : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
           )}
         >
           <Map className="h-3 w-3" />
-          {c.label}
+          {tContinents(slug)}
         </Link>
       ))}
     </div>