github
/
ServerStatus
mirror of https://github.com/cppla/ServerStatus
1
0
Fork 0
Code Issues Releases Wiki Activity

update bug

pull/266/merge
cppla 2025-08-12 17:56:55 +08:00
parent 34e30d9873
commit 4c17623dff
3 changed files with 60 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/css/app.css
View File

@ -103,6 +103,11 @@ table.data thead th:last-child, table.data tbody td:last-child { text-align:cent
.spark{width:52px} .spark{width:52px}
#panel-servers .table-wrap{display:none;} #panel-servers .table-wrap{display:none;}
#serversCards{display:grid!important;grid-template-columns:1fr;gap:.75rem;margin-top:.5rem;} #serversCards{display:grid!important;grid-template-columns:1fr;gap:.75rem;margin-top:.5rem;}
/* 服务与证书移动端卡片 */
#panel-monitors .table-wrap, #panel-ssl .table-wrap{display:none;}
#monitorsCards,#sslCards{display:grid!important;grid-template-columns:1fr;gap:.75rem;margin-top:.5rem;}
.modal-box{max-width:100%;border-radius:14px;padding:1rem .95rem;}
.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{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-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;} .cards .card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}

8
web/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="简洁现代 ServerStatus" /> <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="alternate icon" href="favicon.ico" /> <link rel="alternate icon" href="favicon.ico" />
@ -76,6 +76,8 @@
<tbody id="monitorsBody"></tbody> <tbody id="monitorsBody"></tbody>
</table> </table>
</div> </div>
<!-- 移动端卡片布局 (服务) -->
<div id="monitorsCards" class="cards" style="display:none;"></div>
</section> </section>
<section id="panel-ssl" class="panel" aria-labelledby="证书"> <section id="panel-ssl" class="panel" aria-labelledby="证书">
@ -94,6 +96,8 @@
<tbody id="sslBody"></tbody> <tbody id="sslBody"></tbody>
</table> </table>
</div> </div>
<!-- 移动端卡片布局 (证书) -->
<div id="sslCards" class="cards" style="display:none;"></div>
</section> </section>
</main> </main>
@ -107,7 +111,7 @@
</div> </div>
<footer class="footer"> <footer class="footer">
<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>
<span class="sep">·</span> <span class="sep">·</span>
<span id="buildInfo" class="muted"></span> <span id="buildInfo" class="muted"></span>
</footer> </footer>

50
web/js/app.js
View File

@ -60,7 +60,9 @@ function render(){
renderServers(); renderServers();
renderServersCards(); renderServersCards();
renderMonitors(); renderMonitors();
renderMonitorsCards();
renderSSL(); renderSSL();
renderSSLCards();
updateTime(); updateTime();
} }
function renderServers(){ function renderServers(){
@ -152,6 +154,25 @@ function renderMonitors(){
tbody.innerHTML = html || `<tr><td colspan="4" class="muted" style="text-align:center;padding:1rem;">无数据</td></tr>`; tbody.innerHTML = html || `<tr><td colspan="4" class="muted" style="text-align:center;padding:1rem;">无数据</td></tr>`;
} }
// 服务卡片 (移动端)
function renderMonitorsCards(){
const wrap = document.getElementById('monitorsCards');
if(!wrap) return; if(window.innerWidth>700){ wrap.innerHTML=''; return; }
let html='';
S.servers.forEach(s=>{
const online = (s.online4||s.online6)?'在线':'离线';
const pill = `<span class="status-pill ${online==='在线'?'on':'off'}">${online}</span>`;
html += `<div class="card">
<div class="card-header"><div class="card-title">${s.name||'-'} <span class="tag">${s.location||'-'}</span></div>${pill}</div>
<div class="kvlist" style="grid-template-columns:repeat(2,minmax(0,1fr));">
<div><span class="key">监测内容</span><span>${s.custom||'-'}</span></div>
<div><span class="key">协议</span><span>${online}</span></div>
</div>
</div>`;
});
wrap.innerHTML = html || '<div class="muted" style="font-size:.75rem;text-align:center;padding:1rem;">无数据</div>';
}
function renderSSL(){ function renderSSL(){
const tbody = els.sslBody(); const tbody = els.sslBody();
let html=''; let html='';
@ -171,6 +192,28 @@ function renderSSL(){
tbody.innerHTML = html || `<tr><td colspan="6" class="muted" style="text-align:center;padding:1rem;">无证书数据</td></tr>`; tbody.innerHTML = html || `<tr><td colspan="6" class="muted" style="text-align:center;padding:1rem;">无证书数据</td></tr>`;
} }
// 证书卡片 (移动端)
function renderSSLCards(){
const wrap = document.getElementById('sslCards');
if(!wrap) return; if(window.innerWidth>700){ wrap.innerHTML=''; return; }
let html='';
S.ssl.forEach(c=>{
const cls = c.expire_days<=0? 'err': c.expire_days<=7? 'warn':'ok';
const status = c.expire_days<=0? '已过期': c.expire_days<=7? '将到期':'正常';
const dt = c.expire_ts? new Date(c.expire_ts*1000).toISOString().replace('T',' ').replace(/\.\d+Z/,''):'-';
html += `<div class="card">
<div class="card-header"><div class="card-title">${c.name||'-'}</div><span class="status-pill ${cls==='err'?'off':'on'}">${status}</span></div>
<div class="kvlist" style="grid-template-columns:repeat(2,minmax(0,1fr));">
<div><span class="key">域名</span><span>${(c.domain||'').replace(/^https?:\/\//,'')}</span></div>
<div><span class="key">端口</span><span>${c.port||443}</span></div>
<div><span class="key">剩余(天)</span><span>${c.expire_days??'-'}</span></div>
<div><span class="key">到期</span><span>${dt.split(' ')[0]||dt}</span></div>
</div>
</div>`;
});
wrap.innerHTML = html || '<div class="muted" style="font-size:.75rem;text-align:center;padding:1rem;">无证书数据</div>';
}
function updateTime(){ function updateTime(){
const el = els.last(); const el = els.last();
if(S.updated){ el.textContent = '最后更新: '+ humanAgo(S.updated); } if(S.updated){ el.textContent = '最后更新: '+ humanAgo(S.updated); }
@ -309,7 +352,12 @@ function drawLatencyChart(key){
// 在每次 render 后若弹窗打开则重绘最新图 // 在每次 render 后若弹窗打开则重绘最新图
const _oldRender = render; const _oldRender = render;
render = function(){ _oldRender(); if(S._openDetailKey){ drawLatencyChart(S._openDetailKey); } }; render = function(){ _oldRender(); if(S._openDetailKey){ drawLatencyChart(S._openDetailKey); } };
window.addEventListener('resize', ()=>{ if(S._openDetailKey){ drawLatencyChart(S._openDetailKey); drawLoadChart(S._openDetailKey); } }); window.addEventListener('resize', ()=>{
if(S._openDetailKey){ drawLatencyChart(S._openDetailKey); drawLoadChart(S._openDetailKey); }
renderServersCards();
renderMonitorsCards();
renderSSLCards();
});
// 绘制小型折线 (sparklines) // 绘制小型折线 (sparklines)
function drawSparks(){ function drawSparks(){