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

components/dashboard/stats-panel.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { useEffect, useState, useRef } from "react";
+import { useTranslations, useLocale } from "next-intl";
 import { Card, CardContent } from "@/components/ui/card";
 import { Users, Zap, Clock, Activity } from "lucide-react";
 
 interface Stats {
-  totalLobsters: number;
-  activeLobsters: number;
+  totalClaws: number;
+  activeClaws: number;
   tasksToday: number;
   tasksTotal: number;
   avgTaskDuration: number;
@@ -42,8 +43,9 @@ function AnimatedNumber({ value, suffix = "" }: { value: number; suffix?: string
     requestAnimationFrame(animate);
   }, [value]);
 
+  const locale = useLocale();
   const formatted = Number.isInteger(value)
-    ? Math.round(display).toLocaleString()
+    ? Math.round(display).toLocaleString(locale)
     : display.toFixed(1);
 
   return (
@@ -56,29 +58,29 @@ function AnimatedNumber({ value, suffix = "" }: { value: number; suffix?: string
 
 const statCards = [
   {
-    key: "activeLobsters" as const,
-    label: "Online Now",
+    key: "activeClaws" as const,
+    labelKey: "onlineNow" as const,
     icon: Activity,
     color: "var(--accent-green)",
     glow: "0 0 20px rgba(16, 185, 129, 0.3)",
   },
   {
-    key: "totalLobsters" as const,
-    label: "Total Lobsters",
+    key: "totalClaws" as const,
+    labelKey: "totalClaws" as const,
     icon: Users,
     color: "var(--accent-cyan)",
     glow: "var(--glow-cyan)",
   },
   {
     key: "tasksToday" as const,
-    label: "Tasks Today",
+    labelKey: "tasksToday" as const,
     icon: Zap,
     color: "var(--accent-purple)",
     glow: "var(--glow-purple)",
   },
   {
     key: "avgTaskDuration" as const,
-    label: "Avg Duration",
+    labelKey: "avgDuration" as const,
     icon: Clock,
     color: "var(--accent-orange)",
     glow: "0 0 20px rgba(245, 158, 11, 0.3)",
@@ -88,9 +90,10 @@ const statCards = [
 ];
 
 export function StatsPanel() {
+  const t = useTranslations("stats");
   const [stats, setStats] = useState<Stats>({
-    totalLobsters: 0,
-    activeLobsters: 0,
+    totalClaws: 0,
+    activeClaws: 0,
     tasksToday: 0,
     tasksTotal: 0,
     avgTaskDuration: 0,
@@ -116,7 +119,7 @@ export function StatsPanel() {
 
   return (
     <div className="flex flex-col gap-3">
-      {statCards.map(({ key, label, icon: Icon, color, glow, suffix, transform }) => {
+      {statCards.map(({ key, labelKey, icon: Icon, color, glow, suffix, transform }) => {
         const raw = stats[key];
         const value = transform ? transform(raw) : raw;
         return (
@@ -133,7 +136,7 @@ export function StatsPanel() {
                 <Icon className="h-5 w-5" style={{ color }} />
               </div>
               <div className="min-w-0">
-                <p className="text-xs text-[var(--text-muted)]">{label}</p>
+                <p className="text-xs text-[var(--text-muted)]">{t(labelKey)}</p>
                 <p
                   className="font-mono text-xl font-bold"
                   style={{ color, textShadow: glow }}