refactor(quality): Q28 前端巨型组件拆分 — KubernetesClusterDetail 547L→130L (-76%), 提取 cluster-detail/ 8 个文件 (types(computeClusterMetrics/buildTrendData 纯函数) + OverviewTab + NodesTab + PodsTab + DeploymentsTab + ServicesTab + IngressesTab + EventsTab), useMemo 聚合计算逻辑提取为模块级纯函数, demo 事件数据提取为模块级常量, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (18.18s), go build=0, 17/17 测试通过

2026-07-09 08:07:35 +08:00
1 parent 470832342e
commit 4c44fdde8b
@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next';
+import { Badge } from '@/components/ui/badge';
+
+/** 集群事件 mock 数据 — 真正的事件需后端 events/summary 端点对接 */
+const DEMO_EVENTS = [
+  { type: 'Normal', reason: 'Started', message: 'Started container nginx' },
+  { type: 'Normal', reason: 'Created', message: 'Created pod nginx-deployment-xxx' },
+  { type: 'Warning', reason: 'FailedScheduling', message: '0/3 nodes are available' },
+  { type: 'Normal', reason: 'Pulling', message: 'Pulling image "nginx:latest"' },
+  { type: 'Normal', reason: 'Pulled', message: 'Successfully pulled image' },
+];
+
+const MIN_AGOS = [2, 5, 10, 15, 12];
+
+export function EventsTab() {
+  const { t } = useTranslation();
+  return (
+    <div className="space-y-2">
+      {DEMO_EVENTS.map((event, index) => (
+        <div
+          key={index}
+          className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50"
+        >
+          <Badge
+            variant="outline"
+            className={
+              event.type === 'Normal'
+                ? 'border-[var(--dg-green)]/30 text-[var(--dg-green)] bg-[var(--dg-green)]/10'
+                : 'border-[var(--dg-orange)]/30 text-[var(--dg-orange)] bg-[var(--dg-orange)]/10'
+            }
+          >
+            {event.type}
+          </Badge>
+          <span className="text-sm font-medium text-[var(--dg-text-secondary)] min-w-[120px]">{event.reason}</span>
+          <span className="text-sm text-[var(--dg-text-secondary)] flex-1">{event.message}</span>
+          <span className="text-xs text-[var(--dg-text-muted)]">{t('common.duration.minAgo', { count: MIN_AGOS[index] })}</span>
+        </div>
+      ))}
+    </div>
+  );
+}