feat: 用 react-map-gl + MapLibre 替换 react-simple-maps 实现 2D 地图

- 替换 react-simple-maps/d3-geo/topojson-client 为 react-map-gl + maplibre-gl
- 使用 CARTO dark-matter 免费暗色瓦片，自带国家/城市名标注
- 基于 locale 动态切换地图标注语言（name:zh / name_en）
- MapLibre 原生 heatmap + circle 双层渲染替代 SVG 热力图
- 提取 MapPopup 组件，配合 react-map-gl Popup 实现点击弹窗
- continent page 改为 dynamic import (ssr: false)
- dev 模式去掉 Turbopack 以兼容 maplibre-gl
- 删除 heatmap-layer.tsx 和 react-simple-maps 类型声明

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

@@ -1,14 +1,22 @@
 "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 { ContinentMap } from "@/components/map/continent-map";
 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 {

app/[locale]/layout.tsx

@@ -37,6 +37,22 @@ export async function generateMetadata({
         routing.locales.map((l) => [l, `/${l}`])
       ),
     },
+    other: {
+      "application/ld+json": JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "SoftwareApplication",
+        name: "openclaw-reporter",
+        applicationCategory: "DeveloperApplication",
+        operatingSystem: "macOS, Linux, Windows",
+        description:
+          "A Claude Code skill that lets you join the OpenClaw global heatmap. Sends anonymous heartbeats (platform + model only) and generic task summaries. Install via: clawhub install openclaw-reporter",
+        url: "https://kymr.top/",
+        installUrl: "https://clawhub.com/skills/openclaw-reporter",
+        offers: { "@type": "Offer", price: "0", priceCurrency: "USD" },
+        permissions:
+          "Network access to https://kymr.top/, write to ~/.openclaw/, binaries: curl, python3, uname",
+      }),
+    },
   };
 }
 

app/[locale]/page.tsx

@@ -39,6 +39,7 @@ export default function HomePage() {
             <ClawFeed />
           </div>
         </div>
+
       </main>
     </div>
   );

app/api/v1/claws/route.ts

@@ -10,6 +10,7 @@ export async function GET(req: NextRequest) {
     const limitParam = parseInt(searchParams.get("limit") ?? "50", 10);
     const limit = Math.min(Math.max(1, limitParam), 200);
     const region = searchParams.get("region");
+    const sort = searchParams.get("sort") ?? "activity";
 
     const conditions = [];
     if (region) {
@@ -22,7 +23,7 @@ export async function GET(req: NextRequest) {
       .select()
       .from(claws)
       .where(whereClause)
-      .orderBy(desc(claws.lastHeartbeat))
+      .orderBy(sort === "newest" ? desc(claws.createdAt) : desc(claws.lastHeartbeat))
       .limit(limit);
 
     const totalResult = await db
@@ -57,6 +58,7 @@ export async function GET(req: NextRequest) {
           city: claw.city,
           country: claw.country,
           isOnline: activeSet.has(claw.id),
+          createdAt: claw.createdAt,
           lastTask,
         };
       })

app/api/v1/heatmap/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { gte, and, isNotNull, sql } from "drizzle-orm";
+import { and, isNotNull, sql } from "drizzle-orm";
 import { db } from "@/lib/db";
 import { claws } from "@/lib/db/schema";
 import { getCacheHeatmap, setCacheHeatmap } from "@/lib/redis";
@@ -13,18 +13,19 @@ export async function GET() {
 
     const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
 
-    const activeClaws = await db
+    // 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(
-          gte(claws.lastHeartbeat, fiveMinutesAgo),
           isNotNull(claws.latitude),
           isNotNull(claws.longitude)
         )
@@ -36,14 +37,49 @@ export async function GET() {
         claws.longitude
       );
 
-    const points = activeClaws.map((row) => ({
-      lat: Number(row.latitude),
-      lng: Number(row.longitude),
-      weight: row.count,
-      clawCount: row.count,
-      city: row.city,
-      country: row.country,
-    }));
+    // Fetch individual claw details for all claws with coordinates
+    const clawDetails = await db
+      .select({
+        id: claws.id,
+        name: claws.name,
+        city: claws.city,
+        country: claws.country,
+        latitude: claws.latitude,
+        longitude: claws.longitude,
+        lastHeartbeat: claws.lastHeartbeat,
+      })
+      .from(claws)
+      .where(
+        and(
+          isNotNull(claws.latitude),
+          isNotNull(claws.longitude)
+        )
+      );
+
+    // Group claw details by location key
+    const clawsByLocation = new Map<string, Array<{ id: string; name: string; isOnline: boolean }>>();
+    for (const claw of clawDetails) {
+      const key = `${claw.latitude}:${claw.longitude}`;
+      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);
+    }
+
+    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,
+      };
+    });
 
     const lastUpdated = new Date().toISOString();
     const responseData = { points, lastUpdated };

app/api/v1/register/route.ts

@@ -67,7 +67,7 @@ export async function POST(req: NextRequest) {
     }
 
     await publishEvent({
-      type: "online",
+      type: "registered",
       clawId,
       clawName: name,
       city: geo?.city ?? null,

app/globals.css

@@ -153,3 +153,21 @@ body {
 *::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 240, 255, 0.4);
 }
+
+/* === MapLibre Dark Popup === */
+.maplibre-dark-popup .maplibregl-popup-content {
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid rgba(0, 240, 255, 0.15);
+  border-radius: 0.75rem;
+  box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
+  padding: 0.75rem;
+}
+
+.maplibre-dark-popup .maplibregl-popup-tip {
+  border-top-color: var(--bg-card);
+}
+
+.maplibre-dark-popup .maplibregl-popup-close-button {
+  display: none;
+}