A premium single-file HTML das…

# 单文件HTML监控面板方案

由于浏览器无法直接读取服务器数据，面板需通过后端接口获取指标。推荐两种架构，前端均为单文件HTML。

方案一：Node.js单文件（推荐，前后端合一）

用一个Node脚本同时提供API和托管HTML页面，CentOS 8上直接运行：

• 通过执行系统命令获取数据：
• CPU：读取 /proc/stat 两次采样计算使用率
• 内存：读取 /proc/meminfo，计算 MemAvailable 差值得到使用率
• 磁盘：执行 df -P / 或指定挂载点解析百分比
• Docker容器：docker stats --no-stream --format 获取6个容器的CPU/内存
• 用原生 http 模块即可，无需npm依赖；每2-5秒轮询一次，前端用 fetch + setInterval 拉取 /api/metrics

方案二：Prometheus + node_exporter + Grafana

如果已有Docker，可一键起容器组合，HTML仅做嵌入或用Grafana替代：

• node_exporter采集主机指标（9100端口）
• Grafana容器展示面板，HTML用iframe嵌入即可

前端面板设计要点

• 布局：
• 顶部：主机名、运行时长、采集时间
• 三个仪表盘：CPU使用率、内存使用率、磁盘使用率
• 实时折线图：CPU/内存历史曲线（保留最近60个点）
• 底部表格：6个容器的名称、CPU%、内存用量
• 技术选型：
• 纯HTML+CSS+原生JS，单文件无构建
• 图表用 Chart.js CDN 引入
• 深色主题，告警阈值变色（如CPU超80%标红）
• 数据处理：
• setInterval 每3秒请求一次
• 页面失焦时暂停轮询，减少服务器开销

部署建议

• 方案一：nohup node monitor.js & 运行，用systemd托管更稳；开放端口建议仅限内网或加Basic Auth
• 注意CentOS 8已停止维护（EOL），yum源需切换到vault源，或考虑迁移到Rocky/AlmaLinux
• Docker容器监控若需更细数据，可在容器内装cAdvisor配合

需要我直接输出完整可运行的代码（Node后端+HTML前端约200行）吗？