添加95带宽计算

public/js/app.js

@@ -25,6 +25,7 @@
     traffic24hRx: document.getElementById('traffic24hRx'),
     traffic24hTx: document.getElementById('traffic24hTx'),
     traffic24hTotal: document.getElementById('traffic24hTotal'),
+    trafficP95: document.getElementById('trafficP95'),
     networkCanvas: document.getElementById('networkCanvas'),
     serverTableBody: document.getElementById('serverTableBody'),
     btnSettings: document.getElementById('btnSettings'),
@@ -58,7 +59,8 @@
     closeLoginModal: document.getElementById('closeLoginModal'),
     loginForm: document.getElementById('loginForm'),
     loginError: document.getElementById('loginError'),
-    gaugesTime: document.getElementById('gaugesTime')
+    gaugesTime: document.getElementById('gaugesTime'),
+    footerTime: document.getElementById('footerTime')
   };
 
   // ---- State ----
@@ -120,7 +122,7 @@
     // Start data fetching
     fetchMetrics();
     fetchNetworkHistory();
-    
+
     // Site settings
     if (window.SITE_SETTINGS) {
       applySiteSettings(window.SITE_SETTINGS);
@@ -128,14 +130,14 @@
       const savedTheme = localStorage.getItem('theme');
       const currentTheme = savedTheme || window.SITE_SETTINGS.default_theme || 'dark';
       updateThemeIcons(currentTheme);
-      
+
       // Still populate inputs
       dom.pageNameInput.value = window.SITE_SETTINGS.page_name || '';
       dom.siteTitleInput.value = window.SITE_SETTINGS.title || '';
       dom.logoUrlInput.value = window.SITE_SETTINGS.logo_url || '';
       dom.defaultThemeInput.value = window.SITE_SETTINGS.default_theme || 'dark';
     }
-    
+
     loadSiteSettings();
 
     setInterval(fetchMetrics, REFRESH_INTERVAL);
@@ -155,7 +157,7 @@
     if (theme === 'auto') {
       actualTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
     }
-    
+
     const isLight = actualTheme === 'light';
     dom.themeToggle.checked = isLight;
     document.documentElement.classList.toggle('light-theme', isLight);
@@ -259,8 +261,12 @@
   }
 
   function updateGaugesTime() {
+    const clockStr = formatClock();
     if (dom.gaugesTime) {
-      dom.gaugesTime.textContent = formatClock();
+      dom.gaugesTime.textContent = clockStr;
+    }
+    if (dom.footerTime) {
+      dom.footerTime.textContent = clockStr;
     }
   }
 
@@ -387,6 +393,9 @@
       const response = await fetch('/api/metrics/network-history');
       const data = await response.json();
       networkChart.setData(data);
+      if (dom.trafficP95 && networkChart.p95) {
+        dom.trafficP95.textContent = formatBandwidth(networkChart.p95);
+      }
     } catch (err) {
       console.error('Error fetching network history:', err);
     }
@@ -419,7 +428,7 @@
     try {
       const response = await fetch('/api/settings');
       const settings = await response.json();
-      
+
       window.SITE_SETTINGS = settings; // Cache it globally
 
       // Update inputs
@@ -427,7 +436,7 @@
       dom.siteTitleInput.value = settings.title || '';
       dom.logoUrlInput.value = settings.logo_url || '';
       dom.defaultThemeInput.value = settings.default_theme || 'dark';
-      
+
       // Apply to UI
       applySiteSettings(settings);
 
@@ -457,7 +466,7 @@
     if (settings.title) {
       dom.logoText.textContent = settings.title;
     }
-    
+
     // Logo Icon
     if (settings.logo_url) {
       dom.logoIconContainer.innerHTML = `<img src="${escapeHtml(settings.logo_url)}" alt="Logo" class="logo-icon-img">`;