balance-dsh 1.2.2 → 1.2.3

package/lib/client.js

@@ -40,8 +40,23 @@ window.__ModuleLoader__.load({
 .balance-fab:hover{background:var(--dsw-alias-interactive-bg-hover)}
 .balance-fab-dark{color:#fff;background:var(--dsw-alias-state-error-primary,#e5484d);border-color:var(--dsw-alias-state-error-primary,#e5484d)}
 .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}
+/* ── 消耗行 pill：规格逐条照抄 DSH 原生 StatsPills 的 .pill（_091hzG_pill）── */
+.balance-usage-wrap{min-width:0;display:inline-flex}
+.balance-usage-line{box-sizing:border-box;corner-shape:round;max-width:100%;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:calc(var(--dsh-content-font-size-secondary,13px) - 1px);font-variant-numeric:tabular-nums;line-height:calc(20px + var(--dsh-content-font-delta-secondary,0px));white-space:nowrap;background:0 0;border:none;border-radius:999px;align-items:center;gap:6px;padding:1px 8px;display:inline-flex;cursor:pointer;transition:background .15s var(--ds-ease-in-out,.2s)}
+.balance-usage-line svg{flex:none;width:14px;height:14px}
+.balance-usage-line:hover,.balance-usage-line[aria-expanded="true"]{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));color:var(--dsw-alias-label-secondary)}
+.balance-usage-label{text-overflow:ellipsis;min-width:0;overflow:hidden}
+/* ── 消耗明细浮层：规格照抄 DSH 原生「会话统计」面板（.HS2XBG_panel/.title/.titleRule/.details）── */
+.balance-usage-panel{box-sizing:border-box;position:fixed;z-index:1100;border:0;border-radius:var(--dsw-radius-lg,12px);background:var(--dsw-specific-menu,var(--dsw-alias-bg-module-platform,#242526));width:max-content;min-width:min(300px,100vw - 24px);max-width:min(440px,100vw - 24px);backdrop-filter:var(--dsw-menu-backdrop-filter,none);--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);box-shadow:var(--dsw-elevation-prominent,0 8px 24px rgba(0,0,0,.32));color:var(--dsw-alias-label-secondary);cursor:default;padding:16px;font-size:12px;line-height:18px;animation:balance-stats-panel-in .12s var(--ds-ease-in-out,ease-out) both}
+.balance-usage-panel__title{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px;color:var(--dsw-alias-label-primary);font-weight:500}
+.balance-usage-panel__title--second{margin-top:16px}
+.balance-usage-panel__rule{border-top:.5px solid var(--dsw-alias-border-l2);margin-bottom:10px}
+.balance-usage-panel__value{font-variant-numeric:tabular-nums}
+.balance-usage-panel__label{display:inline-flex;align-items:center;gap:6px;min-width:0}
+.balance-usage-panel__label svg{flex:none;width:14px;height:14px}
+.balance-usage-panel__details{display:grid;grid-template-columns:minmax(76px,auto) minmax(0,1fr);gap:6px 16px;margin:0;color:var(--dsw-alias-label-tertiary)}
+.balance-usage-panel__details dt,.balance-usage-panel__details dd{min-width:0;margin:0}
+.balance-usage-panel__details dd{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;text-align:right}
 /* ── 跨会话统计浮层（余额元素的子级，向右/向上展开） ── */
 .balance-stats-anchor{position:relative;display:flex;min-width:0;overflow:visible}
 .balance-stats-anchor--wide{width:100%}
@@ -1219,6 +1234,35 @@ function UsageCostLine({ useProjection, sessionId }) {
       const [splitUsage, setSplitUsage] = react.useState(null);
       const [subagentUsage, setSubagentUsage] = react.useState(null);
       const [splitReady, setSplitReady] = react.useState(false);
+      // 消耗明细面板：**点击展开**（对齐 DSH 原生「会话统计」的交互——点开切换 + 选中态 + portal 浮层）
+      const [detailsOpen, setDetailsOpen] = react.useState(false);
+      const detailsAnchorRef = react.useRef(null);
+      const detailsPanelRef = react.useRef(null);
+      // 定位与"点外部关闭"复用 DSH primitives 的 hook，行为/视觉都与原生浮层一致。
+      // 运行时探测（DSH 内部 API 无兼容承诺）：hook 不存在时退化为无定位（面板仍渲染），不拖垮消耗行。
+      // 注意这里的条件调用是安全的——primitives 是模块级常量，同一组件生命周期内判定结果恒定。
+      const anchoredPosition =
+        typeof primitives.useAnchoredPosition === "function"
+          ? primitives.useAnchoredPosition({
+              open: detailsOpen,
+              anchorRef: detailsAnchorRef,
+              panelRef: detailsPanelRef,
+              side: "top",
+              gap: 6,
+              margin: 8,
+            })
+          : null;
+      if (typeof primitives.useDismissOnOutsidePointer === "function") {
+        primitives.useDismissOnOutsidePointer(detailsAnchorRef, detailsOpen, setDetailsOpen, detailsPanelRef);
+      }
+      react.useEffect(() => {
+        if (!detailsOpen) return;
+        const onKeyDown = (event) => {
+          if (event.key === "Escape") setDetailsOpen(false);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+      }, [detailsOpen]);
 
       // 会话 token 总量（未缓存输入 + 缓存读/写 + 输出）；为 0 时代表还没有消耗。
       const usageKey = usage
@@ -1286,46 +1330,120 @@ function UsageCostLine({ useProjection, sessionId }) {
         : 0;
       const subCount = hasSubagent ? (subagentUsage.sessions ?? 0) : 0;
 
-      const detailLines = [
-        "模型：" + (model || "未知（按 deepseek-v4-flash 价估算）"),
-        "新增：" + formatTokens(newTokens) + " tokens（未缓存输入 " + formatTokens(uncachedInput) + " + 输出 " + formatTokens(output) + "）",
-        "计费：" + formatTokens(billedTotal) + " tokens（含缓存重读 " + formatTokens(cacheRead) + "、缓存写入 " + formatTokens(cacheWrite) + "）",
+      // 缓存命中率口径与 DSH 相同：缓存读取 / (缓存读取 + 未缓存输入)
+      const cacheHitBase = cacheRead + uncachedInput;
+      const cacheHitPercent = cacheHitBase > 0 ? Math.round((cacheRead / cacheHitBase) * 100) : 0;
+
+      // pill = 图标 + 文字标签 + 金额：DSH 那颗 pill 已经在显示「{tok} · 缓存命中 {%}」，
+      // 所以这里不再重复那些数字，但**保留文字说明**（用户要求「最早之前的文字」）。
+      // 图标与 DSH 那颗保持一致（都用 IconDatabaseOutlineRegular）——换别的图标会「不搭配」
+      // （2026-09-28 反馈「图标换了 不搭配」，仪表版被否掉）。
+      // 图标缺失（DSH 改 API）时不渲染，文字照常显示，不影响点击。
+      const children = [
+        typeof primitives.IconDatabaseOutlineRegular === "function"
+          ? jsx.jsx(primitives.IconDatabaseOutlineRegular, { key: "icon" })
+          : null,
+        jsx.jsx("span", { key: "label", className: "balance-usage-label", children: "本会话消耗" }),
+        jsx.jsx("span", { key: "cost", className: "balance-usage-label", children: "≈ ¥" + cost.toFixed(4) }),
+      ];
+
+      // ── 点击展开的明细浮层（结构与 DSH 原生「会话统计」一致：标题 + 分隔线 + dl 两列网格）──
+      const usageDetails = [
+        ["缓存命中", cacheHitPercent + "%"],
+        ["未缓存输入", formatTokens(uncachedInput) + " tok"],
+        ["缓存读取", formatTokens(cacheRead) + " tok"],
+      ];
+      if (cacheWrite > 0) usageDetails.push(["缓存写入", formatTokens(cacheWrite) + " tok"]);
+      usageDetails.push(["输出", formatTokens(output) + " tok"]);
+
+      const costDetails = [
+        ["新增 tokens", formatTokens(newTokens) + " tok"],
+        ["计费 tokens", formatTokens(billedTotal) + " tok"],
+        ["模型", model || "未知（按 flash 价估算）"],
       ];
       if (splitUsable) {
-        detailLines.push(
-          "时段拆分：高峰 " + formatTokens(peakTokens) + " tokens + 空闲 " + formatTokens(offpeakTokens) + " tokens",
-          "估算金额：¥" + cost.toFixed(4) + "（高峰桶按目录价×2、空闲桶按目录价）",
+        costDetails.push(
+          ["高峰 tokens", formatTokens(peakTokens) + " tok"],
+          ["空闲 tokens", formatTokens(offpeakTokens) + " tok"],
         );
-      } else {
-        detailLines.push("估算金额：¥" + cost.toFixed(4) + "（按当前时段价估算）");
       }
       if (hasSubagent) {
-        const subPeak = subagentUsage.peak.inputTokens + subagentUsage.peak.cacheReadTokens + subagentUsage.peak.cacheWriteTokens + subagentUsage.peak.outputTokens;
-        const subOff = subagentUsage.offpeak.inputTokens + subagentUsage.offpeak.cacheReadTokens + subagentUsage.offpeak.cacheWriteTokens + subagentUsage.offpeak.outputTokens;
-        detailLines.push(
-          "子代理消耗：新增 " + formatTokens(subNewTokens) + " tokens、计费 " + formatTokens(subagentUsage.totalTokens) + " tokens（" + subCount + " 个子代理）",
-          "子代理金额：¥" + subCost.toFixed(4) + "（高峰桶×2、空闲桶按目录价）",
+        costDetails.push(
+          ["子代理", subCount + " 个"],
+          ["子代理 tokens", "+" + formatTokens(subNewTokens) + " / 计费 " + formatTokens(subagentUsage.totalTokens)],
         );
       }
-      const children = [
-        jsx.jsx("span", { children: "本会话消耗" }),
-        jsx.jsx("span", { children: jsx.jsx("strong", { children: formatTokens(newTokens) + " tokens" }) }),
-      ];
-      if (billedTotal > newTokens) {
-        children.push(jsx.jsx("span", { children: "计费 " + formatTokens(billedTotal) }));
-      }
-      children.push(jsx.jsxs("span", { children: ["≈ ", jsx.jsx("strong", { children: "¥" + cost.toFixed(4) })] }));
-      if (hasSubagent) {
-        children.push(jsx.jsx("span", { children: "子代理 +" + formatTokens(subNewTokens) + " ≈ ¥" + subCost.toFixed(4) }));
-      }
-      return jsx.jsx(primitives.Tooltip, {
-        label: detailLines.join("\n"),
-        side: "top",
-        delayMs: 300,
-        children: jsx.jsxs("div", {
-          className: "balance-usage-line",
-          children,
+
+      const detailRows = (prefix, rows) =>
+        rows.flatMap(([label, value], index) => [
+          jsx.jsx("dt", { key: prefix + index + "t", children: label }),
+          jsx.jsx("dd", { key: prefix + index + "d", children: value }),
+        ]);
+
+      const panelChildren = [
+        jsx.jsxs("div", {
+          className: "balance-usage-panel__title",
+          children: [
+            jsx.jsxs("span", {
+              className: "balance-usage-panel__label",
+              children: [
+                typeof primitives.IconDatabaseOutlineRegular === "function"
+                  ? jsx.jsx(primitives.IconDatabaseOutlineRegular, {})
+                  : null,
+                "Token 用量",
+              ],
+            }),
+            jsx.jsx("span", { className: "balance-usage-panel__value", children: formatTokens(billedTotal) + " tok" }),
+          ],
+        }),
+        jsx.jsx("div", { className: "balance-usage-panel__rule" }),
+        jsx.jsx("dl", { className: "balance-usage-panel__details", children: detailRows("u", usageDetails) }),
+        jsx.jsxs("div", {
+          className: "balance-usage-panel__title balance-usage-panel__title--second",
+          children: [
+            jsx.jsxs("span", {
+              className: "balance-usage-panel__label",
+              children: [
+                typeof primitives.IconGaugeOutlineRegular === "function"
+                  ? jsx.jsx(primitives.IconGaugeOutlineRegular, {})
+                  : null,
+                "本会话金额",
+              ],
+            }),
+            jsx.jsx("span", { className: "balance-usage-panel__value", children: "≈ ¥" + cost.toFixed(4) }),
+          ],
         }),
+        jsx.jsx("div", { className: "balance-usage-panel__rule" }),
+        jsx.jsx("dl", { className: "balance-usage-panel__details", children: detailRows("c", costDetails) }),
+      ];
+
+      return jsx.jsxs("div", {
+        className: "balance-usage-wrap",
+        children: [
+          jsx.jsx("button", {
+            type: "button",
+            ref: detailsAnchorRef,
+            className: "balance-usage-line",
+            "aria-haspopup": "dialog",
+            "aria-expanded": detailsOpen,
+            "aria-label": "本会话 Token 用量与金额明细",
+            onClick: () => setDetailsOpen((value) => !value),
+            children,
+          }),
+          detailsOpen
+            ? reactDom.createPortal(
+                jsx.jsx("div", {
+                  ref: detailsPanelRef,
+                  className: "balance-usage-panel",
+                  role: "dialog",
+                  "aria-label": "本会话 Token 用量",
+                  style: anchoredPosition ?? void 0,
+                  children: panelChildren,
+                }),
+                document.body,
+              )
+            : null,
+        ],
       });
     }
 

package/lib/index.js

@@ -322,7 +322,7 @@ function formatBalance(balance) {
 //                          | { status:"failed" }  （网络失败；官方明确“失败绝不变成 0 余额”）
 // client 是 AccountClientMetadata（version / locale / timezoneOffsetSeconds），
 // 缺字段会在平台侧组装请求头时抛错，所以三个字段都要给。
-const PLUGIN_VERSION = "1.2.2";
+const PLUGIN_VERSION = "1.2.3";
 
 /**
  * 读取官方账号余额并归一化成与 normalizeBalance 相同的形状。

package/package.json

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