增加导航栏

onchain_scout_gate/static/app.js

@@ -737,13 +737,17 @@ function wireKeyMonitorSegGroup(groupId, hiddenInputId, onChange) {
 
 function initKeyMonitorSegGroups() {
   wireKeyMonitorSegGroup("keyMonitorTypeSeg", "keyMonitorTypeInput");
-  wireKeyMonitorSegGroup("keyDirectionSeg", "keyDirectionInput");
-  wireKeyMonitorSegGroup("keySlTpModeSeg", "keySlTpModeInput", syncKeySlTpFields);
+}
+
+function setKeyMonitorActiveCount(n) {
+  const el = document.getElementById("keyMonitorActiveCount");
+  if (el) el.textContent = String(n);
 }
 
 function renderKeyMonitorActiveList(rows) {
   const target = document.getElementById("keyMonitorActive");
   if (!target) return;
+  setKeyMonitorActiveCount(rows.length);
   target.innerHTML = "";
   if (!rows.length) {
     target.innerHTML = '<div class="matrix-dim">暂无监控中的关键位</div>';
@@ -836,6 +840,8 @@ async function addKeyMonitor() {
 
 function wireKeyMonitorPanel() {
   initKeyMonitorSegGroups();
+  const modeSel = document.getElementById("keySlTpModeInput");
+  if (modeSel) modeSel.addEventListener("change", syncKeySlTpFields);
   syncKeySlTpFields();
   const addBtn = document.getElementById("keyAddBtn");
   if (addBtn) addBtn.addEventListener("click", addKeyMonitor);

onchain_scout_gate/static/style.css

@@ -1298,6 +1298,26 @@ pre {
     flex-shrink: 0;
 }
 
+.key-monitor-active-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.key-monitor-count {
+    font-size: 10px;
+    padding: 2px 8px;
+    min-width: 1.5rem;
+    text-align: center;
+}
+
+.key-monitor-active-list {
+    max-height: calc(8 * 52px + 7 * 8px);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
 .key-monitor-row {
     display: flex;
     align-items: center;
@@ -1781,6 +1801,10 @@ body.matrix-theme {
         font-size: 8px;
     }
 
+    .key-monitor-active-list {
+        max-height: calc(8 * 48px + 7 * 8px);
+    }
+
     .matrix-grid {
         grid-template-columns: 1fr;
     }