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

components/dashboard/region-ranking.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { motion } from "framer-motion";
 
@@ -18,7 +19,17 @@ const regionColors: Record<string, string> = {
   Oceania: "var(--accent-green)",
 };
 
+const regionNameToKey: Record<string, string> = {
+  Asia: "asia",
+  Europe: "europe",
+  Americas: "americas",
+  Africa: "africa",
+  Oceania: "oceania",
+};
+
 export function RegionRanking() {
+  const t = useTranslations("regionRanking");
+  const tContinents = useTranslations("continents");
   const [regions, setRegions] = useState<RegionData[]>([]);
 
   useEffect(() => {
@@ -52,11 +63,11 @@ export function RegionRanking() {
   return (
     <Card className="border-white/5">
       <CardHeader className="pb-2">
-        <CardTitle>Region Ranking</CardTitle>
+        <CardTitle>{t("title")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3 p-4 pt-0">
         {regions.length === 0 ? (
-          <p className="py-4 text-center text-xs text-[var(--text-muted)]">No data yet</p>
+          <p className="py-4 text-center text-xs text-[var(--text-muted)]">{t("noData")}</p>
         ) : (
           regions.map((region, i) => (
             <div key={region.name} className="space-y-1">
@@ -66,7 +77,9 @@ export function RegionRanking() {
                     #{i + 1}
                   </span>
                   <span className="text-sm font-medium" style={{ color: region.color }}>
-                    {region.name}
+                    {regionNameToKey[region.name]
+                      ? tContinents(regionNameToKey[region.name] as "asia" | "europe" | "americas" | "africa" | "oceania")
+                      : region.name}
                   </span>
                 </div>
                 <span className="font-mono text-xs text-[var(--text-secondary)]">