balance-dsh 1.1.0 → 1.2.0

package/lib/client.js

@@ -47,24 +47,41 @@ window.__ModuleLoader__.load({
 .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-layer{box-sizing:border-box;position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--dsw-alias-bg-mask-1,rgba(0,0,0,.24));backdrop-filter:var(--dsw-mask-blur,blur(2px));-webkit-backdrop-filter:var(--dsw-mask-blur,blur(2px));animation:balance-stats-backdrop-in .16s var(--ds-ease-in-out,ease-out) both}
+.balance-stats-layer--closing{pointer-events:none;animation:balance-stats-backdrop-out .14s var(--ds-ease-in-out,ease-in) both}
+.balance-stats-panel{box-sizing:border-box;position:relative;z-index:10000;width:min(800px,100%);max-height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;padding:0 0 24px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-base,#fff));border:0;border-radius:24px;box-shadow:var(--dsw-elevation-prominent,0 14px 36px rgba(0,0,0,.24));transform-origin:center center;will-change:transform,opacity;contain:layout style;animation:balance-stats-panel-in .26s var(--ds-ease-in-out,ease-out) .04s both;--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2,rgba(127,127,127,.35));--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2,rgba(127,127,127,.55))}
+/* 滚动条对齐 DSH 设置窗口：宽度 12px，滑块靠 transparent 边框内缩到 4px（永远不贴 24px 圆角），
+   轨道上下各留 10px，颜色沿用 DSH 自己的 --dsh-scrollbar-thumb 变量。 */
+.balance-stats-panel::-webkit-scrollbar{width:12px;height:12px}
+.balance-stats-panel::-webkit-scrollbar-track{background:transparent;margin:10px}
+.balance-stats-panel::-webkit-scrollbar-thumb{border:4px solid transparent;background-clip:padding-box;border-radius:6px;background-color:var(--dsh-scrollbar-thumb)}
+.balance-stats-panel::-webkit-scrollbar-thumb:hover{background-color:var(--dsh-scrollbar-thumb-hover)}
+.balance-stats-panel::-webkit-scrollbar-corner{background:transparent}
+@keyframes balance-stats-backdrop-in{from{opacity:0}to{opacity:1}}
+@keyframes balance-stats-backdrop-out{from{opacity:1}to{opacity:0}}
 .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-in{from{opacity:0;transform:translateY(18px) scale(.955)}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-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:22px 14px 12px 24px}
+.balance-stats-body{display:flex;flex-direction:column;min-width:0;padding:0 24px}
+.balance-stats-title{margin:0;font-size:16px;line-height:24px;font-weight:500}
 .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{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;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-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:8px}
+.balance-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
+/* 分组数为奇数时（「按模型」「时段拆分」条件渲染可能缺席），最后一个横跨整行，避免半空行 */
+.balance-stats-grid>:last-child:nth-child(odd){grid-column:1/-1}
+.balance-stats-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;min-width:0}
+.balance-stats-card{display:flex;flex-direction:column;justify-content:center;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-heatmap-card{box-sizing:border-box;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 .22s var(--ds-ease-in-out,ease-out) .08s both}
+.balance-stats-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:12px;font-weight:600}
 .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%}
@@ -84,8 +101,16 @@ window.__ModuleLoader__.load({
 .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}}
+.balance-stats-group{box-sizing:border-box;margin-bottom: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 .22s var(--ds-ease-in-out,ease-out) both}
+.balance-stats-group__title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px;color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600}
+.balance-stats-group__hint{color:var(--dsw-alias-label-secondary);font-weight:400;font-variant-numeric:tabular-nums}
+.balance-stats-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;padding:6px 0;font-size:12px}
+.balance-stats-row+.balance-stats-row{border-top:1px solid var(--dsw-alias-border-l2,rgba(127,127,127,.16))}
+.balance-stats-row__name{min-width:0;overflow:hidden;color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap}
+.balance-stats-row__value{flex:none;text-align:right;color:var(--dsw-alias-label-primary);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
+@media(max-width:900px){.balance-stats-top{grid-template-columns:minmax(0,1fr)}.balance-stats-grid{grid-template-columns:minmax(0,1fr)}}
+@media(max-width:760px){.balance-stats-layer{padding:10px}}
+@media(prefers-reduced-motion:reduce){.balance-stats-panel,.balance-stats-panel--closing,.balance-stats-layer,.balance-stats-layer--closing,.balance-stats-card,.balance-stats-group,.balance-stats-heatmap-card{animation:none}.balance-heatmap-cell{transition:none}}
 /* ── 展开态底部一行：[设置齿轮][余额胶囊]，余额在设置右边 ──
    全部使用稳定锚点，不依赖 CSS Modules hash 类名（DSH 升级后仍有效）：
    - wide 态特征：底部存在 .balance-footer / .balance-topup（收起态渲染 position:fixed 的 .balance-fab，不影响）
@@ -389,17 +414,71 @@ window.__ModuleLoader__.load({
       return usageStatsInFlight;
     }
 
+    /** 定价表内部键 -> 展示名 */
+    function modelLabel(key) {
+      if (key === "deepseek-v4-flash") return "Flash";
+      if (key === "deepseek-v4-pro") return "Pro";
+      if (key === "deepseek-chat") return "Chat";
+      if (key === "deepseek-reasoner") return "Reasoner";
+      return String(key || "未知");
+    }
+
+    /** token 桶求和（服务端统计返回的 peak / offpeak 桶） */
+    function bucketTokens(bucket) {
+      if (!bucket) return 0;
+      return (
+        Number(bucket.inputTokens || 0) +
+        Number(bucket.outputTokens || 0) +
+        Number(bucket.cacheReadTokens || 0) +
+        Number(bucket.cacheWriteTokens || 0)
+      );
+    }
+
+    /** 概览卡片。数值已完整展示，**不挂原生 `title`**——浏览器系统灰框与 DSH 主题不一致。 */
     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 }),
+          jsx.jsx("span", { className: "balance-stats-card__value", children: value }),
+        ],
+      });
+    });
+
+    /** 明细行：左侧名称、右侧数值（两端对齐）。
+     *  曾经画过占比条，但各分组的基准并不统一（Token 构成按 token、按模型/时段按费用、
+     *  近期消耗按 90 天总额），同一屏三种尺子无法横向比较，而数值本身已表达量级，
+     *  条只会让人猜「这到底占谁的比例」，故去掉。 */
+    const StatsRow = react.memo(function StatsRow({ name, value }) {
+      return jsx.jsxs("div", {
+        className: "balance-stats-row",
+        children: [
+          jsx.jsx("span", { className: "balance-stats-row__name", children: name }),
+          jsx.jsx("span", { className: "balance-stats-row__value", children: value }),
         ],
       });
     });
 
-    function UsageStatsPanel({ onClose, panelRef, style, closing }) {
+    /** 明细分组：小标题（可带右侧提示） + 若干明细行。
+     *  `index` 只用于卡片逐个浮现的阶梯动画延迟——面板先浮现、各卡片随后依次入场。 */
+    function StatsGroup({ title, hint, children, index = 0 }) {
+      return jsx.jsxs("div", {
+        className: "balance-stats-group",
+        style: { animationDelay: (0.08 + index * 0.035).toFixed(3) + "s" },
+        children: [
+          jsx.jsxs("div", {
+            className: "balance-stats-group__title",
+            children: [
+              jsx.jsx("span", { children: title }),
+              hint ? jsx.jsx("span", { className: "balance-stats-group__hint", children: hint }) : null,
+            ],
+          }),
+          children,
+        ],
+      });
+    }
+
+    function UsageStatsPanel({ onClose, panelRef, closing }) {
       const liveBalance = useBalance();
       const [heatmapTooltip, setHeatmapTooltip] = react.useState(null);
       const [state, setState] = react.useState(() => {
@@ -477,6 +556,58 @@ window.__ModuleLoader__.load({
       const balanceText = balance
         ? String(balance.total_balance ?? "0.00") + " " + String(balance.currency || "CNY")
         : "不可用";
+
+      // —— 派生统计：全部对旧缓存 / 缺失字段容错（数值缺失按 0、数组缺失按空） ——
+      const num = (v) => Number(v || 0);
+      const derived = react.useMemo(() => {
+        const t = total || {};
+        const dayList = Array.isArray(days) ? days : [];
+        const activeDays = dayList.filter((d) => num(d.totalTokens) > 0);
+        const sumRange = (n) =>
+          dayList.slice(-n).reduce(
+            (acc, d) => {
+              acc.tokens += num(d.totalTokens);
+              acc.cost += num(d.cost);
+              return acc;
+            },
+            { tokens: 0, cost: 0 },
+          );
+        const today = dayList.length > 0 ? dayList[dayList.length - 1] : null;
+        const peakDay = activeDays.reduce(
+          (best, d) => (best == null || num(d.totalTokens) > num(best.totalTokens) ? d : best),
+          null,
+        );
+        const inputTokens = num(t.inputTokens);
+        const cacheReadTokens = num(t.cacheReadTokens);
+        const cacheWriteTokens = num(t.cacheWriteTokens);
+        const outputTokens = num(t.outputTokens);
+        const billedInput = inputTokens + cacheReadTokens + cacheWriteTokens;
+        const activeCount = activeDays.length;
+        return {
+          activeCount,
+          todayTokens: num(today && today.totalTokens),
+          todayCost: num(today && today.cost),
+          week: sumRange(7),
+          month: sumRange(30),
+          avgTokens: activeCount > 0 ? num(t.totalTokens) / activeCount : 0,
+          avgCost: activeCount > 0 ? num(t.cost) / activeCount : 0,
+          peakDay,
+          inputTokens,
+          cacheReadTokens,
+          cacheWriteTokens,
+          outputTokens,
+          hitRate: billedInput > 0 ? cacheReadTokens / billedInput : 0,
+          byModel: Array.isArray(t.byModel) ? t.byModel.filter((m) => m && num(m.totalTokens) > 0) : [],
+          peakTokens: bucketTokens(t.peak),
+          offpeakTokens: bucketTokens(t.offpeak),
+          peakCost: num(t.peakCost),
+          offpeakCost: num(t.offpeakCost),
+        };
+      }, [days, total]);
+      const fmtCost = (v) => "¥" + num(v).toFixed(4);
+      const denomCost = num(total && total.cost) > 0 ? num(total.cost) : 1;
+      const rangeDays = Number(stats && stats.rangeDays) || 90;
+
       const body = state.loading
         ? jsx.jsx("div", { className: "balance-stats-loading", children: "正在汇总会话记录…" })
         : state.error
@@ -485,34 +616,127 @@ window.__ModuleLoader__.load({
               children: [
                 !liveBalance.balance && data.balanceError ? jsx.jsx("div", { className: "balance-stats-error", children: "余额：" + data.balanceError }) : null,
                 jsx.jsxs("div", {
-                  className: "balance-stats-cards",
+                  className: "balance-stats-top",
                   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-cards",
+                      children: [
+                        jsx.jsx(StatsCard, { label: "账户余额", value: balanceText }),
+                        jsx.jsx(StatsCard, { label: "90 天估算费用", value: fmtCost(total && total.cost) }),
+                        jsx.jsx(StatsCard, { label: "90 天计费 Token", value: formatTokens(Number(total?.totalTokens || 0)) }),
+                        jsx.jsx(StatsCard, { label: "活跃天数", value: derived.activeCount + " / " + rangeDays + " 天" }),
+                      ],
+                    }),
+                    jsx.jsxs("div", {
+                      className: "balance-stats-heatmap-card",
+                      children: [
+                        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-section-title",
+                  className: "balance-stats-grid",
                   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.jsxs(StatsGroup, {
+                      index: 0,
+                      title: "Token 构成",
+                      hint: "缓存命中率 " + (derived.hitRate * 100).toFixed(1) + "%",
+                      children: [
+                        jsx.jsx(StatsRow, { name: "未缓存输入", value: formatTokens(derived.inputTokens)}),
+                        jsx.jsx(StatsRow, { name: "缓存读取", value: formatTokens(derived.cacheReadTokens)}),
+                        jsx.jsx(StatsRow, { name: "缓存写入", value: formatTokens(derived.cacheWriteTokens)}),
+                        jsx.jsx(StatsRow, { name: "输出", value: formatTokens(derived.outputTokens)}),
+                      ],
                     }),
-                  ],
-                }),
-                jsx.jsx("div", { className: "balance-heatmap-wrap", children: jsx.jsx("div", { className: "balance-heatmap", children: heatmap }) }),
+                    derived.byModel.length > 0
+                      ? jsx.jsxs(StatsGroup, {
+                          index: 1,
+                          title: "按模型",
+                          children: derived.byModel.map((item) =>
+                            jsx.jsx(
+                              StatsRow,
+                              {
+                                name: modelLabel(item.model),
+                                value: fmtCost(item.cost) + " · " + formatTokens(Number(item.totalTokens || 0)),
+                              },
+                              "model-" + item.model,
+                            )),
+                        })
+                      : null,
+                    derived.peakTokens > 0 || derived.offpeakTokens > 0
+                      ? jsx.jsxs(StatsGroup, {
+                          index: 2,
+                          title: "时段拆分",
+                          hint: "高峰占 " + ((derived.peakCost / denomCost) * 100).toFixed(0) + "%",
+                          children: [
+                            jsx.jsx(StatsRow, {
+                              name: "高峰（×2）",
+                              value: fmtCost(derived.peakCost) + " · " + formatTokens(derived.peakTokens),
+                            }),
+                            jsx.jsx(StatsRow, {
+                              name: "空闲",
+                              value: fmtCost(derived.offpeakCost) + " · " + formatTokens(derived.offpeakTokens),
+                            }),
+                          ],
+                        })
+                      : null,
+                    jsx.jsxs(StatsGroup, {
+                      index: 3,
+                      title: "近期消耗",
+                      children: [
+                        jsx.jsx(StatsRow, {
+                          name: "今日",
+                          value: formatTokens(derived.todayTokens) + " · " + fmtCost(derived.todayCost),
+                        }),
+                        jsx.jsx(StatsRow, {
+                          name: "近 7 天",
+                          value: formatTokens(derived.week.tokens) + " · " + fmtCost(derived.week.cost),
+                        }),
+                        jsx.jsx(StatsRow, {
+                          name: "近 30 天",
+                          value: formatTokens(derived.month.tokens) + " · " + fmtCost(derived.month.cost),
+                        }),
+                      ],
+                    }),
+                    jsx.jsxs(StatsGroup, {
+                      index: 4,
+                      title: "日均与峰值",
+                      children: [
+                        // 日均 = 总额 / 活跃天，没有「占比」语义，因此不画条（否则是条空轨道）
+                        jsx.jsx(StatsRow, {
+                          name: "日均（按活跃天）",
+                          value: formatTokens(derived.avgTokens) + " · " + fmtCost(derived.avgCost),
+                        }),
+                        jsx.jsx(StatsRow, {
+                          name: derived.peakDay ? "峰值日 " + derived.peakDay.date : "峰值日",
+                          value: derived.peakDay
+                            ? formatTokens(Number(derived.peakDay.totalTokens || 0)) + " · " + fmtCost(derived.peakDay.cost)
+                            : "—",
+                        }),
+                      ],
+                    }),
+                ] }),
                 jsx.jsxs("div", {
                   className: "balance-stats-footer",
                   children: [
                     jsx.jsx("span", {
-                      children: stats?.limited
-                        ? "为保证性能，仅统计最近 200 个会话；结果缓存 5 分钟。"
-                        : "按北京时间和实际模型峰谷价格估算；结果缓存 5 分钟。",
+                      children:
+                        "已扫描 " + String(stats?.scannedSessions || 0) + " 个会话" +
+                        (stats?.limited ? "（为保证性能仅取最近 200 个）" : "") +
+                        "；按北京时间和实际模型峰谷价格估算，结果缓存 5 分钟。",
                     }),
                     jsx.jsx("a", {
                       className: "balance-stats-link",
@@ -527,7 +751,6 @@ window.__ModuleLoader__.load({
             });
       return jsx.jsxs("section", {
         ref: panelRef,
-        style,
         className: "balance-stats-panel" + (closing ? " balance-stats-panel--closing" : ""),
         role: "dialog",
         "aria-label": "余额与使用统计",
@@ -544,7 +767,7 @@ window.__ModuleLoader__.load({
               jsx.jsx("button", { className: "balance-stats-close", type: "button", onClick: onClose, "aria-label": "关闭", children: "×" }),
             ],
           }),
-          body,
+          jsx.jsx("div", { className: "balance-stats-body", children: body }),
           heatmapTooltip ? reactDom.createPortal(jsx.jsx("div", {
             className: "balance-heatmap-tooltip balance-heatmap-tooltip--" + heatmapTooltip.align,
             style: heatmapTooltip.style,
@@ -580,10 +803,10 @@ window.__ModuleLoader__.load({
       const state = useBalance();
       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 layerRef = react.useRef(null);
       const panelRef = react.useRef(null);
       react.useEffect(() => () => {
         if (clickTimer.current !== null) clearTimeout(clickTimer.current);
@@ -599,38 +822,17 @@ window.__ModuleLoader__.load({
           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]);
+      // 点击遮罩（即 layer 自身）关闭；点击面板内部不关闭。
+      // 窗口缩放不再关闭面板（居中布局会自适应，旧实现是锚定按钮需要重算位置）。
+      const handleBackdropClick = (event) => {
+        if (event.target === layerRef.current) 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);
@@ -647,22 +849,34 @@ window.__ModuleLoader__.load({
         setStatsOpen(false);
         window.open("https://platform.deepseek.com/usage", "_blank", "noopener");
       };
+      // 余额元素的交互。悬停提示不用原生 title，统一走主题化浮层（见 withPanel）。
       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,
+          // 悬停提示走 DSH 主题化浮层：primitives.Tooltip 内部是 cloneElement(children, {ref})，
+          // 不会插入额外 DOM 层，因此不破坏余额行在 flex 容器里的 42px 布局（浮层本身 portal 到 body）。
+          jsx.jsx(primitives.Tooltip, {
+            label: "单击查看余额与使用统计，双击打开 DeepSeek API 用量页，右键刷新",
+            side: "top",
+            delayMs: 400,
+            children: node,
+          }),
+          // 统计面板：居中弹层 + 半透明遮罩（点击遮罩 / Esc / 关闭按钮均可关闭）
+          statsOpen ? reactDom.createPortal(jsx.jsx("div", {
+            ref: layerRef,
+            className: "balance-stats-layer" + (statsClosing ? " balance-stats-layer--closing" : ""),
+            onMouseDown: handleBackdropClick,
+            children: jsx.jsx(UsageStatsPanel, {
+              onClose: closeStats,
+              panelRef,
+              closing: statsClosing,
+            }),
           }), document.body) : null,
         ],
       });

package/lib/index.js

@@ -406,21 +406,54 @@ function collectDailyUsage(events, config, fallbackModel, cutoffMs, days, sessio
     const key = beijingDayKey(time);
     let day = days.get(key);
     if (day == null) {
-      day = { date: key, ...emptyTokenBucket(), totalTokens: 0, cost: 0, sessionIds: new Set() };
+      day = {
+        date: key,
+        ...emptyTokenBucket(),
+        totalTokens: 0,
+        cost: 0,
+        sessionIds: new Set(),
+        // —— 以下为细分维度，供统计面板展示；不改动上方总额口径 ——
+        byModel: new Map(), // modelKey -> { model, tokens..., totalTokens, cost }
+        peak: emptyTokenBucket(),
+        offpeak: emptyTokenBucket(),
+        peakCost: 0,
+        offpeakCost: 0,
+      };
       days.set(key, day);
     }
+    const model = modelAtTime(switches, time) || fallback;
+    const isPeak = isPeakAt(time, config);
+    // 分时段精确计费：高峰桶按高峰价（= 目录价 ×2）、空闲桶按目录价
+    const bucket = { peak: emptyTokenBucket(), offpeak: emptyTokenBucket() };
+    addTokenUsage(isPeak ? bucket.peak : bucket.offpeak, usage);
+    const stepCost = estimateCost(bucket, resolvePricing(config, model, pricingEraAt(time)));
+
     addTokenUsage(day, usage);
-    day.totalTokens += tokenTotal({
+    const tokens = tokenTotal({
       inputTokens: usage.inputTokens ?? 0,
       outputTokens: usage.outputTokens ?? 0,
       cacheReadTokens: usage.cacheReadTokens ?? 0,
       cacheWriteTokens: usage.cacheWriteTokens ?? 0,
     });
+    day.totalTokens += tokens;
+    day.cost += stepCost;
     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, pricingEraAt(time)));
+
+    // 高峰 / 空闲拆分（token 与费用）
+    addTokenUsage(isPeak ? day.peak : day.offpeak, usage);
+    if (isPeak) day.peakCost += stepCost;
+    else day.offpeakCost += stepCost;
+
+    // 按模型拆分：复用同一步的 stepCost，保证各模型费用之和 = day.cost
+    const mk = modelKey(model) || "deepseek-v4-flash";
+    let entry = day.byModel.get(mk);
+    if (entry == null) {
+      entry = { model: mk, ...emptyTokenBucket(), totalTokens: 0, cost: 0 };
+      day.byModel.set(mk, entry);
+    }
+    addTokenUsage(entry, usage);
+    entry.totalTokens += tokens;
+    entry.cost += stepCost;
   }
 }
 
@@ -494,7 +527,18 @@ async function buildUsageStats(ctx, config) {
   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,
+        ...emptyTokenBucket(),
+        totalTokens: 0,
+        cost: 0,
+        sessions: 0,
+        byModel: [],
+        peak: emptyTokenBucket(),
+        offpeak: emptyTokenBucket(),
+        peakCost: 0,
+        offpeakCost: 0,
+      };
     }
     return {
       date,
@@ -505,6 +549,11 @@ async function buildUsageStats(ctx, config) {
       totalTokens: day.totalTokens,
       cost: day.cost,
       sessions: day.sessionIds.size,
+      byModel: [...day.byModel.values()],
+      peak: day.peak,
+      offpeak: day.offpeak,
+      peakCost: day.peakCost,
+      offpeakCost: day.offpeakCost,
     };
   });
   const total = rows.reduce((acc, day) => {
@@ -514,11 +563,36 @@ async function buildUsageStats(ctx, config) {
     acc.cacheWriteTokens += day.cacheWriteTokens;
     acc.totalTokens += day.totalTokens;
     acc.cost += day.cost;
+    // —— 细分维度：与上方总额同口径，只做拆分，不改变金额 ——
+    addTokenUsage(acc.peak, day.peak);
+    addTokenUsage(acc.offpeak, day.offpeak);
+    acc.peakCost += day.peakCost;
+    acc.offpeakCost += day.offpeakCost;
+    for (const item of day.byModel ?? []) {
+      let entry = acc.byModel.get(item.model);
+      if (entry == null) {
+        entry = { model: item.model, ...emptyTokenBucket(), totalTokens: 0, cost: 0 };
+        acc.byModel.set(item.model, entry);
+      }
+      addTokenUsage(entry, item);
+      entry.totalTokens += item.totalTokens;
+      entry.cost += item.cost;
+    }
     return acc;
-  }, { ...emptyTokenBucket(), totalTokens: 0, cost: 0 });
+  }, {
+    ...emptyTokenBucket(),
+    totalTokens: 0,
+    cost: 0,
+    byModel: new Map(),
+    peak: emptyTokenBucket(),
+    offpeak: emptyTokenBucket(),
+    peakCost: 0,
+    offpeakCost: 0,
+  });
   return {
     days: rows,
-    total,
+    // byModel 内部用 Map 聚合，返回前转成可直接 JSON 序列化的数组
+    total: { ...total, byModel: [...total.byModel.values()] },
     rangeDays: STATS_DAYS,
     scannedSessions,
     failedSessions,

package/package.json

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