fix: 设备勾选改用AJAX无刷新，清理按钮独立于批量表单

internal/web/ui/templates/devices.html

@@ -33,8 +33,7 @@
   </div>
 
   <form method="post" action="/devices/batch-action">
-    {{if .SelectedDeviceIDs}}
-    <div class="batch-toolbar" id="batch-config">
+    <div class="batch-toolbar" id="batch-config"{{if not .SelectedDeviceIDs}} style="display:none"{{end}}>
       <div>
         <div class="batch-toolbar-count">已选 {{len .SelectedDeviceIDs}} 台</div>
       </div>
@@ -48,15 +47,11 @@
         <a class="btn secondary" href="/devices">清空选择</a>
       </div>
     </div>
-    {{end}}
     {{$allOffline := true}}{{range .SelectedDevices}}{{if .Online}}{{$allOffline = false}}{{end}}{{end}}
-    {{if and .SelectedDeviceIDs $allOffline}}
-    <form method="post" action="/devices/cleanup-offline" style="margin:8px 0" onsubmit="return confirm('确认清理选中的 ' + {{len .SelectedDevices}} + ' 台离线设备及其全部关联数据？此操作不可恢复。')">
+    <form method="post" action="/devices/cleanup-offline" id="cleanup-form" style="margin:8px 0{{if not (and .SelectedDeviceIDs $allOffline)}};display:none{{end}}" onsubmit="return confirm('确认清理选中的离线设备及其全部关联数据？此操作不可恢复。')">
       {{range .SelectedDevices}}<input type="hidden" name="device_id" value="{{.DeviceID}}">{{end}}
       <button type="submit" class="btn danger">清理选中离线设备</button>
     </form>
-    {{end}}
-
     <div class="table-wrap">
       <table id="device-list">
         <thead>
@@ -158,7 +153,39 @@
       }
     }
     const next = `${url.pathname}${url.searchParams.toString() ? `?${url.searchParams.toString()}` : ''}`;
-    window.location.assign(next);
+    history.replaceState(null, '', next);
+    // Toggle batch toolbar visibility without full page reload
+    const toolbar = document.getElementById('batch-config');
+    const checked = document.querySelectorAll('input[type="checkbox"][name="device_id"]:checked');
+    if (toolbar) {
+      toolbar.style.display = checked.length > 0 ? '' : 'none';
+      const countEl = toolbar.querySelector('.batch-toolbar-count');
+      if (countEl) countEl.textContent = `已选 ${checked.length} 台`;
+    }
+    // Show or hide cleanup form based on selected devices' online status
+    const cleanupForm = document.getElementById('cleanup-form');
+    if (cleanupForm) {
+      let allOffline = checked.length > 0;
+      checked.forEach(cb => {
+        const row = cb.closest('tr');
+        if (row) {
+          const statusCell = row.querySelector('td:nth-child(3)');
+          if (statusCell && !statusCell.textContent.includes('离线')) allOffline = false;
+        }
+      });
+      cleanupForm.style.display = allOffline ? '' : 'none';
+      // Update hidden inputs to match selected devices
+      if (allOffline) {
+        cleanupForm.querySelectorAll('input[type="hidden"]').forEach(el => el.remove());
+        checked.forEach(cb => {
+          const input = document.createElement('input');
+          input.type = 'hidden';
+          input.name = 'device_id';
+          input.value = cb.value;
+          cleanupForm.appendChild(input);
+        });
+      }
+    }
   };
   for (const box of selectedBoxes) {
     box.addEventListener('change', syncSelected);