From 4c90ef88c980abcd444a2fbe5f9014b44a3b2b07 Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Thu, 7 May 2026 10:31:03 +0800
Subject: [PATCH] feat: alarm center page with recent alarm records

---
 internal/web/ui.go                    | 11 +++++
 internal/web/ui/templates/alarms.html | 59 +++++++++++++++++++++++++++
 internal/web/ui/templates/layout.html |  1 +
 3 files changed, 71 insertions(+)
 create mode 100644 internal/web/ui/templates/alarms.html

diff --git a/internal/web/ui.go b/internal/web/ui.go
index c59d8f3..4e33944 100644
--- a/internal/web/ui.go
+++ b/internal/web/ui.go
@@ -79,6 +79,7 @@ type PageData struct {
 	ModelStatusBoard         *service.ModelStatusBoard
 	StandardResources        []storage.StandardResourceRecord
 	ResourceStatusBoard      *service.ResourceStatusBoard
+	AlarmRecords             []service.AlarmRecord
 	Templates                []service.Template
 	Template                 *service.Template
 	AssetTab                 string
@@ -659,6 +660,7 @@ func (u *UI) Routes() (chi.Router, error) {
 	r.Post("/models/sync", u.actionModelSync)
 	r.Post("/resources/sync", u.actionResourceSync)
 	r.Get("/diagnostics", u.pageDiagnostics)
+	r.Get("/alarms", u.pageAlarms)
 	r.Get("/recognition", u.pageRecognition)
 	r.Get("/logs", u.pageLogs)
 
@@ -1442,6 +1444,15 @@ func (u *UI) pageDiagnostics(w http.ResponseWriter, r *http.Request) {
 	u.render(w, r, "diagnostics", data)
 }
 
+func (u *UI) pageAlarms(w http.ResponseWriter, r *http.Request) {
+	u.ensureDevicesLoaded()
+	data := PageData{Title: "告警中心", Devices: u.registry.GetDevices()}
+	if u.alarmCollector != nil {
+		data.AlarmRecords = u.alarmCollector.GetRecent(100)
+	}
+	u.render(w, r, "alarms", data)
+}
+
 func (u *UI) pageResources(w http.ResponseWriter, r *http.Request) {
 	u.ensureDevicesLoaded()
 	data := PageData{Title: "资源管理", Devices: u.registry.GetDevices()}
diff --git a/internal/web/ui/templates/alarms.html b/internal/web/ui/templates/alarms.html
new file mode 100644
index 0000000..eaaa186
--- /dev/null
+++ b/internal/web/ui/templates/alarms.html
@@ -0,0 +1,59 @@
+{{define "alarms"}}
+<div class="card">
+  <div class="section-title">
+    <div>
+      <h2 class="title-with-icon">{{icon "bell"}}<span>告警中心</span></h2>
+      <div class="form-hint">来自所有设备的实时告警记录，按时间倒序排列。</div>
+    </div>
+  </div>
+</div>
+
+<div class="card">
+  <div class="table-wrap">
+    {{if .AlarmRecords}}
+    <table>
+      <thead>
+        <tr>
+          <th>时间</th>
+          <th>设备</th>
+          <th>通道</th>
+          <th>规则</th>
+          <th>目标</th>
+          <th>置信度</th>
+          <th>截图</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{range .AlarmRecords}}
+        <tr>
+          <td class="mono small">{{.Timestamp}}</td>
+          <td>
+            <a href="/ui/devices/{{.DeviceID}}">{{.DeviceID}}</a>
+          </td>
+          <td>{{.Channel}}</td>
+          <td>
+            <span class="pill warn">{{.RuleName}}</span>
+          </td>
+          <td>{{if .ObjectLabel}}{{.ObjectLabel}}{{else}}-{{end}}</td>
+          <td>{{if .Confidence}}{{.Confidence}}{{else}}-{{end}}</td>
+          <td>
+            {{if .SnapshotURL}}
+            <a href="{{.SnapshotURL}}" target="_blank" class="btn ghost">查看截图</a>
+            {{else}}-{{end}}
+            {{if .ClipURL}}
+            <a href="{{.ClipURL}}" target="_blank" class="btn ghost">视频片段</a>
+            {{end}}
+          </td>
+        </tr>
+        {{end}}
+      </tbody>
+    </table>
+    {{else}}
+    <div class="empty-state">
+      <div class="empty-title">暂无告警记录</div>
+      <div class="muted">设备尚未上报告警，或告警收集服务尚未启动。</div>
+    </div>
+    {{end}}
+  </div>
+</div>
+{{end}}
diff --git a/internal/web/ui/templates/layout.html b/internal/web/ui/templates/layout.html
index 74b851c..ddb22c3 100644
--- a/internal/web/ui/templates/layout.html
+++ b/internal/web/ui/templates/layout.html
@@ -35,6 +35,7 @@
           <div class="nav-group-items">
             <a class="nav-subitem" href="/ui/models"><span class="nav-icon nav-subicon">{{icon "assets"}}</span><span>模型管理</span></a>
             <a class="nav-subitem" href="/ui/resources"><span class="nav-icon nav-subicon">{{icon "template"}}</span><span>资源管理</span></a>
+t		<a class="nav-subitem" href="/ui/alarms"><span class="nav-icon nav-subicon">{{icon "bell"}}</span><span>告警中心</span></a>
             <a class="nav-subitem" href="/ui/diagnostics"><span class="nav-icon nav-subicon">{{icon "logs"}}</span><span>日志审计</span></a>
             <a class="nav-subitem" href="/ui/system"><span class="nav-icon nav-subicon">{{icon "heartbeat"}}</span><span>系统状态</span></a>
           </div>