Upscuits 自定义指南：状态图标与告警样式，十分钟改出专属监控页

Upscuits 自定义指南：状态图标与告警样式，十分钟改出专属监控页

【免费下载链接】ZeroBot-Plugin基于 ZeroBot 的 OneBot 插件项目地址: https://gitcode.com/GitHub_Trending/ze/ZeroBot-Plugin

你见过太多长得一模一样的监控页了。Upscuits 把服务器状态挂到一个干净的网页上，但你打开它，绿点、红点、黄点，跟你昨天部署的那套没任何区别。问题不在功能，而在于它不像「你的」。这篇 Upscuits 自定义指南只讲三件事：换掉默认的服务器状态图标、重新给状态与告警样式配色、以及一次性整站换肤。改完再编译上线，十分钟。

默认页不是不能用，是太素。当你要把监控页给客户看、挂团队大屏、或者纯粹想让它贴住品牌色，这套流程就值回票价。

样式源码在哪：改这里，升级才不丢

先分清一件事：你动的是源码，不是产物。

样式存两处。产物在public/css/下，upscuits.css和upscuits.min.css都是编译出来的，浏览器吃的是这俩。别碰它——版本一升级就被覆盖。

真正的工作区在source/less/。LESS 写在这里，编译后输出到public/css/。前端逻辑另有public/js/upscuits.js和source/js/upscuits.js，但今天只动样式，JS 先放一边。

记住这条铁律：只改source/less/，绝不手改public/css/。改对地方，升级不丢；改错地方，白干。

图标篇：三步换掉默认状态图标 🎨

Upscuits 用 Font Awesome 图标标状态：在线一个勾，离线一个叉，告警一个三角。想换，动的是source/less/icons.less。

目标：定位图标定义。里面是这样的——

.server-online { color: @online-color; .fa-check-circle; }

每个状态挂了一个.fa-xxx类，颜色走变量。图标就藏在那行.fa-check-circle里。

操作：替换图标类。把.fa-check-circle换成你要的，Font Awesome 给得不少——.fa-server服务器、.fa-cloud云、.fa-database数据库。在线、离线各挑一个就行，改哪几个状态就动哪几个类，别全删。

效果：在线从「勾」变「服务器」，离线从「叉」变「云」。颜色不用管，它还挂在@online-color那套变量上，下一节单独调。

配色篇：状态色与告警色一次讲清

状态色在source/less/variables.less，四个变量管四种状态：

@online-color: #5cb85c; // 在线，绿 @offline-color: #d9534f; // 离线，红 @warning-color: #f0ad4e; // 告警，黄 @unknown-color: #777777; // 未知，灰

想低调，把在线从绿改成品牌色；想让人一眼扫到告警，把@warning-color换成#ff7f00橙。改变量就够了——图标、面板、文字全跟着走，因为它们的color都指向这几个变量。

⚠️ 告警通知的样式在source/less/alerts.less。边框、阴影、圆角、内边距都在那，长这样：

.alert-warning { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; }

改边框粗细动border，加阴影补box-shadow，要更圆调border-radius。状态色管「是什么状态」，告警样式管「有多显眼」，两条线各管各的。

进阶篇：新建主题文件，一次换掉整站皮肤

前面是点状修改，逐个变量、逐个类地动。想一次定调，就建个自己的主题文件。

在source/less/下新建custom-theme.less，把整站想覆盖的样式都写进去：主色、背景、字体、间距。然后在source/less/upscuits.less末尾引一下：

@import "custom-theme.less";

放末尾是刻意的。LESS 按引入顺序生效，后写的盖住先写的；你的主题垫在最后，就等于压过默认样式。以后想微调整站外观，只动这一个文件，主文件不用碰。

编译、检查产物与上线

改完了还不能直接用。LESS 是源码，得先编译成 CSS。

项目根目录跑：

grunt less

Gruntfile.js里配好了任务。这条命令把source/less/全量编译，输出到public/css/upscuits.css和upscuits.min.css。

常见坑

• 改错了文件。手改了public/css/的产物，升级即丢。只动source/less/。
• 忘了编译。改完 LESS 直接刷新，纹丝不动——浏览器吃的是旧 CSS。每次改完必跑grunt less。
• 主题没盖住。@import加在upscuits.less开头，你的样式就被默认盖回去了。放末尾。
• 图标类拼错。.fa-cloud写成.fa-clouds，不报错但不显示。对着文档核一遍。

继续深入

• 配色集中：把@online-color那几个变量抽到单独一个文件，全项目统一改一处。
• 响应式：在alerts.less里加@media，大小屏用不同的内边距和字号。
• 多套主题：复制几份custom-theme.less，按客户或环境切换。
• 产物核对：编译后diff一下upscuits.css，确认改动确实进去了再推上线。

改完、编译、核对产物、推上线。监控页从此是你的。

【免费下载链接】ZeroBot-Plugin基于 ZeroBot 的 OneBot 插件项目地址: https://gitcode.com/GitHub_Trending/ze/ZeroBot-Plugin