添加刷新按钮

public/css/style.css

@@ -1873,6 +1873,11 @@ input:checked+.slider:before {
 }
 
 /* ---- Animations ---- */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;

public/index.html

@@ -242,6 +242,13 @@
                 </svg>
                 网络流量趋势 (24h)
               </h2>
+              <div class="chart-header-actions">
+                <button class="btn-icon" id="btnRefreshNetwork" title="刷新流量趋势">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
+                    <path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                  </svg>
+                </button>
+              </div>
             </div>
             <div class="chart-legend">
               <span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span

public/js/app.js

@@ -110,6 +110,7 @@
     partitionHeader: document.getElementById('partitionHeader'),
     globeCard: document.getElementById('globeCard'),
     btnExpandGlobe: document.getElementById('btnExpandGlobe'),
+    btnRefreshNetwork: document.getElementById('btnRefreshNetwork'),
     // Footer & Filing
     icpFilingInput: document.getElementById('icpFilingInput'),
     psFilingInput: document.getElementById('psFilingInput'),
@@ -353,6 +354,25 @@
       });
     }
 
+    if (dom.btnRefreshNetwork) {
+      dom.btnRefreshNetwork.addEventListener('click', async () => {
+        const icon = dom.btnRefreshNetwork.querySelector('svg');
+        if (icon) icon.style.animation = 'spin 0.8s ease-in-out';
+        
+        // Force refresh all Prometheus 24h data and overview
+        await Promise.all([
+          fetchNetworkHistory(true),
+          fetchMetrics(true)
+        ]);
+        
+        if (icon) {
+          setTimeout(() => {
+            icon.style.animation = '';
+          }, 800);
+        }
+      });
+    }
+
     // Keyboard shortcut
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
@@ -693,9 +713,10 @@
   }
 
   // ---- Fetch Metrics ----
-  async function fetchMetrics() {
+  async function fetchMetrics(force = false) {
     try {
-      const response = await fetch('/api/metrics/overview');
+      const url = `/api/metrics/overview${force ? '?force=true' : ''}`;
+      const response = await fetch(url);
       const data = await response.json();
       allServersData = data.servers || [];
       updateDashboard(data);
@@ -1619,9 +1640,10 @@
   };
 
   // ---- Network History ----
-  async function fetchNetworkHistory() {
+  async function fetchNetworkHistory(force = false) {
     try {
-      const response = await fetch('/api/metrics/network-history');
+      const url = `/api/metrics/network-history${force ? '?force=true' : ''}`;
+      const response = await fetch(url);
       const data = await response.json();
       networkChart.setData(data);
       if (dom.trafficP95 && networkChart.p95) {