Token 用量统计；Docker 化 + GHCR 自动构建 + 版本信息展示 (v1.1.0)

lettimepassby · lettimepassby · commit 80de5d85161e · 2026-07-12T23:05:18.000-07:00
- Sub2API 站点显示今日 tokens 与请求数（来自站点仪表盘接口），
  总览「今日总消耗」卡片附带全站合计，站点行与趋势弹窗同步展示
- Dockerfile（node:22-alpine，数据卷 /app/data，健康检查），.dockerignore
- GitHub Actions：推送 main 自动构建镜像发布到 ghcr.io（latest + commit SHA 双标签）
- deploy/docker-compose.yml：面板 + Watchtower（每 5 分钟检查更新并清理旧镜像）
- 页面展示运行版本：侧栏与设置页「关于」显示 vX.Y.Z 与构建 commit
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,9 @@
+node_modules
+data
+.git
+.github
+.claude
+.DS_Store
+Dockerfile
+docker-compose.yml
+deploy
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -0,0 +1,38 @@
+name: Build & Push Docker image
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  packages: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: docker/setup-buildx-action@v3
+
+      - name: Login to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          build-args: |
+            GIT_SHA=${{ github.sha }}
+          tags: |
+            ghcr.io/${{ github.repository }}:latest
+            ghcr.io/${{ github.repository }}:${{ github.sha }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,25 @@
+# 中转站余额监控面板
+FROM node:22-alpine
+
+WORKDIR /app
+ENV NODE_ENV=production \
+    HOST=0.0.0.0 \
+    PORT=8787
+
+COPY package.json package-lock.json ./
+RUN npm ci --omit=dev
+
+COPY . .
+
+# 构建时注入 git commit，页面「关于」与侧栏显示
+ARG GIT_SHA=dev
+ENV APP_COMMIT=$GIT_SHA
+
+# 运行时数据（站点凭证 / 历史 / 会话密钥）挂载到宿主机持久化
+VOLUME /app/data
+
+EXPOSE 8787
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s \
+  CMD wget -q --spider http://127.0.0.1:8787/ || exit 1
+
+CMD ["node", "server.js"]
diff --git a/deploy/docker-compose.yml b/deploy/docker-compose.yml
@@ -0,0 +1,22 @@
+# 服务器部署：面板 + Watchtower 自动更新
+# 用法：mkdir -p ~/relay-monitor && cp docker-compose.yml ~/relay-monitor/ && cd ~/relay-monitor && docker compose up -d
+services:
+  relay-monitor:
+    image: ghcr.io/lettimepassby/relay-monitor:latest
+    container_name: relay-monitor
+    restart: unless-stopped
+    ports:
+      - "8787:8787"
+    environment:
+      - HOST=0.0.0.0
+    volumes:
+      - ./data:/app/data
+
+  watchtower:
+    image: containrrr/watchtower
+    container_name: watchtower
+    restart: unless-stopped
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    # 每 5 分钟检查一次 relay-monitor 的新镜像，更新后清理旧镜像
+    command: --cleanup --interval 300 relay-monitor
diff --git a/lib/providers.js b/lib/providers.js
@@ -264,7 +264,7 @@ async function querySub2Api(station) {
 
   // 今日消耗：读取站点用户仪表盘同款接口（today_actual_cost = 今日实际扣费），
   // 与站点页面显示完全一致；老版本没有该接口时静默降级为历史推算
-  let todayUsed = null, todayRequests = null;
+  let todayUsed = null, todayRequests = null, todayTokens = null;
   try {
     const st = await request(`${base}/api/v1/usage/dashboard/stats`, {
       headers: { Authorization: `Bearer ${bearerOf()}` },
@@ -274,11 +274,12 @@ async function querySub2Api(station) {
       if (Number.isFinite(Number(d.today_actual_cost))) {
         todayUsed = round2(Number(d.today_actual_cost));
         todayRequests = Number.isFinite(Number(d.today_requests)) ? Number(d.today_requests) : null;
+        todayTokens = Number.isFinite(Number(d.today_tokens)) ? Number(d.today_tokens) : null;
       }
     }
   } catch { /* 不影响余额查询 */ }
 
-  return { ...parseSub2ApiMe(data), todayUsed, todayRequests, tokensChanged };
+  return { ...parseSub2ApiMe(data), todayUsed, todayRequests, todayTokens, tokensChanged };
 }
 
 const HANDLERS = {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "relay-monitor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "description": "监控 sub2api / new-api 中转站余额的网页面板",
   "type": "module",
diff --git a/public/app.js b/public/app.js
@@ -21,7 +21,7 @@ document.getElementById("themeToggle").onclick = () =>
 const state = {
   stations: [], settings: { refreshIntervalSec: 60, lowBalanceUsd: 5 },
   types: [], channelTypes: [], channels: [], rules: {},
-  view: "dashboard", user: null,
+  view: "dashboard", user: null, app: null,
   trendHours: 24, overview: null, // 总览趋势图的时间范围与数据缓存 {hours, series, at}
 };
 let autoTimer = null;
@@ -68,6 +68,13 @@ const api = {
 const $ = (s) => document.querySelector(s);
 const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
 const usd = (n) => "$" + Number(n ?? 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+const fmtTokens = (n) => {
+  n = Number(n) || 0;
+  if (n >= 1e9) return +(n / 1e9).toFixed(1) + "B";
+  if (n >= 1e6) return +(n / 1e6).toFixed(1) + "M";
+  if (n >= 1e3) return +(n / 1e3).toFixed(1) + "K";
+  return String(n);
+};
 const typeLabel = (v) => (state.types.find((t) => t.value === v)?.label || v);
 
 function threshold(s) {
@@ -180,6 +187,7 @@ function stationRow(s) {
   const pieces = [];
   if (b && b.ok && s.todayUsed != null) {
     pieces.push(`<span>今日消耗 ${s.todayIsEstimate ? "≈" : ""}${usd(s.todayUsed)}</span>`);
+    if (s.todayTokens != null) pieces.push(`<span>${fmtTokens(s.todayTokens)} tokens</span>`);
   }
   if (eta) pieces.push(`<span class="${eta.cls}">${eta.text}</span>`);
   if (pieces.length) pieces.push("<span>点击查看趋势</span>");
@@ -221,11 +229,19 @@ function renderDashboard() {
   const lowCount = list.filter((s) => ["warn", "danger"].includes(statusOf(s))).length;
   const errCount = list.filter((s) => statusOf(s) === "error").length;
 
+  // 今日 tokens / 请求数：只有 sub2api 站点能提供，有数据才显示
+  const tokList = list.filter((s) => s.todayTokens != null);
+  const reqList = list.filter((s) => s.todayRequests != null);
+  const subBits = [];
+  if (tokList.length) subBits.push(`${fmtTokens(tokList.reduce((a, s) => a + s.todayTokens, 0))} tokens`);
+  if (reqList.length) subBits.push(`${reqList.reduce((a, s) => a + s.todayRequests, 0).toLocaleString("en-US")} 次请求`);
+  const todaySub = subBits.length ? `<div class="stat-sub">${subBits.join(" · ")}</div>` : "";
+
   $("#headerActions").innerHTML = HDR_BTNS;
   const stats = `
   <div class="stats stats-5">
     <div class="stat-card"><div class="label">总剩余余额</div><div class="value">${usd(totalRemaining)}</div></div>
-    <div class="stat-card"><div class="label">今日总消耗</div><div class="value">${todayApprox ? "≈ " : ""}${usd(todayTotal)}</div></div>
+    <div class="stat-card"><div class="label">今日总消耗</div><div class="value">${todayApprox ? "≈ " : ""}${usd(todayTotal)}</div>${todaySub}</div>
     <div class="stat-card"><div class="label">日均消耗（估算）</div><div class="value">${totalBurn > 0 ? usd(totalBurn) : "—"}</div></div>
     <div class="stat-card"><div class="label">低余额 / 耗尽</div><div class="value ${lowCount ? "warn" : ""}">${lowCount}<small>个</small></div></div>
     <div class="stat-card"><div class="label">查询异常</div><div class="value ${errCount ? "danger" : ""}">${errCount}<small>个</small></div></div>
@@ -570,7 +586,7 @@ function renderSettings() {
   </div>
   <div class="section-head" style="margin-top:20px"><h2>关于</h2></div>
   <div class="panel"><div class="st-row"><div class="st-main" style="cursor:default">
-    <div class="st-name">中转站余额监控</div>
+    <div class="st-name">中转站余额监控${state.app ? ` <span class="demo-tag">v${esc(state.app.version)}${state.app.commit ? " · " + esc(state.app.commit) : ""}</span>` : ""}</div>
     <div class="st-meta">支持 New API（访问令牌 / sk 密钥）与 Sub2API（登录令牌 / 账号密码自动续期）。界面基于 app-shell-ui 设计语言构建。凭证仅存储于本机 data/ 目录。</div>
   </div></div></div>`;
 
@@ -609,7 +625,8 @@ function render() {
   else if (state.view === "stations") renderStations();
   else if (state.view === "notify") renderNotify();
   else renderSettings();
-  $("#lastSync").textContent = "自动刷新：每 " + state.settings.refreshIntervalSec + " 秒";
+  const ver = state.app ? `v${state.app.version}${state.app.commit ? ` (${state.app.commit})` : ""}` : "";
+  $("#lastSync").innerHTML = `自动刷新：每 ${state.settings.refreshIntervalSec} 秒${ver ? `<br>${esc(ver)}` : ""}`;
 }
 
 // ---- 中转站弹窗 --------------------------------------------------------------
@@ -768,7 +785,13 @@ async function openTrend(station) {
     const eta = etaText(prediction);
     $("#trendStats").innerHTML = `
       <div class="stat-card"><div class="label">当前余额</div><div class="value">${b?.ok ? usd(b.remaining) : "—"}</div></div>
-      <div class="stat-card"><div class="label">今日消耗</div><div class="value">${station.todayUsed != null ? (station.todayIsEstimate ? "≈ " : "") + usd(station.todayUsed) : "—"}</div></div>
+      <div class="stat-card"><div class="label">今日消耗</div><div class="value">${station.todayUsed != null ? (station.todayIsEstimate ? "≈ " : "") + usd(station.todayUsed) : "—"}</div>${
+        station.todayTokens != null || station.todayRequests != null
+          ? `<div class="stat-sub">${[
+              station.todayTokens != null ? fmtTokens(station.todayTokens) + " tokens" : null,
+              station.todayRequests != null ? station.todayRequests.toLocaleString("en-US") + " 次" : null,
+            ].filter(Boolean).join(" · ")}</div>` : ""
+      }</div>
       <div class="stat-card"><div class="label">日均消耗（估算）</div><div class="value">${prediction?.burnPerDay > 0 ? usd(prediction.burnPerDay) : "—"}</div></div>
       <div class="stat-card"><div class="label">预计耗尽</div><div class="value ${eta?.cls || ""}">${prediction?.etaDays != null ? fmtEtaText(prediction.etaDays) : "—"}</div></div>`;
     drawChart($("#trendChart"), points, prediction);
@@ -1041,6 +1064,7 @@ async function bootData() {
   state.channelTypes = meta.channelTypes;
   state.settings = meta.settings;
   state.rules = meta.rules;
+  state.app = meta.app || null;
   await Promise.all([reload(), loadNotifications()]);
   render();
   startAuto();
diff --git a/public/styles.css b/public/styles.css
@@ -122,6 +122,7 @@ button { font-family: inherit; cursor: pointer; }
 .stat-card .value small { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-left: 2px; }
 .stat-card .value.warn { color: var(--text-warning); }
 .stat-card .value.danger { color: var(--text-danger); }
+.stat-card .stat-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; font-variant-numeric: tabular-nums; }
 
 .section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
 .section-head h2 { font-size: 14.5px; font-weight: 600; }
diff --git a/server.js b/server.js
@@ -1,6 +1,7 @@
 import express from "express";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
+import { readFile } from "node:fs/promises";
 
 import { Store } from "./lib/store.js";
 import { queryStation, STATION_TYPES } from "./lib/providers.js";
@@ -13,6 +14,13 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const PORT = process.env.PORT || 8787;
 const HOST = process.env.HOST || "127.0.0.1";
 
+// 版本信息：版本号来自 package.json，commit 由 Docker 构建时注入（APP_COMMIT）
+const pkg = JSON.parse(await readFile(join(__dirname, "package.json"), "utf8"));
+const APP_INFO = {
+  version: pkg.version,
+  commit: (process.env.APP_COMMIT || "").slice(0, 7) || null,
+};
+
 const store = new Store(join(__dirname, "data", "stations.json"));
 await store.load();
 const history = await new History(join(__dirname, "data", "history.json")).load();
@@ -150,6 +158,7 @@ mock.get("/sub2api/:acc/api/v1/usage/dashboard/stats", (req, res) => {
       today_actual_cost: Number(todayCost.toFixed(4)),
       today_cost: Number((todayCost * 1.15).toFixed(4)),
       today_requests: Math.round(todayCost * 40),
+      today_tokens: Math.round(todayCost * 250000),
       total_actual_cost: Number(s.usedUsd.toFixed(4)),
     },
   });
@@ -277,6 +286,7 @@ app.get("/api/meta", (req, res) => {
     channelTypes: CHANNEL_TYPES,
     settings: store.settings,
     rules: store.rules,
+    app: APP_INFO,
   });
 });
 
@@ -417,6 +427,8 @@ function redact(s) {
     prediction: history.predict(s.id),
     todayUsed: fromSite ?? history.usedSince(s.id, midnight.getTime()),
     todayIsEstimate: fromSite == null,
+    todayTokens: s.balance?.todayTokens ?? null,
+    todayRequests: s.balance?.todayRequests ?? null,
   };
 }
 

Original file line number	Diff line number	Diff line change
`@@ -264,7 +264,7 @@ async function querySub2Api(station) {`
`264`	`264`
`265`	`265`	`// 今日消耗：读取站点用户仪表盘同款接口（today_actual_cost = 今日实际扣费），`
`266`	`266`	`// 与站点页面显示完全一致；老版本没有该接口时静默降级为历史推算`
`267`		`- let todayUsed = null, todayRequests = null;`
	`267`	`+ let todayUsed = null, todayRequests = null, todayTokens = null;`
`268`	`268`	`try {`
`269`	`269`	const st = await request(`${base}/api/v1/usage/dashboard/stats`, {
`270`	`270`	headers: { Authorization: `Bearer ${bearerOf()}` },
`@@ -274,11 +274,12 @@ async function querySub2Api(station) {`
`274`	`274`	`if (Number.isFinite(Number(d.today_actual_cost))) {`
`275`	`275`	`todayUsed = round2(Number(d.today_actual_cost));`
`276`	`276`	`todayRequests = Number.isFinite(Number(d.today_requests)) ? Number(d.today_requests) : null;`
	`277`	`+ todayTokens = Number.isFinite(Number(d.today_tokens)) ? Number(d.today_tokens) : null;`
`277`	`278`	`}`
`278`	`279`	`}`
`279`	`280`	`} catch { /* 不影响余额查询 */ }`
`280`	`281`
`281`		`- return { ...parseSub2ApiMe(data), todayUsed, todayRequests, tokensChanged };`
	`282`	`+ return { ...parseSub2ApiMe(data), todayUsed, todayRequests, todayTokens, tokensChanged };`
`282`	`283`	`}`
`283`	`284`
`284`	`285`	`const HANDLERS = {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "relay-monitor",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.1.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"description": "监控 sub2api / new-api 中转站余额的网页面板",`
`6`	`6`	`"type": "module",`