joecode77/pingit-app

# Pingit 应用程序 [Pingit](https://www.pingit.live) 的前端应用 — 一个全栈运行时间监控系统。使用 Vue 3、Pinia 和 ApexCharts 构建。 ## 线上演示 **前端:** [https://www.pingit.live](https://www.pingit.live) **后端仓库:** [https://github.com/joecode77/pingit-api](https://github.com/joecode77/pingit-api) **演示账号：** - 电子邮箱：`demo@pingit.live` - 密码：`password` ## 目录 - [截图](#screenshots) - [功能](#features) - [技术栈](#tech-stack) - [系统要求](#requirements) - [安装](#installation) - [运行应用程序](#running-the-application) - [生产环境构建](#building-for-production) - [部署](#deployment) - [页面](#pages) ## 截图 ### 仪表板  ### 监控列表  ### 监控详情  ## 功能 - **仪表板** — 所有监控器的概览，包含状态细分、总运行时间径向图和响应时间趋势图 - **监控列表** — 可过滤、排序和搜索的监控器列表，包含 30 天运行时间条 - **监控详情** — 完整的详情视图，包含 90 天运行时间条、响应时间图表、事件时间线、检查历史记录表格、通知渠道和标签 - **通知渠道** — 为每个监控器管理邮件和 webhook 通知渠道 - **标签** — 创建和管理标签以组织监控器 - **身份验证** — 支持基于令牌的注册和登录 - **自动刷新** — 仪表板和监控详情页面每 30 秒自动刷新，无需完全重新加载页面 - **CSV 导出** — 为任意监控器导出检查历史记录 - **移动端响应式** — 可在所有屏幕尺寸上使用 ## 技术栈 | 层级 | 技术 | | ---------- | ---------------------------- | | 框架 | Vue 3 (Composition API) | | 状态管理 | Pinia | | 路由 | Vue Router 4 | | HTTP 客户端| Axios | | 图表 | ApexCharts (vue3-apexcharts) | | 样式 | Tailwind CSS v4 + 作用域 CSS | | 字体 | Plus Jakarta Sans | | 构建工具 | Vite | ## 系统要求 - Node.js 18+ - npm - 一个正在运行的 [Pingit API](https://github.com/joecode77/pingit-api) 实例 ## 安装 ### 1. 克隆仓库 ``` git clone https://github.com/joecode77/pingit-app.git cd pingit-app ``` ### 2. 安装依赖 ``` npm install ``` ### 3. 复制环境文件 ``` cp .env.example .env ``` ### 4. 配置 API 地址 使用您正在运行的后端地址更新您的 `.env` 文件： ``` VITE_API_URL=http://localhost:8000 ``` 如果您使用的是线上 API，将其设置为： ``` VITE_API_URL=https://api.pingit.live ``` ## 运行应用程序 ``` npm run dev ``` 应用将在 `http://localhost:5173` 上可用。 ## 生产环境构建 ``` npm run build ``` 生产构建将输出到 `dist/` 文件夹。 要在本地预览生产构建： ``` npm run preview ``` ## 部署 此应用部署在 [Vercel](https://vercel.com) 上。仓库中包含一个 `vercel.json` 文件，用于正确处理客户端路由： ``` { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] } ``` ### Vercel 上的环境变量 在您的 Vercel 项目中，前往 **Settings → Environment Variables** 并添加： | 键 | 值 | | -------------- | ----------------------- | | `VITE_API_URL` | `https://api.pingit.live` | 添加环境变量后需要重新部署才能使其生效。 ## 页面 ### 登录 / 注册 包含表单验证和错误处理的身份验证页面。 ### 仪表板 跨所有监控器的汇总统计 — 总计、正常、故障、降级和暂停的数量，一个总运行时间径向图，以及一个聚合自所有活跃监控器的响应时间趋势面积图。每 30 秒自动刷新。 ### 监控列表 可按状态过滤，按名称或 URL 搜索，按名称、运行时间或最后检查时间排序。每个监控卡片显示当前状态、运行时间百分比、最后检查时间、检查间隔和一个 30 天运行时间条。 ### 监控详情 单个监控器的完整详情视图，包括： - 90 天运行时间条 - 关键统计数据（运行时间、平均响应时间、总检查次数、检查间隔、SSL 证书过期时间） - 响应时间图表（24小时、7天、30天） - 事件历史记录（含活跃事件指示器） - 监控器配置面板 - 分页检查历史记录表格（支持 CSV 导出） - 通知渠道管理 - 标签管理 每 30 秒自动刷新监控状态。 ### 通知渠道 管理所有监控器的邮件和 webhook 通知渠道。渠道按监控器分组，并显示它们被配置为触发的事件（故障、恢复、降级）。 ### 标签 创建和删除标签。标签在“监控详情”页面附加到单个监控器或从其分离。

标签：ApexCharts, Pinia, Vue 3, 事件历史, 仪表板, 响应式设计, 响应时间图表, 图表库, 多引擎聚合, 实时数据, 实时状态, 应用监控, 数据导出, 标签管理, 正常运行时间监控, 状态监控, 状态管理, 用户认证, 监控列表, 监控工具, 监控系统, 监控详情, 移动响应式, 网站监控, 自动刷新, 通知管理