萌芽监控面板

一个简洁高效的 Linux 服务器监控面板，采用前后端分离架构。

项目概述

功能

• 实时监控 Linux 服务器的 CPU、内存、存储、GPU 使用情况
• 支持同时监控多个服务器
• 卡片式展示，直观清晰
• 详情弹窗查看完整信息

技术栈

• 前端: React 19 + TypeScript + Vite
• 后端: Go (原生 net/http 库)
• 风格: 白色柔和风格界面

快速开始

后端部署

1. 进入后端目录

cd mengyamonitor-backend

2. 编译（在 Linux 服务器上）

go build -o mengyamonitor-backend

3. 运行

./mengyamonitor-backend

默认监听端口: 9292

4. 可选：配置环境变量

PORT=8080 ./mengyamonitor-backend

前端开发

1. 进入前端目录

cd mengyamonitor-frontend

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

默认访问端口: 2929

4. 构建生产版本

npm run build

使用说明

1. 部署后端到服务器

将编译好的 mengyamonitor-backend 二进制文件上传到需要监控的 Linux 服务器并运行。

2. 配置前端

在前端界面点击"添加服务器"，输入：

• 服务器名称：例如"生产服务器1"
• 服务器地址：例如"http://192.168.1.100:9292"

3. 查看监控数据

• 主界面显示所有服务器的基本信息（CPU、内存使用率）
• 点击"查看详情"可查看完整的系统信息
• 数据每2秒自动刷新

项目结构

萌芽监控面板/
├── mengyamonitor-backend/      # 后端服务
│   ├── main.go                # 主程序和HTTP服务器
│   ├── systeminfo.go          # 系统信息采集
│   ├── go.mod                 # Go模块配置
│   └── README.md              # 后端文档
│
├── mengyamonitor-frontend/     # 前端应用
│   ├── src/
│   │   ├── api/               # API调用层
│   │   ├── components/        # React组件
│   │   ├── hooks/             # 自定义Hooks
│   │   ├── types/             # TypeScript类型
│   │   ├── utils/             # 工具函数
│   │   ├── App.tsx            # 主应用
│   │   └── main.tsx           # 入口文件
│   ├── package.json
│   ├── vite.config.ts
│   └── README.md              # 前端文档
│
└── 需求.txt                    # 需求文档

API 接口

GET /api/health

健康检查

GET /api/metrics

获取系统监控指标

{
  "data": {
    "hostname": "server1",
    "timestamp": "2025-12-10T10:00:00Z",
    "cpu": { "usagePercent": 23.45, ... },
    "memory": { "usedPercent": 50.0, ... },
    "storage": [...],
    "gpu": [...],
    "os": { ... },
    "uptimeSeconds": 864000.5
  }
}

注意事项

1. 系统支持: 后端仅支持 Linux 系统
2. 权限要求: 需要读取 /proc 文件系统的权限
3. GPU 监控: 需要安装 nvidia-smi 工具（可选）
4. 网络访问: 确保前端可以访问后端的 9292 端口
5. CORS: 后端已配置允许跨域访问

常见问题

Q: 前端无法连接后端？ A: 检查服务器防火墙是否开放 9292 端口，确保后端服务正在运行。

Q: GPU 信息显示不可用？ A: 如果服务器没有 NVIDIA GPU 或未安装 nvidia-smi，GPU 信息会显示为"不可用"，这是正常的。

Q: 如何将前端打包成桌面应用？ A: 可以使用 Electron 或 Tauri 框架将前端打包成桌面应用，详见前端 README。

开发者

• 前后端分离架构，代码结构清晰
• 符合企业级开发规范
• 易于扩展和维护

License

MIT