小米路由器WEB端功能优化
为小米 / 红米路由器 Web 管理后台补充官方缺失的实时网速可视化功能。
纯前端展示,不改动路由器任何配置,不上传任何数据。
这个脚本解决什么问题
小米路由器后台虽然稳定,但数据展示有几个不便:
- 实时网速需要逐个点开设备才能看到,无法在设备列表里横向对比
- 看不到整体网速的历史趋势,只能看到"此刻"的数字
- 设备列表里没有"谁在占带宽"的直观感受
本脚本把这三件事补上,并且沿用页面自身的区块样式,看起来像是原生功能。
功能一览
脚本按后台顶部的三个标签页分化,每个页面只显示属于它的功能,互不干扰。
终端设备页(#devices)
在每台设备名称右侧显示实时数据:
- 实时上行 / 下行网速,随页面每秒刷新
- 占全网比例(如
9.69%),并以半透明进度条填充徽标背景,一眼看出谁在占带宽
- 上行为橙红、下行为蓝,与下方折线图配色一致

路由器页(#router)
新增「路由器状态」面板,一屏看清路由器自身状况:
- 内存占用——百分比 + 总量,带进度条,占用超过 60% 变橙、超过 85% 变红
- 运行时长——自动格式化为「3 天 12 小时」
- 外网累计流量——上下行总吞吐量

互联网页(#internet)
新增「实时网速」面板,用折线图展示网速趋势:
- 上下行双曲线,滚动窗口 120 秒(约 2 分钟)
- 曲线下方带半透明面积填充,趋势更直观
- 鼠标悬停在图上,会显示竖向指示线 + 曲线高亮点 + 数值浮层,可查看任意时刻的上下行速度
- 图例实时显示当前速度,Y 轴刻度自适应取整

界面细节
- 沿用页面原生结构:所有区块使用和「网线连网设备」完全相同的表格结构与标题样式,标题字号、下划线分隔线、上下留白全部一致
- 配色统一:所有强调色取自路由器后台首页的 5 个功能按钮(Wi-Fi设置蓝、上网设置紫、安全中心绿、局域网设置橙红、系统状态琥珀),风格统一

- 图标为内联矢量图:上下行箭头使用内联 SVG 与纯 CSS 绘制,不引入任何外部字体或图片
- 零外部依赖:不加载任何第三方库,不与任何外部服务器通信
兼容性
适用:运行 MiWiFi 固件的小米 / 红米路由器 Web 管理后台
(地址形如 http://192.168.x.x/cgi-bin/luci/;stok=.../web/home)
已实测:小米 CR8808(中国移动定制版固件)
需要:已安装用户脚本管理器(Tampermonkey / 篡改猴、Violentmonkey、脚本猫 ScriptCat 等)
使用方法
- 安装用户脚本管理器
- 安装本脚本
- 打开路由器后台并登录,刷新页面
- 点击顶部标签页切换,即可看到对应页面的增强内容
隐私说明
- 所有数据均来自路由器本地 API(
/cgi-bin/luci/;stok=.../api/...)
- 不向任何外部服务器发送数据
- 不修改路由器任何配置,纯前端展示层增强
- 脚本不含任何追踪、广告或统计代码
出处与致谢
本脚本基于 iccfish(木鱼) 的《小米路由器Web管理后台实时网速显示脚本》开发:
https://blog.iccfish.com/2024/03/11/小米路由器web管理后台实时网速显示脚本/
原脚本实现了「设备列表显示实时网速」这一核心思路,本脚本在此基础上做了较大改造:
按标签页分化功能、新增折线图与悬停查看、新增路由器状态面板、统一配色、适配固件差异等。
感谢原作者的创意与开源分享。