From e307ba0512f4118408e77b3101c4d7f047d8d0b4 Mon Sep 17 00:00:00 2001
From: Jesxion <jesxion@gmail.com>
Date: Tue, 14 Apr 2026 12:30:39 +0800
Subject: [PATCH] feat(h5): add alert detail page

---
 h5/alert.html | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 h5/alert.html
diff --git a/h5/alert.html b/h5/alert.html
new file mode 100644
index 0000000..9dbc40f
--- /dev/null
+++ b/h5/alert.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>预警详情</title>
+  <link rel="stylesheet" href="css/variables.css">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="app">
+    <!-- 顶栏 -->
+    <header class="top-bar">
+      <a href="alerts.html" class="top-bar-back">‹</a>
+      <h1 class="top-bar-title">预警详情</h1>
+    </header>
+
+    <!-- 内容区 -->
+    <div id="alertContent"></div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/api.js"></script>
+  <script src="js/app.js"></script>
+  <script>
+    requireAuth();
+
+    const alertId = getQueryParam('id');
+    if (!alertId) location.href = 'alerts.html';
+
+    async function loadAlert() {
+      const res = await apiGetAlertDetail(alertId);
+      const a = res.data;
+      if (!a) { showToast('预警不存在'); location.href = 'alerts.html'; return; }
+
+      const levelText = { danger: '危险', warning: '警告', handled: '已处理', ignored: '已忽略' };
+
+      // 未读状态: 显示"确认处理"和"忽略"两个按钮 + 处理备注textarea
+      // 已处理/已忽略: 只显示状态和备注信息
+      const handledArea = a.status === 'unread' ? `
+        <div class="action-area">
+          <button class="btn btn-danger" onclick="handleAlert('handled')">确认处理</button>
+          <button class="btn btn-secondary" onclick="handleAlert('ignored')">忽略</button>
+        </div>
+        <div style="padding:0 16px 16px">
+          <div class="form-group mb-2">
+            <label class="form-label">处理备注</label>
+            <textarea class="form-input" id="handleNote" placeholder="选填"></textarea>
+          </div>
+        </div>
+      ` : `
+        <div class="action-area">
+          <div style="flex:1;text-align:center;color:var(--color-text-secondary);font-size:13px;padding:10px">
+            已${a.status === 'handled' ? '处理' : '忽略'}${a.handleNote ? '：' + a.handleNote : ''}
+          </div>
+        </div>
+      `;
+
+      document.getElementById('alertContent').innerHTML = `
+        <div class="alert-detail-header">
+          <div class="alert-detail-icon ${a.level === 'danger' ? 'danger' : a.level === 'warning' ? 'warning' : 'handled'}">${getAlertIcon(a.level)}</div>
+          <div class="alert-detail-level ${a.level}">${levelText[a.level] || a.level}</div>
+        </div>
+        <div class="card mb-3" style="border-radius:0">
+          <div style="font-size:15px;font-weight:600;margin-bottom:12px">${a.message}</div>
+          <div class="info-grid">
+            <div class="info-item"><div class="info-label">设备</div><div class="info-value">${a.deviceName}</div></div>
+            <div class="info-item"><div class="info-label">发生时间</div><div class="info-value">${a.createdAt}</div></div>
+            <div class="info-item"><div class="info-label">触发指标</div><div class="info-value">${a.metric}</div></div>
+            <div class="info-item"><div class="info-label">当前值</div><div class="info-value">${a.value || '-'}</div></div>
+          </div>
+        </div>
+        ${handledArea}
+      `;
+    }
+
+    async function handleAlert(action) {
+      const note = document.getElementById('handleNote')?.value || '';
+      const res = await apiHandleAlert(alertId, action, note);
+      if (res.code === 0) {
+        showToast('操作成功');
+        setTimeout(() => location.href = 'alerts.html', 500);
+      } else {
+        showToast(res.message || '操作失败');
+      }
+    }
+
+    loadAlert();
+  </script>
+</body>
+</html>
