站点监测是一个基于 UptimeRobot API 开发的站点状态监控面板，支持多站点状态监控、实时通知、故障统计等功能。界面简洁美观，响应式设计，支持亮暗主题切换。

• 实时监控：支持多种监控方式
• 响应式设计：适配移动端和桌面端
• 主题切换：支持亮色/暗色主题
• 数据统计：可视化展示可用率和响应时间
• 故障记录：详细的宕机记录和原因分析
• 自动刷新：定时自动更新监控数据
• 平滑动画：流畅的用户界面交互体验

• Node.js >= 16.16.0
• NPM >= 8.15.0 或 PNPM >= 8.0.0

1. 注册/登录 UptimeRobot
2. 进入 Integrations & API
3. 下拉到最底部在 Main API keys 部分创建 Read-Only API Key
4. 复制生成的 API Key

本项目支持以下三种部署方式,均可实现自动处理跨域请求:

1. 腾讯云 EdgeOne Pages

   • 点击部署按钮
   • 连接到GitHub，选择项目
   • 框架预设选择Vue，点击开始部署
   • 使用默认配置 VITE_UPTIMEROBOT_API_URL = "/api/status"

2. Vercel

   • 点击部署按钮
   • 连接到GitHub，选择项目
   • 填写项目名称，点击Create
   • 使用默认配置 VITE_UPTIMEROBOT_API_URL = "/api/status"

3. Cloudflare Pages

   • 点击部署按钮
   • 找到计算(worker) 部分
   • 点击创建，选择Pages，连接到GitHub，选择项目，点击开始创建
   • 框架预设选择Vue，点击保持并部署
   • 使用默认配置 VITE_UPTIMEROBOT_API_URL = "/api/status"

4. 其他平台

   • 自行搭建 API 代理
   • 在 .env 文件中设置 VITE_UPTIMEROBOT_API_URL 为你的 API 代理地址

1. 克隆项目

git clone https://github.com/JLinmr/uptime-status.git
cd uptime-status

2. 安装依赖

pnpm install
# 或
npm install

3. 配置环境变量

在 .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 = "梦爱吃鱼"

4. 开发调试

pnpm dev
# 或
npm run dev

# 开发环境需要将 VITE_UPTIMEROBOT_API_URL 设置为 "https://api.uptimerobot.com/v2/getMonitors"

5. 构建部署

pnpm build
# 或
npm run build

构建的文件在 dist 目录下，将 dist 目录部署到服务器即可。

本项目基于 MIT License 开源，使用时请遵守开源协议。

• UptimeRobot - 提供监控 API 支持
• Vue.js - 前端框架
• Tailwind CSS - CSS 框架
• Chart.js - 图表库