diff --git a/web/css/app.css b/web/css/app.css index db1f3a8..f40aec1 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -103,6 +103,11 @@ table.data thead th:last-child, table.data tbody td:last-child { text-align:cent .spark{width:52px} #panel-servers .table-wrap{display:none;} #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-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;} diff --git a/web/index.html b/web/index.html index 6956e43..8e1abb6 100644 --- a/web/index.html +++ b/web/index.html @@ -3,7 +3,7 @@ - + 云监控 @@ -76,6 +76,8 @@ + +
@@ -94,6 +96,8 @@ + +
@@ -107,7 +111,7 @@ diff --git a/web/js/app.js b/web/js/app.js index 7fd39b3..34d0f9e 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -60,7 +60,9 @@ function render(){ renderServers(); renderServersCards(); renderMonitors(); + renderMonitorsCards(); renderSSL(); + renderSSLCards(); updateTime(); } function renderServers(){ @@ -152,6 +154,25 @@ function renderMonitors(){ tbody.innerHTML = html || `无数据`; } +// 服务卡片 (移动端) +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 = `${online}`; + html += `
+
${s.name||'-'} ${s.location||'-'}
${pill}
+
+
监测内容${s.custom||'-'}
+
协议${online}
+
+
`; + }); + wrap.innerHTML = html || '
无数据
'; +} + function renderSSL(){ const tbody = els.sslBody(); let html=''; @@ -171,6 +192,28 @@ function renderSSL(){ tbody.innerHTML = html || `无证书数据`; } +// 证书卡片 (移动端) +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 += `
+
${c.name||'-'}
${status}
+
+
域名${(c.domain||'').replace(/^https?:\/\//,'')}
+
端口${c.port||443}
+
剩余(天)${c.expire_days??'-'}
+
到期${dt.split(' ')[0]||dt}
+
+
`; + }); + wrap.innerHTML = html || '
无证书数据
'; +} + function updateTime(){ const el = els.last(); if(S.updated){ el.textContent = '最后更新: '+ humanAgo(S.updated); } @@ -309,7 +352,12 @@ function drawLatencyChart(key){ // 在每次 render 后若弹窗打开则重绘最新图 const _oldRender = render; 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) function drawSparks(){