站点卡片：用近 48 小时余额迷你走势图取代已用/累计进度条 (v1.3.1)

已用/累计充值是终身累计值，对监控没有行动价值。换成余额 sparkline：
陡降 = 消耗快、平线 = 闲置、跳升 = 充值，一眼可辨消耗节奏，
也是趋势弹窗的缩略预览。历史数据服务端等距抽样到约 40 个点，
控制 /api/stations 载荷

Author: lettimepassby

README.md

@@ -7,7 +7,7 @@
 
 ## 功能
 
-- **总览面板**：总剩余余额、**今日总消耗**、日均消耗（估算）、低余额 / 耗尽、查询异常统计；**总余额趋势图**（全站合计、24 小时～30 天切换、悬停查看分站明细）与**日均消耗对比图**；每站余额、今日消耗、用量进度条、状态标签、查询延迟
+- **总览面板**：总剩余余额、**今日总消耗**、日均消耗（估算）、低余额 / 耗尽、查询异常统计；**总余额趋势图**（全站合计、24 小时～30 天切换、悬停查看分站明细）与**日均消耗对比图**；每站余额、今日消耗、**近 48 小时余额迷你走势图**、状态标签、查询延迟
 - **今日消耗与站点一致**：Sub2API 站点直接读取站点用户仪表盘同款接口（`/api/v1/usage/dashboard/stats` 的 `today_actual_cost`，即今日实际扣费），与站点页面显示的数值完全一致；其他类型按余额历史推算并以 ≈ 标注
 - **用量统计页**：分站点、分模型、分时段的 Token 消耗——今天（按小时）/ 近 24 小时（滚动窗口）/
   近 7 天 / 近 30 天，含消耗趋势柱状图、分模型条形图与明细表（请求数 / 输入输出 / 总 Tokens / 实际消耗，

lib/history.js

@@ -75,6 +75,21 @@ export class History {
     return Math.round(used * 100) / 100;
   }
 
+  // 站点卡片迷你走势图用：等距抽样到 maxPoints 个点，保留最后一个点
+  sparkline(stationId, hours = 48, maxPoints = 40) {
+    const pts = this.points(stationId, hours);
+    if (pts.length <= maxPoints) return pts.map((p) => [p[0], p[1]]);
+    const step = pts.length / maxPoints;
+    const out = [];
+    for (let i = 0; i < maxPoints; i++) {
+      const p = pts[Math.floor(i * step)];
+      out.push([p[0], p[1]]);
+    }
+    const last = pts[pts.length - 1];
+    if (out[out.length - 1][0] !== last[0]) out.push([last[0], last[1]]);
+    return out;
+  }
+
   points(stationId, hours = 72) {
     const arr = this.data[stationId] || [];
     const cutoff = Date.now() - hours * 3600 * 1000;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-monitor",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "description": "监控 sub2api / new-api 中转站余额的网页面板",
   "type": "module",

public/app.js

@@ -165,12 +165,30 @@ $("#logoutBtn").onclick = async () => {
 const PLATE = { newapi: "NA", "newapi-key": "KEY", sub2api: "S2", "sub2api-password": "S2" };
 const CH_PLATE = { telegram: "TG", dingtalk: "DT", wecom: "WC", feishu: "FS", bark: "BK", ntfy: "NF", serverchan: "SC", resend: "RS", smtp: "SM", webhook: "WH" };
 
+// 站点卡片里的迷你余额走势（近 48 小时）：陡降 = 消耗快，平线 = 闲置，跳升 = 充值
+function sparkSvg(pts) {
+  if (!pts || pts.length < 2) return "";
+  const W = 170, H = 30, P = 3;
+  const t0 = pts[0][0], t1 = pts[pts.length - 1][0];
+  let min = Infinity, max = -Infinity;
+  for (const [, v] of pts) { if (v < min) min = v; if (v > max) max = v; }
+  if (max - min < 1e-9) { min -= 1; max += 1; } // 余额没变化时画一条居中的平线
+  const x = (t) => P + ((t - t0) / (t1 - t0 || 1)) * (W - 2 * P);
+  const y = (v) => P + (1 - (v - min) / (max - min)) * (H - 2 * P);
+  const line = pts.map((p, i) => `${i ? "L" : "M"}${x(p[0]).toFixed(1)},${y(p[1]).toFixed(1)}`).join("");
+  const area = `${line}L${x(t1).toFixed(1)},${H - P}L${x(t0).toFixed(1)},${H - P}Z`;
+  const last = pts[pts.length - 1];
+  return `<svg class="spark" viewBox="0 0 ${W} ${H}" aria-hidden="true">
+    <path class="spark-area" d="${area}"/><path class="spark-line" d="${line}"/>
+    <circle class="spark-dot" cx="${x(last[0]).toFixed(1)}" cy="${y(last[1]).toFixed(1)}" r="2.5"/>
+  </svg>`;
+}
+
 function stationRow(s) {
   const st = statusOf(s);
   const b = s.balance;
   const rate = rateOf(s);
   const cls = st === "danger" || st === "error" ? "danger" : st === "warn" ? "warn" : "";
-  const usedPct = b && b.ok && b.total > 0 ? Math.min(100, Math.round((b.used / b.total) * 100)) : 0;
   const amount = b && b.ok ? cny(b.remaining * rate) : "—";
   let meta;
   if (b && b.ok) {
@@ -187,8 +205,9 @@ function stationRow(s) {
   } else {
     meta = `${esc(typeLabel(s.type))} · 尚未查询`;
   }
-  const bar = b && b.ok
-    ? `<div class="st-bar"><div class="progress"><i class="${cls}" style="width:${usedPct}%"></i></div><span class="st-usage">已用 ${cny(b.used * rate)} / ${cny(b.total * rate)}</span></div>`
+  const spark = sparkSvg(s.spark);
+  const bar = b && b.ok && spark
+    ? `<div class="st-bar" title="近 48 小时余额走势">${spark}<span class="st-usage">近 48h 余额</span></div>`
     : "";
   const eta = etaText(s.prediction, rate);
   const pieces = [];

public/styles.css

@@ -151,11 +151,10 @@ button { font-family: inherit; cursor: pointer; }
 }
 .st-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .st-bar { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
-.progress { height: 5px; border-radius: 3px; background: rgba(0,0,0,.06); overflow: hidden; flex: 1; max-width: 260px; }
-:root[data-theme="dark"] .progress { background: rgba(255,255,255,.08); }
-.progress > i { display: block; height: 100%; background: var(--primary); transition: width .3s; }
-.progress > i.warn { background: var(--text-warning); }
-.progress > i.danger { background: var(--text-danger); }
+.spark { width: 170px; height: 30px; flex-shrink: 0; }
+.spark-line { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
+.spark-area { fill: var(--primary); opacity: .08; }
+.spark-dot { fill: var(--primary); stroke: var(--bg-surface); stroke-width: 1.5; }
 .st-usage { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
 
 .st-balance { text-align: right; flex-shrink: 0; min-width: 108px; }

server.js

@@ -481,6 +481,7 @@ function redact(s) {
       ? { expiresAt: s2Tokens.expiresAt || null, lastLoginAt: s2Tokens.lastLoginAt || null }
       : null,
     prediction: history.predict(s.id),
+    spark: history.sparkline(s.id, 48),
     todayUsed: fromSite ?? history.usedSince(s.id, midnight.getTime()),
     todayIsEstimate: fromSite == null,
     todayTokens: s.balance?.todayTokens ?? null,