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

components/globe/globe-view.tsx

@@ -2,19 +2,25 @@
 
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import dynamic from "next/dynamic";
+import { useTranslations } from "next-intl";
 import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
 import { GlobeControls } from "./globe-controls";
 
-const Globe = dynamic(() => import("react-globe.gl"), {
-  ssr: false,
-  loading: () => (
+function GlobeLoading() {
+  const t = useTranslations("globe");
+  return (
     <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-3">
         <div className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--accent-cyan)] border-t-transparent" />
-        <span className="font-mono text-xs text-[var(--text-muted)]">Loading globe...</span>
+        <span className="font-mono text-xs text-[var(--text-muted)]">{t("loading")}</span>
       </div>
     </div>
-  ),
+  );
+}
+
+const Globe = dynamic(() => import("react-globe.gl"), {
+  ssr: false,
+  loading: () => <GlobeLoading />,
 });
 
 interface ArcData {
@@ -26,6 +32,7 @@ interface ArcData {
 }
 
 export function GlobeView() {
+  const t = useTranslations("globe");
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const globeRef = useRef<any>(undefined);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -143,7 +150,7 @@ export function GlobeView() {
               </div>
             </div>
             <p className="mt-1 text-xs text-[var(--text-secondary)]">
-              {hoveredPoint.lobsterCount} active lobster{hoveredPoint.lobsterCount !== 1 ? "s" : ""}
+              {t("activeClaws", { count: hoveredPoint.clawCount })}
             </p>
           </div>
         </div>