diff --git a/src/components/monitoring/ResourceMonitor.tsx b/src/components/monitoring/ResourceMonitor.tsx
new file mode 100644
index 00000000..5596770e
--- /dev/null
+++ b/src/components/monitoring/ResourceMonitor.tsx
@@ -0,0 +1,294 @@
+/**
+ * 资源监控组件
+ *
+ * 显示系统资源使用情况，包括：
+ * - CPU 使用率（带历史图表）
+ * - 内存使用率（带历史图表）
+ * - 磁盘使用率（带历史图表）
+ */
+
+'use client'
+
+import React from 'react'
+import { Cpu, HardDrive, MemoryStick, TrendingUp, TrendingDown, Minus } from 'lucide-react'
+import Card from '@/components/ui/Card'
+import { Title3, Body, Caption1 } from '@/components/ui/Typography'
+import ProgressBar from '@/components/ui/ProgressBar'
+
+export interface ResourceData {
+ current: number // 当前使用百分比
+ history: number[] // 历史数据点（最近N个）
+ total?: number // 总量（MB）
+ used?: number // 已用（MB）
+ free?: number // 空闲（MB）
+}
+
+export interface ResourceMonitorProps {
+ cpu?: ResourceData
+ memory?: ResourceData
+ disk?: ResourceData
+ cpuCores?: number
+ className?: string
+ showHistory?: boolean
+ historyPoints?: number
+}
+
+export default function ResourceMonitor({
+ cpu,
+ memory,
+ disk,
+ cpuCores,
+ className = '',
+ showHistory = true,
+ historyPoints = 20,
+}: ResourceMonitorProps) {
+ return (
+
+ {/* CPU 监控 */}
+ {cpu && (
+ }
+ title="CPU 使用率"
+ subtitle={cpuCores ? `${cpuCores} 核心` : undefined}
+ data={cpu}
+ showHistory={showHistory}
+ historyPoints={historyPoints}
+ unit="%"
+ warningThreshold={70}
+ criticalThreshold={90}
+ />
+ )}
+
+ {/* 内存监控 */}
+ {memory && (
+ }
+ title="内存使用率"
+ subtitle={memory.total ? `${formatMB(memory.used || 0)} / ${formatMB(memory.total)}` : undefined}
+ data={memory}
+ showHistory={showHistory}
+ historyPoints={historyPoints}
+ unit="%"
+ warningThreshold={75}
+ criticalThreshold={90}
+ />
+ )}
+
+ {/* 磁盘监控 */}
+ {disk && (
+ }
+ title="磁盘使用率"
+ subtitle={disk.total ? `${formatMB(disk.used || 0)} / ${formatMB(disk.total)}` : undefined}
+ data={disk}
+ showHistory={showHistory}
+ historyPoints={historyPoints}
+ unit="%"
+ warningThreshold={80}
+ criticalThreshold={95}
+ />
+ )}
+
+ )
+}
+
+interface ResourceCardProps {
+ icon: React.ReactNode
+ title: string
+ subtitle?: string
+ data: ResourceData
+ showHistory: boolean
+ historyPoints: number
+ unit: string
+ warningThreshold: number
+ criticalThreshold: number
+}
+
+function ResourceCard({
+ icon,
+ title,
+ subtitle,
+ data,
+ showHistory,
+ historyPoints,
+ unit,
+ warningThreshold,
+ criticalThreshold,
+}: ResourceCardProps) {
+ const getStatusType = (value: number) => {
+ if (value >= criticalThreshold) return 'error'
+ if (value >= warningThreshold) return 'warning'
+ return 'success'
+ }
+
+ const getTrend = () => {
+ if (data.history.length < 2) return 'stable'
+ const recent = data.history.slice(-5)
+ const avg = recent.reduce((a, b) => a + b, 0) / recent.length
+ const diff = data.current - avg
+ if (diff > 5) return 'up'
+ if (diff < -5) return 'down'
+ return 'stable'
+ }
+
+ const trend = getTrend()
+
+ return (
+
+
+
+
{icon}
+
+ {title}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+
+
+
+ {data.current.toFixed(1)}{unit}
+
+ {trend === 'up' && }
+ {trend === 'down' && }
+ {trend === 'stable' && }
+
+
+
+
+ )}
+
+ )
+}
+
+interface MiniChartProps {
+ data: number[]
+ warningThreshold: number
+ criticalThreshold: number
+}
+
+function MiniChart({ data, warningThreshold, criticalThreshold }: MiniChartProps) {
+ const height = 40
+ const width = 200
+ const padding = 2
+
+ if (data.length === 0) return null
+
+ const max = 100
+ const min = 0
+ const range = max - min
+
+ const points = data.map((value, index) => {
+ const x = padding + (index / (data.length - 1 || 1)) * (width - padding * 2)
+ const y = height - padding - ((value - min) / range) * (height - padding * 2)
+ return `${x},${y}`
+ }).join(' ')
+
+ const getColor = (value: number) => {
+ if (value >= criticalThreshold) return 'var(--color-red)'
+ if (value >= warningThreshold) return 'var(--color-orange)'
+ return 'var(--color-green)'
+ }
+
+ // 创建渐变区域
+ const areaPoints = `${padding},${height - padding} ${points} ${width - padding},${height - padding}`
+
+ return (
+
+
+
+
+ {data.length > 0 ? `最低 ${Math.min(...data).toFixed(0)}%` : ''}
+
+
+ {data.length > 0 ? `最高 ${Math.max(...data).toFixed(0)}%` : ''}
+
+
+
+
+ {getStatusIcon()}
+ {service.name}
+
+ {getStatusBadge()}
+
+
+
+ {service.responseTime}ms
+
+
+ 响应时间
+
+
+ )}
+
+ {/* 最后检查时间 */}
+ {service.lastChecked && (
+
+ 最后检查: {service.lastChecked.toLocaleTimeString()}
+
+ )}
+
+ {/* 错误信息 */}
+ {service.errorMessage && (
+
+
+ {service.errorMessage}
+
+
+ )}
+
+ {/* 详细信息 */}
+ {service.details && Object.keys(service.details).length > 0 && (
+
+ {Object.entries(service.details).map(([key, value]) => (
+
+ {key}
+
+ {typeof value === 'boolean' ? (value ? '是' : '否') : String(value)}
+
+
+ ))}
+