修复一点BUG

public/index.html

@@ -519,10 +519,6 @@
                 <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,8 +93,7 @@
     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 ----
@@ -916,11 +915,6 @@
         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;">
@@ -953,30 +947,31 @@
                     <polyline points="6 9 12 15 18 9"></polyline>
                 </svg>
             </div>
-            <div class="metric-item-content" id="metrics-content-${m.key}">
+                <div class="metric-item-content" id="metrics-content-${m.key}">
-                <div class="chart-controls">
+                    <div class="chart-controls" ${m.key === 'networkTrend' ? 'style="display:none;"' : ''}>
-                    <div class="time-range-group">
+                        <div class="time-range-group">
-                        <div class="time-range-selector">
+                            <div class="time-range-selector">
-                            <button class="time-range-btn ${m.key !== 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
+                                <button class="time-range-btn ${m.key !== 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
-                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '6h', event)">6h</button>
+                                <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '6h', event)">6h</button>
-                            <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '12h', event)">12h</button>
+                                <button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '12h', event)">12h</button>
-                            <button class="time-range-btn ${m.key === 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '24h', event)">24h</button>
+                                <button class="time-range-btn ${m.key === 'networkTrend' ? 'active' : ''}" onclick="loadMetricHistory('${m.key}', '24h', event)">24h</button>
-                        </div>
+                            </div>
-                        <div class="custom-range-selector">
+                            <div class="custom-range-selector">
-                            <input type="text" class="custom-range-input" id="custom-range-${m.key}" placeholder="相对范围 (如: 2h)" onkeydown="if(event.key==='Enter') loadCustomMetricHistory('${m.key}', event)">
+                                <input type="text" class="custom-range-input" id="custom-range-${m.key}" placeholder="相对范围 (如: 2h)" onkeydown="if(event.key==='Enter') loadCustomMetricHistory('${m.key}', event)">
-                        </div>
+                            </div>
-                        <div class="absolute-range-selector">
+                            <div class="absolute-range-selector">
-                            <input type="datetime-local" class="time-input" id="start-time-${m.key}">
+                                <input type="datetime-local" class="time-input" id="start-time-${m.key}">
-                            <span style="color: var(--text-secondary); font-size: 0.7rem;">至</span>
+                                <span style="color: var(--text-secondary); font-size: 0.7rem;">至</span>
-                            <input type="datetime-local" class="time-input" id="end-time-${m.key}">
+                                <input type="datetime-local" class="time-input" id="end-time-${m.key}">
-                            <button class="btn-custom-go" onclick="loadCustomMetricHistory('${m.key}', event)">查询</button>
+                                <button class="btn-custom-go" onclick="loadCustomMetricHistory('${m.key}', event)">查询</button>
+                            </div>
                         </div>
                     </div>
+                    <div id="summary-${m.key}" style="display:none;"></div>
+                    <div class="detail-chart-wrapper" id="wrapper-${m.key}" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
+                        <canvas id="chart-${m.key}"></canvas>
+                    </div>
                 </div>
-                <div class="detail-chart-wrapper" style="${m.key === 'cpuBusy' ? 'height: 260px;' : ''}">
-                    <canvas id="chart-${m.key}"></canvas>
-                </div>
-            </div>
         </div>
     `).join('');
 
@@ -1079,12 +1074,73 @@
         data.series = null; // This tells MetricChart to draw a single line instead of stacked area
       }
 
-      chart.setData(data);
+      if (metricKey === 'networkTrend') {
+          const stats = calculateHistoryStats(data);
+          const summaryDiv = document.getElementById(`summary-${metricKey}`);
+          const wrapperDiv = document.getElementById(`wrapper-${metricKey}`);
+          if (summaryDiv && wrapperDiv) {
+              summaryDiv.style.display = 'block';
+              wrapperDiv.style.display = 'none'; // Hide the chart canvas
+              summaryDiv.innerHTML = `
+                  <div class="network-summary-grid">
+                      <div class="summary-stat-item">
+                          <span class="summary-stat-label">24h 接收总量</span>
+                          <span class="summary-stat-value">${formatBytes(stats.rxTotal)}</span>
+                      </div>
+                      <div class="summary-stat-item">
+                          <span class="summary-stat-label">24h 发送总量</span>
+                          <span class="summary-stat-value">${formatBytes(stats.txTotal)}</span>
+                      </div>
+                      <div class="summary-stat-item stat-p95">
+                          <span class="summary-stat-label">95计费 (上行)</span>
+                          <span class="summary-stat-value">${formatBandwidth(stats.p95)}</span>
+                      </div>
+                      <div class="summary-stat-item stat-total">
+                          <span class="summary-stat-label">24h 网络总流量</span>
+                          <span class="summary-stat-value">${formatBytes(stats.total)}</span>
+                      </div>
+                  </div>
+              `;
+          }
+      } else {
+          chart.setData(data);
+      }
     } catch (err) {
       console.error(`Error loading history for ${metricKey}:`, err);
     }
   };
 
+  function calculateHistoryStats(data) {
+    if (!data.timestamps || data.timestamps.length < 2) {
+      return { rxTotal: 0, txTotal: 0, p95: 0, total: 0 };
+    }
+
+    const tx = data.tx || [];
+    const rx = data.rx || [];
+    const ts = data.timestamps;
+
+    let rxTotal = 0;
+    let txTotal = 0;
+
+    for (let i = 0; i < ts.length - 1; i++) {
+        const duration = (ts[i+1] - ts[i]) / 1000; // in seconds
+        rxTotal += (rx[i] || 0) * duration;
+        txTotal += (tx[i] || 0) * duration;
+    }
+
+    // P95 calculation for TX
+    const sortedTx = [...tx].sort((a, b) => a - b);
+    const p95Idx = Math.floor(sortedTx.length * 0.95);
+    const p95 = sortedTx.length > 0 ? sortedTx[p95Idx] : 0;
+
+    return {
+        rxTotal,
+        txTotal,
+        p95,
+        total: rxTotal + txTotal
+    };
+  }
+
   window.loadCustomMetricHistory = async function (metricKey, event) {
     if (event) event.stopPropagation();