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

312
README.md
View File

@@ -1,156 +1,156 @@
# 萌芽监控面板 # 萌芽监控面板
一个简洁高效的 Linux 服务器监控面板，采用前后端分离架构。 一个简洁高效的 Linux 服务器监控面板，采用前后端分离架构。
## 项目概述 ## 项目概述
### 功能 ### 功能
- 实时监控 Linux 服务器的 CPU、内存、存储、GPU 使用情况 - 实时监控 Linux 服务器的 CPU、内存、存储、GPU 使用情况
- 支持同时监控多个服务器 - 支持同时监控多个服务器
- 卡片式展示，直观清晰 - 卡片式展示，直观清晰
- 详情弹窗查看完整信息 - 详情弹窗查看完整信息
### 技术栈 ### 技术栈
- **前端**: React 19 + TypeScript + Vite - **前端**: React 19 + TypeScript + Vite
- **后端**: Go (原生 net/http 库) - **后端**: Go (原生 net/http 库)
- **风格**: 白色柔和风格界面 - **风格**: 白色柔和风格界面
## 快速开始 ## 快速开始
### 后端部署 ### 后端部署
1. 进入后端目录 1. 进入后端目录
```bash ```bash
cd mengyamonitor-backend cd mengyamonitor-backend
``` ```
2. 编译（在 Linux 服务器上） 2. 编译（在 Linux 服务器上）
```bash ```bash
go build -o mengyamonitor-backend go build -o mengyamonitor-backend
``` ```
3. 运行 3. 运行
```bash ```bash
./mengyamonitor-backend ./mengyamonitor-backend
``` ```
默认监听端口: 9292 默认监听端口: 9292
4. 可选：配置环境变量 4. 可选：配置环境变量
```bash ```bash
PORT=8080 ./mengyamonitor-backend PORT=8080 ./mengyamonitor-backend
``` ```
### 前端开发 ### 前端开发
1. 进入前端目录 1. 进入前端目录
```bash ```bash
cd mengyamonitor-frontend cd mengyamonitor-frontend
``` ```
2. 安装依赖 2. 安装依赖
```bash ```bash
npm install npm install
``` ```
3. 启动开发服务器 3. 启动开发服务器
```bash ```bash
npm run dev npm run dev
``` ```
默认访问端口: 2929 默认访问端口: 2929
4. 构建生产版本 4. 构建生产版本
```bash ```bash
npm run build npm run build
``` ```
## 使用说明 ## 使用说明
### 1. 部署后端到服务器 ### 1. 部署后端到服务器
将编译好的 `mengyamonitor-backend` 二进制文件上传到需要监控的 Linux 服务器并运行。 将编译好的 `mengyamonitor-backend` 二进制文件上传到需要监控的 Linux 服务器并运行。
### 2. 配置前端 ### 2. 配置前端
在前端界面点击"添加服务器"，输入： 在前端界面点击"添加服务器"，输入：
- 服务器名称：例如"生产服务器1" - 服务器名称：例如"生产服务器1"
- 服务器地址：例如"http://192.168.1.100:9292" - 服务器地址：例如"http://192.168.1.100:9292"
### 3. 查看监控数据 ### 3. 查看监控数据
- 主界面显示所有服务器的基本信息（CPU、内存使用率） - 主界面显示所有服务器的基本信息（CPU、内存使用率）
- 点击"查看详情"可查看完整的系统信息 - 点击"查看详情"可查看完整的系统信息
- 数据每2秒自动刷新 - 数据每2秒自动刷新
## 项目结构 ## 项目结构
``` ```
萌芽监控面板/ 萌芽监控面板/
├── mengyamonitor-backend/ # 后端服务 ├── mengyamonitor-backend/ # 后端服务
│ ├── main.go # 主程序和HTTP服务器 │ ├── main.go # 主程序和HTTP服务器
│ ├── systeminfo.go # 系统信息采集 │ ├── systeminfo.go # 系统信息采集
│ ├── go.mod # Go模块配置 │ ├── go.mod # Go模块配置
│ └── README.md # 后端文档 │ └── README.md # 后端文档
│ │
├── mengyamonitor-frontend/ # 前端应用 ├── mengyamonitor-frontend/ # 前端应用
│ ├── src/ │ ├── src/
│ │ ├── api/ # API调用层 │ │ ├── api/ # API调用层
│ │ ├── components/ # React组件 │ │ ├── components/ # React组件
│ │ ├── hooks/ # 自定义Hooks │ │ ├── hooks/ # 自定义Hooks
│ │ ├── types/ # TypeScript类型 │ │ ├── types/ # TypeScript类型
│ │ ├── utils/ # 工具函数 │ │ ├── utils/ # 工具函数
│ │ ├── App.tsx # 主应用 │ │ ├── App.tsx # 主应用
│ │ └── main.tsx # 入口文件 │ │ └── main.tsx # 入口文件
│ ├── package.json │ ├── package.json
│ ├── vite.config.ts │ ├── vite.config.ts
│ └── README.md # 前端文档 │ └── README.md # 前端文档
│ │
└── 需求.txt # 需求文档 └── 需求.txt # 需求文档
``` ```
## API 接口 ## API 接口
### GET /api/health ### GET /api/health
健康检查 健康检查
### GET /api/metrics ### GET /api/metrics
获取系统监控指标 获取系统监控指标
```json ```json
{ {
"data": { "data": {
"hostname": "server1", "hostname": "server1",
"timestamp": "2025-12-10T10:00:00Z", "timestamp": "2025-12-10T10:00:00Z",
"cpu": { "usagePercent": 23.45, ... }, "cpu": { "usagePercent": 23.45, ... },
"memory": { "usedPercent": 50.0, ... }, "memory": { "usedPercent": 50.0, ... },
"storage": [...], "storage": [...],
"gpu": [...], "gpu": [...],
"os": { ... }, "os": { ... },
"uptimeSeconds": 864000.5 "uptimeSeconds": 864000.5
} }
} }
``` ```
## 注意事项 ## 注意事项
1. **系统支持**: 后端仅支持 Linux 系统 1. **系统支持**: 后端仅支持 Linux 系统
2. **权限要求**: 需要读取 `/proc` 文件系统的权限 2. **权限要求**: 需要读取 `/proc` 文件系统的权限
3. **GPU 监控**: 需要安装 `nvidia-smi` 工具（可选） 3. **GPU 监控**: 需要安装 `nvidia-smi` 工具（可选）
4. **网络访问**: 确保前端可以访问后端的 9292 端口 4. **网络访问**: 确保前端可以访问后端的 9292 端口
5. **CORS**: 后端已配置允许跨域访问 5. **CORS**: 后端已配置允许跨域访问
## 常见问题 ## 常见问题
**Q: 前端无法连接后端？** **Q: 前端无法连接后端？**
A: 检查服务器防火墙是否开放 9292 端口，确保后端服务正在运行。 A: 检查服务器防火墙是否开放 9292 端口，确保后端服务正在运行。
**Q: GPU 信息显示不可用？** **Q: GPU 信息显示不可用？**
A: 如果服务器没有 NVIDIA GPU 或未安装 nvidia-smi，GPU 信息会显示为"不可用"，这是正常的。 A: 如果服务器没有 NVIDIA GPU 或未安装 nvidia-smi，GPU 信息会显示为"不可用"，这是正常的。
**Q: 如何将前端打包成桌面应用？** **Q: 如何将前端打包成桌面应用？**
A: 可以使用 Electron 或 Tauri 框架将前端打包成桌面应用，详见前端 README。 A: 可以使用 Electron 或 Tauri 框架将前端打包成桌面应用，详见前端 README。
## 开发者 ## 开发者
- 前后端分离架构，代码结构清晰 - 前后端分离架构，代码结构清晰
- 符合企业级开发规范 - 符合企业级开发规范
- 易于扩展和维护 - 易于扩展和维护
## License ## License
MIT 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 库实现。 Linux 服务器监控后端服务，使用 Go 原生 net/http 库实现。
## 功能 ## 功能
- CPU 使用率和负载监控 - CPU 使用率和负载监控
- 内存使用情况 - 内存使用情况
- 磁盘存储监控 - 磁盘存储监控
- GPU 监控（支持 NVIDIA） - GPU 监控（支持 NVIDIA）
- 操作系统信息 - 操作系统信息
- 系统运行时间 - 系统运行时间
## API 端点 ## API 端点
### `GET /api/health` ### `GET /api/health`
健康检查端点 健康检查端点
```json ```json
{ {
"status": "ok", "status": "ok",
"timestamp": "2025-12-10T10:00:00Z" "timestamp": "2025-12-10T10:00:00Z"
} }
``` ```
### `GET /api/metrics` ### `GET /api/metrics`
获取系统监控指标 获取系统监控指标
```json ```json
{ {
"data": { "data": {
"hostname": "server1", "hostname": "server1",
"timestamp": "2025-12-10T10:00:00Z", "timestamp": "2025-12-10T10:00:00Z",
"cpu": { "cpu": {
"model": "Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz", "model": "Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz",
"cores": 8, "cores": 8,
"usagePercent": 23.45, "usagePercent": 23.45,
"loadAverages": [1.2, 1.5, 1.8] "loadAverages": [1.2, 1.5, 1.8]
}, },
"memory": { "memory": {
"totalBytes": 16777216000, "totalBytes": 16777216000,
"usedBytes": 8388608000, "usedBytes": 8388608000,
"freeBytes": 8388608000, "freeBytes": 8388608000,
"usedPercent": 50.0 "usedPercent": 50.0
}, },
"storage": [{ "storage": [{
"mount": "/", "mount": "/",
"totalBytes": 107374182400, "totalBytes": 107374182400,
"usedBytes": 53687091200, "usedBytes": 53687091200,
"freeBytes": 53687091200, "freeBytes": 53687091200,
"usedPercent": 50.0 "usedPercent": 50.0
}], }],
"gpu": [{ "gpu": [{
"name": "Tesla T4", "name": "Tesla T4",
"memoryTotalMB": 15360, "memoryTotalMB": 15360,
"memoryUsedMB": 512, "memoryUsedMB": 512,
"utilizationPercent": 15.0, "utilizationPercent": 15.0,
"status": "ok" "status": "ok"
}], }],
"os": { "os": {
"kernel": "Linux version 5.15.0", "kernel": "Linux version 5.15.0",
"distro": "Ubuntu 22.04 LTS", "distro": "Ubuntu 22.04 LTS",
"architecture": "amd64" "architecture": "amd64"
}, },
"uptimeSeconds": 864000.5 "uptimeSeconds": 864000.5
} }
} }
``` ```
## 运行方式 ## 运行方式
### 开发环境 ### 开发环境
```bash ```bash
go run . go run .
``` ```
### 生产环境 ### 生产环境
#### 标准编译 #### 标准编译
```bash ```bash
# 编译 # 编译
go build -o mengyamonitor-backend go build -o mengyamonitor-backend
# 运行 # 运行
./mengyamonitor-backend ./mengyamonitor-backend
``` ```
#### 兼容旧版本系统编译（推荐） #### 兼容旧版本系统编译（推荐）
如果需要在 Debian 11 或其他旧版本系统上运行，使用静态链接编译： 如果需要在 Debian 11 或其他旧版本系统上运行，使用静态链接编译：
```bash ```bash
# 禁用 CGO，静态链接（不依赖系统 GLIBC 版本） # 禁用 CGO，静态链接（不依赖系统 GLIBC 版本）
export CGO_ENABLED=0 export CGO_ENABLED=0
go build -ldflags="-s -w" -o mengyamonitor-backend . go build -ldflags="-s -w" -o mengyamonitor-backend .
# 或使用提供的脚本 # 或使用提供的脚本
chmod +x build.sh chmod +x build.sh
./build.sh ./build.sh
``` ```
这样可以避免 GLIBC 版本兼容性问题。详细说明请参考 [BUILD.md](./BUILD.md)。 这样可以避免 GLIBC 版本兼容性问题。详细说明请参考 [BUILD.md](./BUILD.md)。
### 环境变量 ### 环境变量
- `HOST`: 监听地址，默认 `0.0.0.0` - `HOST`: 监听地址，默认 `0.0.0.0`
- `PORT`: 监听端口，默认 `9292` - `PORT`: 监听端口，默认 `9292`
示例： 示例：
```bash ```bash
PORT=8080 ./mengyamonitor-backend PORT=8080 ./mengyamonitor-backend
``` ```
## 部署到服务器 ## 部署到服务器
1. 将编译好的二进制文件上传到目标服务器 1. 将编译好的二进制文件上传到目标服务器
2. 赋予执行权限：`chmod +x mengyamonitor-backend` 2. 赋予执行权限：`chmod +x mengyamonitor-backend`
3. 运行服务：`./mengyamonitor-backend` 3. 运行服务：`./mengyamonitor-backend`
4. 可选：使用 systemd 或 supervisor 管理服务进程 4. 可选：使用 systemd 或 supervisor 管理服务进程
## 注意事项 ## 注意事项
- 仅支持 Linux 系统 - 仅支持 Linux 系统
- GPU 监控需要安装 nvidia-smi 工具 - GPU 监控需要安装 nvidia-smi 工具
- 需要读取 /proc 文件系统的权限 - 需要读取 /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 package main
import ( import (
"bufio" "bufio"
"os" "os"
"runtime" "runtime"
"strconv" "strconv"
"strings" "strings"
"time" "time"
) )
// CollectMetrics 收集所有系统监控指标 // CollectMetrics 收集所有系统监控指标
func CollectMetrics() (*Metrics, error) { func CollectMetrics() (*Metrics, error) {
hostname, _ := os.Hostname() hostname, _ := os.Hostname()
cpuModel := firstMatchInFile("/proc/cpuinfo", "model name") cpuModel := firstMatchInFile("/proc/cpuinfo", "model name")
cpuUsage, err := readCPUUsage() cpuUsage, err := readCPUUsage()
if err != nil { if err != nil {
return nil, err return nil, err
} }
cpuTemp := readCPUTemperature() cpuTemp := readCPUTemperature()
perCoreUsage := readPerCoreUsage() perCoreUsage := readPerCoreUsage()
mem, err := readMemory() mem, err := readMemory()
if err != nil { if err != nil {
return nil, err return nil, err
} }
storage, err := readAllStorage() storage, err := readAllStorage()
if err != nil { if err != nil {
return nil, err return nil, err
} }
gpu := readGPU() gpu := readGPU()
network := readNetworkInterfaces() network := readNetworkInterfaces()
systemStats := readSystemStats() systemStats := readSystemStats()
systemStats.DockerStats = readDockerStats() systemStats.DockerStats = readDockerStats()
osInfo := readOSInfo() osInfo := readOSInfo()
uptime := readUptime() uptime := readUptime()
loads := readLoadAverages() loads := readLoadAverages()
return &Metrics{ return &Metrics{
Hostname: hostname, Hostname: hostname,
Timestamp: time.Now().UTC(), Timestamp: time.Now().UTC(),
CPU: CPUMetrics{ CPU: CPUMetrics{
Model: cpuModel, Model: cpuModel,
Cores: runtime.NumCPU(), Cores: runtime.NumCPU(),
UsagePercent: round(cpuUsage, 2), UsagePercent: round(cpuUsage, 2),
LoadAverages: loads, LoadAverages: loads,
Temperature: cpuTemp, Temperature: cpuTemp,
PerCoreUsage: perCoreUsage, PerCoreUsage: perCoreUsage,
}, },
Memory: mem, Memory: mem,
Storage: storage, Storage: storage,
GPU: gpu, GPU: gpu,
Network: network, Network: network,
System: systemStats, System: systemStats,
OS: osInfo, OS: osInfo,
UptimeSeconds: uptime, UptimeSeconds: uptime,
}, nil }, nil
} }
func readOSInfo() OSInfo { func readOSInfo() OSInfo {
distro := readOSRelease() distro := readOSRelease()
kernel := strings.TrimSpace(readFirstLine("/proc/version")) kernel := strings.TrimSpace(readFirstLine("/proc/version"))
arch := runtime.GOARCH arch := runtime.GOARCH
return OSInfo{ return OSInfo{
Kernel: kernel, Kernel: kernel,
Distro: distro, Distro: distro,
Architecture: arch, Architecture: arch,
} }
} }
func readOSRelease() string { func readOSRelease() string {
f, err := os.Open("/etc/os-release") f, err := os.Open("/etc/os-release")
if err != nil { if err != nil {
return runtime.GOOS return runtime.GOOS
} }
defer f.Close() defer f.Close()
scanner := bufio.NewScanner(f) scanner := bufio.NewScanner(f)
for scanner.Scan() { for scanner.Scan() {
line := scanner.Text() line := scanner.Text()
if strings.HasPrefix(line, "PRETTY_NAME=") { if strings.HasPrefix(line, "PRETTY_NAME=") {
return strings.Trim(line[len("PRETTY_NAME="):], "\"") return strings.Trim(line[len("PRETTY_NAME="):], "\"")
} }
} }
return runtime.GOOS return runtime.GOOS
} }
func readUptime() float64 { func readUptime() float64 {
line := readFirstLine("/proc/uptime") line := readFirstLine("/proc/uptime")
fields := strings.Fields(line) fields := strings.Fields(line)
if len(fields) == 0 { if len(fields) == 0 {
return 0 return 0
} }
v, err := strconv.ParseFloat(fields[0], 64) v, err := strconv.ParseFloat(fields[0], 64)
if err != nil { if err != nil {
return 0 return 0
} }
return v return v
} }

364
mengyamonitor-backend/cpu.go
View File

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

6
mengyamonitor-backend/go.mod
View File

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

96
mengyamonitor-backend/gpu.go
View File

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

112
mengyamonitor-backend/latency.go
View File

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

530
mengyamonitor-backend/main.go
View File

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

128
mengyamonitor-backend/memory.go
View File

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

222
mengyamonitor-backend/network.go
View File

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

780
mengyamonitor-backend/system.go
View File

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

226
mengyamonitor-backend/systeminfo_linux.go
View File

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

28
mengyamonitor-backend/systeminfo_other.go
View File

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

132
mengyamonitor-backend/utils.go
View File

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

220
mengyamonitor-frontend/README.md
View File

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

10
mengyamonitor-frontend/index.html
View File

@@ -1,9 +1,15 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <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="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> <title>萌芽监控面板</title>
</head> </head>
<body> <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" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"react": "^19.2.0", "react": "^19.2.0",
"react-dom": "^19.2.0" "react-dom": "^19.2.0"
}, },
@@ -25,6 +28,7 @@
"globals": "^16.5.0", "globals": "^16.5.0",
"typescript": "~5.9.3", "typescript": "~5.9.3",
"typescript-eslint": "^8.46.4", "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); border-radius: var(--radius-md);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
} }
.app-header h1 { .app-header h1 {
margin: 0; margin: 0;
font-size: 0.75rem; font-size: 1.5rem;
color: var(--text-light); color: var(--text-main);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.75rem;
font-weight: 400; font-weight: 600;
transform: translateY(-3px);
} }
.app-logo { .app-logo {
width: 16px; width: 36px;
height: 16px; height: 36px;
border-radius: 4px; border-radius: 6px;
display: inline-block; 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 { .btn-add {
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
@@ -163,16 +225,7 @@
justify-content: center; justify-content: center;
} }
.server-grid { .header-actions {
grid-template-columns: 1fr; justify-content: center;
}
.add-form {
flex-direction: column;
padding: 1.5rem;
}
.add-form input {
min-width: 100%;
} }
} }

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

@@ -1,34 +1,80 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import type { ServerConfig } from './types'; 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 { useServerMonitor } from './hooks/useServerMonitor';
import { ServerCard } from './components/ServerCard/ServerCard'; import { ServerCard } from './components/ServerCard/ServerCard';
import { ServerDetail } from './components/ServerDetail/ServerDetail'; 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'; 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() { function App() {
const [servers, setServers] = useState<ServerConfig[]>([]); const [servers, setServers] = useState<ServerConfig[]>([]);
const [showAddForm, setShowAddForm] = useState(false); const [showAddForm, setShowAddForm] = useState(false);
const [selectedServerId, setSelectedServerId] = useState<string | null>(null); const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
const [newServerForm, setNewServerForm] = useState({ name: '', url: '' }); const [newServerForm, setNewServerForm] = useState({ name: '', url: '' });
const [showHeader, setShowHeader] = useState(true);
const statuses = useServerMonitor(servers, 2000); const statuses = useServerMonitor(servers, 2000);
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
);
useEffect(() => { useEffect(() => {
const loaded = loadServers(); const loaded = loadServers();
setServers(loaded); setServers(loaded);
}, []); }, []);
const handleUrlBlur = () => {
const formatted = formatServerUrl(newServerForm.url);
if (formatted !== newServerForm.url) {
setNewServerForm(prev => ({ ...prev, url: formatted }));
}
};
const handleAddServer = () => { const handleAddServer = () => {
if (!newServerForm.name || !newServerForm.url) { if (!newServerForm.name || !newServerForm.url) {
alert('请填写服务器名称和地址'); alert('请填写服务器名称和地址');
return; return;
} }
const formattedUrl = formatServerUrl(newServerForm.url);
const newServer: ServerConfig = { const newServer: ServerConfig = {
id: Date.now().toString(), id: Date.now().toString(),
name: newServerForm.name, name: newServerForm.name,
url: newServerForm.url, url: formattedUrl,
enabled: true, enabled: true,
}; };
@@ -51,20 +97,94 @@ function App() {
setSelectedServerId(serverId); 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 selectedStatus = selectedServerId ? statuses[selectedServerId] : null;
const selectedServer = servers.find(s => s.id === selectedServerId); const selectedServer = servers.find(s => s.id === selectedServerId);
return ( return (
<div className="app"> <div className="app">
<header className="app-header"> {!showHeader && (
<h1> <button
<img className="app-logo" src="/logo.png" alt="萌芽监控面板" /> className="btn-show-header"
萌芽监控面板 onClick={() => setShowHeader(true)}
</h1> title="显示导航栏"
<button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}> >
{showAddForm ? '×' : '+'} 👁️
</button> </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> </header>
)}
{showAddForm && ( {showAddForm && (
<div className="add-form"> <div className="add-form">
@@ -79,6 +199,7 @@ function App() {
placeholder="服务器地址 (例如: http://192.168.1.100:9292)" placeholder="服务器地址 (例如: http://192.168.1.100:9292)"
value={newServerForm.url} value={newServerForm.url}
onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })} onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })}
onBlur={handleUrlBlur}
/> />
<button className="btn-submit" onClick={handleAddServer}> <button className="btn-submit" onClick={handleAddServer}>
添加 添加
@@ -93,26 +214,34 @@ function App() {
<p className="hint">点击右上角的"添加服务器"按钮开始使用</p> <p className="hint">点击右上角的"添加服务器"按钮开始使用</p>
</div> </div>
) : ( ) : (
servers.map((server) => { <DndContext
const status = statuses[server.id]; sensors={sensors}
// Calculate storage usage (max of all mounts) collisionDetection={closestCenter}
const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0; onDragEnd={handleDragEnd}
>
return ( <SortableContext items={servers.map((s) => s.id)} strategy={rectSortingStrategy}>
<ServerCard {servers.map((server) => {
key={server.id} const status = statuses[server.id];
server={server} // Calculate storage usage (max of all mounts)
online={status?.online || false} const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
metrics={status?.metrics}
cpuUsage={status?.metrics?.cpu.usagePercent || 0} return (
memoryUsage={status?.metrics?.memory.usedPercent || 0} <ServerCard
storageUsage={storageUsage} // Pass max storage usage key={server.id}
uptime={status?.metrics?.uptimeSeconds} server={server}
onDetail={handleShowDetail} online={status?.online || false}
onRemove={handleRemoveServer} 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> </main>

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

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

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

@@ -1,381 +1,387 @@
.server-card { .server-card {
background: var(--surface-color); background: var(--surface-color);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1.5rem; padding: 1.5rem;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: all 0.3s ease; transition: all 0.3s ease;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
} }
.server-card:hover { .server-card:hover {
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
transform: translateY(-4px); transform: translateY(-4px);
border-color: var(--primary-color); border-color: var(--primary-color);
} }
.server-card.online { .server-card.online {
border-top: 4px solid var(--success-color); border-top: 4px solid var(--success-color);
} }
.server-card.offline { .server-card.offline {
border-top: 4px solid var(--text-light); border-top: 4px solid var(--text-light);
opacity: 0.9; opacity: 0.9;
} }
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} cursor: grab;
user-select: none;
.server-info { }
display: flex;
align-items: center; .card-header:active {
gap: 0.75rem; cursor: grabbing;
} }
.status-indicator { .server-info {
width: 10px; display: flex;
height: 10px; align-items: center;
border-radius: 50%; gap: 0.75rem;
position: relative; }
}
.status-indicator {
.status-online { width: 10px;
background: var(--success-color); height: 10px;
box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.2); border-radius: 50%;
} position: relative;
}
.status-online::after {
content: ''; .status-online {
position: absolute; background: var(--success-color);
top: -4px; box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.2);
left: -4px; }
right: -4px;
bottom: -4px; .status-online::after {
border-radius: 50%; content: '';
animation: pulse 2s infinite; position: absolute;
border: 1px solid var(--success-color); top: -4px;
} left: -4px;
right: -4px;
@keyframes pulse { bottom: -4px;
0% { transform: scale(1); opacity: 0.5; } border-radius: 50%;
70% { transform: scale(1.5); opacity: 0; } animation: pulse 2s infinite;
100% { transform: scale(1); opacity: 0; } border: 1px solid var(--success-color);
} }
.status-offline { @keyframes pulse {
background: var(--text-light); 0% { transform: scale(1); opacity: 0.5; }
} 70% { transform: scale(1.5); opacity: 0; }
100% { transform: scale(1); opacity: 0; }
.server-name-group { }
display: flex;
flex-direction: column; .status-offline {
gap: 0.25rem; background: var(--text-light);
} }
.server-name { .server-name-group {
margin: 0; display: flex;
font-size: 1.125rem; flex-direction: column;
font-weight: 600; gap: 0.25rem;
color: var(--text-main); }
}
.server-name {
.server-hostname { margin: 0;
font-size: 0.75rem; font-size: 1.125rem;
color: var(--text-light); font-weight: 600;
font-weight: 400; color: var(--text-main);
} }
.btn-remove { .server-hostname {
background: transparent; font-size: 0.75rem;
border: none; color: var(--text-light);
font-size: 1.5rem; font-weight: 400;
color: var(--text-light); }
cursor: pointer;
padding: 0; .btn-remove {
width: 24px; background: transparent;
height: 24px; border: none;
line-height: 24px; font-size: 1.5rem;
border-radius: 50%; color: var(--text-light);
display: flex; cursor: pointer;
align-items: center; padding: 0;
justify-content: center; width: 24px;
transition: all 0.2s; height: 24px;
} line-height: 24px;
border-radius: 50%;
.btn-remove:hover { display: flex;
background: var(--danger-color); align-items: center;
color: white; justify-content: center;
} transition: all 0.2s;
}
/* Main Metrics */
.card-main-metrics { .btn-remove:hover {
flex: 1; background: var(--danger-color);
display: flex; color: white;
flex-direction: column; }
gap: 1rem;
} /* Main Metrics */
.card-main-metrics {
.metrics-grid-main { flex: 1;
display: flex; display: flex;
justify-content: space-around; flex-direction: column;
align-items: center; gap: 1rem;
padding: 0.5rem 0; }
}
.metrics-grid-main {
.circular-progress-small { display: flex;
display: flex; justify-content: space-around;
align-items: center; align-items: center;
justify-content: center; padding: 0.5rem 0;
} }
.circular-progress-small .progress-ring-bg { .circular-progress-small {
fill: none; display: flex;
stroke: #e2e8f0; align-items: center;
stroke-width: 6; justify-content: center;
} }
.circular-progress-small .progress-ring-circle { .circular-progress-small .progress-ring-bg {
fill: none; fill: none;
stroke-width: 6; stroke: #e2e8f0;
stroke-linecap: round; stroke-width: 6;
transition: stroke-dashoffset 0.5s ease; }
transform: rotate(-90deg);
transform-origin: center; .circular-progress-small .progress-ring-circle {
} fill: none;
stroke-width: 6;
.circular-progress-small .progress-value-small { stroke-linecap: round;
font-size: 14px; transition: stroke-dashoffset 0.5s ease;
font-weight: 600; transform: rotate(-90deg);
fill: var(--text-main); transform-origin: center;
} }
.circular-progress-small .progress-label-small { .circular-progress-small .progress-value-small {
font-size: 10px; font-size: 14px;
fill: var(--text-secondary); font-weight: 600;
} fill: var(--text-main);
}
/* Info Grid */
.card-info-grid { .circular-progress-small .progress-label-small {
display: grid; font-size: 10px;
grid-template-columns: 1fr 1fr; fill: var(--text-secondary);
gap: 0.75rem; }
padding: 0.75rem;
background: var(--bg-color); /* Info Grid */
border-radius: var(--radius-md); .card-info-grid {
} display: grid;
grid-template-columns: 1fr 1fr;
.info-section { gap: 0.75rem;
display: flex; padding: 0.75rem;
flex-direction: column; background: var(--bg-color);
gap: 0.5rem; border-radius: var(--radius-md);
} }
.info-row { .info-section {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 0.5rem;
font-size: 0.75rem; }
writing-mode: horizontal-tb;
text-orientation: mixed; .info-row {
} display: flex;
justify-content: space-between;
.info-label { align-items: center;
color: var(--text-light); font-size: 0.75rem;
font-weight: 500; writing-mode: horizontal-tb;
writing-mode: horizontal-tb; text-orientation: mixed;
text-orientation: mixed; }
white-space: nowrap;
} .info-label {
color: var(--text-light);
.info-value { font-weight: 500;
color: var(--text-main); writing-mode: horizontal-tb;
font-weight: 600; text-orientation: mixed;
font-family: monospace; white-space: nowrap;
font-size: 0.7rem; }
max-width: 120px;
overflow: hidden; .info-value {
text-overflow: ellipsis; color: var(--text-main);
white-space: nowrap; font-weight: 600;
text-align: right; font-family: monospace;
} font-size: 0.7rem;
max-width: 120px;
/* Performance Grid */ overflow: hidden;
.card-performance-grid { text-overflow: ellipsis;
display: grid; white-space: nowrap;
grid-template-columns: 1fr 1fr; text-align: right;
gap: 0.75rem; }
padding: 0.75rem;
background: var(--bg-color); /* Performance Grid */
border-radius: var(--radius-md); .card-performance-grid {
} display: grid;
grid-template-columns: 1fr 1fr;
.performance-section { gap: 0.75rem;
display: flex; padding: 0.75rem;
flex-direction: column; background: var(--bg-color);
gap: 0.5rem; border-radius: var(--radius-md);
} }
.performance-header { .performance-section {
margin-bottom: 0.25rem; display: flex;
} flex-direction: column;
gap: 0.5rem;
.performance-label { }
font-size: 0.75rem;
font-weight: 600; .performance-header {
color: var(--text-secondary); margin-bottom: 0.25rem;
} }
.performance-row { .performance-label {
display: flex; font-size: 0.75rem;
flex-direction: column; font-weight: 600;
gap: 0.4rem; color: var(--text-secondary);
} }
.performance-item { .performance-row {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 0.4rem;
font-size: 0.7rem; }
}
.performance-item {
.performance-item-label { display: flex;
color: var(--text-light); justify-content: space-between;
font-weight: 500; align-items: center;
} font-size: 0.7rem;
}
.performance-item-value {
color: var(--primary-color); .performance-item-label {
font-weight: 600; color: var(--text-light);
font-family: monospace; font-weight: 500;
text-align: right; }
}
.performance-item-value {
/* Footer Info */ color: var(--primary-color);
.card-footer-info { font-weight: 600;
display: flex; font-family: monospace;
justify-content: space-between; text-align: right;
align-items: center; }
padding: 0.75rem;
background: var(--bg-color); /* Footer Info */
border-radius: var(--radius-md); .card-footer-info {
margin-top: 0.5rem; display: flex;
} justify-content: space-between;
align-items: center;
.footer-row { padding: 0.75rem;
display: flex; background: var(--bg-color);
align-items: center; border-radius: var(--radius-md);
gap: 0.5rem; margin-top: 0.5rem;
font-size: 0.75rem; }
}
.footer-row {
.footer-label { display: flex;
color: var(--text-light); align-items: center;
font-weight: 500; gap: 0.5rem;
} font-size: 0.75rem;
}
.footer-value {
color: var(--text-main); .footer-label {
font-weight: 600; color: var(--text-light);
font-family: monospace; font-weight: 500;
} }
.footer-value {
/* Metrics List */ color: var(--text-main);
.metrics-list { font-weight: 600;
display: flex; font-family: monospace;
flex-direction: column; }
gap: 1rem;
margin-bottom: 1.5rem;
} /* Metrics List */
.metrics-list {
.metric-item { display: flex;
width: 100%; flex-direction: column;
} gap: 1rem;
margin-bottom: 1.5rem;
.metric-header { }
display: flex;
justify-content: space-between; .metric-item {
margin-bottom: 0.25rem; width: 100%;
font-size: 0.875rem; }
}
.metric-header {
.metric-label { display: flex;
color: var(--text-secondary); justify-content: space-between;
font-weight: 500; margin-bottom: 0.25rem;
} font-size: 0.875rem;
}
.metric-value {
font-weight: 600; .metric-label {
color: var(--text-main); color: var(--text-secondary);
} font-weight: 500;
}
.progress-bar-bg {
width: 100%; .metric-value {
height: 8px; font-weight: 600;
background: var(--bg-color); color: var(--text-main);
border-radius: 4px; }
overflow: hidden;
} .progress-bar-bg {
width: 100%;
.progress-bar-fill { height: 8px;
height: 100%; background: var(--bg-color);
border-radius: 4px; border-radius: 4px;
transition: width 0.5s ease; overflow: hidden;
} }
.uptime-info { .progress-bar-fill {
display: flex; height: 100%;
justify-content: space-between; border-radius: 4px;
font-size: 0.875rem; transition: width 0.5s ease;
padding-top: 0.5rem; }
border-top: 1px solid var(--border-color);
} .uptime-info {
display: flex;
.uptime-label { justify-content: space-between;
color: var(--text-light); font-size: 0.875rem;
} padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
.uptime-value { }
color: var(--text-secondary);
font-family: monospace; .uptime-label {
} color: var(--text-light);
}
.offline-state {
flex: 1; .uptime-value {
display: flex; color: var(--text-secondary);
align-items: center; font-family: monospace;
justify-content: center; }
background: var(--bg-color);
border-radius: var(--radius-md); .offline-state {
margin-bottom: 1.5rem; flex: 1;
color: var(--text-light); display: flex;
} align-items: center;
justify-content: center;
.card-footer { background: var(--bg-color);
margin-top: auto; border-radius: var(--radius-md);
} margin-bottom: 1.5rem;
color: var(--text-light);
.btn-detail { }
width: 100%;
background: var(--surface-hover); .card-footer {
border: 1px solid var(--border-color); margin-top: auto;
padding: 0.75rem; }
border-radius: var(--radius-md);
font-size: 0.875rem; .btn-detail {
font-weight: 600; width: 100%;
color: var(--text-secondary); background: var(--surface-hover);
cursor: pointer; border: 1px solid var(--border-color);
transition: all 0.2s; padding: 0.75rem;
} border-radius: var(--radius-md);
font-size: 0.875rem;
.btn-detail:hover { font-weight: 600;
background: var(--primary-color); color: var(--text-secondary);
color: white; cursor: pointer;
border-color: var(--primary-color); 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 type { ServerConfig, ServerMetrics } from '../../types';
import { formatUptime, formatBytes } from '../../utils/format'; import { formatUptime, formatBytes } from '../../utils/format';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import './ServerCard.css'; import './ServerCard.css';
const CircularProgress = ({ value, label, color, size = 60 }: { value: number; label: string; color: string; size?: number }) => { const CircularProgress = ({ value, label, color, size = 60 }: { value: number; label: string; color: string; size?: number }) => {
@@ -95,6 +97,21 @@ export const ServerCard = ({
onDetail, onDetail,
onRemove, onRemove,
}: ServerCardProps) => { }: 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 地址 // 从 URL 提取 IP 地址
const extractIP = (url: string): string => { const extractIP = (url: string): string => {
try { try {
@@ -142,8 +159,12 @@ export const ServerCard = ({
const latencyColor = getLatencyColor(latency); const latencyColor = getLatencyColor(latency);
return ( return (
<div className={`server-card ${online ? 'online' : 'offline'}`}> <div
<div className="card-header"> ref={setNodeRef}
style={style}
className={`server-card ${online ? 'online' : 'offline'}`}
>
<div className="card-header" {...attributes} {...listeners}>
<div className="server-info"> <div className="server-info">
<div className={`status-indicator ${online ? 'status-online' : 'status-offline'}`} /> <div className={`status-indicator ${online ? 'status-online' : 'status-offline'}`} />
<div className="server-name-group"> <div className="server-name-group">
@@ -153,7 +174,15 @@ export const ServerCard = ({
)} )}
</div> </div>
</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> </button>
</div> </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 { useState, useEffect, useCallback } from 'react';
import type { ServerConfig, ServerStatus } from '../types'; import type { ServerConfig, ServerStatus } from '../types';
import { fetchServerMetrics } from '../api/monitor'; import { fetchServerMetrics } from '../api/monitor';
export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => { export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => {
const [statuses, setStatuses] = useState<Record<string, ServerStatus>>({}); const [statuses, setStatuses] = useState<Record<string, ServerStatus>>({});
const fetchMetrics = useCallback(async (server: ServerConfig) => { const fetchMetrics = useCallback(async (server: ServerConfig) => {
if (!server.enabled) { if (!server.enabled) {
return; return;
} }
try { try {
const metrics = await fetchServerMetrics(server.url); const metrics = await fetchServerMetrics(server.url);
setStatuses(prev => ({ setStatuses(prev => ({
...prev, ...prev,
[server.id]: { [server.id]: {
serverId: server.id, serverId: server.id,
online: true, online: true,
metrics, metrics,
lastUpdate: Date.now(), lastUpdate: Date.now(),
}, },
})); }));
} catch (error) { } catch (error) {
setStatuses(prev => ({ setStatuses(prev => ({
...prev, ...prev,
[server.id]: { [server.id]: {
serverId: server.id, serverId: server.id,
online: false, online: false,
error: error instanceof Error ? error.message : 'Unknown error', error: error instanceof Error ? error.message : 'Unknown error',
lastUpdate: Date.now(), lastUpdate: Date.now(),
}, },
})); }));
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
// Initial fetch // Initial fetch
servers.forEach(server => { servers.forEach(server => {
if (server.enabled) { if (server.enabled) {
fetchMetrics(server); fetchMetrics(server);
} }
}); });
// Set up polling // Set up polling
const timer = setInterval(() => { const timer = setInterval(() => {
servers.forEach(server => { servers.forEach(server => {
if (server.enabled) { if (server.enabled) {
fetchMetrics(server); fetchMetrics(server);
} }
}); });
}, interval); }, interval);
return () => clearInterval(timer); return () => clearInterval(timer);
}, [servers, interval, fetchMetrics]); }, [servers, interval, fetchMetrics]);
return statuses; return statuses;
}; };

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

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

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

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

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

@@ -1,53 +1,115 @@
import type { ServerConfig } from '../types'; import type { ServerConfig } from '../types';
const STORAGE_KEY = 'mengya_monitor_servers'; const STORAGE_KEY = 'mengya_monitor_servers';
export const loadServers = (): ServerConfig[] => { export const loadServers = (): ServerConfig[] => {
try { try {
const stored = localStorage.getItem(STORAGE_KEY); const stored = localStorage.getItem(STORAGE_KEY);
if (stored) { if (stored) {
const parsed = JSON.parse(stored); const parsed = JSON.parse(stored);
// Ensure it's an array // Ensure it's an array
if (Array.isArray(parsed)) { if (Array.isArray(parsed)) {
return parsed; return parsed;
} }
} }
} catch (error) { } catch (error) {
console.error('Failed to load servers:', error); console.error('Failed to load servers:', error);
} }
return []; return [];
}; };
export const saveServers = (servers: ServerConfig[]): void => { export const saveServers = (servers: ServerConfig[]): void => {
try { try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(servers)); localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
} catch (error) { } catch (error) {
console.error('Failed to save servers:', error); console.error('Failed to save servers:', error);
} }
}; };
export const addServer = (server: Omit<ServerConfig, 'id'>): ServerConfig => { export const addServer = (server: Omit<ServerConfig, 'id'>): ServerConfig => {
const servers = loadServers(); const servers = loadServers();
const newServer: ServerConfig = { const newServer: ServerConfig = {
...server, ...server,
id: Date.now().toString(), id: Date.now().toString(),
}; };
servers.push(newServer); servers.push(newServer);
saveServers(servers); saveServers(servers);
return newServer; return newServer;
}; };
export const updateServer = (id: string, updates: Partial<ServerConfig>): void => { export const updateServer = (id: string, updates: Partial<ServerConfig>): void => {
const servers = loadServers(); const servers = loadServers();
const index = servers.findIndex(s => s.id === id); const index = servers.findIndex(s => s.id === id);
if (index !== -1) { if (index !== -1) {
servers[index] = { ...servers[index], ...updates }; servers[index] = { ...servers[index], ...updates };
saveServers(servers); saveServers(servers);
} }
}; };
export const removeServer = (id: string): void => { export const removeServer = (id: string): void => {
const servers = loadServers(); const servers = loadServers();
const filtered = servers.filter(s => s.id !== id); const filtered = servers.filter(s => s.id !== id);
saveServers(filtered); 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 { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ 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: { server: {
port: 2929, port: 2929,
host: true, 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,内存,储存,操作系统等 1.实现一个服务器监控面板，目前初步支持Linux服务器，监控服务器基本信息，比如：cpu/GPU,内存,储存,操作系统等
2.采用企业级前后端分离架构,前端使用React框架，后端使用golang原版自带的net库 2.采用企业级前后端分离架构,前端使用React框架，后端使用golang原版自带的net库
3.原理十分简单，后端go获取Linux相关硬件信息，并封装成相关后端json API路由，前端每隔1秒或者2秒获取后端信息 3.原理十分简单，后端go获取Linux相关硬件信息，并封装成相关后端json API路由，前端每隔1秒或者2秒获取后端信息
4.对外访问使用默认端口：2929 后端默认端口为9292 4.对外访问使用默认端口：2929 后端默认端口为9292
5.由于是监控面板 前端可以一次性对接多个服务器后端卡片式展示相关信息，前端面板可以展示一些基本信息，用户可以点击详情按钮查看更多详细信息 5.由于是监控面板 前端可以一次性对接多个服务器后端卡片式展示相关信息，前端面板可以展示一些基本信息，用户可以点击详情按钮查看更多详细信息
6.前端项目已经初始化 前后端代码架构必须分类整齐符合标准方便我阅读修改 6.前端项目已经初始化 前后端代码架构必须分类整齐符合标准方便我阅读修改
7.注意前端相当于一个只是客户端用于请求可以配置后端服务器，这两个是分开的，前端可以打包部署在用户电脑上比如做成软件app，而后端构建打包后放到各个服务器上 7.注意前端相当于一个只是客户端用于请求可以配置后端服务器，这两个是分开的，前端可以打包部署在用户电脑上比如做成软件app，而后端构建打包后放到各个服务器上
8.前端页面风格偏白色柔和风 8.前端页面风格偏白色柔和风