From 007c9bccd55e968b3f9c1c17c5ae30c0e6c939b2 Mon Sep 17 00:00:00 2001 From: cppla Date: Tue, 7 Jul 2026 16:52:04 +0800 Subject: [PATCH] new style --- web/css/app.css | 6 ++++++ web/index.html | 4 ++-- web/js/app.js | 7 ++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/web/css/app.css b/web/css/app.css index abaaa71..4949408 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -146,6 +146,12 @@ body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text .pill.off{background:var(--danger)} .pill.on: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} +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} /* buckets CU/CT/CM (simple version) */ .buckets{display:flex;align-items:flex-end;gap:8px;min-width:140px} diff --git a/web/index.html b/web/index.html index 64c1fff..7c68da6 100644 --- a/web/index.html +++ b/web/index.html @@ -6,7 +6,7 @@ 云监控 - +
@@ -200,6 +200,6 @@ ServerStatus中文版 - + diff --git a/web/js/app.js b/web/js/app.js index 65fb7dc..482fd2a 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -267,6 +267,11 @@ function protoPill(s){ const proto = m.online ? (s.online4 && s.online6 ? '双栈' : (s.online4 ? 'IPv4' : 'IPv6')) : '离线'; return `${proto}`; } +function virtPill(type){ + const text = String(type || '-'); + const key = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'unknown'; + return `${esc(text)}`; +} function trafficCaps(s, small){ const m = metrics(s); const heavy = m.traffic >= 1000 * 1000 * 1000 * 1000; @@ -338,7 +343,7 @@ function renderServers(){ ${protoPill(s)} ${trafficCaps(s)} ${esc(s.name || '-')} - ${esc(s.type || '-')} + ${virtPill(s.type)} ${esc(s.location || '-')} ${esc(s.uptime || '-')} ${s.load_1 === -1 ? '–' : num(s.load_1).toFixed(2)}