优化界面布局

public/css/style.css

@@ -330,9 +330,9 @@ body {
 
 /* ---- Global Refresh Button ---- */
 .btn-refresh-global {
-  width: 32px;
-  height: 32px;
-  display: flex;
+  width: 40px;
+  height: 40px;
+  display: none;
   align-items: center;
   justify-content: center;
   background: var(--bg-card);
@@ -341,20 +341,18 @@ body {
   color: var(--text-secondary);
   cursor: pointer;
   transition: all 0.25s ease;
-  margin-left: 4px;
-  padding: 0;
 }
 
 .btn-refresh-global:hover {
   border-color: var(--border-hover);
   color: var(--accent-emerald);
   background: rgba(16, 185, 129, 0.08);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
 }
 
 .btn-refresh-global svg {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
 }
 
 /* ---- Theme Switch ---- */

public/index.html

@@ -155,6 +155,13 @@
         <div id="userSection">
           <button class="btn btn-login" id="btnLogin">登录</button>
         </div>
+        <button class="btn-refresh-global" id="btnGlobalRefresh" title="全局强制刷新数据" style="display: none;">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="23 4 23 10 17 10" />
+            <polyline points="1 20 1 14 7 14" />
+            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+          </svg>
+        </button>
         <button class="btn-settings" id="btnSettings" title="配置管理">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round">

public/js/app.js

@@ -117,6 +117,7 @@
     globeCard: document.getElementById('globeCard'),
     btnExpandGlobe: document.getElementById('btnExpandGlobe'),
     btnRefreshNetwork: document.getElementById('btnRefreshNetwork'),
+    btnGlobalRefresh: document.getElementById('btnGlobalRefresh'),
     showServerIpInput: document.getElementById('showServerIpInput'),
     ipMetricNameInput: document.getElementById('ipMetricNameInput'),
     ipLabelNameInput: document.getElementById('ipLabelNameInput'),
@@ -291,7 +292,6 @@
     if (dom.modalClose) dom.modalClose.addEventListener('click', closeSettings);
     if (dom.btnTest) dom.btnTest.addEventListener('click', testConnection);
     if (dom.btnAdd) dom.btnAdd.addEventListener('click', addSource);
-    if (dom.btnRefreshNetwork) dom.btnRefreshNetwork.addEventListener('click', fetchNetworkHistory);
 
     // Auth & Login
     if (dom.btnLogin) dom.btnLogin.addEventListener('click', openLoginModal);
@@ -477,23 +477,28 @@
       });
     }
 
+    const handleGlobalRefresh = async (btn) => {
+      const icon = btn.querySelector('svg');
+      if (icon) icon.style.animation = 'spin 0.8s ease-in-out';
+      
+      await Promise.all([
+        fetchNetworkHistory(true),
+        fetchMetrics(true)
+      ]);
+      
+      if (icon) {
+        setTimeout(() => {
+          icon.style.animation = '';
+        }, 800);
+      }
+    };
+
     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);
-        }
-      });
+      dom.btnRefreshNetwork.addEventListener('click', () => handleGlobalRefresh(dom.btnRefreshNetwork));
+    }
+
+    if (dom.btnGlobalRefresh) {
+      dom.btnGlobalRefresh.addEventListener('click', () => handleGlobalRefresh(dom.btnGlobalRefresh));
     }
 
     // Keyboard shortcut
@@ -798,38 +803,21 @@
   function updateUserUI(username) {
     if (username) {
       user = username;
-      dom.btnSettings.style.display = 'flex';
+      if (dom.btnSettings) dom.btnSettings.style.display = 'flex';
+      if (dom.btnGlobalRefresh) dom.btnGlobalRefresh.style.display = 'flex';
+      
       dom.userSection.innerHTML = `
         <div class="user-info">
           <span class="username">${escapeHtml(username)}</span>
           <button class="btn btn-logout" id="btnLogout">退出</button>
-          <button class="btn-refresh-global" id="btnGlobalRefresh" title="全局数据刷新">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <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>
       `;
       document.getElementById('btnLogout').addEventListener('click', handleLogout);
-      document.getElementById('btnGlobalRefresh').addEventListener('click', async () => {
-        const btn = document.getElementById('btnGlobalRefresh');
-        const icon = btn.querySelector('svg');
-        if (icon) icon.style.animation = 'spin 0.8s ease-in-out';
-        
-        await Promise.all([
-          fetchNetworkHistory(true),
-          fetchMetrics(true)
-        ]);
-        
-        if (icon) {
-          setTimeout(() => {
-            icon.style.animation = '';
-          }, 800);
-        }
-      });
     } else {
       user = null;
-      dom.btnSettings.style.display = 'none';
+      if (dom.btnSettings) dom.btnSettings.style.display = 'none';
+      if (dom.btnGlobalRefresh) dom.btnGlobalRefresh.style.display = 'none';
+      
       dom.userSection.innerHTML = `<button class="btn btn-login" id="btnLogin">登录</button>`;
       document.getElementById('btnLogin').addEventListener('click', openLoginModal);
     }