From 266230f5f043a7eeda707dacfda214b998fe82b0 Mon Sep 17 00:00:00 2001 From: cppla Date: Tue, 12 Aug 2025 19:04:44 +0800 Subject: [PATCH] update theme --- web/css/app.css | 9 +++++++++ web/index.html | 2 +- web/js/app.js | 40 +++++++++++++++++++++++++--------------- 3 files changed, 35 insertions(+), 16 deletions(-) diff --git a/web/css/app.css b/web/css/app.css index f40aec1..b39fda0 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -22,6 +22,14 @@ a:hover{color:var(--accent-glow)} table.data{width:100%;border-collapse:separate;border-spacing:0;min-width:960px} table.data thead th{position:sticky;top:0;background:var(--bg-alt);font-weight:500;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} table.data tbody td{padding:.55rem .75rem;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;white-space:nowrap} +/* 防止数值变化导致列抖动：为月流量(7)/当前网络(8)/总流量(9)设置固定宽度并使用等宽数字 */ +table.data th,table.data td{font-variant-numeric:tabular-nums} +table.data thead th:nth-child(7),table.data tbody td:nth-child(7), +table.data thead th:nth-child(8),table.data tbody td:nth-child(8), +table.data thead th:nth-child(9),table.data tbody td:nth-child(9){ + width:170px;min-width:170px;max-width:170px;/* 基于最大示例 1111.12GB|1123.12GB 预留空间 */ + font-variant-numeric:tabular-nums;letter-spacing:.3px; +} table.data tbody tr:last-child td{border-bottom:none} table.data tbody tr:hover{background:rgba(255,255,255,.04)} .badge{display:inline-block;padding:2px 6px;font-size:11px;border-radius:12px;font-weight:500;line-height:1.2;background:var(--bg);border:1px solid var(--border);color:var(--text-dim)} @@ -110,6 +118,7 @@ table.data thead th:last-child, table.data tbody td:last-child { text-align:cent .modal-content{max-height:65vh;overflow:auto;} } .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;} +.cards .card.offline{opacity:.6;} .cards .card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;} .cards .card-title{font-weight:600;font-size:.95rem;} .cards .tag{font-size:.65rem;padding:.15rem .4rem;border-radius:4px;background:var(--border);letter-spacing:.5px;} diff --git a/web/index.html b/web/index.html index 8e1abb6..0672859 100644 --- a/web/index.html +++ b/web/index.html @@ -52,7 +52,7 @@ CPU 内存 硬盘 - 联通/电信/移动 + 联通|电信|移动 diff --git a/web/js/app.js b/web/js/app.js index 34d0f9e..47e740a 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -83,7 +83,8 @@ function renderServers(){ function bucket(p){ const v = Math.max(0, Math.min(100, p)); const level = v>=20?'bad':(v>=10?'warn':'ok'); return `
`; } const pingBuckets = `
${bucket(p1)}${bucket(p2)}${bucket(p3)}
`; const key = s.name || s.location || 'node'; - html += ` + const rowCursor = online? 'pointer':'default'; + html += ` ${statusPill} ${s.name||'-'} ${s.type||'-'} @@ -104,6 +105,7 @@ function renderServers(){ // 绑定行点击 tbody.querySelectorAll('tr.row-server').forEach(tr=>{ tr.addEventListener('click',()=>{ + if(tr.getAttribute('data-online')!=='1') return; // 离线不弹出 const i = parseInt(tr.getAttribute('data-idx')); openDetail(i); }); @@ -131,12 +133,16 @@ function renderServersCards(){ function bucket(p){ const v=Math.max(0,Math.min(100,p)); const level = v>=20?'bad':(v>=10?'warn':'ok'); return `
`; } const buckets = `
${bucket(p1)}${bucket(p2)}${bucket(p3)}
`; const key = s.name || s.location || 'node'; - html += `
\n \n
\n
${s.name||'-'} ${s.location||'-'}
\n ${pill}\n
\n
\n
负载${s.load_1==-1?'–':s.load_1?.toFixed(2)}
\n
在线${s.uptime||'-'}
\n
月流量${monthIn}/${monthOut}
\n
网络${netNow}
\n
总流量${netTotal}
\n
CPU${s.cpu||0}%
\n
内存${memPct.toFixed(0)}%
\n
硬盘${hddPct.toFixed(0)}%
\n
\n ${buckets}\n
\n
点击卡片可查看详情
\n
\n
`; + html += `
\n \n
\n
${s.name||'-'} ${s.location||'-'}
\n ${pill}\n
\n
\n
负载${s.load_1==-1?'–':s.load_1?.toFixed(2)}
\n
在线${s.uptime||'-'}
\n
月流量${monthIn}/${monthOut}
\n
网络${netNow}
\n
总流量${netTotal}
\n
CPU${s.cpu||0}%
\n
内存${memPct.toFixed(0)}%
\n
硬盘${hddPct.toFixed(0)}%
\n
\n ${buckets}\n
\n
${online?'点击卡片可查看详情':'离线，不可查看详情'}
\n
\n
`; }); wrap.innerHTML = html || '
无数据
'; wrap.querySelectorAll('.card').forEach(card=>{ const idx = parseInt(card.getAttribute('data-idx')); - card.addEventListener('click', e=>{ if(e.target.classList.contains('expand-btn')){ card.classList.toggle('expanded'); e.stopPropagation(); return;} openDetail(idx); }); + card.addEventListener('click', e=>{ + if(e.target.classList.contains('expand-btn')){ card.classList.toggle('expanded'); e.stopPropagation(); return;} + if(card.getAttribute('data-online')!=='1') return; // 离线不弹 + openDetail(idx); + }); }); } @@ -266,36 +272,39 @@ function openDetail(i){ const memLine = `内存: ${s.memory_total? bytes(s.memory_used*1024)+' / '+bytes(s.memory_total*1024):'- / -'} | 虚存: ${s.swap_total? bytes(s.swap_used*1024)+' / '+bytes(s.swap_total*1024):'- / -'}`; const hddLine = `硬盘: ${s.hdd_total? bytes(s.hdd_used*1024*1024)+' / '+bytes(s.hdd_total*1024*1024):'- / -'} | 读/写: ${(typeof s.io_read==='number')? bytes(s.io_read):'-'} / ${(typeof s.io_write==='number')? bytes(s.io_write):'-'}`; const procLine = `${num(s.tcp_count)} / ${num(s.udp_count)} / ${num(s.process_count)} / ${num(s.thread_count)}`; + // 保留延迟数据用于图表，但不再展示当前延迟文字行 const latText = offline ? '离线' : `CU/CT/CM: ${num(s.time_10010)}ms (${(s.ping_10010||0).toFixed(0)}%) / ${num(s.time_189)}ms (${(s.ping_189||0).toFixed(0)}%) / ${num(s.time_10086)}ms (${(s.ping_10086||0).toFixed(0)}%)`; const key = s.name || s.location || 'node'; let latencyBlock = ''; if(!offline){ latencyBlock = ` -
当前延迟${latText}
- ● CU - ● CT - ● CM - (最近 ~${S.hist[key]?S.hist[key].cu.length:0} 条) + ● 联通 + ● 电信 + ● 移动 + (~${S.hist[key]?S.hist[key].cu.length:0} 条)
`; } else { - latencyBlock = `
当前延迟离线，无数据
`; + latencyBlock = ` +
+ +
离线，无联通/电信/移动延迟数据
+
`; } box.innerHTML = `
位置${s.location||'-'}
-
负载 (1/5/15)${offline?' - / - / -':(s.load_1==-1?'–':s.load_1?.toFixed(2))+' / '+(s.load_5?.toFixed?.(2)||'-')+' / '+(s.load_15?.toFixed?.(2)||'-')}
-
负载历史 (1/5/15) 最近 ~${(S.loadHist[key]?S.loadHist[key].l1.length:0)} 条
-
- ● 1 - ● 5 - ● 15 +
+ ● load1 + ● load5 + ● load15 + (~${(S.loadHist[key]?S.loadHist[key].l1.length:0)} 条)
内存｜虚存${offline?'- / - | 虚存: - / -':memLine}
@@ -373,6 +382,7 @@ function drawSparks(){ ctx.clearRect(0,0,W,H); div.classList.add('spark-ready'); if(hist.length<2){ ctx.fillStyle='var(--text-dim)'; ctx.font='10px system-ui'; ctx.fillText('-', W/2-3, H/2+3); return; } + // 硬盘与 CPU/内存保持一致的折线显示（去掉低波动迷你条特殊样式） const max = Math.max(...hist); const min = Math.min(...hist); const range = Math.max(1,max-min); const step = W/(hist.length-1); // 线颜色