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/Dashboard.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Clock, Server, ArrowRight } from 'lucide-react';
@@ -34,6 +35,7 @@ import type { AlertEventRecord, CertExpiryRecord } from '@/types';
  * 6. 添加页面标题区域的操作入口
  */
 export function Dashboard() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const [initialLoading, setInitialLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
@@ -111,8 +113,8 @@ export function Dashboard() {
       {/* Page Header */}
       <div className="dg-page-header">
         <div>
-          <h1 className="dg-page-title">仪表盘</h1>
+          <h1 className="dg-page-title">{t('dashboard.title')}</h1>
-          <p className="dg-page-subtitle">实时监控和运维概览 · 最后更新: {new Date().toLocaleTimeString('zh-CN')}</p>
+          <p className="dg-page-subtitle">{t('dashboard.subtitle')} · {t('dashboard.lastUpdated')}: {new Date().toLocaleTimeString()}</p>
         </div>
         <div className="dg-page-actions">
           <Button
@@ -122,14 +124,14 @@ export function Dashboard() {
             disabled={refreshing}
           >
             <Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
-            {refreshing ? '刷新中' : '刷新'}
+            {refreshing ? t('dashboard.refreshing') : t('dashboard.refresh')}
           </Button>
           <Button
             className="dg-btn-primary"
             onClick={() => navigate('/servers')}
           >
             <Server className="h-4 w-4" />
-            服务器
+            {t('dashboard.servers')}
             <ArrowRight className="h-3.5 w-3.5" />
           </Button>
         </div>
@@ -139,13 +141,13 @@ export function Dashboard() {
       <div className="animate-fade-in-delay-1">
         <StatStrip
           items={[
-            { label: '服务器', value: serverStats?.total ?? 0, color: 'blue' },
+            { label: t('dashboard.stat.servers'), value: serverStats?.total ?? 0, color: 'blue' },
-            { label: '运行中', value: serverStats?.running ?? 0, color: 'emerald' },
+            { label: t('dashboard.stat.running'), value: serverStats?.running ?? 0, color: 'emerald' },
-            { label: 'K8s 集群', value: k8sStats?.total ?? 0, color: 'purple' },
+            { label: t('dashboard.stat.k8sClusters'), value: k8sStats?.total ?? 0, color: 'purple' },
-            { label: '健康集群', value: k8sStats?.healthy ?? 0, color: 'cyan' },
+            { label: t('dashboard.stat.healthyClusters'), value: k8sStats?.healthy ?? 0, color: 'cyan' },
-            { label: '告警', value: alertStats?.firing ?? 0, color: alertStats?.firing > 0 ? 'red' : 'muted' },
+            { label: t('dashboard.stat.alerts'), value: alertStats?.firing ?? 0, color: alertStats?.firing > 0 ? 'red' : 'muted' },
-            { label: '严重', value: alertStats?.critical ?? 0, color: 'red' },
+            { label: t('dashboard.stat.critical'), value: alertStats?.critical ?? 0, color: 'red' },
-            { label: '本月成本', value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
+            { label: t('dashboard.stat.monthlyCost'), value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
           ]}
         />
       </div>

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>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.cost.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">本月各云平台费用支出</CardDescription>
+            <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>
+          <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.topUsage.title')}</CardTitle>
-          <CardDescription className="text-[var(--dg-text-muted)]">CPU、内存、磁盘使用率最高</CardDescription>
+          <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(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)]" />, '内存')}
+          {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)]" />, '磁盘')}
+          {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>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.resourceUsage.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">过去24小时系统资源使用情况</CardDescription>
+            <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="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="内存" />
+              <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="磁盘" />
+              <Area type="monotone" dataKey="disk" stroke="var(--dg-purple)" fillOpacity={1} fill="url(#colorDisk)" strokeWidth={2} name={t('dashboard.resourceUsage.disk')} />
             </AreaChart>
           </ResponsiveContainer>
         </div>

frontend/src/components/dashboard/DashboardRecent.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -73,6 +74,7 @@ function StatusDot({ severity }: { severity: string }) {
 
 // Severity badge
 function SeverityBadge({ severity }: { severity: string }) {
+  const { t } = useTranslation();
   return (
     <Badge
       variant="outline"
@@ -83,12 +85,13 @@ function SeverityBadge({ severity }: { severity: string }) {
         severity === 'info' && 'dg-badge-blue border',
       )}
     >
-      {severity === 'critical' ? '严重' : severity === 'warning' ? '警告' : '提示'}
+      {severity === 'critical' ? t('common.error') : severity === 'warning' ? t('common.warning') : t('common.info')}
     </Badge>
   );
 }
 
 export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
 
@@ -97,8 +100,8 @@ export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">告警消息</CardTitle>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">最近触发的告警事件</CardDescription>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.alerts.description')}</CardDescription>
           </div>
           <Button
             variant="ghost"
@@ -106,7 +109,7 @@ export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
             className="dg-btn-ghost text-xs"
             onClick={() => navigate('/alerts')}
           >
-            查看全部
+            {t('dashboard.alerts.viewAll')}
             <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
@@ -116,8 +119,8 @@ export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
           {recentAlerts.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
               <AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
-              <p className="text-sm">暂无告警事件</p>
+              <p className="text-sm">{t('dashboard.alerts.empty')}</p>
-              <p className="text-xs mt-1 opacity-60">所有系统运行正常</p>
+              <p className="text-xs mt-1 opacity-60">{t('dashboard.alerts.emptyHint')}</p>
             </div>
           ) : (
             <div className="space-y-1.5 pr-2">
@@ -152,6 +155,7 @@ export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
 }
 
 export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord[] }) {
+  const { t } = useTranslation();
   const expiringDomains = (expCerts ?? [])
     .map((d) => ({
       ...d,
@@ -167,19 +171,19 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between flex-wrap gap-2">
           <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">证书到期提醒</CardTitle>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">SSL证书到期时间监控</CardDescription>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.certificates.description')}</CardDescription>
           </div>
           <div className="flex items-center gap-2">
             {criticalCount > 0 && (
               <Badge className="dg-badge-red border">
                 <AlertTriangle className="h-3 w-3 mr-1" />
-                {criticalCount} 即将过期
+                {criticalCount} {t('dashboard.certificates.expiringSoon')}
               </Badge>
             )}
             {warningCount > 0 && (
               <Badge className="dg-badge-yellow border">
-                {warningCount} 30天内过期
+                {warningCount} {t('dashboard.certificates.expiringIn30Days')}
               </Badge>
             )}
           </div>
@@ -190,7 +194,7 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord
           {expiringDomains.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
               <Shield className="h-10 w-10 mb-3 opacity-30" />
-              <p className="text-sm">暂无证书数据</p>
+              <p className="text-sm">{t('dashboard.certificates.empty')}</p>
             </div>
           ) : (
             <div className="space-y-1.5 pr-2">
@@ -217,7 +221,7 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord
                     </div>
                     <div className="min-w-0">
                       <p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
-                      <p className="text-xs text-[var(--dg-text-muted)]">到期: {domain.expire_date?.substring(0, 10)}</p>
+                      <p className="text-xs text-[var(--dg-text-muted)]">{t('dashboard.certificates.expireDate')}: {domain.expire_date?.substring(0, 10)}</p>
                     </div>
                   </div>
                   <Badge
@@ -229,7 +233,7 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord
                       'dg-badge-green border'
                     )}
                   >
-                    {domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
+                    {domain.daysUntilExpiry < 0 ? t('dashboard.certificates.expired') : `${domain.daysUntilExpiry} ${t('dashboard.certificates.days')}`}
                   </Badge>
                 </div>
               ))}
@@ -242,6 +246,7 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord
 }
 
 export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[] }) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const releaseList = releases?.slice(0, 5) ?? [];
 
@@ -250,8 +255,8 @@ export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[]
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">发布历史</CardTitle>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">今日应用发布记录</CardDescription>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.releases.description')}</CardDescription>
           </div>
           <Button
             variant="ghost"
@@ -259,7 +264,7 @@ export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[]
             className="dg-btn-ghost text-xs"
             onClick={() => navigate('/pipelines')}
           >
-            查看全部
+            {t('dashboard.releases.viewAll')}
             <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
@@ -268,7 +273,7 @@ export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[]
         {releaseList.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
             <Rocket className="h-10 w-10 mb-3 opacity-30" />
-            <p className="text-sm">暂无发布记录</p>
+            <p className="text-sm">{t('dashboard.releases.empty')}</p>
           </div>
         ) : (
           <div className="space-y-2">
@@ -317,10 +322,10 @@ export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[]
                     'dg-badge-yellow border'
                   )}
                 >
-                  {release.status === 'success' ? '成功' :
+                  {release.status === 'success' ? t('dashboard.releases.success') :
-                   release.status === 'failed' ? '失败' :
+                   release.status === 'failed' ? t('dashboard.releases.failed') :
-                   release.status === 'deploying' ? '发布中' :
+                   release.status === 'deploying' ? t('dashboard.releases.deploying') :
-                   release.status === 'rolled_back' ? '已回滚' : '构建中'}
+                   release.status === 'rolled_back' ? t('dashboard.releases.rolledBack') : t('dashboard.releases.building')}
                 </Badge>
               </div>
             ))}
@@ -332,6 +337,7 @@ export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[]
 }
 
 export function ServerStatusCard({ servers }: { servers: DashboardServer[] }) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const runningServers = servers.filter((s) => s.status === 'running').length;
   const stoppedServers = servers.filter((s) => s.status === 'stopped').length;
@@ -342,8 +348,8 @@ export function ServerStatusCard({ servers }: { servers: DashboardServer[] }) {
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">服务器状态</CardTitle>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.serversStatus.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">服务器运行状态分布</CardDescription>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.serversStatus.description')}</CardDescription>
           </div>
           <Button
             variant="ghost"
@@ -351,7 +357,7 @@ export function ServerStatusCard({ servers }: { servers: DashboardServer[] }) {
             className="dg-btn-ghost text-xs"
             onClick={() => navigate('/servers')}
           >
-            查看全部
+            {t('dashboard.serversStatus.viewAll')}
             <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
@@ -361,15 +367,15 @@ export function ServerStatusCard({ servers }: { servers: DashboardServer[] }) {
         <div className="grid grid-cols-3 gap-3 mb-4">
           <div className="text-center p-3 rounded-xl bg-[var(--dg-green)]/8 border border-[var(--dg-green)]/15">
             <div className="text-2xl font-bold text-[var(--dg-green)]">{runningServers}</div>
-            <div className="text-xs text-[var(--dg-text-muted)] mt-1">运行中</div>
+            <div className="text-xs text-[var(--dg-text-muted)] mt-1">{t('dashboard.serversStatus.running')}</div>
           </div>
           <div className="text-center p-3 rounded-xl bg-[var(--dg-yellow)]/8 border border-[var(--dg-yellow)]/15">
             <div className="text-2xl font-bold text-[var(--dg-yellow)]">{maintenanceServers}</div>
-            <div className="text-xs text-[var(--dg-text-muted)] mt-1">维护中</div>
+            <div className="text-xs text-[var(--dg-text-muted)] mt-1">{t('dashboard.serversStatus.maintenance')}</div>
           </div>
           <div className="text-center p-3 rounded-xl bg-[var(--dg-text-muted)]/8 border border-[var(--dg-border)]">
             <div className="text-2xl font-bold text-[var(--dg-text-muted)]">{stoppedServers}</div>
-            <div className="text-xs text-[var(--dg-text-muted)] mt-1">已停止</div>
+            <div className="text-xs text-[var(--dg-text-muted)] mt-1">{t('dashboard.serversStatus.stopped')}</div>
           </div>
         </div>
 
@@ -394,10 +400,10 @@ export function ServerStatusCard({ servers }: { servers: DashboardServer[] }) {
               </div>
               <div className="text-right flex-shrink-0">
                 <p className="text-xs text-[var(--dg-text-muted)]">
-                  CPU <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.cpu_usage ?? 0).toFixed(1)}%</span>
+                  {t('dashboard.serversStatus.cpu')} <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.cpu_usage ?? 0).toFixed(1)}%</span>
                 </p>
                 <p className="text-xs text-[var(--dg-text-muted)]">
-                  内存 <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.memory_usage ?? 0).toFixed(1)}%</span>
+                  {t('dashboard.serversStatus.memory')} <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.memory_usage ?? 0).toFixed(1)}%</span>
                 </p>
               </div>
             </div>
@@ -405,7 +411,7 @@ export function ServerStatusCard({ servers }: { servers: DashboardServer[] }) {
           {servers.length === 0 && (
             <div className="flex flex-col items-center justify-center py-6 text-[var(--dg-text-muted)]">
               <Server className="h-8 w-8 mb-2 opacity-30" />
-              <p className="text-sm">暂无服务器</p>
+              <p className="text-sm">{t('dashboard.serversStatus.empty')}</p>
             </div>
           )}
         </div>
@@ -415,6 +421,7 @@ export function ServerStatusCard({ servers }: { servers: DashboardServer[] }) {
 }
 
 export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster[] }) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   return (
@@ -422,8 +429,8 @@ export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-[var(--dg-text-primary)]">Kubernetes 集群</CardTitle>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
-            <CardDescription className="text-[var(--dg-text-muted)]">Kubernetes集群健康状态</CardDescription>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.clusters.description')}</CardDescription>
           </div>
           <Button
             variant="ghost"
@@ -431,7 +438,7 @@ export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster
             className="dg-btn-ghost text-xs"
             onClick={() => navigate('/kubernetes')}
           >
-            查看全部
+            {t('dashboard.clusters.viewAll')}
             <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
@@ -440,7 +447,7 @@ export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster
         {clusters.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
             <Cloud className="h-10 w-10 mb-3 opacity-30" />
-            <p className="text-sm">暂无集群数据</p>
+            <p className="text-sm">{t('dashboard.clusters.empty')}</p>
           </div>
         ) : (
           <div className="space-y-3">
@@ -467,15 +474,15 @@ export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster
                         'dg-badge-red border'
                       )}
                     >
-                      {cluster.status === 'healthy' ? '健康' : cluster.status === 'warning' ? '警告' : '异常'}
+                      {cluster.status === 'healthy' ? t('dashboard.clusters.healthy') : cluster.status === 'warning' ? t('dashboard.clusters.warning') : t('dashboard.clusters.error')}
                     </Badge>
                   </div>
                   <div className="grid grid-cols-4 gap-2 text-center">
                     {[
-                      { label: '节点', value: cluster.node_count ?? 0 },
+                      { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
-                      { label: 'Pod', value: cluster.pod_count ?? 0 },
+                      { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
-                      { label: 'CPU', value: `${cpuUsage.toFixed(1)}%` },
+                      { label: t('dashboard.clusters.cpu'), value: `${cpuUsage.toFixed(1)}%` },
-                      { label: '内存', value: `${memoryUsage.toFixed(1)}%` },
+                      { label: t('dashboard.clusters.memory'), value: `${memoryUsage.toFixed(1)}%` },
                     ].map((item) => (
                       <div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
                         <div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>

frontend/src/locales/en-US.json

@@ -179,20 +179,95 @@
   },
   "dashboard": {
     "title": "Dashboard",
-    "serverStats": "Server Statistics",
+    "subtitle": "Real-time monitoring & operations overview",
-    "totalServers": "Total Servers",
+    "lastUpdated": "Last updated",
-    "onlineServers": "Online Servers",
+    "refresh": "Refresh",
-    "k8sClusters": "K8s Clusters",
+    "refreshing": "Refreshing",
-    "runningPods": "Running Pods",
+    "servers": "Servers",
-    "todayAlerts": "Today's Alerts",
+    "stat": {
-    "recentAlerts": "Recent Alerts",
+      "servers": "Servers",
-    "recentPipelines": "Recent Pipelines",
+      "running": "Running",
-    "recentReleases": "Recent Releases",
+      "k8sClusters": "K8s Clusters",
-    "systemOverview": "System Overview",
+      "healthyClusters": "Healthy",
-    "resourceUsage": "Resource Usage",
+      "alerts": "Alerts",
-    "cpuUsage": "CPU Usage",
+      "critical": "Critical",
-    "memoryUsage": "Memory Usage",
+      "monthlyCost": "Monthly Cost"
-    "diskUsage": "Disk Usage",
+    },
-    "quickActions": "Quick Actions"
+    "alerts": {
+      "title": "Alert Messages",
+      "description": "Recently triggered alert events",
+      "viewAll": "View All",
+      "empty": "No alert events",
+      "emptyHint": "All systems running normally"
+    },
+    "certificates": {
+      "title": "Certificate Expiry",
+      "description": "SSL certificate expiration monitoring",
+      "expiringSoon": "expiring soon",
+      "expiringIn30Days": "within 30 days",
+      "empty": "No certificate data",
+      "expireDate": "Expires",
+      "expired": "Expired",
+      "days": "days"
+    },
+    "releases": {
+      "title": "Release History",
+      "description": "Today's application release records",
+      "viewAll": "View All",
+      "empty": "No release records",
+      "success": "Success",
+      "failed": "Failed",
+      "deploying": "Deploying",
+      "rolledBack": "Rolled Back",
+      "building": "Building"
+    },
+    "serversStatus": {
+      "title": "Server Status",
+      "description": "Server running status distribution",
+      "viewAll": "View All",
+      "running": "Running",
+      "maintenance": "Maintenance",
+      "stopped": "Stopped",
+      "cpu": "CPU",
+      "memory": "Memory",
+      "empty": "No servers"
+    },
+    "clusters": {
+      "title": "Kubernetes Clusters",
+      "description": "Kubernetes cluster health status",
+      "viewAll": "View All",
+      "empty": "No cluster data",
+      "healthy": "Healthy",
+      "warning": "Warning",
+      "error": "Error",
+      "nodes": "Nodes",
+      "pods": "Pods",
+      "cpu": "CPU",
+      "memory": "Memory"
+    },
+    "cost": {
+      "title": "Cloud Cost Overview",
+      "description": "Monthly cloud platform expenses",
+      "distribution": "Cost Distribution",
+      "monthlyTrend": "Monthly Trend",
+      "noData": "No data",
+      "newCost": "New cost",
+      "flat": "Flat",
+      "vsLastMonth": "vs last month"
+    },
+    "topUsage": {
+      "title": "Top 5 Resource Usage",
+      "description": "Highest CPU, memory, and disk usage",
+      "cpu": "CPU",
+      "memory": "Memory",
+      "disk": "Disk"
+    },
+    "resourceUsage": {
+      "title": "Resource Usage Trend",
+      "description": "System resource usage over the last 24 hours",
+      "cpu": "CPU",
+      "memory": "Memory",
+      "disk": "Disk"
+    }
   }
 }

frontend/src/locales/zh-CN.json

@@ -179,20 +179,95 @@
   },
   "dashboard": {
     "title": "仪表盘",
-    "serverStats": "服务器统计",
+    "subtitle": "实时监控和运维概览",
-    "totalServers": "服务器总数",
+    "lastUpdated": "最后更新",
-    "onlineServers": "在线服务器",
+    "refresh": "刷新",
-    "k8sClusters": "K8s集群",
+    "refreshing": "刷新中",
-    "runningPods": "运行中Pod",
+    "servers": "服务器",
-    "todayAlerts": "今日告警",
+    "stat": {
-    "recentAlerts": "最近告警",
+      "servers": "服务器",
-    "recentPipelines": "最近流水线",
+      "running": "运行中",
-    "recentReleases": "最近发布",
+      "k8sClusters": "K8s 集群",
-    "systemOverview": "系统概览",
+      "healthyClusters": "健康集群",
-    "resourceUsage": "资源使用率",
+      "alerts": "告警",
-    "cpuUsage": "CPU使用率",
+      "critical": "严重",
-    "memoryUsage": "内存使用率",
+      "monthlyCost": "本月成本"
-    "diskUsage": "磁盘使用率",
+    },
-    "quickActions": "快捷操作"
+    "alerts": {
+      "title": "告警消息",
+      "description": "最近触发的告警事件",
+      "viewAll": "查看全部",
+      "empty": "暂无告警事件",
+      "emptyHint": "所有系统运行正常"
+    },
+    "certificates": {
+      "title": "证书到期提醒",
+      "description": "SSL证书到期时间监控",
+      "expiringSoon": "即将过期",
+      "expiringIn30Days": "30天内过期",
+      "empty": "暂无证书数据",
+      "expireDate": "到期",
+      "expired": "已过期",
+      "days": "天"
+    },
+    "releases": {
+      "title": "发布历史",
+      "description": "今日应用发布记录",
+      "viewAll": "查看全部",
+      "empty": "暂无发布记录",
+      "success": "成功",
+      "failed": "失败",
+      "deploying": "发布中",
+      "rolledBack": "已回滚",
+      "building": "构建中"
+    },
+    "serversStatus": {
+      "title": "服务器状态",
+      "description": "服务器运行状态分布",
+      "viewAll": "查看全部",
+      "running": "运行中",
+      "maintenance": "维护中",
+      "stopped": "已停止",
+      "cpu": "CPU",
+      "memory": "内存",
+      "empty": "暂无服务器"
+    },
+    "clusters": {
+      "title": "Kubernetes 集群",
+      "description": "Kubernetes集群健康状态",
+      "viewAll": "查看全部",
+      "empty": "暂无集群数据",
+      "healthy": "健康",
+      "warning": "警告",
+      "error": "异常",
+      "nodes": "节点",
+      "pods": "Pod",
+      "cpu": "CPU",
+      "memory": "内存"
+    },
+    "cost": {
+      "title": "云成本概览",
+      "description": "本月各云平台费用支出",
+      "distribution": "费用分布",
+      "monthlyTrend": "月度趋势",
+      "noData": "暂无数据",
+      "newCost": "新增费用",
+      "flat": "持平",
+      "vsLastMonth": "较上月"
+    },
+    "topUsage": {
+      "title": "Top5 资源使用",
+      "description": "CPU、内存、磁盘使用率最高",
+      "cpu": "CPU",
+      "memory": "内存",
+      "disk": "磁盘"
+    },
+    "resourceUsage": {
+      "title": "资源使用率趋势",
+      "description": "过去24小时系统资源使用情况",
+      "cpu": "CPU",
+      "memory": "内存",
+      "disk": "磁盘"
+    }
   }
 }