dsh-deepseek-web-login 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 本项目遵循大致语义化版本；日期为本地时间。
 
+## 0.4.2 — 2026-09-26
+
+> 新增「Token 统计」页：本地的用量趋势与分布。以前 token 数只在上报途中被算一次就丢了。
+
+### 新增
+
+- **「Token 统计」页**（标签栏在「模型」之后）：把每次调用的 token 用量落到本地
+  （`<数据目录>/web-login/usage/`，按天分文件、保留 90 天），并在设置页看趋势与分布。
+  - **范围切换**：今天 / 近 7 天 / 近 30 天 / 总计
+  - **四格总览**：总 Token / 输入 Token / 输出 Token / 调用次数（副行给出服务端口径占比与成功失败数）
+  - **按天用量**：堆叠柱（输入 + 输出）+ 虚线（当天调用次数，右轴），鼠标停在柱上可看具体数字
+  - **用量分布**：按账号 / 按模型切换，横条排行带占比与次数
+
+### 说明
+
+- **口径**：网页端只在**部分**响应里上报总量，其余是按字符估算的 ⇒ 界面显示「服务端口径 N/M 次」，
+  不把估算值说成精确值。`server` 标记只认服务端真的给了总量那一次。
+- **与「防风控」页的调用台账是两份存储**：台账保留 7 天、管请求密度与失败分类；
+  用量保留 90 天、只看用量。保留期差一个数量级，合并会让两边互相迁就。
+- **懒加载**：切到这一页才读盘，不为没打开它的用户扫描历史文件。
+- ⚠️ **历史数据是空的**：这个存储从本版才开始记，所以趋势图从升级当天开始长。
+
+## 0.4.1 — 2026-09-26
+
+> 被限流/封禁时能自己接下去。0.4.0 的自动换号，从这个版本起才是真正的兜底。
+
+### 改进
+
+- **封禁后不再需要手动点「继续」**：账号被封（`user is muted`）时，此前把**解除时间**（可能几小时）
+  当作重试间隔交给重试策略 ⇒ 它直接放弃重试 ⇒ 整轮停住、等人手动点「继续」。
+  现在只要**还能换号**（自动换号开着、且账号库里还有可用账号），就给 2 秒的短退避 ——
+  重试立刻发生，重发时自动换到可用账号，**整轮任务自己接下去**。
+  - 没有别的账号可用时仍保持原行为（长退避 ⇒ 放弃重试），不做无用空转
+  - 候选账号换完即止 ⇒ **不会无限换号重试**
+  - ⚠️ 只在自动换号**开着**时生效（滑块默认 0 = 关闭 ⇒ 行为与 0.4.0 完全一致）
+
+### 说明
+
+- 限流（`操作过于频繁` / HTTP 429 / 业务码 40029）本来就是自动退避重发、不需要手动干预 —— 这次没动它。
+
 ## 0.4.0 — 2026-09-26
 
 > 两件事：一个「自动换号」滑块，以及一条会把限流误判成"不可重试"的修复。

package/lib/client.js

@@ -476,6 +476,39 @@ transition:color .15s ease,border-color .15s ease}
 .dsw-spark rect{fill:var(--bd2)}
 .dsw-spark rect.on{fill:var(--accent)}
 .dsw-spark rect.bad{fill:var(--err)}
+/* ── Token 统计页 ────────────────────────────────────────────────────
+   图全是手写 SVG：插件不引第三方图表库（多一个依赖就多一份与宿主版本的耦合）。
+   高度写 auto 而不是固定值 —— viewBox 自带比例，固定高度会把图拉变形或留白。 */
+.dsw-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);
+padding:var(--sp-3) 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
+.dsw-stat{min-width:0}
+.dsw-stat .k{font-size:12px;color:var(--fg3);margin:0 0 2px}
+.dsw-stat .v{font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.01em;
+color:var(--fg);font-variant-numeric:tabular-nums}
+.dsw-stat .n{font-size:11px;color:var(--fg3);margin-top:2px;line-height:1.45}
+@media (max-width:560px){.dsw-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
+.dsw-trend{display:block;width:100%;height:auto;margin:var(--sp-3) 0 0;overflow:visible}
+.dsw-trend .grid{stroke:var(--bd);stroke-width:.5}
+.dsw-trend .axis{fill:var(--fg3);font-size:10px}
+.dsw-trend .bar-in{fill:var(--accent)}
+.dsw-trend .bar-out{fill:color-mix(in srgb,var(--accent) 45%,transparent)}
+.dsw-trend .line{fill:none;stroke:var(--fg2);stroke-width:1.2;stroke-dasharray:3 2}
+.dsw-legend{display:flex;gap:var(--sp-3);flex-wrap:wrap;font-size:11px;color:var(--fg2);
+margin:var(--sp-2) 0 0}
+.dsw-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;
+vertical-align:-1px}
+/* 分布排行：一行 = 名称 + 数值 + 占比 + 横条。条宽按**最大值**归一（不是按总量），
+   否则只有第一名看得见，其余全是一根短刺。 */
+.dsw-ranks{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
+.dsw-rank{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp-3);
+align-items:baseline}
+.dsw-rank .rk-name{font-size:12px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;
+white-space:nowrap}
+.dsw-rank .rk-val{font-size:12px;color:var(--fg2);font-variant-numeric:tabular-nums;
+white-space:nowrap}
+.dsw-rank .rk-track{grid-column:1/-1;height:6px;border-radius:999px;background:var(--bd);
+overflow:hidden}
+.dsw-rank .rk-fill{height:100%;border-radius:999px;background:var(--accent)}
 .dsw-path{font-family:var(--mono);font-size:11px;color:var(--fg2);word-break:break-all}
 /* 账号库 */
 .dsw-accounts{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
@@ -588,6 +621,7 @@ background:var(--bg2);white-space:pre-wrap;font-size:12px}
 				const TAB_KEYS = [
 					"account",
 					"model",
+					"token",
 					"gate",
 					"transport",
 					"context",
@@ -596,6 +630,7 @@ background:var(--bg2);white-space:pre-wrap;font-size:12px}
 				const TAB_LABELS = {
 					account: "账号",
 					model: "模型",
+					token: "Token 统计",
 					gate: "防风控",
 					transport: "传输层",
 					context: "上下文",
@@ -603,6 +638,7 @@ background:var(--bg2);white-space:pre-wrap;font-size:12px}
 				};
 				const accountPane = el("div", "dsw-pane");
 				const modelPane = el("div", "dsw-pane");
+				const tokenPane = el("div", "dsw-pane");
 				const gatePane = el("div", "dsw-pane");
 				const transportPane = el("div", "dsw-pane");
 				const contextPane = el("div", "dsw-pane");
@@ -610,18 +646,25 @@ background:var(--bg2);white-space:pre-wrap;font-size:12px}
 				const panes = {
 					account: accountPane,
 					model: modelPane,
+					token: tokenPane,
 					gate: gatePane,
 					transport: transportPane,
 					context: contextPane,
 					about: aboutPane
 				};
 				const tabButtons = {};
+				/**
+				* 首次切到某页时才拉的数据。**不做成"启动时全拉"**：Token 统计要扫最多 90 天的
+				* jsonl，而多数人根本不打开这一页 —— 不为没看的页付代价。
+				*/
+				const paneFirstShow = {};
 				const selectTab = (key) => {
 					for (const each of TAB_KEYS) {
 						const on = each === key;
 						panes[each].hidden = !on;
 						tabButtons[each].classList.toggle("active", on);
 						tabButtons[each].setAttribute("aria-selected", String(on));
+						if (on) paneFirstShow[each]?.();
 					}
 				};
 				const tabBar = el("div", "dsw-tabs");
@@ -1767,6 +1810,238 @@ background:var(--bg2);white-space:pre-wrap;font-size:12px}
 					}
 				};
 				ledgerRefreshBtn.addEventListener("click", () => void loadLedger());
+				const fmtTokens = (n) => {
+					if (!Number.isFinite(n) || n <= 0) return "0";
+					if (n >= 1e8) return `${(n / 1e8).toFixed(2)} 亿`;
+					if (n >= 1e4) return `${(n / 1e4).toFixed(n >= 1e6 ? 0 : 1)} 万`;
+					return String(Math.round(n));
+				};
+				const fullNum = (n) => Number.isFinite(n) ? Math.round(n).toLocaleString("zh-CN") : "0";
+				const TOKEN_RANGES = [
+					[1, "今天"],
+					[7, "近 7 天"],
+					[30, "近 30 天"],
+					[0, "总计"]
+				];
+				let tokenDays = 30;
+				const tokenRangeBar = el("div", "dsw-subtabs");
+				tokenRangeBar.setAttribute("role", "tablist");
+				const tokenRangeBtns = [];
+				const paintTokenRange = () => {
+					TOKEN_RANGES.forEach(([days], index) => {
+						const on = days === tokenDays;
+						tokenRangeBtns[index].classList.toggle("active", on);
+						tokenRangeBtns[index].setAttribute("aria-selected", String(on));
+					});
+				};
+				for (const [days, label] of TOKEN_RANGES) {
+					const btn = el("button", "dsw-subtab", label);
+					btn.type = "button";
+					btn.setAttribute("role", "tab");
+					btn.addEventListener("click", () => {
+						if (tokenDays === days) return;
+						tokenDays = days;
+						paintTokenRange();
+						loadUsage();
+					});
+					tokenRangeBtns.push(btn);
+					tokenRangeBar.append(btn);
+				}
+				paintTokenRange();
+				tokenPane.append(tokenRangeBar);
+				/** 一格总览。`set` 一次给值和注释，避免三处各写一遍 textContent。 */
+				const statCell = (label) => {
+					const node = el("div", "dsw-stat");
+					const value = el("div", "v", "—");
+					const note = el("div", "n", "");
+					node.append(el("div", "k", label), value, note);
+					return {
+						node,
+						set: (next, hint) => {
+							value.textContent = next;
+							note.textContent = hint ?? "";
+						}
+					};
+				};
+				const sTotal = statCell("总 Token");
+				const sIn = statCell("输入 Token");
+				const sOut = statCell("输出 Token");
+				const sCalls = statCell("调用次数");
+				const tokenStats = el("div", "dsw-stats");
+				tokenStats.append(sTotal.node, sIn.node, sOut.node, sCalls.node);
+				tokenPane.append(tokenStats);
+				const trendCard = el("div", "dsw-card");
+				const tokenHead = el("div", "dsw-cardhead");
+				tokenHead.append(el("span", "name", "按天用量"));
+				const tokenBadge = el("span", "dsw-badge off", "—");
+				tokenHead.append(tokenBadge);
+				trendCard.append(tokenHead);
+				trendCard.append(el("p", "dsw-hint", "柱高＝当天的输入 + 输出；虚线＝当天调用次数。鼠标停在柱上可看具体数字。"));
+				const legend = el("div", "dsw-legend");
+				legend.innerHTML = "<span><i style=\"background:var(--accent)\"></i>输入</span><span><i style=\"background:color-mix(in srgb,var(--accent) 45%,transparent)\"></i>输出</span><span><i style=\"background:var(--fg2)\"></i>调用次数</span>";
+				const trendBox = el("div");
+				trendCard.append(legend, trendBox);
+				tokenPane.append(trendCard);
+				const rankCard = el("div", "dsw-card");
+				const rankHead = el("div", "dsw-cardhead");
+				rankHead.append(el("span", "name", "用量分布"));
+				const rankTabs = el("div", "dsw-subtabs");
+				let rankKey = "account";
+				const RANK_KEYS = [["account", "按账号"], ["model", "按模型"]];
+				const rankBtns = [];
+				const paintRankTabs = () => {
+					RANK_KEYS.forEach(([key], index) => {
+						const on = key === rankKey;
+						rankBtns[index].classList.toggle("active", on);
+						rankBtns[index].setAttribute("aria-selected", String(on));
+					});
+				};
+				for (const [key, label] of RANK_KEYS) {
+					const btn = el("button", "dsw-subtab", label);
+					btn.type = "button";
+					btn.setAttribute("role", "tab");
+					btn.addEventListener("click", () => {
+						if (rankKey === key) return;
+						rankKey = key;
+						paintRankTabs();
+						renderRanks(rankKey === "account" ? lastUsage?.byAccount : lastUsage?.byModel, rankKey);
+					});
+					rankBtns.push(btn);
+					rankTabs.append(btn);
+				}
+				paintRankTabs();
+				rankHead.append(rankTabs);
+				const ranks = el("div", "dsw-ranks");
+				rankCard.append(rankHead, ranks);
+				tokenPane.append(rankCard);
+				const tokenRow = el("div", "dsw-row");
+				const tokenRefreshBtn = el("button", "dsw-btn ghost", "刷新");
+				tokenRefreshBtn.type = "button";
+				tokenRefreshBtn.addEventListener("click", () => void loadUsage());
+				tokenRow.append(tokenRefreshBtn);
+				tokenPane.append(tokenRow);
+				const tokenMsg = el("p", "dsw-hint dsw-gate-msg", "");
+				tokenPane.append(tokenMsg);
+				/** 账号 id → 给人看的名字（与调用台账同一套映射，拿不到就退回 id）。 */
+				const accountLabel = (id) => {
+					const hit = (Array.isArray(lastAccountsPayload?.accounts) ? lastAccountsPayload.accounts : []).find((item) => item.id === id);
+					return hit ? String(hit.label || hit.display || hit.id) : id;
+				};
+				/**
+				* 按天趋势图。手写 SVG（不引图表库）。
+				* 左轴是 token、右轴是调用次数 —— 两把尺子只共用画布，不共用刻度（把它们画在同一
+				* 坐标系里是最常见的图表错误：量级差几百倍时折线会贴死在底部）。
+				*/
+				const trendSvg = (series) => {
+					const W = 640;
+					const H = 170;
+					const padL = 46;
+					const plotW = 564;
+					const plotH = 142;
+					const n = Math.max(1, series.length);
+					const tokenOf = (d) => (Number(d?.in) || 0) + (Number(d?.out) || 0);
+					const maxTok = Math.max(1, ...series.map(tokenOf));
+					const maxCalls = Math.max(1, ...series.map((d) => Number(d?.calls) || 0));
+					const niceMax = (value) => {
+						const base = Math.pow(10, Math.floor(Math.log10(value)));
+						const norm = value / base;
+						return (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10) * base;
+					};
+					const top = niceMax(maxTok);
+					const slot = plotW / n;
+					const barW = Math.max(1.5, slot * .62);
+					let out = `<svg class="dsw-trend" viewBox="0 0 ${W} ${H}" role="img" aria-label="按天用量趋势">`;
+					for (const ratio of [
+						0,
+						.5,
+						1
+					]) {
+						const y = 152 - plotH * ratio;
+						out += `<line class="grid" x1="${padL}" y1="${y.toFixed(1)}" x2="610" y2="${y.toFixed(1)}"></line>`;
+						out += `<text class="axis" x="41" y="${(y + 3).toFixed(1)}" text-anchor="end">${fmtTokens(top * ratio)}</text>`;
+					}
+					series.forEach((d, i) => {
+						const x = padL + slot * i + (slot - barW) / 2;
+						const hIn = (Number(d?.in) || 0) / top * plotH;
+						const hOut = (Number(d?.out) || 0) / top * plotH;
+						const yIn = 152 - hIn;
+						out += `<g><title>${d?.date}：总 ${fullNum(tokenOf(d))} · 输入 ${fullNum(Number(d?.in) || 0)} / 输出 ${fullNum(Number(d?.out) || 0)} · 调用 ${Number(d?.calls) || 0} 次</title>`;
+						if (hIn > 0) out += `<rect class="bar-in" x="${x.toFixed(1)}" y="${yIn.toFixed(1)}" width="${barW.toFixed(1)}" height="${hIn.toFixed(1)}" rx="1"></rect>`;
+						if (hOut > 0) out += `<rect class="bar-out" x="${x.toFixed(1)}" y="${(yIn - hOut).toFixed(1)}" width="${barW.toFixed(1)}" height="${hOut.toFixed(1)}" rx="1"></rect>`;
+						if (hIn + hOut <= 0 && (Number(d?.calls) || 0) > 0) out += `<rect class="bar-out" x="${x.toFixed(1)}" y="${150 .toFixed(1)}" width="${barW.toFixed(1)}" height="2" rx="0.5"></rect>`;
+						out += "</g>";
+					});
+					const points = series.map((d, i) => {
+						const x = padL + slot * i + slot / 2;
+						const y = 152 - (Number(d?.calls) || 0) / maxCalls * plotH;
+						return `${x.toFixed(1)},${y.toFixed(1)}`;
+					}).join(" ");
+					out += `<polyline class="line" points="${points}"></polyline>`;
+					out += `<text class="axis" x="614" y="${13 .toFixed(1)}" text-anchor="start">${Math.round(maxCalls)}</text>`;
+					out += `<text class="axis" x="614" y="${155 .toFixed(1)}" text-anchor="start">0</text>`;
+					const labelStep = Math.max(1, Math.ceil(n / 6));
+					series.forEach((d, i) => {
+						if (i % labelStep !== 0 && i !== n - 1) return;
+						const x = padL + slot * i + slot / 2;
+						const parts = String(d?.date ?? "").split("-");
+						out += `<text class="axis" x="${x.toFixed(1)}" y="165" text-anchor="middle">${Number(parts[1])}/${Number(parts[2])}</text>`;
+					});
+					out += "</svg>";
+					return out;
+				};
+				/** 分布排行。条宽按**最大值**归一 —— 按总量归一的话只有第一名看得见，其余全是一根短刺。 */
+				const renderRanks = (rows, key) => {
+					ranks.textContent = "";
+					const items = Array.isArray(rows) ? rows.slice(0, 8) : [];
+					if (items.length === 0) {
+						ranks.append(el("div", "dsw-rank empty", "这段时间还没有用量记录。"));
+						return;
+					}
+					const total = Number(lastUsage?.totals?.total) || 0;
+					const max = Math.max(1, ...items.map((row) => (Number(row?.in) || 0) + (Number(row?.out) || 0)));
+					for (const row of items) {
+						const value = (Number(row?.in) || 0) + (Number(row?.out) || 0);
+						const name = key === "account" ? accountLabel(String(row?.key ?? "")) : String(row?.key ?? "—");
+						const line = el("div", "dsw-rank");
+						line.append(el("div", "rk-name", name));
+						line.append(el("div", "rk-val", `${fmtTokens(value)}${total > 0 ? ` · ${(value / total * 100).toFixed(1)}%` : ""} · ${Number(row?.calls) || 0} 次`));
+						const track = el("div", "rk-track");
+						const fill = el("div", "rk-fill");
+						fill.style.width = `${Math.max(2, value / max * 100).toFixed(1)}%`;
+						track.append(fill);
+						line.append(track);
+						ranks.append(line);
+					}
+				};
+				/** 最近一次 /usage 的响应（切换"按账号/按模型"时不必重新拉）。 */
+				let lastUsage = null;
+				const renderUsage = (data) => {
+					lastUsage = data;
+					const totals = data?.totals ?? {};
+					const total = Number(totals.total) || 0;
+					const calls = Number(totals.calls) || 0;
+					const serverCalls = Number(totals.serverCalls) || 0;
+					const share = (part) => total > 0 ? `占总量 ${(part / total * 100).toFixed(1)}%` : "";
+					sTotal.set(fmtTokens(total), calls > 0 ? `服务端口径 ${serverCalls}/${calls} 次` : "");
+					sIn.set(fmtTokens(Number(totals.in) || 0), share(Number(totals.in) || 0));
+					sOut.set(fmtTokens(Number(totals.out) || 0), share(Number(totals.out) || 0));
+					sCalls.set(String(calls), calls > 0 ? `成功 ${Number(totals.ok) || 0} · 失败 ${Number(totals.failed) || 0}` : "");
+					tokenBadge.textContent = tokenDays === 0 ? "全部" : `近 ${tokenDays} 天`;
+					tokenBadge.className = `dsw-badge ${total > 0 ? "on" : "off"}`;
+					const series = Array.isArray(data?.series) ? data.series : [];
+					trendBox.innerHTML = total > 0 ? trendSvg(series) : "";
+					if (total <= 0) tokenMsg.textContent = calls > 0 ? `有 ${calls} 次调用，但没有可用的 token 数（失败调用或不带用量的响应不算）。` : "这段时间还没有用量记录 —— 跑一次对话后点「刷新」。";
+					else tokenMsg.textContent = `数据覆盖 ${data?.coverage?.from ?? "—"} ~ ${data?.coverage?.to ?? "—"}（保留 ${data?.keepDays ?? 90} 天）。网页端只在部分响应里给出总量，拿不到时按字符估算，所以这两个数是估算值。`;
+					renderRanks(rankKey === "account" ? data?.byAccount : data?.byModel, rankKey);
+				};
+				const loadUsage = async () => {
+					try {
+						renderUsage(await api(`/usage?days=${tokenDays}`));
+					} catch (error) {
+						tokenMsg.textContent = `用量读取失败：${error?.message ?? error}`;
+					}
+				};
+				paneFirstShow.token = () => void loadUsage();
 				const transportCard = el("div", "dsw-card");
 				transportCard.append(el("div", "dsw-cardhead", "传输层（指纹）"));
 				const transportRow = el("div", "dsw-gate-row");