Skip to content

Commit efb2768

Browse files
cpplacppla
committed
1.1.9
1 parent a8fc0b8 commit efb2768

3 files changed

Lines changed: 39 additions & 82 deletions

File tree

‎web/css/app.css‎

Lines changed: 28 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -23,62 +23,20 @@ a:hover{color:var(--accent-glow)}
2323
table.data{width:100%;border-collapse:separate;border-spacing:0;min-width:960px}
2424
table.data thead th{position:sticky;top:0;background:var(--surface-soft);font-weight:700;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);padding:.7rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
2525
table.data tbody td{padding:.55rem .75rem;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;white-space:nowrap}
26-
/* 防止数值变化导致列抖动：为月流量(7)/当前网络(8)/总流量(9)设置固定宽度并使用等宽数字 */
26+
/* 防止数值变化导致列抖动 */
2727
table.data th,table.data td{font-variant-numeric:tabular-nums}
28-
/* 月流量(2) 左对齐；当前网络(8)/总流量(9) 居中 */
29-
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){
30-
/* 月流量列：向左贴近协议（减小左 padding），同时加大右 padding 拉开与节点距离 */
31-
width:128px;min-width:128px;max-width:128px;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center;padding:0 1.05rem 0 .15rem;
32-
}
33-
/* 节点列加宽，避免被月流量胶囊视觉挤压 */
34-
#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){
35-
width:160px;min-width:160px;max-width:160px;
36-
}
37-
/* 协议列继续收紧右侧 padding 与固定宽度 */
38-
#serversTable thead th:nth-child(1),#serversTable tbody td:nth-child(1){
39-
padding-right:.14rem;width:78px;min-width:78px;max-width:78px; /* 扩大协议列并恢复适度间距 */
40-
}
41-
/* 让双色胶囊更靠近协议列 */
42-
#serversTable tbody td:nth-child(2) .caps-traffic.duo{margin-left:-6px;} /* 向协议方向微移，视觉更靠近；右侧 padding 增大避免靠近节点 */
43-
#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8),
44-
#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){
45-
width:132px;min-width:132px;max-width:132px;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center;
46-
/* 进一步拉开与 CPU/内存/硬盘 组的视觉距离 */
47-
padding-right:1.95rem;
48-
}
49-
/* CPU / 内存 / 硬盘 列：居中 + 固定宽度 与仪表盘一致 */
50-
#serversTable thead th:nth-child(10),#serversTable tbody td:nth-child(10),
51-
#serversTable thead th:nth-child(11),#serversTable tbody td:nth-child(11),
52-
#serversTable thead th:nth-child(12),#serversTable tbody td:nth-child(12){
53-
width:70px;min-width:70px;max-width:70px;text-align:center;padding-left:1.1rem;padding-right:0; /* 继续右移并贴近右侧列 */
54-
}
5528
/* 月流量胶囊 */
5629
.caps-traffic{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);padding:3px 12px 3px 10px;border-radius:999px;font-size:12px;line-height:1;font-weight:500;position:relative;box-shadow:0 2px 4px -2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03);}
5730
.caps-traffic:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 70%);pointer-events:none;}
58-
.caps-traffic .io{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums;letter-spacing:.3px;}
59-
.caps-traffic .io.in{color:var(--ok);}
60-
.caps-traffic .io.out{color:var(--accent);}
61-
.caps-traffic .sep{opacity:.4;font-size:11px;display:none;}
6231
.caps-traffic.sm{padding:2px 8px 2px 7px;font-size:11px;gap:5px;}
63-
.caps-traffic.sm .io{font-size:11px;}
6432
/* 双色胶囊 */
6533
.caps-traffic.duo{background:none;border:0;gap:0;padding:0;box-shadow:none;position:relative;border-radius:999px;overflow:hidden;font-size:12px;}
66-
/* 宽度按内容自适应（不再拉伸占满列），每半边仅为其文本 + padding，可容纳最大 111.1MB */
34+
/* 宽度按内容自适应，每半边仅为其文本 + padding */
6735
.caps-traffic.duo .half{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:2px 4px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.25; /* 与 .pill 保持一致高度 */ letter-spacing:.25px;color:#fff;font-size:12px;white-space:nowrap;}
68-
/* 双色胶囊配色：
69-
normal (默认): 左绿右蓝
70-
heavy (>=1000GB 总量): 黄色提醒，不再使用故障红
71-
*/
72-
/* normal 初始：淡绿色(入) + 淡蓝色(出) */
7336
.caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;} /* emerald-100 / text-emerald-800 */
74-
body.light .caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;}
7537
.caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;} /* blue-200 / text-blue-900 */
76-
body.light .caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;}
77-
7838
.caps-traffic.duo.heavy .half.in{background:#fde68a;color:#78350f;}
79-
body.light .caps-traffic.duo.heavy .half.in{background:#fde68a;color:#78350f;}
8039
.caps-traffic.duo.heavy .half.out{background:#fbbf24;color:#111827;}
81-
body.light .caps-traffic.duo.heavy .half.out{background:#fbbf24;color:#111827;}
8240

8341
/* 半之间分隔线 */
8442
.caps-traffic.duo .half + .half{border-left:1px solid rgba(0,0,0,.18);}
@@ -108,16 +66,6 @@ table.data tbody tr:hover{background:rgba(59,130,246,.045)}
10866
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .75rem;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);border-radius:10px}
10967
.kv span{white-space:nowrap}
11068
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
111-
/* 资源使用百分比色彩标签 */
112-
/* 回退：移除资源使用百分比彩色标签样式 */
113-
114-
/* 详情弹窗三列信息行 */
115-
116-
/* 旧 spark 样式已移除，现使用半圆仪表盘 */
117-
/* 全圆旧样式（保留以便回退） */
118-
.gauge{--p:0;--col:var(--accent);width:74px;height:74px;position:relative;display:grid;place-items:center;font-size:11px;font-family:ui-monospace,monospace;font-weight:600;color:var(--text);}
119-
.gauge:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--col) calc(var(--p)*1turn),rgba(255,255,255,0.06) 0);mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);border:1px solid var(--border);box-shadow:0 2px 6px -2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);}
120-
.gauge span{position:relative;z-index:1}
12169

12270
/* 半圆仪表盘 */
12371
.gauge-half{--p:0;width:60px;height:34px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-family:ui-monospace,monospace;font-size:10px;font-weight:600;gap:0;color:var(--text);}
@@ -131,19 +79,25 @@ table.data tbody tr:hover{background:rgba(59,130,246,.045)}
13179
/* 阈值颜色：CPU>=75%、内存>=80%、硬盘>=85% 警告黄，>=90% 危险红 */
13280
.gauge-half[data-warn] path.arc{stroke:var(--warn)}
13381
.gauge-half[data-bad] path.arc{stroke:var(--danger)}
134-
/* 指针：以中心(50,50)为原点旋转；半圆角度范围 180deg -> 从 180deg (左) 到 0deg(右) */
13582
.gauge-half span{line-height:1;position:relative;top:-6px;font-size:12px;}
13683
/* 亮色模式细化对比度 */
13784
body.light .gauge-half path.track{stroke:color-mix(in srgb,var(--text-dim) 28%,transparent)}
13885
body.light .gauge-half path.arc{filter:none}
139-
body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text-dim))}
14086

14187
/* status pill */
14288
.pill{display:inline-block;padding:2px 8px;font-size:12px;font-weight:600;border-radius:999px;letter-spacing:.45px;min-width:48px;text-align:center;line-height:1.25;border:0;box-shadow:0 2px 4px -1px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);transition:var(--trans);color:#fff}
14389
.pill.on{background:var(--ok)}
14490
.pill.off{background:var(--danger)}
14591
.pill.on:hover{filter:brightness(1.1)}
14692
.pill.off:hover{filter:brightness(1.1)}
93+
.proto-signal{display:inline-grid;grid-template-columns:1fr 1fr;width:18px;height:18px;border-radius:50%;overflow:hidden;vertical-align:middle;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);box-shadow:0 2px 5px -2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
94+
.proto-signal i{display:block;min-width:0;background:color-mix(in srgb,var(--text-dim) 42%,var(--bg-alt));}
95+
.proto-signal[data-v4="1"] .v4,.proto-signal[data-v6="1"] .v6{background:#22c55e}
96+
.proto-signal[data-state="ipv4"] .v4{background:#22c55e}
97+
.proto-signal[data-state="ipv6"] .v6{background:#22c55e}
98+
.proto-signal[data-state="offline"] .v4,.proto-signal[data-state="offline"] .v6{background:var(--danger)}
99+
body.light .proto-signal{border-color:color-mix(in srgb,var(--border) 92%,#94a3b8);box-shadow:0 1px 3px rgba(15,23,42,.12)}
100+
body.light .proto-signal i{background:#cbd5e1}
147101
.virt-pill{--virt:var(--accent);display:inline-flex;align-items:center;justify-content:center;min-width:50px;padding:2px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--virt) 42%,var(--border));background:color-mix(in srgb,var(--virt) 14%,var(--bg-alt));color:color-mix(in srgb,var(--virt) 72%,#fff);font-size:12px;font-weight:650;line-height:1.2;letter-spacing:.25px;white-space:nowrap}
148102
body.light .virt-pill{background:color-mix(in srgb,var(--virt) 12%,#fff);color:color-mix(in srgb,var(--virt) 68%,#111827)}
149103
.node-name{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:750;letter-spacing:.15px;color:var(--text)}
@@ -163,12 +117,6 @@ body.light .load-core-bubble{background:color-mix(in srgb,var(--accent) 8%,#fff)
163117
.bucket label{position:absolute;left:0;right:0;bottom:2px;font-size:10px;text-align:center;color:var(--text-dim);pointer-events:none}
164118
.bucket:hover label{color:var(--text)}
165119

166-
/* 居中联通电信移动列 */
167-
#serversTable thead th:last-child, #serversTable tbody td:last-child { text-align:center; }
168-
/* 放大第13列宽度以容纳更宽水桶 */
169-
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){
170-
width:150px;min-width:150px;max-width:150px;padding-left:0;padding-right:.55rem; /* 去除左 padding 进一步贴近 */
171-
}
172120
/* 调整“总流量”表头（第9列）padding 使标题文字居中，不受正文额外右 padding 影响 */
173121
#serversTable thead th:nth-child(9){padding-left:.75rem;padding-right:.75rem;}
174122
.buckets{justify-content:center}
@@ -205,37 +153,38 @@ body.light .load-core-bubble{background:color-mix(in srgb,var(--accent) 8%,#fff)
205153
.modal-content{max-height:65vh;overflow:auto;}
206154
}
207155

208-
/* SSL 表（证书）列宽与换行修正，避免复用服务器列宽导致名称与域名重叠 */
209-
#sslTable th,#sslTable td{white-space:nowrap;padding:.55rem .75rem;}
210-
#sslTable th:nth-child(1),#sslTable td:nth-child(1){width:140px;min-width:120px;}
211-
/* 域名允许换行以防过长挤压 */
212-
#sslTable th:nth-child(2),#sslTable td:nth-child(2){white-space:normal;max-width:320px;overflow-wrap:anywhere;}
213-
214-
/* === 覆盖：要求三个表 (servers / monitors / ssl) 全部改为自动宽度 === */
215-
/* 1. 取消全局 table.data 的 min-width 对这三个表的影响 */
156+
/* 三个数据表使用自动宽度，按关键列单独约束 */
216157
#serversTable,#monitorsTable,#sslTable{min-width:0;}
217-
/* 2. 统一去除之前为 serversTable 设定的列固定宽度，允许浏览器自动分配 */
218158
#serversTable thead th,#serversTable tbody td,
219159
#monitorsTable thead th,#monitorsTable tbody td,
220160
#sslTable thead th,#sslTable tbody td{
221161
width:auto!important;min-width:0!important;max-width:none!important;
222162
padding:.55rem .7rem;
223163
}
224-
/* 3. 允许证书域名不受 max-width 限制（如仍需换行可保留 overflow-wrap） */
225164
#sslTable th:nth-child(2),#sslTable td:nth-child(2){max-width:none;white-space:normal;overflow-wrap:anywhere;}
226-
/* 4. 取消“联通|电信|移动”列固定宽度 */
227-
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){width:auto!important;min-width:0!important;}
228-
/* 5. 如需稍微限制仪表盘相关列最小可读宽度，可设定一个较小下限 (可选) -- 暂不设置，完全交由自动布局 */
165+
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){width:112px!important;min-width:112px!important;max-width:112px!important;padding-left:0!important;padding-right:0!important;text-align:center;}
229166

230-
/* === 新增：为“月流量 / 当前网络 / 总流量”三列设置最小宽度，防止内容被压缩换行或挤压 === */
231-
/* 目标最小宽度按示例 "111.1GB|111.1GB" 设计（13 个字符左右），取 16ch 留余量 */
232-
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2),
233167
#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8),
234168
#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){
235-
min-width:22ch !important; /* 保留自动宽度，但不小于此值 */
169+
min-width:20ch !important; /* 保留自动宽度，但不小于此值 */
236170
text-align:center;
237171
font-variant-numeric:tabular-nums;
238172
}
173+
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){
174+
width:134px!important;min-width:134px!important;max-width:134px!important;text-align:center;padding-left:.35rem!important;padding-right:.35rem!important;font-variant-numeric:tabular-nums;
175+
}
176+
#serversTable thead th:nth-child(1),#serversTable tbody td:nth-child(1){
177+
width:46px!important;min-width:46px!important;max-width:46px!important;text-align:center;padding-left:0!important;padding-right:0!important;
178+
}
179+
#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){
180+
text-align:left;padding-left:18px!important;
181+
}
182+
#serversTable tbody td:nth-child(13) .buckets{
183+
min-width:112px;
184+
gap:6px;
185+
margin:0 auto;
186+
justify-content:center;
187+
}
239188
.cards .card{border:1px solid var(--border);border-radius:12px;padding:.75rem .85rem;background:linear-gradient(145deg,var(--bg),var(--bg-alt));display:flex;flex-direction:column;gap:.45rem;position:relative;}
240189
.cards .card.offline{filter:saturate(.92);}
241190
.cards .card.alert-critical{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.12)), var(--bg-alt);box-shadow:0 0 0 1px rgba(239,68,68,.48),0 6px 18px -6px rgba(239,68,68,.28);}

‎web/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="description" content="云监控,ServerStatus中文版,ServerStatus,ServerStatus cppla" />
77
<title>云监控</title>
88
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
9-
<link rel="stylesheet" href="css/app.css?v=20260709-2" />
9+
<link rel="stylesheet" href="css/app.css?v=20260709-18" />
1010
</head>
1111
<body>
1212
<header class="topbar">
@@ -200,6 +200,6 @@ <h3 id="detailTitle" class="modal-title">节点详情</h3>
200200
<a href="https://github.com/cppla/ServerStatus" target="_blank" rel="noopener">ServerStatus中文版</a>
201201
</footer>
202202

203-
<script src="js/app.js?v=20260709-2" defer></script>
203+
<script src="js/app.js?v=20260709-18" defer></script>
204204
</body>
205205
</html>

‎web/js/app.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,14 @@ function protoPill(s){
357357
const proto = m.online ? (s.online4 && s.online6 ? '双栈' : (s.online4 ? 'IPv4' : 'IPv6')) : '离线';
358358
return `<span class="pill ${m.online ? 'on' : 'off'}">${proto}</span>`;
359359
}
360+
function protoSignal(s){
361+
const m = metrics(s);
362+
const v4 = m.online && !!s.online4;
363+
const v6 = m.online && !!s.online6;
364+
const state = !m.online ? 'offline' : (v4 && v6 ? 'dual' : (v4 ? 'ipv4' : 'ipv6'));
365+
const label = !m.online ? '离线' : (v4 && v6 ? '双栈在线' : (v4 ? 'IPv4 在线' : 'IPv6 在线'));
366+
return `<span class="proto-signal" data-state="${state}" data-v4="${v4 ? 1 : 0}" data-v6="${v6 ? 1 : 0}" aria-label="${esc(label)}"><i class="v4"></i><i class="v6"></i></span>`;
367+
}
360368
const VIRT_PALETTE = ['#06b6d4','#8b5cf6','#10b981','#f59e0b','#3b82f6','#14b8a6','#6366f1','#a855f7','#22c55e','#eab308'];
361369
function stableHash(value){
362370
let hash = 2166136261;
@@ -454,7 +462,7 @@ function serverRowHTML(s, m, signature){
454462
const netTotal = `${humanMinMBFromB(s.network_in)} | ${humanMinMBFromB(s.network_out)}`;
455463
const alertClass = m.rowLevel ? ` alert-${m.rowLevel}` : '';
456464
return `<tr data-key="${esc(s._key)}" data-online="${m.online ? 1 : 0}" data-sig="${esc(signature)}" class="row-server${alertClass}${osClass(s.os)}" style="cursor:${m.online ? 'pointer' : 'default'};">
457-
<td>${protoPill(s)}</td>
465+
<td>${protoSignal(s)}</td>
458466
<td>${trafficCaps(s)}</td>
459467
<td><span class="node-name" title="${esc(s.name || '-')}">${esc(s.name || '-')}</span></td>
460468
<td>${virtPill(s.type)}</td>

0 commit comments

Comments
 (0)