admin/oc-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: smooth CSS transitions + flash on value change

Browse Source
This commit is contained in:
mango
2026-02-22 19:24:02 +08:00
parent 2da4093a52
commit c42cef0cdf
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -41,8 +41,9 @@ h1{font-size:1.3em;color:var(--neon);margin-bottom:4px}
.ok{color:var(--green)}.er{color:var(--err)} .ok{color:var(--green)}.er{color:var(--err)}
.gs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0} .gs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.g{font-size:.7em}.g-l{color:var(--dim)}.g-t{height:4px;background:var(--card2);border-radius:2px;margin:2px 0} .g{font-size:.7em}.g-l{color:var(--dim)}.g-t{height:4px;background:var(--card2);border-radius:2px;margin:2px 0}
.g-f{height:100%;border-radius:2px}.fg{background:var(--green)}.fb{background:var(--neon)}.fw{background:var(--warn)}.fr{background:var(--err)} .g-f{height:100%;border-radius:2px;transition:width .8s ease,background .5s}.fg{background:var(--green)}.fb{background:var(--neon)}.fw{background:var(--warn)}.fr{background:var(--err)}
.g-n{font-weight:600} .g-n{font-weight:600;transition:color .3s}
.g-n.flash{color:var(--neon)}
.tks{display:flex;gap:10px;margin:8px 0} .tks{display:flex;gap:10px;margin:8px 0}
.tk{flex:1;text-align:center;background:var(--card2);border-radius:6px;padding:5px} .tk{flex:1;text-align:center;background:var(--card2);border-radius:6px;padding:5px}
.tk-l{font-size:.63em;color:var(--dim)}.tk-v{font-size:.85em;font-weight:600;color:var(--neon)} .tk-l{font-size:.63em;color:var(--dim)}.tk-v{font-size:.85em;font-weight:600;color:var(--neon)}
@@ -186,13 +187,11 @@ function updateNodeCard(n){
// gauges // gauges
[['cpu',n.cpu],['mem',n.mem],['disk',n.disk],['swap',n.swap]].forEach(([k,v])=>{ [['cpu',n.cpu],['mem',n.mem],['disk',n.disk],['swap',n.swap]].forEach(([k,v])=>{
const g=el.querySelector(`[data-g="${k}"]`); const g=el.querySelector(`[data-g="${k}"]`);
if(g){g.querySelector('.g-f').style.width=v+'%';g.querySelector('.g-f').className='g-f '+gaugeColor(v);g.querySelector('.g-n').textContent=on?v+'%':'—';} if(g){g.querySelector('.g-f').style.width=v+'%';g.querySelector('.g-f').className='g-f '+gaugeColor(v);const gn=g.querySelector('.g-n');if(gn.textContent!==(on?v+'%':'—')){gn.textContent=on?v+'%':'—';gn.classList.add('flash');setTimeout(()=>gn.classList.remove('flash'),600);}}
}); });
// tokens // tokens
const tv=el.querySelectorAll('.tk-v'); const tv=el.querySelectorAll('.tk-v');
if(tv[0])tv[0].textContent=fmtTok(n.tok_today); [[tv[0],n.tok_today],[tv[1],n.tok_week],[tv[2],n.tok_month]].forEach(([e,v])=>{if(e){const s=fmtTok(v);if(e.textContent!==s){e.textContent=s;e.style.color='var(--neon)';setTimeout(()=>e.style.color='',600);}}});
if(tv[1])tv[1].textContent=fmtTok(n.tok_week);
if(tv[2])tv[2].textContent=fmtTok(n.tok_month);
// footer // footer
const fs=el.querySelectorAll('.nd-f span'); const fs=el.querySelectorAll('.nd-f span');
if(fs[0])fs[0].textContent='⏱ '+fmtAge(Date.now()/1000-n.uptime); if(fs[0])fs[0].textContent='⏱ '+fmtAge(Date.now()/1000-n.uptime);