41 lines
8.6 KiB
HTML
41 lines
8.6 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Pigway Pi Control</title>
|
|
<style>
|
|
:root{color-scheme:dark;--bg:#0b1118;--panel:#121b25;--line:#263546;--text:#e7edf5;--muted:#91a4b8;--good:#50d890;--warn:#ffbd4a;--bad:#ff6b6b;--blue:#58a6ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,#14263b 0,#0b1118 42%);color:var(--text);font:14px/1.45 system-ui,-apple-system,sans-serif}main{max-width:1180px;margin:auto;padding:28px 20px 60px}header{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:22px}h1{font-size:27px;margin:0}h2{font-size:17px;margin:0 0 14px}.sub,.muted{color:var(--muted)}.live{display:flex;align-items:center;gap:8px}.dot{width:9px;height:9px;border-radius:50%;background:var(--bad)}.dot.ok{background:var(--good);box-shadow:0 0 12px var(--good)}nav{display:flex;gap:8px;margin:18px 0}button{border:1px solid var(--line);background:#162230;color:var(--text);border-radius:8px;padding:9px 13px;cursor:pointer}button:hover,button.active{border-color:var(--blue);background:#1b3047}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.card,.panel{background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 12px 28px #0004}.value{font-size:23px;font-weight:700;margin-top:4px}.wide{grid-column:span 2}.panel{margin-top:12px}.rows{display:grid;gap:8px}.row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #203040}.row:last-child{border:0}.badge{border-radius:999px;padding:3px 8px;background:#243447}.badge.good{color:var(--good)}.badge.bad{color:var(--bad)}.hidden{display:none}.log{font:12px/1.5 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;padding:8px 0;border-bottom:1px solid #203040}.config-section{margin:10px 0;border:1px solid var(--line);border-radius:10px;padding:12px}.config-section summary{cursor:pointer;font-weight:700}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.field label{display:block;color:var(--muted);font-size:12px}.field input{width:100%;margin-top:4px;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:8px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.toolbar input{min-width:280px;flex:1;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:9px}.error{color:var(--bad)}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.fields{grid-template-columns:1fr}.wide{grid-column:span 2}}@media(max-width:470px){.grid{grid-template-columns:1fr}.wide{grid-column:span 1}header{align-items:start;flex-direction:column}}
|
|
</style>
|
|
</head>
|
|
<body><main>
|
|
<header><div><h1>Pigway Pi Control</h1><div class="sub" id="identity">正在连接 Raspberry Pi…</div></div><div class="live"><span class="dot" id="dot"></span><span id="liveText">离线</span></div></header>
|
|
<nav><button class="active" data-tab="overview">状态</button><button data-tab="logs">日志</button><button data-tab="config">配置</button></nav>
|
|
<section id="overview">
|
|
<div class="grid">
|
|
<div class="card"><div class="muted">CPU</div><div class="value" id="cpu">--</div><div class="muted" id="freq">--</div></div>
|
|
<div class="card"><div class="muted">温度</div><div class="value" id="temp">--</div><div class="muted" id="fan">--</div></div>
|
|
<div class="card"><div class="muted">内存</div><div class="value" id="memory">--</div></div>
|
|
<div class="card"><div class="muted">磁盘</div><div class="value" id="disk">--</div></div>
|
|
<div class="card wide"><div class="muted">网络</div><div class="value" id="network">--</div><div class="muted" id="address">--</div></div>
|
|
<div class="card wide"><div class="muted">显示控制</div><div class="value" id="owner">--</div><div class="muted" id="rgb">--</div></div>
|
|
</div>
|
|
<div class="panel"><h2>当前告警</h2><div class="rows" id="alerts"><div class="muted">无告警</div></div></div>
|
|
<div class="panel"><h2>服务与进程</h2><div class="rows" id="watches"></div></div>
|
|
</section>
|
|
<section id="logs" class="hidden"><div class="panel"><div class="toolbar"><button id="refreshLogs">刷新日志</button><span class="muted">最近200条 Agent journal</span></div><div id="logRows"></div></div></section>
|
|
<section id="config" class="hidden"><div class="panel"><h2>用户配置</h2><p class="muted">保存前请输入安装时生成的 API token。修改会备份配置并重启硬件 Agent；API 端口变化会自动重启本服务。</p><div class="toolbar"><input id="token" type="password" placeholder="Bearer token"><button id="saveConfig">保存并应用</button><span id="saveState"></span></div><div id="configRows"></div></div></section>
|
|
</main>
|
|
<script>
|
|
const $=id=>document.getElementById(id), tabs=[...document.querySelectorAll('nav button')];let original={};
|
|
const esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
tabs.forEach(b=>b.onclick=()=>{tabs.forEach(x=>x.classList.toggle('active',x===b));['overview','logs','config'].forEach(id=>$(id).classList.toggle('hidden',id!==b.dataset.tab));if(b.dataset.tab==='logs')loadLogs();if(b.dataset.tab==='config')loadConfig()});
|
|
async function get(url,opt){const r=await fetch(url,opt);const j=await r.json();if(!r.ok)throw Error(j.error||r.statusText);return j}
|
|
function rows(target,items,empty='暂无数据'){$(target).innerHTML=items.length?items.join(''):`<div class="muted">${empty}</div>`}
|
|
async function loadStatus(){try{const s=await get('/api/v1/status'),y=s.system,n=s.network,d=s.display;$('dot').classList.add('ok');$('liveText').textContent='在线';$('identity').textContent=`v${s.version} · 运行 ${Math.floor(s.uptime_seconds/3600)} 小时 · ${new Date(s.timestamp*1000).toLocaleTimeString()}`;$('cpu').textContent=`${y.cpu_percent}%`;$('freq').textContent=`${y.cpu_freq_mhz} MHz`;$('temp').textContent=`${y.temperature_c}°C`;$('fan').textContent=`风扇 ${y.fan_name}`;$('memory').textContent=`${y.memory_percent}%`;$('disk').textContent=`${y.disk_percent}%`;$('network').textContent=`${n.kind} ${n.metric}`;$('address').textContent=`${n.interface} · ${n.ip_label} ${n.ip} · Internet ${n.internet?'OK':'DOWN'}`;$('owner').textContent=d.owner;$('rgb').textContent=`OLED ${d.oled_page} · RGB ${d.rgb_mode}`;rows('alerts',d.alerts.map(a=>`<div class="row"><span><b>${esc(a.title)}</b><br><span class="muted">${esc(a.l2)} ${esc(a.l3)}</span></span><span class="badge bad">S${a.severity} · P${a.priority}</span></div>`),'无告警');rows('watches',s.watches.map(w=>`<div class="row"><span><b>${esc(w.name)}</b><br><span class="muted">${esc(w.type)} · ${esc(w.target)}</span></span><span class="badge ${w.up?'good':'bad'}">${w.up?'UP':'DOWN'}</span></div>`))}catch(e){$('dot').classList.remove('ok');$('liveText').textContent='离线';$('identity').textContent=e.message}}
|
|
async function loadLogs(){try{const d=await get('/api/v1/logs?limit=200');rows('logRows',d.logs.reverse().map(x=>`<div class="log">${esc(x.message)}</div>`))}catch(e){$('logRows').innerHTML=`<div class="error">${esc(e.message)}</div>`}}
|
|
async function loadConfig(){try{const d=await get('/api/v1/config');original=d.config;$('configRows').innerHTML=Object.entries(original).map(([section,values])=>`<details class="config-section"><summary>[${esc(section)}]</summary><div class="fields">${Object.entries(values).map(([k,v])=>`<div class="field"><label>${esc(k)}<input data-section="${esc(section)}" data-key="${esc(k)}" value="${esc(v)}"></label></div>`).join('')}</div></details>`).join('')}catch(e){$('configRows').innerHTML=`<div class="error">${esc(e.message)}</div>`}}
|
|
$('refreshLogs').onclick=loadLogs;$('token').value=localStorage.getItem('pigwayToken')||'';
|
|
$('saveConfig').onclick=async()=>{const token=$('token').value.trim();localStorage.setItem('pigwayToken',token);const updates={};document.querySelectorAll('#configRows input').forEach(i=>{if(i.value!==original[i.dataset.section][i.dataset.key]){(updates[i.dataset.section]??={})[i.dataset.key]=i.value}});if(!Object.keys(updates).length){$('saveState').textContent='没有变化';return}try{$('saveState').textContent='正在应用…';const d=await get('/api/v1/config',{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({updates})});$('saveState').textContent=`已保存，备份 ${d.backup}`;setTimeout(loadConfig,1500)}catch(e){$('saveState').textContent=e.message;$('saveState').className='error'}};
|
|
loadStatus();setInterval(loadStatus,3000);
|
|
</script></body></html>
|