feat: SQLite persistence, non-blocking inference, modular frontend

Backend: - Persist alert events and robot delivery counters in SQLite (data/app.db, YOLO_DB_PATH override); EventStore keeps its interface, DeliveryStatsStore uses read/write-through UPSERT; in-memory fallback remains for standalone AlertManager use - Serve /api/detect from a sync endpoint and serialize YOLO inference with a lock, so concurrent requests no longer block the event loop - Unify single-image and session detection: requests without session_id share the fixed single-image session and run full frame confirmation - Store UTC Z-suffixed timestamps for sortable string comparison; close executor and database on shutdown via FastAPI lifespan Frontend: - Split app.js into ES modules (main.js + modules/{dom,api,ui,charts,store} + views/{dashboard,inspection,events,robots,robotCards}), no build step - Escape all server data interpolated into innerHTML; guard missing event.classes; replace lazy element ID list with memoized qs() - Remove hardcoded fake stats (trend badge, device donut segment) Docs: - Rewrite README: accurate weight policy (only trained best.pt committed, no Git LFS), SQLite persistence, single-worker note, data asset inventory - Align models/pretrained/README.md with actual files; add YOLO_DB_PATH to .env.example; add persistence unit tests; ruff clean
2026-08-13 16:50:23 +08:00
parent 4dee7f664d
commit 25fa0c5825
25 changed files with 1058 additions and 669 deletions
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1,571 +0,0 @@
-const API_ENDPOINT = "/api/detect";
-const VIEW_LABELS = {
-  overview: "系统总览",
-  inspection: "视频巡检",
-  events: "告警中心",
-  robots: "消息机器人",
-  risks: "风险台账",
-  settings: "系统设置",
-};
-const STATUS_LABELS = {
-  pending: "待处置",
-  acknowledged: "已确认",
-  resolved: "已解决",
-};
-
-const elements = Object.fromEntries(
-  [
-    "ackEventsCount", "alertStatus", "allEventsCount", "clearButton", "confirmFramesValue", "cooldownValue",
-    "currentClock", "detectionList", "emptyState", "eventTableBody",
-    "eventTableMeta", "fireCount", "globalStatus",
-    "inspectionStatus", "intervalSelect", "lastUpdated", "loadingState",
-    "maxConfidence", "menuButton", "modelStatusDetail", "modelStatusValue",
-    "notificationDot", "overlayCanvas", "overviewMessage", "pendingEventCount",
-    "pendingEventsCount", "pendingNavCount", "readyApi", "readyFeishu",
-    "readyWechat", "readyWeights", "recentEventList", "refreshEventsButton",
-    "resolvedEventsCount", "riskChannelValue", "riskConfidenceValue",
-    "riskPendingValue", "riskStatus", "runDetectionButton", "settingConfidence",
-    "settingConfirmFrames", "settingCooldown", "settingImageSize", "settingIou",
-    "settingWeights", "sidebar", "sidebarStatus", "sidebarStatusDot", "smokeCount",
-    "sourceLabel", "todayEventCount", "toastRegion", "trendChart", "videoClock",
-    "videoInput", "videoMeta", "videoPreview", "viewBreadcrumb", "viewTitle",
-    "deviceOnlineRate", "eventClosureRate", "fireRiskRatio",
-    "notificationCoverage", "onlineRobotCount", "overviewDeliveryCount",
-    "overviewFeishuState", "overviewPolicyText", "overviewWechatState",
-    "refreshRobotsButton", "riskDonut", "riskTotal", "robotCardGrid",
-    "robotConfiguredCount", "robotDeliveredCount", "robotFailedCount",
-    "robotNavCount", "robotPolicyConfirm", "robotPolicyCooldown",
-    "robotSummary", "robotTotalCount", "safetyGauge", "safetyScore",
-    "smokeRiskRatio",
-  ].map((id) => [id, document.querySelector(`#${id}`)])
-);
-
-const frameCanvas = document.createElement("canvas");
-let videoUrl = null;
-let sessionId = null;
-let detectionActive = false;
-let requestInFlight = false;
-let lastDetectionAt = 0;
-let dashboardData = null;
-let eventData = [];
-let eventFilter = "";
-
-function showToast(message, type = "info") {
-  const toast = document.createElement("div");
-  toast.className = `toast ${type}`;
-  toast.textContent = message;
-  elements.toastRegion.appendChild(toast);
-  setTimeout(() => toast.remove(), 3600);
-}
-
-function switchView(viewName) {
-  if (!VIEW_LABELS[viewName]) return;
-  document.querySelectorAll("[data-view-panel]").forEach((panel) => {
-    panel.classList.toggle("is-active", panel.dataset.viewPanel === viewName);
-  });
-  document.querySelectorAll("[data-view]").forEach((button) => {
-    button.classList.toggle("is-active", button.dataset.view === viewName);
-  });
-  elements.viewTitle.textContent = VIEW_LABELS[viewName];
-  elements.viewBreadcrumb.textContent = VIEW_LABELS[viewName];
-  elements.sidebar.classList.remove("is-open");
-  if (viewName === "events") loadEvents();
-  if (viewName === "robots") loadRobots();
-  if (["overview", "risks", "settings"].includes(viewName)) loadDashboard();
-}
-
-function setServiceStatus(online) {
-  elements.globalStatus.textContent = online ? "服务运行正常" : "服务连接异常";
-  elements.globalStatus.className = `status-chip ${online ? "status-online" : "status-offline"}`;
-  elements.sidebarStatus.textContent = online ? "服务在线" : "服务离线";
-  elements.sidebarStatusDot.className = `status-dot ${online ? "is-online" : "is-offline"}`;
-  elements.readyApi.textContent = online ? "正常" : "异常";
-  elements.readyApi.className = online ? "ready" : "not-ready";
-}
-
-function enabledChannelNames(channels = {}) {
-  const names = [];
-  if (channels.wechat) names.push("企业微信");
-  if (channels.feishu) names.push("飞书");
-  return names;
-}
-
-function updateClock() {
-  elements.currentClock.textContent = new Date().toLocaleString("zh-CN", {
-    hour12: false,
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-}
-
-function formatDate(value) {
-  if (!value) return "--";
-  return new Date(value).toLocaleString("zh-CN", { hour12: false });
-}
-
-function formatTime(seconds) {
-  if (!Number.isFinite(seconds)) return "00:00";
-  const minutes = Math.floor(seconds / 60);
-  const remaining = Math.floor(seconds % 60);
-  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
-}
-
-function updateDashboard(data) {
-  dashboardData = data;
-  const { summary, system, detection } = data;
-  const channels = system.alert_channels || {};
-  const channelNames = enabledChannelNames(channels);
-  elements.todayEventCount.textContent = String(summary.today);
-  elements.pendingEventCount.textContent = String(summary.pending);
-  elements.pendingNavCount.textContent = String(summary.pending);
-  elements.notificationDot.hidden = summary.pending === 0;
-  elements.modelStatusValue.textContent = system.weights_available ? "运行正常" : "权重缺失";
-  elements.modelStatusDetail.textContent = system.weights_available ? "模型文件已就绪" : "请检查 YOLO_WEIGHTS";
-  elements.modelStatusValue.className = "text-value";
-  const robotPayload = data.robots || { robots: [], summary: {} };
-  const robotSummary = robotPayload.summary || {};
-  elements.onlineRobotCount.textContent = String(robotSummary.configured || 0);
-  elements.robotSummary.textContent = `${robotSummary.configured || 0} / ${robotSummary.total || 2} 已配置 · 成功投递 ${robotSummary.delivered || 0} 次`;
-  elements.overviewMessage.textContent = summary.pending
-    ? `当前有 ${summary.pending} 条告警事件等待处置，请尽快进入告警中心确认。`
-    : "当前无待处置事件，模型与视频巡检服务保持监测状态。";
-  elements.readyWeights.textContent = system.weights_available ? "已就绪" : "缺失";
-  elements.readyWeights.className = system.weights_available ? "ready" : "not-ready";
-  setChannelReady(elements.readyWechat, channels.wechat);
-  setChannelReady(elements.readyFeishu, channels.feishu);
-  elements.riskPendingValue.textContent = String(summary.pending);
-  elements.riskChannelValue.textContent = `${channelNames.length} / 2`;
-  elements.riskConfidenceValue.textContent = `${Math.round(detection.confidence * 100)}%`;
-  elements.confirmFramesValue.textContent = `${detection.confirm_frames} 帧`;
-  elements.cooldownValue.textContent = `${detection.cooldown_seconds} 秒`;
-  elements.settingWeights.textContent = system.weights;
-  elements.settingImageSize.textContent = `${detection.image_size} px`;
-  elements.settingConfidence.textContent = detection.confidence.toFixed(2);
-  elements.settingIou.textContent = detection.iou.toFixed(2);
-  elements.settingConfirmFrames.textContent = `${detection.confirm_frames} 帧`;
-  elements.settingCooldown.textContent = `${detection.cooldown_seconds} 秒`;
-  renderRecentEvents(data.recent_events || []);
-  const visualEvents = eventData.length ? eventData : data.recent_events || [];
-  renderTrend(visualEvents);
-  updateCommandVisuals(visualEvents, summary, channels, robotSummary);
-  renderRobots(robotPayload);
-}
-
-function updateCommandVisuals(events, summary, channels, robotSummary = {}) {
-  const totalRobots = robotSummary.total || 2;
-  const configuredRobots = robotSummary.configured || 0;
-  const total = summary.total || 0;
-  const closureRate = total ? Math.round(((summary.resolved || 0) / total) * 100) : 100;
-  const notificationRate = Math.round((configuredRobots / totalRobots) * 100);
-  const safetyScore = Math.max(42, Math.min(98, Math.round(notificationRate * 0.35 + closureRate * 0.35 + Math.max(0, 100 - (summary.pending || 0) * 8) * 0.3)));
-  elements.deviceOnlineRate.textContent = `${notificationRate}%`;
-  elements.eventClosureRate.textContent = `${closureRate}%`;
-  elements.notificationCoverage.textContent = `${notificationRate}%`;
-  elements.safetyScore.textContent = String(safetyScore);
-  elements.safetyGauge.style.setProperty("--score", safetyScore);
-  elements.overviewWechatState.textContent = channels.wechat ? "已配置" : "未配置";
-  elements.overviewFeishuState.textContent = channels.feishu ? "已配置" : "未配置";
-  elements.overviewPolicyText.textContent = `${dashboardData?.detection?.confirm_frames || 3} 帧确认`;
-  elements.overviewDeliveryCount.textContent = `累计成功 ${robotSummary.delivered || 0} 次`;
-
-  let fireEvents = 0;
-  let smokeEvents = 0;
-  events.forEach((event) => {
-    if ((event.classes || []).includes("fire")) fireEvents += 1;
-    if ((event.classes || []).includes("smoke")) smokeEvents += 1;
-  });
-  const detectedTotal = fireEvents + smokeEvents;
-  const chartTotal = Math.max(detectedTotal, 1);
-  const fireArc = Math.round((fireEvents / chartTotal) * 88);
-  const smokeArc = detectedTotal ? 88 - fireArc : 0;
-  elements.riskTotal.textContent = String(detectedTotal);
-  elements.fireRiskRatio.textContent = `${detectedTotal ? Math.round((fireEvents / detectedTotal) * 100) : 0}%`;
-  elements.smokeRiskRatio.textContent = `${detectedTotal ? Math.round((smokeEvents / detectedTotal) * 100) : 0}%`;
-  elements.riskDonut.style.background = `conic-gradient(var(--red) 0 ${fireArc}%, var(--cyan) ${fireArc}% ${fireArc + smokeArc}%, var(--orange) ${fireArc + smokeArc}% 100%)`;
-}
-
-async function loadRobots() {
-  try {
-    const response = await fetch("/api/robots");
-    const result = await response.json();
-    if (!response.ok) throw new Error(result.detail || `API ${response.status}`);
-    renderRobots(result);
-    setServiceStatus(true);
-  } catch (error) {
-    setServiceStatus(false);
-    showToast(`无法读取机器人状态：${error.message}`, "error");
-  }
-}
-
-function renderRobots(payload = { robots: [], summary: {} }) {
-  const robots = payload.robots || [];
-  const summary = payload.summary || {};
-  elements.robotTotalCount.textContent = String(summary.total || robots.length);
-  elements.robotConfiguredCount.textContent = String(summary.configured || 0);
-  elements.robotDeliveredCount.textContent = String(summary.delivered || 0);
-  elements.robotFailedCount.textContent = String(summary.failed || 0);
-  elements.robotNavCount.textContent = String(summary.configured || 0);
-  elements.robotPolicyConfirm.textContent = `${dashboardData?.detection?.confirm_frames || 3} 帧连续命中后发送`;
-  elements.robotPolicyCooldown.textContent = `${dashboardData?.detection?.cooldown_seconds || 60} 秒内同类不重复发送`;
-  elements.robotCardGrid.innerHTML = robots.length
-    ? robots.map(robotCardTemplate).join("")
-    : '<article class="panel robot-empty">暂无机器人通道数据</article>';
-}
-
-function robotCardTemplate(robot) {
-  const platformClass = robot.id === "wechat" ? "wechat" : "feishu";
-  const platformMark = robot.id === "wechat" ? "微" : "飞";
-  const statusLabel = robot.configured ? "已配置" : "未配置";
-  const lastActivity = robot.last_test_at || robot.last_delivery_at;
-  const activityText = lastActivity ? formatDate(lastActivity) : "尚无发送记录";
-  const statusText = robot.last_status === "success" ? "最近发送成功" : robot.last_status === "failed" ? "最近发送失败" : "等待首次发送";
-  const credential = robot.id === "wechat" ? "WECHAT_WEBHOOK_URL" : "FEISHU_WEBHOOK_URL";
-  return `<article class="panel message-robot-card ${robot.configured ? "is-configured" : ""}" data-robot-id="${robot.id}">
-    <div class="message-robot-head"><div class="platform-logo ${platformClass}">${platformMark}</div><div><span class="robot-id">${robot.id.toUpperCase()} ROBOT</span><h3>${robot.name}群机器人</h3><p>${robot.id === "wechat" ? "群聊 Markdown 与告警截图" : "群聊交互卡片与签名校验"}</p></div><span class="robot-status ${robot.configured ? "active" : "offline"}"><i></i>${statusLabel}</span></div>
-    <div class="capability-list">${robot.capabilities.map((capability) => `<span>${capability}</span>`).join("")}</div>
-    <div class="delivery-metrics"><div><span>成功投递</span><strong>${robot.delivered}</strong></div><div><span>失败</span><strong class="${robot.failed ? "danger" : ""}">${robot.failed}</strong></div><div><span>连接测试</span><strong>${robot.tests}</strong></div></div>
-    <div class="robot-activity"><span>${statusText}</span><strong>${activityText}</strong></div>
-    <div class="credential-key"><span>服务端配置</span><code>${credential}${robot.id === "feishu" ? " / FEISHU_SECRET" : ""}</code></div>
-    ${robot.last_error ? `<p class="delivery-error">${escapeHtml(robot.last_error)}</p>` : ""}
-    <button class="primary-button test-robot-button" type="button" data-test-robot="${robot.id}" ${robot.configured ? "" : "disabled"}>${robot.configured ? "发送测试消息" : "配置后可测试"}</button>
-  </article>`;
-}
-
-async function testRobot(channel, button) {
-  const originalText = button.textContent;
-  button.disabled = true;
-  button.textContent = "正在发送";
-  try {
-    const response = await fetch(`/api/robots/${encodeURIComponent(channel)}/test`, { method: "POST" });
-    const result = await response.json();
-    if (!response.ok) throw new Error(result.detail || `API ${response.status}`);
-    showToast(`${result.robot.name}测试消息发送成功`, "success");
-    await Promise.all([loadRobots(), loadDashboard()]);
-  } catch (error) {
-    showToast(`测试消息发送失败：${error.message}`, "error");
-  } finally {
-    button.disabled = false;
-    button.textContent = originalText;
-  }
-}
-
-function escapeHtml(value) {
-  return String(value)
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#039;");
-}
-function setChannelReady(element, enabled) {
-  element.textContent = enabled ? "已启用" : "未配置";
-  element.className = enabled ? "ready" : "optional";
-}
-
-async function loadDashboard() {
-  try {
-    const response = await fetch("/api/dashboard");
-    if (!response.ok) throw new Error(`API ${response.status}`);
-    const data = await response.json();
-    setServiceStatus(true);
-    updateDashboard(data);
-  } catch (error) {
-    setServiceStatus(false);
-    showToast(`无法读取管理数据：${error.message}`, "error");
-  }
-}
-
-async function loadEvents() {
-  try {
-    const query = eventFilter ? `?status=${eventFilter}` : "";
-    const response = await fetch(`/api/events${query}`);
-    if (!response.ok) throw new Error(`API ${response.status}`);
-    const result = await response.json();
-    eventData = result.events || [];
-    renderEventTable(eventData);
-    updateEventSummary(result.summary);
-    renderTrend(eventData);
-    setServiceStatus(true);
-  } catch (error) {
-    setServiceStatus(false);
-    showToast(`无法读取告警事件：${error.message}`, "error");
-  }
-}
-
-function updateEventSummary(summary) {
-  elements.allEventsCount.textContent = String(summary.total);
-  elements.pendingEventsCount.textContent = String(summary.pending);
-  elements.ackEventsCount.textContent = String(summary.acknowledged);
-  elements.resolvedEventsCount.textContent = String(summary.resolved);
-  elements.pendingNavCount.textContent = String(summary.pending);
-  elements.notificationDot.hidden = summary.pending === 0;
-}
-
-function renderRecentEvents(events) {
-  if (!events.length) {
-    elements.recentEventList.innerHTML = "<p>暂无告警事件。开始视频巡检后，满足连续帧条件的告警会显示在这里。</p>";
-    return;
-  }
-  elements.recentEventList.innerHTML = events.map((event) => {
-    const primary = event.classes.includes("fire") ? "fire" : "smoke";
-    const label = event.classes.map(classLabel).join("、");
-    return `<div class="event-list-item"><span class="event-type-icon ${primary}">${primary === "fire" ? "火" : "烟"}</span><div class="event-description"><strong>${label}检测告警</strong><span>${formatDate(event.created_at)} · ${event.id}</span></div><strong class="event-confidence">${Math.round(event.max_confidence * 100)}%</strong><span class="event-status status-${event.status}">${STATUS_LABELS[event.status]}</span></div>`;
-  }).join("");
-}
-
-function renderEventTable(events) {
-  elements.eventTableMeta.textContent = `${events.length} 条记录`;
-  if (!events.length) {
-    elements.eventTableBody.innerHTML = '<tr><td colspan="7" class="empty-cell">当前筛选条件下暂无告警事件</td></tr>';
-    return;
-  }
-  elements.eventTableBody.innerHTML = events.map((event) => {
-    const classes = event.classes.map((name) => `<span class="type-tag type-${name}">${classLabel(name)}</span>`).join(" ");
-    const channels = enabledChannelNames(event.notification_channels).join(" + ") || "未发送";
-    return `<tr><td>${event.id}</td><td>${formatDate(event.created_at)}</td><td>${classes}</td><td>${Math.round(event.max_confidence * 100)}%</td><td>${channels}</td><td><span class="event-status status-${event.status}">${STATUS_LABELS[event.status]}</span></td><td><div class="table-actions">${event.status === "pending" ? `<button class="table-action" data-event-id="${event.id}" data-event-status="acknowledged">确认</button>` : ""}${event.status !== "resolved" ? `<button class="table-action" data-event-id="${event.id}" data-event-status="resolved">解决</button>` : ""}</div></td></tr>`;
-  }).join("");
-}
-
-function classLabel(name) {
-  return name === "fire" ? "火焰" : "烟雾";
-}
-
-async function updateEventStatus(eventId, status) {
-  try {
-    const response = await fetch(`/api/events/${eventId}`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ status }),
-    });
-    if (!response.ok) throw new Error(`API ${response.status}`);
-    showToast(`事件 ${eventId} 已更新为${STATUS_LABELS[status]}`, "success");
-    await Promise.all([loadEvents(), loadDashboard()]);
-  } catch (error) {
-    showToast(`事件更新失败：${error.message}`, "error");
-  }
-}
-
-function renderTrend(events) {
-  const days = Array.from({ length: 7 }, (_, index) => {
-    const date = new Date();
-    date.setDate(date.getDate() - (6 - index));
-    return { key: date.toISOString().slice(0, 10), label: `${date.getMonth() + 1}/${date.getDate()}`, fire: 0, smoke: 0 };
-  });
-  events.forEach((event) => {
-    const day = days.find((item) => item.key === String(event.created_at).slice(0, 10));
-    if (!day) return;
-    if (event.classes.includes("fire")) day.fire += 1;
-    if (event.classes.includes("smoke")) day.smoke += 1;
-  });
-  const width = 720;
-  const height = 225;
-  const padding = { left: 34, right: 12, top: 14, bottom: 28 };
-  const maxValue = Math.max(3, ...days.flatMap((day) => [day.fire, day.smoke]));
-  const x = (index) => padding.left + index * ((width - padding.left - padding.right) / 6);
-  const y = (value) => height - padding.bottom - value * ((height - padding.top - padding.bottom) / maxValue);
-  const path = (key) => days.map((day, index) => `${index ? "L" : "M"}${x(index)},${y(day[key])}`).join(" ");
-  const gridValues = [0, Math.ceil(maxValue / 2), maxValue];
-  elements.trendChart.innerHTML = `<svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none"><title>最近七天火焰与烟雾告警趋势</title>${gridValues.map((value) => `<line class="chart-grid" x1="${padding.left}" x2="${width - padding.right}" y1="${y(value)}" y2="${y(value)}"></line><text class="chart-axis-label" x="4" y="${y(value) + 3}">${value}</text>`).join("")}<path class="chart-fire" d="${path("fire")}"></path><path class="chart-smoke" d="${path("smoke")}"></path>${days.map((day, index) => `<circle class="chart-point-fire" cx="${x(index)}" cy="${y(day.fire)}" r="3"></circle><circle class="chart-point-smoke" cx="${x(index)}" cy="${y(day.smoke)}" r="3"></circle><text class="chart-axis-label" text-anchor="middle" x="${x(index)}" y="${height - 8}">${day.label}</text>`).join("")}</svg>`;
-}
-
-function clearDetectionResults() {
-  elements.smokeCount.textContent = "0";
-  elements.fireCount.textContent = "0";
-  elements.maxConfidence.textContent = "--";
-  elements.riskStatus.textContent = "待机";
-  elements.detectionList.innerHTML = '<p class="empty-copy">暂无检测结果</p>';
-  const context = elements.overlayCanvas.getContext("2d");
-  context.clearRect(0, 0, elements.overlayCanvas.width, elements.overlayCanvas.height);
-}
-
-function drawDetections(detections = []) {
-  const video = elements.videoPreview;
-  if (!video.videoWidth || !video.videoHeight) return;
-  const canvas = elements.overlayCanvas;
-  canvas.width = video.videoWidth;
-  canvas.height = video.videoHeight;
-  const context = canvas.getContext("2d");
-  context.clearRect(0, 0, canvas.width, canvas.height);
-  detections.forEach((detection) => {
-    const [x1, y1, x2, y2] = detection.box || [];
-    const color = detection.class === "fire" ? "#ff665e" : "#41d6c3";
-    context.strokeStyle = color;
-    context.lineWidth = Math.max(2, canvas.width / 320);
-    context.strokeRect(x1, y1, x2 - x1, y2 - y1);
-    context.fillStyle = color;
-    context.font = `${Math.max(13, canvas.width / 60)}px sans-serif`;
-    context.fillText(`${detection.class} ${Math.round(detection.confidence * 100)}%`, x1 + 4, Math.max(18, y1 - 6));
-  });
-}
-
-function updateDetectionResults(result) {
-  const detections = result.detections || [];
-  const smoke = detections.filter((item) => item.class === "smoke").length;
-  const fire = detections.filter((item) => item.class === "fire").length;
-  const max = detections.reduce((highest, item) => Math.max(highest, item.confidence || 0), 0);
-  elements.smokeCount.textContent = String(smoke);
-  elements.fireCount.textContent = String(fire);
-  elements.maxConfidence.textContent = max ? `${Math.round(max * 100)}%` : "--";
-  elements.riskStatus.textContent = fire ? "高风险" : smoke ? "需关注" : "正常";
-  elements.detectionList.innerHTML = detections.length
-    ? detections.map((item) => `<div class="detection-row"><span>${classLabel(item.class)}</span><strong>${Math.round(item.confidence * 100)}%</strong></div>`).join("")
-    : '<p class="empty-copy">未发现烟雾或火焰目标</p>';
-  const alert = result.alert || {};
-  const channelNames = enabledChannelNames(alert.notification_channels);
-  if (alert.triggered) {
-    const labels = alert.classes.map(classLabel).join("、");
-    elements.alertStatus.textContent = channelNames.length ? `已触发 ${channelNames.join(" + ")} 告警：${labels}` : `已生成告警事件：${labels}（机器人未配置）`;
-    elements.alertStatus.className = "alert-status alert-triggered";
-    showToast(`检测到${labels}，已生成告警事件`, "error");
-    loadDashboard();
-  } else {
-    const fireFrames = alert.consecutive?.fire || 0;
-    const smokeFrames = alert.consecutive?.smoke || 0;
-    elements.alertStatus.textContent = channelNames.length ? `${channelNames.join(" + ")}已启用 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}` : `机器人未配置 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}`;
-    elements.alertStatus.className = "alert-status";
-  }
-  drawDetections(detections);
-  elements.lastUpdated.textContent = `推理 ${result.inference_ms ?? "--"} ms`;
-}
-
-function captureFrame() {
-  const video = elements.videoPreview;
-  frameCanvas.width = video.videoWidth;
-  frameCanvas.height = video.videoHeight;
-  frameCanvas.getContext("2d").drawImage(video, 0, 0);
-  return new Promise((resolve) => frameCanvas.toBlob(resolve, "image/jpeg", 0.88));
-}
-
-async function detectCurrentFrame(timestamp) {
-  if (!detectionActive || requestInFlight || !sessionId || elements.videoPreview.paused || elements.videoPreview.ended) return;
-  const interval = Number(elements.intervalSelect.value);
-  if (timestamp - lastDetectionAt < interval) return;
-  lastDetectionAt = timestamp;
-  requestInFlight = true;
-  elements.loadingState.hidden = false;
-  try {
-    const frame = await captureFrame();
-    if (!frame) throw new Error("无法截取视频帧");
-    const form = new FormData();
-    form.append("file", frame, "video-frame.jpg");
-    const response = await fetch(`${API_ENDPOINT}?session_id=${encodeURIComponent(sessionId)}`, { method: "POST", body: form });
-    if (!response.ok) throw new Error(`API ${response.status}`);
-    updateDetectionResults(await response.json());
-    elements.inspectionStatus.textContent = "检测运行中";
-    elements.inspectionStatus.className = "status-chip status-online";
-    setServiceStatus(true);
-  } catch (error) {
-    elements.inspectionStatus.textContent = "检测异常";
-    elements.inspectionStatus.className = "status-chip status-offline";
-    showToast(`视频检测失败：${error.message}`, "error");
-  } finally {
-    requestInFlight = false;
-    elements.loadingState.hidden = true;
-  }
-}
-
-function scheduleDetection(timestamp) {
-  detectCurrentFrame(timestamp);
-  if (detectionActive) requestAnimationFrame(scheduleDetection);
-}
-
-async function startDetection() {
-  if (!elements.videoPreview.src) return;
-  detectionActive = true;
-  lastDetectionAt = -Infinity;
-  elements.runDetectionButton.textContent = "停止检测";
-  elements.intervalSelect.disabled = true;
-  try {
-    await elements.videoPreview.play();
-    requestAnimationFrame(scheduleDetection);
-  } catch {
-    stopDetection();
-    showToast("浏览器未允许视频播放，请手动点击播放后重试。", "error");
-  }
-}
-
-function stopDetection() {
-  detectionActive = false;
-  elements.runDetectionButton.textContent = "开始连续检测";
-  elements.intervalSelect.disabled = false;
-  elements.inspectionStatus.textContent = elements.videoPreview.src ? "检测已暂停" : "等待视频";
-  elements.inspectionStatus.className = "status-chip status-idle";
-}
-
-async function resetSession() {
-  const previous = sessionId;
-  sessionId = crypto.randomUUID();
-  if (previous) fetch(`/api/sessions/${encodeURIComponent(previous)}`, { method: "DELETE" }).catch(() => {});
-}
-
-document.querySelectorAll("[data-view], [data-view-jump]").forEach((control) => {
-  control.addEventListener("click", () => switchView(control.dataset.view || control.dataset.viewJump));
-});
-document.querySelectorAll("[data-event-filter]").forEach((button) => {
-  button.addEventListener("click", () => {
-    eventFilter = button.dataset.eventFilter;
-    document.querySelectorAll("[data-event-filter]").forEach((item) => item.classList.toggle("is-active", item === button));
-    loadEvents();
-  });
-});
-elements.refreshRobotsButton.addEventListener("click", loadRobots);
-elements.robotCardGrid.addEventListener("click", (event) => {
-  const button = event.target.closest("[data-test-robot]");
-  if (button) testRobot(button.dataset.testRobot, button);
-});
-elements.eventTableBody.addEventListener("click", (event) => {
-  const button = event.target.closest("[data-event-id]");
-  if (button) updateEventStatus(button.dataset.eventId, button.dataset.eventStatus);
-});
-elements.menuButton.addEventListener("click", () => elements.sidebar.classList.toggle("is-open"));
-elements.refreshEventsButton.addEventListener("click", loadEvents);
-elements.runDetectionButton.addEventListener("click", () => detectionActive ? stopDetection() : startDetection());
-elements.videoPreview.addEventListener("ended", stopDetection);
-elements.videoPreview.addEventListener("timeupdate", () => {
-  elements.videoClock.textContent = `${formatTime(elements.videoPreview.currentTime)} / ${formatTime(elements.videoPreview.duration)}`;
-});
-elements.videoPreview.addEventListener("seeked", async () => { drawDetections([]); await resetSession(); });
-elements.videoPreview.addEventListener("resize", () => drawDetections([]));
-elements.videoInput.addEventListener("change", async () => {
-  const [file] = elements.videoInput.files;
-  if (!file) return;
-  stopDetection();
-  elements.videoPreview.pause();
-  if (videoUrl) URL.revokeObjectURL(videoUrl);
-  videoUrl = URL.createObjectURL(file);
-  elements.videoPreview.src = videoUrl;
-  elements.videoPreview.hidden = false;
-  elements.emptyState.hidden = true;
-  elements.sourceLabel.textContent = file.name;
-  elements.videoMeta.textContent = `${(file.size / 1024 / 1024).toFixed(1)} MB · 本地视频`;
-  elements.runDetectionButton.disabled = false;
-  elements.inspectionStatus.textContent = "视频已就绪";
-  elements.inspectionStatus.className = "status-chip status-online";
-  await resetSession();
-  clearDetectionResults();
-});
-elements.clearButton.addEventListener("click", async () => {
-  stopDetection();
-  elements.videoPreview.pause();
-  elements.videoPreview.removeAttribute("src");
-  elements.videoPreview.load();
-  elements.videoPreview.hidden = true;
-  if (videoUrl) URL.revokeObjectURL(videoUrl);
-  videoUrl = null;
-  elements.videoInput.value = "";
-  elements.sourceLabel.textContent = "未选择视频";
-  elements.videoMeta.textContent = "支持 MP4、WebM 等浏览器可播放格式";
-  elements.emptyState.hidden = false;
-  elements.runDetectionButton.disabled = true;
-  await resetSession();
-  clearDetectionResults();
-});
-
-updateClock();
-setInterval(updateClock, 1000);
-resetSession();
-renderRobots();
-Promise.all([loadDashboard(), loadEvents()]);
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -68,7 +68,7 @@

            <div class="dashboard-command-grid">
              <article class="panel safety-score-panel">
-                <div class="panel-header"><div><p class="section-kicker">SAFETY INDEX</p><h3>综合安全指数</h3></div><span class="trend-badge">较昨日 +2.4%</span></div>
+                <div class="panel-header"><div><p class="section-kicker">SAFETY INDEX</p><h3>综合安全指数</h3></div></div>
                <div class="safety-score-body"><div id="safetyGauge" class="safety-gauge" style="--score: 86"><div><strong id="safetyScore">86</strong><span>安全</span></div></div><div class="score-breakdown"><div><span>机器人可用率</span><strong id="deviceOnlineRate">--</strong></div><div><span>事件闭环率</span><strong id="eventClosureRate">--</strong></div><div><span>通知覆盖率</span><strong id="notificationCoverage">--</strong></div></div></div>
              </article>
              <article class="panel message-flow-panel">
@@ -84,7 +84,7 @@
              </article>
              <article class="panel risk-donut-panel">
                <div class="panel-header"><div><p class="section-kicker">RISK MIX</p><h3>风险类型分布</h3></div><span class="micro-copy">近 7 日</span></div>
-                <div class="donut-layout"><div id="riskDonut" class="risk-donut"><div><strong id="riskTotal">0</strong><span>事件</span></div></div><div class="donut-legend"><div><span><i class="legend-fire"></i>火焰</span><strong id="fireRiskRatio">0%</strong></div><div><span><i class="legend-smoke"></i>烟雾</span><strong id="smokeRiskRatio">0%</strong></div><div><span><i class="legend-device"></i>设备</span><strong>12%</strong></div></div></div>
+                <div class="donut-layout"><div id="riskDonut" class="risk-donut"><div><strong id="riskTotal">0</strong><span>事件</span></div></div><div class="donut-legend"><div><span><i class="legend-fire"></i>火焰</span><strong id="fireRiskRatio">0%</strong></div><div><span><i class="legend-smoke"></i>烟雾</span><strong id="smokeRiskRatio">0%</strong></div></div></div>
              </article>
            </div>

@@ -165,7 +165,7 @@
            <div class="fleet-stat-grid">
              <article class="fleet-stat"><span>支持平台</span><strong id="robotTotalCount">0</strong><small>企业微信与飞书</small></article>
              <article class="fleet-stat"><span>已配置</span><strong id="robotConfiguredCount">0</strong><small>可接收告警消息</small></article>
-              <article class="fleet-stat"><span>成功投递</span><strong id="robotDeliveredCount">0</strong><small>本次服务运行期间</small></article>
+              <article class="fleet-stat"><span>成功投递</span><strong id="robotDeliveredCount">0</strong><small>累计（已持久化）</small></article>
              <article class="fleet-stat"><span>发送失败</span><strong id="robotFailedCount">0</strong><small>需要检查网络或凭据</small></article>
            </div>
            <div class="robot-management-grid message-robot-layout">
@@ -192,7 +192,7 @@
            <div class="page-intro"><div><p class="section-kicker">SYSTEM SETTINGS</p><h2>系统设置</h2><p>查看当前生效的模型和告警参数。配置修改后需重启服务。</p></div></div>
            <div class="settings-grid">
              <article class="panel settings-card"><div class="panel-header"><div><p class="section-kicker">MODEL</p><h3>模型配置</h3></div></div><dl><div><dt>权重文件</dt><dd id="settingWeights">--</dd></div><div><dt>输入尺寸</dt><dd id="settingImageSize">--</dd></div><div><dt>置信度阈值</dt><dd id="settingConfidence">--</dd></div><div><dt>IOU 阈值</dt><dd id="settingIou">--</dd></div></dl></article>
-              <article class="panel settings-card"><div class="panel-header"><div><p class="section-kicker">ALERT POLICY</p><h3>告警策略</h3></div></div><dl><div><dt>连续确认</dt><dd id="settingConfirmFrames">--</dd></div><div><dt>分类冷却</dt><dd id="settingCooldown">--</dd></div><div><dt>事件存储</dt><dd>进程内最近 500 条</dd></div><div><dt>视频处理</dt><dd>浏览器本地抽帧</dd></div></dl></article>
+              <article class="panel settings-card"><div class="panel-header"><div><p class="section-kicker">ALERT POLICY</p><h3>告警策略</h3></div></div><dl><div><dt>连续确认</dt><dd id="settingConfirmFrames">--</dd></div><div><dt>分类冷却</dt><dd id="settingCooldown">--</dd></div><div><dt>事件存储</dt><dd>SQLite 持久化 · 最近 500 条</dd></div><div><dt>视频处理</dt><dd>浏览器本地抽帧</dd></div></dl></article>
            </div>
            <article class="panel env-panel"><div class="panel-header"><div><p class="section-kicker">ENVIRONMENT</p><h3>环境变量参考</h3></div></div><pre><code>YOLO_WEIGHTS=...
 YOLO_DEVICE=0
@@ -206,6 +206,6 @@ ALERT_COOLDOWN_SECONDS=60</code></pre></article>
      </main>
    </div>
    <div id="toastRegion" class="toast-region" aria-live="polite"></div>
-    <script src="./app.js" type="module"></script>
+    <script src="./main.js" type="module"></script>
  </body>
 </html>
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -0,0 +1,37 @@
+import { qs, VIEW_LABELS } from "./modules/dom.js";
+import { updateClock } from "./modules/ui.js";
+import { loadDashboard } from "./views/dashboard.js";
+import { loadEvents, initEvents } from "./views/events.js";
+import { loadRobots, initRobots } from "./views/robots.js";
+import { initInspection, resetSession } from "./views/inspection.js";
+import { renderRobots } from "./views/robotCards.js";
+
+function switchView(viewName) {
+  if (!VIEW_LABELS[viewName]) return;
+  document.querySelectorAll("[data-view-panel]").forEach((panel) => {
+    panel.classList.toggle("is-active", panel.dataset.viewPanel === viewName);
+  });
+  document.querySelectorAll("[data-view]").forEach((button) => {
+    button.classList.toggle("is-active", button.dataset.view === viewName);
+  });
+  qs("#viewTitle").textContent = VIEW_LABELS[viewName];
+  qs("#viewBreadcrumb").textContent = VIEW_LABELS[viewName];
+  qs("#sidebar").classList.remove("is-open");
+  if (viewName === "events") loadEvents();
+  if (viewName === "robots") loadRobots();
+  if (["overview", "risks", "settings"].includes(viewName)) loadDashboard();
+}
+
+document.querySelectorAll("[data-view], [data-view-jump]").forEach((control) => {
+  control.addEventListener("click", () => switchView(control.dataset.view || control.dataset.viewJump));
+});
+qs("#menuButton").addEventListener("click", () => qs("#sidebar").classList.toggle("is-open"));
+
+initInspection();
+initEvents();
+initRobots();
+updateClock();
+setInterval(updateClock, 1000);
+resetSession();
+renderRobots();
+Promise.all([loadDashboard(), loadEvents()]);
--- a/frontend/modules/api.js
+++ b/frontend/modules/api.js
@@ -0,0 +1,8 @@
+export async function apiFetch(url, options = {}) {
+  const response = await fetch(url, options);
+  const result = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    throw new Error(result.detail || `API ${response.status}`);
+  }
+  return result;
+}
--- a/frontend/modules/charts.js
+++ b/frontend/modules/charts.js
@@ -0,0 +1,30 @@
+import { qs } from "./dom.js";
+
+export function renderTrend(events = []) {
+  const days = Array.from({ length: 7 }, (_, index) => {
+    const date = new Date();
+    date.setDate(date.getDate() - (6 - index));
+    return {
+      key: date.toISOString().slice(0, 10),
+      label: `${date.getMonth() + 1}/${date.getDate()}`,
+      fire: 0,
+      smoke: 0,
+    };
+  });
+  events.forEach((event) => {
+    const classes = event.classes || [];
+    const day = days.find((item) => item.key === String(event.created_at).slice(0, 10));
+    if (!day) return;
+    if (classes.includes("fire")) day.fire += 1;
+    if (classes.includes("smoke")) day.smoke += 1;
+  });
+  const width = 720;
+  const height = 225;
+  const padding = { left: 34, right: 12, top: 14, bottom: 28 };
+  const maxValue = Math.max(3, ...days.flatMap((day) => [day.fire, day.smoke]));
+  const x = (index) => padding.left + index * ((width - padding.left - padding.right) / 6);
+  const y = (value) => height - padding.bottom - value * ((height - padding.top - padding.bottom) / maxValue);
+  const path = (key) => days.map((day, index) => `${index ? "L" : "M"}${x(index)},${y(day[key])}`).join(" ");
+  const gridValues = [0, Math.ceil(maxValue / 2), maxValue];
+  qs("#trendChart").innerHTML = `<svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none"><title>最近七天火焰与烟雾告警趋势</title>${gridValues.map((value) => `<line class="chart-grid" x1="${padding.left}" x2="${width - padding.right}" y1="${y(value)}" y2="${y(value)}"></line><text class="chart-axis-label" x="4" y="${y(value) + 3}">${value}</text>`).join("")}<path class="chart-fire" d="${path("fire")}"></path><path class="chart-smoke" d="${path("smoke")}"></path>${days.map((day, index) => `<circle class="chart-point-fire" cx="${x(index)}" cy="${y(day.fire)}" r="3"></circle><circle class="chart-point-smoke" cx="${x(index)}" cy="${y(day.smoke)}" r="3"></circle><text class="chart-axis-label" text-anchor="middle" x="${x(index)}" y="${height - 8}">${day.label}</text>`).join("")}</svg>`;
+}
--- a/frontend/modules/dom.js
+++ b/frontend/modules/dom.js
@@ -0,0 +1,57 @@
+const elementCache = new Map();
+
+export function qs(selector) {
+  if (!elementCache.has(selector)) {
+    elementCache.set(selector, document.querySelector(selector));
+  }
+  return elementCache.get(selector);
+}
+
+export function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+export const VIEW_LABELS = {
+  overview: "系统总览",
+  inspection: "视频巡检",
+  events: "告警中心",
+  robots: "消息机器人",
+  risks: "风险台账",
+  settings: "系统设置",
+};
+
+export const STATUS_LABELS = {
+  pending: "待处置",
+  acknowledged: "已确认",
+  resolved: "已解决",
+};
+
+const CLASS_LABELS = { fire: "火焰", smoke: "烟雾" };
+
+export function classLabel(name) {
+  return CLASS_LABELS[name] || escapeHtml(String(name));
+}
+
+export function formatDate(value) {
+  if (!value) return "--";
+  return new Date(value).toLocaleString("zh-CN", { hour12: false });
+}
+
+export function formatTime(seconds) {
+  if (!Number.isFinite(seconds)) return "00:00";
+  const minutes = Math.floor(seconds / 60);
+  const remaining = Math.floor(seconds % 60);
+  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
+}
+
+export function enabledChannelNames(channels = {}) {
+  const names = [];
+  if (channels.wechat) names.push("企业微信");
+  if (channels.feishu) names.push("飞书");
+  return names;
+}
--- a/frontend/modules/store.js
+++ b/frontend/modules/store.js
@@ -0,0 +1,6 @@
+// Shared view state. Keeping it here (instead of inside one view module)
+// lets views depend on each other without import cycles.
+export const store = {
+  dashboardData: null,
+  eventData: [],
+};
--- a/frontend/modules/ui.js
+++ b/frontend/modules/ui.js
@@ -0,0 +1,36 @@
+import { qs } from "./dom.js";
+
+export function showToast(message, type = "info") {
+  const toast = document.createElement("div");
+  toast.className = `toast ${type}`;
+  toast.textContent = message;
+  qs("#toastRegion").appendChild(toast);
+  setTimeout(() => toast.remove(), 3600);
+}
+
+export function setServiceStatus(online) {
+  const statusChip = qs("#globalStatus");
+  statusChip.textContent = online ? "服务运行正常" : "服务连接异常";
+  statusChip.className = `status-chip ${online ? "status-online" : "status-offline"}`;
+  qs("#sidebarStatus").textContent = online ? "服务在线" : "服务离线";
+  qs("#sidebarStatusDot").className = `status-dot ${online ? "is-online" : "is-offline"}`;
+  const readyApi = qs("#readyApi");
+  readyApi.textContent = online ? "正常" : "异常";
+  readyApi.className = online ? "ready" : "not-ready";
+}
+
+export function setChannelReady(element, enabled) {
+  element.textContent = enabled ? "已启用" : "未配置";
+  element.className = enabled ? "ready" : "optional";
+}
+
+export function updateClock() {
+  qs("#currentClock").textContent = new Date().toLocaleString("zh-CN", {
+    hour12: false,
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -207,7 +207,6 @@ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-even
 .stat-card:hover { transform: translateY(-2px); border-color: #31545d; }
 .dashboard-command-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(390px, 1.35fr) minmax(260px, .78fr); gap: 14px; margin-top: 14px; }
 .dashboard-command-grid .panel { min-height: 290px; }
-.trend-badge { border: 1px solid #29664b; padding: 5px 8px; background: var(--green-soft); color: var(--green); font-size: 9px; }
 .safety-score-body { display: grid; height: calc(100% - 48px); grid-template-columns: 150px 1fr; align-items: center; gap: 20px; }
 .safety-gauge { --score: 86; position: relative; display: grid; width: 144px; height: 144px; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--score) * 1%), #1a3039 0); box-shadow: 0 0 36px #41d6c316; }
 .safety-gauge::before { content: ""; position: absolute; inset: 12px; border: 1px solid #2c444d; border-radius: 50%; background: var(--surface); }
@@ -222,9 +221,9 @@ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-even
 .message-flow { display: grid; min-height: 190px; grid-template-columns: minmax(95px, 1fr) 36px minmax(95px, 1fr) 36px minmax(120px, 1.2fr); align-items: center; gap: 8px; border: 1px solid var(--line); padding: 18px; background: linear-gradient(145deg, #0b1820, #0e222b); }
 .flow-node { display: grid; min-height: 100px; align-content: center; justify-items: center; gap: 7px; border: 1px solid #2a4650; padding: 12px; background: #102630c7; text-align: center; }.flow-node > span { color: var(--cyan); font-size: 9px; letter-spacing: .12em; }.flow-node strong { font-size: 11px; }.flow-node small { color: var(--muted); font-size: 8px; line-height: 1.5; }.flow-node.policy { border-color: #37645e; background: #13302f; }.flow-node.channel { min-height: 76px; grid-template-columns: 28px 1fr; justify-items: start; gap: 2px 9px; text-align: left; }.flow-node.channel > span { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; color: white; font-weight: 800; }.flow-node.channel small { grid-column: 2; }.wechat-dot { background: #20b969; }.feishu-dot { background: #3370ff; }.flow-destinations { display: grid; gap: 9px; }.flow-connector { position: relative; height: 1px; background: #31515b; }.flow-connector::after { content: ""; position: absolute; top: -3px; right: -1px; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent var(--cyan); }.flow-foot { display: flex; justify-content: space-between; gap: 15px; padding-top: 12px; color: var(--muted); font-size: 9px; }.flow-foot strong { color: var(--cyan); font-size: 9px; }
 .donut-layout { display: grid; height: calc(100% - 45px); align-items: center; justify-items: center; gap: 20px; }
-.risk-donut { position: relative; display: grid; width: 142px; height: 142px; place-items: center; border-radius: 50%; background: conic-gradient(var(--red) 0 45%, var(--cyan) 45% 78%, var(--orange) 78% 100%); }
+.risk-donut { position: relative; display: grid; width: 142px; height: 142px; place-items: center; border-radius: 50%; background: conic-gradient(var(--line) 0 100%); }
 .risk-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }.risk-donut > div { position: relative; display: grid; justify-items: center; }.risk-donut strong { font-size: 30px; }.risk-donut span { color: var(--muted); font-size: 9px; }
-.donut-legend { display: grid; width: 100%; gap: 8px; }.donut-legend div { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 7px 0; font-size: 10px; }.donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); }.donut-legend i { width: 8px; height: 8px; }.legend-device { display: inline-block; background: var(--orange); }
+.donut-legend { display: grid; width: 100%; gap: 8px; }.donut-legend div { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 7px 0; font-size: 10px; }.donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); }.donut-legend i { width: 8px; height: 8px; }
 .overview-grid-lower { margin-top: 14px; }

 /* Messaging robots */
--- a/frontend/views/dashboard.js
+++ b/frontend/views/dashboard.js
@@ -0,0 +1,104 @@
+import { qs, escapeHtml, formatDate, STATUS_LABELS, classLabel, enabledChannelNames } from "../modules/dom.js";
+import { apiFetch } from "../modules/api.js";
+import { showToast, setServiceStatus, setChannelReady } from "../modules/ui.js";
+import { renderTrend } from "../modules/charts.js";
+import { renderRobots } from "./robotCards.js";
+import { store } from "../modules/store.js";
+
+export async function loadDashboard() {
+  try {
+    const data = await apiFetch("/api/dashboard");
+    setServiceStatus(true);
+    updateDashboard(data);
+  } catch (error) {
+    setServiceStatus(false);
+    showToast(`无法读取管理数据：${error.message}`, "error");
+  }
+}
+
+function updateDashboard(data) {
+  store.dashboardData = data;
+  const { summary, system, detection } = data;
+  const channels = system.alert_channels || {};
+  const channelNames = enabledChannelNames(channels);
+  qs("#todayEventCount").textContent = String(summary.today);
+  qs("#pendingEventCount").textContent = String(summary.pending);
+  qs("#pendingNavCount").textContent = String(summary.pending);
+  qs("#notificationDot").hidden = summary.pending === 0;
+  qs("#modelStatusValue").textContent = system.weights_available ? "运行正常" : "权重缺失";
+  qs("#modelStatusDetail").textContent = system.weights_available ? "模型文件已就绪" : "请检查 YOLO_WEIGHTS";
+  qs("#modelStatusValue").className = "text-value";
+  const robotPayload = data.robots || { robots: [], summary: {} };
+  const robotSummary = robotPayload.summary || {};
+  qs("#onlineRobotCount").textContent = String(robotSummary.configured || 0);
+  qs("#robotSummary").textContent = `${robotSummary.configured || 0} / ${robotSummary.total || 2} 已配置 · 成功投递 ${robotSummary.delivered || 0} 次`;
+  qs("#overviewMessage").textContent = summary.pending
+    ? `当前有 ${summary.pending} 条告警事件等待处置，请尽快进入告警中心确认。`
+    : "当前无待处置事件，模型与视频巡检服务保持监测状态。";
+  qs("#readyWeights").textContent = system.weights_available ? "已就绪" : "缺失";
+  qs("#readyWeights").className = system.weights_available ? "ready" : "not-ready";
+  setChannelReady(qs("#readyWechat"), channels.wechat);
+  setChannelReady(qs("#readyFeishu"), channels.feishu);
+  qs("#riskPendingValue").textContent = String(summary.pending);
+  qs("#riskChannelValue").textContent = `${channelNames.length} / 2`;
+  qs("#riskConfidenceValue").textContent = `${Math.round(detection.confidence * 100)}%`;
+  qs("#confirmFramesValue").textContent = `${detection.confirm_frames} 帧`;
+  qs("#cooldownValue").textContent = `${detection.cooldown_seconds} 秒`;
+  qs("#settingWeights").textContent = system.weights;
+  qs("#settingImageSize").textContent = `${detection.image_size} px`;
+  qs("#settingConfidence").textContent = detection.confidence.toFixed(2);
+  qs("#settingIou").textContent = detection.iou.toFixed(2);
+  qs("#settingConfirmFrames").textContent = `${detection.confirm_frames} 帧`;
+  qs("#settingCooldown").textContent = `${detection.cooldown_seconds} 秒`;
+  renderRecentEvents(data.recent_events || []);
+  const visualEvents = store.eventData.length ? store.eventData : data.recent_events || [];
+  renderTrend(visualEvents);
+  updateCommandVisuals(visualEvents, summary, channels, robotSummary);
+  renderRobots(robotPayload, detection);
+}
+
+function updateCommandVisuals(events, summary, channels, robotSummary = {}) {
+  const totalRobots = robotSummary.total || 2;
+  const configuredRobots = robotSummary.configured || 0;
+  const total = summary.total || 0;
+  const closureRate = total ? Math.round(((summary.resolved || 0) / total) * 100) : 100;
+  const notificationRate = Math.round((configuredRobots / totalRobots) * 100);
+  const safetyScore = Math.max(42, Math.min(98, Math.round(notificationRate * 0.35 + closureRate * 0.35 + Math.max(0, 100 - (summary.pending || 0) * 8) * 0.3)));
+  qs("#deviceOnlineRate").textContent = `${notificationRate}%`;
+  qs("#eventClosureRate").textContent = `${closureRate}%`;
+  qs("#notificationCoverage").textContent = `${notificationRate}%`;
+  qs("#safetyScore").textContent = String(safetyScore);
+  qs("#safetyGauge").style.setProperty("--score", safetyScore);
+  qs("#overviewWechatState").textContent = channels.wechat ? "已配置" : "未配置";
+  qs("#overviewFeishuState").textContent = channels.feishu ? "已配置" : "未配置";
+  qs("#overviewPolicyText").textContent = `${store.dashboardData?.detection?.confirm_frames || 3} 帧确认`;
+  qs("#overviewDeliveryCount").textContent = `累计成功 ${robotSummary.delivered || 0} 次`;
+
+  let fireEvents = 0;
+  let smokeEvents = 0;
+  events.forEach((event) => {
+    const classes = event.classes || [];
+    if (classes.includes("fire")) fireEvents += 1;
+    if (classes.includes("smoke")) smokeEvents += 1;
+  });
+  const detectedTotal = fireEvents + smokeEvents;
+  const fireArc = detectedTotal ? Math.round((fireEvents / detectedTotal) * 100) : 0;
+  const smokeArc = detectedTotal ? 100 - fireArc : 0;
+  qs("#riskTotal").textContent = String(detectedTotal);
+  qs("#fireRiskRatio").textContent = `${detectedTotal ? Math.round((fireEvents / detectedTotal) * 100) : 0}%`;
+  qs("#smokeRiskRatio").textContent = `${detectedTotal ? Math.round((smokeEvents / detectedTotal) * 100) : 0}%`;
+  qs("#riskDonut").style.background = `conic-gradient(var(--red) 0 ${fireArc}%, var(--cyan) ${fireArc}% ${fireArc + smokeArc}%, var(--line) ${fireArc + smokeArc}% 100%)`;
+}
+
+function renderRecentEvents(events) {
+  if (!events.length) {
+    qs("#recentEventList").innerHTML = "<p>暂无告警事件。开始视频巡检后，满足连续帧条件的告警会显示在这里。</p>";
+    return;
+  }
+  qs("#recentEventList").innerHTML = events.map((event) => {
+    const classes = event.classes || [];
+    const primary = classes.includes("fire") ? "fire" : "smoke";
+    const label = classes.map(classLabel).join("、");
+    return `<div class="event-list-item"><span class="event-type-icon ${primary}">${primary === "fire" ? "火" : "烟"}</span><div class="event-description"><strong>${label}检测告警</strong><span>${formatDate(event.created_at)} · ${escapeHtml(event.id)}</span></div><strong class="event-confidence">${Math.round(event.max_confidence * 100)}%</strong><span class="event-status status-${escapeHtml(event.status)}">${STATUS_LABELS[event.status] || escapeHtml(event.status)}</span></div>`;
+  }).join("");
+}
--- a/frontend/views/events.js
+++ b/frontend/views/events.js
@@ -0,0 +1,77 @@
+import { qs, escapeHtml, STATUS_LABELS, classLabel, formatDate, enabledChannelNames } from "../modules/dom.js";
+import { apiFetch } from "../modules/api.js";
+import { showToast, setServiceStatus } from "../modules/ui.js";
+import { renderTrend } from "../modules/charts.js";
+import { store } from "../modules/store.js";
+import { loadDashboard } from "./dashboard.js";
+
+let eventFilter = "";
+
+export async function loadEvents() {
+  try {
+    const query = eventFilter ? `?status=${eventFilter}` : "";
+    const result = await apiFetch(`/api/events${query}`);
+    store.eventData = result.events || [];
+    renderEventTable(store.eventData);
+    updateEventSummary(result.summary);
+    renderTrend(store.eventData);
+    setServiceStatus(true);
+  } catch (error) {
+    setServiceStatus(false);
+    showToast(`无法读取告警事件：${error.message}`, "error");
+  }
+}
+
+function updateEventSummary(summary) {
+  qs("#allEventsCount").textContent = String(summary.total);
+  qs("#pendingEventsCount").textContent = String(summary.pending);
+  qs("#ackEventsCount").textContent = String(summary.acknowledged);
+  qs("#resolvedEventsCount").textContent = String(summary.resolved);
+  qs("#pendingNavCount").textContent = String(summary.pending);
+  qs("#notificationDot").hidden = summary.pending === 0;
+}
+
+function renderEventTable(events) {
+  qs("#eventTableMeta").textContent = `${events.length} 条记录`;
+  if (!events.length) {
+    qs("#eventTableBody").innerHTML = '<tr><td colspan="7" class="empty-cell">当前筛选条件下暂无告警事件</td></tr>';
+    return;
+  }
+  qs("#eventTableBody").innerHTML = events.map((event) => {
+    const classes = (event.classes || [])
+      .map((name) => `<span class="type-tag type-${escapeHtml(name)}">${classLabel(name)}</span>`)
+      .join(" ");
+    const channels = enabledChannelNames(event.notification_channels).join(" + ") || "未发送";
+    const statusLabel = STATUS_LABELS[event.status] || escapeHtml(event.status);
+    return `<tr><td>${escapeHtml(event.id)}</td><td>${formatDate(event.created_at)}</td><td>${classes}</td><td>${Math.round(event.max_confidence * 100)}%</td><td>${channels}</td><td><span class="event-status status-${escapeHtml(event.status)}">${statusLabel}</span></td><td><div class="table-actions">${event.status === "pending" ? `<button class="table-action" data-event-id="${escapeHtml(event.id)}" data-event-status="acknowledged">确认</button>` : ""}${event.status !== "resolved" ? `<button class="table-action" data-event-id="${escapeHtml(event.id)}" data-event-status="resolved">解决</button>` : ""}</div></td></tr>`;
+  }).join("");
+}
+
+export async function updateEventStatus(eventId, status) {
+  try {
+    await apiFetch(`/api/events/${encodeURIComponent(eventId)}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ status }),
+    });
+    showToast(`事件 ${eventId} 已更新为${STATUS_LABELS[status]}`, "success");
+    await Promise.all([loadEvents(), loadDashboard()]);
+  } catch (error) {
+    showToast(`事件更新失败：${error.message}`, "error");
+  }
+}
+
+export function initEvents() {
+  qs("#refreshEventsButton").addEventListener("click", loadEvents);
+  qs("#eventTableBody").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-event-id]");
+    if (button) updateEventStatus(button.dataset.eventId, button.dataset.eventStatus);
+  });
+  document.querySelectorAll("[data-event-filter]").forEach((button) => {
+    button.addEventListener("click", () => {
+      eventFilter = button.dataset.eventFilter;
+      document.querySelectorAll("[data-event-filter]").forEach((item) => item.classList.toggle("is-active", item === button));
+      loadEvents();
+    });
+  });
+}
--- a/frontend/views/inspection.js
+++ b/frontend/views/inspection.js
@@ -0,0 +1,196 @@
+import { qs, classLabel, formatTime, enabledChannelNames } from "../modules/dom.js";
+import { apiFetch } from "../modules/api.js";
+import { showToast, setServiceStatus } from "../modules/ui.js";
+import { loadDashboard } from "./dashboard.js";
+
+const API_ENDPOINT = "/api/detect";
+const frameCanvas = document.createElement("canvas");
+let videoUrl = null;
+let sessionId = null;
+let detectionActive = false;
+let requestInFlight = false;
+let lastDetectionAt = 0;
+
+function setInspectionStatus(text, className) {
+  const status = qs("#inspectionStatus");
+  status.textContent = text;
+  status.className = className;
+}
+
+function clearDetectionResults() {
+  qs("#smokeCount").textContent = "0";
+  qs("#fireCount").textContent = "0";
+  qs("#maxConfidence").textContent = "--";
+  qs("#riskStatus").textContent = "待机";
+  qs("#detectionList").innerHTML = '<p class="empty-copy">暂无检测结果</p>';
+  const context = qs("#overlayCanvas").getContext("2d");
+  context.clearRect(0, 0, qs("#overlayCanvas").width, qs("#overlayCanvas").height);
+}
+
+function drawDetections(detections = []) {
+  const video = qs("#videoPreview");
+  if (!video.videoWidth || !video.videoHeight) return;
+  const canvas = qs("#overlayCanvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const context = canvas.getContext("2d");
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  detections.forEach((detection) => {
+    const [x1, y1, x2, y2] = detection.box || [];
+    const color = detection.class === "fire" ? "#ff665e" : "#41d6c3";
+    context.strokeStyle = color;
+    context.lineWidth = Math.max(2, canvas.width / 320);
+    context.strokeRect(x1, y1, x2 - x1, y2 - y1);
+    context.fillStyle = color;
+    context.font = `${Math.max(13, canvas.width / 60)}px sans-serif`;
+    context.fillText(`${detection.class} ${Math.round(detection.confidence * 100)}%`, x1 + 4, Math.max(18, y1 - 6));
+  });
+}
+
+function updateDetectionResults(result) {
+  const detections = result.detections || [];
+  const smoke = detections.filter((item) => item.class === "smoke").length;
+  const fire = detections.filter((item) => item.class === "fire").length;
+  const max = detections.reduce((highest, item) => Math.max(highest, item.confidence || 0), 0);
+  qs("#smokeCount").textContent = String(smoke);
+  qs("#fireCount").textContent = String(fire);
+  qs("#maxConfidence").textContent = max ? `${Math.round(max * 100)}%` : "--";
+  qs("#riskStatus").textContent = fire ? "高风险" : smoke ? "需关注" : "正常";
+  qs("#detectionList").innerHTML = detections.length
+    ? detections.map((item) => `<div class="detection-row"><span>${classLabel(item.class)}</span><strong>${Math.round(item.confidence * 100)}%</strong></div>`).join("")
+    : '<p class="empty-copy">未发现烟雾或火焰目标</p>';
+  const alert = result.alert || {};
+  const channelNames = enabledChannelNames(alert.notification_channels);
+  if (alert.triggered) {
+    const labels = alert.classes.map(classLabel).join("、");
+    const alertStatus = qs("#alertStatus");
+    alertStatus.textContent = channelNames.length ? `已触发 ${channelNames.join(" + ")} 告警：${labels}` : `已生成告警事件：${labels}（机器人未配置）`;
+    alertStatus.className = "alert-status alert-triggered";
+    showToast(`检测到${labels}，已生成告警事件`, "error");
+    loadDashboard();
+  } else {
+    const fireFrames = alert.consecutive?.fire || 0;
+    const smokeFrames = alert.consecutive?.smoke || 0;
+    const alertStatus = qs("#alertStatus");
+    alertStatus.textContent = channelNames.length ? `${channelNames.join(" + ")}已启用 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}` : `机器人未配置 · 连续帧 火焰 ${fireFrames} / 烟雾 ${smokeFrames}`;
+    alertStatus.className = "alert-status";
+  }
+  drawDetections(detections);
+  qs("#lastUpdated").textContent = `推理 ${result.inference_ms ?? "--"} ms`;
+}
+
+function captureFrame() {
+  const video = qs("#videoPreview");
+  frameCanvas.width = video.videoWidth;
+  frameCanvas.height = video.videoHeight;
+  frameCanvas.getContext("2d").drawImage(video, 0, 0);
+  return new Promise((resolve) => frameCanvas.toBlob(resolve, "image/jpeg", 0.88));
+}
+
+async function detectCurrentFrame(timestamp) {
+  const video = qs("#videoPreview");
+  if (!detectionActive || requestInFlight || !sessionId || video.paused || video.ended) return;
+  const interval = Number(qs("#intervalSelect").value);
+  if (timestamp - lastDetectionAt < interval) return;
+  lastDetectionAt = timestamp;
+  requestInFlight = true;
+  qs("#loadingState").hidden = false;
+  try {
+    const frame = await captureFrame();
+    if (!frame) throw new Error("无法截取视频帧");
+    const form = new FormData();
+    form.append("file", frame, "video-frame.jpg");
+    const result = await apiFetch(`${API_ENDPOINT}?session_id=${encodeURIComponent(sessionId)}`, { method: "POST", body: form });
+    updateDetectionResults(result);
+    setInspectionStatus("检测运行中", "status-chip status-online");
+    setServiceStatus(true);
+  } catch (error) {
+    setInspectionStatus("检测异常", "status-chip status-offline");
+    showToast(`视频检测失败：${error.message}`, "error");
+  } finally {
+    requestInFlight = false;
+    qs("#loadingState").hidden = true;
+  }
+}
+
+function scheduleDetection(timestamp) {
+  detectCurrentFrame(timestamp);
+  if (detectionActive) requestAnimationFrame(scheduleDetection);
+}
+
+async function startDetection() {
+  const video = qs("#videoPreview");
+  if (!video.src) return;
+  detectionActive = true;
+  lastDetectionAt = -Infinity;
+  qs("#runDetectionButton").textContent = "停止检测";
+  qs("#intervalSelect").disabled = true;
+  try {
+    await video.play();
+    requestAnimationFrame(scheduleDetection);
+  } catch {
+    stopDetection();
+    showToast("浏览器未允许视频播放，请手动点击播放后重试。", "error");
+  }
+}
+
+function stopDetection() {
+  detectionActive = false;
+  qs("#runDetectionButton").textContent = "开始连续检测";
+  qs("#intervalSelect").disabled = false;
+  const video = qs("#videoPreview");
+  setInspectionStatus(video.src ? "检测已暂停" : "等待视频", "status-chip status-idle");
+}
+
+export async function resetSession() {
+  const previous = sessionId;
+  sessionId = crypto.randomUUID();
+  if (previous) fetch(`/api/sessions/${encodeURIComponent(previous)}`, { method: "DELETE" }).catch(() => {});
+}
+
+export function initInspection() {
+  const video = qs("#videoPreview");
+  qs("#runDetectionButton").addEventListener("click", () => detectionActive ? stopDetection() : startDetection());
+  video.addEventListener("ended", stopDetection);
+  video.addEventListener("timeupdate", () => {
+    qs("#videoClock").textContent = `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
+  });
+  video.addEventListener("seeked", async () => {
+    drawDetections([]);
+    await resetSession();
+  });
+  video.addEventListener("resize", () => drawDetections([]));
+  qs("#videoInput").addEventListener("change", async () => {
+    const [file] = qs("#videoInput").files;
+    if (!file) return;
+    stopDetection();
+    video.pause();
+    if (videoUrl) URL.revokeObjectURL(videoUrl);
+    videoUrl = URL.createObjectURL(file);
+    video.src = videoUrl;
+    video.hidden = false;
+    qs("#emptyState").hidden = true;
+    qs("#sourceLabel").textContent = file.name;
+    qs("#videoMeta").textContent = `${(file.size / 1024 / 1024).toFixed(1)} MB · 本地视频`;
+    qs("#runDetectionButton").disabled = false;
+    setInspectionStatus("视频已就绪", "status-chip status-online");
+    await resetSession();
+    clearDetectionResults();
+  });
+  qs("#clearButton").addEventListener("click", async () => {
+    stopDetection();
+    video.pause();
+    video.removeAttribute("src");
+    video.load();
+    video.hidden = true;
+    if (videoUrl) URL.revokeObjectURL(videoUrl);
+    videoUrl = null;
+    qs("#videoInput").value = "";
+    qs("#sourceLabel").textContent = "未选择视频";
+    qs("#videoMeta").textContent = "支持 MP4、WebM 等浏览器可播放格式";
+    qs("#emptyState").hidden = false;
+    qs("#runDetectionButton").disabled = true;
+    await resetSession();
+    clearDetectionResults();
+  });
+}
--- a/frontend/views/robotCards.js
+++ b/frontend/views/robotCards.js
@@ -0,0 +1,39 @@
+import { qs, escapeHtml, formatDate } from "../modules/dom.js";
+
+export function robotCardTemplate(robot) {
+  const id = escapeHtml(robot.id);
+  const platformClass = robot.id === "wechat" ? "wechat" : "feishu";
+  const platformMark = robot.id === "wechat" ? "微" : "飞";
+  const statusLabel = robot.configured ? "已配置" : "未配置";
+  const lastActivity = robot.last_test_at || robot.last_delivery_at;
+  const activityText = lastActivity ? formatDate(lastActivity) : "尚无发送记录";
+  const statusText = robot.last_status === "success" ? "最近发送成功" : robot.last_status === "failed" ? "最近发送失败" : "等待首次发送";
+  const credential = robot.id === "wechat" ? "WECHAT_WEBHOOK_URL" : "FEISHU_WEBHOOK_URL";
+  const capabilities = (robot.capabilities || [])
+    .map((capability) => `<span>${escapeHtml(capability)}</span>`)
+    .join("");
+  return `<article class="panel message-robot-card ${robot.configured ? "is-configured" : ""}" data-robot-id="${id}">
+    <div class="message-robot-head"><div class="platform-logo ${platformClass}">${platformMark}</div><div><span class="robot-id">${escapeHtml(robot.id.toUpperCase())} ROBOT</span><h3>${escapeHtml(robot.name)}群机器人</h3><p>${robot.id === "wechat" ? "群聊 Markdown 与告警截图" : "群聊交互卡片与签名校验"}</p></div><span class="robot-status ${robot.configured ? "active" : "offline"}"><i></i>${statusLabel}</span></div>
+    <div class="capability-list">${capabilities}</div>
+    <div class="delivery-metrics"><div><span>成功投递</span><strong>${robot.delivered}</strong></div><div><span>失败</span><strong class="${robot.failed ? "danger" : ""}">${robot.failed}</strong></div><div><span>连接测试</span><strong>${robot.tests}</strong></div></div>
+    <div class="robot-activity"><span>${statusText}</span><strong>${activityText}</strong></div>
+    <div class="credential-key"><span>服务端配置</span><code>${credential}${robot.id === "feishu" ? " / FEISHU_SECRET" : ""}</code></div>
+    ${robot.last_error ? `<p class="delivery-error">${escapeHtml(robot.last_error)}</p>` : ""}
+    <button class="primary-button test-robot-button" type="button" data-test-robot="${id}" ${robot.configured ? "" : "disabled"}>${robot.configured ? "发送测试消息" : "配置后可测试"}</button>
+  </article>`;
+}
+
+export function renderRobots(payload = { robots: [], summary: {} }, policy = {}) {
+  const robots = payload.robots || [];
+  const summary = payload.summary || {};
+  qs("#robotTotalCount").textContent = String(summary.total || robots.length);
+  qs("#robotConfiguredCount").textContent = String(summary.configured || 0);
+  qs("#robotDeliveredCount").textContent = String(summary.delivered || 0);
+  qs("#robotFailedCount").textContent = String(summary.failed || 0);
+  qs("#robotNavCount").textContent = String(summary.configured || 0);
+  qs("#robotPolicyConfirm").textContent = `${policy.confirm_frames || 3} 帧连续命中后发送`;
+  qs("#robotPolicyCooldown").textContent = `${policy.cooldown_seconds || 60} 秒内同类不重复发送`;
+  qs("#robotCardGrid").innerHTML = robots.length
+    ? robots.map(robotCardTemplate).join("")
+    : '<article class="panel robot-empty">暂无机器人通道数据</article>';
+}
--- a/frontend/views/robots.js
+++ b/frontend/views/robots.js
@@ -0,0 +1,41 @@
+import { qs } from "../modules/dom.js";
+import { apiFetch } from "../modules/api.js";
+import { showToast, setServiceStatus } from "../modules/ui.js";
+import { renderRobots } from "./robotCards.js";
+import { store } from "../modules/store.js";
+import { loadDashboard } from "./dashboard.js";
+
+export async function loadRobots() {
+  try {
+    const result = await apiFetch("/api/robots");
+    renderRobots(result, store.dashboardData?.detection);
+    setServiceStatus(true);
+  } catch (error) {
+    setServiceStatus(false);
+    showToast(`无法读取机器人状态：${error.message}`, "error");
+  }
+}
+
+export async function testRobot(channel, button) {
+  const originalText = button.textContent;
+  button.disabled = true;
+  button.textContent = "正在发送";
+  try {
+    const result = await apiFetch(`/api/robots/${encodeURIComponent(channel)}/test`, { method: "POST" });
+    showToast(`${result.robot.name}测试消息发送成功`, "success");
+    await Promise.all([loadRobots(), loadDashboard()]);
+  } catch (error) {
+    showToast(`测试消息发送失败：${error.message}`, "error");
+  } finally {
+    button.disabled = false;
+    button.textContent = originalText;
+  }
+}
+
+export function initRobots() {
+  qs("#refreshRobotsButton").addEventListener("click", loadRobots);
+  qs("#robotCardGrid").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-test-robot]");
+    if (button) testRobot(button.dataset.testRobot, button);
+  });
+}