feat(页面): 添加区域探索与国家边界功能

components/globe/globe-view.tsx

@@ -2,8 +2,9 @@
 
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
 import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
+import { useCountryData, type LabelData } from "./use-country-data";
 import { GlobeControls } from "./globe-controls";
 
 function GlobeLoading() {
@@ -34,6 +35,7 @@ interface ArcData {
 export function GlobeView() {
   const t = useTranslations("globe");
   const tPopup = useTranslations("clawPopup");
+  const locale = useLocale();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const globeRef = useRef<any>(undefined);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -41,6 +43,7 @@ export function GlobeView() {
   const [hoveredPoint, setHoveredPoint] = useState<HeatmapPoint | null>(null);
   const [selectedPoint, setSelectedPoint] = useState<HeatmapPoint | null>(null);
   const { points } = useHeatmapData(30000);
+  const { countries, labels } = useCountryData(locale);
 
   // Generate arcs only between online points
   const arcs = useMemo((): ArcData[] => {
@@ -117,6 +120,32 @@ export function GlobeView() {
           globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg"
           atmosphereColor="#00f0ff"
           atmosphereAltitude={0.15}
+          // Country polygons
+          polygonsData={countries}
+          polygonCapColor={() => "rgba(26, 31, 46, 0.6)"}
+          polygonSideColor={() => "rgba(0, 240, 255, 0.05)"}
+          polygonStrokeColor={() => "rgba(0, 240, 255, 0.15)"}
+          polygonAltitude={0.005}
+          // Country name labels (use HTML elements for CJK support)
+          htmlElementsData={labels}
+          htmlLat={(d: object) => (d as LabelData).lat}
+          htmlLng={(d: object) => (d as LabelData).lng}
+          htmlAltitude={0.01}
+          htmlElement={(d: object) => {
+            const label = d as LabelData;
+            const el = document.createElement("div");
+            el.textContent = label.name;
+            el.style.color = "rgba(0, 240, 255, 0.5)";
+            el.style.fontSize = "10px";
+            el.style.fontFamily = "system-ui, -apple-system, sans-serif";
+            el.style.pointerEvents = "none";
+            el.style.userSelect = "none";
+            el.style.whiteSpace = "nowrap";
+            el.style.textShadow = "0 0 4px rgba(0, 240, 255, 0.3)";
+            return el;
+          }}
+          // Graticules
+          showGraticules={true}
           // Points
           pointsData={points}
           pointLat={(d: object) => (d as HeatmapPoint).lat}

components/globe/use-country-data.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect, useMemo } from "react";
+import { feature } from "topojson-client";
+import type { Topology, GeometryCollection } from "topojson-specification";
+import type { FeatureCollection, Feature, Geometry } from "geojson";
+import { COUNTRY_LABELS } from "@/lib/geo/country-labels";
+
+const TOPOJSON_URL =
+  "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
+
+export interface LabelData {
+  lat: number;
+  lng: number;
+  name: string;
+}
+
+export function useCountryData(locale: string) {
+  const [countries, setCountries] = useState<Feature<Geometry>[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetch(TOPOJSON_URL)
+      .then((res) => res.json())
+      .then((topo: Topology) => {
+        if (cancelled) return;
+        const geo = feature(
+          topo,
+          topo.objects.countries as GeometryCollection
+        ) as FeatureCollection;
+        setCountries(geo.features);
+        setIsLoading(false);
+      })
+      .catch(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const labels: LabelData[] = useMemo(() => {
+    const lang = locale === "zh" ? "zh" : "en";
+    return COUNTRY_LABELS.map((c) => ({
+      lat: c.lat,
+      lng: c.lng,
+      name: c[lang],
+    }));
+  }, [locale]);
+
+  return { countries, labels, isLoading };
+}