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,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>