feat: 添加 2D/3D 地图切换与坐标偏移功能

- 新增 WorldMap 组件，支持 2D 世界地图视图
- 主页添加 2D/3D 视图切换按钮
- 实现确定性坐标偏移算法，分散同城用户位置
- 更新 heatmap 和 register API 使用坐标偏移

app/[locale]/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import dynamic from "next/dynamic";
 import { useTranslations } from "next-intl";
-import { Map } from "lucide-react";
+import { Globe, Map } from "lucide-react";
 import { Navbar } from "@/components/layout/navbar";
 import { InstallBanner } from "@/components/layout/install-banner";
 import { ParticleBg } from "@/components/layout/particle-bg";
@@ -14,20 +14,29 @@ import { ClawFeed } from "@/components/dashboard/claw-feed";
 import { RegionRanking } from "@/components/dashboard/region-ranking";
 import { cn } from "@/lib/utils";
 
-const ContinentMap = dynamic(
+const WorldMap = dynamic(
   () =>
-    import("@/components/map/continent-map").then((m) => ({
-      default: m.ContinentMap,
+    import("@/components/map/world-map").then((m) => ({
+      default: m.WorldMap,
     })),
-  { ssr: false }
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--accent-cyan)] border-t-transparent" />
+          <span className="font-mono text-xs text-[var(--text-muted)]">Loading map...</span>
+        </div>
+      </div>
+    ),
+  }
 );
 
-const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
+type ViewMode = "2d" | "3d";
 
 export default function HomePage() {
-  const [activeContinent, setActiveContinent] = useState<string>("asia");
-  const tContinents = useTranslations("continents");
-  const tRegion = useTranslations("regionExplorer");
+  const [viewMode, setViewMode] = useState<ViewMode>("2d");
+  const tNavbar = useTranslations("navbar");
 
   return (
     <div className="relative min-h-screen">
@@ -35,11 +44,12 @@ export default function HomePage() {
       <Navbar />
 
       <main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
-        {/* Section 1: Globe + Dashboard */}
+        {/* Section 1: Main Map View + Dashboard */}
         <section className="min-h-[calc(100vh-5rem)]">
           <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">
@@ -47,11 +57,49 @@ export default function HomePage() {
               <RegionRanking />
             </div>
 
-            {/* Center - Globe + Timeline */}
+            {/* Center - Map/Globe + Timeline */}
             <div className="flex flex-col gap-4">
-              <div className="h-[500px] lg:h-[600px]">
-                <GlobeView />
+              {/* View Switcher + Map Container */}
+              <div className="relative h-[500px] lg:h-[600px]">
+                {/* View Mode Toggle */}
+                <div className="absolute left-4 top-4 z-20 flex rounded-lg border border-white/10 bg-[var(--bg-card)]/90 p-1 backdrop-blur-sm">
+                  <button
+                    onClick={() => setViewMode("2d")}
+                    className={cn(
+                      "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
+                      viewMode === "2d"
+                        ? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
+                        : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+                    )}
+                  >
+                    <Map className="h-3.5 w-3.5" />
+                    {tNavbar("map")}
+                  </button>
+                  <button
+                    onClick={() => setViewMode("3d")}
+                    className={cn(
+                      "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
+                      viewMode === "3d"
+                        ? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
+                        : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+                    )}
+                  >
+                    <Globe className="h-3.5 w-3.5" />
+                    {tNavbar("globe")}
+                  </button>
+                </div>
+
+                {/* Map View */}
+                {viewMode === "2d" && (
+                  <WorldMap className="h-full w-full" />
+                )}
+
+                {/* Globe View */}
+                {viewMode === "3d" && (
+                  <GlobeView />
+                )}
               </div>
+
               <ActivityTimeline />
             </div>
 
@@ -61,47 +109,6 @@ export default function HomePage() {
             </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>
-
-          {/* 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>
-
-          {/* Map — explicit height so MapLibre can render */}
-          <ContinentMap
-            key={activeContinent}
-            slug={activeContinent}
-            className="h-[calc(100vh-14rem)]"
-          />
-        </section>
       </main>
     </div>
   );