@yixinshuke/node-dashboard 0.0.0-stage → 0.1.1

package/src/assets/js/common.js

@@ -0,0 +1,594 @@
+// ===== node-dashboard 大屏 · 公共层（common.js）=====
+// 全局状态 / 工具函数 / 图表与折线机件 / 聚合计算 / 刷新编排 / tab 切换。
+// 本文件须最先加载；agg.js / instances.js / push.js 在其后加载，
+// 最后由 index.html 末尾的内联启动脚本调用 load() 与 startTimer()。
+
+const params = new URLSearchParams(location.search);
+let ENV = params.get("env") || "all";
+let TAB = "agg";
+let W = Math.min(1440, Math.max(1, Number(params.get("w")) || 10)); // 折线时间窗口（分钟）
+let timer = null;
+const REFRESH = 5;
+
+const $ = (id) => document.getElementById(id);
+const fmtBytes = (n) => {
+  if (!n && n !== 0) return "—";
+  const u = ["B", "KB", "MB", "GB", "TB"];
+  let i = 0; let v = n;
+  while (v >= 1024 && i < u.length - 1) { v /= 1024; i++; }
+  return `${v.toFixed(1)} ${u[i]}`;
+};
+const fmtUptime = (ms) => {
+  const s = Math.floor(ms / 1000);
+  const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+  return `${d > 0 ? d + "天" : ""}${h}时${m}分${sec}秒`;
+};
+const pctColor = (p) => (p >= 85 ? "#f87272" : p >= 60 ? "#fbbd23" : "#36d399");
+const stateColor = (s) => ({ ok: "var(--ok)", degraded: "var(--warn)", down: "var(--down)", unknown: "var(--unknown)", skipped: "var(--unknown)" }[s] || "var(--unknown)");
+
+function bar(label, pct) {
+  const p = Number(pct) || 0;
+  return `<div class="bar"><div class="lab"><span>${label}</span><span>${p.toFixed(1)}%</span></div>
+    <div class="track"><div class="fill" style="width:${Math.min(100, p)}%;background:${pctColor(p)}"></div></div></div>`;
+}
+
+function ring(pct, color) {
+  const p = Math.max(0, Math.min(100, Number(pct) || 0));
+  const r = 42, c = 2 * Math.PI * r;
+  const off = c * (1 - p / 100);
+  return `<svg viewBox="0 0 100 100" class="ring">
+    <circle class="track" cx="50" cy="50" r="${r}"></circle>
+    <circle class="prog" cx="50" cy="50" r="${r}" stroke="${color}" stroke-dasharray="${c.toFixed(2)}" stroke-dashoffset="${off.toFixed(2)}"></circle>
+    <text x="50" y="50" class="ring-pct">${p.toFixed(0)}%</text>
+  </svg>`;
+}
+
+function sparkline(arr, color) {
+  if (!Array.isArray(arr) || arr.length === 0) return "";
+  const max = Math.max(1, ...arr);
+  const w = 100, h = 36, n = arr.length;
+  const pts = arr.map((v, i) => `${(i / (n - 1 || 1)) * w},${h - (v / max) * (h - 4) - 2}`).join(" ");
+  return `<svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">
+    <polyline points="${pts}" fill="none" stroke="${color}" stroke-width="2" />
+  </svg>`;
+}
+
+const SPARK_COLORS = { apirouter: "#5b9dff", shardorm: "#36d399", http: "#fbbd23", push: "#f0883e" };
+const fmtHM = (t) => {
+  const d = new Date(t);
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+};
+/** ECharts 折线：x 轴时间标签、y 轴数值、悬停显示节点数据；echarts 不可用时降级为无轴 SVG */
+function renderSpark(el, recent, color) {
+  if (!el) return;
+  if (!window.echarts) {
+    el.innerHTML = sparkline(recent.map((b) => b.count), color);
+    return;
+  }
+  const chart = echarts.getInstanceByDom(el) || echarts.init(el);
+  chart.setOption({
+    animation: false,
+    grid: { left: 34, right: 8, top: 10, bottom: 20 },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#1a2030",
+      borderColor: "#2c3550",
+      textStyle: { color: "#e6ebf5", fontSize: 12 },
+      formatter: (ps) => {
+        const p = ps[0];
+        return `${p.axisValue}<br/>${p.marker}QPM ${p.data}`;
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: recent.map((b) => fmtHM(b.t)),
+      axisLabel: { color: "#8b97b3", fontSize: 10, interval: "auto" },
+      axisLine: { lineStyle: { color: "#2c3550" } },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: "value",
+      minInterval: 1,
+      axisLabel: { color: "#8b97b3", fontSize: 10 },
+      splitLine: { lineStyle: { color: "#2c3550", opacity: 0.5 } },
+    },
+    series: [{
+      type: "line",
+      data: recent.map((b) => b.count),
+      smooth: true,
+      symbol: "circle",
+      symbolSize: 5,
+      lineStyle: { color, width: 2 },
+      itemStyle: { color },
+      areaStyle: { color, opacity: 0.12 },
+    }],
+  }, true);
+}
+/** 挂载一个容器内的所有 .spark-chart（按 data-idx / data-kind 取数据） */
+function mountSparks(root, resolve) {
+  root.querySelectorAll(".spark-chart").forEach((el) => {
+    const { pts, color } = resolve(el.dataset);
+    renderSpark(el, pts, color);
+  });
+}
+/** 由实例状态块得到归一化折线数据（含当前进行中分钟点） */
+function sparkPoints(blk) {
+  const nowMin = Math.floor(Date.now() / 60000) * 60000;
+  return mergeRecent([normalizeRecent(blk || {}, nowMin)], nowMin);
+}
+
+function qpmCell(lab, val) {
+  return `<div class="cell"><span class="lab">${lab}</span><span class="val">${val}</span></div>`;
+}
+function qpmSection(head, cells, extra = "") {
+  return `<div class="router">
+    <div class="router-head">${head} <span class="tag">QPM</span></div>
+    <div class="router-grid">${cells}</div>${extra}
+  </div>`;
+}
+const CHANNEL_TYPE_LABELS = { 1: "Webhook", 2: "邮件", 3: "MQTT", 4: "钉钉", 5: "企业微信", 6: "飞书", 7: "PushDeer", 8: "控制台兜底" };
+function channelTypeLabel(t) { return CHANNEL_TYPE_LABELS[t] || ("类型" + t); }
+
+/** 归一各源的逐分钟序列（{t:分钟起始ms,count}）。apirouter 的 qpmRecent 只含「已完成分钟」，
+ *  进行中分钟的计数在 qpmCurrent 里：序列缺当前分钟点时补上（已有则不补，防 http/shardorm 双计）。 */
+function normalizeRecent(blk, nowMin) {
+  let arr = blk.recent || (blk.qpmRecent || []).map((b) => ({ t: b.t ?? b.minuteStartMs, count: b.count }));
+  if (!arr.some((b) => b.t === nowMin) && blk.qpmCurrent) {
+    arr = arr.concat({ t: nowMin, count: blk.qpmCurrent });
+  }
+  return arr;
+}
+/** 跨实例合并逐分钟序列，补齐最近 W 分钟、时间升序（最后一格 = 进行中的当前分钟） */
+function mergeRecent(lists, nowMin) {
+  const map = new Map();
+  for (const l of lists) {
+    for (const b of (l || [])) map.set(b.t, (map.get(b.t) || 0) + (b.count || 0));
+  }
+  const out = [];
+  for (let i = W - 1; i >= 0; i--) {
+    const t = nowMin - i * 60000;
+    out.push({ t, count: map.get(t) || 0 });
+  }
+  return out;
+}
+function computeAgg(instances, results) {
+  const byService = {
+    apirouter: { qpm: 0, ok: 0, fail: 0, avgW: 0, avgSum: 0 },
+    shardorm: { qpm: 0, ok: 0, fail: 0, avgW: 0, avgSum: 0 },
+    http: { qpm: 0, ok: 0, fail: 0, avgW: 0, avgSum: 0 },
+    push: { qpm: 0, totalTasks: 0, successTasks: 0, failedTasks: 0 },
+  };
+  const recents = { apirouter: [], shardorm: [], http: [], push: [] };
+  const nowMin = Math.floor(Date.now() / 60000) * 60000;
+  for (const r of results) {
+    const d = r.data;
+    if (!d) continue;
+    const add = (blk, key) => {
+      if (!blk) return;
+      byService[key].qpm += blk.qpmCurrent ?? 0;
+      byService[key].ok += blk.ok ?? 0;
+      byService[key].fail += blk.fail ?? 0;
+      // 平均耗时跨实例按请求数加权（各源的 avgMs 均为与其 ok/fail 同窗口的平均）
+      const w = (blk.ok ?? 0) + (blk.fail ?? 0);
+      byService[key].avgW += w;
+      byService[key].avgSum += (blk.avgMs ?? 0) * w;
+      recents[key].push(normalizeRecent(blk, nowMin));
+    };
+    add(d.router, "apirouter");
+    add(d.shardorm, "shardorm");
+    add(d.http, "http");
+    // node-push 聚合：QPM 当前值求和 + 折线合并；overview 的累计推送/成功失败跨实例累加
+    const pq = d.push?.qpm;
+    if (pq) {
+      byService.push.qpm += pq.qpmCurrent ?? 0;
+      recents.push.push(normalizeRecent(pq, nowMin));
+    }
+    const ov = d.push?.push;
+    if (ov) {
+      byService.push.totalTasks += ov.totalTasks ?? 0;
+      byService.push.successTasks += ov.successTasks ?? 0;
+      byService.push.failedTasks += ov.failedTasks ?? 0;
+    }
+  }
+  for (const k of Object.keys(byService)) {
+    byService[k].recent = mergeRecent(recents[k], nowMin);
+    byService[k].avg = byService[k].avgW ? Math.round(byService[k].avgSum / byService[k].avgW) : 0;
+  }
+  return { env: ENV, serverCount: instances.length, byService };
+}
+
+let selfStatus = null; // 自身状态（pid/hostname/env 进程生命周期内不变，只取一次，避免每次刷新重复请求）
+let loadBusy = false;
+async function load() {
+  if (loadBusy) return; // 防重入：自动刷新与手动刷新不叠加
+  loadBusy = true;
+  try {
+    await loadInner();
+  } finally {
+    loadBusy = false;
+  }
+}
+async function loadInner() {
+  $("updated").textContent = "更新于 " + new Date().toLocaleTimeString();
+  // 自身标识：用 pid+hostname 唯一确定一个进程，用于在大屏中凸显「本机」卡片（仅首次请求）
+  if (!selfStatus) {
+    try {
+      selfStatus = await fetch("/_sys/status").then((r) => r.json());
+    } catch { selfStatus = null; }
+  }
+  const self = selfStatus ? { pid: selfStatus.service?.pid, hostname: selfStatus.host?.hostname } : null;
+  let instances = [];
+  try {
+    const r = await fetch(`/_sys/instances?env=${ENV}`);
+    instances = await r.json();
+  } catch (e) { instances = []; }
+  if (!Array.isArray(instances) || instances.length === 0) {
+    // 无 Redis 注册时回退：展示本实例（复用 selfStatus，不再重复请求）
+    instances = selfStatus
+      ? [{ ip: location.hostname, port: Number(location.port) || 3000, host: selfStatus.host?.hostname, env: selfStatus.service?.env, instanceId: "local", _self: true }]
+      : [];
+  }
+  // 暴露实例列表：供「推送测试」弹窗做服务器选择（分服务器测试）
+  window.__pushInstances = instances;
+  // 浏览器直拉各实例 /_sys/status（CORS）：一份数据同时供「分服务器」卡片与「聚合总览」使用
+  const results = await Promise.all(instances.map(async (inst) => {
+    const base = inst._self ? "" : `http://${inst.ip}:${inst.port}`;
+    const url = base + (inst.statusPath || "/_sys/status");
+    try {
+      const data = await fetch(`${url}?w=${W}`).then((r) => r.json());
+      return { inst, data, err: null };
+    } catch (e) {
+      return { inst, data: null, err: String(e && e.message ? e.message : e) };
+    }
+  }));
+  const cards = results.map((r, i) => {
+    const isSelf = !!(r.data && self && r.data?.service?.pid === self.pid && r.data?.host?.hostname === self.hostname);
+    return renderCard(r.inst, r.data, r.err, isSelf, i);
+  });
+  const grid = $("grid");
+  grid.innerHTML = cards.join("");
+  // 仅当 node-push 已加载（任一实例 push.loaded）时，显示「推送测试」按钮
+  const pushReady = results.some((r) => r.data?.push?.loaded);
+  const ptBtn = document.getElementById("pushTestBtn");
+  if (ptBtn) ptBtn.classList.toggle("hidden", !pushReady);
+  mountSparks(grid, (ds) => {
+    if (ds.kind === "push") {
+      // 推送折线数据在 data.push.qpm.qpmRecent，不在 data.push 顶层
+      const pq = results[Number(ds.idx)]?.data?.push?.qpm;
+      return { pts: pq ? sparkPoints(pq) : [], color: SPARK_COLORS.push || "#f0883e" };
+    }
+    const r = results[Number(ds.idx)] || {};
+    return { pts: sparkPoints(r.data ? r.data[ds.kind] : null), color: SPARK_COLORS[ds.kind] || "#5b9dff" };
+  });
+  // 分服务器：每台卡片的 apirouter 3 通道 ×(次数/时间)= 6 卡片（按单实例）
+  await Promise.all(results.map(async (r, i) => {
+    for (const ns of API_CHANNELS) {
+      const cv = await buildChannelView([r], ns);
+      fillChannelStats("i" + i, ns, cv.stats);
+      renderQpmChart($("qpm-i" + i + "-" + ns), cv.qpm);
+      renderLatChart($("lat-i" + i + "-" + ns), cv.lat);
+    }
+    // 分库分表 shardorm：SQL 次数 + SQL 耗时 2 卡（按单实例）
+    const sd = await buildShardormView([r]);
+    fillChannelStats("i" + i, "shardorm", sd.stats);
+    renderQpmChart($("qpm-i" + i + "-shardorm"), sd.qpm);
+    renderLatChart($("lat-i" + i + "-shardorm"), sd.lat);
+    // 出口 HTTP：HTTP 次数 + HTTP 耗时 2 卡（按单实例）
+    const hv = await buildHttpView([r]);
+    fillChannelStats("i" + i, "http", hv.stats);
+    renderQpmChart($("qpm-i" + i + "-http"), hv.qpm);
+    renderLatChart($("lat-i" + i + "-http"), hv.lat);
+  }));
+  const ok = results.filter((r) => !r.err).length;
+  $("kpiOk").textContent = ok;
+  const badEl = $("kpiBad");
+  badEl.textContent = instances.length - ok;
+  badEl.style.color = instances.length - ok > 0 ? "var(--down)" : "var(--ok)";
+  const agg = computeAgg(instances, results);
+  renderKpi(agg);
+  renderAgg(agg);
+  // 分库分表 shardorm：SQL 次数 + SQL 耗时 2 卡（聚合跨实例合并）
+  const sdAgg = await buildShardormView(results);
+  fillChannelStats("agg", "shardorm", sdAgg.stats);
+  renderQpmChart($("qpm-agg-shardorm"), sdAgg.qpm);
+  renderLatChart($("lat-agg-shardorm"), sdAgg.lat);
+  // 出口 HTTP：HTTP 次数 + HTTP 耗时 2 卡（聚合跨实例合并）
+  const hvAgg = await buildHttpView(results);
+  fillChannelStats("agg", "http", hvAgg.stats);
+  renderQpmChart($("qpm-agg-http"), hvAgg.qpm);
+  renderLatChart($("lat-agg-http"), hvAgg.lat);
+  // apirouter 3 通道 ×(次数/时间)= 6 卡片：聚合总览（跨实例合并）
+  const apiCh = await buildAllChannels(results);
+  for (const ns of API_CHANNELS) {
+    fillChannelStats("agg", ns, apiCh[ns].stats);
+    renderQpmChart($("qpm-agg-" + ns), apiCh[ns].qpm);
+    renderLatChart($("lat-agg-" + ns), apiCh[ns].lat);
+  }
+}
+
+function startTimer() {
+  clearInterval(timer);
+  if ($("auto").checked) timer = setInterval(load, REFRESH * 1000);
+}
+
+$("filters").addEventListener("click", (e) => {
+  const b = e.target.closest("button");
+  if (!b) return;
+  ENV = b.dataset.env;
+  [...$("filters").children].forEach((x) => x.classList.toggle("active", x === b));
+  const u = new URL(location); u.searchParams.set("env", ENV); history.replaceState(null, "", u);
+  load();
+});
+// 折线时间窗口切换（10分钟 / 1小时 / 24小时）
+$("winCtl").addEventListener("click", (e) => {
+  const b = e.target.closest("button");
+  if (!b) return;
+  W = Number(b.dataset.w) || 10;
+  [...$("winCtl").children].forEach((x) => x.classList.toggle("active", x === b));
+  const u = new URL(location); u.searchParams.set("w", String(W)); history.replaceState(null, "", u);
+  load();
+});
+$("auto").addEventListener("change", startTimer);
+// 手动刷新：按钮进入 loading 态（旋转 + 禁用 + 文案变化），并保证效果至少停留 500ms
+let refreshing = false;
+async function refreshWithFx() {
+  const btn = $("refreshNow");
+  if (refreshing) return;
+  refreshing = true;
+  const label = btn.textContent;
+  btn.textContent = "刷新中…";
+  btn.disabled = true;
+  btn.classList.add("loading");
+  try {
+    await Promise.all([load(), new Promise((r) => setTimeout(r, 500))]);
+  } finally {
+    btn.textContent = label;
+    btn.disabled = false;
+    btn.classList.remove("loading");
+    refreshing = false;
+  }
+}
+$("refreshNow").addEventListener("click", refreshWithFx);
+function resizeSparks(root) {
+  if (!window.echarts) return;
+  root.querySelectorAll(".spark-chart, .api-chart").forEach((el) => {
+    const c = echarts.getInstanceByDom(el);
+    if (c) c.resize();
+  });
+}
+function applyTab() {
+  [...$("tabs").children].forEach((x) => x.classList.toggle("active", x.dataset.tab === TAB));
+  $("aggView").classList.toggle("hidden", TAB !== "agg");
+  $("grid").classList.toggle("hidden", TAB !== "instances");
+  // 容器从 display:none 变可见后，隐藏期间 init 的 ECharts 按 0 宽渲染，需 resize 重算
+  const root = TAB === "agg" ? $("aggView") : $("grid");
+  requestAnimationFrame(() => resizeSparks(root));
+}
+// 浏览器窗口缩放时所有图表重算尺寸
+window.addEventListener("resize", () => resizeSparks(document.body));
+$("tabs").addEventListener("click", (e) => {
+  const b = e.target.closest("button");
+  if (!b) return;
+  TAB = b.dataset.tab;
+  applyTab();
+});
+applyTab();
+
+// 顶部服务名（取自本实例状态）
+fetch("/_sys/status").then((r) => r.json()).then((d) => {
+  $("serviceName").textContent = `${d.service?.name || "service"} v${d.service?.version || "?"} · ${d.service?.env || "?"}`;
+}).catch(() => {});
+
+// ===== apirouter 通道（api/open/callback）次数/时间 卡片 =====
+// 次数卡：QPM（次数 + 错误次数），数据来自各实例 /_sys/status 的 channels[ns].qpmRecent（已随 results 加载，无需额外请求）
+// 时间卡：耗时（平均/最大/P90/P99），数据来自各实例 /_sys/qos/channel?svc=apirouter-<ns>（含直方图，跨实例合并）
+const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+/** 直方图桶上界(ms)，须与 node-dashboard/qpm-hist DEFAULT_LAT_BOUNDS 一致（接口 bounds 字段为权威值） */
+const BDEF = [1, 2, 3, 5, 8, 12, 20, 30, 50, 80, 120, 200, 300, 500, 1000, 2000, 5000, 10000];
+function zeros(n) { return new Array(n).fill(0); }
+/** 由直方图估算百分位：hist 桶计数数组，bounds 桶上界，maxMs 用于最后一桶兜底 */
+function histPct(hist, bounds, p, maxMs) {
+  if (!hist || !hist.length) return 0;
+  let total = 0; for (const x of hist) total += x;
+  if (!total) return 0;
+  const target = p * total;
+  let cum = 0;
+  for (let i = 0; i < hist.length; i++) {
+    cum += hist[i];
+    if (cum >= target) {
+      const lower = i === 0 ? 0 : bounds[i - 1];
+      const upper = i >= bounds.length ? (maxMs ?? bounds[bounds.length - 1]) : bounds[i];
+      const prev = cum - hist[i];
+      const frac = hist[i] ? (target - prev) / hist[i] : 0;
+      let v = lower + (upper - lower) * frac;
+      if (!isFinite(v)) v = maxMs ?? bounds[bounds.length - 1];
+      return Math.round(v);
+    }
+  }
+  return Math.round(maxMs ?? bounds[bounds.length - 1]);
+}
+function fillLat(map, nowMin, B) {
+  const out = [];
+  for (let i = W - 1; i >= 0; i--) {
+    const t = nowMin - i * 60000;
+    const e = map.get(t);
+    if (!e) { out.push({ t, avgMs: 0, maxMs: 0, minMs: 0, p90: 0, p99: 0 }); continue; }
+    const avgMs = e.c ? Math.round(e.ls / e.c) : 0;
+    out.push({ t, avgMs, maxMs: e.lmx, minMs: e.lmn, p90: histPct(e.hist, B, 0.90, e.lmx), p99: histPct(e.hist, B, 0.99, e.lmx) });
+  }
+  return out;
+}
+function renderLine(el, xData, seriesList) {
+  if (!el || !window.echarts) return;
+  const chart = echarts.getInstanceByDom(el) || echarts.init(el);
+  chart.setOption({
+    animation: false,
+    grid: { left: 50, right: 14, top: 28, bottom: 22 },
+    legend: { textStyle: { color: "#8b97b3", fontSize: 11 }, top: 0, itemWidth: 14, itemGap: 8 },
+    tooltip: { trigger: "axis", backgroundColor: "#1a2030", borderColor: "#2c3550", textStyle: { color: "#e6ebf5", fontSize: 12 } },
+    xAxis: { type: "category", data: xData, axisLabel: { color: "#8b97b3", fontSize: 10, formatter: (v) => v.slice(0, 5) }, axisLine: { lineStyle: { color: "#2c3550" } }, axisTick: { show: false } },
+    yAxis: { type: "value", axisLabel: { color: "#8b97b3", fontSize: 10 }, splitLine: { lineStyle: { color: "#2c3550", opacity: 0.5 } } },
+    series: seriesList.map((s) => ({ name: s.name, type: "line", data: s.data, smooth: true, symbol: "none", lineStyle: { color: s.color, width: 2 }, itemStyle: { color: s.color }, areaStyle: s.area ? { color: s.color, opacity: 0.12 } : undefined })),
+  }, true);
+}
+// ===== apirouter 通道（api/open/callback）次数/时间 卡片 =====
+const API_CHANNELS = ["api", "open", "callback"];
+const NS_LABEL = { api: "API (/api)", open: "开放接口 (/open)", callback: "回调 (/callback)" };
+
+function fillRecentCount(map, nowMin) {
+  const out = [];
+  for (let i = W - 1; i >= 0; i--) { const t = nowMin - i * 60000; const e = map.get(t) || { count: 0, fail: 0 }; out.push({ t, count: e.count, fail: e.fail }); }
+  return out;
+}
+
+// 一对「次数 + 耗时」卡片（上=统计数字，下=折线图；图表容器用 .api-chart，避免被 mountSparks 误挂载；
+// 数字单元格 id=st-<scope>-<key>-<k>，由 fillChannelStats 填充）
+function channelPairHtml(scope, key, label, qpmTag = "次数 QPM", latTag = "耗时 ms") {
+  const cell = (k, text) => `<div class="cell"><span class="lab">${text}</span><span class="val" id="st-${scope}-${key}-${k}">—</span></div>`;
+  return `<div class="router">
+      <div class="router-head"><span class="dot ok"></span>${label} <span class="tag">${qpmTag}</span></div>
+      <div class="router-grid">
+        ${cell("total", "总请求 (24h)")}
+        ${cell("ok", "成功")}
+        ${cell("fail", "失败")}
+        ${cell("rate", "成功率")}
+      </div>
+      <div class="api-chart" id="qpm-${scope}-${key}"></div>
+    </div>
+    <div class="router">
+      <div class="router-head"><span class="dot ok"></span>${label} <span class="tag">${latTag}</span></div>
+      <div class="router-grid">
+        ${cell("avgMs", "平均耗时")}
+        ${cell("maxMs", "最大耗时")}
+        ${cell("minMs", "最小耗时")}
+      </div>
+      <div class="api-chart" id="lat-${scope}-${key}"></div>
+    </div>`;
+}
+
+// apirouter 3 通道 ×(次数/时间)= 6 张卡片
+function apiChannelCardsHtml(scope) {
+  let h = "";
+  for (const ns of API_CHANNELS) h += channelPairHtml(scope, ns, NS_LABEL[ns] || ns);
+  return h;
+}
+
+// 把通道累计统计填进卡片数字区（聚合/单台共通）
+function fillChannelStats(scope, ns, st) {
+  const set = (k, v) => { const el = $(`st-${scope}-${ns}-${k}`); if (el) el.textContent = v; };
+  if (!st) return;
+  set("total", (st.total ?? 0).toLocaleString());
+  set("ok", (st.ok ?? 0).toLocaleString());
+  set("fail", (st.fail ?? 0).toLocaleString());
+  set("rate", st.total ? ((st.ok / st.total) * 100).toFixed(1) + "%" : "—");
+  set("avgMs", (st.avgMs ?? 0) + "ms");
+  set("maxMs", (st.maxMs ?? 0) + "ms");
+  set("minMs", (st.minMs ?? 0) + "ms");
+}
+
+// qos/channel 404 退避缓存：ip:port:svc -> 允许重试的时间戳（端点对无历史数据的 svc 返回 404，退避避免自动刷新时 404 刷屏）
+const qosNoData = new Map();
+
+// 构建某通道(ns)在 results（多实例=聚合，单实例=分服务器）下的 统计 + QPM + 耗时。
+// 次数/耗时同源：各实例 /_sys/qos/channel?svc=<svc>（24h 累计 + 逐分钟 count/fail + 直方图）。
+// opts.svc：默认 apirouter-<ns>（shardorm 传 "shardorm"）；opts.fallback(r)：qos 无数据时回退到该实例
+// status 的 QpmSnapshot 块（如 shardorm 的 data.shardorm：累计统计 + qpmRecent 逐分钟次数）。
+async function buildChannelView(results, ns, opts = {}) {
+  const nowMin = Math.floor(Date.now() / 60000) * 60000;
+  const svc = opts.svc ?? ("apirouter-" + ns);
+  const qmap = new Map();
+  const lmap = new Map();
+  const stats = { total: 0, ok: 0, fail: 0, ls: 0, maxMs: 0, minMs: 0 };
+  let B = BDEF;
+  await Promise.all(results.map(async (r) => {
+    const inst = r.inst; const base = inst._self ? "" : `http://${inst.ip}:${inst.port}`;
+    let got = false;
+    // 404 退避：端点对无历史数据的 svc 返回 404；记住后 2 分钟内不再请求，避免自动刷新时 404 刷屏
+    const qkey = `${inst.ip}:${inst.port}:${svc}`;
+    const skipQos = Date.now() < (qosNoData.get(qkey) || 0);
+    try {
+      const d = skipQos ? null : await fetch(`${base}/_sys/qos/channel?svc=${encodeURIComponent(svc)}`).then((x) => {
+        if (x.status === 404) { qosNoData.set(qkey, Date.now() + 120000); return null; }
+        return x.ok ? x.json() : null;
+      });
+      if (d && d.perMinute) {
+        got = true;
+        // 累计统计跨实例合并（avgMs 按请求数加权）
+        stats.total += d.total ?? 0; stats.ok += d.ok ?? 0; stats.fail += d.fail ?? 0;
+        stats.ls += (d.avgMs ?? 0) * (d.total ?? 0);
+        if ((d.maxMs ?? 0) > stats.maxMs) stats.maxMs = d.maxMs ?? 0;
+        if (d.minMs && (!stats.minMs || d.minMs < stats.minMs)) stats.minMs = d.minMs;
+        if (d.bounds && d.bounds.length) B = d.bounds;
+        const cb = (d.bounds && d.bounds.length ? d.bounds.length : BDEF.length) + 1;
+        for (const b of d.perMinute) {
+          // 逐分钟 次数/错误次数（次数卡折线）
+          const q = qmap.get(b.t) || { count: 0, fail: 0 };
+          q.count += b.count; q.fail += b.fail || 0; qmap.set(b.t, q);
+          // 逐分钟耗时（耗时卡折线）
+          const e = lmap.get(b.t) || { c: 0, ls: 0, lmx: 0, lmn: 0, hist: zeros(cb) };
+          e.c += b.count; e.ls += (b.avgMs || 0) * b.count;
+          if ((b.maxMs || 0) > e.lmx) e.lmx = b.maxMs || 0;
+          if (b.minMs && (!e.lmn || b.minMs < e.lmn)) e.lmn = b.minMs;
+          if (b.hist) for (let k = 0; k < cb && k < b.hist.length; k++) e.hist[k] += b.hist[k];
+          lmap.set(b.t, e);
+        }
+      }
+    } catch { /* ignore */ }
+    // qos/channel 无数据时回退到 status 快照（shardorm：RedisMetricsBackend 的累计 + qpmRecent）
+    if (!got && opts.fallback) {
+      const blk = opts.fallback(r);
+      if (blk) {
+        const total = blk.total ?? ((blk.ok ?? 0) + (blk.fail ?? 0));
+        stats.total += total; stats.ok += blk.ok ?? 0; stats.fail += blk.fail ?? 0;
+        stats.ls += (blk.avgMs ?? 0) * total;
+        if ((blk.maxMs ?? 0) > stats.maxMs) stats.maxMs = blk.maxMs ?? 0;
+        if (blk.minMs && (!stats.minMs || blk.minMs < stats.minMs)) stats.minMs = blk.minMs;
+        for (const b of (blk.qpmRecent || [])) {
+          const t = b.t ?? b.minuteStartMs;
+          const q = qmap.get(t) || { count: 0, fail: 0 };
+          q.count += b.count || 0; qmap.set(t, q);
+        }
+      }
+    }
+  }));
+  const qpm = fillRecentCount(qmap, nowMin);
+  const lat = fillLat(lmap, nowMin, B);
+  stats.avgMs = stats.total ? Math.round(stats.ls / stats.total) : 0;
+  return { stats, qpm, lat };
+}
+
+async function buildAllChannels(results) {
+  const out = {};
+  await Promise.all(API_CHANNELS.map(async (ns) => { out[ns] = await buildChannelView(results, ns); }));
+  return out;
+}
+
+// shardorm（SQL）视图：优先 /_sys/qos/channel?svc=shardorm，无则回退 status 的 data.shardorm 快照
+async function buildShardormView(results) {
+  return buildChannelView(results, "shardorm", { svc: "shardorm", fallback: (r) => r.data?.shardorm });
+}
+
+// 出口 HTTP 视图：优先 /_sys/qos/channel?svc=http（含逐分钟耗时），无则回退 status 的 data.http 快照
+async function buildHttpView(results) {
+  return buildChannelView(results, "http", { svc: "http", fallback: (r) => r.data?.http });
+}
+
+// 次数卡：次数 + 错误次数；时间卡：平均/最大/P90/P99
+function renderQpmChart(el, pts) {
+  if (!el) return;
+  const xs = pts.map((p) => fmtHM(p.t));
+  renderLine(el, xs, [
+    { name: "次数", data: pts.map((p) => p.count), color: "#5b9dff", area: true },
+    { name: "错误次数", data: pts.map((p) => p.fail), color: "#f87272" },
+  ]);
+}
+function renderLatChart(el, pts) {
+  if (!el) return;
+  const xs = pts.map((p) => fmtHM(p.t));
+  renderLine(el, xs, [
+    { name: "平均", data: pts.map((p) => p.avgMs), color: "#5b9dff" },
+    { name: "最大", data: pts.map((p) => p.maxMs), color: "#f87272" },
+    { name: "P90", data: pts.map((p) => p.p90), color: "#fbbd23" },
+    { name: "P99", data: pts.map((p) => p.p99), color: "#a78bfa" },
+  ]);
+}