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

app/[locale]/continent/[slug]/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { use } from "react";
+import { useTranslations } from "next-intl";
+import { Navbar } from "@/components/layout/navbar";
+import { ParticleBg } from "@/components/layout/particle-bg";
+import { ViewSwitcher } from "@/components/layout/view-switcher";
+import { ContinentMap } from "@/components/map/continent-map";
+import { StatsPanel } from "@/components/dashboard/stats-panel";
+import { ClawFeed } from "@/components/dashboard/claw-feed";
+
+const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export default function ContinentPage({ params }: PageProps) {
+  const { slug } = use(params);
+  const t = useTranslations("continents");
+  const tPage = useTranslations("continentPage");
+
+  const name = continentSlugs.includes(slug as (typeof continentSlugs)[number])
+    ? t(slug as (typeof continentSlugs)[number])
+    : "Unknown";
+
+  return (
+    <div className="relative min-h-screen">
+      <ParticleBg />
+      <Navbar activeView="map" />
+
+      <main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
+        <div className="mb-4 flex items-center justify-between">
+          <h1
+            className="font-mono text-2xl font-bold"
+            style={{
+              color: "var(--accent-cyan)",
+              textShadow: "var(--glow-cyan)",
+            }}
+          >
+            {tPage("regionTitle", { name })}
+          </h1>
+          <ViewSwitcher activeContinent={slug} />
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-[1fr_300px]">
+          {/* Map */}
+          <div>
+            <ContinentMap slug={slug} />
+          </div>
+
+          {/* Side Panel */}
+          <div className="flex flex-col gap-4">
+            <StatsPanel />
+            <ClawFeed />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}