Files
mengyaping/README.md

111 lines
2.9 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 萌芽PingMengYaPing
一个轻量、可自部署的网站可用性监控面板。
支持多网站/多 URL 监控、分组管理、实时状态查看、24h/7d 可用率统计与延迟展示。
## 功能特性
- 多网站监控:每个网站可配置多个 URL分别检测
- 自动巡检:默认每 5 分钟检测一次(可配置)
- 状态面板:在线/离线、状态码、响应延迟、最后检测时间
- 可用率统计:按 24 小时与 7 天维度聚合
- 分组与检索:支持分组筛选与关键词搜索
- 手动触发:支持单网站“立即检测”
## 技术栈
- 前端React 19 + Vite 7 + Tailwind CSS 4
- 后端Go 1.25 + Gin
- 存储:本地 JSON 文件(`mengyaping-backend/data/`
- 部署Docker / Docker Compose后端
## 项目结构
```text
.
├─ mengyaping-frontend/ # 前端应用
│ ├─ src/components/ # 卡片、图表、弹窗等组件
│ ├─ src/pages/ # 页面Dashboard
│ ├─ src/services/api.js # API 请求封装
│ └─ public/ # 静态资源logo、favicon
├─ mengyaping-backend/ # 后端服务
│ ├─ handlers/ services/ router/
│ ├─ models/ storage/ config/ utils/
│ └─ data/ # 配置与监控数据JSON
├─ 开启前端.bat
├─ 开启后端.bat
└─ 构建前端.bat
```
## 快速开始(本地开发)
### 1) 启动后端
```bash
cd mengyaping-backend
go mod tidy
go run main.go
```
默认地址:`http://localhost:8080`
### 2) 启动前端
```bash
cd mengyaping-frontend
npm install
npm run dev
```
前端开发地址通常为:`http://localhost:5173`
## 常用命令
```bash
# 前端
cd mengyaping-frontend
npm run dev # 开发模式
npm run build # 生产构建
npm run lint # 代码检查
# 后端
cd mengyaping-backend
go test ./... # 运行测试
```
Windows 用户也可直接使用仓库根目录下的 `开启前端.bat``开启后端.bat``构建前端.bat`
## API 概览
基础前缀:`/api`
- `GET /health`:健康检查
- `GET /websites`:获取全部网站状态
- `GET /websites/:id`:获取单网站状态
- `POST /websites`:创建网站
- `PUT /websites/:id`:更新网站
- `DELETE /websites/:id`:删除网站
- `POST /websites/:id/check`:立即检测
- `GET /groups`:获取分组
- `POST /groups`:新增分组
## 配置说明
后端支持环境变量配置(如 `SERVER_PORT``MONITOR_INTERVAL``MONITOR_TIMEOUT` 等),并会读取 `mengyaping-backend/data/config.json`
当前实现中,`config.json` 的值会覆盖环境变量同名项。
## Docker 部署(后端)
```bash
cd mengyaping-backend
docker compose up -d --build
```
`docker-compose.yml` 默认映射端口 `6161 -> 8080`
## 展示建议GitHub
- 建议在仓库中新增 `docs/images/` 并放置页面截图
- 可在本 README 顶部补充截图、动图或在线演示链接,提升展示效果