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}