spark-store-project/ServerStatus
15
0
Fork 0
mirror of https://github.com//cppla/ServerStatus synced 2026-08-06 10:23:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update
CI / validate (push) Has been cancelled
Details

Browse Source
This commit is contained in:
cppla
2026-07-07 17:39:32 +08:00
parent 03db91c873
commit 6ad3a8c294
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/app.css
-4
View File
@@ -148,10 +148,6 @@ body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text
.pill.off:hover{filter:brightness(1.1)} .pill.off:hover{filter:brightness(1.1)}
.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} .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}
body.light .virt-pill{background:color-mix(in srgb,var(--virt) 12%,#fff);color:color-mix(in srgb,var(--virt) 68%,#111827)} body.light .virt-pill{background:color-mix(in srgb,var(--virt) 12%,#fff);color:color-mix(in srgb,var(--virt) 68%,#111827)}
.virt-kvm{--virt:#06b6d4}
.virt-xen{--virt:#8b5cf6}
.virt-vmware{--virt:#f59e0b}
.virt-hyper,.virt-hyper-v{--virt:#10b981}
.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)} .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)}
.row-server[data-online="0"] .node-name{color:color-mix(in srgb,var(--text) 72%,var(--text-dim));font-weight:650} .row-server[data-online="0"] .node-name{color:color-mix(in srgb,var(--text) 72%,var(--text-dim));font-weight:650}
.row-server:hover .node-name{color:var(--accent)} .row-server:hover .node-name{color:var(--accent)}
web/index.html
+2 -2
View File
@@ -6,7 +6,7 @@
<meta name="description" content="云监控,ServerStatus中文版,ServerStatus,ServerStatus cppla" /> <meta name="description" content="云监控,ServerStatus中文版,ServerStatus,ServerStatus cppla" />
<title>云监控</title> <title>云监控</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg" /> <link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="stylesheet" href="css/app.css?v=20260707-4" /> <link rel="stylesheet" href="css/app.css?v=20260707-5" />
</head> </head>
<body> <body>
<header class="topbar"> <header class="topbar">
@@ -200,6 +200,6 @@
<a href="https://github.com/cppla/ServerStatus" target="_blank" rel="noopener">ServerStatus中文版</a> <a href="https://github.com/cppla/ServerStatus" target="_blank" rel="noopener">ServerStatus中文版</a>
</footer> </footer>
<script src="js/app.js?v=20260707-4" defer></script> <script src="js/app.js?v=20260707-5" defer></script>
</body> </body>
</html> </html>
web/js/app.js
+17 -3
View File
@@ -267,10 +267,24 @@ function protoPill(s){
const proto = m.online ? (s.online4 && s.online6 ? '双栈' : (s.online4 ? 'IPv4' : 'IPv6')) : '离线'; const proto = m.online ? (s.online4 && s.online6 ? '双栈' : (s.online4 ? 'IPv4' : 'IPv6')) : '离线';
return `<span class="pill ${m.online ? 'on' : 'off'}">${proto}</span>`; return `<span class="pill ${m.online ? 'on' : 'off'}">${proto}</span>`;
} }
const VIRT_PALETTE = ['#06b6d4','#8b5cf6','#10b981','#f59e0b','#3b82f6','#14b8a6','#6366f1','#a855f7','#22c55e','#eab308'];
function stableHash(value){
let hash = 2166136261;
const text = String(value || '').trim().toLowerCase();
for(let i = 0; i < text.length; i++){
hash ^= text.charCodeAt(i);
hash = Math.imul(hash, 16777619);
}
return hash >>> 0;
}
function virtColor(type){
const key = String(type || 'unknown').trim().toLowerCase() || 'unknown';
return VIRT_PALETTE[stableHash(key) % VIRT_PALETTE.length];
}
function virtPill(type){ function virtPill(type){
const text = String(type || '-'); const raw = String(type ?? '').trim();
const key = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'unknown'; const text = raw || '-';
return `<span class="virt-pill virt-${esc(key)}" title="虚拟化：${esc(text)}">${esc(text)}</span>`; return `<span class="virt-pill" style="--virt:${virtColor(raw)}" title="虚拟化：${esc(text)}">${esc(text)}</span>`;
} }
function trafficCaps(s, small){ function trafficCaps(s, small){
const m = metrics(s); const m = metrics(s);