diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css index cfd708d..5fb7082 100644 --- a/manual_trading_hub/static/app.css +++ b/manual_trading_hub/static/app.css @@ -652,11 +652,10 @@ button:disabled { .host-status-bar { display: flex; - flex-wrap: wrap; - align-items: center; - gap: 10px 16px; - margin: 0 0 10px; - padding: 10px 12px; + flex-direction: column; + gap: 12px; + margin: 0 0 12px; + padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--panel); @@ -667,12 +666,20 @@ button:disabled { display: none !important; } +.host-status-top { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 8px 16px; +} + .host-status-head { - display: inline-flex; + display: flex; align-items: center; gap: 8px; min-width: 0; - flex: 0 0 auto; + flex: 1 1 220px; } .host-status-dot { @@ -701,36 +708,54 @@ button:disabled { .host-status-name { font-weight: 600; color: var(--text); + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } -.host-status-uptime { +.host-status-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: 6px 14px; color: var(--muted); font-size: 11px; + flex: 0 1 auto; +} + +.host-status-uptime, +.host-status-updated { white-space: nowrap; } .host-status-metrics { - display: flex; - flex: 1 1 520px; - flex-wrap: wrap; - align-items: center; - gap: 8px 14px; - min-width: 0; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; } -.host-metric { - display: grid; - grid-template-columns: 42px minmax(72px, 1fr) auto; - align-items: center; +.host-metric-card { + display: flex; + flex-direction: column; gap: 8px; min-width: 0; - flex: 1 1 180px; + padding: 10px 12px; + border-radius: 8px; + border: 1px solid var(--border-soft); + background: rgba(0, 0, 0, 0.14); } -.host-metric-net { - grid-template-columns: 42px auto; - flex: 1 1 220px; +html[data-theme="light"] .host-metric-card { + background: rgba(0, 0, 0, 0.03); +} + +.host-metric-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 10px; } .host-metric-label { @@ -740,7 +765,7 @@ button:disabled { } .host-metric-bar { - height: 6px; + height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; @@ -771,7 +796,36 @@ html[data-theme="light"] .host-metric-bar { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; + font-size: 13px; + font-weight: 600; +} + +.host-metric-val-net { font-size: 11px; + font-weight: 500; + color: var(--muted); +} + +.host-metric-sub, +.host-net-line { + color: var(--muted); + font-size: 11px; + font-variant-numeric: tabular-nums; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.host-net-lines { + display: flex; + flex-direction: column; + gap: 4px; +} + +@media (max-width: 1080px) { + .host-status-metrics { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } .grid-monitor.grid-monitor-tiles { @@ -2738,22 +2792,22 @@ body.login-page { } .host-status-bar { + gap: 10px; + padding: 10px 12px; + } + + .host-status-top { flex-direction: column; align-items: stretch; - gap: 8px; - padding: 8px 10px; + } + + .host-status-meta { + justify-content: flex-start; } .host-status-metrics { - flex-direction: column; - align-items: stretch; - gap: 6px; - } - - .host-metric, - .host-metric-net { - flex: 1 1 auto; - width: 100%; + grid-template-columns: minmax(0, 1fr); + gap: 8px; } .card-head { diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js index b2788e0..7f07c37 100644 --- a/manual_trading_hub/static/app.js +++ b/manual_trading_hub/static/app.js @@ -112,24 +112,35 @@ function renderHostStatusBar(data) { const bar = document.getElementById("host-status-bar"); if (!bar) return; + const dot = document.getElementById("host-status-dot"); + const name = document.getElementById("host-status-name"); + const uptime = document.getElementById("host-status-uptime"); + const updated = document.getElementById("host-status-updated"); + const cpuVal = document.getElementById("host-cpu-val"); + const cpuSub = document.getElementById("host-cpu-sub"); + const memVal = document.getElementById("host-mem-val"); + const memSub = document.getElementById("host-mem-sub"); + const diskVal = document.getElementById("host-disk-val"); + const diskSub = document.getElementById("host-disk-sub"); + const netUp = document.getElementById("host-net-up"); + const netDown = document.getElementById("host-net-down"); if (!data || !data.ok) { bar.classList.remove("hidden"); - const dot = document.getElementById("host-status-dot"); - const name = document.getElementById("host-status-name"); - const uptime = document.getElementById("host-status-uptime"); - if (dot) { - dot.className = "host-status-dot bad"; + if (dot) dot.className = "host-status-dot bad"; + if (name) { + name.textContent = "服务器"; + name.title = ""; } - if (name) name.textContent = "服务器"; if (uptime) uptime.textContent = (data && data.msg) || "状态不可用"; - const cpuVal = document.getElementById("host-cpu-val"); - const memVal = document.getElementById("host-mem-val"); - const diskVal = document.getElementById("host-disk-val"); - const netVal = document.getElementById("host-net-val"); + if (updated) updated.textContent = ""; if (cpuVal) cpuVal.textContent = "—"; + if (cpuSub) cpuSub.textContent = ""; if (memVal) memVal.textContent = "—"; + if (memSub) memSub.textContent = ""; if (diskVal) diskVal.textContent = "—"; - if (netVal) netVal.textContent = "—"; + if (diskSub) diskSub.textContent = ""; + if (netUp) netUp.textContent = "↑ —"; + if (netDown) netDown.textContent = "↓ —"; return; } bar.classList.remove("hidden"); @@ -145,50 +156,31 @@ let overall = "ok"; if (levels.includes("bad")) overall = "bad"; else if (levels.includes("warn")) overall = "warn"; - const dot = document.getElementById("host-status-dot"); - const name = document.getElementById("host-status-name"); - const uptime = document.getElementById("host-status-uptime"); if (dot) dot.className = "host-status-dot " + overall; - if (name) name.textContent = data.hostname || "服务器"; - if (uptime) { - uptime.textContent = - "运行 " + - fmtHostUptime(data.uptime_sec) + - (data.updated_at ? " · " + data.updated_at : ""); + const hostname = data.hostname || "服务器"; + if (name) { + name.textContent = hostname; + name.title = hostname; } + if (uptime) uptime.textContent = "运行 " + fmtHostUptime(data.uptime_sec); + if (updated) updated.textContent = data.updated_at ? "更新 " + data.updated_at : ""; setHostMetricBar(document.getElementById("host-cpu-fill"), cpu.percent); setHostMetricBar(document.getElementById("host-mem-fill"), mem.percent); setHostMetricBar(document.getElementById("host-disk-fill"), disk.percent); - const cpuVal = document.getElementById("host-cpu-val"); - const memVal = document.getElementById("host-mem-val"); - const diskVal = document.getElementById("host-disk-val"); - const netVal = document.getElementById("host-net-val"); - if (cpuVal) { - cpuVal.textContent = - (cpu.percent != null ? cpu.percent + "%" : "—") + - (cpu.count ? " · " + cpu.count + "核" : ""); + if (cpuVal) cpuVal.textContent = cpu.percent != null ? cpu.percent + "%" : "—"; + if (cpuSub) cpuSub.textContent = cpu.count ? cpu.count + " 核" : ""; + if (memVal) memVal.textContent = mem.percent != null ? mem.percent + "%" : "—"; + if (memSub) { + memSub.textContent = + fmtHostBytes(mem.used_bytes) + " / " + fmtHostBytes(mem.total_bytes); } - if (memVal) { - memVal.textContent = - (mem.percent != null ? mem.percent + "%" : "—") + - " · " + - fmtHostBytes(mem.used_bytes) + - "/" + - fmtHostBytes(mem.total_bytes); - } - if (diskVal) { - diskVal.textContent = - (disk.percent != null ? disk.percent + "%" : "—") + - " · " + - fmtHostBytes(disk.used_bytes) + - "/" + - fmtHostBytes(disk.total_bytes); - } - if (netVal) { - const up = fmtHostBytes(net.sent_rate_bps) + "/s"; - const down = fmtHostBytes(net.recv_rate_bps) + "/s"; - netVal.textContent = "↑" + up + " ↓" + down; + if (diskVal) diskVal.textContent = disk.percent != null ? disk.percent + "%" : "—"; + if (diskSub) { + diskSub.textContent = + fmtHostBytes(disk.used_bytes) + " / " + fmtHostBytes(disk.total_bytes); } + if (netUp) netUp.textContent = "↑ " + fmtHostBytes(net.sent_rate_bps) + "/s"; + if (netDown) netDown.textContent = "↓ " + fmtHostBytes(net.recv_rate_bps) + "/s"; } async function fetchHostStatus() { diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html index 34fe8f8..d206bda 100644 --- a/manual_trading_hub/static/index.html +++ b/manual_trading_hub/static/index.html @@ -62,30 +62,50 @@

MON 监控区