添加对指定数据源统计带宽

public/index.html

@@ -567,6 +567,13 @@
                 <label for="icpFilingInput">ICP 备案号 (如：京ICP备12345678号)</label>
                 <input type="text" id="icpFilingInput" placeholder="请输入 ICP 备案号">
               </div>
+              <div class="form-group" style="margin-top: 15px;">
+                <label>网络流量趋势 (24h) 统计数据源</label>
+                <div id="network-source-selector" class="network-source-list" style="margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; background: var(--bg-input); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color);">
+                  <div class="loading-inline" style="color: var(--text-muted); font-size: 0.9rem;">加载数据源中...</div>
+                </div>
+                <small style="display: block; margin-top: 6px; color: var(--text-muted);">选择参与 24 小时网络流量统计的 Prometheus 数据源。如果不勾选任何项，则统计所有数据源。</small>
+              </div>
               <div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
                 <button class="btn btn-add" id="btnSaveSiteSettings">保存基础设置</button>
               </div>
@@ -589,6 +596,7 @@
                         style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
                         <option value="">-- 选择数据源 --</option>
                       </select>
+
                     </div>
                     <div class="form-group">
                       <label>起航点</label>

public/js/app.js

@@ -98,6 +98,7 @@
     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'),
@@ -1907,6 +1908,21 @@
       if (dom.faviconUrlInput) dom.faviconUrlInput.value = settings.favicon_url || '';
       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');
@@ -2033,7 +2049,8 @@
       show_95_bandwidth: dom.show95BandwidthInput ? (dom.show95BandwidthInput.value === "1") : false,
       p95_type: dom.p95TypeSelect ? dom.p95TypeSelect.value : 'tx',
       ps_filing: dom.psFilingInput ? dom.psFilingInput.value.trim() : '',
-      icp_filing: dom.icpFilingInput ? dom.icpFilingInput.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(',')
     };
 
     dom.btnSaveSiteSettings.disabled = true;
@@ -2317,6 +2334,7 @@
       if (dom.totalServersLabel) dom.totalServersLabel.textContent = `服务器总数 (${promSources.length} 数据源)`;
       updateSourceFilterOptions(sourcesArray);
       renderSources(sourcesArray);
+      renderNetworkSourceSelector(sourcesArray);
     } catch (err) {
       console.error('Error loading sources:', err);
     }
@@ -2351,6 +2369,27 @@
     `).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() {
     const url = dom.sourceUrl.value.trim();