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

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

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>
+  );
+}