[开源] Komari Horizon 主题｜高密度节点卡片、流量周期校准、延迟丢包可视化

🌌 Horizon｜一款高密度控制台风格的 Komari 主题

做了一套自己比较喜欢的主题 Horizon，开源分享给大家。

在保持信息密度的同时，尽量兼顾桌面端和移动端的使用体验。

项目基于原生 HTML / CSS / JavaScript，无须额外构建，支持通过 Komari 后台直接上传安装。

🔗 项目地址

GitHub： https://github.com/Dowsion-dev/Komari-Theme-Horizon

在线演示： https://demos.dowsion.com

Releases： https://github.com/Dowsion-dev/Komari-Theme-Horizon/releases

演示站提供 15 台模拟节点，涵盖 CN / HK / JP / US / DE 等地区，并按照线路机、落地机、家宽分组。

所有监控数据均为浏览器内模拟，不是真实服务器数据。可以直接体验节点卡片、详情图表及主题设置。

如果觉得还不错，欢迎点个 ⭐ Star 支持一下。

✨ 主要功能

1️⃣ 高密度节点卡片

Horizon 的主要设计方向是：尽可能在有限空间内展示更多信息，同时保持可读性。

提供两种卡片模式：

• 标准卡片：展示更完整的服务器状态。
• 小卡片：适合 VPS 数量较多、希望一屏看到更多节点的场景。

卡片支持显示：

• CPU / 内存 / 硬盘使用率
• 实时上传、下载速度
• 累计流量与周期流量
• 系统、架构、虚拟化信息
• Swap、系统负载
• TCP / UDP 连接数
• 在线时长
• 流量重置倒计时
• 服务器价格、到期时间
• 延迟探针及最近 10 次检测结果

桌面端和移动端可以分别设置默认卡片模式，也可以调整卡片密度。

2️⃣ 集群总览

首页顶部提供集群整体运行状态，包括：

• 在线节点统计
• CPU / 内存 / 硬盘
• 实时网络速率
• 周期流量
• 服务器剩余价值

支持显示文字评级，并提供通用、修仙及自定义评级名称。

节点数量比较多时，不需要逐台查看，也能快速了解整体情况。

3️⃣ 流量周期统计与校准

这是开发时比较关注的一项功能。

部分 VPS 的流量重置日并不是每月 1 日，不同商家的计费周期也不完全一样。

另外，服务器重启、探针计数归零等情况，也可能造成流量统计不连续。

Horizon 提供两种统计模式：

① 探针计数模式

直接展示 Komari 探针上报的累计流量。

② 按重置日统计模式

按照自定义流量重置日计算当前周期用量，支持计数器归零后的分段累计。

同时支持：

• 每台服务器独立设置重置日
• 每月固定日期重置
• 跟随账单到期日
• 自定义统计时区
• 设置当前已使用流量
• 手动校准或清零
• 流量重置倒计时
• 管理员自动存档（可选）

需要注意：统计精度仍然取决于 Komari 保存的历史数据。历史记录不足时，主题会使用 ≈ 标记近似值。

4️⃣ 延迟监控与丢包可视化

支持在节点卡片中直接展示延迟探针。

可以自定义：

• 每张卡片显示的探针数量
• 默认显示哪些线路
• 为单台服务器指定探测点
• 延迟颜色阈值
• 丢包标记样式
• 丢包虚线透明度

历史延迟图支持使用竖向虚线标记丢包，并可控制是否连接数据断点。

对于经常关注 VPS 线路质量的用户，可以更直观地查看延迟变化和丢包情况。

5️⃣ 节点历史图表

点击节点可以查看详细监控数据，包括：

• CPU
• 内存
• 网络 RX / TX
• 系统负载
• 硬盘使用情况
• 延迟探针
• 心跳日志

历史时间范围：

1h / 8h / 24h / 7d

网络图采用 RX / TX 镜像展示，便于区分上下行流量。

6️⃣ 筛选、分组与排序

支持按照地区、分组筛选节点。

排序维度包括：

名称 / 地区 / CPU / 内存 / 硬盘 / 网络速率 / 流量 / 在线时长 / 价格 / 到期时间

同时支持：

• 自定义分组显示顺序
• 按分组分段展示节点
• 设置默认排序
• 隐藏指定节点
• 控制访客是否能够切换排序

比较适合拥有多台 VPS、不同地区落地机和线路机的用户。

7️⃣ 外观自定义

提供浅色、深色以及跟随系统三种外观模式。

支持自定义：

• 站点名称与 Logo
• 顶部标签
• 桌面端 / 移动端背景图片
• 浅色 / 深色独立背景
• 桌面视频背景
• 卡片透明度
• 页面布局与卡片密度

另外也添加了一些背景动效：

🌸 樱花飘落
🌧️ 细雨
❄️ 缓雪
🍂 秋叶
🎊 庆典彩纸
🎆 烟花

移动端会自动减少粒子数量。

不喜欢动效的话，直接关闭即可。

8️⃣ 服务器花费与剩余价值

除了监控资源使用情况，也可以显示服务器的账单信息。

支持：

• 服务器价格及到期时间
• 剩余价值统计
• 不同货币折算
• 到期提醒
• 忽略指定计费节点
• 向访客隐藏费用信息

汇率默认使用 frankfurter，支持结果缓存和失败回退。

费用信息也可以设置为仅管理员可见。

⚙️ 主题设置

Horizon 提供独立的主题管理界面。

登录 Komari 管理员账号后，可以通过首页右上角的 ⚙️ 进入。

也可以直接访问：

/?view=theme-manage

设置内容分为十个部分：

管理员保存后，主题设置会保存到 Komari，并对访客生效。

支持导出 / 导入 JSON，方便备份或者迁移设置。

📦 安装方法

安装比较简单，不需要自行编译。

1. 下载主题

前往项目 Releases 页面，下载对应版本的主题 ZIP 安装包：

https://github.com/Dowsion-dev/Komari-Theme-Horizon/releases

2. 上传主题

进入 Komari 后台：

设置 → 主题 → 上传主题 ZIP

选择 Horizon 并启用。

3. 自定义主题

登录管理员账号，进入首页右上角的齿轮设置页面。

按自己的需要调整布局、背景、流量统计方式等。

如果站点使用 Cloudflare 等 CDN，主题资源带有版本参数，方便升级后刷新静态文件缓存。

📱 移动端适配

桌面端和移动端使用不同的默认卡片配置。

移动端信息块会根据卡片宽度自适应排列。

另外针对 iOS Safari 的实时刷新进行了处理，尽量避免监控数据更新时页面自动滚动的问题。

📝 说明

• Horizon 是 Komari Monitor 的第三方前端主题。
• 主要功能依赖 Komari 提供的监控数据及接口。
• 流量周期计算结果受历史数据保留时间影响。
• Demo 使用模拟数据，不代表真实服务器运行情况。
• 项目采用 MIT License 开源。

目前主要按照自己的使用习惯开发，难免存在一些没有考虑周全的地方。

如果遇到 Bug、兼容性问题，或者有什么功能建议，欢迎在 GitHub Issues 反馈。

❤️ 最后

做这个主题的初衷比较简单：

欢迎大家试用、提意见。

后续会根据实际使用情况继续完善。

GitHub： https://github.com/Dowsion-dev/Komari-Theme-Horizon

Demo： https://demos.dowsion.com

觉得有用的话，欢迎给项目点个 Star ⭐

感谢支持！