重构：将 "lobster" 重命名为 "claw" 并添加国际化支持 (i18n)

components/map/continent-map.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useMemo } from "react";
+import { useTranslations } from "next-intl";
 import {
   ComposableMap,
   Geographies,
@@ -18,15 +19,14 @@ const GEO_URL = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"
 interface ContinentConfig {
   center: [number, number];
   zoom: number;
-  label: string;
 }
 
 const continentConfigs: Record<string, ContinentConfig> = {
-  asia: { center: [100, 35], zoom: 2.5, label: "Asia" },
-  europe: { center: [15, 52], zoom: 4, label: "Europe" },
-  americas: { center: [-80, 15], zoom: 1.8, label: "Americas" },
-  africa: { center: [20, 5], zoom: 2.2, label: "Africa" },
-  oceania: { center: [145, -25], zoom: 3, label: "Oceania" },
+  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 continentRegionMap: Record<string, string> = {
@@ -42,6 +42,7 @@ interface ContinentMapProps {
 }
 
 export function ContinentMap({ slug }: ContinentMapProps) {
+  const t = useTranslations("continentMap");
   const config = continentConfigs[slug] ?? continentConfigs.asia;
   const regionFilter = continentRegionMap[slug];
   const { points } = useHeatmapData(30000);
@@ -125,8 +126,8 @@ export function ContinentMap({ slug }: ContinentMapProps) {
               </button>
             </div>
             <div className="mt-2 flex gap-2">
-              <Badge variant="online">{selectedPoint.lobsterCount} lobsters</Badge>
-              <Badge variant="secondary">weight: {selectedPoint.weight.toFixed(1)}</Badge>
+              <Badge variant="online">{t("claws", { count: selectedPoint.clawCount })}</Badge>
+              <Badge variant="secondary">{t("weight", { value: selectedPoint.weight.toFixed(1) })}</Badge>
             </div>
           </CardContent>
         </Card>

components/map/heatmap-layer.tsx

@@ -46,7 +46,7 @@ export function HeatmapLayer({ points, projection, onPointClick }: HeatmapLayerP
               onClick={() => onPointClick?.(point)}
             />
             {/* Count label */}
-            {point.lobsterCount > 1 && (
+            {point.clawCount > 1 && (
               <text
                 x={x}
                 y={y - radius - 4}
@@ -55,7 +55,7 @@ export function HeatmapLayer({ points, projection, onPointClick }: HeatmapLayerP
                 fontSize={9}
                 fontFamily="var(--font-mono)"
               >
-                {point.lobsterCount}
+                {point.clawCount}
               </text>
             )}
           </g>