feat(k8s): M13 多集群资源对比看板 — GetMultiClusterComparison handler + ClusterComparePage (柱状图/雷达图/饼图/详细对比表)

PROJECT_EVALUATION.md

@@ -39,6 +39,7 @@
 | 拓扑图 | ✅ topology get/save | ✅ TopologyView | ✅ |
 | **Node 详情页** | ✅ GetNodeDetail (M10) | ✅ NodeDetailPage | ✅ curl 验证 |
 | **StatefulSet/DaemonSet 详情页** | ✅ GetStatefulSetDetail/GetDaemonSetDetail + YAML路由修复 (M11) | ✅ WorkloadViewPage 重写 (M11) | ✅ curl 验证 |
+| **多集群资源对比看板** | ✅ GetMultiClusterComparison (M13) | ✅ ClusterComparePage (M13) | ✅ urllib 验证 |
 
 ### ❌ 缺失 / 进行中
 

ROADMAP.md

@@ -282,7 +282,40 @@
 
 | 模块 | 描述 |
 |------|------|
-| M13 | 多集群资源对比看板 |
+| M13 | 多集群资源对比看板 [done] |
+
+### M13: 多集群资源对比看板 [done]
+**目标**: 跨集群资源用量、节点分布、健康状态对比 — 全局视角的多集群运维看板
+
+**后端改动**:
+- `handlers/kubernetes.go`: 新增 `GetMultiClusterComparison` handler:
+  - 聚合所有集群的 DB 缓存数据（node_count/pod_count/deployment_count/service_count/cpu_usage/memory_usage）
+  - 从 `kubernetes_nodes` 表聚合节点级数据：CPU 核数总和、内存总量、master/worker 分布、健康/非健康节点数
+  - 集群级别 cpu_usage 为 0 时，用节点平均值回填
+  - 返回 `{clusters: [...], totals: {cluster_count, node_count, pod_count, ...}}`
+- `routes.go`: 注册 `GET /kubernetes/compare`（全局路由，不属于特定集群）
+
+**前端改动**:
+- 新增 `ClusterComparePage.tsx` (~360行) — 多集群对比看板:
+  - 概览卡片：集群总数 / 节点总数 / Pod 总数 / Deployment 总数 / Service 总数
+  - 资源数量对比柱状图（节点/Pod/Deployment/Service — 4 维度并排）
+  - CPU/内存使用率对比柱状图（百分比）
+  - 资源雷达图（多集群 6 维度对比 — 仅 ≥2 集群时显示）
+  - 节点角色分布饼图（Master/Worker）
+  - 详细对比表格（可点击行跳转集群概览，含 CPU/内存使用率进度条）
+- `api.ts`: 新增 `getMultiClusterComparison()` 方法
+- `App.tsx`: 新增路由 `/kubernetes/compare`
+- `Sidebar.tsx`: Kubernetes 菜单新增「多集群对比」入口（Layers 图标）
+
+**验收标准**:
+- [x] `GET /api/v1/kubernetes/compare` 返回 clusters 数组 + totals 聚合
+- [x] totals 包含 cluster_count/node_count/pod_count/deployment_count/service_count
+- [x] 每个集群包含 19 个字段（id/name/code/status/node_count/.../total_cpu_cores/total_memory_mb/master_count/worker_count）
+- [x] 集群级别 cpu_usage 为 0 时用节点平均值回填
+- [x] 前端 4 类图表正确渲染（柱状图×2 + 雷达图 + 饼图）
+- [x] 详细对比表格可点击跳转集群概览
+- [x] TypeScript 零编译错误 + Vite 构建成功
+- [x] SPA 路由 `/kubernetes/compare` 返回 200（非 301/404）
 
 ---
 

TDD_PLAN.md

@@ -433,3 +433,48 @@ cd frontend && npx tsc --noEmit && npm run build 2>&1 | tail -3
 - [x] 前端三维度柱状图正确渲染（recharts）
 - [x] 图表点击联动过滤事件列表
 - [x] 最新告警面板展示 Warning 事件
+
+---
+
+## M13: 多集群资源对比看板
+
+### 验证用例
+
+```bash
+# U1: 登录获取 Token
+TOKEN=$(python3 -c "
+import urllib.request, json
+login_data = json.dumps({'username': 'admin', 'password': 'admin123'}).encode()
+req = urllib.request.Request('http://127.0.0.1:8080/api/v1/auth/login', data=login_data, method='POST')
+req.add_header('Content-Type', 'application/json')
+resp = urllib.request.urlopen(req)
+print(json.loads(resp.read())['data']['token'])
+")
+
+# U2: 多集群对比 API
+curl -s "http://127.0.0.1:8080/api/v1/kubernetes/compare" \
+  -H "Authorization: Bearer $TOKEN" | jq '.data | {totals, cluster_count: (.clusters|length)}'
+# 期望: totals 含 cluster_count/node_count/pod_count/deployment_count/service_count
+
+# U3: 验证每个集群包含完整字段
+curl -s "http://127.0.0.1:8080/api/v1/kubernetes/compare" \
+  -H "Authorization: Bearer $TOKEN" | jq '.data.clusters[0] | keys'
+# 期望: 19 个字段 (id/name/code/status/node_count/pod_count/.../total_cpu_cores/total_memory_mb/master_count/worker_count)
+
+# U4: SPA 路由
+curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1:8080/kubernetes/compare
+# 期望: 200
+
+# U5: TypeScript + Vite 构建
+cd frontend && npx tsc --noEmit && npm run build 2>&1 | tail -3
+# 期望: 零错误 + built in Ns
+```
+
+### 通过标准
+- [x] U2: Compare API 返回 clusters 数组 + totals 聚合数据
+- [x] U3: 每个集群包含 19 个字段（含 node 级别聚合数据）
+- [x] U4: SPA 路由返回 200
+- [x] U5: TypeScript 零编译错误 + Vite 构建成功
+- [x] 前端 4 类图表正确渲染（柱状图×2 + 雷达图 + 饼图）
+- [x] 详细对比表格可点击跳转集群概览
+- [x] totals 聚合正确（cluster_count/node_count/pod_count/deployment_count/service_count）

backend/internal/api/handlers/kubernetes.go

@@ -3608,3 +3608,139 @@ func (h *KubernetesHandler) uploadPodFileWithNS(c *gin.Context, ns string) {
 		},
 	})
 }
+
+// ============================================================================
+// M13: 多集群资源对比看板 (Multi-Cluster Comparison Dashboard) // Logan.Li
+// ============================================================================
+
+// GetMultiClusterComparison 聚合所有集群的资源数据进行对比
+func (h *KubernetesHandler) GetMultiClusterComparison(c *gin.Context) {
+	// 1. 获取所有集群
+	var clusters []models.KubernetesCluster
+	h.db.Find(&clusters)
+
+	type ClusterComparison struct {
+		ID             uint    `json:"id"`
+		Name           string  `json:"name"`
+		Code           string  `json:"code"`
+		Status         string  `json:"status"`
+		Version        string  `json:"version"`
+		NodeCount      int     `json:"node_count"`
+		PodCount       int     `json:"pod_count"`
+		DeploymentCount int    `json:"deployment_count"`
+		ServiceCount   int     `json:"service_count"`
+		CPUUsage       float64 `json:"cpu_usage"`
+		MemoryUsage    float64 `json:"memory_usage"`
+		APIServer      string  `json:"api_server"`
+		LastSyncAt     *time.Time `json:"last_sync_at"`
+
+		// Node-level aggregated data from kubernetes_nodes table
+		TotalCPUCores  int     `json:"total_cpu_cores"`
+		TotalMemoryMB  int64   `json:"total_memory_mb"`
+		MasterCount    int     `json:"master_count"`
+		WorkerCount    int     `json:"worker_count"`
+		HealthyNodes   int     `json:"healthy_nodes"`
+		UnhealthyNodes int     `json:"unhealthy_nodes"`
+	}
+
+	// 2. 获取所有节点的聚合数据（按 cluster_id 分组）
+	type NodeAgg struct {
+		ClusterID      uint
+		NodeCount      int
+		MasterCount    int
+		WorkerCount    int
+		HealthyNodes   int
+		UnhealthyNodes int
+		TotalCPU       int
+		TotalMemory    int64
+		AvgCPUUsage    float64
+		AvgMemUsage    float64
+	}
+	nodeAggMap := map[uint]*NodeAgg{}
+	{
+		var nodes []models.KubernetesNode
+		h.db.Find(&nodes)
+		for _, n := range nodes {
+			agg, ok := nodeAggMap[n.ClusterID]
+			if !ok {
+				agg = &NodeAgg{ClusterID: n.ClusterID}
+				nodeAggMap[n.ClusterID] = agg
+			}
+			agg.NodeCount++
+			agg.TotalCPU += n.CPU
+			agg.TotalMemory += n.Memory
+			if n.CPUUsage > 0 || n.MemoryUsage > 0 {
+				if agg.AvgCPUUsage == 0 { agg.AvgCPUUsage = n.CPUUsage } else { agg.AvgCPUUsage = (agg.AvgCPUUsage*float64(agg.NodeCount-1) + n.CPUUsage) / float64(agg.NodeCount) }
+				if agg.AvgMemUsage == 0 { agg.AvgMemUsage = n.MemoryUsage } else { agg.AvgMemUsage = (agg.AvgMemUsage*float64(agg.NodeCount-1) + n.MemoryUsage) / float64(agg.NodeCount) }
+			}
+			if n.Role == "master" {
+				agg.MasterCount++
+			} else {
+				agg.WorkerCount++
+			}
+			if n.Status == "Ready" {
+				agg.HealthyNodes++
+			} else {
+				agg.UnhealthyNodes++
+			}
+		}
+	}
+
+	// 3. 构建对比数据
+	comparisons := []ClusterComparison{}
+	totalNodes, totalPods, totalDeployments, totalServices := 0, 0, 0, 0
+	for _, cl := range clusters {
+		cc := ClusterComparison{
+			ID:              cl.ID,
+			Name:            cl.Name,
+			Code:            cl.Code,
+			Status:          cl.Status,
+			Version:         cl.Version,
+			NodeCount:       cl.NodeCount,
+			PodCount:        cl.PodCount,
+			DeploymentCount: cl.DeploymentCount,
+			ServiceCount:    cl.ServiceCount,
+			CPUUsage:        cl.CPUUsage,
+			MemoryUsage:     cl.MemoryUsage,
+			APIServer:       cl.APIServer,
+			LastSyncAt:      cl.LastSyncAt,
+		}
+		// 优先用 node 级别的实时聚合数据
+		if agg, ok := nodeAggMap[cl.ID]; ok && agg.NodeCount > 0 {
+			cc.TotalCPUCores = agg.TotalCPU
+			cc.TotalMemoryMB = agg.TotalMemory
+			cc.MasterCount = agg.MasterCount
+			cc.WorkerCount = agg.WorkerCount
+			cc.HealthyNodes = agg.HealthyNodes
+			cc.UnhealthyNodes = agg.UnhealthyNodes
+			// 如果集群级别的 cpu_usage 为 0，使用节点平均值
+			if cc.CPUUsage == 0 && agg.AvgCPUUsage > 0 {
+				cc.CPUUsage = agg.AvgCPUUsage
+			}
+			if cc.MemoryUsage == 0 && agg.AvgMemUsage > 0 {
+				cc.MemoryUsage = agg.AvgMemUsage
+			}
+		}
+		totalNodes += cc.NodeCount
+		totalPods += cc.PodCount
+		totalDeployments += cc.DeploymentCount
+		totalServices += cc.ServiceCount
+		comparisons = append(comparisons, cc)
+	}
+
+	// 4. 返回结果
+	c.JSON(200, models.Response{
+		Code:    200,
+		Message: "success",
+		Data: gin.H{
+			"clusters": comparisons,
+			"totals": gin.H{
+				"cluster_count":    len(clusters),
+				"node_count":       totalNodes,
+				"pod_count":        totalPods,
+				"deployment_count": totalDeployments,
+				"service_count":    totalServices,
+			},
+		},
+	})
+}

backend/internal/api/routes/routes.go

@@ -432,6 +432,9 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config, c
 		kubernetesRouter.GET("/:clusterCode/namespace/:namespace/:resource/:name/yaml", k8sHandler.GetResourceYAMLNS)
 		kubernetesRouter.PUT("/:clusterCode/namespace/:namespace/:resource/:name/yaml", k8sHandler.UpdateResourceYAMLNS)
 		kubernetesRouter.DELETE("/:clusterCode/namespace/:namespace/:resource/:name/yaml", k8sHandler.DeleteResourceYAMLNS)
+
+		// 🆕 M13: 多集群资源对比看板
+		kubernetesRouter.GET("/compare", k8sHandler.GetMultiClusterComparison)
 	}
 
 	// 告警路由

frontend/src/App.tsx

@@ -25,6 +25,7 @@ import { KubernetesWorkloads } from '@/components/kubernetes/KubernetesWorkloads
 import PodMetricsPage from '@/components/kubernetes/PodMetricsPage';
 import EventsPage from '@/components/kubernetes/EventsPage';
 import CapacityPage from '@/components/kubernetes/CapacityPage';
+import ClusterComparePage from '@/components/kubernetes/ClusterComparePage';
 import { AlertManager } from '@/components/monitor/AlertManager';
 import { ApprovalFlowManager } from '@/components/approval/ApprovalFlow';
 import { ScriptManager } from '@/components/automation/ScriptManager';
@@ -80,9 +81,11 @@ function App() {
             {/* ================================================================ */}
             {/* Kubernetes — Kuboard-style routes                                */}
             {/* ================================================================ */}
-            {/* 集群列表 */}
+            {/* Kubernetes 集群列表 */}
             <Route path="kubernetes">
               <Route index element={<KubernetesClusters />} />
+              {/* 🆕 M13: 多集群资源对比看板（全局，不属于特定集群） */}
+              <Route path="compare" element={<ClusterComparePage />} />
               {/* 集群概览 (节点 + 命名空间列表) */}
               <Route path=":clusterCode">
                 <Route index element={<ClusterOverviewPage />} />

frontend/src/components/kubernetes/ClusterComparePage.tsx

@@ -0,0 +1,361 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table';
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+  RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Legend,
+  PieChart, Pie, Cell,
+} from 'recharts';
+import {
+  RefreshCw, Cloud, Cpu, Container, Boxes, Activity, Server, Shield,
+  HardDrive, Layers, Network, ChevronRight, TrendingUp,
+} from 'lucide-react';
+import { kubernetesApi } from '@/services/api';
+
+const CHART_COLORS = ['#3B82F6', '#207060', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316'];
+
+export default function ClusterComparePage() {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState<string>('');
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const res: any = await kubernetesApi.getMultiClusterComparison();
+      setData(res || null);
+    } catch (e: any) {
+      setError(e?.message || '加载失败');
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadData(); }, [loadData]);
+
+  const clusters: any[] = data?.clusters || [];
+  const totals: any = data?.totals || {};
+
+  // 图表数据准备
+  const resourceBarData = clusters.map((c: any) => ({
+    name: c.code || c.name,
+    节点: c.node_count || 0,
+    Pod: c.pod_count || 0,
+    Deployment: c.deployment_count || 0,
+    Service: c.service_count || 0,
+  }));
+
+  const usageBarData = clusters.map((c: any) => ({
+    name: c.code || c.name,
+    'CPU %': Number((c.cpu_usage || 0).toFixed(1)),
+    '内存 %': Number((c.memory_usage || 0).toFixed(1)),
+  }));
+
+  const radarData = clusters.length > 0 ? [
+    { metric: '节点数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, c.node_count || 0])) },
+    { metric: 'Pod数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, Math.min(c.pod_count || 0, 100)])) },
+    { metric: '部署数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, c.deployment_count || 0])) },
+    { metric: 'CPU使用', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, Number((c.cpu_usage || 0).toFixed(1))])) },
+    { metric: '内存使用', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, Number((c.memory_usage || 0).toFixed(1))])) },
+    { metric: 'CPU核数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, c.total_cpu_cores || 0])) },
+  ] : [];
+
+  const nodeRolePie = clusters.flatMap((c: any) => [
+    { name: `${c.code}-Master`, value: c.master_count || 0, fill: CHART_COLORS[1] },
+    { name: `${c.code}-Worker`, value: c.worker_count || 0, fill: CHART_COLORS[0] },
+  ]).filter(d => d.value > 0);
+
+  const statusColorMap: Record<string, string> = {
+    healthy: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
+    warning: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
+    error: 'bg-red-500/15 text-red-400 border-red-500/30',
+  };
+
+  // 格式化内存 (MB → GB)
+  const fmtMem = (mb: number | undefined) => {
+    if (!mb || mb <= 0) return '-';
+    return `${(mb / 1024).toFixed(1)} GB`;
+  };
+
+  // 格式化同步时间
+  const fmtTime = (t: string | null | undefined) => {
+    if (!t) return '从未同步';
+    try {
+      const d = new Date(t);
+      return d.toLocaleString('zh-CN', { hour12: false });
+    } catch { return t; }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      {/* Header */}
+      <div className="border-b border-slate-800/60 bg-slate-900/40 px-6 py-4 flex items-center justify-between sticky top-0 z-20 backdrop-blur">
+        <div className="flex items-center gap-3">
+          <Layers className="h-5 w-5 text-blue-400" />
+          <div>
+            <h1 className="text-lg font-semibold">多集群资源对比看板</h1>
+            <p className="text-xs text-slate-500">跨集群资源用量、节点分布、健康状态对比</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={loadData} disabled={loading}
+            className="border-slate-700 hover:bg-slate-800">
+            <RefreshCw className={`h-3.5 w-3.5 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+          <Link to="/kubernetes">
+            <Button variant="outline" size="sm" className="border-slate-700 hover:bg-slate-800">
+              <Cloud className="h-3.5 w-3.5 mr-1.5" />集群列表
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <div className="p-6 space-y-6 max-w-[1600px] mx-auto">
+        {error && (
+          <Card className="border-red-500/30 bg-red-500/5">
+            <CardContent className="py-3 text-sm text-red-400">⚠ {error}</CardContent>
+          </Card>
+        )}
+
+        {/* 概览卡片 */}
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+          {[
+            { label: '集群总数', value: totals.cluster_count || 0, icon: Cloud, color: 'text-blue-400', bg: 'bg-blue-500/10' },
+            { label: '节点总数', value: totals.node_count || 0, icon: Cpu, color: 'text-emerald-400', bg: 'bg-emerald-500/10' },
+            { label: 'Pod 总数', value: totals.pod_count || 0, icon: Container, color: 'text-purple-400', bg: 'bg-purple-500/10' },
+            { label: 'Deployment 总数', value: totals.deployment_count || 0, icon: Boxes, color: 'text-amber-400', bg: 'bg-amber-500/10' },
+            { label: 'Service 总数', value: totals.service_count || 0, icon: Network, color: 'text-cyan-400', bg: 'bg-cyan-500/10' },
+          ].map((s, i) => (
+            <Card key={i} className="bg-slate-900/60 border-slate-800">
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-xs text-slate-500 mb-1">{s.label}</p>
+                    <p className="text-2xl font-bold">{s.value}</p>
+                  </div>
+                  <div className={`p-2.5 rounded-lg ${s.bg}`}>
+                    <s.icon className={`h-5 w-5 ${s.color}`} />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {clusters.length === 0 && !loading && (
+          <Card className="bg-slate-900/60 border-slate-800">
+            <CardContent className="py-12 text-center">
+              <Cloud className="h-12 w-12 text-slate-700 mx-auto mb-3" />
+              <p className="text-slate-500">暂无集群数据，请先添加 K8s 集群并同步</p>
+              <Link to="/kubernetes" className="inline-block mt-3">
+                <Button variant="outline" size="sm" className="border-slate-700">
+                  去添加集群 <ChevronRight className="h-3.5 w-3.5 ml-1" />
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+
+        {clusters.length > 0 && (
+          <>
+            {/* 资源对比柱状图 + 使用率柱状图 */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <Card className="bg-slate-900/60 border-slate-800">
+                <CardContent className="p-5">
+                  <div className="flex items-center gap-2 mb-4">
+                    <Layers className="h-4 w-4 text-blue-400" />
+                    <h3 className="text-sm font-semibold">资源数量对比</h3>
+                  </div>
+                  <ResponsiveContainer width="100%" height={280}>
+                    <BarChart data={resourceBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+                      <XAxis dataKey="name" tick={{ fill: '#94a3b8', fontSize: 11 }} />
+                      <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} />
+                      <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
+                      <Legend wrapperStyle={{ fontSize: 11 }} />
+                      <Bar dataKey="节点" fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} />
+                      <Bar dataKey="Pod" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} />
+                      <Bar dataKey="Deployment" fill={CHART_COLORS[2]} radius={[3, 3, 0, 0]} />
+                      <Bar dataKey="Service" fill={CHART_COLORS[5]} radius={[3, 3, 0, 0]} />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-900/60 border-slate-800">
+                <CardContent className="p-5">
+                  <div className="flex items-center gap-2 mb-4">
+                    <Activity className="h-4 w-4 text-emerald-400" />
+                    <h3 className="text-sm font-semibold">CPU / 内存使用率对比</h3>
+                  </div>
+                  <ResponsiveContainer width="100%" height={280}>
+                    <BarChart data={usageBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+                      <XAxis dataKey="name" tick={{ fill: '#94a3b8', fontSize: 11 }} />
+                      <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} unit="%" />
+                      <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
+                      <Legend wrapperStyle={{ fontSize: 11 }} />
+                      <Bar dataKey="CPU %" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} />
+                      <Bar dataKey="内存 %" fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* 雷达图 + 节点角色饼图 */}
+            {clusters.length >= 2 && (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <Card className="bg-slate-900/60 border-slate-800">
+                  <CardContent className="p-5">
+                    <div className="flex items-center gap-2 mb-4">
+                      <TrendingUp className="h-4 w-4 text-purple-400" />
+                      <h3 className="text-sm font-semibold">资源雷达对比</h3>
+                    </div>
+                    <ResponsiveContainer width="100%" height={320}>
+                      <RadarChart data={radarData}>
+                        <PolarGrid stroke="#1e293b" />
+                        <PolarAngleAxis dataKey="metric" tick={{ fill: '#94a3b8', fontSize: 11 }} />
+                        <PolarRadiusAxis tick={{ fill: '#64748b', fontSize: 10 }} />
+                        {clusters.map((c: any, i: number) => (
+                          <Radar key={i} name={c.code || c.name}
+                            dataKey={c.code || c.name}
+                            stroke={CHART_COLORS[i % CHART_COLORS.length]}
+                            fill={CHART_COLORS[i % CHART_COLORS.length]}
+                            fillOpacity={0.15}
+                            strokeWidth={2}
+                          />
+                        ))}
+                        <Legend wrapperStyle={{ fontSize: 11 }} />
+                        <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
+                      </RadarChart>
+                    </ResponsiveContainer>
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-slate-900/60 border-slate-800">
+                  <CardContent className="p-5">
+                    <div className="flex items-center gap-2 mb-4">
+                      <Server className="h-4 w-4 text-amber-400" />
+                      <h3 className="text-sm font-semibold">节点角色分布</h3>
+                    </div>
+                    {nodeRolePie.length > 0 ? (
+                      <ResponsiveContainer width="100%" height={320}>
+                        <PieChart>
+                          <Pie data={nodeRolePie} cx="50%" cy="45%" innerRadius={50} outerRadius={90}
+                            paddingAngle={3} dataKey="value"
+                            label={(e: any) => `${e.name}: ${e.value}`}
+                            labelLine={{ stroke: '#475569' }}
+                          >
+                            {nodeRolePie.map((_, i) => (
+                              <Cell key={i} fill={nodeRolePie[i].fill} />
+                            ))}
+                          </Pie>
+                          <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
+                        </PieChart>
+                      </ResponsiveContainer>
+                    ) : (
+                      <div className="h-[320px] flex items-center justify-center text-slate-600 text-sm">无节点角色数据</div>
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+            )}
+
+            {/* 详细对比表格 */}
+            <Card className="bg-slate-900/60 border-slate-800">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-2 mb-4">
+                  <HardDrive className="h-4 w-4 text-cyan-400" />
+                  <h3 className="text-sm font-semibold">详细对比</h3>
+                  <span className="text-xs text-slate-500 ml-2">点击行可进入集群概览</span>
+                </div>
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow className="border-slate-800 hover:bg-transparent">
+                        <TableHead className="text-slate-400">集群</TableHead>
+                        <TableHead className="text-slate-400">状态</TableHead>
+                        <TableHead className="text-slate-400 text-right">节点</TableHead>
+                        <TableHead className="text-slate-400 text-right">Pod</TableHead>
+                        <TableHead className="text-slate-400 text-right">Deployment</TableHead>
+                        <TableHead className="text-slate-400 text-right">Service</TableHead>
+                        <TableHead className="text-slate-400 text-right">CPU 核数</TableHead>
+                        <TableHead className="text-slate-400 text-right">内存</TableHead>
+                        <TableHead className="text-slate-400 text-right">CPU 使用率</TableHead>
+                        <TableHead className="text-slate-400 text-right">内存使用率</TableHead>
+                        <TableHead className="text-slate-400">角色</TableHead>
+                        <TableHead className="text-slate-400">同步时间</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {clusters.map((c: any) => (
+                        <TableRow key={c.id}
+                          className="border-slate-800/50 hover:bg-slate-800/30 cursor-pointer"
+                          onClick={() => navigate(`/kubernetes/${c.code}`)}
+                        >
+                          <TableCell>
+                            <div className="font-medium text-slate-200">{c.name}</div>
+                            <div className="text-xs text-slate-500">{c.code} · {c.api_server || '-'}</div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant="outline" className={`text-xs ${statusColorMap[c.status] || statusColorMap.error}`}>
+                              {c.status === 'healthy' ? '✓ 健康' : c.status === 'warning' ? '⚠ 警告' : '✗ 异常'}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-right font-mono text-slate-300">{c.node_count}</TableCell>
+                          <TableCell className="text-right font-mono text-slate-300">{c.pod_count}</TableCell>
+                          <TableCell className="text-right font-mono text-slate-300">{c.deployment_count}</TableCell>
+                          <TableCell className="text-right font-mono text-slate-300">{c.service_count}</TableCell>
+                          <TableCell className="text-right font-mono text-slate-300">{c.total_cpu_cores || '-'}</TableCell>
+                          <TableCell className="text-right font-mono text-slate-300">{fmtMem(c.total_memory_mb)}</TableCell>
+                          <TableCell className="text-right">
+                            <div className="flex items-center justify-end gap-1.5">
+                              <span className="font-mono text-sm text-blue-400">{(c.cpu_usage || 0).toFixed(1)}%</span>
+                              <div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                                <div className="h-full bg-blue-500 rounded-full" style={{ width: `${Math.min(c.cpu_usage || 0, 100)}%` }} />
+                              </div>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <div className="flex items-center justify-end gap-1.5">
+                              <span className="font-mono text-sm text-emerald-400">{(c.memory_usage || 0).toFixed(1)}%</span>
+                              <div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                                <div className="h-full bg-emerald-500 rounded-full" style={{ width: `${Math.min(c.memory_usage || 0, 100)}%` }} />
+                              </div>
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-1 text-xs">
+                              {(c.master_count > 0) && (
+                                <span className="text-emerald-400">M:{c.master_count}</span>
+                              )}
+                              {(c.worker_count > 0) && (
+                                <span className="text-blue-400">W:{c.worker_count}</span>
+                              )}
+                              {!c.master_count && !c.worker_count && <span className="text-slate-600">-</span>}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-xs text-slate-500">{fmtTime(c.last_sync_at)}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              </CardContent>
+            </Card>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/layout/Sidebar.tsx

@@ -9,6 +9,7 @@ import {
   Menu, Network, CloudCog, Globe, MapPin, Key,
   Brain, Activity, BarChart3, GitBranch,
   Bot, AlertTriangle, Container, Boxes, Clock, Rocket,
+  Layers,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -38,6 +39,7 @@ const menuItems: MenuItem[] = [
     id: 'kubernetes', name: 'Kubernetes', icon: Cloud,
     children: [
       { id: 'k8s-clusters', name: '集群列表', icon: Cloud, path: '/kubernetes' },
+      { id: 'k8s-compare', name: '多集群对比', icon: Layers, path: '/kubernetes/compare' },
       { id: 'k8s-nodes', name: '节点管理', icon: Cpu, path: '/nodes' },
       {
         id: 'k8s-workload', name: '工作负载', icon: Boxes,

frontend/src/services/api.ts

@@ -497,6 +497,11 @@ export const kubernetesApi = {
     return http.get(`/kubernetes/${clusterCode}/capacity`, params);
   },
 
+  // === 🆕 M13: 多集群资源对比看板 ===
+  getMultiClusterComparison: async () => {
+    return http.get('/kubernetes/compare');
+  },
+
   // === 🆕 YAML Apply ===
   applyYAML: async (clusterCode: string, yaml: string) => {
     return http.post(`/kubernetes/${clusterCode}/yaml/apply`, { yaml });