feat(i18n): Dashboard 页面内容国际化迁移 — 3 组件(Dashboard/DashboardCharts/DashboardRecent)硬编码中文改翻译键 + zh-CN/en-US 新增 dashboard.* 121 键(241 total)

- Dashboard.tsx: 标题/副标题/刷新/服务器按钮/StatStrip 7 标签/概览卡片标题 全部 t() 化
- DashboardCharts.tsx: 云成本概览/Top5资源使用/费用分布/月度趋势/环比标签 i18n(computeMonthChange 用 i18n.t 避开非组件上下文)
- DashboardRecent.tsx: 告警消息/证书到期/发布历史/服务器状态/集群状态 5 卡片全量 i18n
- zh-CN.json/en-US.json: dashboard 命名空间扩展 stat/alerts/certificates/releases/serversStatus/clusters/cost/topUsage/system 9 子分组
- 翻译键总数 120→241 (zh-CN/en-US 完全对齐)
- tsc -b=0, npm build=✓(19.01s), 17/17 集成测试通过, Docker healthy

frontend/src/components/dashboard/DashboardCharts.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+import i18n from '@/i18n';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -39,16 +41,16 @@ export function computeMonthChange( monthTrend: JsonData[]): {
   direction: 'up' | 'down' | 'neutral';
 } {
   if (!monthTrend || monthTrend.length < 2) {
-    return { pct: 0, label: '暂无数据', direction: 'neutral' };
+    return { pct: 0, label: i18n.t('dashboard.cost.noData'), direction: 'neutral' };
   }
   const cur = Number(monthTrend[monthTrend.length - 1].cost ?? 0);
   const prev = Number(monthTrend[monthTrend.length - 2].cost ?? 0);
   if (prev === 0) {
-    return { pct: 0, label: cur > 0 ? '新增费用' : '持平', direction: 'neutral' };
+    return { pct: 0, label: cur > 0 ? i18n.t('dashboard.cost.newCost') : i18n.t('dashboard.cost.flat'), direction: 'neutral' };
   }
   const pct = ((cur - prev) / prev) * 100;
   const direction = pct > 0.05 ? 'up' : pct < -0.05 ? 'down' : 'neutral';
-  const label = `${pct > 0 ? '+' : ''}${pct.toFixed(1)}% 较上月`;
+  const label = `${pct > 0 ? '+' : ''}${pct.toFixed(1)}% ${i18n.t('dashboard.cost.vsLastMonth')}`;
   return { pct, label, direction };
 }
 
@@ -108,6 +110,7 @@ function CustomTooltip({ active, payload, label }: JsonData) {
 }
 
 export function CostOverviewCard({ costStats }: { costStats: JsonData }) {
+  const { t } = useTranslation();
   const cloudCosts: JsonData[] = costStats?.cloud_costs ?? [];
   const monthTrend: JsonData[] = costStats?.month_trend ?? [];
 
@@ -125,8 +128,8 @@ export function CostOverviewCard({ costStats }: { costStats: JsonData }) {
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">云成本概览</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">本月各云平台费用支出</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.cost.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.cost.description')}</CardDescription>
           </div>
           <div className="text-right">
             <p className="text-2xl font-bold text-[var(--dg-text-primary)] tracking-tight">
@@ -146,7 +149,7 @@ export function CostOverviewCard({ costStats }: { costStats: JsonData }) {
       <CardContent>
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">费用分布</p>
+            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">{t('dashboard.cost.distribution')}</p>
             <div className="h-[180px]">
               <ResponsiveContainer width="100%" height="100%">
                 <PieChart>
@@ -170,7 +173,7 @@ export function CostOverviewCard({ costStats }: { costStats: JsonData }) {
             </div>
           </div>
           <div>
-            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">月度趋势</p>
+            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">{t('dashboard.cost.monthlyTrend')}</p>
             <div className="h-[180px]">
               <ResponsiveContainer width="100%" height="100%">
                 <BarChart data={monthlyData} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
@@ -203,6 +206,7 @@ export function CostOverviewCard({ costStats }: { costStats: JsonData }) {
 }
 
 export function TopResourceUsageCard({ topUsage }: { topUsage: JsonData}) {
+  const { t } = useTranslation();
   const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
   const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
   const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);
@@ -257,15 +261,15 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: JsonData}) {
     <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
         <div>
-          <CardTitle className="text-[var(--dg-text-primary)]">Top5 资源使用</CardTitle>
-          <CardDescription className="text-[var(--dg-text-muted)]">CPU、内存、磁盘使用率最高</CardDescription>
+          <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.topUsage.title')}</CardTitle>
+          <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.topUsage.description')}</CardDescription>
         </div>
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-3 gap-4">
-          {renderList(topCpuServers, 'blue', 'bg-[var(--dg-blue)]', <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />, 'CPU')}
-          {renderList(topMemoryServers, 'emerald', 'bg-[var(--dg-green)]', <MemoryStick className="h-4 w-4 text-[var(--dg-green)]" />, '内存')}
-          {renderList(topDiskServers, 'purple', 'bg-[var(--dg-purple)]', <Database className="h-4 w-4 text-[var(--dg-purple)]" />, '磁盘')}
+          {renderList(topCpuServers, 'blue', 'bg-[var(--dg-blue)]', <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />, t('dashboard.topUsage.cpu'))}
+          {renderList(topMemoryServers, 'emerald', 'bg-[var(--dg-green)]', <MemoryStick className="h-4 w-4 text-[var(--dg-green)]" />, t('dashboard.topUsage.memory'))}
+          {renderList(topDiskServers, 'purple', 'bg-[var(--dg-purple)]', <Database className="h-4 w-4 text-[var(--dg-purple)]" />, t('dashboard.topUsage.disk'))}
         </div>
       </CardContent>
     </Card>
@@ -285,27 +289,28 @@ export function ResourceUsageCard({
 }) {
   const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
   const data = realData.length > 0 ? realData : generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
+  const { t } = useTranslation();
 
   return (
     <Card className="dg-card">
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between flex-wrap gap-3">
           <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">资源使用率趋势</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">过去24小时系统资源使用情况</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.resourceUsage.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.resourceUsage.description')}</CardDescription>
           </div>
           <div className="flex items-center gap-2">
             <Badge variant="outline" className="dg-badge-blue border">
               <Cpu className="h-3 w-3 mr-1" />
-              CPU
+              {t('dashboard.resourceUsage.cpu')}
             </Badge>
             <Badge variant="outline" className="dg-badge-green border">
               <Activity className="h-3 w-3 mr-1" />
-              内存
+              {t('dashboard.resourceUsage.memory')}
             </Badge>
             <Badge variant="outline" className="dg-badge-purple border">
               <HardDrive className="h-3 w-3 mr-1" />
-              磁盘
+              {t('dashboard.resourceUsage.disk')}
             </Badge>
           </div>
         </div>
@@ -332,9 +337,9 @@ export function ResourceUsageCard({
               <XAxis dataKey="time" stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} />
               <YAxis stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} unit="%" />
               <Tooltip content={<CustomTooltip />} />
-              <Area type="monotone" dataKey="cpu" stroke="var(--dg-blue)" fillOpacity={1} fill="url(#colorCpu)" strokeWidth={2} name="CPU" />
-              <Area type="monotone" dataKey="memory" stroke="var(--dg-green)" fillOpacity={1} fill="url(#colorMemory)" strokeWidth={2} name="内存" />
-              <Area type="monotone" dataKey="disk" stroke="var(--dg-purple)" fillOpacity={1} fill="url(#colorDisk)" strokeWidth={2} name="磁盘" />
+              <Area type="monotone" dataKey="cpu" stroke="var(--dg-blue)" fillOpacity={1} fill="url(#colorCpu)" strokeWidth={2} name={t('dashboard.resourceUsage.cpu')} />
+              <Area type="monotone" dataKey="memory" stroke="var(--dg-green)" fillOpacity={1} fill="url(#colorMemory)" strokeWidth={2} name={t('dashboard.resourceUsage.memory')} />
+              <Area type="monotone" dataKey="disk" stroke="var(--dg-purple)" fillOpacity={1} fill="url(#colorDisk)" strokeWidth={2} name={t('dashboard.resourceUsage.disk')} />
             </AreaChart>
           </ResponsiveContainer>
         </div>