优化数据库查询布局

public/index.html

@@ -476,23 +476,25 @@
                   <label for="sourceDesc">描述 (可选)</label>
                   <input type="text" id="sourceDesc" placeholder="数据源描述" autocomplete="off">
                 </div>
-                <div class="form-group" id="serverSourceOption"
-                  style="display: flex; align-items: flex-end; padding-bottom: 8px; flex-wrap: wrap; gap: 12px; margin-top: 4px;">
-                  <label
-                    style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
-                    <input type="checkbox" id="isOverviewSource" checked
-                      style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
-                    <span>加入总览统计</span>
-                  </label>
-                  <label
-                    style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
-                    <input type="checkbox" id="isDetailSource" checked
-                      style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
-                    <span>加入详情展示</span>
-                  </label>
-                  <label id="isServerSourceContainer" style="display: none;">
-                    <input type="checkbox" id="isServerSource" checked disabled>
-                  </label>
+                <div class="form-group form-group-wide" id="serverSourceOption">
+                  <label style="margin-bottom: 8px;">数据源偏好设置</label>
+                  <div class="source-options-grid">
+                    <label class="source-option-item" title="将此数据源的服务器指标聚合到首页总览中">
+                      <div class="switch-wrapper">
+                        <input type="checkbox" id="isOverviewSource" checked class="switch-input">
+                        <div class="switch-label"></div>
+                      </div>
+                      <span class="source-option-label">加入总览统计</span>
+                    </label>
+                    <label class="source-option-item" title="在服务器详情列表中显示此数据源的服务器">
+                      <div class="switch-wrapper">
+                        <input type="checkbox" id="isDetailSource" checked class="switch-input">
+                        <div class="switch-label"></div>
+                      </div>
+                      <span class="source-option-label">加入详情展示</span>
+                    </label>
+                    <input type="checkbox" id="isServerSource" checked disabled style="display: none;">
+                  </div>
                 </div>
                 <div class="form-actions">
                   <button class="btn btn-test" id="btnTest">测试连接</button>
@@ -582,13 +584,6 @@
                 <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>