优化数据库查询布局

public/js/app.js

@@ -103,7 +103,6 @@
     oldPasswordInput: document.getElementById('oldPassword'),
     newPasswordInput: document.getElementById('newPassword'),
     confirmNewPasswordInput: document.getElementById('confirmNewPassword'),
-    networkSourceSelector: document.getElementById('network-source-selector'),
     btnChangePassword: document.getElementById('btnChangePassword'),
     changePasswordMessage: document.getElementById('changePasswordMessage'),
     globeContainer: document.getElementById('globeContainer'),
@@ -276,7 +275,7 @@
           dom.serverSourceOption.style.display = 'none';
           dom.isServerSource.checked = false;
         } else {
-          dom.serverSourceOption.style.display = 'flex';
+          dom.serverSourceOption.style.display = '';
           dom.isServerSource.checked = true;
         }
       });
@@ -618,6 +617,7 @@
     checkAuthStatus();
 
     // Start data fetching
+    loadSources();
     fetchMetrics();
     fetchNetworkHistory();
     fetchLatency();
@@ -2104,21 +2104,6 @@
       if (dom.showPageNameInput) dom.showPageNameInput.value = settings.show_page_name !== undefined ? settings.show_page_name.toString() : "1";
       if (dom.requireLoginForServerDetailsInput) dom.requireLoginForServerDetailsInput.value = settings.require_login_for_server_details ? "1" : "0";
       
-      // Handle network data sources checkboxes
-      if (settings.network_data_sources) {
-        const selected = settings.network_data_sources.split(',').map(s => s.trim());
-        const checkboxes = dom.networkSourceSelector.querySelectorAll('input[type="checkbox"]');
-        checkboxes.forEach(cb => {
-          cb.checked = selected.includes(cb.value);
-        });
-        // We'll also store this in a temporary place because loadSources might run later
-        dom.networkSourceSelector.dataset.pendingSelected = settings.network_data_sources;
-      } else {
-        const checkboxes = dom.networkSourceSelector.querySelectorAll('input[type="checkbox"]');
-        checkboxes.forEach(cb => cb.checked = false);
-        dom.networkSourceSelector.dataset.pendingSelected = "";
-      }
-
       // Handle Theme Priority: localStorage > Site Default
       const savedTheme = localStorage.getItem('theme');
       const themeToApply = savedTheme || settings.default_theme || 'dark';
@@ -2278,7 +2263,6 @@
       p95_type: dom.p95TypeSelect ? dom.p95TypeSelect.value : 'tx',
       ps_filing: dom.psFilingInput ? dom.psFilingInput.value.trim() : '',
       icp_filing: dom.icpFilingInput ? dom.icpFilingInput.value.trim() : '',
-      network_data_sources: Array.from(dom.networkSourceSelector.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value).join(','),
       show_server_ip: dom.showServerIpInput ? (dom.showServerIpInput.value === "1") : false,
       ip_metric_name: dom.ipMetricNameInput ? dom.ipMetricNameInput.value.trim() : null,
       ip_label_name: dom.ipLabelNameInput ? dom.ipLabelNameInput.value.trim() : 'address',
@@ -2596,8 +2580,14 @@
 
   async function loadSources() {
     try {
+      if (dom.sourceItems) {
+        dom.sourceItems.innerHTML = '<div class="source-loading"><div class="dot dot-pulse"></div><span>正在加载数据源...</span></div>';
+      }
       const response = await fetch('/api/sources');
       if (response.status === 401) {
+        if (dom.sourceItems) {
+          dom.sourceItems.innerHTML = '<div class="source-empty">请登录后管理数据源</div>';
+        }
         promptLogin('登录后可查看和管理数据源');
         return;
       }
@@ -2608,7 +2598,6 @@
       if (dom.totalServersLabel) dom.totalServersLabel.textContent = `服务器总数 (${promSources.length} 数据源)`;
       updateSourceFilterOptions(sourcesArray);
       renderSources(sourcesArray);
-      renderNetworkSourceSelector(sourcesArray);
     } catch (err) {
       console.error('Error loading sources:', err);
     }
@@ -2645,26 +2634,6 @@
     `).join('');
   }
 
-  function renderNetworkSourceSelector(sources) {
-    if (!dom.networkSourceSelector) return;
-    
-    // Only show Prometheus sources for filtering
-    const promSources = sources.filter(s => s.type !== 'blackbox');
-    
-    if (promSources.length === 0) {
-      dom.networkSourceSelector.innerHTML = '<div style="color: var(--text-muted); font-size: 0.9rem;">暂无可用数据源</div>';
-      return;
-    }
-
-    const pendingSelected = dom.networkSourceSelector.dataset.pendingSelected ? dom.networkSourceSelector.dataset.pendingSelected.split(',').map(s => s.trim()) : [];
-
-    dom.networkSourceSelector.innerHTML = promSources.map(source => `
-      <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); font-size: 0.9rem;">
-        <input type="checkbox" value="${escapeHtml(source.name)}" ${pendingSelected.includes(source.name) ? 'checked' : ''} style="cursor: pointer;">
-        <span>${escapeHtml(source.name)}</span>
-      </label>
-    `).join('');
-  }
 
   // ---- Test Connection ----
   async function testConnection() {
@@ -2726,7 +2695,7 @@
     if (source.type === 'blackbox') {
       dom.serverSourceOption.style.display = 'none';
     } else {
-      dom.serverSourceOption.style.display = 'flex';
+      dom.serverSourceOption.style.display = '';
     }
 
     dom.btnAdd.textContent = '保存修改';
@@ -2754,7 +2723,7 @@
     dom.sourceDesc.value = '';
     if (dom.isOverviewSource) dom.isOverviewSource.checked = true;
     if (dom.isDetailSource) dom.isDetailSource.checked = true;
-    dom.serverSourceOption.style.display = 'flex';
+    dom.serverSourceOption.style.display = '';
     dom.btnAdd.textContent = '添加';
     
     const cancelBtn = document.getElementById('btnCancelEditSource');