# 萌芽监控面板

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

## 项目概述

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

### 技术栈
- **前端**: React 19 + TypeScript + Vite
- **后端**: Go (原生 net/http 库)
- **风格**: 白色柔和风格界面

## 快速开始

### 后端部署

1. 进入后端目录
```bash
cd mengyamonitor-backend
```

2. 编译（在 Linux 服务器上）
```bash
go build -o mengyamonitor-backend
```

3. 运行
```bash
./mengyamonitor-backend
```
默认监听端口: 9292

4. 可选：配置环境变量
```bash
PORT=8080 ./mengyamonitor-backend
```

### 前端开发

1. 进入前端目录
```bash
cd mengyamonitor-frontend
```

2. 安装依赖
```bash
npm install
```

3. 启动开发服务器
```bash
npm run dev
```
默认访问端口: 2929

4. 构建生产版本
```bash
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
获取系统监控指标
```json
{
  "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