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

2026-03-13 12:07:28 +08:00
parent fa4c458eda
commit 9e30771180
38 changed files with 1003 additions and 344 deletions
--- a/app/[locale]/continent/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+import { Inter, JetBrains_Mono } from "next/font/google";
+import { notFound } from "next/navigation";
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages, getTranslations } from "next-intl/server";
+import { routing } from "@/i18n/routing";
+import "../globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+});
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "metadata" });
+
+  return {
+    title: t("title"),
+    description: t("description"),
+    alternates: {
+      languages: Object.fromEntries(
+        routing.locales.map((l) => [l, `/${l}`])
+      ),
+    },
+  };
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  if (!routing.locales.includes(locale as "en" | "zh")) {
+    notFound();
+  }
+
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} className="dark">
+      <body
+        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
+        style={{
+          backgroundColor: "var(--bg-primary)",
+          color: "var(--text-primary)",
+        }}
+      >
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { Navbar } from "@/components/layout/navbar";
+import { InstallBanner } from "@/components/layout/install-banner";
+import { ParticleBg } from "@/components/layout/particle-bg";
+import { GlobeView } from "@/components/globe/globe-view";
+import { StatsPanel } from "@/components/dashboard/stats-panel";
+import { ActivityTimeline } from "@/components/dashboard/activity-timeline";
+import { ClawFeed } from "@/components/dashboard/claw-feed";
+import { RegionRanking } from "@/components/dashboard/region-ranking";
+
+export default function HomePage() {
+  return (
+    <div className="relative min-h-screen">
+      <ParticleBg />
+      <Navbar activeView="globe" />
+
+      <main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
+        <div className="mb-4">
+          <InstallBanner />
+        </div>
+        <div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
+          {/* Left Panel */}
+          <div className="flex flex-col gap-4">
+            <StatsPanel />
+            <RegionRanking />
+          </div>
+
+          {/* Center - Globe + Timeline */}
+          <div className="flex flex-col gap-4">
+            <div className="h-[500px] lg:h-[600px]">
+              <GlobeView />
+            </div>
+            <ActivityTimeline />
+          </div>
+
+          {/* Right Panel */}
+          <div className="flex flex-col gap-4">
+            <ClawFeed />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}