balance-dsh 1.0.3 → 1.0.8

package/README.md

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

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,25 +42,40 @@ 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-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.48);backdrop-filter:blur(3px);cursor:default}
-.balance-stats-panel{box-sizing:border-box;width:min(820px,calc(100vw - 40px));max-height:min(720px,calc(100vh - 40px));overflow:auto;padding:22px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-base,#fff);border:1px solid var(--dsw-alias-border-l2,#d9d9df);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
-.balance-stats-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
-.balance-stats-title{margin:0;font-size:20px;line-height:28px;font-weight:700}
+/* ── 跨会话统计浮层（余额元素的子级，向右/向上展开） ── */
+.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(4,minmax(0,1fr));gap:10px;margin-bottom:20px}
-.balance-stats-card{min-width:0;padding:14px;border:1px solid var(--dsw-alias-border-l2,#d9d9df);border-radius:12px;background:var(--dsw-alias-bg-module-platform,rgba(127,127,127,.04))}
+.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:18px;font-weight:700;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
+.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{overflow-x:auto;padding:4px 2px 8px}
+.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{width:14px;height:14px;border-radius:3px;background:rgba(127,127,127,.10)}
+.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)}
@@ -68,7 +84,8 @@ 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-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.balance-stats-panel{padding:16px}.balance-stats-backdrop{padding:10px}}
+@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，不影响）
@@ -82,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 返回后会覆盖） ───
@@ -337,16 +357,38 @@ window.__ModuleLoader__.load({
       fetchBalanceOnce();
     }
 
-    async function fetchUsageStats(signal) {
-      const res = await fetch("/balance-api?stats=1", { signal });
-      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 || "暂无可用的会话统计");
-      return data;
+    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;
     }
 
-    function StatsCard({ label, value }) {
+    const StatsCard = react.memo(function StatsCard({ label, value }) {
       return jsx.jsxs("div", {
         className: "balance-stats-card",
         children: [
@@ -354,20 +396,27 @@ window.__ModuleLoader__.load({
           jsx.jsx("span", { className: "balance-stats-card__value", title: value, children: value }),
         ],
       });
-    }
-
-    function UsageStatsPanel({ onClose }) {
-      const [state, setState] = react.useState({ loading: true, data: null, error: "" });
+    });
+
+    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(() => {
-        const controller = new AbortController();
-        fetchUsageStats(controller.signal).then(
-          (data) => setState({ loading: false, data, error: "" }),
+        let disposed = false;
+        fetchUsageStats().then(
+          (data) => { if (!disposed) setState({ loading: false, data, error: "" }); },
           (error) => {
-            if (controller.signal.aborted) return;
+            if (disposed) return;
             setState({ loading: false, data: null, error: error && error.message ? error.message : String(error) });
           },
         );
-        return () => controller.abort();
+        return () => { disposed = true; };
       }, []);
       react.useEffect(() => {
         const onKeyDown = (event) => { if (event.key === "Escape") onClose(); };
@@ -378,25 +427,51 @@ window.__ModuleLoader__.load({
       const data = state.data;
       const stats = data && data.stats;
       const days = stats && Array.isArray(stats.days) ? stats.days : [];
-      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;
-      const heatmap = [];
-      for (let i = 0; i < leading; i++) {
-        heatmap.push(jsx.jsx("span", { className: "balance-heatmap-cell balance-heatmap-cell--blank" }, "blank-" + i));
-      }
-      for (const day of days) {
-        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 title = day.date + "\nToken：" + formatTokens(tokens) + "\n费用：¥" + Number(day.cost || 0).toFixed(4) + "\n会话：" + Number(day.sessions || 0);
-        heatmap.push(jsx.jsx("span", {
-          className: "balance-heatmap-cell" + (level > 0 ? " balance-heatmap-cell--" + level : ""),
-          title,
-          "aria-label": title,
-        }, day.date));
-      }
-      const balance = data && data.balance;
+      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")
@@ -407,7 +482,7 @@ window.__ModuleLoader__.load({
           ? jsx.jsx("div", { className: "balance-stats-error", children: state.error })
           : jsx.jsxs(jsx.Fragment, {
               children: [
-                data.balanceError ? jsx.jsx("div", { className: "balance-stats-error", children: "余额：" + data.balanceError }) : null,
+                !liveBalance.balance && data.balanceError ? jsx.jsx("div", { className: "balance-stats-error", children: "余额：" + data.balanceError }) : null,
                 jsx.jsxs("div", {
                   className: "balance-stats-cards",
                   children: [
@@ -449,31 +524,33 @@ window.__ModuleLoader__.load({
                 }),
               ],
             });
-      return jsx.jsx("div", {
-        className: "balance-stats-backdrop",
-        role: "presentation",
-        onMouseDown: (event) => { if (event.target === event.currentTarget) onClose(); },
-        children: jsx.jsxs("section", {
-          className: "balance-stats-panel",
-          role: "dialog",
-          "aria-modal": "true",
-          "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,
-          ],
-        }),
+      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,
+        ],
       });
     }
 
@@ -501,15 +578,61 @@ window.__ModuleLoader__.load({
     function BalanceFooter({ wide }) {
       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 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);
       };
@@ -517,6 +640,9 @@ window.__ModuleLoader__.load({
         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");
       };
@@ -526,8 +652,18 @@ window.__ModuleLoader__.load({
         onContextMenu: onBalanceContextMenu,
         title: "单击查看余额与使用统计，双击打开 DeepSeek API 用量页，右键刷新",
       };
-      const withPanel = (node) => jsx.jsxs(jsx.Fragment, {
-        children: [node, statsOpen ? jsx.jsx(UsageStatsPanel, { onClose: () => setStatsOpen(false) }) : null],
+      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) {

package/package.json

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