feat: 重构监控中心导航，新增资源监控4大模块

- 主菜单「监控告警」→「监控中心」
- 「告警中心」→「告警服务」移至链路追踪下方
- 新增资源监控 Tab 页（主机/中间件/SNMP/站点拨测）
- Agent 新增网络采集器(network)和磁盘IO采集器(diskio)
- 后端扩展 Agent 上报模型，支持 NetworkStat/DiskIOStat
- 前端 ServerTableRow 展示网络和磁盘IO实时指标
- WebSocket MetricsUpdate 推送扩展

frontend/src/App.tsx

@@ -31,8 +31,7 @@ import { AIPredictiveAnalytics } from '@/components/aiops/AIPredictiveAnalytics'
 import AlertCenter from '@/components/monitor/alert-center/AlertCenter';
 import TraceManager from '@/components/monitor/trace/TraceManager';
 import GrafanaDashboard from '@/components/monitor/dashboard/GrafanaDashboard';
-import { AgentMonitor } from '@/components/agent/AgentMonitor';
-import { AgentAlerts } from '@/components/agent/AgentAlerts';
+import { MonitorCenter } from '@/pages/MonitorCenter';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -59,7 +58,8 @@ function App() {
             <Route path="regions" element={<RegionManager />} />
             <Route path="platforms" element={<PlatformManager />} />
             <Route path="cloud-billing" element={<CloudBilling />} />
-            <Route path="agent-monitor" element={<AgentMonitor />} />
+            {/* 资源监控（Agent 指标 + 中间件 + SNMP + 拨测） */}
+            <Route path="monitor-center" element={<MonitorCenter />} />
             <Route path="clusters" element={<K8sClusters />} />
             <Route path="nodes" element={<K8sNodes />} />
             <Route path="workloads" element={<K8sWorkloads />} />
@@ -73,7 +73,6 @@ function App() {
             <Route path="alert-center" element={<AlertCenter />} />
             <Route path="trace" element={<TraceManager />} />
             <Route path="grafana" element={<GrafanaDashboard />} />
-            <Route path="agent-alerts" element={<AgentAlerts />} />
             <Route path="alerts" element={<AlertManager />} />
             <Route path="logs" element={<AlertManager />} />
             <Route path="approval" element={<ApprovalFlowManager />} />

frontend/src/components/layout/Sidebar.tsx

@@ -59,7 +59,6 @@ const menuItems: MenuItem[] = [
       { id: 'regions', name: '区域管理', icon: MapPin, path: '/regions' },
       { id: 'platforms', name: '云平台', icon: CloudCog, path: '/platforms' },
       { id: 'cloud-billing', name: '云账单', icon: BarChart3, path: '/cloud-billing' },
-      { id: 'agent-monitor', name: 'Agent监控', icon: Activity, path: '/agent-monitor' },
     ],
   },
   {
@@ -84,14 +83,14 @@ const menuItems: MenuItem[] = [
   },
   {
     id: 'monitor',
-    name: '监控告警',
+    name: '监控中心',
     icon: Bell,
     children: [
+      { id: 'monitor-center', name: '资源监控', icon: Activity, path: '/monitor-center' },
       { id: 'metrics', name: '指标监控', icon: Cpu, path: '/metrics' },
-      { id: 'alert-center', name: '告警中心', icon: Bell, path: '/alert-center' },
-      { id: 'trace', name: '链路追踪', icon: GitBranch, path: '/trace' },
       { id: 'grafana', name: '监控大屏', icon: Monitor, path: '/grafana' },
-      { id: 'agent-alerts', name: 'Agent告警', icon: AlertTriangle, path: '/agent-alerts' },
+      { id: 'trace', name: '链路追踪', icon: GitBranch, path: '/trace' },
+      { id: 'alert-center', name: '告警服务', icon: Bell, path: '/alert-center' },
     ],
   },
   {

frontend/src/components/server/ServerManager.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -168,6 +168,82 @@ export function ServerManager() {
     loadData();
   }, []);
 
+  // WebSocket 实时接收 Agent 指标推送 // Logan.Li
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const token = useUserStore.getState().token;
+    if (!token) return;
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws/metrics?token=${token}`;
+
+    const connect = () => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) return;
+
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        console.log('[MetricsWS] 已连接，实时接收指标推送');
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === 'metrics_update') {
+            setServers((prev) =>
+              prev.map((s) => {
+                // 通过 hostname 匹配（Agent 上报时使用 hostname）
+                if (s.hostname === msg.hostname) {
+                  return {
+                    ...s,
+                    cpu_usage: msg.cpu_usage,
+                    memory_usage: msg.memory_usage,
+                    disk_usage: msg.disk_usage,
+                    status: msg.status,
+                    tcp_established: msg.tcp_established,
+                    tcp_time_wait: msg.tcp_time_wait,
+                    net_rx_bps: msg.net_rx_bps,
+                    net_tx_bps: msg.net_tx_bps,
+                    disk_read_bps: msg.disk_read_bps,
+                    disk_write_bps: msg.disk_write_bps,
+                  };
+                }
+                return s;
+              })
+            );
+          }
+        } catch (e) {
+          // 忽略非 JSON 消息
+        }
+      };
+
+      ws.onclose = () => {
+        console.log('[MetricsWS] 连接断开，3 秒后重连');
+        wsRef.current = null;
+        reconnectTimerRef.current = setTimeout(connect, 3000);
+      };
+
+      ws.onerror = (err) => {
+        console.error('[MetricsWS] 连接错误:', err);
+        ws.close();
+      };
+    };
+
+    connect();
+
+    return () => {
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+      if (wsRef.current) {
+        wsRef.current.onclose = null; // 阻止自动重连
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, []);
+
   const filteredServers = servers.filter((server) => {
     const matchesSearch =
       (server.hostname || '').toLowerCase().includes(searchQuery.toLowerCase()) ||

frontend/src/components/server/ServerTableRow.tsx

@@ -12,7 +12,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { TableCell, TableRow } from '@/components/ui/table';
-import { Cpu, Edit, Loader2, MoreHorizontal, Server as ServerIcon, Terminal, Trash2, CheckCircle, XCircle } from "lucide-react";
+import { Cpu, Edit, Loader2, MoreHorizontal, Server as ServerIcon, Terminal, Trash2, CheckCircle, XCircle, Network, HardDrive } from 'lucide-react';
 import { getStatusBadge, getTags, getUsageColor } from './serverHelpers';
 
 interface ServerTableRowProps {
@@ -42,6 +42,19 @@ export function ServerTableRow({
   const memoryUsage = Number(server.memory_usage || 0);
   const tags = getTags(server);
   const memGB = server.memory ? Math.round(server.memory / 1024) : 0;
+  const tcpEst = server.tcp_established || 0;
+  const tcpTw = server.tcp_time_wait || 0;
+  const rxBps = server.net_rx_bps || 0;
+  const txBps = server.net_tx_bps || 0;
+  const readBps = server.disk_read_bps || 0;
+  const writeBps = server.disk_write_bps || 0;
+
+  // Format bytes/s to human readable
+  const fmtBps = (bps: number) => {
+    if (bps >= 1_000_000) return (bps / 1_000_000).toFixed(1) + 'MB/s';
+    if (bps >= 1_000) return (bps / 1_000).toFixed(1) + 'KB/s';
+    return bps.toFixed(0) + 'B/s';
+  };
 
   return (
     <TableRow className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
@@ -107,6 +120,15 @@ export function ServerTableRow({
             </div>
             <span className="text-xs text-[var(--dg-text-secondary)]">{memoryUsage.toFixed(1)}%</span>
           </div>
+          <div className="flex items-center gap-1 text-xs text-[var(--dg-text-muted)] pt-0.5">
+            <Network className="h-3 w-3" />
+            <span>{tcpEst}连接</span>
+            {tcpTw > 0 && <span className="text-[var(--dg-orange)]">({tcpTw}TW)</span>}
+          </div>
+          <div className="flex items-center gap-1 text-xs text-[var(--dg-text-muted)]">
+            <HardDrive className="h-3 w-3" />
+            <span>读{fmtBps(readBps)}/写{fmtBps(writeBps)}</span>
+          </div>
         </div>
       </TableCell>
       <TableCell>

frontend/src/pages/HostMonitor.tsx

@@ -0,0 +1,94 @@
+// 主机监控 — Agent 采集指标展示 (CPU/内存/磁盘/网络/磁盘IO)
+import { Card, CardContent } from '@/components/ui/card';
+import { Cpu, HardDrive, Network, Activity, Server } from 'lucide-react';
+
+export function HostMonitor() {
+  return (
+    <div className="space-y-6">
+      {/* Overview Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                <Cpu className="h-5 w-5 text-blue-400" />
+              </div>
+              <div>
+                <p className="text-xs text-[var(--dg-text-muted)]">CPU 使用率</p>
+                <p className="text-xl font-bold text-[var(--dg-text-primary)]">--</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
+                <Server className="h-5 w-5 text-emerald-400" />
+              </div>
+              <div>
+                <p className="text-xs text-[var(--dg-text-muted)]">内存使用率</p>
+                <p className="text-xl font-bold text-[var(--dg-text-primary)]">--</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center">
+                <Network className="h-5 w-5 text-purple-400" />
+              </div>
+              <div>
+                <p className="text-xs text-[var(--dg-text-muted)]">TCP 连接数</p>
+                <p className="text-xl font-bold text-[var(--dg-text-primary)]">--</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-orange-500/10 flex items-center justify-center">
+                <HardDrive className="h-5 w-5 text-orange-400" />
+              </div>
+              <div>
+                <p className="text-xs text-[var(--dg-text-muted)]">磁盘 IO</p>
+                <p className="text-xl font-bold text-[var(--dg-text-primary)]">--</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Detail Sections */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* CPU/Memory Trends */}
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-2 mb-4">
+              <Activity className="h-4 w-4 text-[var(--dg-text-muted)]" />
+              <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">CPU / 内存 趋势</h3>
+            </div>
+            <div className="h-64 flex items-center justify-center text-[var(--dg-text-muted)] text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
+              趋势图表开发中...
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Network */}
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-2 mb-4">
+              <Network className="h-4 w-4 text-[var(--dg-text-muted)]" />
+              <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">网络流量</h3>
+            </div>
+            <div className="h-64 flex items-center justify-center text-[var(--dg-text-muted)] text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
+              网络流量图表开发中...
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/MiddlewareMonitor.tsx

@@ -0,0 +1,47 @@
+// 中间件监控 — Redis / MySQL 指标采集（需配置认证信息）
+import { Card, CardContent } from '@/components/ui/card';
+import { Database, Server } from 'lucide-react';
+
+export function MiddlewareMonitor() {
+  return (
+    <div className="space-y-6">
+      {/* Redis */}
+      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <CardContent className="p-4">
+          <div className="flex items-center gap-2 mb-4">
+            <Database className="h-4 w-4 text-red-400" />
+            <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">Redis 监控</h3>
+          </div>
+          <p className="text-sm text-[var(--dg-text-muted)] mb-4">需在 Agent 配置 Redis 连接地址和密码后启用采集。</p>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {['连接数', '内存', '命中率', 'QPS'].map((label) => (
+              <div key={label} className="bg-[var(--dg-bg-tertiary)] rounded-lg p-3 text-center">
+                <p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
+                <p className="text-lg font-bold text-[var(--dg-text-primary)]">--</p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* MySQL */}
+      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <CardContent className="p-4">
+          <div className="flex items-center gap-2 mb-4">
+            <Server className="h-4 w-4 text-blue-400" />
+            <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">MySQL 监控</h3>
+          </div>
+          <p className="text-sm text-[var(--dg-text-muted)] mb-4">需在 Agent 配置 MySQL 连接地址、用户名和密码后启用采集。</p>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {['连接数', 'QPS', '慢查询', '缓冲池命中率'].map((label) => (
+              <div key={label} className="bg-[var(--dg-bg-tertiary)] rounded-lg p-3 text-center">
+                <p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
+                <p className="text-lg font-bold text-[var(--dg-text-primary)]">--</p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/MonitorCenter.tsx

@@ -0,0 +1,69 @@
+// 监控中心 — 4个监控标签页的容器
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Cpu, Database, Radio, Globe } from 'lucide-react';
+import { HostMonitor } from './HostMonitor';
+import { MiddlewareMonitor } from './MiddlewareMonitor';
+import { SNMPMonitor } from './SNMPMonitor';
+import { SiteMonitor } from './SiteMonitor';
+
+type TabId = 'host' | 'middleware' | 'snmp' | 'site';
+
+interface Tab {
+  id: TabId;
+  name: string;
+  icon: React.ElementType;
+  description: string;
+}
+
+const tabs: Tab[] = [
+  { id: 'host', name: '主机监控', icon: Cpu, description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
+  { id: 'middleware', name: '中间件监控', icon: Database, description: 'Redis / MySQL 指标采集' },
+  { id: 'snmp', name: 'SNMP 监控', icon: Radio, description: '网络设备 / 服务器硬件 (OID 模板)' },
+  { id: 'site', name: '站点拨测', icon: Globe, description: 'HTTP / PING / DNS / TCP / WS 拨测' },
+];
+
+export function MonitorCenter() {
+  const [activeTab, setActiveTab] = useState<TabId>('host');
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">监控中心</h1>
+        <p className="text-sm text-[var(--dg-text-muted)] mt-1">全面的基础设施与应用监控</p>
+      </div>
+
+      {/* Tab Bar */}
+      <div className="flex gap-1 bg-[var(--dg-bg-secondary)] p-1 rounded-lg border border-[var(--dg-border)]">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={cn(
+              'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium transition-all',
+              activeTab === tab.id
+                ? 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] shadow-sm'
+                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
+            )}
+          >
+            <tab.icon className="h-4 w-4" />
+            <span className="hidden sm:inline">{tab.name}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Description */}
+      <p className="text-sm text-[var(--dg-text-muted)] -mt-4">
+        {tabs.find(t => t.id === activeTab)?.description}
+      </p>
+
+      {/* Tab Content */}
+      <div className="min-h-[400px]">
+        {activeTab === 'host' && <HostMonitor />}
+        {activeTab === 'middleware' && <MiddlewareMonitor />}
+        {activeTab === 'snmp' && <SNMPMonitor />}
+        {activeTab === 'site' && <SiteMonitor />}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/SNMPMonitor.tsx

@@ -0,0 +1,72 @@
+// SNMP 监控 — 网络设备 / 服务器硬件 (OID 模板采集)
+import { Card, CardContent } from '@/components/ui/card';
+import { Radio, Router, HardDrive } from 'lucide-react';
+
+export function SNMPMonitor() {
+  return (
+    <div className="space-y-6">
+      {/* Device Types */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <Router className="h-4 w-4 text-cyan-400" />
+              <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">网络设备</h3>
+            </div>
+            <p className="text-xs text-[var(--dg-text-muted)] mb-3">交换机 / 路由器 / 防火墙</p>
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-[var(--dg-text-muted)]">设备数</span>
+                <span className="text-[var(--dg-text-primary)] font-mono">--</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-[var(--dg-text-muted)]">在线</span>
+                <span className="text-emerald-400 font-mono">--</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+          <CardContent className="p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <HardDrive className="h-4 w-4 text-purple-400" />
+              <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">服务器硬件</h3>
+            </div>
+            <p className="text-xs text-[var(--dg-text-muted)] mb-3">iLO / iDRAC / IPMI</p>
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-[var(--dg-text-muted)]">设备数</span>
+                <span className="text-[var(--dg-text-primary)] font-mono">--</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-[var(--dg-text-muted)]">异常</span>
+                <span className="text-red-400 font-mono">--</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Template Info */}
+      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <CardContent className="p-4">
+          <div className="flex items-center gap-2 mb-3">
+            <Radio className="h-4 w-4 text-[var(--dg-text-muted)]" />
+            <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">OID 监控模板</h3>
+          </div>
+          <p className="text-sm text-[var(--dg-text-muted)]">
+            支持 Zabbix 兼容的 SNMP OID 模板（XML 格式），内置思科/H3C/华为交换机模板、服务器硬件监控模板。
+          </p>
+          <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-[var(--dg-text-secondary)]">
+            {['思科交换机', 'H3C S5000', '华为交换机', 'iLO/Dell'].map((t) => (
+              <div key={t} className="bg-[var(--dg-bg-tertiary)] rounded px-2 py-1 text-center border border-[var(--dg-border)]">
+                {t}
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/SiteMonitor.tsx

@@ -0,0 +1,52 @@
+// 站点拨测 — HTTP / PING / DNS / TCP / WebSocket 等协议主动监控
+import { Card, CardContent } from '@/components/ui/card';
+import { Globe, Wifi, Server, Mail, ArrowUpDown } from 'lucide-react';
+
+const probeTypes = [
+  { icon: Globe, name: 'HTTP(S)', color: 'text-blue-400', desc: 'URL 状态码 & 响应时间' },
+  { icon: ArrowUpDown, name: 'PING', color: 'text-emerald-400', desc: 'ICMP 连通性 & 延迟' },
+  { icon: Wifi, name: 'WebSocket', color: 'text-purple-400', desc: 'WS/WSS 连接心跳' },
+  { icon: Globe, name: 'DNS', color: 'text-cyan-400', desc: '域名解析延迟 & 结果验证' },
+  { icon: Server, name: 'TCP', color: 'text-orange-400', desc: '端口连通性检测' },
+  { icon: Server, name: 'UDP', color: 'text-yellow-400', desc: '端口连通性检测' },
+  { icon: Mail, name: 'SMTP', color: 'text-pink-400', desc: '邮件服务连通性' },
+  { icon: Mail, name: 'POP3', color: 'text-indigo-400', desc: '邮件接收服务' },
+  { icon: Globe, name: 'FTP', color: 'text-teal-400', desc: '文件传输服务' },
+];
+
+export function SiteMonitor() {
+  return (
+    <div className="space-y-6">
+      {/* Probe Type Grid */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
+        {probeTypes.map((p) => (
+          <Card key={p.name} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] hover:border-[var(--dg-blue)]/30 transition-colors cursor-pointer">
+            <CardContent className="p-3 text-center">
+              <p.icon className={`h-5 w-5 mx-auto mb-1.5 ${p.color}`} />
+              <p className="text-xs font-medium text-[var(--dg-text-primary)]">{p.name}</p>
+              <p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{p.desc}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Summary */}
+      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <CardContent className="p-4">
+          <div className="flex items-center gap-2 mb-3">
+            <Globe className="h-4 w-4 text-[var(--dg-text-muted)]" />
+            <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">拨测任务概览</h3>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {['总任务数', '正常', '异常', '可用率'].map((label) => (
+              <div key={label} className="bg-[var(--dg-bg-tertiary)] rounded-lg p-3 text-center">
+                <p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
+                <p className="text-lg font-bold text-[var(--dg-text-primary)]">--</p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}