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

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

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,