shumengya/mengyamonitor
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sync local changes (2026-03-12)

Browse Source
This commit is contained in:
树萌芽
2026-03-12 18:58:42 +08:00
parent 4fa42f7115
commit cc8d6a8028
41 changed files with 7981 additions and 3350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
.gitignore vendored
View File

@@ -1,47 +1,47 @@
# General
.DS_Store
.AppleDouble
.LSOverride
Icon
._*
Thumbs.db
ehthumbs.db
Desktop.ini
*.log
*.tmp
*.bak
*.swp
*.swo
*~
.idea/
.vscode/
*.sublime-project
*.sublime-workspace
# Backend (Go)
/mengyamonitor-backend/mengyamonitor-backend
/mengyamonitor-backend/mengyamonitor-backend.exe
/mengyamonitor-backend/*.exe
/mengyamonitor-backend/*.out
/mengyamonitor-backend/bin/
/mengyamonitor-backend/dist/
/mengyamonitor-backend/vendor/
/mengyamonitor-backend/.env
/mengyamonitor-backend/debug
/mengyamonitor-backend/__debug_bin
# Frontend (Node/React/Vite)
/mengyamonitor-frontend/node_modules/
/mengyamonitor-frontend/dist/
/mengyamonitor-frontend/build/
/mengyamonitor-frontend/coverage/
/mengyamonitor-frontend/.env
/mengyamonitor-frontend/.env.local
/mengyamonitor-frontend/.env.development.local
/mengyamonitor-frontend/.env.test.local
/mengyamonitor-frontend/.env.production.local
/mengyamonitor-frontend/npm-debug.log*
/mengyamonitor-frontend/yarn-debug.log*
/mengyamonitor-frontend/yarn-error.log*
/mengyamonitor-frontend/pnpm-debug.log*
/mengyamonitor-frontend/.eslintcache
# General
.DS_Store
.AppleDouble
.LSOverride
Icon
._*
Thumbs.db
ehthumbs.db
Desktop.ini
*.log
*.tmp
*.bak
*.swp
*.swo
*~
.idea/
.vscode/
*.sublime-project
*.sublime-workspace
# Backend (Go)
/mengyamonitor-backend/mengyamonitor-backend
/mengyamonitor-backend/mengyamonitor-backend.exe
/mengyamonitor-backend/*.exe
/mengyamonitor-backend/*.out
/mengyamonitor-backend/bin/
/mengyamonitor-backend/dist/
/mengyamonitor-backend/vendor/
/mengyamonitor-backend/.env
/mengyamonitor-backend/debug
/mengyamonitor-backend/__debug_bin
# Frontend (Node/React/Vite)
/mengyamonitor-frontend/node_modules/
/mengyamonitor-frontend/dist/
/mengyamonitor-frontend/build/
/mengyamonitor-frontend/coverage/
/mengyamonitor-frontend/.env
/mengyamonitor-frontend/.env.local
/mengyamonitor-frontend/.env.development.local
/mengyamonitor-frontend/.env.test.local
/mengyamonitor-frontend/.env.production.local
/mengyamonitor-frontend/npm-debug.log*
/mengyamonitor-frontend/yarn-debug.log*
/mengyamonitor-frontend/yarn-error.log*
/mengyamonitor-frontend/pnpm-debug.log*
/mengyamonitor-frontend/.eslintcache

312
README.md
View File

@@ -1,156 +1,156 @@
# 萌芽监控面板
一个简洁高效的 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
# 萌芽监控面板
一个简洁高效的 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

7
build-frontend.bat Normal file
View File

@@ -0,0 +1,7 @@
@echo off
chcp 65001 >nul
echo 构建前端项目...
cd mengyamonitor-frontend
echo 正在安装依赖...
call npm install
npm run build

88
mengyamonitor-backend/BUILD.md
View File

@@ -1,88 +0,0 @@
# 编译说明 - 兼容旧版本系统
## 问题说明
如果在 Debian 11 或其他旧版本系统上运行时出现 GLIBC 版本错误：
```
./mengyamonitor-backend: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.34' not found
```
这是因为编译时使用了较新版本的 GLIBC，而目标系统的 GLIBC 版本较旧。
## 解决方案
### 方案 1：在目标系统上编译（推荐）
在 Debian 11 服务器上直接编译：
```bash
cd mengyamonitor-backend
# 禁用 CGO，静态链接
export CGO_ENABLED=0
go build -ldflags="-s -w" -o mengyamonitor-backend .
# 或者使用提供的脚本
chmod +x build.sh
./build.sh
```
### 方案 2：使用静态链接编译
在任何系统上编译，但使用静态链接：
```bash
cd mengyamonitor-backend
# 禁用 CGO
export CGO_ENABLED=0
export GOOS=linux
export GOARCH=amd64
# 编译（静态链接，不依赖系统库）
go build -ldflags="-s -w" -o mengyamonitor-backend .
```
### 方案 3：使用 Docker 编译
使用 Docker 在 Debian 11 环境中编译：
```bash
# 使用 Debian 11 镜像编译
docker run --rm -v $(pwd):/app -w /app golang:1.21-bullseye sh -c "
export CGO_ENABLED=0
go build -ldflags='-s -w' -o mengyamonitor-backend .
"
# 或者使用多阶段构建
docker build -t mengyamonitor-backend -f Dockerfile.build .
```
## 验证编译结果
编译完成后，检查二进制文件：
```bash
# 检查文件类型
file mengyamonitor-backend
# 检查依赖（如果是静态链接，应该显示 "not a dynamic executable"）
ldd mengyamonitor-backend
# 检查 GLIBC 依赖（应该没有或很少）
objdump -T mengyamonitor-backend | grep GLIBC
```
## 编译参数说明
- `CGO_ENABLED=0`: 禁用 CGO，使用纯 Go 实现，不依赖系统 C 库
- `-ldflags="-s -w"`: 减小二进制文件大小
- `-s`: 省略符号表和调试信息
- `-w`: 省略 DWARF 符号表
## 注意事项
1. 禁用 CGO 后，某些需要 C 库的功能可能不可用，但本项目不依赖 CGO
2. 静态链接的二进制文件会稍大一些，但兼容性更好
3. 如果必须使用 CGO，需要在目标系统上编译，或使用相同 GLIBC 版本的系统编译

242
mengyamonitor-backend/README.md
View File

@@ -1,121 +1,121 @@
# 萌芽监控面板 - 后端服务
## 概述
Linux 服务器监控后端服务，使用 Go 原生 net/http 库实现。
## 功能
- CPU 使用率和负载监控
- 内存使用情况
- 磁盘存储监控
- GPU 监控（支持 NVIDIA）
- 操作系统信息
- 系统运行时间
## API 端点
### `GET /api/health`
健康检查端点
```json
{
"status": "ok",
"timestamp": "2025-12-10T10:00:00Z"
}
```
### `GET /api/metrics`
获取系统监控指标
```json
{
"data": {
"hostname": "server1",
"timestamp": "2025-12-10T10:00:00Z",
"cpu": {
"model": "Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz",
"cores": 8,
"usagePercent": 23.45,
"loadAverages": [1.2, 1.5, 1.8]
},
"memory": {
"totalBytes": 16777216000,
"usedBytes": 8388608000,
"freeBytes": 8388608000,
"usedPercent": 50.0
},
"storage": [{
"mount": "/",
"totalBytes": 107374182400,
"usedBytes": 53687091200,
"freeBytes": 53687091200,
"usedPercent": 50.0
}],
"gpu": [{
"name": "Tesla T4",
"memoryTotalMB": 15360,
"memoryUsedMB": 512,
"utilizationPercent": 15.0,
"status": "ok"
}],
"os": {
"kernel": "Linux version 5.15.0",
"distro": "Ubuntu 22.04 LTS",
"architecture": "amd64"
},
"uptimeSeconds": 864000.5
}
}
```
## 运行方式
### 开发环境
```bash
go run .
```
### 生产环境
#### 标准编译
```bash
# 编译
go build -o mengyamonitor-backend
# 运行
./mengyamonitor-backend
```
#### 兼容旧版本系统编译（推荐）
如果需要在 Debian 11 或其他旧版本系统上运行，使用静态链接编译：
```bash
# 禁用 CGO，静态链接（不依赖系统 GLIBC 版本）
export CGO_ENABLED=0
go build -ldflags="-s -w" -o mengyamonitor-backend .
# 或使用提供的脚本
chmod +x build.sh
./build.sh
```
这样可以避免 GLIBC 版本兼容性问题。详细说明请参考 [BUILD.md](./BUILD.md)。
### 环境变量
- `HOST`: 监听地址，默认 `0.0.0.0`
- `PORT`: 监听端口，默认 `9292`
示例：
```bash
PORT=8080 ./mengyamonitor-backend
```
## 部署到服务器
1. 将编译好的二进制文件上传到目标服务器
2. 赋予执行权限：`chmod +x mengyamonitor-backend`
3. 运行服务：`./mengyamonitor-backend`
4. 可选：使用 systemd 或 supervisor 管理服务进程
## 注意事项
- 仅支持 Linux 系统
- GPU 监控需要安装 nvidia-smi 工具
- 需要读取 /proc 文件系统的权限
# 萌芽监控面板 - 后端服务
## 概述
Linux 服务器监控后端服务，使用 Go 原生 net/http 库实现。
## 功能
- CPU 使用率和负载监控
- 内存使用情况
- 磁盘存储监控
- GPU 监控（支持 NVIDIA）
- 操作系统信息
- 系统运行时间
## API 端点
### `GET /api/health`
健康检查端点
```json
{
"status": "ok",
"timestamp": "2025-12-10T10:00:00Z"
}
```
### `GET /api/metrics`
获取系统监控指标
```json
{
"data": {
"hostname": "server1",
"timestamp": "2025-12-10T10:00:00Z",
"cpu": {
"model": "Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz",
"cores": 8,
"usagePercent": 23.45,
"loadAverages": [1.2, 1.5, 1.8]
},
"memory": {
"totalBytes": 16777216000,
"usedBytes": 8388608000,
"freeBytes": 8388608000,
"usedPercent": 50.0
},
"storage": [{
"mount": "/",
"totalBytes": 107374182400,
"usedBytes": 53687091200,
"freeBytes": 53687091200,
"usedPercent": 50.0
}],
"gpu": [{
"name": "Tesla T4",
"memoryTotalMB": 15360,
"memoryUsedMB": 512,
"utilizationPercent": 15.0,
"status": "ok"
}],
"os": {
"kernel": "Linux version 5.15.0",
"distro": "Ubuntu 22.04 LTS",
"architecture": "amd64"
},
"uptimeSeconds": 864000.5
}
}
```
## 运行方式
### 开发环境
```bash
go run .
```
### 生产环境
#### 标准编译
```bash
# 编译
go build -o mengyamonitor-backend
# 运行
./mengyamonitor-backend
```
#### 兼容旧版本系统编译（推荐）
如果需要在 Debian 11 或其他旧版本系统上运行，使用静态链接编译：
```bash
# 禁用 CGO，静态链接（不依赖系统 GLIBC 版本）
export CGO_ENABLED=0
go build -ldflags="-s -w" -o mengyamonitor-backend .
# 或使用提供的脚本
chmod +x build.sh
./build.sh
```
这样可以避免 GLIBC 版本兼容性问题。详细说明请参考 [BUILD.md](./BUILD.md)。
### 环境变量
- `HOST`: 监听地址，默认 `0.0.0.0`
- `PORT`: 监听端口，默认 `9292`
示例：
```bash
PORT=8080 ./mengyamonitor-backend
```
## 部署到服务器
1. 将编译好的二进制文件上传到目标服务器
2. 赋予执行权限：`chmod +x mengyamonitor-backend`
3. 运行服务：`./mengyamonitor-backend`
4. 可选：使用 systemd 或 supervisor 管理服务进程
## 注意事项
- 仅支持 Linux 系统
- GPU 监控需要安装 nvidia-smi 工具
- 需要读取 /proc 文件系统的权限

0
mengyamonitor-backend/build.sh → mengyamonitor-backend/build_amd64.sh
View File

30
mengyamonitor-backend/build_arm64.sh Normal file
View File

@@ -0,0 +1,30 @@
#!/bin/bash
# Linux ARM64 交叉编译脚本
echo "开始交叉编译 mengyamonitor-backend (Linux ARM64)..."
# 禁用 CGO，使用纯 Go 编译（不依赖系统 C 库）
export CGO_ENABLED=0
# 设置目标平台为 Linux ARM64
export GOOS=linux
export GOARCH=arm64
# 编译（静态链接）
go build -ldflags="-s -w" -o mengyamonitor-backend-arm64 .
if [ $? -eq 0 ]; then
echo "编译成功！"
echo "二进制文件: mengyamonitor-backend-arm64"
echo ""
echo "目标平台: Linux ARM64"
echo "编译模式: 静态链接，无外部依赖"
echo ""
echo "检查文件信息:"
file mengyamonitor-backend-arm64 2>/dev/null || echo "文件已生成: mengyamonitor-backend-arm64"
echo ""
ls -lh mengyamonitor-backend-arm64
else
echo "编译失败！"
exit 1
fi

206
mengyamonitor-backend/collector.go
View File

@@ -1,103 +1,103 @@
package main
import (
"bufio"
"os"
"runtime"
"strconv"
"strings"
"time"
)
// CollectMetrics 收集所有系统监控指标
func CollectMetrics() (*Metrics, error) {
hostname, _ := os.Hostname()
cpuModel := firstMatchInFile("/proc/cpuinfo", "model name")
cpuUsage, err := readCPUUsage()
if err != nil {
return nil, err
}
cpuTemp := readCPUTemperature()
perCoreUsage := readPerCoreUsage()
mem, err := readMemory()
if err != nil {
return nil, err
}
storage, err := readAllStorage()
if err != nil {
return nil, err
}
gpu := readGPU()
network := readNetworkInterfaces()
systemStats := readSystemStats()
systemStats.DockerStats = readDockerStats()
osInfo := readOSInfo()
uptime := readUptime()
loads := readLoadAverages()
return &Metrics{
Hostname: hostname,
Timestamp: time.Now().UTC(),
CPU: CPUMetrics{
Model: cpuModel,
Cores: runtime.NumCPU(),
UsagePercent: round(cpuUsage, 2),
LoadAverages: loads,
Temperature: cpuTemp,
PerCoreUsage: perCoreUsage,
},
Memory: mem,
Storage: storage,
GPU: gpu,
Network: network,
System: systemStats,
OS: osInfo,
UptimeSeconds: uptime,
}, nil
}
func readOSInfo() OSInfo {
distro := readOSRelease()
kernel := strings.TrimSpace(readFirstLine("/proc/version"))
arch := runtime.GOARCH
return OSInfo{
Kernel: kernel,
Distro: distro,
Architecture: arch,
}
}
func readOSRelease() string {
f, err := os.Open("/etc/os-release")
if err != nil {
return runtime.GOOS
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
if strings.HasPrefix(line, "PRETTY_NAME=") {
return strings.Trim(line[len("PRETTY_NAME="):], "\"")
}
}
return runtime.GOOS
}
func readUptime() float64 {
line := readFirstLine("/proc/uptime")
fields := strings.Fields(line)
if len(fields) == 0 {
return 0
}
v, err := strconv.ParseFloat(fields[0], 64)
if err != nil {
return 0
}
return v
}
package main
import (
"bufio"
"os"
"runtime"
"strconv"
"strings"
"time"
)
// CollectMetrics 收集所有系统监控指标
func CollectMetrics() (*Metrics, error) {
hostname, _ := os.Hostname()
cpuModel := firstMatchInFile("/proc/cpuinfo", "model name")
cpuUsage, err := readCPUUsage()
if err != nil {
return nil, err
}
cpuTemp := readCPUTemperature()
perCoreUsage := readPerCoreUsage()
mem, err := readMemory()
if err != nil {
return nil, err
}
storage, err := readAllStorage()
if err != nil {
return nil, err
}
gpu := readGPU()
network := readNetworkInterfaces()
systemStats := readSystemStats()
systemStats.DockerStats = readDockerStats()
osInfo := readOSInfo()
uptime := readUptime()
loads := readLoadAverages()
return &Metrics{
Hostname: hostname,
Timestamp: time.Now().UTC(),
CPU: CPUMetrics{
Model: cpuModel,
Cores: runtime.NumCPU(),
UsagePercent: round(cpuUsage, 2),
LoadAverages: loads,
Temperature: cpuTemp,
PerCoreUsage: perCoreUsage,
},
Memory: mem,
Storage: storage,
GPU: gpu,
Network: network,
System: systemStats,
OS: osInfo,
UptimeSeconds: uptime,
}, nil
}
func readOSInfo() OSInfo {
distro := readOSRelease()
kernel := strings.TrimSpace(readFirstLine("/proc/version"))
arch := runtime.GOARCH
return OSInfo{
Kernel: kernel,
Distro: distro,
Architecture: arch,
}
}
func readOSRelease() string {
f, err := os.Open("/etc/os-release")
if err != nil {
return runtime.GOOS
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
if strings.HasPrefix(line, "PRETTY_NAME=") {
return strings.Trim(line[len("PRETTY_NAME="):], "\"")
}
}
return runtime.GOOS
}
func readUptime() float64 {
line := readFirstLine("/proc/uptime")
fields := strings.Fields(line)
if len(fields) == 0 {
return 0
}
v, err := strconv.ParseFloat(fields[0], 64)
if err != nil {
return 0
}
return v
}

364
mengyamonitor-backend/cpu.go
View File

@@ -1,182 +1,182 @@
package main
import (
"bufio"
"errors"
"os"
"strconv"
"strings"
"time"
)
// readCPUUsage 读取CPU整体使用率
func readCPUUsage() (float64, error) {
idle1, total1, err := readCPUTicks()
if err != nil {
return 0, err
}
time.Sleep(250 * time.Millisecond)
idle2, total2, err := readCPUTicks()
if err != nil {
return 0, err
}
if total2 == total1 {
return 0, errors.New("cpu totals unchanged")
}
idleDelta := float64(idle2 - idle1)
totalDelta := float64(total2 - total1)
usage := (1.0 - idleDelta/totalDelta) * 100
if usage < 0 {
usage = 0
}
return usage, nil
}
// readCPUTicks 读取CPU的idle和total ticks
func readCPUTicks() (idle, total uint64, err error) {
f, err := os.Open("/proc/stat")
if err != nil {
return 0, 0, err
}
defer f.Close()
scanner := bufio.NewScanner(f)
if !scanner.Scan() {
return 0, 0, errors.New("failed to scan /proc/stat")
}
fields := strings.Fields(scanner.Text())
if len(fields) < 5 {
return 0, 0, errors.New("unexpected /proc/stat format")
}
// fields[0] is "cpu"
var vals []uint64
for _, f := range fields[1:] {
v, err := strconv.ParseUint(f, 10, 64)
if err != nil {
return 0, 0, err
}
vals = append(vals, v)
}
for _, v := range vals {
total += v
}
if len(vals) > 3 {
idle = vals[3] // idle time
// 注意：不包含 iowait，因为 iowait 不算真正的空闲时间
// 如果系统有 iowait，它会在 total 中，但不应该算作 idle
}
return idle, total, nil
}
// readPerCoreUsage 读取每个CPU核心的使用率
func readPerCoreUsage() []CoreUsage {
coreUsages := []CoreUsage{}
// 第一次读取
cores1 := readPerCoreTicks()
time.Sleep(100 * time.Millisecond) // 减少到100ms
// 第二次读取
cores2 := readPerCoreTicks()
for i := 0; i < len(cores1) && i < len(cores2); i++ {
idle1, total1 := cores1[i][0], cores1[i][1]
idle2, total2 := cores2[i][0], cores2[i][1]
if total2 == total1 {
continue
}
idleDelta := float64(idle2 - idle1)
totalDelta := float64(total2 - total1)
usage := (1.0 - idleDelta/totalDelta) * 100
if usage < 0 {
usage = 0
}
coreUsages = append(coreUsages, CoreUsage{
Core: i,
Percent: round(usage, 1),
})
}
return coreUsages
}
// readPerCoreTicks 读取每个CPU核心的ticks
func readPerCoreTicks() [][2]uint64 {
var result [][2]uint64
f, err := os.Open("/proc/stat")
if err != nil {
return result
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
if !strings.HasPrefix(line, "cpu") {
continue
}
if strings.HasPrefix(line, "cpu ") {
continue // 跳过总的cpu行
}
fields := strings.Fields(line)
if len(fields) < 5 {
continue
}
var vals []uint64
for _, f := range fields[1:] {
v, err := strconv.ParseUint(f, 10, 64)
if err != nil {
break
}
vals = append(vals, v)
}
if len(vals) < 5 {
continue
}
var total, idle uint64
for _, v := range vals {
total += v
}
idle = vals[3] // idle time only, not including iowait
result = append(result, [2]uint64{idle, total})
}
return result
}
// readCPUTemperature 读取CPU温度
func readCPUTemperature() float64 {
// 尝试从常见位置读取温度
paths := []string{
"/sys/class/thermal/thermal_zone0/temp",
"/sys/class/hwmon/hwmon0/temp1_input",
"/sys/class/hwmon/hwmon1/temp1_input",
}
for _, path := range paths {
if temp := readTempFromFile(path); temp > 0 {
return temp
}
}
return 0
}
// readLoadAverages 读取系统负载平均值
func readLoadAverages() []float64 {
line := readFirstLine("/proc/loadavg")
fields := strings.Fields(line)
res := make([]float64, 0, 3)
for i := 0; i < len(fields) && i < 3; i++ {
v, err := strconv.ParseFloat(fields[i], 64)
if err == nil {
res = append(res, v)
}
}
return res
}
package main
import (
"bufio"
"errors"
"os"
"strconv"
"strings"
"time"
)
// readCPUUsage 读取CPU整体使用率
func readCPUUsage() (float64, error) {
idle1, total1, err := readCPUTicks()
if err != nil {
return 0, err
}
time.Sleep(250 * time.Millisecond)
idle2, total2, err := readCPUTicks()
if err != nil {
return 0, err
}
if total2 == total1 {
return 0, errors.New("cpu totals unchanged")
}
idleDelta := float64(idle2 - idle1)
totalDelta := float64(total2 - total1)
usage := (1.0 - idleDelta/totalDelta) * 100
if usage < 0 {
usage = 0
}
return usage, nil
}
// readCPUTicks 读取CPU的idle和total ticks
func readCPUTicks() (idle, total uint64, err error) {
f, err := os.Open("/proc/stat")
if err != nil {
return 0, 0, err
}
defer f.Close()
scanner := bufio.NewScanner(f)
if !scanner.Scan() {
return 0, 0, errors.New("failed to scan /proc/stat")
}
fields := strings.Fields(scanner.Text())
if len(fields) < 5 {
return 0, 0, errors.New("unexpected /proc/stat format")
}
// fields[0] is "cpu"
var vals []uint64
for _, f := range fields[1:] {
v, err := strconv.ParseUint(f, 10, 64)
if err != nil {
return 0, 0, err
}
vals = append(vals, v)
}
for _, v := range vals {
total += v
}
if len(vals) > 3 {
idle = vals[3] // idle time
// 注意：不包含 iowait，因为 iowait 不算真正的空闲时间
// 如果系统有 iowait，它会在 total 中，但不应该算作 idle
}
return idle, total, nil
}
// readPerCoreUsage 读取每个CPU核心的使用率
func readPerCoreUsage() []CoreUsage {
coreUsages := []CoreUsage{}
// 第一次读取
cores1 := readPerCoreTicks()
time.Sleep(100 * time.Millisecond) // 减少到100ms
// 第二次读取
cores2 := readPerCoreTicks()
for i := 0; i < len(cores1) && i < len(cores2); i++ {
idle1, total1 := cores1[i][0], cores1[i][1]
idle2, total2 := cores2[i][0], cores2[i][1]
if total2 == total1 {
continue
}
idleDelta := float64(idle2 - idle1)
totalDelta := float64(total2 - total1)
usage := (1.0 - idleDelta/totalDelta) * 100
if usage < 0 {
usage = 0
}
coreUsages = append(coreUsages, CoreUsage{
Core: i,
Percent: round(usage, 1),
})
}
return coreUsages
}
// readPerCoreTicks 读取每个CPU核心的ticks
func readPerCoreTicks() [][2]uint64 {
var result [][2]uint64
f, err := os.Open("/proc/stat")
if err != nil {
return result
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
if !strings.HasPrefix(line, "cpu") {
continue
}
if strings.HasPrefix(line, "cpu ") {
continue // 跳过总的cpu行
}
fields := strings.Fields(line)
if len(fields) < 5 {
continue
}
var vals []uint64
for _, f := range fields[1:] {
v, err := strconv.ParseUint(f, 10, 64)
if err != nil {
break
}
vals = append(vals, v)
}
if len(vals) < 5 {
continue
}
var total, idle uint64
for _, v := range vals {
total += v
}
idle = vals[3] // idle time only, not including iowait
result = append(result, [2]uint64{idle, total})
}
return result
}
// readCPUTemperature 读取CPU温度
func readCPUTemperature() float64 {
// 尝试从常见位置读取温度
paths := []string{
"/sys/class/thermal/thermal_zone0/temp",
"/sys/class/hwmon/hwmon0/temp1_input",
"/sys/class/hwmon/hwmon1/temp1_input",
}
for _, path := range paths {
if temp := readTempFromFile(path); temp > 0 {
return temp
}
}
return 0
}
// readLoadAverages 读取系统负载平均值
func readLoadAverages() []float64 {
line := readFirstLine("/proc/loadavg")
fields := strings.Fields(line)
res := make([]float64, 0, 3)
for i := 0; i < len(fields) && i < 3; i++ {
v, err := strconv.ParseFloat(fields[i], 64)
if err == nil {
res = append(res, v)
}
}
return res
}

6
mengyamonitor-backend/go.mod
View File

@@ -1,3 +1,3 @@
module mengyamonitor-backend
go 1.22
module mengyamonitor-backend
go 1.22

96
mengyamonitor-backend/gpu.go
View File

@@ -1,48 +1,48 @@
package main
import (
"os/exec"
"strconv"
"strings"
)
// readGPU 读取GPU信息
func readGPU() []GPUMetrics {
_, err := exec.LookPath("nvidia-smi")
if err != nil {
return []GPUMetrics{{Status: "not_available"}}
}
// Query GPU info including temperature
cmd := exec.Command("nvidia-smi", "--query-gpu=name,memory.total,memory.used,utilization.gpu,temperature.gpu", "--format=csv,noheader,nounits")
out, err := cmd.Output()
if err != nil {
return []GPUMetrics{{Status: "error", Name: "nvidia-smi", UtilizationPercent: 0}}
}
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
gpus := make([]GPUMetrics, 0, len(lines))
for _, line := range lines {
parts := strings.Split(line, ",")
for i := range parts {
parts[i] = strings.TrimSpace(parts[i])
}
if len(parts) < 5 {
continue
}
total, _ := strconv.ParseInt(parts[1], 10, 64)
used, _ := strconv.ParseInt(parts[2], 10, 64)
util, _ := strconv.ParseFloat(parts[3], 64)
temp, _ := strconv.ParseFloat(parts[4], 64)
gpus = append(gpus, GPUMetrics{
Name: parts[0],
MemoryTotalMB: total,
MemoryUsedMB: used,
UtilizationPercent: round(util, 2),
Temperature: temp,
Status: "ok",
})
}
if len(gpus) == 0 {
return []GPUMetrics{{Status: "not_available"}}
}
return gpus
}
package main
import (
"os/exec"
"strconv"
"strings"
)
// readGPU 读取GPU信息
func readGPU() []GPUMetrics {
_, err := exec.LookPath("nvidia-smi")
if err != nil {
return []GPUMetrics{{Status: "not_available"}}
}
// Query GPU info including temperature
cmd := exec.Command("nvidia-smi", "--query-gpu=name,memory.total,memory.used,utilization.gpu,temperature.gpu", "--format=csv,noheader,nounits")
out, err := cmd.Output()
if err != nil {
return []GPUMetrics{{Status: "error", Name: "nvidia-smi", UtilizationPercent: 0}}
}
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
gpus := make([]GPUMetrics, 0, len(lines))
for _, line := range lines {
parts := strings.Split(line, ",")
for i := range parts {
parts[i] = strings.TrimSpace(parts[i])
}
if len(parts) < 5 {
continue
}
total, _ := strconv.ParseInt(parts[1], 10, 64)
used, _ := strconv.ParseInt(parts[2], 10, 64)
util, _ := strconv.ParseFloat(parts[3], 64)
temp, _ := strconv.ParseFloat(parts[4], 64)
gpus = append(gpus, GPUMetrics{
Name: parts[0],
MemoryTotalMB: total,
MemoryUsedMB: used,
UtilizationPercent: round(util, 2),
Temperature: temp,
Status: "ok",
})
}
if len(gpus) == 0 {
return []GPUMetrics{{Status: "not_available"}}
}
return gpus
}

112
mengyamonitor-backend/latency.go
View File

@@ -1,56 +1,56 @@
package main
import (
"fmt"
"net"
"time"
)
// LatencyInfo 延迟信息
type LatencyInfo struct {
ClientToServer float64 `json:"clientToServer"` // 客户端到服务器延迟（ms），由前端计算
External map[string]string `json:"external"` // 外部网站延迟
}
// checkExternalLatency 检测外部网站延迟
func checkExternalLatency(host string, timeout time.Duration) string {
start := time.Now()
// 尝试 TCP 连接 80 端口
conn, err := net.DialTimeout("tcp", host+":80", timeout)
if err != nil {
// 如果 80 端口失败，尝试 443 (HTTPS)
conn, err = net.DialTimeout("tcp", host+":443", timeout)
if err != nil {
return "超时"
}
}
defer conn.Close()
latency := time.Since(start).Milliseconds()
// 检查是否超时（超过超时时间的一半就认为可能有问题）
if latency > timeout.Milliseconds()/2 {
return "超时"
}
return fmt.Sprintf("%d ms", latency)
}
// readExternalLatencies 读取外部网站延迟
func readExternalLatencies() map[string]string {
latencies := make(map[string]string)
timeout := 3 * time.Second
// 检测百度
latencies["baidu.com"] = checkExternalLatency("baidu.com", timeout)
// 检测谷歌
latencies["google.com"] = checkExternalLatency("google.com", timeout)
// 检测 GitHub
latencies["github.com"] = checkExternalLatency("github.com", timeout)
return latencies
}
package main
import (
"fmt"
"net"
"time"
)
// LatencyInfo 延迟信息
type LatencyInfo struct {
ClientToServer float64 `json:"clientToServer"` // 客户端到服务器延迟（ms），由前端计算
External map[string]string `json:"external"` // 外部网站延迟
}
// checkExternalLatency 检测外部网站延迟
func checkExternalLatency(host string, timeout time.Duration) string {
start := time.Now()
// 尝试 TCP 连接 80 端口
conn, err := net.DialTimeout("tcp", host+":80", timeout)
if err != nil {
// 如果 80 端口失败，尝试 443 (HTTPS)
conn, err = net.DialTimeout("tcp", host+":443", timeout)
if err != nil {
return "超时"
}
}
defer conn.Close()
latency := time.Since(start).Milliseconds()
// 检查是否超时（超过超时时间的一半就认为可能有问题）
if latency > timeout.Milliseconds()/2 {
return "超时"
}
return fmt.Sprintf("%d ms", latency)
}
// readExternalLatencies 读取外部网站延迟
func readExternalLatencies() map[string]string {
latencies := make(map[string]string)
timeout := 3 * time.Second
// 检测百度
latencies["baidu.com"] = checkExternalLatency("baidu.com", timeout)
// 检测谷歌
latencies["google.com"] = checkExternalLatency("google.com", timeout)
// 检测 GitHub
latencies["github.com"] = checkExternalLatency("github.com", timeout)
return latencies
}

530
mengyamonitor-backend/main.go
View File

@@ -1,265 +1,265 @@
package main
import (
"encoding/json"
"fmt"
"log"
"net/http"
"os"
"runtime"
"time"
)
// envelope keeps JSON responses consistent.
type envelope map[string]any
func main() {
host := getenv("HOST", "0.0.0.0")
port := getenv("PORT", "9292")
mux := http.NewServeMux()
mux.HandleFunc("/", rootHandler)
mux.HandleFunc("/api/health", healthHandler)
// 拆分的细粒度API端点
mux.HandleFunc("/api/metrics/cpu", cpuMetricsHandler)
mux.HandleFunc("/api/metrics/memory", memoryMetricsHandler)
mux.HandleFunc("/api/metrics/storage", storageMetricsHandler)
mux.HandleFunc("/api/metrics/gpu", gpuMetricsHandler)
mux.HandleFunc("/api/metrics/network", networkMetricsHandler)
mux.HandleFunc("/api/metrics/system", systemMetricsHandler)
mux.HandleFunc("/api/metrics/docker", dockerMetricsHandler)
mux.HandleFunc("/api/metrics/latency", latencyMetricsHandler)
srv := &http.Server{
Addr: fmt.Sprintf("%s:%s", host, port),
Handler: loggingMiddleware(corsMiddleware(mux)),
ReadHeaderTimeout: 5 * time.Second,
}
log.Printf("server starting on http://%s:%s", host, port)
if err := srv.ListenAndServe(); err != nil && err != http.ErrServerClosed {
log.Fatalf("server error: %v", err)
}
}
func rootHandler(w http.ResponseWriter, r *http.Request) {
respondJSON(w, http.StatusOK, envelope{
"service": "萌芽监控面板 API",
"version": "1.0.0",
"endpoints": []map[string]string{
{
"path": "/",
"description": "API 信息和可用端点列表",
},
{
"path": "/api/health",
"description": "健康检查",
},
{
"path": "/api/metrics/cpu",
"description": "获取 CPU 监控数据",
},
{
"path": "/api/metrics/memory",
"description": "获取内存监控数据",
},
{
"path": "/api/metrics/storage",
"description": "获取存储监控数据",
},
{
"path": "/api/metrics/gpu",
"description": "获取 GPU 监控数据",
},
{
"path": "/api/metrics/network",
"description": "获取网络接口监控数据",
},
{
"path": "/api/metrics/system",
"description": "获取系统统计信息（进程、包、磁盘速度等）",
},
{
"path": "/api/metrics/docker",
"description": "获取 Docker 容器监控数据",
},
},
})
}
func healthHandler(w http.ResponseWriter, r *http.Request) {
respondJSON(w, http.StatusOK, envelope{
"status": "ok",
"timestamp": time.Now().UTC(),
})
}
// CPU监控数据
func cpuMetricsHandler(w http.ResponseWriter, r *http.Request) {
cpuModel := firstMatchInFile("/proc/cpuinfo", "model name")
cpuUsage, err := readCPUUsage()
if err != nil {
cpuUsage = 0
}
cpuTemp := readCPUTemperature()
perCoreUsage := readPerCoreUsage()
loads := readLoadAverages()
cores := runtime.NumCPU()
respondJSON(w, http.StatusOK, envelope{
"data": CPUMetrics{
Model: cpuModel,
Cores: cores,
UsagePercent: round(cpuUsage, 2),
LoadAverages: loads,
Temperature: cpuTemp,
PerCoreUsage: perCoreUsage,
},
})
}
// 内存监控数据
func memoryMetricsHandler(w http.ResponseWriter, r *http.Request) {
mem, err := readMemory()
if err != nil {
respondJSON(w, http.StatusInternalServerError, envelope{
"error": "failed to read memory",
})
return
}
respondJSON(w, http.StatusOK, envelope{
"data": mem,
})
}
// 存储监控数据
func storageMetricsHandler(w http.ResponseWriter, r *http.Request) {
storage, err := readAllStorage()
if err != nil {
respondJSON(w, http.StatusInternalServerError, envelope{
"error": "failed to read storage",
})
return
}
respondJSON(w, http.StatusOK, envelope{
"data": storage,
})
}
// GPU监控数据
func gpuMetricsHandler(w http.ResponseWriter, r *http.Request) {
gpu := readGPU()
respondJSON(w, http.StatusOK, envelope{
"data": gpu,
})
}
// 网络监控数据
func networkMetricsHandler(w http.ResponseWriter, r *http.Request) {
network := readNetworkInterfaces()
respondJSON(w, http.StatusOK, envelope{
"data": network,
})
}
// 系统统计信息
func systemMetricsHandler(w http.ResponseWriter, r *http.Request) {
stats := readSystemStats()
// 读取系统基本信息
hostname, _ := os.Hostname()
osInfo := readOSInfo()
uptime := readUptime()
// 计算总网络速度（汇总所有接口）
networkInterfaces := readNetworkInterfaces()
var totalRxSpeed, totalTxSpeed float64
for _, iface := range networkInterfaces {
totalRxSpeed += iface.RxSpeed // bytes/s
totalTxSpeed += iface.TxSpeed // bytes/s
}
// 转换为 MB/s
stats.NetworkRxSpeed = round(totalRxSpeed/1024/1024, 2)
stats.NetworkTxSpeed = round(totalTxSpeed/1024/1024, 2)
respondJSON(w, http.StatusOK, envelope{
"data": map[string]interface{}{
"hostname": hostname,
"os": osInfo,
"uptimeSeconds": uptime,
"processCount": stats.ProcessCount,
"packageCount": stats.PackageCount,
"packageManager": stats.PackageManager,
"temperature": stats.Temperature,
"diskReadSpeed": stats.DiskReadSpeed,
"diskWriteSpeed": stats.DiskWriteSpeed,
"networkRxSpeed": stats.NetworkRxSpeed,
"networkTxSpeed": stats.NetworkTxSpeed,
"topProcesses": stats.TopProcesses,
"systemLogs": stats.SystemLogs,
},
})
}
// Docker监控数据
func dockerMetricsHandler(w http.ResponseWriter, r *http.Request) {
docker := readDockerStats()
respondJSON(w, http.StatusOK, envelope{
"data": docker,
})
}
// 延迟监控数据
func latencyMetricsHandler(w http.ResponseWriter, r *http.Request) {
// 记录请求开始时间，用于计算客户端到服务器的延迟
startTime := time.Now()
// 读取外部网站延迟
externalLatencies := readExternalLatencies()
// 计算服务器处理时间（这个可以作为参考，实际客户端延迟由前端计算）
serverProcessTime := time.Since(startTime).Milliseconds()
respondJSON(w, http.StatusOK, envelope{
"data": map[string]interface{}{
"serverProcessTime": serverProcessTime, // 服务器处理时间（参考）
"external": externalLatencies,
},
})
}
func respondJSON(w http.ResponseWriter, status int, body envelope) {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(status)
if err := json.NewEncoder(w).Encode(body); err != nil {
log.Printf("write json error: %v", err)
}
}
func getenv(key, fallback string) string {
if v, ok := os.LookupEnv(key); ok && v != "" {
return v
}
return fallback
}
func loggingMiddleware(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
start := time.Now()
next.ServeHTTP(w, r)
log.Printf("%s %s %s", r.Method, r.URL.Path, time.Since(start))
})
}
func corsMiddleware(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
if r.Method == http.MethodOptions {
w.WriteHeader(http.StatusNoContent)
return
}
next.ServeHTTP(w, r)
})
}
package main
import (
"encoding/json"
"fmt"
"log"
"net/http"
"os"
"runtime"
"time"
)
// envelope keeps JSON responses consistent.
type envelope map[string]any
func main() {
host := getenv("HOST", "0.0.0.0")
port := getenv("PORT", "9292")
mux := http.NewServeMux()
mux.HandleFunc("/", rootHandler)
mux.HandleFunc("/api/health", healthHandler)
// 拆分的细粒度API端点
mux.HandleFunc("/api/metrics/cpu", cpuMetricsHandler)
mux.HandleFunc("/api/metrics/memory", memoryMetricsHandler)
mux.HandleFunc("/api/metrics/storage", storageMetricsHandler)
mux.HandleFunc("/api/metrics/gpu", gpuMetricsHandler)
mux.HandleFunc("/api/metrics/network", networkMetricsHandler)
mux.HandleFunc("/api/metrics/system", systemMetricsHandler)
mux.HandleFunc("/api/metrics/docker", dockerMetricsHandler)
mux.HandleFunc("/api/metrics/latency", latencyMetricsHandler)
srv := &http.Server{
Addr: fmt.Sprintf("%s:%s", host, port),
Handler: loggingMiddleware(corsMiddleware(mux)),
ReadHeaderTimeout: 5 * time.Second,
}
log.Printf("server starting on http://%s:%s", host, port)
if err := srv.ListenAndServe(); err != nil && err != http.ErrServerClosed {
log.Fatalf("server error: %v", err)
}
}
func rootHandler(w http.ResponseWriter, r *http.Request) {
respondJSON(w, http.StatusOK, envelope{
"service": "萌芽监控面板 API",
"version": "1.0.0",
"endpoints": []map[string]string{
{
"path": "/",
"description": "API 信息和可用端点列表",
},
{
"path": "/api/health",
"description": "健康检查",
},
{
"path": "/api/metrics/cpu",
"description": "获取 CPU 监控数据",
},
{
"path": "/api/metrics/memory",
"description": "获取内存监控数据",
},
{
"path": "/api/metrics/storage",
"description": "获取存储监控数据",
},
{
"path": "/api/metrics/gpu",
"description": "获取 GPU 监控数据",
},
{
"path": "/api/metrics/network",
"description": "获取网络接口监控数据",
},
{
"path": "/api/metrics/system",
"description": "获取系统统计信息（进程、包、磁盘速度等）",
},
{
"path": "/api/metrics/docker",
"description": "获取 Docker 容器监控数据",
},
},
})
}
func healthHandler(w http.ResponseWriter, r *http.Request) {
respondJSON(w, http.StatusOK, envelope{
"status": "ok",
"timestamp": time.Now().UTC(),
})
}
// CPU监控数据
func cpuMetricsHandler(w http.ResponseWriter, r *http.Request) {
cpuModel := firstMatchInFile("/proc/cpuinfo", "model name")
cpuUsage, err := readCPUUsage()
if err != nil {
cpuUsage = 0
}
cpuTemp := readCPUTemperature()
perCoreUsage := readPerCoreUsage()
loads := readLoadAverages()
cores := runtime.NumCPU()
respondJSON(w, http.StatusOK, envelope{
"data": CPUMetrics{
Model: cpuModel,
Cores: cores,
UsagePercent: round(cpuUsage, 2),
LoadAverages: loads,
Temperature: cpuTemp,
PerCoreUsage: perCoreUsage,
},
})
}
// 内存监控数据
func memoryMetricsHandler(w http.ResponseWriter, r *http.Request) {
mem, err := readMemory()
if err != nil {
respondJSON(w, http.StatusInternalServerError, envelope{
"error": "failed to read memory",
})
return
}
respondJSON(w, http.StatusOK, envelope{
"data": mem,
})
}
// 存储监控数据
func storageMetricsHandler(w http.ResponseWriter, r *http.Request) {
storage, err := readAllStorage()
if err != nil {
respondJSON(w, http.StatusInternalServerError, envelope{
"error": "failed to read storage",
})
return
}
respondJSON(w, http.StatusOK, envelope{
"data": storage,
})
}
// GPU监控数据
func gpuMetricsHandler(w http.ResponseWriter, r *http.Request) {
gpu := readGPU()
respondJSON(w, http.StatusOK, envelope{
"data": gpu,
})
}
// 网络监控数据
func networkMetricsHandler(w http.ResponseWriter, r *http.Request) {
network := readNetworkInterfaces()
respondJSON(w, http.StatusOK, envelope{
"data": network,
})
}
// 系统统计信息
func systemMetricsHandler(w http.ResponseWriter, r *http.Request) {
stats := readSystemStats()
// 读取系统基本信息
hostname, _ := os.Hostname()
osInfo := readOSInfo()
uptime := readUptime()
// 计算总网络速度（汇总所有接口）
networkInterfaces := readNetworkInterfaces()
var totalRxSpeed, totalTxSpeed float64
for _, iface := range networkInterfaces {
totalRxSpeed += iface.RxSpeed // bytes/s
totalTxSpeed += iface.TxSpeed // bytes/s
}
// 转换为 MB/s
stats.NetworkRxSpeed = round(totalRxSpeed/1024/1024, 2)
stats.NetworkTxSpeed = round(totalTxSpeed/1024/1024, 2)
respondJSON(w, http.StatusOK, envelope{
"data": map[string]interface{}{
"hostname": hostname,
"os": osInfo,
"uptimeSeconds": uptime,
"processCount": stats.ProcessCount,
"packageCount": stats.PackageCount,
"packageManager": stats.PackageManager,
"temperature": stats.Temperature,
"diskReadSpeed": stats.DiskReadSpeed,
"diskWriteSpeed": stats.DiskWriteSpeed,
"networkRxSpeed": stats.NetworkRxSpeed,
"networkTxSpeed": stats.NetworkTxSpeed,
"topProcesses": stats.TopProcesses,
"systemLogs": stats.SystemLogs,
},
})
}
// Docker监控数据
func dockerMetricsHandler(w http.ResponseWriter, r *http.Request) {
docker := readDockerStats()
respondJSON(w, http.StatusOK, envelope{
"data": docker,
})
}
// 延迟监控数据
func latencyMetricsHandler(w http.ResponseWriter, r *http.Request) {
// 记录请求开始时间，用于计算客户端到服务器的延迟
startTime := time.Now()
// 读取外部网站延迟
externalLatencies := readExternalLatencies()
// 计算服务器处理时间（这个可以作为参考，实际客户端延迟由前端计算）
serverProcessTime := time.Since(startTime).Milliseconds()
respondJSON(w, http.StatusOK, envelope{
"data": map[string]interface{}{
"serverProcessTime": serverProcessTime, // 服务器处理时间（参考）
"external": externalLatencies,
},
})
}
func respondJSON(w http.ResponseWriter, status int, body envelope) {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(status)
if err := json.NewEncoder(w).Encode(body); err != nil {
log.Printf("write json error: %v", err)
}
}
func getenv(key, fallback string) string {
if v, ok := os.LookupEnv(key); ok && v != "" {
return v
}
return fallback
}
func loggingMiddleware(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
start := time.Now()
next.ServeHTTP(w, r)
log.Printf("%s %s %s", r.Method, r.URL.Path, time.Since(start))
})
}
func corsMiddleware(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
if r.Method == http.MethodOptions {
w.WriteHeader(http.StatusNoContent)
return
}
next.ServeHTTP(w, r)
})
}

128
mengyamonitor-backend/memory.go
View File

@@ -1,64 +1,64 @@
package main
import (
"bufio"
"os"
"strconv"
"strings"
)
// readMemory 读取内存信息
func readMemory() (MemoryMetrics, error) {
totals := map[string]uint64{}
f, err := os.Open("/proc/meminfo")
if err != nil {
return MemoryMetrics{}, err
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
parts := strings.Split(line, ":")
if len(parts) < 2 {
continue
}
key := strings.TrimSpace(parts[0])
fields := strings.Fields(strings.TrimSpace(parts[1]))
if len(fields) == 0 {
continue
}
value, err := strconv.ParseUint(fields[0], 10, 64)
if err != nil {
continue
}
totals[key] = value * 1024 // kB to bytes
}
total := totals["MemTotal"]
// 优先使用 MemAvailable（Linux 3.14+），如果没有则计算
var free uint64
if available, ok := totals["MemAvailable"]; ok && available > 0 {
free = available
} else {
// 回退到 MemFree + Buffers + Cached（适用于较老的系统）
free = totals["MemFree"]
if buffers, ok := totals["Buffers"]; ok {
free += buffers
}
if cached, ok := totals["Cached"]; ok {
free += cached
}
}
used := total - free
usedPercent := 0.0
if total > 0 {
usedPercent = (float64(used) / float64(total)) * 100
}
return MemoryMetrics{
TotalBytes: total,
UsedBytes: used,
FreeBytes: free,
UsedPercent: round(usedPercent, 2),
}, nil
}
package main
import (
"bufio"
"os"
"strconv"
"strings"
)
// readMemory 读取内存信息
func readMemory() (MemoryMetrics, error) {
totals := map[string]uint64{}
f, err := os.Open("/proc/meminfo")
if err != nil {
return MemoryMetrics{}, err
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
parts := strings.Split(line, ":")
if len(parts) < 2 {
continue
}
key := strings.TrimSpace(parts[0])
fields := strings.Fields(strings.TrimSpace(parts[1]))
if len(fields) == 0 {
continue
}
value, err := strconv.ParseUint(fields[0], 10, 64)
if err != nil {
continue
}
totals[key] = value * 1024 // kB to bytes
}
total := totals["MemTotal"]
// 优先使用 MemAvailable（Linux 3.14+），如果没有则计算
var free uint64
if available, ok := totals["MemAvailable"]; ok && available > 0 {
free = available
} else {
// 回退到 MemFree + Buffers + Cached（适用于较老的系统）
free = totals["MemFree"]
if buffers, ok := totals["Buffers"]; ok {
free += buffers
}
if cached, ok := totals["Cached"]; ok {
free += cached
}
}
used := total - free
usedPercent := 0.0
if total > 0 {
usedPercent = (float64(used) / float64(total)) * 100
}
return MemoryMetrics{
TotalBytes: total,
UsedBytes: used,
FreeBytes: free,
UsedPercent: round(usedPercent, 2),
}, nil
}

222
mengyamonitor-backend/network.go
View File

@@ -1,110 +1,112 @@
package main
import (
"os"
"os/exec"
"strconv"
"strings"
"time"
)
// readNetworkInterfaces 读取网络接口信息(包含瞬时流量速度) - 优化版：所有接口并行采样
func readNetworkInterfaces() []NetworkInterface {
interfaces := []NetworkInterface{}
// 读取网络接口列表
entries, err := os.ReadDir("/sys/class/net")
if err != nil {
return interfaces
}
// 收集要监控的接口名称
var validIfaces []string
for _, entry := range entries {
ifName := entry.Name()
if ifName == "lo" { // 跳过回环接口
continue
}
// 跳过 Docker 相关网络接口
if strings.HasPrefix(ifName, "docker") ||
strings.HasPrefix(ifName, "br-") ||
strings.HasPrefix(ifName, "veth") {
continue
}
validIfaces = append(validIfaces, ifName)
}
// 第一次批量读取所有接口的流量
firstReadings := make(map[string][2]uint64) // [rx, tx]
for _, ifName := range validIfaces {
rxPath := "/sys/class/net/" + ifName + "/statistics/rx_bytes"
txPath := "/sys/class/net/" + ifName + "/statistics/tx_bytes"
var rxBytes, txBytes uint64
if rxStr := readFirstLine(rxPath); rxStr != "" {
rxBytes, _ = strconv.ParseUint(strings.TrimSpace(rxStr), 10, 64)
}
if txStr := readFirstLine(txPath); txStr != "" {
txBytes, _ = strconv.ParseUint(strings.TrimSpace(txStr), 10, 64)
}
firstReadings[ifName] = [2]uint64{rxBytes, txBytes}
}
// 等待500ms（所有接口一起等待，而不是每个接口单独等待）
time.Sleep(500 * time.Millisecond)
// 第二次批量读取并构建结果
for _, ifName := range validIfaces {
iface := NetworkInterface{
Name: ifName,
}
// 读取 MAC 地址
macPath := "/sys/class/net/" + ifName + "/address"
iface.MACAddress = strings.TrimSpace(readFirstLine(macPath))
// 读取 IP 地址 (使用 ip addr show)
cmd := exec.Command("ip", "addr", "show", ifName)
if out, err := cmd.Output(); err == nil {
lines := strings.Split(string(out), "\n")
for _, line := range lines {
line = strings.TrimSpace(line)
if strings.HasPrefix(line, "inet ") {
fields := strings.Fields(line)
if len(fields) >= 2 {
iface.IPAddress = strings.Split(fields[1], "/")[0]
break
}
}
}
}
// 读取第二次流量统计
rxPath := "/sys/class/net/" + ifName + "/statistics/rx_bytes"
txPath := "/sys/class/net/" + ifName + "/statistics/tx_bytes"
var rxBytes2, txBytes2 uint64
if rxStr := readFirstLine(rxPath); rxStr != "" {
rxBytes2, _ = strconv.ParseUint(strings.TrimSpace(rxStr), 10, 64)
}
if txStr := readFirstLine(txPath); txStr != "" {
txBytes2, _ = strconv.ParseUint(strings.TrimSpace(txStr), 10, 64)
}
// 设置累计流量
iface.RxBytes = rxBytes2
iface.TxBytes = txBytes2
// 计算瞬时速度 (bytes/s，乘以2因为采样间隔是0.5秒)
if first, ok := firstReadings[ifName]; ok {
iface.RxSpeed = float64(rxBytes2-first[0]) * 2
iface.TxSpeed = float64(txBytes2-first[1]) * 2
}
interfaces = append(interfaces, iface)
}
return interfaces
}
package main
import (
"os"
"os/exec"
"strconv"
"strings"
"time"
)
// readNetworkInterfaces 读取网络接口信息(包含瞬时流量速度) - 优化版：所有接口并行采样
func readNetworkInterfaces() []NetworkInterface {
interfaces := []NetworkInterface{}
// 读取网络接口列表
entries, err := os.ReadDir("/sys/class/net")
if err != nil {
return interfaces
}
// 收集要监控的接口名称
var validIfaces []string
for _, entry := range entries {
ifName := entry.Name()
if ifName == "lo" { // 跳过回环接口
continue
}
// 跳过 Docker 相关网络接口
if strings.HasPrefix(ifName, "docker") ||
strings.HasPrefix(ifName, "br-") ||
strings.HasPrefix(ifName, "wwan") ||
strings.HasPrefix(ifName, "nm-bridge") ||
strings.HasPrefix(ifName, "veth") {
continue
}
validIfaces = append(validIfaces, ifName)
}
// 第一次批量读取所有接口的流量
firstReadings := make(map[string][2]uint64) // [rx, tx]
for _, ifName := range validIfaces {
rxPath := "/sys/class/net/" + ifName + "/statistics/rx_bytes"
txPath := "/sys/class/net/" + ifName + "/statistics/tx_bytes"
var rxBytes, txBytes uint64
if rxStr := readFirstLine(rxPath); rxStr != "" {
rxBytes, _ = strconv.ParseUint(strings.TrimSpace(rxStr), 10, 64)
}
if txStr := readFirstLine(txPath); txStr != "" {
txBytes, _ = strconv.ParseUint(strings.TrimSpace(txStr), 10, 64)
}
firstReadings[ifName] = [2]uint64{rxBytes, txBytes}
}
// 等待500ms（所有接口一起等待，而不是每个接口单独等待）
time.Sleep(500 * time.Millisecond)
// 第二次批量读取并构建结果
for _, ifName := range validIfaces {
iface := NetworkInterface{
Name: ifName,
}
// 读取 MAC 地址
macPath := "/sys/class/net/" + ifName + "/address"
iface.MACAddress = strings.TrimSpace(readFirstLine(macPath))
// 读取 IP 地址 (使用 ip addr show)
cmd := exec.Command("ip", "addr", "show", ifName)
if out, err := cmd.Output(); err == nil {
lines := strings.Split(string(out), "\n")
for _, line := range lines {
line = strings.TrimSpace(line)
if strings.HasPrefix(line, "inet ") {
fields := strings.Fields(line)
if len(fields) >= 2 {
iface.IPAddress = strings.Split(fields[1], "/")[0]
break
}
}
}
}
// 读取第二次流量统计
rxPath := "/sys/class/net/" + ifName + "/statistics/rx_bytes"
txPath := "/sys/class/net/" + ifName + "/statistics/tx_bytes"
var rxBytes2, txBytes2 uint64
if rxStr := readFirstLine(rxPath); rxStr != "" {
rxBytes2, _ = strconv.ParseUint(strings.TrimSpace(rxStr), 10, 64)
}
if txStr := readFirstLine(txPath); txStr != "" {
txBytes2, _ = strconv.ParseUint(strings.TrimSpace(txStr), 10, 64)
}
// 设置累计流量
iface.RxBytes = rxBytes2
iface.TxBytes = txBytes2
// 计算瞬时速度 (bytes/s，乘以2因为采样间隔是0.5秒)
if first, ok := firstReadings[ifName]; ok {
iface.RxSpeed = float64(rxBytes2-first[0]) * 2
iface.TxSpeed = float64(txBytes2-first[1]) * 2
}
interfaces = append(interfaces, iface)
}
return interfaces
}

780
mengyamonitor-backend/system.go
View File

@@ -1,390 +1,390 @@
package main
import (
"bufio"
"context"
"os"
"os/exec"
"strconv"
"strings"
"time"
)
// readSystemStats 读取系统统计信息
func readSystemStats() SystemStats {
stats := SystemStats{}
// 读取进程数量
stats.ProcessCount = countProcesses()
// 读取已安装包数量和包管理器类型
stats.PackageCount, stats.PackageManager = countPackages()
// 读取系统温度
stats.Temperature = readSystemTemperature()
// 读取磁盘读写速度
stats.DiskReadSpeed, stats.DiskWriteSpeed = readDiskSpeed()
// 读取 Top 5 进程
stats.TopProcesses = readTopProcesses()
// 读取系统日志
stats.SystemLogs = readSystemLogs(10)
return stats
}
func countProcesses() int {
entries, err := os.ReadDir("/proc")
if err != nil {
return 0
}
count := 0
for _, entry := range entries {
if entry.IsDir() {
// 进程目录是数字命名的
if _, err := strconv.Atoi(entry.Name()); err == nil {
count++
}
}
}
return count
}
func countPackages() (int, string) {
// 尝试不同的包管理器
// dpkg (Debian/Ubuntu)
if _, err := exec.LookPath("dpkg"); err == nil {
cmd := exec.Command("dpkg", "-l")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(string(out), "\n")
count := 0
for _, line := range lines {
if strings.HasPrefix(line, "ii ") {
count++
}
}
return count, "dpkg (apt)"
}
}
// rpm (RedHat/CentOS/Fedora)
if _, err := exec.LookPath("rpm"); err == nil {
cmd := exec.Command("rpm", "-qa")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
return len(lines), "rpm (yum/dnf)"
}
}
// pacman (Arch Linux)
if _, err := exec.LookPath("pacman"); err == nil {
cmd := exec.Command("pacman", "-Q")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
return len(lines), "pacman"
}
}
return 0, "unknown"
}
func readSystemTemperature() float64 {
var cpuTemp float64 = 0
var fallbackTemp float64 = 0
// 1. 优先读取 thermal_zone (通常是 CPU 温度)
thermalDir := "/sys/class/thermal"
entries, err := os.ReadDir(thermalDir)
if err == nil {
for _, entry := range entries {
if !strings.HasPrefix(entry.Name(), "thermal_zone") {
continue
}
tempPath := thermalDir + "/" + entry.Name() + "/temp"
if temp := readTempFromFile(tempPath); temp > 0 && temp > 20 && temp < 120 {
// thermal_zone0 通常是 CPU
if entry.Name() == "thermal_zone0" {
cpuTemp = temp
break
} else if fallbackTemp == 0 {
fallbackTemp = temp
}
}
}
}
// 2. 扫描所有 hwmon 设备，查找 CPU 温度
hwmonDir := "/sys/class/hwmon"
entries, err = os.ReadDir(hwmonDir)
if err == nil {
for _, entry := range entries {
hwmonPath := hwmonDir + "/" + entry.Name()
// 读取 name 文件，检查是否是 CPU 相关
namePath := hwmonPath + "/name"
name := strings.ToLower(strings.TrimSpace(readFirstLine(namePath)))
// 检查是否是 CPU 温度传感器
isCPU := strings.Contains(name, "cpu") ||
strings.Contains(name, "core") ||
strings.Contains(name, "k10temp") ||
strings.Contains(name, "coretemp") ||
strings.Contains(name, "zenpower")
// 尝试读取 temp1_input (通常是 CPU)
temp1Path := hwmonPath + "/temp1_input"
if temp := readTempFromFile(temp1Path); temp > 0 && temp > 20 && temp < 120 {
if isCPU {
cpuTemp = temp
break
} else if fallbackTemp == 0 {
fallbackTemp = temp
}
}
// 也尝试 temp2_input
temp2Path := hwmonPath + "/temp2_input"
if temp := readTempFromFile(temp2Path); temp > 0 && temp > 20 && temp < 120 {
if isCPU && cpuTemp == 0 {
cpuTemp = temp
} else if fallbackTemp == 0 {
fallbackTemp = temp
}
}
}
}
// 优先返回 CPU 温度，如果没有则返回其他温度
if cpuTemp > 0 {
return cpuTemp
}
return fallbackTemp
}
// readDiskSpeed 读取磁盘瞬时读写速度 (MB/s)
func readDiskSpeed() (float64, float64) {
// 第一次读取
readSectors1, writeSectors1 := getDiskSectors()
if readSectors1 == 0 && writeSectors1 == 0 {
return 0, 0
}
// 等待1秒
time.Sleep(1 * time.Second)
// 第二次读取
readSectors2, writeSectors2 := getDiskSectors()
// 计算差值（扇区数）
readDiff := readSectors2 - readSectors1
writeDiff := writeSectors2 - writeSectors1
// 扇区大小通常是 512 字节，转换为 MB/s
readSpeed := float64(readDiff) * 512 / 1024 / 1024
writeSpeed := float64(writeDiff) * 512 / 1024 / 1024
return round(readSpeed, 2), round(writeSpeed, 2)
}
func getDiskSectors() (uint64, uint64) {
f, err := os.Open("/proc/diskstats")
if err != nil {
return 0, 0
}
defer f.Close()
scanner := bufio.NewScanner(f)
var maxRead uint64 = 0
var mainDevice string
// 第一次遍历：找到读写量最大的主磁盘（通常是系统盘）
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 14 {
continue
}
deviceName := fields[2]
// 跳过分区（分区名通常包含数字，如 sda1, vda1, nvme0n1p1）
if strings.ContainsAny(deviceName, "0123456789") &&
!strings.HasPrefix(deviceName, "nvme") &&
!strings.HasPrefix(deviceName, "loop") {
continue
}
// 跳过虚拟设备
if strings.HasPrefix(deviceName, "loop") ||
strings.HasPrefix(deviceName, "ram") ||
strings.HasPrefix(deviceName, "zram") {
continue
}
readSectors, _ := strconv.ParseUint(fields[5], 10, 64)
// 选择读写量最大的作为主磁盘
if readSectors > maxRead {
maxRead = readSectors
mainDevice = deviceName
}
}
// 第二次遍历：读取主磁盘的数据
f.Close()
f, err = os.Open("/proc/diskstats")
if err != nil {
return 0, 0
}
scanner = bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 14 {
continue
}
if fields[2] == mainDevice {
readSectors, _ := strconv.ParseUint(fields[5], 10, 64)
writeSectors, _ := strconv.ParseUint(fields[9], 10, 64)
return readSectors, writeSectors
}
}
// 如果没找到，尝试常见的设备名（向后兼容）
f.Close()
f, err = os.Open("/proc/diskstats")
if err != nil {
return 0, 0
}
scanner = bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 14 {
continue
}
deviceName := fields[2]
if deviceName == "sda" || deviceName == "vda" || deviceName == "nvme0n1" {
readSectors, _ := strconv.ParseUint(fields[5], 10, 64)
writeSectors, _ := strconv.ParseUint(fields[9], 10, 64)
return readSectors, writeSectors
}
}
return 0, 0
}
// readTopProcesses 读取 Top 5 进程 (按 CPU 使用率)
func readTopProcesses() []ProcessInfo {
processes := []ProcessInfo{}
// 读取系统总内存
memInfo, _ := readMemory()
totalMemGB := float64(memInfo.TotalBytes) / 1024 / 1024 / 1024
// 使用 ps 命令获取进程信息，添加超时控制
ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
defer cancel()
cmd := exec.CommandContext(ctx, "ps", "aux", "--sort=-%cpu", "--no-headers")
out, err := cmd.Output()
if err != nil {
return processes
}
lines := strings.Split(string(out), "\n")
count := 0
for _, line := range lines {
if count >= 5 { // 只取前5个
break
}
line = strings.TrimSpace(line)
if line == "" {
continue
}
fields := strings.Fields(line)
if len(fields) < 11 {
continue
}
pid, _ := strconv.Atoi(fields[1])
cpu, _ := strconv.ParseFloat(fields[2], 64)
mem, _ := strconv.ParseFloat(fields[3], 64)
// 计算内存MB数
memoryMB := (mem / 100) * totalMemGB * 1024
// 命令可能包含空格，从第11个字段开始拼接
command := strings.Join(fields[10:], " ")
if len(command) > 50 {
command = command[:50] + "..."
}
processes = append(processes, ProcessInfo{
PID: pid,
Name: fields[10],
CPU: round(cpu, 1),
Memory: round(mem, 1),
MemoryMB: round(memoryMB, 1),
Command: command,
})
count++
}
return processes
}
// readSystemLogs 读取系统最新日志
func readSystemLogs(count int) []string {
logs := []string{}
// 尝试使用 journalctl 读取系统日志
if _, err := exec.LookPath("journalctl"); err == nil {
cmd := exec.Command("journalctl", "-n", strconv.Itoa(count), "--no-pager", "-o", "short")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
for _, line := range lines {
if line != "" {
logs = append(logs, line)
}
}
return logs
}
}
// 如果 journalctl 不可用，尝试读取 /var/log/syslog 或 /var/log/messages
logFiles := []string{"/var/log/syslog", "/var/log/messages"}
for _, logFile := range logFiles {
f, err := os.Open(logFile)
if err != nil {
continue
}
defer f.Close()
// 读取最后几行
var lines []string
scanner := bufio.NewScanner(f)
for scanner.Scan() {
lines = append(lines, scanner.Text())
}
// 取最后count行
start := len(lines) - count
if start < 0 {
start = 0
}
logs = lines[start:]
break
}
return logs
}
package main
import (
"bufio"
"context"
"os"
"os/exec"
"strconv"
"strings"
"time"
)
// readSystemStats 读取系统统计信息
func readSystemStats() SystemStats {
stats := SystemStats{}
// 读取进程数量
stats.ProcessCount = countProcesses()
// 读取已安装包数量和包管理器类型
stats.PackageCount, stats.PackageManager = countPackages()
// 读取系统温度
stats.Temperature = readSystemTemperature()
// 读取磁盘读写速度
stats.DiskReadSpeed, stats.DiskWriteSpeed = readDiskSpeed()
// 读取 Top 5 进程
stats.TopProcesses = readTopProcesses()
// 读取系统日志
stats.SystemLogs = readSystemLogs(10)
return stats
}
func countProcesses() int {
entries, err := os.ReadDir("/proc")
if err != nil {
return 0
}
count := 0
for _, entry := range entries {
if entry.IsDir() {
// 进程目录是数字命名的
if _, err := strconv.Atoi(entry.Name()); err == nil {
count++
}
}
}
return count
}
func countPackages() (int, string) {
// 尝试不同的包管理器
// dpkg (Debian/Ubuntu)
if _, err := exec.LookPath("dpkg"); err == nil {
cmd := exec.Command("dpkg", "-l")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(string(out), "\n")
count := 0
for _, line := range lines {
if strings.HasPrefix(line, "ii ") {
count++
}
}
return count, "dpkg (apt)"
}
}
// rpm (RedHat/CentOS/Fedora)
if _, err := exec.LookPath("rpm"); err == nil {
cmd := exec.Command("rpm", "-qa")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
return len(lines), "rpm (yum/dnf)"
}
}
// pacman (Arch Linux)
if _, err := exec.LookPath("pacman"); err == nil {
cmd := exec.Command("pacman", "-Q")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
return len(lines), "pacman"
}
}
return 0, "unknown"
}
func readSystemTemperature() float64 {
var cpuTemp float64 = 0
var fallbackTemp float64 = 0
// 1. 优先读取 thermal_zone (通常是 CPU 温度)
thermalDir := "/sys/class/thermal"
entries, err := os.ReadDir(thermalDir)
if err == nil {
for _, entry := range entries {
if !strings.HasPrefix(entry.Name(), "thermal_zone") {
continue
}
tempPath := thermalDir + "/" + entry.Name() + "/temp"
if temp := readTempFromFile(tempPath); temp > 0 && temp > 20 && temp < 120 {
// thermal_zone0 通常是 CPU
if entry.Name() == "thermal_zone0" {
cpuTemp = temp
break
} else if fallbackTemp == 0 {
fallbackTemp = temp
}
}
}
}
// 2. 扫描所有 hwmon 设备，查找 CPU 温度
hwmonDir := "/sys/class/hwmon"
entries, err = os.ReadDir(hwmonDir)
if err == nil {
for _, entry := range entries {
hwmonPath := hwmonDir + "/" + entry.Name()
// 读取 name 文件，检查是否是 CPU 相关
namePath := hwmonPath + "/name"
name := strings.ToLower(strings.TrimSpace(readFirstLine(namePath)))
// 检查是否是 CPU 温度传感器
isCPU := strings.Contains(name, "cpu") ||
strings.Contains(name, "core") ||
strings.Contains(name, "k10temp") ||
strings.Contains(name, "coretemp") ||
strings.Contains(name, "zenpower")
// 尝试读取 temp1_input (通常是 CPU)
temp1Path := hwmonPath + "/temp1_input"
if temp := readTempFromFile(temp1Path); temp > 0 && temp > 20 && temp < 120 {
if isCPU {
cpuTemp = temp
break
} else if fallbackTemp == 0 {
fallbackTemp = temp
}
}
// 也尝试 temp2_input
temp2Path := hwmonPath + "/temp2_input"
if temp := readTempFromFile(temp2Path); temp > 0 && temp > 20 && temp < 120 {
if isCPU && cpuTemp == 0 {
cpuTemp = temp
} else if fallbackTemp == 0 {
fallbackTemp = temp
}
}
}
}
// 优先返回 CPU 温度，如果没有则返回其他温度
if cpuTemp > 0 {
return cpuTemp
}
return fallbackTemp
}
// readDiskSpeed 读取磁盘瞬时读写速度 (MB/s)
func readDiskSpeed() (float64, float64) {
// 第一次读取
readSectors1, writeSectors1 := getDiskSectors()
if readSectors1 == 0 && writeSectors1 == 0 {
return 0, 0
}
// 等待1秒
time.Sleep(1 * time.Second)
// 第二次读取
readSectors2, writeSectors2 := getDiskSectors()
// 计算差值（扇区数）
readDiff := readSectors2 - readSectors1
writeDiff := writeSectors2 - writeSectors1
// 扇区大小通常是 512 字节，转换为 MB/s
readSpeed := float64(readDiff) * 512 / 1024 / 1024
writeSpeed := float64(writeDiff) * 512 / 1024 / 1024
return round(readSpeed, 2), round(writeSpeed, 2)
}
func getDiskSectors() (uint64, uint64) {
f, err := os.Open("/proc/diskstats")
if err != nil {
return 0, 0
}
defer f.Close()
scanner := bufio.NewScanner(f)
var maxRead uint64 = 0
var mainDevice string
// 第一次遍历：找到读写量最大的主磁盘（通常是系统盘）
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 14 {
continue
}
deviceName := fields[2]
// 跳过分区（分区名通常包含数字，如 sda1, vda1, nvme0n1p1）
if strings.ContainsAny(deviceName, "0123456789") &&
!strings.HasPrefix(deviceName, "nvme") &&
!strings.HasPrefix(deviceName, "loop") {
continue
}
// 跳过虚拟设备
if strings.HasPrefix(deviceName, "loop") ||
strings.HasPrefix(deviceName, "ram") ||
strings.HasPrefix(deviceName, "zram") {
continue
}
readSectors, _ := strconv.ParseUint(fields[5], 10, 64)
// 选择读写量最大的作为主磁盘
if readSectors > maxRead {
maxRead = readSectors
mainDevice = deviceName
}
}
// 第二次遍历：读取主磁盘的数据
f.Close()
f, err = os.Open("/proc/diskstats")
if err != nil {
return 0, 0
}
scanner = bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 14 {
continue
}
if fields[2] == mainDevice {
readSectors, _ := strconv.ParseUint(fields[5], 10, 64)
writeSectors, _ := strconv.ParseUint(fields[9], 10, 64)
return readSectors, writeSectors
}
}
// 如果没找到，尝试常见的设备名（向后兼容）
f.Close()
f, err = os.Open("/proc/diskstats")
if err != nil {
return 0, 0
}
scanner = bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 14 {
continue
}
deviceName := fields[2]
if deviceName == "sda" || deviceName == "vda" || deviceName == "nvme0n1" {
readSectors, _ := strconv.ParseUint(fields[5], 10, 64)
writeSectors, _ := strconv.ParseUint(fields[9], 10, 64)
return readSectors, writeSectors
}
}
return 0, 0
}
// readTopProcesses 读取 Top 5 进程 (按 CPU 使用率)
func readTopProcesses() []ProcessInfo {
processes := []ProcessInfo{}
// 读取系统总内存
memInfo, _ := readMemory()
totalMemGB := float64(memInfo.TotalBytes) / 1024 / 1024 / 1024
// 使用 ps 命令获取进程信息，添加超时控制
ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
defer cancel()
cmd := exec.CommandContext(ctx, "ps", "aux", "--sort=-%cpu", "--no-headers")
out, err := cmd.Output()
if err != nil {
return processes
}
lines := strings.Split(string(out), "\n")
count := 0
for _, line := range lines {
if count >= 5 { // 只取前5个
break
}
line = strings.TrimSpace(line)
if line == "" {
continue
}
fields := strings.Fields(line)
if len(fields) < 11 {
continue
}
pid, _ := strconv.Atoi(fields[1])
cpu, _ := strconv.ParseFloat(fields[2], 64)
mem, _ := strconv.ParseFloat(fields[3], 64)
// 计算内存MB数
memoryMB := (mem / 100) * totalMemGB * 1024
// 命令可能包含空格，从第11个字段开始拼接
command := strings.Join(fields[10:], " ")
if len(command) > 50 {
command = command[:50] + "..."
}
processes = append(processes, ProcessInfo{
PID: pid,
Name: fields[10],
CPU: round(cpu, 1),
Memory: round(mem, 1),
MemoryMB: round(memoryMB, 1),
Command: command,
})
count++
}
return processes
}
// readSystemLogs 读取系统最新日志
func readSystemLogs(count int) []string {
logs := []string{}
// 尝试使用 journalctl 读取系统日志
if _, err := exec.LookPath("journalctl"); err == nil {
cmd := exec.Command("journalctl", "-n", strconv.Itoa(count), "--no-pager", "-o", "short")
out, err := cmd.Output()
if err == nil {
lines := strings.Split(strings.TrimSpace(string(out)), "\n")
for _, line := range lines {
if line != "" {
logs = append(logs, line)
}
}
return logs
}
}
// 如果 journalctl 不可用，尝试读取 /var/log/syslog 或 /var/log/messages
logFiles := []string{"/var/log/syslog", "/var/log/messages"}
for _, logFile := range logFiles {
f, err := os.Open(logFile)
if err != nil {
continue
}
defer f.Close()
// 读取最后几行
var lines []string
scanner := bufio.NewScanner(f)
for scanner.Scan() {
lines = append(lines, scanner.Text())
}
// 取最后count行
start := len(lines) - count
if start < 0 {
start = 0
}
logs = lines[start:]
break
}
return logs
}

226
mengyamonitor-backend/systeminfo_linux.go
View File

@@ -1,113 +1,113 @@
//go:build linux
// +build linux
package main
import (
"bufio"
"os"
"strings"
"syscall"
)
func readStorage() ([]StorageMetrics, error) {
// For simplicity, report root mount. Can be extended to iterate mounts.
var stat syscall.Statfs_t
if err := syscall.Statfs("/", &stat); err != nil {
return nil, err
}
total := stat.Blocks * uint64(stat.Bsize)
free := stat.Bfree * uint64(stat.Bsize)
used := total - free
usedPercent := 0.0
if total > 0 {
usedPercent = (float64(used) / float64(total)) * 100
}
return []StorageMetrics{{
Mount: "/",
TotalBytes: total,
UsedBytes: used,
FreeBytes: free,
UsedPercent: round(usedPercent, 2),
}}, nil
}
// readAllStorage 读取所有挂载的存储设备
func readAllStorage() ([]StorageMetrics, error) {
storages := []StorageMetrics{}
// 读取 /proc/mounts 获取所有挂载点
f, err := os.Open("/proc/mounts")
if err != nil {
return readStorage() // 降级到只读根目录
}
defer f.Close()
scanner := bufio.NewScanner(f)
seen := make(map[string]bool)
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 3 {
continue
}
device := fields[0]
mountPoint := fields[1]
fsType := fields[2]
// 跳过虚拟文件系统
if strings.HasPrefix(device, "/dev/") == false {
continue
}
// 跳过特殊文件系统类型
skipTypes := map[string]bool{
"tmpfs": true, "devtmpfs": true, "squashfs": true,
"overlay": true, "aufs": true, "proc": true,
"sysfs": true, "devpts": true, "cgroup": true,
}
if skipTypes[fsType] {
continue
}
// 避免重复挂载点
if seen[mountPoint] {
continue
}
seen[mountPoint] = true
// 获取该挂载点的统计信息
var stat syscall.Statfs_t
if err := syscall.Statfs(mountPoint, &stat); err != nil {
continue
}
total := stat.Blocks * uint64(stat.Bsize)
free := stat.Bfree * uint64(stat.Bsize)
used := total - free
usedPercent := 0.0
if total > 0 {
usedPercent = (float64(used) / float64(total)) * 100
}
// 只添加有容量的存储
if total > 0 {
storages = append(storages, StorageMetrics{
Mount: mountPoint,
TotalBytes: total,
UsedBytes: used,
FreeBytes: free,
UsedPercent: round(usedPercent, 2),
})
}
}
// 如果没有找到任何存储,至少返回根目录
if len(storages) == 0 {
return readStorage()
}
return storages, nil
}
//go:build linux
// +build linux
package main
import (
"bufio"
"os"
"strings"
"syscall"
)
func readStorage() ([]StorageMetrics, error) {
// For simplicity, report root mount. Can be extended to iterate mounts.
var stat syscall.Statfs_t
if err := syscall.Statfs("/", &stat); err != nil {
return nil, err
}
total := stat.Blocks * uint64(stat.Bsize)
free := stat.Bfree * uint64(stat.Bsize)
used := total - free
usedPercent := 0.0
if total > 0 {
usedPercent = (float64(used) / float64(total)) * 100
}
return []StorageMetrics{{
Mount: "/",
TotalBytes: total,
UsedBytes: used,
FreeBytes: free,
UsedPercent: round(usedPercent, 2),
}}, nil
}
// readAllStorage 读取所有挂载的存储设备
func readAllStorage() ([]StorageMetrics, error) {
storages := []StorageMetrics{}
// 读取 /proc/mounts 获取所有挂载点
f, err := os.Open("/proc/mounts")
if err != nil {
return readStorage() // 降级到只读根目录
}
defer f.Close()
scanner := bufio.NewScanner(f)
seen := make(map[string]bool)
for scanner.Scan() {
line := scanner.Text()
fields := strings.Fields(line)
if len(fields) < 3 {
continue
}
device := fields[0]
mountPoint := fields[1]
fsType := fields[2]
// 跳过虚拟文件系统
if strings.HasPrefix(device, "/dev/") == false {
continue
}
// 跳过特殊文件系统类型
skipTypes := map[string]bool{
"tmpfs": true, "devtmpfs": true, "squashfs": true,
"overlay": true, "aufs": true, "proc": true,
"sysfs": true, "devpts": true, "cgroup": true,
}
if skipTypes[fsType] {
continue
}
// 避免重复挂载点
if seen[mountPoint] {
continue
}
seen[mountPoint] = true
// 获取该挂载点的统计信息
var stat syscall.Statfs_t
if err := syscall.Statfs(mountPoint, &stat); err != nil {
continue
}
total := stat.Blocks * uint64(stat.Bsize)
free := stat.Bfree * uint64(stat.Bsize)
used := total - free
usedPercent := 0.0
if total > 0 {
usedPercent = (float64(used) / float64(total)) * 100
}
// 只添加有容量的存储
if total > 0 {
storages = append(storages, StorageMetrics{
Mount: mountPoint,
TotalBytes: total,
UsedBytes: used,
FreeBytes: free,
UsedPercent: round(usedPercent, 2),
})
}
}
// 如果没有找到任何存储,至少返回根目录
if len(storages) == 0 {
return readStorage()
}
return storages, nil
}

28
mengyamonitor-backend/systeminfo_other.go
View File

@@ -1,14 +1,14 @@
//go:build !linux
// +build !linux
package main
import "errors"
func readStorage() ([]StorageMetrics, error) {
return nil, errors.New("storage monitoring is only supported on Linux")
}
func readAllStorage() ([]StorageMetrics, error) {
return nil, errors.New("storage monitoring is only supported on Linux")
}
//go:build !linux
// +build !linux
package main
import "errors"
func readStorage() ([]StorageMetrics, error) {
return nil, errors.New("storage monitoring is only supported on Linux")
}
func readAllStorage() ([]StorageMetrics, error) {
return nil, errors.New("storage monitoring is only supported on Linux")
}

132
mengyamonitor-backend/utils.go
View File

@@ -1,66 +1,66 @@
package main
import (
"bufio"
"math"
"os"
"strconv"
"strings"
)
// round 将浮点数四舍五入到指定小数位
func round(v float64, places int) float64 {
factor := math.Pow(10, float64(places))
return math.Round(v*factor) / factor
}
// readFirstLine 读取文件的第一行
func readFirstLine(path string) string {
f, err := os.Open(path)
if err != nil {
return ""
}
defer f.Close()
scanner := bufio.NewScanner(f)
if scanner.Scan() {
return scanner.Text()
}
return ""
}
// firstMatchInFile 在文件中查找第一个匹配指定前缀的行，并返回冒号后的内容
func firstMatchInFile(path, prefix string) string {
f, err := os.Open(path)
if err != nil {
return ""
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
if strings.HasPrefix(strings.TrimSpace(line), prefix) {
parts := strings.SplitN(line, ":", 2)
if len(parts) == 2 {
return strings.TrimSpace(parts[1])
}
}
}
return ""
}
// readTempFromFile 从文件读取温度值
func readTempFromFile(path string) float64 {
content := readFirstLine(path)
if content == "" {
return 0
}
val, err := strconv.ParseFloat(strings.TrimSpace(content), 64)
if err != nil {
return 0
}
// 温度通常以毫度为单位
if val > 1000 {
return round(val/1000, 1)
}
return round(val, 1)
}
package main
import (
"bufio"
"math"
"os"
"strconv"
"strings"
)
// round 将浮点数四舍五入到指定小数位
func round(v float64, places int) float64 {
factor := math.Pow(10, float64(places))
return math.Round(v*factor) / factor
}
// readFirstLine 读取文件的第一行
func readFirstLine(path string) string {
f, err := os.Open(path)
if err != nil {
return ""
}
defer f.Close()
scanner := bufio.NewScanner(f)
if scanner.Scan() {
return scanner.Text()
}
return ""
}
// firstMatchInFile 在文件中查找第一个匹配指定前缀的行，并返回冒号后的内容
func firstMatchInFile(path, prefix string) string {
f, err := os.Open(path)
if err != nil {
return ""
}
defer f.Close()
scanner := bufio.NewScanner(f)
for scanner.Scan() {
line := scanner.Text()
if strings.HasPrefix(strings.TrimSpace(line), prefix) {
parts := strings.SplitN(line, ":", 2)
if len(parts) == 2 {
return strings.TrimSpace(parts[1])
}
}
}
return ""
}
// readTempFromFile 从文件读取温度值
func readTempFromFile(path string) float64 {
content := readFirstLine(path)
if content == "" {
return 0
}
val, err := strconv.ParseFloat(strings.TrimSpace(content), 64)
if err != nil {
return 0
}
// 温度通常以毫度为单位
if val > 1000 {
return round(val/1000, 1)
}
return round(val, 1)
}

220
mengyamonitor-frontend/README.md
View File

@@ -1,110 +1,110 @@
# 萌芽监控面板 - 前端
## 概述
服务器监控面板前端应用，使用 React + TypeScript + Vite 构建。
## 功能特性
- 🖥️ 多服务器监控支持
- 📊 实时数据展示（CPU、内存、存储、GPU）
- 🔄 自动刷新（2秒轮询）
- 📱 响应式设计
- 🎨 白色柔和风格界面
- 💾 本地存储配置
## 开发
### 安装依赖
```bash
npm install
```
### 启动开发服务器
```bash
npm run dev
```
访问 http://localhost:2929
### 构建生产版本
```bash
npm run build
```
生产文件将输出到 `dist` 目录
### 预览生产版本
```bash
npm run preview
```
## 使用说明
### 添加服务器
1. 点击右上角"添加服务器"按钮
2. 输入服务器名称（如：生产服务器1）
3. 输入服务器地址（如：http://192.168.1.100:9292）
4. 点击"添加"按钮
### 查看详情
点击服务器卡片上的"查看详情"按钮，可以查看完整的系统信息：
- 系统信息（主机名、操作系统、内核、架构、运行时间）
- CPU 详细信息（型号、核心数、使用率、负载）
- 内存详细信息（总容量、已使用、可用、使用率）
- 存储详细信息（挂载点、容量、使用情况）
- GPU 信息（名称、显存、利用率）
### 移除服务器
点击服务器卡片右上角的"×"按钮，确认后即可移除。
## 项目结构
```
src/
├── api/ # API 调用
│ └── monitor.ts # 监控 API
├── components/ # React 组件
│ ├── ServerCard/ # 服务器卡片组件
│ └── ServerDetail/ # 服务器详情弹窗
├── hooks/ # 自定义 Hooks
│ └── useServerMonitor.ts # 服务器监控 Hook
├── types/ # TypeScript 类型定义
│ └── index.ts
├── utils/ # 工具函数
│ ├── format.ts # 格式化函数
│ └── storage.ts # 本地存储
├── App.tsx # 主应用组件
├── App.css # 主应用样式
├── main.tsx # 应用入口
└── index.css # 全局样式
```
## 配置说明
### 修改端口
编辑 `vite.config.ts` 文件中的 `server.port` 配置：
```typescript
server: {
port: 2929, // 修改为你想要的端口
}
```
### 修改轮询间隔
编辑 `src/App.tsx` 文件中的 `useServerMonitor` 第二个参数：
```typescript
const statuses = useServerMonitor(servers, 2000); // 2000ms = 2秒
```
## 部署
### 静态文件部署
1. 构建项目：`npm run build`
2. 将 `dist` 目录部署到 Web 服务器（如 Nginx、Apache）
3. 或使用静态托管服务（如 Vercel、Netlify）
### 桌面应用
可以使用 Electron 或 Tauri 将前端打包成桌面应用：
- Electron: https://www.electronjs.org/
- Tauri: https://tauri.app/
## 注意事项
- 确保后端服务器已启动并可访问
- 后端服务器需要配置 CORS 允许跨域访问
- 服务器地址需要包含协议（http:// 或 https://）
- 本地存储的服务器配置保存在浏览器 localStorage 中
# 萌芽监控面板 - 前端
## 概述
服务器监控面板前端应用，使用 React + TypeScript + Vite 构建。
## 功能特性
- 🖥️ 多服务器监控支持
- 📊 实时数据展示（CPU、内存、存储、GPU）
- 🔄 自动刷新（2秒轮询）
- 📱 响应式设计
- 🎨 白色柔和风格界面
- 💾 本地存储配置
## 开发
### 安装依赖
```bash
npm install
```
### 启动开发服务器
```bash
npm run dev
```
访问 http://localhost:2929
### 构建生产版本
```bash
npm run build
```
生产文件将输出到 `dist` 目录
### 预览生产版本
```bash
npm run preview
```
## 使用说明
### 添加服务器
1. 点击右上角"添加服务器"按钮
2. 输入服务器名称（如：生产服务器1）
3. 输入服务器地址（如：http://192.168.1.100:9292）
4. 点击"添加"按钮
### 查看详情
点击服务器卡片上的"查看详情"按钮，可以查看完整的系统信息：
- 系统信息（主机名、操作系统、内核、架构、运行时间）
- CPU 详细信息（型号、核心数、使用率、负载）
- 内存详细信息（总容量、已使用、可用、使用率）
- 存储详细信息（挂载点、容量、使用情况）
- GPU 信息（名称、显存、利用率）
### 移除服务器
点击服务器卡片右上角的"×"按钮，确认后即可移除。
## 项目结构
```
src/
├── api/ # API 调用
│ └── monitor.ts # 监控 API
├── components/ # React 组件
│ ├── ServerCard/ # 服务器卡片组件
│ └── ServerDetail/ # 服务器详情弹窗
├── hooks/ # 自定义 Hooks
│ └── useServerMonitor.ts # 服务器监控 Hook
├── types/ # TypeScript 类型定义
│ └── index.ts
├── utils/ # 工具函数
│ ├── format.ts # 格式化函数
│ └── storage.ts # 本地存储
├── App.tsx # 主应用组件
├── App.css # 主应用样式
├── main.tsx # 应用入口
└── index.css # 全局样式
```
## 配置说明
### 修改端口
编辑 `vite.config.ts` 文件中的 `server.port` 配置：
```typescript
server: {
port: 2929, // 修改为你想要的端口
}
```
### 修改轮询间隔
编辑 `src/App.tsx` 文件中的 `useServerMonitor` 第二个参数：
```typescript
const statuses = useServerMonitor(servers, 2000); // 2000ms = 2秒
```
## 部署
### 静态文件部署
1. 构建项目：`npm run build`
2. 将 `dist` 目录部署到 Web 服务器（如 Nginx、Apache）
3. 或使用静态托管服务（如 Vercel、Netlify）
### 桌面应用
可以使用 Electron 或 Tauri 将前端打包成桌面应用：
- Electron: https://www.electronjs.org/
- Tauri: https://tauri.app/
## 注意事项
- 确保后端服务器已启动并可访问
- 后端服务器需要配置 CORS 允许跨域访问
- 服务器地址需要包含协议（http:// 或 https://）
- 本地存储的服务器配置保存在浏览器 localStorage 中

10
mengyamonitor-frontend/index.html
View File

@@ -1,9 +1,15 @@
<!doctype html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="apple-touch-icon" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1a1a2e" />
<meta name="description" content="服务器监控面板 - 萌芽监控" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="萌芽监控" />
<title>萌芽监控面板</title>
</head>
<body>

4457
mengyamonitor-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
mengyamonitor-frontend/package.json
View File

@@ -10,6 +10,9 @@
"preview": "vite preview"
},
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
@@ -25,6 +28,7 @@
"globals": "^16.5.0",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
"vite": "^7.2.4"
"vite": "^7.2.4",
"vite-plugin-pwa": "^1.2.0"
}
}

16
mengyamonitor-frontend/public/logo.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a1a2e"/>
<stop offset="100%" style="stop-color:#16213e"/>
</linearGradient>
<linearGradient id="leaf" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4ecca3"/>
<stop offset="100%" style="stop-color:#2d8f7a"/>
</linearGradient>
</defs>
<rect width="512" height="512" rx="96" fill="url(#bg)"/>
<path fill="url(#leaf)" d="M256 96c-20 80-80 160-80 240 0 53 35.8 96 80 96s80-43 80-96c0-80-60-160-80-240z"/>
<path fill="url(#leaf)" opacity=".9" d="M256 96c20 80 60 160 60 240 0 53-35.8 96-80 96s-80-43-80-96c0-80 40-160 60-240z"/>
<ellipse cx="256" cy="336" rx="48" ry="24" fill="url(#leaf)" opacity=".7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 867 B

89
mengyamonitor-frontend/src/App.css
View File

@@ -16,25 +16,87 @@
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.app-header h1 {
margin: 0;
font-size: 0.75rem;
color: var(--text-light);
font-size: 1.5rem;
color: var(--text-main);
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 400;
gap: 0.75rem;
font-weight: 600;
transform: translateY(-3px);
}
.app-logo {
width: 16px;
height: 16px;
border-radius: 4px;
width: 36px;
height: 36px;
border-radius: 6px;
display: inline-block;
}
.btn-icon {
background: var(--surface-color);
color: var(--text-main);
border: 1px solid var(--border-color);
padding: 0.5rem;
width: 32px;
height: 32px;
border-radius: var(--radius-md);
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn-icon:hover {
background: var(--bg-color);
border-color: var(--primary-color);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-show-header {
position: fixed;
top: 5px;
right: 5px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--border-color);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
z-index: 1000;
opacity: 0.5;
transition: all 0.2s;
padding: 0;
}
.btn-show-header:hover {
opacity: 1;
background: var(--surface-color);
box-shadow: var(--shadow-sm);
transform: scale(1.1);
color: var(--primary-color);
}
.btn-add {
background: var(--primary-color);
color: white;
@@ -163,16 +225,7 @@
justify-content: center;
}
.server-grid {
grid-template-columns: 1fr;
}
.add-form {
flex-direction: column;
padding: 1.5rem;
}
.add-form input {
min-width: 100%;
.header-actions {
justify-content: center;
}
}

187
mengyamonitor-frontend/src/App.tsx
View File

@@ -1,34 +1,80 @@
import { useState, useEffect } from 'react';
import type { ServerConfig } from './types';
import { loadServers, saveServers, removeServer } from './utils/storage';
import { loadServers, saveServers, removeServer, exportServersToClipboard, importServersFromClipboard } from './utils/storage';
import { useServerMonitor } from './hooks/useServerMonitor';
import { ServerCard } from './components/ServerCard/ServerCard';
import { ServerDetail } from './components/ServerDetail/ServerDetail';
import {
DndContext,
closestCenter,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
} from '@dnd-kit/core';
import type { DragEndEvent } from '@dnd-kit/core';
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
rectSortingStrategy,
} from '@dnd-kit/sortable';
import './App.css';
const formatServerUrl = (url: string) => {
let formatted = url.trim();
// Fix common typo .op -> .top based on user requirement
if (formatted.endsWith('.op')) {
formatted = formatted.slice(0, -3) + '.top';
}
if (formatted && !/^https?:\/\//i.test(formatted)) {
return `http://${formatted}`;
}
return formatted;
};
function App() {
const [servers, setServers] = useState<ServerConfig[]>([]);
const [showAddForm, setShowAddForm] = useState(false);
const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
const [newServerForm, setNewServerForm] = useState({ name: '', url: '' });
const [showHeader, setShowHeader] = useState(true);
const statuses = useServerMonitor(servers, 2000);
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
);
useEffect(() => {
const loaded = loadServers();
setServers(loaded);
}, []);
const handleUrlBlur = () => {
const formatted = formatServerUrl(newServerForm.url);
if (formatted !== newServerForm.url) {
setNewServerForm(prev => ({ ...prev, url: formatted }));
}
};
const handleAddServer = () => {
if (!newServerForm.name || !newServerForm.url) {
alert('请填写服务器名称和地址');
return;
}
const formattedUrl = formatServerUrl(newServerForm.url);
const newServer: ServerConfig = {
id: Date.now().toString(),
name: newServerForm.name,
url: newServerForm.url,
url: formattedUrl,
enabled: true,
};
@@ -51,20 +97,94 @@ function App() {
setSelectedServerId(serverId);
};
const handleExportServers = async () => {
try {
await exportServersToClipboard();
alert('服务器配置已复制到剪贴板！');
} catch (error) {
alert(error instanceof Error ? error.message : '导出失败');
}
};
const handleImportServers = async () => {
if (!confirm('导入服务器配置将添加到现有服务器列表中，是否继续？')) {
return;
}
try {
const importedServers = await importServersFromClipboard();
const updated = [...servers, ...importedServers];
setServers(updated);
saveServers(updated);
alert(`成功导入 ${importedServers.length} 个服务器配置！`);
} catch (error) {
alert(error instanceof Error ? error.message : '导入失败');
}
};
const handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event;
if (over && active.id !== over.id) {
setServers((items) => {
const oldIndex = items.findIndex((item) => item.id === active.id);
const newIndex = items.findIndex((item) => item.id === over.id);
const newOrder = arrayMove(items, oldIndex, newIndex);
saveServers(newOrder);
return newOrder;
});
}
};
const selectedStatus = selectedServerId ? statuses[selectedServerId] : null;
const selectedServer = servers.find(s => s.id === selectedServerId);
return (
<div className="app">
<header className="app-header">
<h1>
<img className="app-logo" src="/logo.png" alt="萌芽监控面板" />
萌芽监控面板
</h1>
<button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
{showAddForm ? '×' : '+'}
{!showHeader && (
<button
className="btn-show-header"
onClick={() => setShowHeader(true)}
title="显示导航栏"
>
👁️
</button>
)}
{showHeader && (
<header className="app-header">
<h1>
<img className="app-logo" src="/logo.svg" alt="萌芽监控面板" />
萌芽监控面板
</h1>
<div className="header-actions">
<button
className="btn-icon"
onClick={() => setShowHeader(false)}
title="隐藏导航栏"
>
👁️
</button>
<button
className="btn-icon"
onClick={handleExportServers}
title="导出服务器配置到剪贴板"
>
📤
</button>
<button
className="btn-icon"
onClick={handleImportServers}
title="从剪贴板导入服务器配置"
>
📥
</button>
<button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
{showAddForm ? '×' : '+'}
</button>
</div>
</header>
)}
{showAddForm && (
<div className="add-form">
@@ -79,6 +199,7 @@ function App() {
placeholder="服务器地址 (例如: http://192.168.1.100:9292)"
value={newServerForm.url}
onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })}
onBlur={handleUrlBlur}
/>
<button className="btn-submit" onClick={handleAddServer}>
添加
@@ -93,26 +214,34 @@ function App() {
<p className="hint">点击右上角的"添加服务器"按钮开始使用</p>
</div>
) : (
servers.map((server) => {
const status = statuses[server.id];
// Calculate storage usage (max of all mounts)
const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
return (
<ServerCard
key={server.id}
server={server}
online={status?.online || false}
metrics={status?.metrics}
cpuUsage={status?.metrics?.cpu.usagePercent || 0}
memoryUsage={status?.metrics?.memory.usedPercent || 0}
storageUsage={storageUsage} // Pass max storage usage
uptime={status?.metrics?.uptimeSeconds}
onDetail={handleShowDetail}
onRemove={handleRemoveServer}
/>
);
})
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext items={servers.map((s) => s.id)} strategy={rectSortingStrategy}>
{servers.map((server) => {
const status = statuses[server.id];
// Calculate storage usage (max of all mounts)
const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
return (
<ServerCard
key={server.id}
server={server}
online={status?.online || false}
metrics={status?.metrics}
cpuUsage={status?.metrics?.cpu.usagePercent || 0}
memoryUsage={status?.metrics?.memory.usedPercent || 0}
storageUsage={storageUsage} // Pass max storage usage
uptime={status?.metrics?.uptimeSeconds}
onDetail={handleShowDetail}
onRemove={handleRemoveServer}
/>
);
})}
</SortableContext>
</DndContext>
)}
</main>

202
mengyamonitor-frontend/src/api/monitor.ts
View File

@@ -1,101 +1,101 @@
import type { ServerMetrics } from '../types';
export const fetchServerMetrics = async (serverUrl: string): Promise<ServerMetrics> => {
// 测量客户端到服务器的延迟（使用健康检查端点）
const clientToServerLatency = await measureLatency(`${serverUrl}/api/health`);
// 并行请求各个端点
const endpoints = [
'/api/metrics/cpu',
'/api/metrics/memory',
'/api/metrics/storage',
'/api/metrics/gpu',
'/api/metrics/network',
'/api/metrics/system',
'/api/metrics/docker',
'/api/metrics/latency',
];
const results = await Promise.all(
endpoints.map(endpoint =>
fetch(`${serverUrl}${endpoint}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(res => {
if (!res.ok) throw new Error(`Failed to fetch ${endpoint}`);
return res.json();
})
.catch(err => {
console.error(`Error fetching ${endpoint}:`, err);
return null;
})
)
);
// 合并所有结果
const [cpuRes, memRes, storageRes, gpuRes, networkRes, systemRes, dockerRes, latencyRes] = results;
const system = systemRes?.data || {};
const docker = dockerRes?.data || {};
const latency = latencyRes?.data || {};
// 将 docker 数据合并到 system.dockerStats
return {
hostname: system.hostname || 'Unknown',
timestamp: new Date().toISOString(),
cpu: cpuRes?.data || {},
memory: memRes?.data || {},
storage: storageRes?.data || [],
gpu: gpuRes?.data || [],
network: networkRes?.data || [],
system: {
...system,
dockerStats: docker
},
os: system.os || { kernel: '', distro: '', architecture: '' },
uptimeSeconds: system.uptimeSeconds || 0,
latency: {
clientToServer: clientToServerLatency,
external: latency.external || {},
},
};
};
// 测量延迟
async function measureLatency(url: string): Promise<number> {
try {
const startTime = performance.now();
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const endTime = performance.now();
if (response.ok) {
return Math.round(endTime - startTime);
}
return -1; // 表示失败
} catch {
return -1; // 表示超时或失败
}
}
export const checkServerHealth = async (serverUrl: string): Promise<boolean> => {
try {
const url = `${serverUrl}/api/health`;
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
return response.ok;
} catch {
return false;
}
};
import type { ServerMetrics } from '../types';
export const fetchServerMetrics = async (serverUrl: string): Promise<ServerMetrics> => {
// 测量客户端到服务器的延迟（使用健康检查端点）
const clientToServerLatency = await measureLatency(`${serverUrl}/api/health`);
// 并行请求各个端点
const endpoints = [
'/api/metrics/cpu',
'/api/metrics/memory',
'/api/metrics/storage',
'/api/metrics/gpu',
'/api/metrics/network',
'/api/metrics/system',
'/api/metrics/docker',
'/api/metrics/latency',
];
const results = await Promise.all(
endpoints.map(endpoint =>
fetch(`${serverUrl}${endpoint}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(res => {
if (!res.ok) throw new Error(`Failed to fetch ${endpoint}`);
return res.json();
})
.catch(err => {
console.error(`Error fetching ${endpoint}:`, err);
return null;
})
)
);
// 合并所有结果
const [cpuRes, memRes, storageRes, gpuRes, networkRes, systemRes, dockerRes, latencyRes] = results;
const system = systemRes?.data || {};
const docker = dockerRes?.data || {};
const latency = latencyRes?.data || {};
// 将 docker 数据合并到 system.dockerStats
return {
hostname: system.hostname || 'Unknown',
timestamp: new Date().toISOString(),
cpu: cpuRes?.data || {},
memory: memRes?.data || {},
storage: storageRes?.data || [],
gpu: gpuRes?.data || [],
network: networkRes?.data || [],
system: {
...system,
dockerStats: docker
},
os: system.os || { kernel: '', distro: '', architecture: '' },
uptimeSeconds: system.uptimeSeconds || 0,
latency: {
clientToServer: clientToServerLatency,
external: latency.external || {},
},
};
};
// 测量延迟
async function measureLatency(url: string): Promise<number> {
try {
const startTime = performance.now();
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const endTime = performance.now();
if (response.ok) {
return Math.round(endTime - startTime);
}
return -1; // 表示失败
} catch {
return -1; // 表示超时或失败
}
}
export const checkServerHealth = async (serverUrl: string): Promise<boolean> => {
try {
const url = `${serverUrl}/api/health`;
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
return response.ok;
} catch {
return false;
}
};

1
mengyamonitor-frontend/src/assets/react.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

2
mengyamonitor-frontend/src/components/Common/CircularProgress.tsx
View File

@@ -52,7 +52,7 @@ export const CircularProgress = ({
className="progress-value"
textAnchor="middle"
dy="0.3em"
fontSize={valueFontSize}
fontSize={subLabelFontSize}
>
{subLabel}
</text>

768
mengyamonitor-frontend/src/components/ServerCard/ServerCard.css
View File

@@ -1,381 +1,387 @@
.server-card {
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
height: 100%;
}
.server-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: var(--primary-color);
}
.server-card.online {
border-top: 4px solid var(--success-color);
}
.server-card.offline {
border-top: 4px solid var(--text-light);
opacity: 0.9;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.server-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
position: relative;
}
.status-online {
background: var(--success-color);
box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.2);
}
.status-online::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
animation: pulse 2s infinite;
border: 1px solid var(--success-color);
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.5; }
70% { transform: scale(1.5); opacity: 0; }
100% { transform: scale(1); opacity: 0; }
}
.status-offline {
background: var(--text-light);
}
.server-name-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.server-name {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--text-main);
}
.server-hostname {
font-size: 0.75rem;
color: var(--text-light);
font-weight: 400;
}
.btn-remove {
background: transparent;
border: none;
font-size: 1.5rem;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.btn-remove:hover {
background: var(--danger-color);
color: white;
}
/* Main Metrics */
.card-main-metrics {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.metrics-grid-main {
display: flex;
justify-content: space-around;
align-items: center;
padding: 0.5rem 0;
}
.circular-progress-small {
display: flex;
align-items: center;
justify-content: center;
}
.circular-progress-small .progress-ring-bg {
fill: none;
stroke: #e2e8f0;
stroke-width: 6;
}
.circular-progress-small .progress-ring-circle {
fill: none;
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s ease;
transform: rotate(-90deg);
transform-origin: center;
}
.circular-progress-small .progress-value-small {
font-size: 14px;
font-weight: 600;
fill: var(--text-main);
}
.circular-progress-small .progress-label-small {
font-size: 10px;
fill: var(--text-secondary);
}
/* Info Grid */
.card-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 0.75rem;
background: var(--bg-color);
border-radius: var(--radius-md);
}
.info-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
writing-mode: horizontal-tb;
text-orientation: mixed;
}
.info-label {
color: var(--text-light);
font-weight: 500;
writing-mode: horizontal-tb;
text-orientation: mixed;
white-space: nowrap;
}
.info-value {
color: var(--text-main);
font-weight: 600;
font-family: monospace;
font-size: 0.7rem;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
/* Performance Grid */
.card-performance-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 0.75rem;
background: var(--bg-color);
border-radius: var(--radius-md);
}
.performance-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.performance-header {
margin-bottom: 0.25rem;
}
.performance-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
}
.performance-row {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.performance-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.7rem;
}
.performance-item-label {
color: var(--text-light);
font-weight: 500;
}
.performance-item-value {
color: var(--primary-color);
font-weight: 600;
font-family: monospace;
text-align: right;
}
/* Footer Info */
.card-footer-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--bg-color);
border-radius: var(--radius-md);
margin-top: 0.5rem;
}
.footer-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
}
.footer-label {
color: var(--text-light);
font-weight: 500;
}
.footer-value {
color: var(--text-main);
font-weight: 600;
font-family: monospace;
}
/* Metrics List */
.metrics-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.metric-item {
width: 100%;
}
.metric-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
.metric-label {
color: var(--text-secondary);
font-weight: 500;
}
.metric-value {
font-weight: 600;
color: var(--text-main);
}
.progress-bar-bg {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.5s ease;
}
.uptime-info {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
}
.uptime-label {
color: var(--text-light);
}
.uptime-value {
color: var(--text-secondary);
font-family: monospace;
}
.offline-state {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-color);
border-radius: var(--radius-md);
margin-bottom: 1.5rem;
color: var(--text-light);
}
.card-footer {
margin-top: auto;
}
.btn-detail {
width: 100%;
background: var(--surface-hover);
border: 1px solid var(--border-color);
padding: 0.75rem;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
}
.btn-detail:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.server-card {
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
height: 100%;
}
.server-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: var(--primary-color);
}
.server-card.online {
border-top: 4px solid var(--success-color);
}
.server-card.offline {
border-top: 4px solid var(--text-light);
opacity: 0.9;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
cursor: grab;
user-select: none;
}
.card-header:active {
cursor: grabbing;
}
.server-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
position: relative;
}
.status-online {
background: var(--success-color);
box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.2);
}
.status-online::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
animation: pulse 2s infinite;
border: 1px solid var(--success-color);
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.5; }
70% { transform: scale(1.5); opacity: 0; }
100% { transform: scale(1); opacity: 0; }
}
.status-offline {
background: var(--text-light);
}
.server-name-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.server-name {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--text-main);
}
.server-hostname {
font-size: 0.75rem;
color: var(--text-light);
font-weight: 400;
}
.btn-remove {
background: transparent;
border: none;
font-size: 1.5rem;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.btn-remove:hover {
background: var(--danger-color);
color: white;
}
/* Main Metrics */
.card-main-metrics {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.metrics-grid-main {
display: flex;
justify-content: space-around;
align-items: center;
padding: 0.5rem 0;
}
.circular-progress-small {
display: flex;
align-items: center;
justify-content: center;
}
.circular-progress-small .progress-ring-bg {
fill: none;
stroke: #e2e8f0;
stroke-width: 6;
}
.circular-progress-small .progress-ring-circle {
fill: none;
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s ease;
transform: rotate(-90deg);
transform-origin: center;
}
.circular-progress-small .progress-value-small {
font-size: 14px;
font-weight: 600;
fill: var(--text-main);
}
.circular-progress-small .progress-label-small {
font-size: 10px;
fill: var(--text-secondary);
}
/* Info Grid */
.card-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 0.75rem;
background: var(--bg-color);
border-radius: var(--radius-md);
}
.info-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
writing-mode: horizontal-tb;
text-orientation: mixed;
}
.info-label {
color: var(--text-light);
font-weight: 500;
writing-mode: horizontal-tb;
text-orientation: mixed;
white-space: nowrap;
}
.info-value {
color: var(--text-main);
font-weight: 600;
font-family: monospace;
font-size: 0.7rem;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
/* Performance Grid */
.card-performance-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 0.75rem;
background: var(--bg-color);
border-radius: var(--radius-md);
}
.performance-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.performance-header {
margin-bottom: 0.25rem;
}
.performance-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
}
.performance-row {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.performance-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.7rem;
}
.performance-item-label {
color: var(--text-light);
font-weight: 500;
}
.performance-item-value {
color: var(--primary-color);
font-weight: 600;
font-family: monospace;
text-align: right;
}
/* Footer Info */
.card-footer-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--bg-color);
border-radius: var(--radius-md);
margin-top: 0.5rem;
}
.footer-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
}
.footer-label {
color: var(--text-light);
font-weight: 500;
}
.footer-value {
color: var(--text-main);
font-weight: 600;
font-family: monospace;
}
/* Metrics List */
.metrics-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.metric-item {
width: 100%;
}
.metric-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
.metric-label {
color: var(--text-secondary);
font-weight: 500;
}
.metric-value {
font-weight: 600;
color: var(--text-main);
}
.progress-bar-bg {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.5s ease;
}
.uptime-info {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
}
.uptime-label {
color: var(--text-light);
}
.uptime-value {
color: var(--text-secondary);
font-family: monospace;
}
.offline-state {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-color);
border-radius: var(--radius-md);
margin-bottom: 1.5rem;
color: var(--text-light);
}
.card-footer {
margin-top: auto;
}
.btn-detail {
width: 100%;
background: var(--surface-hover);
border: 1px solid var(--border-color);
padding: 0.75rem;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
}
.btn-detail:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}

35
mengyamonitor-frontend/src/components/ServerCard/ServerCard.tsx
View File

@@ -1,5 +1,7 @@
import type { ServerConfig, ServerMetrics } from '../../types';
import { formatUptime, formatBytes } from '../../utils/format';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import './ServerCard.css';
const CircularProgress = ({ value, label, color, size = 60 }: { value: number; label: string; color: string; size?: number }) => {
@@ -95,6 +97,21 @@ export const ServerCard = ({
onDetail,
onRemove,
}: ServerCardProps) => {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: server.id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
};
// 从 URL 提取 IP 地址
const extractIP = (url: string): string => {
try {
@@ -142,8 +159,12 @@ export const ServerCard = ({
const latencyColor = getLatencyColor(latency);
return (
<div className={`server-card ${online ? 'online' : 'offline'}`}>
<div className="card-header">
<div
ref={setNodeRef}
style={style}
className={`server-card ${online ? 'online' : 'offline'}`}
>
<div className="card-header" {...attributes} {...listeners}>
<div className="server-info">
<div className={`status-indicator ${online ? 'status-online' : 'status-offline'}`} />
<div className="server-name-group">
@@ -153,7 +174,15 @@ export const ServerCard = ({
)}
</div>
</div>
<button className="btn-remove" onClick={() => onRemove(server.id)} title="移除服务器">
<button
className="btn-remove"
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
onRemove(server.id);
}}
title="移除服务器"
>
×
</button>
</div>

1042
mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.tsx
View File

File diff suppressed because it is too large Load Diff

116
mengyamonitor-frontend/src/hooks/useServerMonitor.ts
View File

@@ -1,58 +1,58 @@
import { useState, useEffect, useCallback } from 'react';
import type { ServerConfig, ServerStatus } from '../types';
import { fetchServerMetrics } from '../api/monitor';
export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => {
const [statuses, setStatuses] = useState<Record<string, ServerStatus>>({});
const fetchMetrics = useCallback(async (server: ServerConfig) => {
if (!server.enabled) {
return;
}
try {
const metrics = await fetchServerMetrics(server.url);
setStatuses(prev => ({
...prev,
[server.id]: {
serverId: server.id,
online: true,
metrics,
lastUpdate: Date.now(),
},
}));
} catch (error) {
setStatuses(prev => ({
...prev,
[server.id]: {
serverId: server.id,
online: false,
error: error instanceof Error ? error.message : 'Unknown error',
lastUpdate: Date.now(),
},
}));
}
}, []);
useEffect(() => {
// Initial fetch
servers.forEach(server => {
if (server.enabled) {
fetchMetrics(server);
}
});
// Set up polling
const timer = setInterval(() => {
servers.forEach(server => {
if (server.enabled) {
fetchMetrics(server);
}
});
}, interval);
return () => clearInterval(timer);
}, [servers, interval, fetchMetrics]);
return statuses;
};
import { useState, useEffect, useCallback } from 'react';
import type { ServerConfig, ServerStatus } from '../types';
import { fetchServerMetrics } from '../api/monitor';
export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => {
const [statuses, setStatuses] = useState<Record<string, ServerStatus>>({});
const fetchMetrics = useCallback(async (server: ServerConfig) => {
if (!server.enabled) {
return;
}
try {
const metrics = await fetchServerMetrics(server.url);
setStatuses(prev => ({
...prev,
[server.id]: {
serverId: server.id,
online: true,
metrics,
lastUpdate: Date.now(),
},
}));
} catch (error) {
setStatuses(prev => ({
...prev,
[server.id]: {
serverId: server.id,
online: false,
error: error instanceof Error ? error.message : 'Unknown error',
lastUpdate: Date.now(),
},
}));
}
}, []);
useEffect(() => {
// Initial fetch
servers.forEach(server => {
if (server.enabled) {
fetchMetrics(server);
}
});
// Set up polling
const timer = setInterval(() => {
servers.forEach(server => {
if (server.enabled) {
fetchMetrics(server);
}
});
}, interval);
return () => clearInterval(timer);
}, [servers, interval, fetchMetrics]);
return statuses;
};

250
mengyamonitor-frontend/src/types/index.ts
View File

@@ -1,125 +1,125 @@
export interface ServerConfig {
id: string;
name: string;
url: string;
enabled: boolean;
}
export interface CPUMetrics {
model: string;
cores: number;
usagePercent: number;
loadAverages?: number[];
temperature?: number;
perCoreUsage?: CoreUsage[];
}
export interface CoreUsage {
core: number;
percent: number;
}
export interface MemoryMetrics {
totalBytes: number;
usedBytes: number;
freeBytes: number;
usedPercent: number;
}
export interface StorageMetrics {
mount: string;
totalBytes: number;
usedBytes: number;
freeBytes: number;
usedPercent: number;
}
export interface GPUMetrics {
name: string;
memoryTotalMB: number;
memoryUsedMB: number;
utilizationPercent: number;
temperature?: number;
status: string;
}
export interface NetworkInterface {
name: string;
ipAddress: string;
macAddress: string;
rxBytes: number;
txBytes: number;
rxSpeed: number;
txSpeed: number;
}
export interface SystemStats {
processCount: number;
packageCount: number;
packageManager: string;
temperature?: number;
diskReadSpeed: number;
diskWriteSpeed: number;
networkRxSpeed?: number;
networkTxSpeed?: number;
topProcesses: ProcessInfo[];
dockerStats: DockerStats;
systemLogs?: string[];
}
export interface ProcessInfo {
pid: number;
name: string;
cpu: number;
memory: number;
memoryMB: number;
command: string;
}
export interface DockerStats {
available: boolean;
version?: string;
running: number;
stopped: number;
imageCount: number;
runningNames?: string[];
stoppedNames?: string[];
imageNames?: string[];
}
export interface OSInfo {
kernel: string;
distro: string;
architecture: string;
}
export interface LatencyInfo {
clientToServer: number;
external: {
'baidu.com'?: string;
'google.com'?: string;
'github.com'?: string;
};
}
export interface ServerMetrics {
hostname: string;
timestamp: string;
cpu: CPUMetrics;
memory: MemoryMetrics;
storage: StorageMetrics[];
gpu: GPUMetrics[];
network: NetworkInterface[];
system: SystemStats;
os: OSInfo;
uptimeSeconds: number;
latency?: LatencyInfo;
}
export interface ServerStatus {
serverId: string;
online: boolean;
metrics?: ServerMetrics;
error?: string;
lastUpdate: number;
}
export interface ServerConfig {
id: string;
name: string;
url: string;
enabled: boolean;
}
export interface CPUMetrics {
model: string;
cores: number;
usagePercent: number;
loadAverages?: number[];
temperature?: number;
perCoreUsage?: CoreUsage[];
}
export interface CoreUsage {
core: number;
percent: number;
}
export interface MemoryMetrics {
totalBytes: number;
usedBytes: number;
freeBytes: number;
usedPercent: number;
}
export interface StorageMetrics {
mount: string;
totalBytes: number;
usedBytes: number;
freeBytes: number;
usedPercent: number;
}
export interface GPUMetrics {
name: string;
memoryTotalMB: number;
memoryUsedMB: number;
utilizationPercent: number;
temperature?: number;
status: string;
}
export interface NetworkInterface {
name: string;
ipAddress: string;
macAddress: string;
rxBytes: number;
txBytes: number;
rxSpeed: number;
txSpeed: number;
}
export interface SystemStats {
processCount: number;
packageCount: number;
packageManager: string;
temperature?: number;
diskReadSpeed: number;
diskWriteSpeed: number;
networkRxSpeed?: number;
networkTxSpeed?: number;
topProcesses: ProcessInfo[];
dockerStats: DockerStats;
systemLogs?: string[];
}
export interface ProcessInfo {
pid: number;
name: string;
cpu: number;
memory: number;
memoryMB: number;
command: string;
}
export interface DockerStats {
available: boolean;
version?: string;
running: number;
stopped: number;
imageCount: number;
runningNames?: string[];
stoppedNames?: string[];
imageNames?: string[];
}
export interface OSInfo {
kernel: string;
distro: string;
architecture: string;
}
export interface LatencyInfo {
clientToServer: number;
external: {
'baidu.com'?: string;
'google.com'?: string;
'github.com'?: string;
};
}
export interface ServerMetrics {
hostname: string;
timestamp: string;
cpu: CPUMetrics;
memory: MemoryMetrics;
storage: StorageMetrics[];
gpu: GPUMetrics[];
network: NetworkInterface[];
system: SystemStats;
os: OSInfo;
uptimeSeconds: number;
latency?: LatencyInfo;
}
export interface ServerStatus {
serverId: string;
online: boolean;
metrics?: ServerMetrics;
error?: string;
lastUpdate: number;
}

90
mengyamonitor-frontend/src/utils/format.ts
View File

@@ -1,45 +1,45 @@
export const formatBytes = (bytes: number): string => {
if (bytes === 0 || bytes === null || bytes === undefined || isNaN(bytes) || !isFinite(bytes)) {
return '0 B';
}
// 处理负数
if (bytes < 0) {
bytes = 0;
}
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
// 处理小于 1 的情况
if (bytes < 1) {
return bytes.toFixed(2) + ' ' + sizes[0];
}
const i = Math.floor(Math.log(bytes) / Math.log(k));
// 确保索引在有效范围内
const sizeIndex = Math.max(0, Math.min(i, sizes.length - 1));
const value = Math.round((bytes / Math.pow(k, sizeIndex)) * 100) / 100;
// 确保 sizes[sizeIndex] 存在
const unit = sizes[sizeIndex] || sizes[0];
return value + ' ' + unit;
};
export const formatUptime = (seconds: number): string => {
const days = Math.floor(seconds / 86400);
const hours = Math.floor((seconds % 86400) / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const parts: string[] = [];
if (days > 0) parts.push(`${days}天`);
if (hours > 0) parts.push(`${hours}小时`);
if (minutes > 0) parts.push(`${minutes}分钟`);
return parts.length > 0 ? parts.join(' ') : '刚刚启动';
};
export const formatPercent = (value: number): string => {
return `${Math.round(value * 10) / 10}%`;
};
export const formatBytes = (bytes: number): string => {
if (bytes === 0 || bytes === null || bytes === undefined || isNaN(bytes) || !isFinite(bytes)) {
return '0 B';
}
// 处理负数
if (bytes < 0) {
bytes = 0;
}
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
// 处理小于 1 的情况
if (bytes < 1) {
return bytes.toFixed(2) + ' ' + sizes[0];
}
const i = Math.floor(Math.log(bytes) / Math.log(k));
// 确保索引在有效范围内
const sizeIndex = Math.max(0, Math.min(i, sizes.length - 1));
const value = Math.round((bytes / Math.pow(k, sizeIndex)) * 100) / 100;
// 确保 sizes[sizeIndex] 存在
const unit = sizes[sizeIndex] || sizes[0];
return value + ' ' + unit;
};
export const formatUptime = (seconds: number): string => {
const days = Math.floor(seconds / 86400);
const hours = Math.floor((seconds % 86400) / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const parts: string[] = [];
if (days > 0) parts.push(`${days}天`);
if (hours > 0) parts.push(`${hours}小时`);
if (minutes > 0) parts.push(`${minutes}分钟`);
return parts.length > 0 ? parts.join(' ') : '刚刚启动';
};
export const formatPercent = (value: number): string => {
return `${Math.round(value * 10) / 10}%`;
};

168
mengyamonitor-frontend/src/utils/storage.ts
View File

@@ -1,53 +1,115 @@
import type { ServerConfig } from '../types';
const STORAGE_KEY = 'mengya_monitor_servers';
export const loadServers = (): ServerConfig[] => {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
const parsed = JSON.parse(stored);
// Ensure it's an array
if (Array.isArray(parsed)) {
return parsed;
}
}
} catch (error) {
console.error('Failed to load servers:', error);
}
return [];
};
export const saveServers = (servers: ServerConfig[]): void => {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
} catch (error) {
console.error('Failed to save servers:', error);
}
};
export const addServer = (server: Omit<ServerConfig, 'id'>): ServerConfig => {
const servers = loadServers();
const newServer: ServerConfig = {
...server,
id: Date.now().toString(),
};
servers.push(newServer);
saveServers(servers);
return newServer;
};
export const updateServer = (id: string, updates: Partial<ServerConfig>): void => {
const servers = loadServers();
const index = servers.findIndex(s => s.id === id);
if (index !== -1) {
servers[index] = { ...servers[index], ...updates };
saveServers(servers);
}
};
export const removeServer = (id: string): void => {
const servers = loadServers();
const filtered = servers.filter(s => s.id !== id);
saveServers(filtered);
};
import type { ServerConfig } from '../types';
const STORAGE_KEY = 'mengya_monitor_servers';
export const loadServers = (): ServerConfig[] => {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
const parsed = JSON.parse(stored);
// Ensure it's an array
if (Array.isArray(parsed)) {
return parsed;
}
}
} catch (error) {
console.error('Failed to load servers:', error);
}
return [];
};
export const saveServers = (servers: ServerConfig[]): void => {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
} catch (error) {
console.error('Failed to save servers:', error);
}
};
export const addServer = (server: Omit<ServerConfig, 'id'>): ServerConfig => {
const servers = loadServers();
const newServer: ServerConfig = {
...server,
id: Date.now().toString(),
};
servers.push(newServer);
saveServers(servers);
return newServer;
};
export const updateServer = (id: string, updates: Partial<ServerConfig>): void => {
const servers = loadServers();
const index = servers.findIndex(s => s.id === id);
if (index !== -1) {
servers[index] = { ...servers[index], ...updates };
saveServers(servers);
}
};
export const removeServer = (id: string): void => {
const servers = loadServers();
const filtered = servers.filter(s => s.id !== id);
saveServers(filtered);
};
/**
* 导出服务器配置到剪贴板
* @returns Promise<string> 返回导出的 JSON 字符串
*/
export const exportServersToClipboard = async (): Promise<string> => {
const servers = loadServers();
const json = JSON.stringify(servers, null, 2);
try {
await navigator.clipboard.writeText(json);
return json;
} catch (error) {
console.error('Failed to copy to clipboard:', error);
throw new Error('无法复制到剪贴板，请检查浏览器权限');
}
};
/**
* 从剪贴板导入服务器配置
* @returns Promise<ServerConfig[]> 返回导入的服务器配置数组
*/
export const importServersFromClipboard = async (): Promise<ServerConfig[]> => {
try {
const text = await navigator.clipboard.readText();
const parsed = JSON.parse(text);
if (!Array.isArray(parsed)) {
throw new Error('无效的配置格式：必须是服务器配置数组');
}
// 验证每个配置项的基本结构
const validServers: ServerConfig[] = [];
for (const item of parsed) {
if (item && typeof item === 'object' &&
typeof item.name === 'string' &&
typeof item.url === 'string') {
// 为新导入的服务器生成新的 ID，避免 ID 冲突
validServers.push({
id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
name: item.name,
url: item.url,
enabled: item.enabled !== undefined ? item.enabled : true,
});
}
}
if (validServers.length === 0) {
throw new Error('未找到有效的服务器配置');
}
return validServers;
} catch (error) {
if (error instanceof SyntaxError) {
throw new Error('无效的 JSON 格式');
}
if (error instanceof Error) {
throw error;
}
throw new Error('读取剪贴板失败，请检查浏览器权限');
}
};

42
mengyamonitor-frontend/vite.config.ts
View File

@@ -1,9 +1,49 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['logo.svg'],
manifest: {
name: '萌芽监控面板',
short_name: '萌芽监控',
description: '服务器监控面板 - 萌芽监控',
theme_color: '#1a1a2e',
background_color: '#16213e',
display: 'standalone',
orientation: 'portrait-primary',
scope: '/',
start_url: '/',
icons: [
{ src: '/logo.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any maskable' }
],
categories: ['utilities', 'productivity']
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,svg,woff2}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/.*\/api\//i,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: { maxEntries: 32, maxAgeSeconds: 60 * 5 },
networkTimeoutSeconds: 10,
cacheableResponse: { statuses: [0, 200] }
}
}
]
},
devOptions: {
enabled: true
}
})
],
server: {
port: 2929,
host: true,

6
start-backend.bat Normal file
View File

@@ -0,0 +1,6 @@
@echo off
chcp 65001 >nul
echo 启动后端服务器...
cd mengyadriftbottle-backend
go mod tidy
go run main.go

7
start-frontend.bat Normal file
View File

@@ -0,0 +1,7 @@
@echo off
chcp 65001 >nul
echo 启动前端开发服务器...
cd mengyamonitor-frontend
echo 正在安装依赖...
call npm install
npm run dev

0
萌芽监控面板 Normal file
View File

14
需求.txt
View File

@@ -1,8 +1,8 @@
1.实现一个服务器监控面板，目前初步支持Linux服务器，监控服务器基本信息，比如：cpu/GPU,内存,储存,操作系统等
2.采用企业级前后端分离架构,前端使用React框架，后端使用golang原版自带的net库
3.原理十分简单，后端go获取Linux相关硬件信息，并封装成相关后端json API路由，前端每隔1秒或者2秒获取后端信息
4.对外访问使用默认端口：2929 后端默认端口为9292
5.由于是监控面板 前端可以一次性对接多个服务器后端卡片式展示相关信息，前端面板可以展示一些基本信息，用户可以点击详情按钮查看更多详细信息
6.前端项目已经初始化 前后端代码架构必须分类整齐符合标准方便我阅读修改
7.注意前端相当于一个只是客户端用于请求可以配置后端服务器，这两个是分开的，前端可以打包部署在用户电脑上比如做成软件app，而后端构建打包后放到各个服务器上
1.实现一个服务器监控面板，目前初步支持Linux服务器，监控服务器基本信息，比如：cpu/GPU,内存,储存,操作系统等
2.采用企业级前后端分离架构,前端使用React框架，后端使用golang原版自带的net库
3.原理十分简单，后端go获取Linux相关硬件信息，并封装成相关后端json API路由，前端每隔1秒或者2秒获取后端信息
4.对外访问使用默认端口：2929 后端默认端口为9292
5.由于是监控面板 前端可以一次性对接多个服务器后端卡片式展示相关信息，前端面板可以展示一些基本信息，用户可以点击详情按钮查看更多详细信息
6.前端项目已经初始化 前后端代码架构必须分类整齐符合标准方便我阅读修改
7.注意前端相当于一个只是客户端用于请求可以配置后端服务器，这两个是分开的，前端可以打包部署在用户电脑上比如做成软件app，而后端构建打包后放到各个服务器上
8.前端页面风格偏白色柔和风