Kuma Mieru - 一款基于 Next.js 15 的 Uptime Kuma 仪表盘插件
Kuma Mieru 是一款基于 Next.js 15、TypeScript 和 Recharts 构建的第三方 Uptime Kuma 监控仪表盘。
本项目使用 Recharts 解决了 Uptime Kuma 内建公开状态页面不够直观、没有延迟图表等痛点。
WARNING
新版 (v1.1.4+) 重构了时间处理逻辑，请注意修改 Uptime Kuma 后台设置的 Display Timezone (显示时区) 为 UTC+0 时区。
| Release | License | Release Status | Docker Status |
|---|---|---|---|
 |  |  |  |
| Language | Framework | Framework |
|---|---|---|
 |  |  |
| Package Manager | Chart Library | CSS Framework |
|---|---|---|
 |  |  |
| Stars | Forks |
|---|---|
 |  |
目录
📜 本文目录
RefID: Q29weS1yaWdodDphcmNoaXZlcy90ZWNobm9sb2d5L2t1bWEtbWllcnUtaW50cm9kdWN0aW9uIHwgIGhhdHMtbGFuZCBtZW51
功能亮点 ✨
- 实时监控，自动刷新 🔃：状态显示实时更新，无需手动刷新，随时掌握最新动态。
- 美观响应式界面 🎨：采用 HeroUI 组件 构建，界面更加现代，完美适配各种设备屏幕。
- 交互式图表 📈：利用 Recharts 图表库实现数据可视化，可以 交互式 地查看各节点的延迟、状态等数据。
- 多主题支持 💡：提供 暗色 / 亮色 / 系统 多种主题，满足不同偏好。
- 维护公告：支持 Uptime Kuma 的 事件公告 和 状态更新 特性，实时同步更高效。
测试截图 📷
| Dark Mode | Light Mode |
|---|---|
 |  |
快速部署 ⭐
使用 Vercel 部署 (推荐)
1. Fork 仓库
Fork 本仓库到您的 GitHub 用户下，如图所示：
- 在这里 Fork 本仓库
- 点击
Create fork按钮
NOTE
请确保您 Fork 的仓库是公开的，否则后续可能无法快速同步本仓库的更新。
请放心，您所有的配置均使用环境变量配置，Fork 的代码库 不会泄漏 您的任何配置信息。
2. 导入到 Vercel
进入 https://vercel.com/new ，选择 Import 刚才 Fork 的仓库，如图所示：
3. 配置环境变量
- 点击
Environment Variables添加UPTIME_KUMA_BASE_URL和PAGE_ID两个环境变量，如图所示：
- 点击
Deploy按钮即可一键部署到 Vercel
4. 更新仓库
- 进入你 Fork 的 GitHub 仓库，点击
Sync fork按钮 - 点击
Update branch按钮，即可自动同步本仓库的最新代码
本地部署
只需简单几步，即可快速启动 Kuma Mieru：
克隆仓库
bashgit clone https://github.com/Alice39s/kuma-mieru.git cd kuma-mieru安装依赖
Kuma Mieru 使用 Bun 作为包管理器，您需要先安装 Bun：
bash# Linux/macOS curl -fsSL https://bun.sh/install | bash # Windows powershell -c "irm bun.sh/install.ps1 | iex"然后再安装依赖包：
bashbun install配置环境变量 复制
.env.example文件为.env：bashcp .env.example .env.env文件中 必填 的环境变量，可参考 环境变量配置 章节。启动开发服务器
bashbun run dev访问仪表盘 打开浏览器，访问
http://localhost:3883即可查看您的 Kuma Mieru 监控仪表盘。部署上线
bashbun run build bun run start
Docker 部署 🐳 (Beta)
使用 Docker Compose（推荐）
克隆仓库
bashgit clone https://github.com/Alice39s/kuma-mieru.git cd kuma-mieru配置环境变量 复制
.env.example文件并创建.env文件：bashcp .env.example .env参考 环境变量配置 章节，配置必要的环境变量。
启动服务
bashdocker compose up -dNOTE
如果需要更新镜像，可以添加
--build参数：bashdocker compose up -d --build服务将在
http://0.0.0.0:3883上运行。查看日志
bashdocker compose logs -f
Docker Run 部署
1. 获取容器镜像
从源码构建镜像
docker build -t kuma-mieru .2. 修改环境变量
复制 .env.example 文件并创建 .env 文件：
cp .env.example .env请参考 环境变量配置 章节，修改 .env 文件中的 UPTIME_KUMA_BASE_URL 和 PAGE_ID 变量。
3. 启动容器服务
使用源码构建镜像
docker run -d \
--name kuma-mieru \
-p 3883:3000 \
-e UPTIME_KUMA_BASE_URL="..." \
-e PAGE_ID="..." \
kuma-mieru环境变量配置
假如您的 Uptime Kuma 的状态页面 URL 为 https://example.kuma-mieru.invalid/status/test1，那么您需要配置的环境变量如下：
| 变量名 | 必填 | 说明 | 示例/默认值 |
|---|---|---|---|
| UPTIME_KUMA_BASE_URL | Yes | Uptime Kuma 实例的基础 URL | https://example.kuma-mieru.invalid |
| PAGE_ID | Yes | Uptime Kuma 实例的状态页面 ID | test1 |
| FEATURE_EDIT_THIS_PAGE | No | 是否展示 "Edit This Page" 按钮 | false |
| FEATURE_SHOW_STAR_BUTTON | No | 是否展示 "Star on Github" 按钮 | true |
| FEATURE_TITLE | No | 自定义页面标题 | Kuma Mieru |
| FEATURE_DESCRIPTION | No | 自定义页面描述 | A beautiful and modern uptime monitoring dashboard |
| FEATURE_ICON | No | 自定义页面图标 URL | /icon.svg |
与 Uptime Kuma 集成 🔗
NOTE
经测试，本项目兼容 Uptime Kuma 的最新稳定版本 (v1.23.0+)
如您使用的版本较低，请参考 Uptime Kuma 官方文档 尝试升级到最新稳定版 (v1.23.0+)，注意备份好数据。
Kuma Mieru 与备受好评的开源监控工具 Uptime Kuma 无缝集成，您只需要：
- 安装并配置 Uptime Kuma
- 在 Uptime Kuma 设置中修改
Display Timezone(显示时区) 为任意UTC+0时区 - 在 Uptime Kuma 中创建 "状态页面"
- 在
.env文件中配置环境变量
FAQ ❓
为什么我在 Kuma Mieru 中看到的时间与 Uptime Kuma 中有偏移？
由于 Uptime Kuma 后端传递到前端的时间 没有携带时区信息，为了方便开发，Kuma Mieru 会 自动将时间转换为 UTC+0 时区 并显示。
如果您发现时区偏移，请前往 Uptime Kuma 设置中修改 Display Timezone (显示时区) 为任意 UTC+0 时区。
请问兼容 Uptime Robot / Better Stack / 其他监控数据源吗？
Kuma Mieru 设计之初就是为了解决 Uptime Kuma 的不足，所以 v1 暂时不考虑支持其他监控数据源。
不过 v2 版本可能会考虑支持 Uptime Robot / Better Stack 等其他监控工具的 API 接口。
贡献指南 🤝
非常欢迎您为 Kuma Mieru 项目作出贡献！
如果您有任何想法或建议，请参阅 CONTRIBUTING.md 了解详细的贡献方式。
Star History 🌟
开源许可 🔒
本项目采用 MPL-2.0 (Mozilla Public License Version 2.0) 开源许可证。