balance-dsh 1.0.2 → 1.0.8

package/README.md

@@ -4,13 +4,21 @@ DSH 插件：在 Web UI 中直接显示 DeepSeek 账户余额和当前会话 tok
 
 ## 功能
 
-- **侧边栏余额行**：侧边栏展开时显示在底部（紧贴"设置"按钮上方），格式：钱包图标 + `余额` + 金额（带货币单位）+ 时段标签（高峰红 / 空闲绿）。金额按余额状态变色：充足绿色、偏低（<10）琥珀黄、为 0 显示红色"去充值"。悬停显示明细（总余额、充值余额），点击金额跳转 DeepSeek 用量页。
+- **侧边栏余额行**：侧边栏展开时显示在底部（紧贴"设置"按钮上方），格式：钱包图标 + `余额` + 金额（带货币单位）+ 时段标签（高峰红 / 空闲绿）。金额按余额状态变色：充足绿色、偏低（<10）琥珀黄、为 0 显示红色"去充值"。
 - **收起态 FAB**：侧边栏收起时，余额显示为左下角悬浮胶囊。
 - **自动刷新**：每 60 秒自动刷新一次；每次对话完成（新回复落库）也会立即刷新；右键余额任意区域可手动刷新。
+- **余额与使用统计**：单击余额在余额项旁以轻量动画打开局部快捷菜单，展示账户余额、近 90 天计费 Token、估算费用、扫描会话数和按日使用热力图；点击菜单外区域会播放关闭动画，双击余额打开 DeepSeek 官方 API 用量页。
 - **高峰/空闲计费**：官方高峰窗口为**周一至周五 09:00-12:00、14:00-18:00（北京时间）**，周末全天空闲。消耗金额**跨时段精确计费**：高峰时段的 token 按高峰价 ×2、空闲时段按目录价，按事件时间分桶计算。
 - **会话消耗行**：对话框下方实时显示当前会话消耗（新增 tokens + 估算金额），悬停查看完整明细（模型、时段拆分、计费口径）。
 - **`/balance` 命令**：命令行查询余额明细和当前会话消耗。
 
+### 使用统计口径
+
+- 热力图按北京时间聚合最近 90 天持久化会话中的 `assistant/message` Token usage。
+- 费用按照每条消息的实际模型和峰谷时段估算，最终金额以 DeepSeek 官方账单为准。
+- 为避免历史会话过多拖慢 DSH，最多扫描最近 200 个会话；服务端统计和客户端展示结果均缓存 5 分钟，重复打开菜单不会重复请求。
+- 若未配置 API Key，仍可查看本地 Token 与费用统计，但账户余额会显示为不可用。
+
 ## 安装
 
 前提：已安装 DSH Desktop，且知道自己的 profile 目录（通常是 `C:\Users\<你的用户名>\.dsh\profiles\desktop\`）。

package/lib/client.js

@@ -5,6 +5,7 @@ window.__ModuleLoader__.load({
     var exports = module.exports;
     Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
     let react = require("react");
+    let reactDom = require("react-dom");
     let jsx = require("react/jsx-runtime");
     let primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 
@@ -41,7 +42,50 @@ window.__ModuleLoader__.load({
 .balance-fab-dark:hover{background:#cf3a3f}
 .balance-usage-line{box-sizing:border-box;display:flex;justify-content:center;align-items:center;gap:10px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .balance-usage-line strong{color:var(--dsw-alias-label-primary);font-weight:600}
-/* ── 跨会话统计面板（单击余额弹出） ── */
+/* ── 跨会话统计浮层（余额元素的子级，向右/向上展开） ── */
+.balance-stats-anchor{position:relative;display:flex;min-width:0;overflow:visible}
+.balance-stats-anchor--wide{width:100%}
+.balance-stats-anchor--compact{position:fixed;left:68px;bottom:12px;z-index:10000}
+.balance-stats-anchor--compact .balance-fab{position:static}
+.balance-stats-panel{box-sizing:border-box;position:fixed;z-index:10000;width:460px;max-height:min(620px,calc(100vh - 24px));overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;padding:16px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-base,#fff);border:1px solid var(--dsw-alias-border-l2,#d9d9df);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.24);transform-origin:left bottom;will-change:transform,opacity;contain:layout style;animation:balance-stats-panel-in .18s var(--ds-ease-in-out,ease-out) both}
+.balance-stats-panel--closing{pointer-events:none;animation:balance-stats-panel-out .14s var(--ds-ease-in-out,ease-in) both}
+@keyframes balance-stats-panel-in{from{opacity:0;transform:translateY(8px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
+@keyframes balance-stats-panel-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(6px) scale(.985)}}
+.balance-stats-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
+.balance-stats-title{margin:0;font-size:16px;line-height:24px;font-weight:700}
+.balance-stats-subtitle{margin:4px 0 0;color:var(--dsw-alias-label-secondary);font-size:12px}
+.balance-stats-close{width:32px;height:32px;flex:none;border:0;border-radius:8px;color:var(--dsw-alias-label-secondary);background:transparent;font-size:22px;line-height:1;cursor:pointer}
+.balance-stats-close:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.balance-stats-error{padding:12px;border-radius:10px;color:var(--dsw-alias-state-error-primary,#e5484d);background:rgba(229,72,77,.10)}
+.balance-stats-loading{padding:48px 12px;text-align:center;color:var(--dsw-alias-label-secondary)}
+.balance-stats-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
+.balance-stats-card{min-width:0;padding:11px;border:1px solid var(--dsw-alias-border-l2,#d9d9df);border-radius:10px;background:var(--dsw-alias-bg-module-platform,rgba(127,127,127,.04));animation:balance-stats-card-in .2s var(--ds-ease-in-out,ease-out) both}
+.balance-stats-card:nth-child(2){animation-delay:.025s}.balance-stats-card:nth-child(3){animation-delay:.05s}.balance-stats-card:nth-child(4){animation-delay:.075s}
+@keyframes balance-stats-card-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
+.balance-stats-card__label{display:block;margin-bottom:6px;color:var(--dsw-alias-label-secondary);font-size:12px}
+.balance-stats-card__value{display:block;overflow:hidden;color:var(--dsw-alias-label-primary);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
+.balance-stats-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:14px;font-weight:650}
+.balance-stats-legend{display:flex;align-items:center;gap:4px;color:var(--dsw-alias-label-secondary);font-size:11px;font-weight:400}
+.balance-heatmap-wrap{min-width:0;overflow:hidden;padding:4px 2px 8px}
+.balance-heatmap{display:grid;grid-template-rows:repeat(7,14px);grid-auto-flow:column;grid-auto-columns:14px;gap:4px;width:max-content;min-width:100%}
+.balance-heatmap-cell{display:block;box-sizing:border-box;width:14px;height:14px;padding:0;border:0;border-radius:3px;background:rgba(127,127,127,.10);appearance:none;transition:transform .12s var(--ds-ease-in-out,ease-out),filter .12s var(--ds-ease-in-out,ease-out)}
+.balance-heatmap-cell[aria-label]{cursor:default}
+.balance-heatmap-cell[aria-label]:hover{transform:scale(1.18);filter:brightness(1.14)}
+.balance-heatmap-tooltip{box-sizing:border-box;position:fixed;z-index:10020;max-width:min(300px,calc(100vw - 24px));padding:6px 9px;border:1px solid var(--dsw-alias-border-l2,#45454d);border-radius:6px;background:var(--dsw-alias-bg-module-platform,#27272b);box-shadow:0 6px 18px rgba(0,0,0,.22);color:var(--dsw-alias-label-primary,#f4f4f5);font-size:11px;font-weight:400;line-height:1.45;white-space:nowrap;pointer-events:none;animation:balance-heatmap-tooltip-in .12s var(--ds-ease-in-out,ease-out) both}
+.balance-heatmap-tooltip--left{transform:translateY(-100%)}
+.balance-heatmap-tooltip--center{transform:translate(-50%,-100%)}
+.balance-heatmap-tooltip--right{transform:translateY(-100%)}
+@keyframes balance-heatmap-tooltip-in{from{opacity:0}to{opacity:1}}
+.balance-heatmap-cell--1{background:rgba(34,197,94,.25)}
+.balance-heatmap-cell--2{background:rgba(34,197,94,.45)}
+.balance-heatmap-cell--3{background:rgba(34,197,94,.68)}
+.balance-heatmap-cell--4{background:rgba(22,163,74,.95)}
+.balance-heatmap-cell--blank{visibility:hidden}
+.balance-stats-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--dsw-alias-label-secondary);font-size:11px}
+.balance-stats-link{padding:7px 12px;border:1px solid var(--dsw-alias-border-l2,#d9d9df);border-radius:8px;color:var(--dsw-alias-label-primary);text-decoration:none;background:var(--dsw-alias-bg-module-platform,rgba(127,127,127,.04))}
+.balance-stats-link:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+@media(max-width:680px){.balance-stats-panel{max-height:calc(100vh - 68px)}}
+@media(prefers-reduced-motion:reduce){.balance-stats-panel,.balance-stats-panel--closing,.balance-stats-card{animation:none}.balance-heatmap-cell{transition:none}}
 /* ── 展开态底部一行：[设置齿轮][余额胶囊]，余额在设置右边 ──
    全部使用稳定锚点，不依赖 CSS Modules hash 类名（DSH 升级后仍有效）：
    - wide 态特征：底部存在 .balance-footer / .balance-topup（收起态渲染 position:fixed 的 .balance-fab，不影响）
@@ -55,12 +99,15 @@ window.__ModuleLoader__.load({
 `;
 
     const tagId = "balance/balance-widget.css";
-    if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
-      const tag = document.createElement("style");
-      tag.dataset.plugin = "balance";
-      tag.dataset.pluginCss = tagId;
+    if (typeof document !== "undefined") {
+      let tag = document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]");
+      if (tag === null) {
+        tag = document.createElement("style");
+        tag.dataset.plugin = "balance";
+        tag.dataset.pluginCss = tagId;
+        document.head.appendChild(tag);
+      }
       tag.textContent = css;
-      document.head.appendChild(tag);
     }
 
     // ─── 价格（与服务端默认保持一致；服务端 /balance-api 返回后会覆盖） ───
@@ -310,13 +357,316 @@ window.__ModuleLoader__.load({
       fetchBalanceOnce();
     }
 
-    // ─── 余额显示：展开态侧栏底部文字（¥ 图标+金额）；收起态悬浮 FAB ──
+    const USAGE_STATS_CACHE_TTL = 5 * 60_000;
+    let usageStatsCache = null;
+    let usageStatsCacheAt = 0;
+    let usageStatsInFlight = null;
+
+    function getCachedUsageStats() {
+      return usageStatsCache && Date.now() - usageStatsCacheAt < USAGE_STATS_CACHE_TTL
+        ? usageStatsCache
+        : null;
+    }
+
+    function fetchUsageStats() {
+      const cached = getCachedUsageStats();
+      if (cached) return Promise.resolve(cached);
+      if (usageStatsInFlight) return usageStatsInFlight;
+      usageStatsInFlight = fetch("/balance-api?stats=1")
+        .then(async (res) => {
+          if (!res.ok) throw new Error("HTTP " + res.status);
+          const data = await res.json();
+          if (!data || !data.ok) throw new Error((data && data.error) || "统计加载失败");
+          if (!data.stats) throw new Error(data.statsError || "暂无可用的会话统计");
+          usageStatsCache = data;
+          usageStatsCacheAt = Date.now();
+          return data;
+        })
+        .finally(() => {
+          usageStatsInFlight = null;
+        });
+      return usageStatsInFlight;
+    }
+
+    const StatsCard = react.memo(function StatsCard({ label, value }) {
+      return jsx.jsxs("div", {
+        className: "balance-stats-card",
+        children: [
+          jsx.jsx("span", { className: "balance-stats-card__label", children: label }),
+          jsx.jsx("span", { className: "balance-stats-card__value", title: value, children: value }),
+        ],
+      });
+    });
+
+    function UsageStatsPanel({ onClose, panelRef, style, closing }) {
+      const liveBalance = useBalance();
+      const [heatmapTooltip, setHeatmapTooltip] = react.useState(null);
+      const [state, setState] = react.useState(() => {
+        const cached = getCachedUsageStats();
+        return cached
+          ? { loading: false, data: cached, error: "" }
+          : { loading: true, data: null, error: "" };
+      });
+      react.useEffect(() => {
+        let disposed = false;
+        fetchUsageStats().then(
+          (data) => { if (!disposed) setState({ loading: false, data, error: "" }); },
+          (error) => {
+            if (disposed) return;
+            setState({ loading: false, data: null, error: error && error.message ? error.message : String(error) });
+          },
+        );
+        return () => { disposed = true; };
+      }, []);
+      react.useEffect(() => {
+        const onKeyDown = (event) => { if (event.key === "Escape") onClose(); };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+      }, [onClose]);
+
+      const data = state.data;
+      const stats = data && data.stats;
+      const days = stats && Array.isArray(stats.days) ? stats.days : [];
+      const showHeatmapTooltip = react.useCallback((event, label) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const viewportWidth = document.documentElement.clientWidth;
+        const center = rect.left + rect.width / 2;
+        const top = Math.max(12, rect.top - 7);
+        if (center < 162) {
+          setHeatmapTooltip({ label, align: "left", style: { left: Math.max(12, rect.left), top } });
+        } else if (center > viewportWidth - 162) {
+          setHeatmapTooltip({ label, align: "right", style: { right: Math.max(12, viewportWidth - rect.right), top } });
+        } else {
+          setHeatmapTooltip({ label, align: "center", style: { left: center, top } });
+        }
+      }, []);
+      const hideHeatmapTooltip = react.useCallback(() => setHeatmapTooltip(null), []);
+      const heatmap = react.useMemo(() => {
+        const cells = [];
+        const maxTokens = Math.max(0, ...days.map((day) => Number(day.totalTokens || 0)));
+        const firstDay = days[0] && days[0].date;
+        const leading = firstDay ? (new Date(firstDay + "T00:00:00Z").getUTCDay() + 6) % 7 : 0;
+        for (let i = 0; i < leading; i++) {
+          cells.push(jsx.jsx("span", { className: "balance-heatmap-cell balance-heatmap-cell--blank" }, "blank-" + i));
+        }
+        for (let dayIndex = 0; dayIndex < days.length; dayIndex++) {
+          const day = days[dayIndex];
+          const tokens = Number(day.totalTokens || 0);
+          const ratio = maxTokens > 0 ? tokens / maxTokens : 0;
+          const level = tokens === 0 ? 0 : ratio <= 0.25 ? 1 : ratio <= 0.5 ? 2 : ratio <= 0.75 ? 3 : 4;
+          const costText = "¥" + Number(day.cost || 0).toFixed(4);
+          const sessionsText = String(Number(day.sessions || 0));
+          const ariaLabel = day.date + "，消耗 " + formatTokens(tokens) + " Token，费用 " + costText + "，会话 " + sessionsText;
+          const tooltip = day.date + " · 消耗 " + formatTokens(tokens) + " Token · 费用 " + costText + " · 会话 " + sessionsText;
+          cells.push(jsx.jsx("button", {
+            type: "button",
+            tabIndex: -1,
+            className: "balance-heatmap-cell" + (level > 0 ? " balance-heatmap-cell--" + level : ""),
+            "aria-label": ariaLabel,
+            onMouseEnter: (event) => showHeatmapTooltip(event, tooltip),
+            onMouseLeave: hideHeatmapTooltip,
+            onFocus: (event) => showHeatmapTooltip(event, tooltip),
+            onBlur: hideHeatmapTooltip,
+          }, day.date));
+        }
+        return cells;
+      }, [days, hideHeatmapTooltip, showHeatmapTooltip]);
+      const balance = liveBalance.balance || (data && data.balance);
+      const total = stats && stats.total;
+      const balanceText = balance
+        ? String(balance.total_balance ?? "0.00") + " " + String(balance.currency || "CNY")
+        : "不可用";
+      const body = state.loading
+        ? jsx.jsx("div", { className: "balance-stats-loading", children: "正在汇总会话记录…" })
+        : state.error
+          ? jsx.jsx("div", { className: "balance-stats-error", children: state.error })
+          : jsx.jsxs(jsx.Fragment, {
+              children: [
+                !liveBalance.balance && data.balanceError ? jsx.jsx("div", { className: "balance-stats-error", children: "余额：" + data.balanceError }) : null,
+                jsx.jsxs("div", {
+                  className: "balance-stats-cards",
+                  children: [
+                    jsx.jsx(StatsCard, { label: "账户余额", value: balanceText }),
+                    jsx.jsx(StatsCard, { label: "90 天计费 Token", value: formatTokens(Number(total?.totalTokens || 0)) }),
+                    jsx.jsx(StatsCard, { label: "90 天估算费用", value: "¥" + Number(total?.cost || 0).toFixed(4) }),
+                    jsx.jsx(StatsCard, { label: "已扫描会话", value: String(stats?.scannedSessions || 0) }),
+                  ],
+                }),
+                jsx.jsxs("div", {
+                  className: "balance-stats-section-title",
+                  children: [
+                    jsx.jsx("span", { children: "近 90 天使用热力图" }),
+                    jsx.jsxs("span", {
+                      className: "balance-stats-legend",
+                      children: ["少", 0, 1, 2, 3, 4].map((item, index) => index === 0
+                        ? item
+                        : jsx.jsx("i", { className: "balance-heatmap-cell balance-heatmap-cell--" + item }, "legend-" + item)).concat(["多"]),
+                    }),
+                  ],
+                }),
+                jsx.jsx("div", { className: "balance-heatmap-wrap", children: jsx.jsx("div", { className: "balance-heatmap", children: heatmap }) }),
+                jsx.jsxs("div", {
+                  className: "balance-stats-footer",
+                  children: [
+                    jsx.jsx("span", {
+                      children: stats?.limited
+                        ? "为保证性能，仅统计最近 200 个会话；结果缓存 5 分钟。"
+                        : "按北京时间和实际模型峰谷价格估算；结果缓存 5 分钟。",
+                    }),
+                    jsx.jsx("a", {
+                      className: "balance-stats-link",
+                      href: "https://platform.deepseek.com/usage",
+                      target: "_blank",
+                      rel: "noreferrer",
+                      children: "查看官方用量",
+                    }),
+                  ],
+                }),
+              ],
+            });
+      return jsx.jsxs("section", {
+        ref: panelRef,
+        style,
+        className: "balance-stats-panel" + (closing ? " balance-stats-panel--closing" : ""),
+        role: "dialog",
+        "aria-label": "余额与使用统计",
+        children: [
+          jsx.jsxs("header", {
+            className: "balance-stats-header",
+            children: [
+              jsx.jsxs("div", {
+                children: [
+                  jsx.jsx("h2", { className: "balance-stats-title", children: "余额与使用统计" }),
+                  jsx.jsx("p", { className: "balance-stats-subtitle", children: "余额快捷菜单 · 双击打开 DeepSeek API 用量页" }),
+                ],
+              }),
+              jsx.jsx("button", { className: "balance-stats-close", type: "button", onClick: onClose, "aria-label": "关闭", children: "×" }),
+            ],
+          }),
+          body,
+          heatmapTooltip ? reactDom.createPortal(jsx.jsx("div", {
+            className: "balance-heatmap-tooltip balance-heatmap-tooltip--" + heatmapTooltip.align,
+            style: heatmapTooltip.style,
+            role: "tooltip",
+            children: heatmapTooltip.label,
+          }), document.body) : null,
+        ],
+      });
+    }
+
+    function WalletIcon() {
+      return jsx.jsxs("svg", {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          jsx.jsx("path", { d: "M21 12V7H5a2 2 0 0 1 0-4h14v4" }),
+          jsx.jsx("path", { d: "M3 5v14a2 2 0 0 0 2 2h16v-5" }),
+          jsx.jsx("path", { d: "M18 12a2 2 0 0 0 0 4h4v-4Z" }),
+        ],
+      });
+    }
+
+    // ─── 余额显示：单击统计，双击 DeepSeek 用量页，右键刷新 ─────────────
     function BalanceFooter({ wide }) {
       const state = useBalance();
-      const openUsagePage = (e) => { e && e.preventDefault(); window.open("https://platform.deepseek.com/usage", "_blank", "noopener"); };
+      const [statsOpen, setStatsOpen] = react.useState(false);
+      const [statsClosing, setStatsClosing] = react.useState(false);
+      const [statsPosition, setStatsPosition] = react.useState({ left: 12, bottom: 56, width: 460 });
+      const clickTimer = react.useRef(null);
+      const closeTimer = react.useRef(null);
+      const anchorRef = react.useRef(null);
+      const panelRef = react.useRef(null);
+      react.useEffect(() => () => {
+        if (clickTimer.current !== null) clearTimeout(clickTimer.current);
+        if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+      }, []);
+      const closeStats = react.useCallback(() => {
+        if (!statsOpen || statsClosing) return;
+        setStatsClosing(true);
+        if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+        closeTimer.current = setTimeout(() => {
+          closeTimer.current = null;
+          setStatsOpen(false);
+          setStatsClosing(false);
+        }, 140);
+      }, [statsOpen, statsClosing]);
+      react.useEffect(() => {
+        if (!statsOpen) return undefined;
+        const closeOnOutsideClick = (event) => {
+          if (anchorRef.current && anchorRef.current.contains(event.target)) return;
+          if (panelRef.current && panelRef.current.contains(event.target)) return;
+          closeStats();
+        };
+        const closeOnResize = () => closeStats();
+        document.addEventListener("mousedown", closeOnOutsideClick);
+        window.addEventListener("resize", closeOnResize);
+        return () => {
+          document.removeEventListener("mousedown", closeOnOutsideClick);
+          window.removeEventListener("resize", closeOnResize);
+        };
+      }, [statsOpen, closeStats]);
+      const openStats = (event) => {
+        if (event && typeof event.preventDefault === "function") event.preventDefault();
+        if (clickTimer.current !== null) clearTimeout(clickTimer.current);
+        if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+        closeTimer.current = null;
+        setStatsClosing(false);
+        const trigger = event && event.currentTarget;
+        if (trigger && typeof trigger.getBoundingClientRect === "function") {
+          const rect = trigger.getBoundingClientRect();
+          const width = Math.max(1, Math.min(460, window.innerWidth - 24));
+          const desiredLeft = wide ? rect.right + 8 : rect.left;
+          const left = Math.max(12, Math.min(desiredLeft, window.innerWidth - width - 12));
+          const bottom = wide
+            ? Math.max(12, window.innerHeight - rect.bottom)
+            : Math.max(12, window.innerHeight - rect.top + 8);
+          setStatsPosition({ left, bottom, width });
+        }
+        clickTimer.current = setTimeout(() => {
+          clickTimer.current = null;
+          setStatsClosing(false);
+          setStatsOpen(true);
+        }, 230);
+      };
+      const openUsagePage = (event) => {
+        if (event && typeof event.preventDefault === "function") event.preventDefault();
+        if (clickTimer.current !== null) clearTimeout(clickTimer.current);
+        clickTimer.current = null;
+        if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+        closeTimer.current = null;
+        setStatsClosing(false);
+        setStatsOpen(false);
+        window.open("https://platform.deepseek.com/usage", "_blank", "noopener");
+      };
+      const interactions = {
+        onClick: openStats,
+        onDoubleClick: openUsagePage,
+        onContextMenu: onBalanceContextMenu,
+        title: "单击查看余额与使用统计，双击打开 DeepSeek API 用量页，右键刷新",
+      };
+      const withPanel = (node) => jsx.jsxs("div", {
+        ref: anchorRef,
+        className: "balance-stats-anchor balance-stats-anchor--" + (wide ? "wide" : "compact"),
+        children: [
+          node,
+          statsOpen ? reactDom.createPortal(jsx.jsx(UsageStatsPanel, {
+            onClose: closeStats,
+            panelRef,
+            style: statsPosition,
+            closing: statsClosing,
+          }), document.body) : null,
+        ],
+      });
 
       if (!wide) {
-        // 收起态：悬浮 FAB（原样保留）
         if (state.status === "error" || !state.balance) return null;
         const b = state.balance;
         const total = Number.parseFloat(b.total_balance ?? "0");
@@ -331,34 +681,23 @@ window.__ModuleLoader__.load({
             children: "去充值",
           });
         }
-        const currency = b.currency || "CNY";
-        const detailText = "总余额 " + b.total_balance + " " + currency + " · 充值余额 " + b.topped_up_balance + " " + currency;
-        return jsx.jsx("a", {
+        return withPanel(jsx.jsx("a", {
           className: "balance-fab",
           href: "https://platform.deepseek.com/usage",
-          target: "_blank",
-          rel: "noreferrer",
-          onContextMenu: onBalanceContextMenu,
+          ...interactions,
           children: "¥" + b.total_balance,
-        });
+        }));
       }
 
-      // 展开态：底部文字（加载中/失败/去充值/正常）
       if (state.status === "error") {
-        return jsx.jsx("div", {
+        return withPanel(jsx.jsx("div", {
           className: "balance-footer",
-          title: "余额查询失败：" + state.error,
-          onContextMenu: onBalanceContextMenu,
+          ...interactions,
           children: jsx.jsx("span", { className: "balance-footer__error", children: "余额查询失败" }),
-        });
+        }));
       }
-
       if (!state.balance) {
-        return jsx.jsx("div", {
-          className: "balance-footer",
-          onContextMenu: onBalanceContextMenu,
-          children: "余额加载中…",
-        });
+        return withPanel(jsx.jsx("div", { className: "balance-footer", ...interactions, children: "余额加载中…" }));
       }
 
       const b = state.balance;
@@ -366,96 +705,47 @@ window.__ModuleLoader__.load({
       const depleted = b.is_available === false || !Number.isFinite(total) || total <= 0;
       const currency = b.currency || "CNY";
       const totalText = b.total_balance + " " + currency;
-      const detailText = "总余额 " + totalText + " · 充值余额 " + b.topped_up_balance + " " + currency;
-      const period = currentPeriod();
-      const low = total > 0 && total < 10;
-
-      // 金额胶囊：正常显示 金额•时段（语义色）；没余额显示 0（红色），并追加"去充值"胶囊
-      // 没余额：保留图标+"余额"字样，去掉具体金额，右侧只显示"去充值"按钮
       if (depleted) {
-        return jsx.jsx("div", {
+        return withPanel(jsx.jsxs("div", {
           className: "balance-footer",
-          onContextMenu: onBalanceContextMenu,
+          ...interactions,
           children: [
-            jsx.jsx("span", {
-              className: "balance-footer__icon",
-              children: jsx.jsxs("svg", {
-                width: 16,
-                height: 16,
-                viewBox: "0 0 24 24",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg",
-                stroke: "currentColor",
-                strokeWidth: 2,
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                "aria-hidden": "true",
-                children: [
-                  jsx.jsx("path", { d: "M21 12V7H5a2 2 0 0 1 0-4h14v4" }),
-                  jsx.jsx("path", { d: "M3 5v14a2 2 0 0 0 2 2h16v-5" }),
-                  jsx.jsx("path", { d: "M18 12a2 2 0 0 0 0 4h4v-4Z" }),
-                ],
-              }),
-            }),
+            jsx.jsx("span", { className: "balance-footer__icon", children: jsx.jsx(WalletIcon, {}) }),
             jsx.jsx("span", { className: "balance-footer__label", children: "余额" }),
             jsx.jsx("a", {
               className: "balance-footer__topup",
               href: "https://platform.deepseek.com/top_up",
               target: "_blank",
               rel: "noreferrer",
+              onClick: (event) => event.stopPropagation(),
+              onDoubleClick: (event) => event.stopPropagation(),
               onContextMenu: onBalanceContextMenu,
               children: "去充值",
             }),
           ],
-        });
+        }));
       }
 
-      const valueClass = low ? " balance-footer__value--low" : " balance-footer__value--healthy";
-      const valueChildren = [
-        totalText,
-        " • ",
-        state.refreshing
-          ? jsx.jsx("span", { className: "balance-footer__period-inline balance-footer__period-inline--refreshing", children: "刷新中…" })
-          : jsx.jsx("span", { className: "balance-footer__period-inline balance-footer__period-inline--" + period, children: period === "peak" ? "高峰" : "空闲" }),
-      ];
-      const inner = [
-        jsx.jsx("span", {
-          className: "balance-footer__icon",
-          children: jsx.jsxs("svg", {
-            width: 16,
-            height: 16,
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            stroke: "currentColor",
-            strokeWidth: 2,
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            "aria-hidden": "true",
+      const period = currentPeriod();
+      const low = total > 0 && total < 10;
+      return withPanel(jsx.jsxs("div", {
+        className: "balance-footer",
+        ...interactions,
+        children: [
+          jsx.jsx("span", { className: "balance-footer__icon", children: jsx.jsx(WalletIcon, {}) }),
+          jsx.jsx("span", { className: "balance-footer__label", children: "余额" }),
+          jsx.jsxs("span", {
+            className: "balance-footer__value" + (low ? " balance-footer__value--low" : " balance-footer__value--healthy"),
             children: [
-              jsx.jsx("path", { d: "M21 12V7H5a2 2 0 0 1 0-4h14v4" }),
-              jsx.jsx("path", { d: "M3 5v14a2 2 0 0 0 2 2h16v-5" }),
-              jsx.jsx("path", { d: "M18 12a2 2 0 0 0 0 4h4v-4Z" }),
+              totalText,
+              " • ",
+              state.refreshing
+                ? jsx.jsx("span", { className: "balance-footer__period-inline balance-footer__period-inline--refreshing", children: "刷新中…" })
+                : jsx.jsx("span", { className: "balance-footer__period-inline balance-footer__period-inline--" + period, children: period === "peak" ? "高峰" : "空闲" }),
             ],
           }),
-        }),
-        jsx.jsx("span", {
-          className: "balance-footer__label",
-          children: "余额",
-        }),
-        jsx.jsx("span", {
-          className: "balance-footer__value" + valueClass,
-          onClick: openUsagePage,
-          onContextMenu: onBalanceContextMenu,
-          title: "打开 DeepSeek 用量页",
-          children: valueChildren,
-        }),
-      ];
-      return jsx.jsx("div", {
-        className: "balance-footer",
-        onContextMenu: onBalanceContextMenu,
-        children: inner,
-      });
+        ],
+      }));
     }
 
     // ─── 当前会话消耗：输入区 dock ──────────────────────────────────────────

package/lib/index.js

@@ -284,6 +284,150 @@ function estimateCost(usage, pricing) {
   return costOf(usage.peak) * 2 + costOf(usage.offpeak);
 }
 
+const STATS_DAYS = 90;
+const STATS_MAX_SESSIONS = 200;
+const STATS_CACHE_MS = 5 * 60 * 1000;
+
+function beijingDayKey(timeMs) {
+  return new Date(Number(timeMs) + 8 * 60 * 60 * 1000).toISOString().slice(0, 10);
+}
+
+function emptyTokenBucket() {
+  return { inputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 };
+}
+
+function addTokenUsage(target, usage) {
+  target.inputTokens += usage.inputTokens ?? 0;
+  target.outputTokens += usage.outputTokens ?? 0;
+  target.cacheReadTokens += usage.cacheReadTokens ?? 0;
+  target.cacheWriteTokens += usage.cacheWriteTokens ?? 0;
+}
+
+function tokenTotal(usage) {
+  return usage.inputTokens + usage.outputTokens + usage.cacheReadTokens + usage.cacheWriteTokens;
+}
+
+/** 按北京时间把一个会话的最终 assistant/message usage 聚合到每日统计。 */
+function collectDailyUsage(events, config, fallbackModel, cutoffMs, days, sessionId) {
+  const switches = collectModelSwitches(events);
+  const fallback = fallbackModel || "deepseek-v4-flash";
+  const latestByStep = new Map();
+  for (const event of events ?? []) {
+    if (event.type !== "assistant/message") continue;
+    const usage = event.data?.usage;
+    const turn = event.data?.turn;
+    const step = event.data?.step;
+    if (usage == null || turn == null || step == null) continue;
+    latestByStep.set(`${turn}/${step}`, { usage, time: Number(event.time ?? 0) });
+  }
+  for (const { usage, time } of latestByStep.values()) {
+    if (!Number.isFinite(time) || time < cutoffMs) continue;
+    const key = beijingDayKey(time);
+    let day = days.get(key);
+    if (day == null) {
+      day = { date: key, ...emptyTokenBucket(), totalTokens: 0, cost: 0, sessionIds: new Set() };
+      days.set(key, day);
+    }
+    addTokenUsage(day, usage);
+    day.totalTokens += tokenTotal({
+      inputTokens: usage.inputTokens ?? 0,
+      outputTokens: usage.outputTokens ?? 0,
+      cacheReadTokens: usage.cacheReadTokens ?? 0,
+      cacheWriteTokens: usage.cacheWriteTokens ?? 0,
+    });
+    day.sessionIds.add(sessionId);
+    const model = modelAtTime(switches, time) || fallback;
+    const bucket = { peak: emptyTokenBucket(), offpeak: emptyTokenBucket() };
+    addTokenUsage(isPeakAt(time, config) ? bucket.peak : bucket.offpeak, usage);
+    day.cost += estimateCost(bucket, resolvePricing(config, model));
+  }
+}
+
+function recentDayKeys(days, now = Date.now()) {
+  const result = [];
+  const beijingNow = now + 8 * 60 * 60 * 1000;
+  const current = new Date(beijingNow);
+  current.setUTCHours(0, 0, 0, 0);
+  for (let offset = days - 1; offset >= 0; offset--) {
+    result.push(new Date(current.getTime() - offset * 24 * 60 * 60 * 1000).toISOString().slice(0, 10));
+  }
+  return result;
+}
+
+async function buildUsageStats(ctx, config) {
+  const persistence = typeof ctx.get === "function" ? ctx.get("sessionPersistence") : void 0;
+  if (persistence == null || typeof persistence.list !== "function" || typeof persistence.inspect !== "function") {
+    throw new Error("会话持久化服务不可用");
+  }
+  const now = Date.now();
+  const cutoffMs = now - (STATS_DAYS - 1) * 24 * 60 * 60 * 1000;
+  const headers = await persistence.list();
+  const selected = [...headers]
+    .filter((header) => header && typeof header.id === "string")
+    .sort((a, b) => Number(b.createdAt ?? 0) - Number(a.createdAt ?? 0))
+    .slice(0, STATS_MAX_SESSIONS);
+  const daily = new Map();
+  let cursor = 0;
+  let scannedSessions = 0;
+  let failedSessions = 0;
+  const worker = async () => {
+    while (cursor < selected.length) {
+      const header = selected[cursor++];
+      try {
+        const inspected = await persistence.inspect(header.id);
+        collectDailyUsage(
+          inspected?.events ?? [],
+          config,
+          detectModel({ requestHeader: () => void 0, requestContext: () => void 0, events: inspected?.events ?? [] }),
+          cutoffMs,
+          daily,
+          header.id,
+        );
+        scannedSessions++;
+      } catch {
+        failedSessions++;
+      }
+    }
+  };
+  await Promise.all(Array.from({ length: Math.min(3, selected.length) }, () => worker()));
+
+  const rows = recentDayKeys(STATS_DAYS, now).map((date) => {
+    const day = daily.get(date);
+    if (day == null) {
+      return { date, ...emptyTokenBucket(), totalTokens: 0, cost: 0, sessions: 0 };
+    }
+    return {
+      date,
+      inputTokens: day.inputTokens,
+      outputTokens: day.outputTokens,
+      cacheReadTokens: day.cacheReadTokens,
+      cacheWriteTokens: day.cacheWriteTokens,
+      totalTokens: day.totalTokens,
+      cost: day.cost,
+      sessions: day.sessionIds.size,
+    };
+  });
+  const total = rows.reduce((acc, day) => {
+    acc.inputTokens += day.inputTokens;
+    acc.outputTokens += day.outputTokens;
+    acc.cacheReadTokens += day.cacheReadTokens;
+    acc.cacheWriteTokens += day.cacheWriteTokens;
+    acc.totalTokens += day.totalTokens;
+    acc.cost += day.cost;
+    return acc;
+  }, { ...emptyTokenBucket(), totalTokens: 0, cost: 0 });
+  return {
+    days: rows,
+    total,
+    rangeDays: STATS_DAYS,
+    scannedSessions,
+    failedSessions,
+    availableSessions: headers.length,
+    limited: headers.length > selected.length,
+    generatedAt: now,
+  };
+}
+
 /** 汇总某会话的所有子代理后代会话的 usage（跨时段精确计费，与主会话分开）。
  *  @param ctx DSH 上下文（用于 subagents 服务 + inspectApiRemoteSession）
  *  @param sessionId 父会话 id
@@ -403,6 +547,8 @@ function writeJson(res, status, payload) {
 }
 
 export function apply(ctx, config = {}) {
+  let statsCache = { expiresAt: 0, value: null };
+
   // 1) /balance 命令：保留命令行查询入口
   ctx.inject(["commands"], (commandCtx) => {
     commandCtx.commands.register({
@@ -457,17 +603,46 @@ export function apply(ctx, config = {}) {
         // 可选 ?session= 传入会话 id，服务端返回该会话的分时段 usage（跨时段精确计费用）
         let model = "";
         let sessionParam = "";
+        let wantStats = false;
         try {
           const search = new URL(req.url, "http://localhost").searchParams;
           model = search.get("model") ?? "";
           sessionParam = search.get("session") ?? "";
+          wantStats = search.get("stats") === "1";
         } catch {
           model = "";
           sessionParam = "";
+          wantStats = false;
+        }
+        let stats = null;
+        let statsError = "";
+        if (wantStats) {
+          try {
+            if (statsCache.value == null || statsCache.expiresAt <= Date.now()) {
+              statsCache = {
+                value: await buildUsageStats(httpCtx, config),
+                expiresAt: Date.now() + STATS_CACHE_MS,
+              };
+            }
+            stats = statsCache.value;
+          } catch (error) {
+            statsError = error instanceof Error ? error.message : String(error);
+          }
         }
         const apiKey = await resolveApiKey(ctx, config);
         if (apiKey === "") {
-          writeJson(res, 200, { ok: false, error: "未设置 DEEPSEEK_API_KEY" });
+          if (wantStats) {
+            writeJson(res, 200, {
+              ok: true,
+              balance: null,
+              balanceError: "未设置 DEEPSEEK_API_KEY",
+              pricing: resolvePricing(config, model),
+              stats,
+              statsError,
+            });
+          } else {
+            writeJson(res, 200, { ok: false, error: "未设置 DEEPSEEK_API_KEY" });
+          }
           return;
         }
         // 按 session id 取会话并分时段汇总 usage（拿不到则返回 null，客户端回退用本地投影）
@@ -510,10 +685,23 @@ export function apply(ctx, config = {}) {
             model: effectiveModel,
             usage,
             subagentUsage,
+            stats,
+            statsError,
           });
         } catch (error) {
           const message = error instanceof Error ? error.message : String(error);
-          writeJson(res, 200, { ok: false, error: message });
+          if (wantStats) {
+            writeJson(res, 200, {
+              ok: true,
+              balance: null,
+              balanceError: message,
+              pricing: resolvePricing(config, effectiveModel),
+              stats,
+              statsError,
+            });
+          } else {
+            writeJson(res, 200, { ok: false, error: message });
+          }
         }
       },
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balance-dsh",
-  "version": "1.0.2",
+  "version": "1.0.8",
   "description": "查询 DeepSeek 余额并显示当前会话 token 消耗。DeepSeek 账户余额 + 会话 token/费用显示，含高峰/空闲峰谷计费。",
   "author": "Rannist",
   "type": "module",