feat(页面): 添加区域探索与国家边界功能

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

@@ -1,69 +0,0 @@
-"use client";
-
-import { use } from "react";
-import dynamic from "next/dynamic";
-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 { StatsPanel } from "@/components/dashboard/stats-panel";
-import { ClawFeed } from "@/components/dashboard/claw-feed";
-
-const ContinentMap = dynamic(
-  () =>
-    import("@/components/map/continent-map").then((m) => ({
-      default: m.ContinentMap,
-    })),
-  { ssr: false }
-);
-
-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>
-  );
-}

app/[locale]/page.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import { useTranslations } from "next-intl";
+import { Map } from "lucide-react";
 import { Navbar } from "@/components/layout/navbar";
 import { InstallBanner } from "@/components/layout/install-banner";
 import { ParticleBg } from "@/components/layout/particle-bg";
@@ -8,38 +12,96 @@ 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";
+import { cn } from "@/lib/utils";
+
+const ContinentMap = dynamic(
+  () =>
+    import("@/components/map/continent-map").then((m) => ({
+      default: m.ContinentMap,
+    })),
+  { ssr: false }
+);
+
+const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
 
 export default function HomePage() {
+  const [activeContinent, setActiveContinent] = useState<string>("asia");
+  const tContinents = useTranslations("continents");
+  const tRegion = useTranslations("regionExplorer");
+
   return (
     <div className="relative min-h-screen">
       <ParticleBg />
-      <Navbar activeView="globe" />
+      <Navbar />
 
       <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 />
+        {/* Section 1: Globe + Dashboard */}
+        <section className="min-h-[calc(100vh-5rem)]">
+          <div className="mb-4">
+            <InstallBanner />
           </div>
-
-          {/* Center - Globe + Timeline */}
-          <div className="flex flex-col gap-4">
-            <div className="h-[500px] lg:h-[600px]">
-              <GlobeView />
+          <div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
+            {/* Left Panel */}
+            <div className="flex flex-col gap-4">
+              <StatsPanel />
+              <RegionRanking />
             </div>
-            <ActivityTimeline />
+
+            {/* 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>
+        </section>
+
+        {/* Section 2: Region Explorer */}
+        <section className="mt-8">
+          <div className="mb-4 flex items-center justify-between">
+            <h2
+              className="flex items-center gap-2 font-mono text-2xl font-bold"
+              style={{
+                color: "var(--accent-cyan)",
+                textShadow: "var(--glow-cyan)",
+              }}
+            >
+              <Map className="h-5 w-5" />
+              {tRegion("title")}
+            </h2>
           </div>
 
-          {/* Right Panel */}
-          <div className="flex flex-col gap-4">
-            <ClawFeed />
+          {/* Continent Tabs */}
+          <div className="mb-4 flex flex-wrap gap-2">
+            {continentSlugs.map((slug) => (
+              <button
+                key={slug}
+                onClick={() => setActiveContinent(slug)}
+                className={cn(
+                  "rounded-lg border px-4 py-2 text-sm font-medium transition-all",
+                  activeContinent === slug
+                    ? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
+                    : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
+                )}
+              >
+                {tContinents(slug)}
+              </button>
+            ))}
           </div>
-        </div>
 
+          {/* Map — explicit height so MapLibre can render */}
+          <ContinentMap
+            key={activeContinent}
+            slug={activeContinent}
+            className="h-[calc(100vh-14rem)]"
+          />
+        </section>
       </main>
     </div>
   );