站点监测
优雅的站点状态监控面板
? 在线演示： https://status.bsgun.cn
? 简介
站点监测是一个基于 UptimeRobot API 开发的站点状态监控面板，支持多站点状态监控、实时通知、故障统计等功能。界面简洁美观，响应式设计，支持亮暗主题切换。
✨ 功能预览
✨ 特性
? 实时监控：支持多种监控方式 ? 响应式设计：适配移动端和桌面端 ? 主题切换：支持亮色/暗色主题 ? 数据统计：可视化展示可用率和响应时间 ? 故障记录：详细的宕机记录和原因分析 ? 自动刷新：定时自动更新监控数据 ? 平滑动画：流畅的用户界面交互体验
⚙️ 部署配置
环境要求
Node.js >= 16.16.0 NPM >= 8.15.0 或 PNPM >= 8.0.0
获取 UptimeRobot API Key
注册/登录 UptimeRobot 进入 Integrations & API 下拉到最底部在 Main API keys 部分创建 Read-Only API Key 复制生成的 API Key
API 代理说明
本项目支持以下三种部署方式,均可实现自动处理跨域请求:
腾讯云 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.gitcd uptime-status
安装依赖
pnpm install# 或npm install
配置环境变量
在 .env 文件中修改以下配置：
# UptimeRobot API KeyVITE_UPTIMEROBOT_API_KEY = "ur2290572-af4663a4e3f83be26119abbe"# UptimeRobot API URL # 除腾讯云 EdgeOne Pages 、vercel 、cloudflare pages 外 ## 其它部署方式需要自行搭建 API 代理 ## 代理地址 https://api.uptimerobot.com/v2/getMonitorsVITE_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 - 图表库
支付宝微信扫一扫，打赏作者吧～本文链接：https://kinber.cn/post/5399.html 转载需授权！
推荐本站淘宝优惠价购买喜欢的宝贝:
您阅读本篇文章共花了： 
