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>
   );

app/api/v1/heatmap/route.ts

@@ -1,8 +1,9 @@
 import { NextResponse } from "next/server";
-import { and, isNotNull, sql } from "drizzle-orm";
+import { and, isNotNull } from "drizzle-orm";
 import { db } from "@/lib/db";
 import { claws } from "@/lib/db/schema";
 import { getCacheHeatmap, setCacheHeatmap } from "@/lib/redis";
+import { applyDeterministicOffset } from "@/lib/geo/offset";
 
 export async function GET() {
   try {
@@ -13,31 +14,7 @@ export async function GET() {
 
     const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
 
-    // Query all claws with coordinates, grouped by location
-    const locationRows = await db
-      .select({
-        city: claws.city,
-        country: claws.country,
-        latitude: claws.latitude,
-        longitude: claws.longitude,
-        count: sql<number>`count(*)`,
-        onlineCount: sql<number>`sum(case when ${claws.lastHeartbeat} >= ${fiveMinutesAgo} then 1 else 0 end)`,
-      })
-      .from(claws)
-      .where(
-        and(
-          isNotNull(claws.latitude),
-          isNotNull(claws.longitude)
-        )
-      )
-      .groupBy(
-        claws.city,
-        claws.country,
-        claws.latitude,
-        claws.longitude
-      );
-
-    // Fetch individual claw details for all claws with coordinates
+    // Fetch all claws with base coordinates
     const clawDetails = await db
       .select({
         id: claws.id,
@@ -56,30 +33,56 @@ export async function GET() {
         )
       );
 
-    // Group claw details by location key
-    const clawsByLocation = new Map<string, Array<{ id: string; name: string; isOnline: boolean }>>();
+    // Apply deterministic offset to each claw and group by unique coordinates
+    const pointMap = new Map<string, {
+      lat: number;
+      lng: number;
+      city: string | null;
+      country: string | null;
+      claws: Array<{ id: string; name: string; isOnline: boolean }>;
+      onlineCount: number;
+    }>();
+
     for (const claw of clawDetails) {
-      const key = `${claw.latitude}:${claw.longitude}`;
+      if (!claw.latitude || !claw.longitude) continue;
+
+      const baseLat = Number(claw.latitude);
+      const baseLng = Number(claw.longitude);
+
+      // Apply deterministic offset based on claw ID
+      const offset = applyDeterministicOffset(baseLat, baseLng, claw.id);
       const isOnline = claw.lastHeartbeat ? claw.lastHeartbeat >= fiveMinutesAgo : false;
-      const list = clawsByLocation.get(key) ?? [];
-      list.push({ id: claw.id, name: claw.name, isOnline });
-      clawsByLocation.set(key, list);
+
+      // Use rounded coordinates as key for grouping (within ~100m)
+      const key = `${offset.lat.toFixed(4)}:${offset.lng.toFixed(4)}`;
+
+      const existing = pointMap.get(key);
+      if (existing) {
+        existing.claws.push({ id: claw.id, name: claw.name, isOnline });
+        if (isOnline) existing.onlineCount++;
+      } else {
+        pointMap.set(key, {
+          lat: offset.lat,
+          lng: offset.lng,
+          city: claw.city,
+          country: claw.country,
+          claws: [{ id: claw.id, name: claw.name, isOnline }],
+          onlineCount: isOnline ? 1 : 0,
+        });
+      }
     }
 
-    const points = locationRows.map((row) => {
-      const key = `${row.latitude}:${row.longitude}`;
-      const clawList = (clawsByLocation.get(key) ?? []).slice(0, 20);
-      return {
-        lat: Number(row.latitude),
-        lng: Number(row.longitude),
-        weight: row.count,
-        clawCount: row.count,
-        onlineCount: Number(row.onlineCount ?? 0),
-        city: row.city,
-        country: row.country,
-        claws: clawList,
-      };
-    });
+    // Convert map to array of points
+    const points = Array.from(pointMap.values()).map((point) => ({
+      lat: point.lat,
+      lng: point.lng,
+      weight: point.claws.length,
+      clawCount: point.claws.length,
+      onlineCount: point.onlineCount,
+      city: point.city,
+      country: point.country,
+      claws: point.claws.slice(0, 20), // Limit to 20 claws per point for display
+    }));
 
     const lastUpdated = new Date().toISOString();
     const responseData = { points, lastUpdated };

app/api/v1/register/route.ts

@@ -11,6 +11,7 @@ import {
 } from "@/lib/redis";
 import { generateApiKey } from "@/lib/auth/api-key";
 import { getGeoLocation } from "@/lib/geo/ip-location";
+import { applyDeterministicOffset } from "@/lib/geo/offset";
 import { registerSchema } from "@/lib/validators/schemas";
 
 function getClientIp(req: NextRequest): string {
@@ -39,6 +40,15 @@ export async function POST(req: NextRequest) {
     const geo = await getGeoLocation(clientIp);
     const now = new Date();
 
+    // Apply deterministic offset to spread out users in the same city
+    let finalLat: number | null = null;
+    let finalLng: number | null = null;
+    if (geo) {
+      const offset = applyDeterministicOffset(geo.latitude, geo.longitude, clawId);
+      finalLat = offset.lat;
+      finalLng = offset.lng;
+    }
+
     await db.insert(claws).values({
       id: clawId,
       apiKey,
@@ -46,8 +56,8 @@ export async function POST(req: NextRequest) {
       model: model ?? null,
       platform: platform ?? null,
       ip: clientIp,
-      latitude: geo ? String(geo.latitude) : null,
-      longitude: geo ? String(geo.longitude) : null,
+      latitude: finalLat !== null ? String(finalLat) : null,
+      longitude: finalLng !== null ? String(finalLng) : null,
       city: geo?.city ?? null,
       country: geo?.country ?? null,
       countryCode: geo?.countryCode ?? null,