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 类型声明

components/map/continent-map.tsx

@@ -1,40 +1,89 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import { useTranslations } from "next-intl";
-import {
-  ComposableMap,
-  Geographies,
-  Geography,
-  ZoomableGroup,
-} from "react-simple-maps";
+import { useState, useMemo, useCallback } from "react";
+import { useLocale } from "next-intl";
+import Map, { Source, Layer, Popup } from "react-map-gl/maplibre";
+import type { MapLayerMouseEvent, LngLatLike, MapRef } from "react-map-gl/maplibre";
+import type { LayerSpecification } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
 import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
-import { HeatmapLayer } from "./heatmap-layer";
-import { geoMercator } from "d3-geo";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { MapPopup } from "./map-popup";
 
-const GEO_URL = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
+const CARTO_STYLE =
+  "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
 
-interface ContinentConfig {
-  center: [number, number];
+interface ContinentViewport {
+  longitude: number;
+  latitude: number;
   zoom: number;
 }
 
-const continentConfigs: Record<string, ContinentConfig> = {
-  asia: { center: [100, 35], zoom: 2.5 },
-  europe: { center: [15, 52], zoom: 4 },
-  americas: { center: [-80, 15], zoom: 1.8 },
-  africa: { center: [20, 5], zoom: 2.2 },
-  oceania: { center: [145, -25], zoom: 3 },
+const continentConfigs: Record<string, ContinentViewport> = {
+  asia: { longitude: 100, latitude: 35, zoom: 2.5 },
+  europe: { longitude: 15, latitude: 52, zoom: 3.5 },
+  americas: { longitude: -80, latitude: 15, zoom: 2.0 },
+  africa: { longitude: 20, latitude: 5, zoom: 2.5 },
+  oceania: { longitude: 145, latitude: -25, zoom: 3.0 },
 };
 
-const continentRegionMap: Record<string, string> = {
-  asia: "Asia",
-  europe: "Europe",
-  americas: "Americas",
-  africa: "Africa",
-  oceania: "Oceania",
+const heatmapLayer: LayerSpecification = {
+  id: "claw-heat",
+  type: "heatmap",
+  source: "claws",
+  paint: {
+    "heatmap-weight": ["get", "weight"],
+    "heatmap-intensity": 1,
+    "heatmap-radius": 30,
+    "heatmap-opacity": 0.6,
+    "heatmap-color": [
+      "interpolate",
+      ["linear"],
+      ["heatmap-density"],
+      0,
+      "rgba(0,0,0,0)",
+      0.2,
+      "rgba(0,240,255,0.15)",
+      0.4,
+      "rgba(0,240,255,0.3)",
+      0.6,
+      "rgba(0,200,220,0.5)",
+      1,
+      "rgba(0,240,255,0.8)",
+    ],
+  },
+};
+
+const circleLayer: LayerSpecification = {
+  id: "claw-circles",
+  type: "circle",
+  source: "claws",
+  paint: {
+    "circle-radius": [
+      "interpolate",
+      ["linear"],
+      ["get", "weight"],
+      1,
+      5,
+      5,
+      10,
+      10,
+      16,
+    ],
+    "circle-color": [
+      "case",
+      [">", ["get", "onlineCount"], 0],
+      "rgba(0, 240, 255, 0.7)",
+      "rgba(0, 240, 255, 0.2)",
+    ],
+    "circle-stroke-color": [
+      "case",
+      [">", ["get", "onlineCount"], 0],
+      "rgba(0, 240, 255, 0.9)",
+      "rgba(0, 240, 255, 0.3)",
+    ],
+    "circle-stroke-width": 1,
+    "circle-blur": 0.1,
+  },
 };
 
 interface ContinentMapProps {
@@ -42,96 +91,109 @@ interface ContinentMapProps {
 }
 
 export function ContinentMap({ slug }: ContinentMapProps) {
-  const t = useTranslations("continentMap");
+  const locale = useLocale();
   const config = continentConfigs[slug] ?? continentConfigs.asia;
-  const regionFilter = continentRegionMap[slug];
   const { points } = useHeatmapData(30000);
-  const [selectedPoint, setSelectedPoint] = useState<HeatmapPoint | null>(null);
+  const [popupPoint, setPopupPoint] = useState<HeatmapPoint | null>(null);
+  const [popupLngLat, setPopupLngLat] = useState<LngLatLike | null>(null);
 
-  const filteredPoints = useMemo(
-    () => (regionFilter ? points.filter(() => true) : points),
-    [points, regionFilter]
+  // Build a MapLibre expression: coalesce(get("name:zh"), get("name_en"), get("name"))
+  // For English, just use name_en with name fallback.
+  const localizedTextField =
+    locale === "en"
+      ? ["coalesce", ["get", "name_en"], ["get", "name"]]
+      : ["coalesce", ["get", `name:${locale}`], ["get", "name_en"], ["get", "name"]];
+
+  const handleLoad = useCallback(
+    (e: { target: MapRef["getMap"] extends () => infer M ? M : never }) => {
+      const map = e.target;
+      for (const layer of map.getStyle().layers ?? []) {
+        if (layer.type === "symbol") {
+          const tf = map.getLayoutProperty(layer.id, "text-field");
+          if (tf != null) {
+            map.setLayoutProperty(layer.id, "text-field", localizedTextField);
+          }
+        }
+      }
+    },
+    [localizedTextField]
   );
 
-  const projection = useMemo(
-    () =>
-      geoMercator()
-        .center(config.center)
-        .scale(150 * config.zoom)
-        .translate([400, 300]),
-    [config]
-  );
+  const geojson = useMemo(() => {
+    const features = points.map((p) => ({
+      type: "Feature" as const,
+      geometry: {
+        type: "Point" as const,
+        coordinates: [p.lng, p.lat],
+      },
+      properties: {
+        weight: p.weight,
+        clawCount: p.clawCount,
+        onlineCount: p.onlineCount,
+        city: p.city,
+        country: p.country,
+        claws: JSON.stringify(p.claws),
+      },
+    }));
+    return {
+      type: "FeatureCollection" as const,
+      features,
+    };
+  }, [points]);
 
-  const projectionFn = (coords: [number, number]): [number, number] | null => {
-    const result = projection(coords);
-    return result ?? null;
-  };
+  const handleClick = useCallback(
+    (e: MapLayerMouseEvent) => {
+      const feature = e.features?.[0];
+      if (!feature || feature.geometry.type !== "Point") {
+        setPopupPoint(null);
+        return;
+      }
+      const props = feature.properties;
+      const [lng, lat] = feature.geometry.coordinates;
+      const matched = points.find(
+        (p) => p.city === props.city && p.country === props.country
+      );
+      if (matched) {
+        setPopupPoint(matched);
+        setPopupLngLat([lng, lat]);
+      }
+    },
+    [points]
+  );
 
   return (
-    <div className="relative">
-      <div className="overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]">
-        <ComposableMap
-          projection="geoMercator"
-          projectionConfig={{
-            center: config.center,
-            scale: 150 * config.zoom,
-          }}
-          width={800}
-          height={600}
-          style={{ width: "100%", height: "auto" }}
-        >
-          <ZoomableGroup center={config.center} zoom={1}>
-            <Geographies geography={GEO_URL}>
-              {({ geographies }) =>
-                geographies.map((geo) => (
-                  <Geography
-                    key={geo.rsmKey}
-                    geography={geo}
-                    fill="#1a1f2e"
-                    stroke="#2a3040"
-                    strokeWidth={0.5}
-                    style={{
-                      default: { outline: "none" },
-                      hover: { fill: "#242a3d", outline: "none" },
-                      pressed: { outline: "none" },
-                    }}
-                  />
-                ))
-              }
-            </Geographies>
-            <HeatmapLayer
-              points={filteredPoints}
-              projection={projectionFn}
-              onPointClick={setSelectedPoint}
-            />
-          </ZoomableGroup>
-        </ComposableMap>
-      </div>
+    <div className="overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]">
+      <Map
+        initialViewState={config}
+        style={{ width: "100%", height: "calc(100vh - 12rem)" }}
+        mapStyle={CARTO_STYLE}
+        interactiveLayerIds={["claw-circles"]}
+        onClick={handleClick}
+        onLoad={handleLoad}
+        cursor="default"
+        attributionControl={false}
+      >
+        <Source id="claws" type="geojson" data={geojson}>
+          <Layer {...heatmapLayer} />
+          <Layer {...circleLayer} />
+        </Source>
 
-      {selectedPoint && (
-        <Card className="absolute bottom-4 left-4 z-10 w-64 border-[var(--accent-cyan)]/20">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">
-                  {selectedPoint.city}
-                </p>
-                <p className="text-xs text-[var(--text-muted)]">{selectedPoint.country}</p>
-              </div>
-              <button
-                onClick={() => setSelectedPoint(null)}
-                className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
-              >
-                ✕
-              </button>
-            </div>
-            <div className="mt-2 flex gap-2">
-              <Badge variant="online">{t("claws", { count: selectedPoint.clawCount })}</Badge>
-              <Badge variant="secondary">{t("weight", { value: selectedPoint.weight.toFixed(1) })}</Badge>
-            </div>
-          </CardContent>
-        </Card>
-      )}
+        {popupPoint && popupLngLat && (
+          <Popup
+            longitude={(popupLngLat as [number, number])[0]}
+            latitude={(popupLngLat as [number, number])[1]}
+            onClose={() => setPopupPoint(null)}
+            closeButton={false}
+            className="maplibre-dark-popup"
+            maxWidth="280px"
+          >
+            <MapPopup
+              point={popupPoint}
+              onClose={() => setPopupPoint(null)}
+            />
+          </Popup>
+        )}
+      </Map>
     </div>
   );
 }