balance-dsh 2.0.3 → 2.0.4

package/lib/client.js

@@ -137,11 +137,27 @@ window.__ModuleLoader__.load({
 .balance-footer__timeline-glow{position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px;pointer-events:none;filter:blur(3px) saturate(1.5) brightness(1.15);opacity:.45;z-index:2}
 /* 色带本身：不透明 + 轻微提饱和，颜色是主角 */
 .balance-footer__timeline-band{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;filter:saturate(1.25) brightness(1.12);z-index:1}
-/* 指针位置由 JS 每 500ms 直接写（见 BalanceFooter 里的 pointerRef effect），刻意不用 transition：
-   一天走完 100%，每分钟才 0.069%（200px 轨道上 0.14px），过渡的连续性完全依赖浏览器
-   是否继续推进动画时钟——后台标签页会把过渡暂停，切回来时指针直接落到终点，那就是
-   用户看到的「瞬移」。逐帧写 left 才是绝对连续的，跨零点也自然回到起点。 */
-.balance-footer__timeline-pointer{position:absolute;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:var(--dsw-alias-label-primary,#fff);box-shadow:0 0 3px rgba(255,255,255,.7),0 0 2px rgba(0,0,0,.55);pointer-events:none;z-index:2}
+/* 换日时色带的交叉淡入：两条 linear-gradient 之间不可插值，只能新旧两层叠着换 opacity。
+   TimelineBand 把旧分布垫在下面，新分布挂这个类淡入盖上去，播完摘掉旧层。
+   终点 opacity 读 --balance-band-to：色带本体 1、泛光层 .45 —— 写死 1 会把泛光拉成实心。 */
+.balance-footer__timeline-fade{animation:balance-band-fade 620ms cubic-bezier(.4,0,.25,1) both}
+@keyframes balance-band-fade{from{opacity:0}to{opacity:var(--balance-band-to,1)}}
+/* 指针位置由 TimelinePointer 写 inline style 的 left（3px 端内缩，见组件里的 calc）。
+   入场走 **CSS animation**（--intro 类 + balance-ptr-in），不是 transition：
+   - transition 的起点取「上一次样式计算的值」，而重启 DSH 时首屏繁忙、浏览器可能还没为
+     这个元素算过样式，那次变更就被当成首次赋值 → 直接跳到终点、一帧都不播
+     （2026-10-30 反馈「有时候重启时指针动画会吞掉」）。
+   - animation 的 keyframes 有**显式的 from/to**，元素一插入就带着动画，浏览器时间线怎么
+     排都不会漏播；首屏忙只会晚一点开始，但一定播完整。补间在浏览器动画管线里跑，
+     React 全程只渲染 2 次（挂载、摘类），不抢主线程（逐帧 setState 就是「掉帧」的元凶）。
+   - 稳态（每分钟一次落位）**不带**动画：0.069% 的变化直接跳过去，肉眼无感；顺带也
+     避开了「后台标签页暂停动画、切回来瞬移」的老问题。
+   时长与曲线与刷新白条 balance-wipe-head 完全一致（.58s cubic-bezier(.34,.7,.26,1)）。 */
+.balance-footer__timeline-pointer{position:absolute;left:0;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:var(--dsw-alias-label-primary,#fff);box-shadow:0 0 3px rgba(255,255,255,.7),0 0 2px rgba(0,0,0,.55);pointer-events:none;z-index:2}
+.balance-footer__timeline-pointer--intro{animation:balance-ptr-in 580ms cubic-bezier(.34,.7,.26,1) both;will-change:left}
+/* from 固定 = pct 0 的位置（0% + 3px 内缩）；to 读元素上的自定义属性，即最终落点。
+   both 让动画结束后停在 to，摘掉 --intro 时 inline left 恰好同值，不会跳。 */
+@keyframes balance-ptr-in{from{left:3px}to{left:var(--balance-ptr-to,3px)}}
 /* ── 侧栏入口的红点 + 未读高亮 ─────────────────────────────────────────── */
 .balance-panel-icon{position:relative;display:inline-flex;align-items:center;justify-content:center}
 /* 未读时图标本身染成品牌色，比周围灰图标更跳 */
@@ -1839,6 +1855,142 @@ const CN_CALENDAR_SOURCES = [
     }
 
     // ─── 余额显示：单击统计，双击 DeepSeek 用量页，右键刷新 ─────────────
+// 指针入场动画：从刻度 0 滑到当前时刻，只在页面生命周期的第一次挂载播一次。
+// ⚠️ **不要用「模块加载时刻 + 时间窗口」判断**（试过，不行）：client 模块在页面启动早期就加载了，
+//   而侧栏组件要等首屏渲染 + 会话恢复完才挂载，中间经常超过好几秒，于是动画被判定成"过期"、
+//   指针直接落在终点 —— 用户看到的就是「当前不是从 0 开始的」（2026-10-30 第四次现场反馈）。
+// 正确做法：用「是否已经播完过一次」的标记，播完才置位。挂载被中断 / StrictMode 双跑都能补播。
+// POINTER_INTRO_MAX_AGE_MS 只是兜底上限，防止挂载后很久才展开侧栏又莫名滑一次。
+const POINTER_INTRO_MAX_AGE_MS = 30000;
+const PLUGIN_LOADED_AT = Date.now();
+let pointerIntroDone = false;
+
+// 时间轴指针：一根 2px 竖条，位置 = 此刻在当天的百分比。
+//
+// ⚠️ 四件事必须守住：
+// 1) 位置由 **React state 渲染**（inline style），不是 ref 里手写 style.left ——
+//    在 DSH 里 ref 拿不到 DOM，指针会永远停在 0%（2026-10-30 两次现场反馈）。
+// 2) **不要用 requestAnimationFrame**：DSH 渲染进程里它会被窗口可见性挂起。
+// 3) 它必须**独立成一个组件**：补间每拍都 setState，挂在 BalanceFooter 里会带着
+//    余额行、时间轴、胶囊全部重渲染 —— 一次入场动画要重渲上百次整块 footer，
+//    桌面版启动首屏本来就忙，那就是用户看到的「掉帧 / 初始化很卡」。
+// 4) 稳态**不要**跑逐帧定时器：指针每分钟才动 0.069%（约 0.14px），按分钟对齐一次就够。
+//    旧版稳态也跑 16ms 定时器，等于页面开着就一直 62Hz 唤醒，纯浪费。
+function TimelinePointer() {
+  // 入场动画 = 一条 CSS animation，React 全程只渲染 2 次（挂载一次、摘类一次）。
+  //
+  // ⚠️ 三条历史教训，都别再退回去：
+  //   1) 逐帧 setState（16ms × 37 拍）会在重启 DSH 的首屏高峰上抢主线程 → 掉帧。
+  //   2) 用 CSS transition + 延后一拍设终点，**有时候动画会被吞**：transition 的起点取
+  //      「上一次样式计算的值」，而首屏繁忙时浏览器可能还没为这个元素算过样式，
+  //      那次变更就被当成首次赋值，直接跳到终点、一帧都不播（2026-10-30 反馈「有时候重启时指针动画会吞掉」）。
+  //   3) 所以现在用 animation：keyframes 里有**显式的 from/to**，不依赖上一次计算值。
+  //      元素一插入就带着动画，opacity/left 从 3px 补到终点，浏览器时间线怎么排都不会漏播；
+  //      首屏忙时它只会晚一点开始，但一定播完整。
+  const [view, setView] = react.useState(() => {
+    const expired = Date.now() - PLUGIN_LOADED_AT > POINTER_INTRO_MAX_AGE_MS;
+    return { pct: pointerPercent(Date.now()), intro: !pointerIntroDone && !expired };
+  });
+  react.useEffect(() => {
+    const expired = Date.now() - PLUGIN_LOADED_AT > POINTER_INTRO_MAX_AGE_MS;
+    const intro = !pointerIntroDone && !expired;
+    // 与刷新白条（CSS 里 balance-wipe-head 的 .58s）同一个时长、同一条曲线，
+    // 两者在同一次渲染里插入，动画时钟同起同落。
+    const INTRO_MS = 580;
+    const IDLE_MS = 60000;
+    let introTimer = 0;
+    let idleTimer = 0;
+    const idleIn = (now) => IDLE_MS - (now % IDLE_MS) + 30;
+    const scheduleIdle = () => {
+      idleTimer = setTimeout(tick, idleIn(Date.now()));
+    };
+    function tick() {
+      // 稳态：不带动画直接落位（每分钟才动 0.069%，跳过去看不出来），
+      // 下一拍对齐到下一个整分钟。跨零点也走这里，不会反向滑回去。
+      setView({ pct: pointerPercent(Date.now()), intro: false });
+      scheduleIdle();
+    }
+    if (intro) {
+      introTimer = setTimeout(() => {
+        // 到站：置位标记（之后的重挂载不再重播），并摘掉动画类。
+        // animation 是 both，摘类前后都在终点，不会跳。
+        pointerIntroDone = true;
+        setView((v) => ({ pct: v.pct, intro: false }));
+        scheduleIdle();
+      }, INTRO_MS + 40);
+    } else {
+      scheduleIdle();
+    }
+    return () => {
+      clearTimeout(introTimer);
+      clearTimeout(idleTimer);
+    };
+    // 依赖故意为空：只在挂载时读一次初值，之后由 CSS animation + 分钟对齐自己跑。
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // 刻度两端各留 3px 余量：指针 2px 宽、margin-left 让它以 left 为中心线，直接贴 0%/100%
+  // 会有一半被父级 overflow 裁掉，看着就像指针跑到轨道外面去了。
+  // 把 [0,100] 线性压进 [3px, 100% - 3px]：中心线 = inset + (p/100) × (宽 - 2 × inset)，
+  // 展开成 calc 就是「p% + inset px - (p/100) × 2 × inset px」。
+  const pct = view.pct;
+  const inset = 3;
+  const shift = inset - (pct / 100) * 2 * inset;
+  const pos = "calc(" + pct.toFixed(4) + "% + " + shift.toFixed(2) + "px)";
+  return jsx.jsx("span", {
+    className: view.intro ? "balance-footer__timeline-pointer balance-footer__timeline-pointer--intro" : "balance-footer__timeline-pointer",
+    // left 给稳态用；--balance-ptr-to 是 keyframes 的终点（两者取值相同）。
+    style: { left: pos, "--balance-ptr-to": pos },
+  });
+}
+
+// 色带分布变化时的交叉淡入（2026-10-30 加，用户「如果第二天的时段分布不一样 时刻条里的颜色分布我需要有渐变动画」）。
+//
+// 色带是一条 linear-gradient，而 background-image 在 CSS 里 **不可插值** —— 直接换 gradient
+// 永远是硬切：周五 → 周六（整条从「红绿相间」变成「通体绿」）会啪一下换掉，很扎眼。
+// 所以做两层交叉淡入：新的那条从 opacity 0 淡到本该有的不透明度，盖住旧的那条，
+// 播完把旧层摘掉。视觉上就是颜色分布自己慢慢挪过去。
+//
+// 触发时机只有两个，都不会天天发生：
+//   1) 跨零点 —— 第二天的分布不同（工作日 ↔ 周末、节前 ↔ 假期）；
+//   2) 节假日表刚同步完，把当天的口径纠正了。
+// 没有定时器：只跟着传入的 gradient 字符串变化走，一天最多一次。
+//
+// 首挂不播（seq === 0 时不挂动画类）—— 色带不该有自己的入场动画，那会让首屏又多一份动效。
+const BAND_FADE_MS = 620;
+function TimelineBand(props) {
+  const gradient = props.gradient;
+  const [view, setView] = react.useState(() => ({ now: gradient, prev: null, seq: 0 }));
+  // 分布变了：把当前这条降级成 prev（留在下面），新的那条顶上来并 +1 换 key。
+  // key 变了才是新元素，CSS animation 才会重新播。
+  react.useEffect(() => {
+    setView((v) => (v.now === gradient ? v : { now: gradient, prev: v.now, seq: v.seq + 1 }));
+  }, [gradient]);
+  // 淡入播完再摘掉旧层，防止 prev 一天天堆下去。
+  react.useEffect(() => {
+    if (!view.prev) return;
+    const timer = setTimeout(() => {
+      setView((v) => (v.prev ? { now: v.now, prev: null, seq: v.seq } : v));
+    }, BAND_FADE_MS + 80);
+    return () => clearTimeout(timer);
+  }, [view.prev, view.seq]);
+  // seq === 0 是首挂，不带动画类；之后每一层都带，靠 key 变化重新起播。
+  const fadeCls = view.seq > 0 ? " balance-footer__timeline-fade" : "";
+  // --balance-band-to 是 keyframes 的终点 opacity：色带本体 1、泛光层保持原本的 .45，
+  // 否则泛光会被动画拉成实心（它静态就是半透明的）。
+  const layer = (cls, bg, to, key) => jsx.jsx("span", {
+    className: cls + fadeCls,
+    style: { background: bg, "--balance-band-to": to },
+  }, key);
+  const layers = [];
+  if (view.prev) {
+    layers.push(jsx.jsx("span", { className: "balance-footer__timeline-glow", style: { background: view.prev } }, "pg"));
+    layers.push(jsx.jsx("span", { className: "balance-footer__timeline-band", style: { background: view.prev } }, "pb"));
+  }
+  layers.push(layer("balance-footer__timeline-glow", view.now, "0.45", "g" + view.seq));
+  layers.push(layer("balance-footer__timeline-band", view.now, "1", "b" + view.seq));
+  return jsx.jsx("span", { className: "balance-footer__timeline-clip", children: layers });
+}
+
     function BalanceFooter({ wide }) {
       const state = useBalance();
       const settings = useSettings();
@@ -1958,23 +2110,8 @@ const CN_CALENDAR_SOURCES = [
           }
         };
       }, []);
-      // 指针位置：500ms 一次直接改 DOM 的 left，不经 React state、也不用 CSS transition。
-      // 一天走完 100%，每分钟只有 0.069%（200px 轨道上 0.14px）：
-      //   · 按分钟 tick + 长过渡 —— 静止 59 秒再窜一下，且连续性押在浏览器动画时钟上，
-      //     后台标签页会把过渡暂停，切回来时直接落到终点，那就是用户看到的「瞬移」；
-      //   · 每 500ms 重算一次 —— 相邻两次只差 0.0006%（0.0012px），视觉上就是匀速滑，
-      //     不依赖过渡调度，也不会因为后台暂停而攒成一跳。
-      // 只有 2px 的元素改 left，代价可忽略；不碰 state 就不触发组件重渲染。
-      const pointerRef = react.useRef(null);
-      react.useEffect(() => {
-        const paint = () => {
-          const el = pointerRef.current;
-          if (el) el.style.left = pointerPercent(Date.now()).toFixed(4) + "%";
-        };
-        paint();
-        const timer = setInterval(paint, 500);
-        return () => clearInterval(timer);
-      }, []);
+      // 指针位置见模块作用域的 TimelinePointer —— 刻意拆成独立组件：
+      // 补间只重渲染那一根 2px 竖条，不会带着整个余额行一起重渲染。
       const clickTimer = react.useRef(null);
       const closeTimer = react.useRef(null);
       const anchorRef = react.useRef(null);
@@ -2270,29 +2407,12 @@ const CN_CALENDAR_SOURCES = [
           jsx.jsxs("span", {
             className: "balance-footer__timeline-track balance-footer__timeline-track--" + period,
             children: [
-              // 裁剪层让四周各留 1px，颜色不贴边框
-              jsx.jsxs("span", {
-                className: "balance-footer__timeline-clip",
-                children: [
-                  // 泛光：同一渐变模糊后叠在色带上面，靠柔边往外散光
-                  jsx.jsx("span", {
-                    className: "balance-footer__timeline-glow",
-                    style: { background: timelineBand.gradient },
-                  }),
-                  // 色带本体：纯色块，不带任何文字
-                  jsx.jsx("span", {
-                    className: "balance-footer__timeline-band",
-                    style: { background: timelineBand.gradient },
-                  }),
-                ],
-              }),
-              // 指针：位置 = 此刻在当天的比例，随时间从左走到右
-              jsx.jsx("span", {
-                className: "balance-footer__timeline-pointer",
-                ref: pointerRef,
-                // 首帧先摆到位（rAF 还没起来），之后由 rAF 每帧接管
-                style: { left: pointerPercent(Date.now()).toFixed(3) + "%" },
-              }),
+              // 裁剪层让四周各留 1px，颜色不贴边框。
+              // 里面是泛光 + 色带两层，换日时由 TimelineBand 做交叉淡入（gradient 不可插值）。
+              jsx.jsx(TimelineBand, { gradient: timelineBand.gradient }),
+              // 指针：位置 = 此刻在当天的比例，随时间从左走到右。
+              // 指针是独立组件，自己管 state 和补间，不带着余额行重渲染。
+              jsx.jsx(TimelinePointer, {}),
             ],
           }),
         ],
@@ -3299,6 +3419,38 @@ function UsageCostLine({ useProjection, sessionId }) {
                 ],
               }),
 
+              // 节假日同步紧跟在「版本与更新」下面：两者都是「后台自动补一次 + 可手动触发」，
+              // 放一起比塞在「计费」末尾好找。数据本身仍然决定算钱口径，只是入口挪了位置。
+              group("calendar", "节假日数据", [
+                row(
+                  "calendar",
+                  "同步状态",
+                  "法定节假日与调休从国务院公告同步。插件每 30 天自动同步一次，这里可以手动立即更新。",
+                  jsx.jsxs("div", {
+                    className: "balance-settings__calendar",
+                    children: [
+                      jsx.jsx("span", {
+                        className:
+                          "balance-settings__calendar-note" +
+                          (calendarSync.kind === "error"
+                            ? " balance-settings__calendar-note--error"
+                            : calendar.fetchedAt > 0
+                              ? ""
+                              : " balance-settings__calendar-note--warn"),
+                        children: calendarSummary,
+                      }),
+                      jsx.jsx("button", {
+                        type: "button",
+                        className: "balance-settings__btn",
+                        onClick: onSyncCalendar,
+                        disabled: calendarBusy,
+                        children: calendarBusy ? "同步中…" : "立即同步",
+                      }),
+                    ],
+                  }),
+                ),
+              ]),
+
               group("balance", "余额", [
             numberRow("refreshIntervalSec", "余额刷新间隔", "轮询间隔；对话产生新消耗时也会顺带刷新。", 5, 3600, "秒"),
             numberRow("lowBalanceThreshold", "低余额警示阈值", "余额低于该值时金额转为琥珀色。", 0, 100000, "元"),
@@ -3362,36 +3514,6 @@ function UsageCostLine({ useProjection, sessionId }) {
               "9-12, 14-18",
             ),
             numberRow("peakMultiplier", "高峰时段倍率", "官方为 2（高峰价 = 空闲价 × 倍率）。", 1, 10, "倍"),
-            // 法定节假日/调休直接决定某天算高峰还是空闲（算钱和标签都靠它），
-            // 内置表只是离线兜底。给一个手动同步按钮：即使哪天没人维护插件，
-            // 用户自己点一下就能把下一年的国务院公告补进来。
-            row(
-              "calendar",
-              "节假日数据",
-              "法定节假日与调休从国务院公告同步。插件每 30 天自动同步一次，这里可以手动立即更新。",
-              jsx.jsxs("div", {
-                className: "balance-settings__calendar",
-                children: [
-                  jsx.jsx("span", {
-                    className:
-                      "balance-settings__calendar-note" +
-                      (calendarSync.kind === "error"
-                        ? " balance-settings__calendar-note--error"
-                        : calendar.fetchedAt > 0
-                          ? ""
-                          : " balance-settings__calendar-note--warn"),
-                    children: calendarSummary,
-                  }),
-                  jsx.jsx("button", {
-                    type: "button",
-                    className: "balance-settings__btn",
-                    onClick: onSyncCalendar,
-                    disabled: calendarBusy,
-                    children: calendarBusy ? "同步中…" : "立即同步",
-                  }),
-                ],
-              }),
-            ),
           ]),
 
           jsx.jsxs("div", {

package/lib/index.js

@@ -527,7 +527,7 @@ function formatBalance(balance) {
 //                          | { status:"failed" }  （网络失败；官方明确“失败绝不变成 0 余额”）
 // client 是 AccountClientMetadata（version / locale / timezoneOffsetSeconds），
 // 缺字段会在平台侧组装请求头时抛错，所以三个字段都要给。
-const PLUGIN_VERSION = "2.0.3";
+const PLUGIN_VERSION = "2.0.4";
 
 // ─── 检查更新 ───────────────────────────────────────────────────────────────
 // 只查 npm registry 的 latest 标签（一个很小的 JSON），不下载任何东西。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balance-dsh",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "在 DeepSeek Harness 中显示 DeepSeek 账户余额和当前会话 token/费用消耗（含高峰/空闲峰谷计费）。仅支持 DeepSeek 官方模型与账号，暂不支持其他大模型。",
   "author": "Rannist",
   "type": "module",