chore: 以本地为准，上传全部并替换 GitHub

app/monitoring/page.tsx

@@ -47,19 +47,95 @@ const serviceStatus = [
   { name: "缓存服务", status: "healthy", uptime: "99.99%", latency: "2ms" },
 ]
 
+// 服务状态接口
+interface ServiceStatus {
+  name: string
+  status: 'healthy' | 'degraded' | 'unhealthy'
+  latency: string
+  message: string
+}
+
+// 告警接口
+interface Alert {
+  id: string
+  type: 'info' | 'warning' | 'error'
+  message: string
+  time: string
+  status: 'active' | 'resolved'
+}
+
 export default function MonitoringPage() {
   const [cpuUsage, setCpuUsage] = useState(65)
   const [memoryUsage, setMemoryUsage] = useState(68)
   const [diskUsage, setDiskUsage] = useState(80)
   const [networkIO, setNetworkIO] = useState(256)
+  const [loading, setLoading] = useState(true)
+  const [services, setServices] = useState<ServiceStatus[]>(serviceStatus.map(s => ({
+    ...s,
+    status: s.status as 'healthy' | 'degraded' | 'unhealthy',
+    message: ''
+  })))
+  const [alerts, setAlerts] = useState<Alert[]>(recentAlerts.map(a => ({
+    ...a,
+    type: a.type as 'info' | 'warning' | 'error',
+    status: a.status as 'active' | 'resolved'
+  })))
+  const [dbInfo, setDbInfo] = useState<any>(null)
+
+  // 获取真实监控数据
+  const fetchMonitoringData = async () => {
+    try {
+      const res = await fetch('/api/monitoring')
+      const data = await res.json()
+      
+      if (data.success) {
+        // 更新服务状态
+        if (data.health?.services) {
+          setServices(data.health.services.map((s: any) => ({
+            name: s.name,
+            status: s.status,
+            latency: s.latency,
+            uptime: s.status === 'healthy' ? '99.99%' : '99.5%',
+            message: s.message
+          })))
+        }
+        
+        // 更新告警
+        if (data.alerts?.alerts) {
+          setAlerts(data.alerts.alerts)
+        }
+        
+        // 更新数据库信息
+        if (data.database?.server) {
+          setDbInfo(data.database)
+          // 根据MongoDB内存使用更新内存指标
+          const memMB = data.database.server.memory?.resident || 0
+          setMemoryUsage(Math.min(90, (memMB / 8000) * 100))
+        }
+      }
+    } catch (e) {
+      console.error('获取监控数据失败:', e)
+    } finally {
+      setLoading(false)
+    }
+  }
 
   useEffect(() => {
+    fetchMonitoringData()
+    
+    // 模拟CPU和网络波动
     const interval = setInterval(() => {
       setCpuUsage((prev) => Math.min(95, Math.max(30, prev + (Math.random() - 0.5) * 10)))
-      setMemoryUsage((prev) => Math.min(90, Math.max(50, prev + (Math.random() - 0.5) * 5)))
       setNetworkIO((prev) => Math.min(500, Math.max(100, prev + (Math.random() - 0.5) * 50)))
     }, 3000)
-    return () => clearInterval(interval)
+    
+    // 每30秒刷新真实数据
+    const refreshInterval = setInterval(fetchMonitoringData, 30000)
+    
+    return () => {
+      clearInterval(interval)
+      clearInterval(refreshInterval)
+    }
   }, [])
 
   return (