优雅的站点状态监控面板
🎮 在线演示： https://status.bsgun.cn
站点监测是一个基于 UptimeRobot API 开发的站点状态监控面板，支持多站点状态监控、实时通知、故障统计等功能。界面简洁美观，响应式设计，支持亮暗主题切换。
- 📊 实时监控：支持多种监控方式
- 📱 响应式设计：适配移动端和桌面端
- 🌓 主题切换：支持亮色/暗色主题
- 📈 数据统计：可视化展示可用率和响应时间
- 🔔 故障记录：详细的宕机记录和原因分析
- 🔄 自动刷新：定时自动更新监控数据
- 💫 平滑动画：流畅的用户界面交互体验
- Node.js >= 16.16.0
- NPM >= 8.15.0 或 PNPM >= 8.0.0
- 注册/登录 UptimeRobot
- 进入 Integrations & API
- 下拉到最底部在 Main API keys 部分创建 Read-Only API Key
- 复制生成的 API Key
本项目支持以下三种部署方式,均可实现自动处理跨域请求:
-
腾讯云 EdgeOne Pages
- 点击上方蓝色 "Deploy" 按钮
- 连接到GitHub，选择项目
- 框架预设选择Vue，点击开始部署
- 使用默认配置
VITE_UPTIMEROBOT_API_URL = "/api/status"
-
Vercel
- 点击上方黑色 "Deploy" 按钮
- 连接到GitHub，选择项目
- 填写项目名称，点击Create
- 使用默认配置
VITE_UPTIMEROBOT_API_URL = "/api/status"
-
Cloudflare Pages
- 点击上方橙色 "Deploy" 按钮
- 找到计算(worker) 部分
- 点击创建，选择Pages，连接到GitHub，选择项目，点击开始创建
- 框架预设选择Vue，点击保持并部署
- 使用默认配置
VITE_UPTIMEROBOT_API_URL = "/api/status"
-
其他平台
- 自行搭建 API 代理
- 在
.env文件中设置VITE_UPTIMEROBOT_API_URL为你的 API 代理地址
- 克隆项目
git clone https://github.com/JLinmr/uptime-status.git
cd uptime-status- 安装依赖
pnpm install
# 或
npm install- 配置环境变量
在 .env 文件中修改以下配置：
# UptimeRobot API Key
VITE_UPTIMEROBOT_API_KEY = "ur2290572-af4663a4e3f83be26119abbe"
# UptimeRobot API URL
# 除腾讯云 EdgeOne Pages 、vercel 、cloudflare pages 外
## 其它部署方式需要自行搭建 API 代理
## 代理地址 https://api.uptimerobot.com/v2/getMonitors
VITE_UPTIMEROBOT_API_URL = "/api/status"
# 站点名称
VITE_APP_TITLE = "梦爱吃鱼"- 开发调试
pnpm dev
# 或
npm run dev
# 开发环境需要将 VITE_UPTIMEROBOT_API_URL 设置为 "https://api.uptimerobot.com/v2/getMonitors"- 构建部署
pnpm build
# 或
npm run build构建的文件在 dist 目录下，将 dist 目录部署到服务器即可。
本项目基于 MIT License 开源，使用时请遵守开源协议。
- UptimeRobot - 提供监控 API 支持
- Vue.js - 前端框架
- Tailwind CSS - CSS 框架
- Chart.js - 图表库