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
2026-06-29 13:06:38 +08:00
1 parent b7780c5a5a
commit eb0fef7fce
@@ -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>
-          <p className="dg-page-subtitle">实时监控和运维概览 · 最后更新: {new Date().toLocaleTimeString('zh-CN')}</p>
+          <h1 className="dg-page-title">{t('dashboard.title')}</h1>
+          <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: '运行中', value: serverStats?.running ?? 0, color: 'emerald' },
-            { label: 'K8s 集群', value: k8sStats?.total ?? 0, color: 'purple' },
-            { label: '健康集群', value: k8sStats?.healthy ?? 0, color: 'cyan' },
-            { label: '告警', value: alertStats?.firing ?? 0, color: alertStats?.firing > 0 ? 'red' : 'muted' },
-            { label: '严重', value: alertStats?.critical ?? 0, color: 'red' },
-            { label: '本月成本', value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
+            { label: t('dashboard.stat.servers'), value: serverStats?.total ?? 0, color: 'blue' },
+            { label: t('dashboard.stat.running'), value: serverStats?.running ?? 0, color: 'emerald' },
+            { label: t('dashboard.stat.k8sClusters'), value: k8sStats?.total ?? 0, color: 'purple' },
+            { label: t('dashboard.stat.healthyClusters'), value: k8sStats?.healthy ?? 0, color: 'cyan' },
+            { label: t('dashboard.stat.alerts'), value: alertStats?.firing ?? 0, color: alertStats?.firing > 0 ? 'red' : 'muted' },
+            { label: t('dashboard.stat.critical'), value: alertStats?.critical ?? 0, color: 'red' },
+            { label: t('dashboard.stat.monthlyCost'), value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
          ]}
        />
      </div>
@@ -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>
@@ -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>
-            <CardDescription className="text-[var(--dg-text-muted)]">最近触发的告警事件</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
+            <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-xs mt-1 opacity-60">所有系统运行正常</p>
+              <p className="text-sm">{t('dashboard.alerts.empty')}</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>
-            <CardDescription className="text-[var(--dg-text-muted)]">SSL证书到期时间监控</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
+            <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>
-            <CardDescription className="text-[var(--dg-text-muted)]">今日应用发布记录</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
+            <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 === 'failed' ? '失败' :
-                   release.status === 'deploying' ? '发布中' :
-                   release.status === 'rolled_back' ? '已回滚' : '构建中'}
+                  {release.status === 'success' ? t('dashboard.releases.success') :
+                   release.status === 'failed' ? t('dashboard.releases.failed') :
+                   release.status === 'deploying' ? t('dashboard.releases.deploying') :
+                   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>
-            <CardDescription className="text-[var(--dg-text-muted)]">服务器运行状态分布</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.serversStatus.title')}</CardTitle>
+            <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>
-            <CardDescription className="text-[var(--dg-text-muted)]">Kubernetes集群健康状态</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
+            <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: 'Pod', value: cluster.pod_count ?? 0 },
-                      { label: 'CPU', value: `${cpuUsage.toFixed(1)}%` },
-                      { label: '内存', value: `${memoryUsage.toFixed(1)}%` },
+                      { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
+                      { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
+                      { label: t('dashboard.clusters.cpu'), value: `${cpuUsage.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>
@@ -179,20 +179,95 @@
  },
  "dashboard": {
    "title": "Dashboard",
-    "serverStats": "Server Statistics",
-    "totalServers": "Total Servers",
-    "onlineServers": "Online Servers",
+    "subtitle": "Real-time monitoring & operations overview",
+    "lastUpdated": "Last updated",
+    "refresh": "Refresh",
+    "refreshing": "Refreshing",
+    "servers": "Servers",
+    "stat": {
+      "servers": "Servers",
+      "running": "Running",
      "k8sClusters": "K8s Clusters",
-    "runningPods": "Running Pods",
-    "todayAlerts": "Today's Alerts",
-    "recentAlerts": "Recent Alerts",
-    "recentPipelines": "Recent Pipelines",
-    "recentReleases": "Recent Releases",
-    "systemOverview": "System Overview",
-    "resourceUsage": "Resource Usage",
-    "cpuUsage": "CPU Usage",
-    "memoryUsage": "Memory Usage",
-    "diskUsage": "Disk Usage",
-    "quickActions": "Quick Actions"
+      "healthyClusters": "Healthy",
+      "alerts": "Alerts",
+      "critical": "Critical",
+      "monthlyCost": "Monthly Cost"
+    },
+    "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"
+    }
  }
 }
@@ -179,20 +179,95 @@
  },
  "dashboard": {
    "title": "仪表盘",
-    "serverStats": "服务器统计",
-    "totalServers": "服务器总数",
-    "onlineServers": "在线服务器",
+    "subtitle": "实时监控和运维概览",
+    "lastUpdated": "最后更新",
+    "refresh": "刷新",
+    "refreshing": "刷新中",
+    "servers": "服务器",
+    "stat": {
+      "servers": "服务器",
+      "running": "运行中",
      "k8sClusters": "K8s 集群",
-    "runningPods": "运行中Pod",
-    "todayAlerts": "今日告警",
-    "recentAlerts": "最近告警",
-    "recentPipelines": "最近流水线",
-    "recentReleases": "最近发布",
-    "systemOverview": "系统概览",
-    "resourceUsage": "资源使用率",
-    "cpuUsage": "CPU使用率",
-    "memoryUsage": "内存使用率",
-    "diskUsage": "磁盘使用率",
-    "quickActions": "快捷操作"
+      "healthyClusters": "健康集群",
+      "alerts": "告警",
+      "critical": "严重",
+      "monthlyCost": "本月成本"
+    },
+    "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": "磁盘"
+    }
  }
 }