Add server status card to dashboard with public and private IP display.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -42,6 +42,165 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dashboard-server-card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dash-server-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.dash-server-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dash-server-dot {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 50%;
|
||||
background: var(--profit);
|
||||
box-shadow: 0 0 8px rgba(76, 217, 127, 0.55);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dash-server-host {
|
||||
font-size: 0.78rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.dash-server-head-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.15rem;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.dash-server-ip-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.dash-server-ip-item {
|
||||
padding: 0.55rem 0.7rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 0.55rem;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.dash-server-ip-item .label {
|
||||
display: block;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.dash-server-ip-item .value {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.dash-server-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.dash-server-metric {
|
||||
padding: 0.6rem 0.7rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 0.55rem;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dash-server-metric-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.dash-server-metric-top .label {
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.dash-server-metric-top .value {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--profit);
|
||||
}
|
||||
|
||||
.dash-server-bar {
|
||||
height: 0.35rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.dash-server-bar > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #3ecf7d, #67e8a5);
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
|
||||
.dash-server-metric-sub {
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.dash-server-net {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.78rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.dash-server-net-live {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.dash-server-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.dash-server-ip-row,
|
||||
.dash-server-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dash-server-head-meta {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-section h2 {
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
@@ -25,6 +25,22 @@
|
||||
var detailTitleEl = document.getElementById('dash-detail-title');
|
||||
var detailGridEl = document.getElementById('dash-detail-grid');
|
||||
var detailCloseBtn = document.getElementById('dash-detail-close');
|
||||
var serverHostEl = document.getElementById('dash-server-host');
|
||||
var serverUptimeEl = document.getElementById('dash-server-uptime');
|
||||
var serverUpdatedEl = document.getElementById('dash-server-updated');
|
||||
var serverPublicIpEl = document.getElementById('dash-server-public-ip');
|
||||
var serverPrivateIpEl = document.getElementById('dash-server-private-ip');
|
||||
var serverCpuEl = document.getElementById('dash-server-cpu');
|
||||
var serverCpuBarEl = document.getElementById('dash-server-cpu-bar');
|
||||
var serverCpuSubEl = document.getElementById('dash-server-cpu-sub');
|
||||
var serverMemEl = document.getElementById('dash-server-mem');
|
||||
var serverMemBarEl = document.getElementById('dash-server-mem-bar');
|
||||
var serverMemSubEl = document.getElementById('dash-server-mem-sub');
|
||||
var serverDiskEl = document.getElementById('dash-server-disk');
|
||||
var serverDiskBarEl = document.getElementById('dash-server-disk-bar');
|
||||
var serverDiskSubEl = document.getElementById('dash-server-disk-sub');
|
||||
var serverNetUpEl = document.getElementById('dash-server-net-up');
|
||||
var serverNetDownEl = document.getElementById('dash-server-net-down');
|
||||
|
||||
var pollTimer = null;
|
||||
var pollInFlight = false;
|
||||
@@ -489,6 +505,70 @@
|
||||
}
|
||||
}
|
||||
|
||||
function setServerBar(el, pct) {
|
||||
if (!el) return;
|
||||
var n = Number(pct);
|
||||
if (isNaN(n)) {
|
||||
el.style.width = '0%';
|
||||
return;
|
||||
}
|
||||
el.style.width = Math.max(0, Math.min(100, n)) + '%';
|
||||
}
|
||||
|
||||
function fmtRateKbps(v) {
|
||||
if (v == null || isNaN(Number(v))) return '—';
|
||||
var n = Number(v);
|
||||
if (n >= 1024) return (n / 1024).toFixed(1) + ' MB/s';
|
||||
return n.toFixed(1) + ' KB/s';
|
||||
}
|
||||
|
||||
function applyServer(server) {
|
||||
if (!server) return;
|
||||
if (serverHostEl) serverHostEl.textContent = server.hostname || '—';
|
||||
if (serverUptimeEl) {
|
||||
serverUptimeEl.textContent = server.uptime_label
|
||||
? ('运行 ' + server.uptime_label) : '';
|
||||
}
|
||||
if (serverUpdatedEl) {
|
||||
serverUpdatedEl.textContent = server.updated_at
|
||||
? ('更新 ' + server.updated_at) : '';
|
||||
}
|
||||
if (serverPublicIpEl) serverPublicIpEl.textContent = server.public_ip || '—';
|
||||
if (serverPrivateIpEl) serverPrivateIpEl.textContent = server.private_ip || '—';
|
||||
if (serverCpuEl) {
|
||||
serverCpuEl.textContent = server.cpu_pct != null ? (server.cpu_pct + '%') : '—';
|
||||
}
|
||||
setServerBar(serverCpuBarEl, server.cpu_pct);
|
||||
if (serverCpuSubEl) {
|
||||
serverCpuSubEl.textContent = server.cpu_cores != null
|
||||
? (server.cpu_cores + ' 核') : '';
|
||||
}
|
||||
if (serverMemEl) {
|
||||
serverMemEl.textContent = server.memory_pct != null ? (server.memory_pct + '%') : '—';
|
||||
}
|
||||
setServerBar(serverMemBarEl, server.memory_pct);
|
||||
if (serverMemSubEl) {
|
||||
serverMemSubEl.textContent = (server.memory_used_gb != null && server.memory_total_gb != null)
|
||||
? (server.memory_used_gb + ' GB / ' + server.memory_total_gb + ' GB')
|
||||
: '';
|
||||
}
|
||||
if (serverDiskEl) {
|
||||
serverDiskEl.textContent = server.disk_pct != null ? (server.disk_pct + '%') : '—';
|
||||
}
|
||||
setServerBar(serverDiskBarEl, server.disk_pct);
|
||||
if (serverDiskSubEl) {
|
||||
serverDiskSubEl.textContent = (server.disk_used_gb != null && server.disk_total_gb != null)
|
||||
? (server.disk_used_gb + ' GB / ' + server.disk_total_gb + ' GB')
|
||||
: '';
|
||||
}
|
||||
if (serverNetUpEl) {
|
||||
serverNetUpEl.textContent = '↑ ' + fmtRateKbps(server.net_up_kbps);
|
||||
}
|
||||
if (serverNetDownEl) {
|
||||
serverNetDownEl.textContent = '↓ ' + fmtRateKbps(server.net_down_kbps);
|
||||
}
|
||||
}
|
||||
|
||||
function applyAccount(data) {
|
||||
if (!data) return;
|
||||
var acc = data.account || {};
|
||||
@@ -949,6 +1029,7 @@
|
||||
return;
|
||||
}
|
||||
applyAccount(data);
|
||||
applyServer(data.server);
|
||||
applyRisk(data.risk, data.account);
|
||||
applyKeys(data.keys || []);
|
||||
applyCloses(data.closes || []);
|
||||
|
||||
Reference in New Issue
Block a user