dekun/qihuo
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Add server status card to dashboard with public and private IP display.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-02 15:36:55 +08:00
parent 5328673ce8
commit aae897b7eb
5 changed files with 521 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/web/static/css/dashboard.css
+159
View File
@@ -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;
}
modules/web/static/js/dashboard.js
+81
View File
@@ -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 || []);
modules/web/templates/dashboard.html
+60
View File
@@ -32,6 +32,66 @@
</div>
</div>
<div class="card dashboard-section dashboard-server-card" id="dash-server-card">
<div class="dash-server-head">
<div class="dash-server-title">
<span class="dash-server-dot" aria-hidden="true"></span>
<span>服务器状态</span>
<span class="dash-server-host text-muted" id="dash-server-host">—</span>
</div>
<div class="dash-server-head-meta text-muted">
<span id="dash-server-uptime"></span>
<span id="dash-server-updated"></span>
</div>
</div>
<div class="dash-server-ip-row">
<div class="dash-server-ip-item">
<span class="label">外网 IP</span>
<span class="value" id="dash-server-public-ip">—</span>
</div>
<div class="dash-server-ip-item">
<span class="label">内网 IP</span>
<span class="value" id="dash-server-private-ip">—</span>
</div>
</div>
<div class="dash-server-metrics" id="dash-server-metrics">
<div class="dash-server-metric">
<div class="dash-server-metric-top">
<span class="label">CPU</span>
<span class="value" id="dash-server-cpu">—</span>
</div>
<div class="dash-server-bar"><span id="dash-server-cpu-bar"></span></div>
<div class="dash-server-metric-sub text-muted" id="dash-server-cpu-sub"></div>
</div>
<div class="dash-server-metric">
<div class="dash-server-metric-top">
<span class="label">内存</span>
<span class="value" id="dash-server-mem">—</span>
</div>
<div class="dash-server-bar"><span id="dash-server-mem-bar"></span></div>
<div class="dash-server-metric-sub text-muted" id="dash-server-mem-sub"></div>
</div>
<div class="dash-server-metric">
<div class="dash-server-metric-top">
<span class="label">硬盘</span>
<span class="value" id="dash-server-disk">—</span>
</div>
<div class="dash-server-bar"><span id="dash-server-disk-bar"></span></div>
<div class="dash-server-metric-sub text-muted" id="dash-server-disk-sub"></div>
</div>
<div class="dash-server-metric">
<div class="dash-server-metric-top">
<span class="label">网络</span>
<span class="value dash-server-net-live">实时</span>
</div>
<div class="dash-server-net">
<span id="dash-server-net-up">↑ —</span>
<span id="dash-server-net-down">↓ —</span>
</div>
</div>
</div>
</div>
<div class="card dashboard-section dashboard-risk-card" id="dash-risk-card">
<h2 class="dashboard-risk-heading dash-section-toggle" id="dash-risk-toggle" role="button" tabindex="0" aria-expanded="false" aria-controls="dash-risk-body">
<span class="dash-section-toggle-label">风控说明</span>