优化布局

public/index.html

@@ -519,6 +519,10 @@
                 <span class="info-label">硬盘总量统计</span>
                 <span class="info-value" id="detailDiskTotal">0 GB</span>
               </div>
+              <div class="info-item">
+                <span class="info-label">24h 网络总流量</span>
+                <span class="info-value" id="detailTraffic24h">0 B</span>
+              </div>
             </div>
           </div>
         </div>

public/js/app.js

@@ -93,7 +93,8 @@
     detailPartitionsContainer: document.getElementById('detailPartitionsContainer'),
     detailPartitionsList: document.getElementById('detailPartitionsList'),
     partitionSummary: document.getElementById('partitionSummary'),
-    partitionHeader: document.getElementById('partitionHeader')
+    partitionHeader: document.getElementById('partitionHeader'),
+    detailTraffic24h: document.getElementById('detailTraffic24h')
   };
 
   // ---- State ----
@@ -915,6 +916,11 @@
         dom.detailDiskTotal.textContent = formatBytes(totalDiskSize);
     }
 
+    // 24h Traffic Total
+    if (dom.detailTraffic24h && data.traffic24h) {
+        dom.detailTraffic24h.textContent = formatBytes((data.traffic24h.rx || 0) + (data.traffic24h.tx || 0));
+    }
+
     // Define metrics to show
     const cpuValueHtml = `
         <div style="display: flex; align-items: baseline; gap: 8px;">
@@ -930,7 +936,7 @@
       { key: 'rootFsUsedPct', label: '根分区使用率 (/)', value: formatPercent(data.rootFsUsedPct) },
       { key: 'netRx', label: '网络接收速率 (RX)', value: formatBandwidth(data.netRx) },
       { key: 'netTx', label: '网络发送速率 (TX)', value: formatBandwidth(data.netTx) },
-      { key: 'networkTrend', label: '网络流量趋势 (24h)', value: '<span style="font-size: 0.75rem; color: var(--accent-indigo);">查看实时趋势线</span>' },
+      { key: 'networkTrend', label: '网络流量趋势 (24h)', value: '' },
       { key: 'sockstatTcp', label: 'TCP 链接数 (Sockstat)', value: data.sockstatTcp.toFixed(0) },
       { key: 'sockstatTcpMem', label: 'TCP 内存占用', value: formatBytes(data.sockstatTcpMem) }
     ];

server/prometheus-service.js

@@ -407,6 +407,32 @@ async function get24hTrafficSum(url) {
   };
 }
 
+/**
+ * Get total traffic for a specific server in the past 24h
+ */
+async function get24hServerTrafficSum(url, instance, job) {
+  const node = resolveToken(instance);
+  const now = Math.floor(Date.now() / 1000);
+  const start = now - 86400;
+  const step = 60;
+
+  const rxExpr = `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`;
+  const txExpr = `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`;
+
+  const [rxResult, txResult] = await Promise.all([
+    queryRange(url, rxExpr, start, now, step).catch(() => []),
+    queryRange(url, txExpr, start, now, step).catch(() => [])
+  ]);
+
+  const rxValues = rxResult.length > 0 ? rxResult[0].values : [];
+  const txValues = txResult.length > 0 ? txResult[0].values : [];
+
+  return {
+    rx: calculateTrafficFromHistory(rxValues),
+    tx: calculateTrafficFromHistory(txValues)
+  };
+}
+
 /**
  * Get network traffic history (past 24h, 5-min intervals for chart)
  */
@@ -583,6 +609,15 @@ async function getServerDetails(baseUrl, instance, job) {
   delete results.partitions_size;
   delete results.partitions_free;
 
+  // Add 24h traffic sum for this specific server
+  try {
+      const traffic24h = await get24hServerTrafficSum(baseUrl, instance, job);
+      results.traffic24h = traffic24h;
+  } catch (e) {
+      console.error(`[Prometheus] Error fetching 24h traffic for ${node}:`, e.message);
+      results.traffic24h = { rx: 0, tx: 0 };
+  }
+
   return results;
 }