feat(web): report page views via sendBeacon and show stats on system page

reaction_board/web/static/api.js

@@ -57,3 +57,27 @@ export async function session() {
   const payload = await response.json();
   return payload?.data ?? payload;
 }
+
+export async function stats(params) {
+  return api("/api/stats", params);
+}
+
+export function visit(path) {
+  // 访问统计埋点：优先 sendBeacon（不阻塞导航），失败时用 keepalive fetch 兜底。
+  const body = JSON.stringify({ path });
+  try {
+    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      const blob = new Blob([body], { type: "application/json" });
+      if (navigator.sendBeacon("/api/visit", blob)) return;
+    }
+  } catch {
+    // 忽略，走 fetch 兜底
+  }
+  fetch("/api/visit", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body,
+    credentials: "same-origin",
+    keepalive: true,
+  }).catch(() => {});
+}

reaction_board/web/static/app.js

@@ -1,4 +1,4 @@
-import { session } from "./api.js";
+import { session, visit } from "./api.js";
 import { disposeAll } from "./charts.js";
 import { onRoute, parseLocation, startRouter } from "./router.js";
 import { renderCandidates } from "./views/candidates.js";
@@ -153,9 +153,15 @@ async function boot() {
     toast("无法连接看板服务", "error");
   }
   renderNav();
+  let lastVisitPath = null;
   onRoute(({ path, route }) => {
     disposeAll();
     setTitle(route, path);
+    // 访问统计：仅在路由路径变化时上报（排序/筛选等同路径重渲染不计 PV）。
+    if (path !== lastVisitPath) {
+      lastVisitPath = path;
+      visit(path);
+    }
   });
   startRouter({
     root: document.querySelector("#app"),

reaction_board/web/static/charts.js

@@ -189,3 +189,75 @@ export function emptyChart(element, message = "暂无数据") {
   if (!element) return;
   element.innerHTML = `<div class="chart-empty">${message}</div>`;
 }
+
+export function mixedChart(element, { dates, bars, line, barName = "PV", lineName = "UV" }) {
+  if (!element) return null;
+  const theme = colors();
+  const option = {
+    animationDuration: 300,
+    backgroundColor: "transparent",
+    grid: { left: 8, right: 12, top: 34, bottom: 8, containLabel: true },
+    legend: {
+      data: [barName, lineName],
+      top: 0,
+      textStyle: { color: theme.muted, fontSize: 11 },
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      backgroundColor: theme.surface,
+      borderColor: theme.grid,
+      textStyle: { color: theme.text, fontSize: 12 },
+    },
+    xAxis: {
+      type: "category",
+      data: dates,
+      axisLine: { lineStyle: { color: theme.grid } },
+      axisTick: { show: false },
+      axisLabel: {
+        color: theme.muted,
+        fontSize: 11,
+        formatter: (value) => formatDay(value),
+        hideOverlap: true,
+      },
+    },
+    yAxis: [
+      {
+        type: "value",
+        name: barName,
+        minInterval: 1,
+        splitLine: { lineStyle: { color: theme.grid, type: "dashed" } },
+        axisLabel: { color: theme.muted, fontSize: 11, formatter: (value) => formatAxis(value) },
+      },
+      {
+        type: "value",
+        name: lineName,
+        minInterval: 1,
+        splitLine: { show: false },
+        axisLabel: { color: theme.muted, fontSize: 11, formatter: (value) => formatAxis(value) },
+      },
+    ],
+    series: [
+      {
+        name: barName,
+        type: "bar",
+        data: bars,
+        barMaxWidth: 22,
+        itemStyle: { color: theme.blue, borderRadius: [4, 4, 0, 0] },
+      },
+      {
+        name: lineName,
+        type: "line",
+        yAxisIndex: 1,
+        data: line,
+        smooth: false,
+        connectNulls: false,
+        symbol: "circle",
+        symbolSize: 5,
+        lineStyle: { width: 2.2, color: theme.accent },
+        itemStyle: { color: theme.accent },
+      },
+    ],
+  };
+  return mount(element, option);
+}

reaction_board/web/static/views/system.js

@@ -1,4 +1,5 @@
-import { api } from "../api.js";
+import { api, stats } from "../api.js";
+import { emptyChart, mixedChart } from "../charts.js";
 import { emptyState, sectionHeader } from "../components.js";
 import {
   escapeHtml, formatCount, formatDateTime, formatNumber,
@@ -30,11 +31,42 @@ function taskRows(tasks) {
 }
 
 export async function renderSystem(root) {
-  const system = await api("/api/system");
+  const [system, visitStats] = await Promise.all([
+    api("/api/system"),
+    stats({ days: 30 }).catch(() => null),
+  ]);
   const health = system.snapshot_health || { total: 0, ok: 0, failed: 0 };
   const counts = system.counts || {};
   const next = system.next_runs || {};
 
+  const visitExtra = visitStats
+    ? `<span class="section-note">近 ${visitStats.days} 天 · ${visitStats.pending ? "含未落库缓冲" : "已落库"}</span>`
+    : "";
+  const visitPanel = visitStats ? `
+    <section class="panel chart-panel">
+      ${sectionHeader("访问统计", visitExtra)}
+      <div class="mini-stats">
+        <div><span>今日 PV</span><strong>${formatNumber(visitStats.today_pv)}</strong></div>
+        <div><span>今日 UV</span><strong>${formatNumber(visitStats.today_uv)}</strong></div>
+        <div><span>${visitStats.days} 天 PV</span><strong>${formatNumber(visitStats.total_pv)}</strong></div>
+        <div><span>${visitStats.days} 天 UV</span><strong>${formatNumber(visitStats.total_uv)}</strong></div>
+      </div>
+      <div class="chart" id="visit-chart"></div>
+      <p class="section-note">柱状为每日 PV，折线为每日 UV（按客户端 IP 去重）。数据来自前端埋点，先落内存、每分钟批量入库；仅统计页面访问，不含 API 与静态资源请求。</p>
+      ${(visitStats.top_pages || []).length ? `<div class="table-wrap">
+        <table class="data-table">
+          <thead><tr><th>页面</th><th>PV</th><th>UV</th></tr></thead>
+          <tbody>
+            ${visitStats.top_pages.map((page) => `<tr>
+              <td>${escapeHtml(page.path)}</td>
+              <td>${formatNumber(page.pv)}</td>
+              <td>${formatNumber(page.uv)}</td>
+            </tr>`).join("")}
+          </tbody>
+        </table>
+      </div>` : `<p class="section-note">暂无访问记录。</p>`}
+    </section>` : "";
+
   root.innerHTML = `<section class="page system-page">
     <header class="page-head">
       <div>
@@ -51,6 +83,8 @@ export async function renderSystem(root) {
       <div><span>已移出库</span><strong>${formatCount(counts.dropped)}</strong></div>
     </div>
 
+    ${visitPanel}
+
     <section class="panel">
       ${sectionHeader("最近任务")}
       ${taskRows(system.tasks)}
@@ -119,4 +153,19 @@ export async function renderSystem(root) {
       </div>` : emptyState("黑名单为空")}
     </section>
   </section>`;
+
+  const visitChart = root.querySelector("#visit-chart");
+  if (visitChart) {
+    if (visitStats && (visitStats.total_pv || visitStats.total_uv)) {
+      mixedChart(visitChart, {
+        dates: visitStats.series.dates,
+        bars: visitStats.series.pv,
+        line: visitStats.series.uv,
+        barName: "PV",
+        lineName: "UV",
+      });
+    } else {
+      emptyChart(visitChart, "暂无访问数据");
+    }
+  }
 }