From 3a9b52864b87f5d43acf28470f1827515ce0652b Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 20 Apr 2026 08:56:01 +0800
Subject: [PATCH] fix(feeder): compact card grid for units and equipment
 selection modal

- Fix unit-config-list grid by increasing specificity over .list flex
- Equipment selection modal uses card grid (auto-fill 150px) instead
  of one-per-line list
- Widen modal to accommodate card grid

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/core/styles.css    | 33 +++++++++++++++++++++++++++++++--
 web/feeder/index.html  |  4 ++--
 web/feeder/js/units.js | 13 +++++++------
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/web/core/styles.css b/web/core/styles.css
index 5025bcc..afc59e4 100644
--- a/web/core/styles.css
+++ b/web/core/styles.css
@@ -143,12 +143,13 @@ body {
 
 .grid-app-config .panel.app-config-main { grid-column: 1; grid-row: 1; }
 
-.unit-config-list {
+.list.unit-config-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 8px;
   padding: 8px;
   align-content: start;
+  overflow-y: auto;
 }
 
 .unit-config-list .unit-card {
@@ -168,6 +169,34 @@ body {
   font-size: 12px;
 }
 
+.unit-equip-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 6px;
+  padding: 8px;
+}
+
+.unit-equip-grid .unit-equip-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: border-color 0.15s;
+}
+
+.unit-equip-grid .unit-equip-item:hover {
+  border-color: rgba(37, 99, 235, 0.3);
+  background: var(--accent-bg);
+}
+
+.unit-equip-grid .unit-equip-item input[type="checkbox"] {
+  margin: 0;
+}
+
 /* config view slot assignments */
 .grid-config .panel.top-left    { grid-column: 1; grid-row: 1; }
 .grid-config .panel.top-right   { grid-column: 2 / 4; grid-row: 1; }
diff --git a/web/feeder/index.html b/web/feeder/index.html
index d4ea2c7..42c19ec 100644
--- a/web/feeder/index.html
+++ b/web/feeder/index.html
@@ -24,12 +24,12 @@
   <div data-partial="/ui/html/unit-modal.html"></div>
 
   <div class="modal hidden" id="unitEquipmentModal">
-    <div class="modal-content modal-sm">
+    <div class="modal-content">
       <div class="modal-head">
         <h3>选择设备</h3>
         <button class="secondary" id="closeUnitEquipmentModal">X</button>
       </div>
-      <div class="list" id="unitEquipmentList" style="max-height:400px;overflow:auto"></div>
+      <div id="unitEquipmentList" style="max-height:400px;overflow:auto"></div>
       <div class="form-actions" style="padding:10px">
         <button type="button" class="secondary" id="cancelUnitEquipment">取消</button>
         <button type="button" id="confirmUnitEquipment">确认绑定</button>
diff --git a/web/feeder/js/units.js b/web/feeder/js/units.js
index ebec9a0..b55c4df 100644
--- a/web/feeder/js/units.js
+++ b/web/feeder/js/units.js
@@ -300,17 +300,18 @@ function openUnitEquipmentModal(unit) {
   bound.forEach((id) => _unitEquipmentSelected.add(id));
 
   dom.unitEquipmentList.innerHTML = "";
+  dom.unitEquipmentList.className = "unit-equip-grid";
   allEquipments.forEach((e) => {
-    const row = document.createElement("label");
-    row.className = "list-item";
-    row.style.cssText = "display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 10px";
+    const item = document.createElement("label");
+    item.className = "unit-equip-item";
     const checked = bound.has(e.id) ? "checked" : "";
-    row.innerHTML = `<input type="checkbox" data-equip-id="${e.id}" ${checked} /> <span>${e.code} / ${e.name}</span>`;
-    row.querySelector("input").addEventListener("change", (ev) => {
+    item.innerHTML = `<input type="checkbox" ${checked} /><span>${e.code}</span>`;
+    item.title = e.name;
+    item.querySelector("input").addEventListener("change", (ev) => {
       if (ev.target.checked) _unitEquipmentSelected.add(e.id);
       else _unitEquipmentSelected.delete(e.id);
     });
-    dom.unitEquipmentList.appendChild(row);
+    dom.unitEquipmentList.appendChild(item);
   });
 
   dom.unitEquipmentModal.classList.remove("hidden");