guibranco/projects-monitor-ui

# ⚙️ Projects Monitor UI 🔔 [在线演示](https://guilherme.stracini.com.br/projects-monitor-ui/) 一个**现代化的集中式仪表板 UI**，用于监控和管理 GitHub 仓库、个人项目和基础设施的健康状况与状态。 本仓库仅包含**前端部分**——它连接到后端 API（原先打包在原 Projects Monitor 项目中），以提供简洁且交互式的界面。 ## 🌟 功能 ### GitHub 集成 * 查看待处理和开放的 pull request。 * 监控跨仓库的 issues。 * 跟踪 webhook 活动。 * 突出显示 workflow 运行情况，并强调失败记录。 * 跟踪所选项目的 API 使用情况和最新发布版本。 ### 基础设施健康状态 * 查看域名生命周期、DNS 和注册商信息（过期时间、转移状态）。 * 监控来自 **HealthChecks.io**、**UpTimeRobot**、**AppVeyor CI**、**GitHub Actions** 等服务的健康检查。 * 获取 **CloudAMQP** 统计数据：队列、消息、消费者和连接。 ### 日志与错误 * 聚合来自文件系统和 SQL 表的错误日志。 * 通过详细的统计信息和分组选项分析日志。 ### 持续集成与 VPN * 显示 **AppVeyor CI** 构建状态。 * 监控 **WireGuard VPN** 客户端及连接状态。 ## 🛠️ 技术栈 * **前端：** React 19、TypeScript、Tailwind CSS、Lucide Icons * **路由与状态：** React Router，i18next 用于翻译 * **构建工具：** Vite * **代码检查：** 带有 React Hooks 插件的 ESLint **来自 `package.json` 的依赖项亮点：** ``` "dependencies": { "i18next": "^26.0.4", "lucide-react": "^1.8.0", "react": "^19.2.5", "react-dom": "^19.2.5", "react-i18next": "^17.0.2", "react-router-dom": "^7.14.0" } ``` ## ⚡ 快速开始 ### 前置条件 * Node.js ≥ 20 * npm 或 yarn * 来自原 Projects Monitor 项目的 Backend API ### 安装 ``` git clone https://github.com/yourusername/projects-monitor-ui.git cd projects-monitor-ui npm install ``` ### 开发 ``` npm run dev ``` 在浏览器中打开 [http://localhost:5173](http://localhost:5173)。 ### 构建 ``` npm run build ``` ### 预览生产构建 ``` npm run preview ``` ### 代码检查 ``` npm run lint ``` ## 🌐 本地化 完全集成了 **i18next** 以支持多语言仪表板。可在 `src/locales` 中翻译相关字符串。 ## 📌 备注 此 UI **需要后端 API** 才能正常运行。它仅处理前端体验：显示数据、过滤和可视化。 原先合并的 Projects Monitor 项目同时包含前端和后端。 ## 🖼️ 预览  *在线版本：* [projects-monitor-ui](https://guilherme.stracini.com.br/projects-monitor-ui/) ## 📝 许可证 MIT © Guilherme Stracini

标签：AppVeyor, CloudAMQP, GitHub Actions, GitHub监控, Issues追踪, Pull Requests, React, Syscalls, Tailwind CSS, TypeScript, Vite, VPN监控, WireGuard, 仪表盘UI, 健康检查, 前端, 基础设施监控, 多语言支持, 安全插件, 安全测试框架, 开源框架, 开源项目监控, 持续集成, 状态管理, 现代化UI, 监控仪表盘, 自动化攻击, 自动笔记, 错误日志聚合, 项目状态监控, 领域状态监控