From 3a77449b4fa65c83757cec431e570423cb53610b Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Thu, 7 May 2026 14:23:14 +0800
Subject: [PATCH] fix: show device list directly on monitor page

---
 internal/web/ui/templates/monitor.html | 103 +++++++++++++------------
 1 file changed, 52 insertions(+), 51 deletions(-)

diff --git a/internal/web/ui/templates/monitor.html b/internal/web/ui/templates/monitor.html
index 250f9bd..cf849a5 100644
--- a/internal/web/ui/templates/monitor.html
+++ b/internal/web/ui/templates/monitor.html
@@ -3,66 +3,67 @@
   <div class="section-title">
     <div>
       <h2 class="title-with-icon">{{icon "devices"}}<span>视频监控</span></h2>
-      <div class="form-hint">从设备拉取通道列表，点击通道查看实时画面。</div>
-    </div>
-    <div class="actions compact">
-      <button class="btn ghost" type="button" id="btn-load">加载通道</button>
+      <div class="form-hint">选择在线设备，加载通道后查看实时画面。</div>
     </div>
   </div>
 </div>
 
-<div class="detail-grid" id="channels-grid" style="grid-template-columns:repeat(2,minmax(0,1fr))">
-  <div class="card muted" style="grid-column:1/-1;text-align:center">请先选择在线设备，点击"加载通道"。</div>
+{{if .Devices}}
+<div class="card">
+  <div class="table-wrap">
+    <table>
+      <thead><tr><th>设备</th><th>地址</th><th>操作</th></tr></thead>
+      <tbody>
+        {{range .Devices}}
+        {{if .Online}}
+        <tr>
+          <td>{{.DisplayName}}<div class="muted small mono">{{.DeviceID}}</div></td>
+          <td class="mono">{{.IP}}:{{.AgentPort}}</td>
+          <td><button class="btn ghost" type="button" onclick="loadChannels('{{.DeviceID}}')">加载通道</button></td>
+        </tr>
+        {{end}}
+        {{end}}
+      </tbody>
+    </table>
+  </div>
 </div>
+{{else}}
+<div class="card muted" style="text-align:center">暂无在线设备。</div>
+{{end}}
+
+<div class="detail-grid" id="channels-grid" style="grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px"></div>
 
 <script>
-(function() {
+function loadChannels(deviceId) {
   var grid = document.getElementById("channels-grid");
-
-  function loadChannels(deviceId) {
-    grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">加载通道中…</div>';
-    fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(deviceId))
-      .then(function(r) { return r.json(); })
-      .then(function(data) {
-        var chs = data.channels || [];
-        if (chs.length === 0) {
-          grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">该设备没有可预览的通道。</div>';
-          return;
+  grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">加载通道中…</div>';
+  fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(deviceId))
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      var chs = data.channels || [];
+      if (chs.length === 0) {
+        grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">该设备没有可预览的通道。</div>';
+        return;
+      }
+      var cols = chs.length === 1 ? 1 : 2;
+      grid.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
+      var html = "";
+      chs.forEach(function(ch) {
+        html += '<div class="card"><h3>' + esc(ch.name) + '</h3>';
+        if (ch.hls_url) {
+          html += '<video controls autoplay muted style="width:100%;max-height:400px;background:#000" src="' + esc(ch.hls_url) + '"></video>';
+          html += '<div class="actions" style="margin-top:8px"><a class="btn ghost" href="' + esc(ch.hls_url) + '" target="_blank">新窗口打开</a></div>';
+        } else {
+          html += '<div class="muted">无预览地址</div>';
         }
-        var cols = chs.length === 1 ? 1 : 2;
-        grid.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
-        var html = "";
-        chs.forEach(function(ch) {
-          html += '<div class="card"><h3>' + esc(ch.name) + '</h3>';
-          if (ch.hls_url) {
-            html += '<video controls autoplay muted style="width:100%;max-height:400px;background:#000" src="' + esc(ch.hls_url) + '"></video>';
-            html += '<div class="actions" style="margin-top:8px"><a class="btn ghost" href="' + esc(ch.hls_url) + '" target="_blank">新窗口打开</a></div>';
-          } else {
-            html += '<div class="muted">无预览地址</div>';
-          }
-          html += '</div>';
-        });
-        grid.innerHTML = html;
-      })
-      .catch(function() {
-        grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">无法连接设备，请确认设备在线。</div>';
+        html += '</div>';
       });
-  }
-
-  function esc(s) { return (s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"); }
-
-  document.getElementById("btn-load").addEventListener("click", function() {
-    grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">请从列表中选择设备…</div>';
-    // Create device selector overlay
-    var html = '<table><thead><tr><th>设备</th><th>地址</th><th>操作</th></tr></thead><tbody>';
-    {{range .Devices}}
-    {{if .Online}}
-    html += '<tr><td>{{.DisplayName}}</td><td class="mono">{{.IP}}:{{.AgentPort}}</td><td><button class="btn ghost" onclick="loadChannels(\'{{.DeviceID}}\')">加载</button></td></tr>';
-    {{end}}
-    {{end}}
-    html += '</tbody></table>';
-    grid.innerHTML = '<div class="card" style="grid-column:1/-1">' + html + '</div>';
-  });
-})();
+      grid.innerHTML = html;
+    })
+    .catch(function() {
+      grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">无法连接设备，请确认设备在线。</div>';
+    });
+}
+function esc(s) { return (s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"); }
 </script>
 {{end}}