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

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);
+}