diff --git a/public/css/style.css b/public/css/style.css
index fd55350..a449fc4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -557,6 +557,23 @@ input:checked+.slider:before {
line-height: 1.2;
}
+.stat-card-value-group {
+ display: flex;
+ align-items: baseline;
+ gap: 6px;
+}
+
+.stat-card-value-group .stat-card-value {
+ font-size: 1.3rem; /* Slightly smaller to fit two in one row */
+}
+
+.stat-card-separator {
+ font-size: 1rem;
+ color: var(--text-muted);
+ opacity: 0.5;
+ font-weight: 300;
+}
+
.stat-card-servers .stat-card-value {
color: var(--accent-purple);
}
diff --git a/public/index.html b/public/index.html
index fec40fd..f8704aa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -181,9 +181,13 @@
-
实时总带宽
-
0 B/s
-
↓ 0 ↑ 0
+
实时带宽 (↑/↓)
+
+ 0 B/s
+ /
+ 0 B/s
+
+
实时期末统计
@@ -205,7 +209,7 @@
接收 (RX)
发送 (TX)
- 95计费 (P95)
+ 95计费 (上行)
@@ -222,7 +226,7 @@
0 B
- 95计费带宽
+ 95计费 (上行)
0 B/s
diff --git a/public/js/app.js b/public/js/app.js
index 1431081..149389c 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -19,7 +19,8 @@
memDetail: document.getElementById('memDetail'),
diskPercent: document.getElementById('diskPercent'),
diskDetail: document.getElementById('diskDetail'),
- totalBandwidth: document.getElementById('totalBandwidth'),
+ totalBandwidthTx: document.getElementById('totalBandwidthTx'),
+ totalBandwidthRx: document.getElementById('totalBandwidthRx'),
bandwidthDetail: document.getElementById('bandwidthDetail'),
traffic24hRx: document.getElementById('traffic24hRx'),
traffic24hTx: document.getElementById('traffic24hTx'),
@@ -570,8 +571,9 @@
dom.diskDetail.textContent = `${formatBytes(data.disk.used)}/${formatBytes(data.disk.total)}`;
// Bandwidth
- dom.totalBandwidth.textContent = formatBandwidth(data.network.total || 0);
- dom.bandwidthDetail.textContent = `↓ ${formatBandwidth(data.network.rx)} ↑ ${formatBandwidth(data.network.tx)}`;
+ dom.totalBandwidthTx.textContent = formatBandwidth(data.network.tx || 0);
+ dom.totalBandwidthRx.textContent = formatBandwidth(data.network.rx || 0);
+ dom.bandwidthDetail.textContent = `当前实时数据聚合`;
// 24h traffic
dom.traffic24hRx.textContent = formatBytes(data.traffic24h.rx);
@@ -586,7 +588,7 @@
// Flash animation
if (previousMetrics) {
- [dom.cpuPercent, dom.memPercent, dom.diskPercent, dom.totalBandwidth].forEach(el => {
+ [dom.cpuPercent, dom.memPercent, dom.diskPercent, dom.totalBandwidthTx, dom.totalBandwidthRx].forEach(el => {
el.classList.remove('value-update');
void el.offsetWidth; // Force reflow
el.classList.add('value-update');
diff --git a/public/js/chart.js b/public/js/chart.js
index c7c0b8b..c4f56fa 100644
--- a/public/js/chart.js
+++ b/public/js/chart.js
@@ -49,9 +49,8 @@ class AreaChart {
}
// Calculate P95 (95th percentile)
- // Common standard: 95th percentile of the peak (max of rx/tx or sum)
- // We'll use max(rx, tx) at each point which is common for billing
- const combined = data.rx.map((r, i) => Math.max(r || 0, data.tx[i] || 0));
+ // Updated: Only count Upstream (TX) as requested
+ const combined = data.tx.map(t => t || 0);
if (combined.length > 0) {
const sorted = [...combined].sort((a, b) => a - b);
const p95Idx = Math.floor(sorted.length * 0.95);