哪吒V1探针 周期性流量进度条显示分享

上周在 https://www.nodeseek.com/post-348129-1 分享了周期性流量美化方案，中间过程做了很多变更

1. 增加了流量告警信息的缓存逻辑
2. 优化sectionDetector子节点监听,在切换分组等情况后仍然快速渲染
3. 依据 @chunwai 需求，增加了横向的展示
4. 参考 @超级大大怪 修改，增加了进度条颜色的变化，增加了右上角信息的自动切换展示(统计周期,百分比,下次更新时间)
5. 修改了精准匹配服务器名逻辑, 修复由于模糊匹配导致的多进度条问题
6. 封装为js，减少后台配置

配置流量进度的前提

发现大部分人不了解周期性流量的统计，需要针对机器配置对应统计周期，统计方式，流量总量信息。
可以参考https://nezha.wiki/guide/q6.html 配置, 使用 https://nzcfg.pages.dev/ 进行配置告警信息

后台美化的配置

后面发现配置内容太多了，封装为js进行引入，当前的引用的本人的github地址，建议自定义仓库封装style和script

/* 周期性流量进度条 */
<script>
  window.TrafficScriptConfig = {
    showTrafficStats: true,    // 显示流量统计, 默认开启
    insertAfter: true,         // 如果开启总流量卡片, 是否放置在总流量卡片后面, 默认为true
    interval: 60000,           // 60秒刷新缓存, 单位毫秒, 默认60秒
    toggleInterval: 5000,      // 4秒切换流量进度条右上角内容, 0秒不切换, 单位毫秒, 默认5秒
    duration: 500,             // 缓出缓进切换时间, 单位毫秒, 默认500毫秒
    enableLog: false           // 开启日志, 默认关闭
  };
</script>
<script src="https://cdn.jsdelivr.net/gh/ziwiwiz/nezha-ui@main/traffic-progress.js"></script>

当然也可以使用默认参数直接加入

<script src="https://cdn.jsdelivr.net/gh/ziwiwiz/nezha-ui@main/traffic-progress.js"></script>

github地址

项目地址
脚本大部分使用gpt生成优化，欢迎fork更改进行自定义，同样可以把自己复杂的配置封装为css和js
欢迎继续提出问题探讨，顺便求个鸡腿