少于10时折叠筛选

Author: cppla

web/index.html

@@ -35,7 +35,7 @@
 
         <section class="ops-overview" id="overviewCards" aria-label="运行概览"></section>
 
-        <section class="ops-toolbar" id="serversToolbar" aria-label="主机筛选">
+        <section class="ops-toolbar" id="serversToolbar" aria-label="主机筛选" style="display:none;">
             <label class="search-field">
                 <span>搜索</span>
                 <input id="serverSearch" type="search" autocomplete="off" placeholder="节点 / 地区 / 系统 / 主机名" />

web/js/app.js

@@ -201,6 +201,7 @@ function visibleServers(){
 
 function render(){
   $('notice').style.display = 'none';
+  normalizeServersToolbarState();
   renderOverview();
   renderOsOptions();
   renderServers();
@@ -242,6 +243,11 @@ function alertStats(){
   return stats;
 }
 
+function normalizeServersToolbarState(){
+  const show = S.activeTab === 'servers' && S.servers.length > 10;
+  $('serversToolbar').style.display = show ? 'flex' : 'none';
+}
+
 function renderOsOptions(){
   const select = $('osFilter');
   const labels = [...new Set(S.servers.map(s => osLabel(s.os)).filter(Boolean))].sort((a,b)=>a.localeCompare(b,'zh-CN'));
@@ -540,7 +546,7 @@ function bindTabs(){
     S.activeTab = tab;
     document.querySelectorAll('.nav button').forEach(btn => btn.classList.toggle('active', btn === e.target));
     document.querySelectorAll('.panel').forEach(panel => panel.classList.toggle('active', panel.id === 'panel-' + tab));
-    $('serversToolbar').style.display = tab === 'servers' ? 'flex' : 'none';
+    normalizeServersToolbarState();
     if(tab === 'config') ensureAdminChecked();
   });
 }