update

2026-08-06 13:43:57 +08:00 · 2026-07-09 10:10:08 +08:00
parent 6ad3a8c294
commit 66e6179332
7 changed files with 376 additions and 58 deletions
@@ -151,6 +151,10 @@ body.light .virt-pill{background:color-mix(in srgb,var(--virt) 12%,#fff);color:c
 .node-name{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:750;letter-spacing:.15px;color:var(--text)}
 .row-server[data-online="0"] .node-name{color:color-mix(in srgb,var(--text) 72%,var(--text-dim));font-weight:650}
 .row-server:hover .node-name{color:var(--accent)}
+.load-with-cores{display:inline-flex;align-items:flex-start;gap:.28rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;line-height:1;white-space:nowrap}
+.load-value{display:inline-block;min-width:2.55rem}
+.load-core-bubble{display:inline-flex;align-items:center;justify-content:center;height:14px;min-width:24px;padding:0 5px;margin-top:-6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));background:color-mix(in srgb,var(--accent) 13%,var(--bg-alt));color:color-mix(in srgb,var(--accent) 74%,#fff);font-size:9px;font-weight:800;line-height:1;letter-spacing:0;box-shadow:0 1px 3px rgba(0,0,0,.22)}
+body.light .load-core-bubble{background:color-mix(in srgb,var(--accent) 8%,#fff);color:color-mix(in srgb,var(--accent) 78%,#111827);box-shadow:0 1px 2px rgba(15,23,42,.08)}

 /* buckets CU/CT/CM (simple version) */
 .buckets{display:flex;align-items:flex-end;gap:8px;min-width:140px}
@@ -261,6 +265,10 @@ table.data tbody tr[class*="os-"]:hover{background:linear-gradient(180deg, color
 /* 弹窗 OS 着色：左侧彩条 + 渐变与卡片一致 */
 /* 取消弹窗背景着色，改为仅在标题展示系统胶囊 */
 .os-chip{display:inline-flex;align-items:center;padding:2px 8px;margin-left:.5rem;border-radius:999px;font-size:12px;font-weight:600;line-height:1.2;background:var(--os-color, var(--border));color:#fff;border:0;white-space:nowrap;}
+.spec-chip{display:inline-flex;align-items:center;padding:2px 8px;margin-left:.4rem;border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:750;line-height:1.2;background:color-mix(in srgb,var(--accent) 16%,var(--bg-alt));color:color-mix(in srgb,var(--accent) 72%,#fff);border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border));white-space:nowrap;}
+body.light .spec-chip{background:color-mix(in srgb,var(--accent) 10%,#fff);color:color-mix(in srgb,var(--accent) 78%,#111827)}
+.cpu-model-chip{display:inline-block;max-width:min(240px,58vw);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;padding:2px 8px;margin-left:.4rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--text-dim) 34%,var(--border));background:color-mix(in srgb,var(--text-dim) 12%,var(--bg-alt));color:color-mix(in srgb,var(--text) 84%,var(--text-dim));font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;}
+body.light .cpu-model-chip{background:color-mix(in srgb,var(--text-dim) 9%,#fff);color:color-mix(in srgb,var(--text) 82%,#111827)}

 /* 为常见系统赋色 */
 .os-linux{--os-color: rgba(16,185,129,.85);}   /* 绿色 (通用 Linux，保持不变) */
@@ -285,7 +293,9 @@ table.data tbody tr[class*="os-"]:hover{background:linear-gradient(180deg, color

 /* 旧进度条相关样式已清理 */
 .cards .card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
-.cards .card-title{font-weight:600;font-size:.95rem;}
+.cards .card-title{display:flex;align-items:center;flex-wrap:wrap;gap:.24rem .34rem;min-width:0;font-weight:600;font-size:.95rem;}
+.cards .card-spec-chip{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:0 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));background:color-mix(in srgb,var(--accent) 13%,var(--bg-alt));color:color-mix(in srgb,var(--accent) 74%,#fff);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;font-weight:800;line-height:1;letter-spacing:0;white-space:nowrap}
+body.light .cards .card-spec-chip{background:color-mix(in srgb,var(--accent) 8%,#fff);color:color-mix(in srgb,var(--accent) 78%,#111827)}
 .cards .tag{font-size:.65rem;padding:.15rem .4rem;border-radius:4px;background:var(--surface);color:var(--text);letter-spacing:.5px;}
 .cards .status-pill{font-size:.6rem;padding:.2rem .45rem;border-radius:999px;font-weight:500;}
 .cards .status-pill.on{background:var(--ok);color:#fff;}
@@ -372,7 +382,8 @@ th[data-sort].sorted-desc:after{border-top-color:var(--accent);opacity:1}
 .detail-drawer{height:100dvh;max-height:100dvh;width:min(620px,100vw);max-width:min(620px,100vw);border-radius:0;border-top:0;border-right:0;border-bottom:0;padding:1.1rem;overflow:auto;animation:slideIn .24s ease}
 .detail-drawer.alert-critical{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08)), var(--bg-alt);box-shadow:0 0 0 1px rgba(239,68,68,.38),0 10px 28px -10px rgba(239,68,68,.28)}
 .detail-drawer.alert-warning{border-color:rgba(245,158,11,.55);background:linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06)), var(--bg-alt);box-shadow:0 0 0 1px rgba(245,158,11,.28),0 10px 28px -10px rgba(245,158,11,.2)}
-.modal-title{padding-right:2.2rem}
+.modal-title{padding-right:2.2rem;display:flex;align-items:center;flex-wrap:wrap;gap:.32rem .4rem}
+.modal-title .os-chip,.modal-title .spec-chip,.modal-title .cpu-model-chip{margin-left:0}
 .detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
 .detail-section{border:1px solid var(--border);border-radius:8px;background:linear-gradient(145deg,var(--bg),var(--bg-alt));padding:.75rem;display:flex;flex-direction:column;gap:.65rem}
 .detail-section h4{margin:0;font-size:13px;color:var(--text-dim);font-weight:700;letter-spacing:.4px}
@@ -6,7 +6,7 @@
    <meta name="description" content="云监控,ServerStatus中文版,ServerStatus,ServerStatus cppla" />
    <title>云监控</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-    <link rel="stylesheet" href="css/app.css?v=20260707-5" />
+    <link rel="stylesheet" href="css/app.css?v=20260709-1" />
 </head>
 <body>
    <header class="topbar">
@@ -200,6 +200,6 @@
        <a href="https://github.com/cppla/ServerStatus" target="_blank" rel="noopener">ServerStatus中文版</a>
    </footer>

-    <script src="js/app.js?v=20260707-5" defer></script>
+    <script src="js/app.js?v=20260709-1" defer></script>
 </body>
 </html>
@@ -6,6 +6,7 @@ const S = {
  loadHist: {},
  openDetailKey: null,
  activeTab: 'servers',
+  layoutCompact: null,
  osOptionsSignature: '',
  suppressStatsReloadUntil: 0,
  filters: { query: '', status: 'all', os: 'all', sort: 'name', dir: 'desc' },
@@ -25,6 +26,32 @@ const esc = (v) => String(v ?? '').replace(/[&<>"']/g, ch => ({'&':'&amp;','<':'
 const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
 const num = (v) => typeof v === 'number' && Number.isFinite(v) ? v : 0;

+function debounce(fn, wait){
+  let timer = 0;
+  const wrapped = (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = 0;
+      fn(...args);
+    }, wait);
+  };
+  wrapped.cancel = () => {
+    clearTimeout(timer);
+    timer = 0;
+  };
+  return wrapped;
+}
+function isCompactLayout(){ return window.innerWidth <= 700; }
+function clearHTML(id){
+  const el = $(id);
+  if(el && el.innerHTML) el.innerHTML = '';
+}
+function htmlElement(html){
+  const tpl = document.createElement('template');
+  tpl.innerHTML = html.trim();
+  return tpl.content.firstElementChild;
+}
+
 function humanMinMBFromKB(kb){ return humanBytes(num(kb) * 1000, 1000 * 1000); }
 function humanMinMBFromMB(mb){ return humanBytes(num(mb) * 1000 * 1000, 1000 * 1000); }
 function humanMinMBFromB(bytes){ return humanBytes(num(bytes), 1000 * 1000); }
@@ -39,6 +66,27 @@ function humanBytes(bytes, minUnit){
  const out = value >= 100 ? value.toFixed(0) : value.toFixed(1);
  return out + units[index];
 }
+function cpuCores(s){
+  const value = Number(s?.cpu_cores ?? s?.cpu_core ?? s?.cpu_count ?? s?.cores ?? 0);
+  return Number.isFinite(value) && value > 0 ? Math.round(value) : 0;
+}
+function cpuCoreLabel(s){
+  const cores = cpuCores(s);
+  return cores > 0 ? `${cores}C` : '';
+}
+function memoryGbLabel(s){
+  const kb = Number(s?.memory_total ?? 0);
+  if(!Number.isFinite(kb) || kb <= 0) return '';
+  return `${Math.max(1, Math.round(kb / 1024 / 1024))}G`;
+}
+function serverSpecLabel(s){
+  const cores = cpuCoreLabel(s);
+  if(!cores) return '';
+  return `${cores}${memoryGbLabel(s)}`;
+}
+function cpuModelLabel(s){
+  return String(s?.cpu_model || '').trim();
+}
 function humanAgo(ts){
  if(!ts) return '-';
  const sec = Math.max(0, Math.floor(Date.now() / 1000 - Number(ts)));
@@ -201,19 +249,65 @@ function visibleServers(){

 function render(){
  $('notice').style.display = 'none';
-  normalizeServersToolbarState();
  renderOverview();
-  renderOsOptions();
-  renderServers();
-  renderServersCards();
-  renderMonitors();
-  renderMonitorsCards();
-  renderSSL();
-  renderSSLCards();
+  renderActivePanel();
  updateTime();
  if(S.openDetailKey) refreshDetail();
 }

+function renderActivePanel(){
+  normalizeServersToolbarState();
+  if(S.activeTab === 'servers') renderServersView();
+  else if(S.activeTab === 'monitors') renderMonitorsView();
+  else if(S.activeTab === 'ssl') renderSSLView();
+}
+
+function renderServersView(){
+  const compact = isCompactLayout();
+  S.layoutCompact = compact;
+  normalizeServersToolbarState();
+  renderOsOptions();
+  if(compact){
+    clearHTML('serversBody');
+    renderServersCards();
+  }else{
+    clearHTML('serversCards');
+    renderServers();
+  }
+}
+
+function renderMonitorsView(){
+  const compact = isCompactLayout();
+  S.layoutCompact = compact;
+  if(compact){
+    clearHTML('monitorsBody');
+    renderMonitorsCards();
+  }else{
+    clearHTML('monitorsCards');
+    renderMonitors();
+  }
+}
+
+function renderSSLView(){
+  const compact = isCompactLayout();
+  S.layoutCompact = compact;
+  if(compact){
+    clearHTML('sslBody');
+    renderSSLCards();
+  }else{
+    clearHTML('sslCards');
+    renderSSL();
+  }
+}
+
+const scheduleServersRender = debounce(() => {
+  if(S.activeTab === 'servers') renderServersView();
+}, 160);
+function renderServersViewNow(){
+  scheduleServersRender.cancel();
+  if(S.activeTab === 'servers') renderServersView();
+}
+
 function renderOverview(){
  const total = S.servers.length;
  const online = S.servers.filter(s => metrics(s).online).length;
@@ -291,6 +385,12 @@ function trafficCaps(s, small){
  const heavy = m.traffic >= 1000 * 1000 * 1000 * 1000;
  return `<span class="caps-traffic duo ${heavy ? 'heavy' : 'normal'}${small ? ' sm' : ''}" title="本月下行 | 上行"><span class="half in">${humanMinMBFromB(m.monthIn)}</span><span class="half out">${humanMinMBFromB(m.monthOut)}</span></span>`;
 }
+function loadCellHTML(s){
+  const load = s.load_1 === -1 ? '–' : num(s.load_1).toFixed(2);
+  const cores = cpuCoreLabel(s);
+  if(!cores) return esc(load);
+  return `<span class="load-with-cores" title="负载 ${esc(load)} / CPU ${esc(cores)}"><span class="load-value">${esc(load)}</span><span class="load-core-bubble">${esc(cores)}</span></span>`;
+}
 function gaugeHTML(type, value){
  const pct = clamp(num(value), 0, 100);
  const thresholds = {
@@ -342,47 +442,79 @@ function buckets(s){
  }).join('')}</div>`;
 }

+function serverRowSignature(s, m){
+  const text = [
+    m.online ? 1 : 0, m.rowLevel, s.online4, s.online6, s.os,
+    s.name, s.type, s.location, s.uptime, s.load_1, cpuCores(s),
+    s.network_rx, s.network_tx, s.network_in, s.network_out, s.last_network_in, s.last_network_out,
+    s.cpu, s.memory_used, s.memory_total, s.hdd_used, s.hdd_total,
+    s.ping_10010, s.ping_189, s.ping_10086
+  ].map(v => String(v ?? '')).join('\u001f');
+  return `${stableHash(text).toString(36)}:${text.length}`;
+}
+
+function serverRowHTML(s, m, signature){
+  const netNow = `${humanMinKBFromB(s.network_rx)} | ${humanMinKBFromB(s.network_tx)}`;
+  const netTotal = `${humanMinMBFromB(s.network_in)} | ${humanMinMBFromB(s.network_out)}`;
+  const alertClass = m.rowLevel ? ` alert-${m.rowLevel}` : '';
+  return `<tr data-key="${esc(s._key)}" data-online="${m.online ? 1 : 0}" data-sig="${esc(signature)}" class="row-server${alertClass}${osClass(s.os)}" style="cursor:${m.online ? 'pointer' : 'default'};">
+    <td>${protoPill(s)}</td>
+    <td>${trafficCaps(s)}</td>
+    <td><span class="node-name" title="${esc(s.name || '-')}">${esc(s.name || '-')}</span></td>
+    <td>${virtPill(s.type)}</td>
+    <td>${esc(s.location || '-')}</td>
+    <td>${esc(s.uptime || '-')}</td>
+    <td>${loadCellHTML(s)}</td>
+    <td>${netNow}</td>
+    <td>${netTotal}</td>
+    <td>${m.online ? gaugeHTML('cpu', s.cpu) : '-'}</td>
+    <td>${m.online ? gaugeHTML('mem', m.memPct) : '-'}</td>
+    <td>${m.online ? gaugeHTML('hdd', m.hddPct) : '-'}</td>
+    <td>${buckets(s)}</td>
+  </tr>`;
+}
+
 function renderServers(){
  const rows = visibleServers();
+  const tbody = $('serversBody');
  document.querySelectorAll('#serversTable th[data-sort]').forEach(th => {
    th.classList.toggle('sorted-asc', th.dataset.sort === S.filters.sort && S.filters.dir === 'asc');
    th.classList.toggle('sorted-desc', th.dataset.sort === S.filters.sort && S.filters.dir === 'desc');
  });
-  $('serversBody').innerHTML = rows.map(s => {
+  if(!rows.length){
+    if(tbody.dataset.empty !== 'servers'){
+      tbody.innerHTML = `<tr class="empty-row"><td colspan="13" class="muted" style="text-align:center;padding:1rem;">无数据</td></tr>`;
+      tbody.dataset.empty = 'servers';
+    }
+    return;
+  }
+  delete tbody.dataset.empty;
+  tbody.querySelector('.empty-row')?.remove();
+  const existing = new Map([...tbody.querySelectorAll('tr.row-server')].map(row => [row.dataset.key, row]));
+  const desiredKeys = new Set(rows.map(s => s._key));
+  existing.forEach((row, key) => { if(!desiredKeys.has(key)) row.remove(); });
+  rows.forEach(s => {
+    const key = String(s._key);
    const m = metrics(s);
-    const netNow = `${humanMinKBFromB(s.network_rx)} | ${humanMinKBFromB(s.network_tx)}`;
-    const netTotal = `${humanMinMBFromB(s.network_in)} | ${humanMinMBFromB(s.network_out)}`;
-    const alertClass = m.rowLevel ? ` alert-${m.rowLevel}` : '';
-    return `<tr data-key="${esc(s._key)}" data-online="${m.online ? 1 : 0}" class="row-server${alertClass}${osClass(s.os)}" style="cursor:${m.online ? 'pointer' : 'default'};">
-      <td>${protoPill(s)}</td>
-      <td>${trafficCaps(s)}</td>
-      <td><span class="node-name" title="${esc(s.name || '-')}">${esc(s.name || '-')}</span></td>
-      <td>${virtPill(s.type)}</td>
-      <td>${esc(s.location || '-')}</td>
-      <td>${esc(s.uptime || '-')}</td>
-      <td>${s.load_1 === -1 ? '–' : num(s.load_1).toFixed(2)}</td>
-      <td>${netNow}</td>
-      <td>${netTotal}</td>
-      <td>${m.online ? gaugeHTML('cpu', s.cpu) : '-'}</td>
-      <td>${m.online ? gaugeHTML('mem', m.memPct) : '-'}</td>
-      <td>${m.online ? gaugeHTML('hdd', m.hddPct) : '-'}</td>
-      <td>${buckets(s)}</td>
-    </tr>`;
-  }).join('') || `<tr><td colspan="13" class="muted" style="text-align:center;padding:1rem;">无数据</td></tr>`;
-  document.querySelectorAll('#serversBody .row-server').forEach(row => row.addEventListener('click', () => {
-    if(row.dataset.online !== '1') return;
-    openDetail(row.dataset.key);
-  }));
+    const signature = serverRowSignature(s, m);
+    const current = existing.get(key);
+    let row = current;
+    if(!row || row.dataset.sig !== signature){
+      row = htmlElement(serverRowHTML(s, m, signature));
+      if(current) current.replaceWith(row);
+    }
+    tbody.appendChild(row);
+  });
 }

 function renderServersCards(){
  const wrap = $('serversCards');
-  if(window.innerWidth > 700){ wrap.innerHTML = ''; return; }
  wrap.innerHTML = visibleServers().map(s => {
    const m = metrics(s);
    const alertClass = m.rowLevel ? ` alert-${m.rowLevel}` : '';
+    const spec = serverSpecLabel(s);
    return `<div class="card${m.online ? '' : ' offline'}${alertClass}${osClass(s.os)}" data-key="${esc(s._key)}" data-online="${m.online ? 1 : 0}">
-      <div class="card-header"><div class="card-title">${esc(s.name || '-')} <span class="tag">${esc(s.location || '-')}</span></div>${protoPill(s)}</div>
+      <div class="card-header"><div class="card-title">${esc(s.name || '-')}${spec ? `<span class="card-spec-chip" title="CPU 核心 / 总内存">${esc(spec)}</span>` : ''} <span class="tag">${esc(s.location || '-')}</span></div>${protoPill(s)}</div>
      <div class="kvlist">
        <div><span class="key">负载</span><span>${s.load_1 === -1 ? '–' : num(s.load_1).toFixed(2)}</span></div>
        <div><span class="key">在线</span><span>${esc(s.uptime || '-')}</span></div>
@@ -394,10 +526,6 @@ function renderServersCards(){
      ${buckets(s)}
    </div>`;
  }).join('') || '<div class="empty-state">无数据</div>';
-  wrap.querySelectorAll('.card').forEach(card => card.addEventListener('click', () => {
-    if(card.dataset.online !== '1') return;
-    openDetail(card.dataset.key);
-  }));
 }

 function parseCustom(str){
@@ -458,7 +586,9 @@ function refreshDetail(){
  if(!s){ closeDetail(); return; }
  const m = metrics(s);
  const title = $('detailTitle');
-  title.innerHTML = `${esc(s.name || '-')} 详情${s.os ? `<span class="os-chip${osClass(s.os)}">${esc(osLabel(s.os))}</span>` : ''}`;
+  const spec = serverSpecLabel(s);
+  const cpuModel = cpuModelLabel(s);
+  title.innerHTML = `${esc(s.name || '-')} 详情${s.os ? `<span class="os-chip${osClass(s.os)}">${esc(osLabel(s.os))}</span>` : ''}${spec ? `<span class="spec-chip" title="CPU 核心 / 总内存">${esc(spec)}</span>` : ''}${cpuModel ? `<span class="cpu-model-chip" title="${esc(cpuModel)}">${esc(cpuModel)}</span>` : ''}`;
  const modalBox = document.querySelector('#detailModal .modal-box');
  if(modalBox){
    modalBox.classList.remove('high-load');
@@ -563,9 +693,10 @@ function bindTabs(){
    if(e.target.tagName !== 'BUTTON') return;
    const tab = e.target.dataset.tab;
    S.activeTab = tab;
+    scheduleServersRender.cancel();
    document.querySelectorAll('.nav button').forEach(btn => btn.classList.toggle('active', btn === e.target));
    document.querySelectorAll('.panel').forEach(panel => panel.classList.toggle('active', panel.id === 'panel-' + tab));
-    normalizeServersToolbarState();
+    renderActivePanel();
    if(tab === 'config') ensureAdminChecked();
  });
 }
@@ -584,30 +715,43 @@ function bindTheme(){
  });
 }
 function bindFilters(){
-  $('serverSearch').addEventListener('input', e => { S.filters.query = e.target.value; renderServers(); renderServersCards(); });
+  $('serverSearch').addEventListener('input', e => { S.filters.query = e.target.value; scheduleServersRender(); });
  $('statusFilter').addEventListener('click', e => {
    if(e.target.tagName !== 'BUTTON') return;
    S.filters.status = e.target.dataset.filter;
    document.querySelectorAll('#statusFilter button').forEach(btn => btn.classList.toggle('active', btn === e.target));
-    renderServers(); renderServersCards();
+    renderServersViewNow();
  });
-  $('osFilter').addEventListener('change', e => { S.filters.os = e.target.value; renderServers(); renderServersCards(); });
+  $('osFilter').addEventListener('change', e => { S.filters.os = e.target.value; renderServersViewNow(); });
  $('osFilter').addEventListener('blur', renderOsOptions);
-  $('sortSelect').addEventListener('change', e => { S.filters.sort = e.target.value; renderServers(); renderServersCards(); });
+  $('sortSelect').addEventListener('change', e => { S.filters.sort = e.target.value; renderServersViewNow(); });
  $('sortDirection').addEventListener('click', () => {
    S.filters.dir = S.filters.dir === 'desc' ? 'asc' : 'desc';
    $('sortDirection').textContent = S.filters.dir === 'desc' ? '降序' : '升序';
-    renderServers(); renderServersCards();
+    renderServersViewNow();
  });
  document.querySelectorAll('#serversTable th[data-sort]').forEach(th => th.addEventListener('click', () => {
    if(S.filters.sort === th.dataset.sort) S.filters.dir = S.filters.dir === 'desc' ? 'asc' : 'desc';
    else S.filters.sort = th.dataset.sort;
    $('sortSelect').value = S.filters.sort;
    $('sortDirection').textContent = S.filters.dir === 'desc' ? '降序' : '升序';
-    renderServers(); renderServersCards();
+    renderServersViewNow();
  }));
 }

+function bindServerInteractions(){
+  $('serversBody').addEventListener('click', e => {
+    const row = e.target.closest('.row-server');
+    if(!row || row.dataset.online !== '1') return;
+    openDetail(row.dataset.key);
+  });
+  $('serversCards').addEventListener('click', e => {
+    const card = e.target.closest('.card[data-key]');
+    if(!card || card.dataset.online !== '1') return;
+    openDetail(card.dataset.key);
+  });
+}
+
 function adminHeaders(){
  return { 'Content-Type': 'application/json', 'Authorization': `Bearer ${S.admin.token}` };
 }
@@ -916,11 +1060,19 @@ function bindAdmin(){

 $('detailClose').addEventListener('click', closeDetail);
 $('detailModal').addEventListener('click', e => { if(e.target.id === 'detailModal') closeDetail(); });
-window.addEventListener('resize', () => { renderServersCards(); renderMonitorsCards(); renderSSLCards(); if(S.openDetailKey) refreshDetail(); });
+window.addEventListener('resize', debounce(() => {
+  const compact = isCompactLayout();
+  if(S.layoutCompact !== compact){
+    S.layoutCompact = compact;
+    renderActivePanel();
+  }
+  if(S.openDetailKey) refreshDetail();
+}, 120));

 bindTabs();
 bindTheme();
 bindFilters();
+bindServerInteractions();
 bindAdmin();
 fetchData();
 setInterval(fetchData, 1000);