feat: redesign web management console

2026-04-29 16:26:42 +08:00
parent aff2b1828e
commit 96f5c14a26
2 changed files with 736 additions and 187 deletions
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -33,51 +33,74 @@ const app = document.querySelector("#app");

 app.innerHTML = `
  <div class="shell">
-    <header class="header">
+    <header class="console-header">
      <div class="brand">
-        <div class="brand-mark">CD</div>
-        <div>
+        <div class="brand-mark">CG</div>
+        <div class="brand-copy">
+          <div class="brand-kicker">COLD DISPLAY GUARD</div>
          <div class="brand-title">冷藏展示柜管理</div>
-          <div class="brand-subtitle">标定、配置、事件数据</div>
+          <div class="brand-subtitle">区域标定 / 运行监控 / 合规事件</div>
        </div>
      </div>
+
      <nav class="tabs">
        <button data-tab="calibration">区域标定</button>
        <button data-tab="events">事件数据</button>
        <button data-tab="settings">运行配置</button>
      </nav>
+
+      <div class="header-actions">
+        <div class="status-pill" id="statusPill">
+          <span class="status-dot"></span>
+          <span id="statusText"></span>
+        </div>
+        <button id="refreshRuntimeData" class="secondary-action" type="button">刷新运行数据</button>
+      </div>
    </header>

    <main class="main">
-      <section class="status-line">
-        <span id="statusText"></span>
-        <button id="refreshRuntimeData" type="button">刷新运行数据</button>
-      </section>
-
      <section id="calibrationView" class="view">
-        <section class="toolbar">
-          <label>
-            RTSP 地址（用于抓帧）
-            <input id="rtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
-          </label>
-          <button id="captureSnapshot" type="button">抓取一帧</button>
-          <button id="saveCalibration" type="button">保存标定</button>
+        <section class="view-head">
+          <div>
+            <p class="view-kicker">CALIBRATION</p>
+            <h1>冷柜区域标定</h1>
+          </div>
+          <p class="view-note">抓取一帧后，在画面中依次点击每个格口和垃圾桶 ROI 的边界点。</p>
        </section>

-        <section class="calibration-grid">
-          <aside class="panel">
-            <div class="panel-title">区域</div>
+        <section class="command-bar">
+          <label class="field rtsp-field">
+            <span>RTSP 地址（用于抓帧）</span>
+            <input id="rtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
+          </label>
+          <div class="command-actions">
+            <button id="captureSnapshot" class="primary-action" type="button">抓取一帧</button>
+            <button id="saveCalibration" class="success-action" type="button">保存标定</button>
+          </div>
+        </section>
+
+        <section class="calibration-layout">
+          <aside class="panel zone-panel">
+            <div class="panel-meta">ZONE MATRIX</div>
+            <div class="panel-title">区域选择</div>
            <div id="regionList" class="region-list"></div>
-            <div class="button-stack">
+            <div class="tool-stack">
              <button id="undoPoint" type="button">撤销点</button>
              <button id="clearRegion" type="button">清空当前区域</button>
-              <button id="loadConfigPolygons" type="button">放弃草稿并载入已保存标定</button>
+              <button id="loadConfigPolygons" type="button">载入已保存标定</button>
            </div>
          </aside>
+
          <section class="canvas-panel">
+            <div class="canvas-toolbar">
+              <span>FRAME INSPECTION</span>
+              <strong id="activeRegionBadge">r1c1</strong>
+            </div>
            <canvas id="canvas" width="1280" height="720"></canvas>
          </section>
-          <aside class="panel">
+
+          <aside class="panel inspection-panel">
+            <div class="panel-meta">POLYGON STATUS</div>
            <div class="panel-title">标定结果</div>
            <div id="regionSummary" class="region-summary"></div>
          </aside>
@@ -85,41 +108,66 @@ app.innerHTML = `
      </section>

      <section id="eventsView" class="view hidden">
+        <section class="view-head">
+          <div>
+            <p class="view-kicker">RUNTIME</p>
+            <h1>事件与运行状态</h1>
+          </div>
+          <p class="view-note">从运行进程写入的事件和诊断数据中读取最近状态。</p>
+        </section>
        <section class="metrics" id="metrics"></section>
-        <section class="panel">
+        <section class="panel event-panel">
+          <div class="panel-meta">EVENT LOG</div>
          <div class="panel-title">最近事件</div>
          <div id="eventsTable" class="events-table"></div>
        </section>
      </section>

      <section id="settingsView" class="view hidden">
-        <section class="settings-grid">
-          <label>
-            RTSP 地址
-            <input id="settingsRtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
-          </label>
-          <label>
-            Camera ID
-            <input id="cameraId" type="text">
-          </label>
-          <label>
-            时区
-            <input id="timezone" type="text">
-          </label>
-          <label>
-            最大放置秒数
-            <input id="maxDwell" type="number" min="1">
-          </label>
-          <label>
-            垃圾桶确认秒数
-            <input id="trashWindow" type="number" min="1">
-          </label>
+        <section class="view-head">
+          <div>
+            <p class="view-kicker">CONFIGURATION</p>
+            <h1>运行配置</h1>
+          </div>
+          <p class="view-note">保存后写入后端配置；运行进程需要按配置重新读取。</p>
        </section>
-        <section class="settings-actions">
-          <button id="saveConfig" type="button">保存运行配置</button>
-          <button id="reloadConfig" type="button">重新载入后端配置</button>
+
+        <section class="settings-layout">
+          <section class="panel settings-panel">
+            <div class="panel-meta">CAMERA INPUT</div>
+            <div class="settings-grid">
+              <label class="field">
+                <span>RTSP 地址</span>
+                <input id="settingsRtspUrl" type="text" placeholder="rtsp://user:password@camera-ip:554/stream">
+              </label>
+              <label class="field">
+                <span>Camera ID</span>
+                <input id="cameraId" type="text">
+              </label>
+              <label class="field">
+                <span>时区</span>
+                <input id="timezone" type="text">
+              </label>
+              <label class="field">
+                <span>最大放置秒数</span>
+                <input id="maxDwell" type="number" min="1">
+              </label>
+              <label class="field">
+                <span>垃圾桶确认秒数</span>
+                <input id="trashWindow" type="number" min="1">
+              </label>
+            </div>
+            <div class="settings-actions">
+              <button id="saveConfig" class="success-action" type="button">保存运行配置</button>
+              <button id="reloadConfig" type="button">重新载入后端配置</button>
+            </div>
+          </section>
+
+          <section class="panel preview-panel">
+            <div class="panel-meta">LIVE CONFIG PREVIEW</div>
+            <pre id="configPreview" class="config-preview"></pre>
+          </section>
        </section>
-        <pre id="configPreview" class="config-preview"></pre>
      </section>
    </main>
  </div>
@@ -139,6 +187,8 @@ const els = {
  regionSummary: document.querySelector("#regionSummary"),
  metrics: document.querySelector("#metrics"),
  eventsTable: document.querySelector("#eventsTable"),
+  statusPill: document.querySelector("#statusPill"),
+  activeRegionBadge: document.querySelector("#activeRegionBadge"),
 };
 const ctx = els.canvas.getContext("2d");

@@ -377,9 +427,20 @@ function renderRegionList() {
  els.regionList.innerHTML = "";
  for (const id of allRegions) {
    const button = document.createElement("button");
+    const complete = state.polygons[id].length >= 3;
    button.type = "button";
-    button.textContent = `${id}${state.polygons[id].length >= 3 ? " ✓" : ""}`;
-    button.className = id === state.activeRegion ? "active" : "";
+    button.className = [
+      "region-button",
+      id === state.activeRegion ? "active" : "",
+      complete ? "complete" : "",
+    ].filter(Boolean).join(" ");
+    button.style.setProperty("--region-color", palette[id] || "#ffffff");
+    button.innerHTML = `
+      <span class="region-swatch"></span>
+      <span class="region-name">${escapeHtml(getRegionLabel(id))}</span>
+      <span class="region-code">${escapeHtml(id)}</span>
+      <span class="region-points">${state.polygons[id].length}</span>
+    `;
    button.addEventListener("click", () => {
      state.activeRegion = id;
      render();
@@ -538,28 +599,45 @@ function renderRegionSummary() {
  els.regionSummary.innerHTML = allRegions
    .map((id) => {
      const count = state.polygons[id].length;
-      return `<div><strong>${id}</strong><span>${count >= 3 ? `${count} 点，已标定` : `${count} 点`}</span></div>`;
+      const complete = count >= 3;
+      return `
+        <div class="summary-row ${complete ? "complete" : "pending"}">
+          <span class="summary-dot" style="--region-color:${palette[id] || "#ffffff"}"></span>
+          <strong>${escapeHtml(getRegionLabel(id))}</strong>
+          <span>${complete ? `${count} 点 / 已标定` : `${count} 点 / 待完成`}</span>
+        </div>
+      `;
    })
    .join("");
+  els.activeRegionBadge.textContent = state.activeRegion;
 }

 function renderMetrics() {
  const metrics = state.summary?.metrics || {};
+  const violationCount = metrics.violation_count ?? 0;
+  const baselineReady = Boolean(metrics.baseline_ready);
  const cards = [
-    ["事件总数", metrics.event_count ?? 0],
-    ["违规事件", metrics.violation_count ?? 0],
-    ["诊断帧数", metrics.diagnostics_count ?? 0],
-    ["基线状态", metrics.baseline_ready ? "ready" : "learning"],
-    ["最新报警", metrics.latest_alert_time || "-"],
-    ["事件文件", metrics.events_path || "-"],
+    {label: "事件总数", value: metrics.event_count ?? 0, tone: "neutral"},
+    {label: "违规事件", value: violationCount, tone: violationCount > 0 ? "danger" : "good"},
+    {label: "诊断帧数", value: metrics.diagnostics_count ?? 0, tone: "neutral"},
+    {label: "基线状态", value: baselineReady ? "ready" : "learning", tone: baselineReady ? "good" : "warning"},
+    {label: "最新报警", value: metrics.latest_alert_time || "-", tone: metrics.latest_alert_time ? "danger" : "neutral"},
+    {label: "事件文件", value: metrics.events_path || "-", tone: "path"},
  ];
  const zoneCounts = metrics.latest_zone_counts || {};
  const zoneSummary = Object.keys(zoneCounts).length
-    ? `<div class="metric wide"><span>最新区域状态</span><strong>${Object.entries(zoneCounts)
+    ? `<div class="metric wide zone-state"><span>最新区域状态</span><strong>${Object.entries(zoneCounts)
        .map(([zoneId, count]) => `${zoneId}:${count}`)
        .join(" ")}</strong></div>`
    : "";
-  els.metrics.innerHTML = cards.map(([label, value]) => `<div class="metric"><span>${label}</span><strong>${value}</strong></div>`).join("") + zoneSummary;
+  els.metrics.innerHTML = cards
+    .map((card) => `
+      <div class="metric ${card.tone}">
+        <span>${escapeHtml(card.label)}</span>
+        <strong>${escapeHtml(String(card.value))}</strong>
+      </div>
+    `)
+    .join("") + zoneSummary;
 }

 function renderEvents() {
@@ -574,15 +652,19 @@ function renderEvents() {
        ${state.events
          .slice()
          .reverse()
-          .map((event) => `
-            <tr>
+          .map((event) => {
+            const eventName = event.event || "";
+            const isViolation = eventName.includes("violation");
+            return `
+            <tr class="${isViolation ? "violation-row" : ""}">
              <td>${escapeHtml(event.ts || "")}</td>
-              <td>${escapeHtml(event.event || "")}</td>
+              <td><span class="event-name ${isViolation ? "danger" : ""}">${escapeHtml(eventName)}</span></td>
              <td>${escapeHtml(event.zone_id || "")}</td>
              <td>${escapeHtml(event.batch_id || "")}</td>
              <td>${escapeHtml(String(event.dwell_seconds ?? ""))}</td>
            </tr>
-          `)
+          `;
+          })
          .join("")}
      </tbody>
    </table>
@@ -627,6 +709,23 @@ async function apiJson(path, options = {}) {
 function setStatus(message) {
  state.status = message;
  els.statusText.textContent = message;
+  const tone = message.includes("失败") || message.includes("错误")
+    ? "error"
+    : message.includes("正在")
+      ? "busy"
+      : "ready";
+  els.statusPill.className = `status-pill ${tone}`;
+}
+
+function getRegionLabel(id) {
+  if (id === "trash") {
+    return "垃圾桶";
+  }
+  const match = id.match(/^r(\d)c(\d)$/);
+  if (!match) {
+    return id;
+  }
+  return `${match[1]}排${match[2]}列`;
 }

 function clamp(value) {