@feiyang666/dsh-usage-plugin 1.10.0 → 1.11.1

package/CHANGELOG.md

@@ -23,6 +23,22 @@
 
 ---
 
+## v1.11.1 (2026-08-23)
+
+- **修复：数据加载后页面空白**：加载动画三目分支误用逗号表达式，只返回最后一个表达式值（`null`），导致加载完成后各子视图全部不渲染；改为将四个子视图作为容器 `div` 的并列子元素，加载完成后正常显示。
+- **计费说明改为面板级固定显示**：「高峰 / 空闲时段说明」固定在用量面板子页签下方，概览、用量日历、缓存命中列表、价格表四个页面切换时始终可见（含数据加载期间）。
+- **当前时段精确显示**：用量面板顶部徽标与价格表页顶部新增「当前 · 工作日高峰时段 / 工作日空闲时段 / 周末空闲时段」动态状态并附说明文字；周末（自 2026-08-23 起）全天按空闲价计费，规则生效前仍按原规则区分。
+
+---
+
+## v1.11.0 (2026-08-23)
+
+- **高峰 / 空闲时段说明**：概览、用量日历、缓存命中列表、价格表四个页面顶部统一新增「高峰 / 空闲时段说明」，清楚区分**工作日高峰**（周一至周五 9:00–12:00、14:00–18:00）、**工作日空闲**（其余时间）与**周末全天空闲**（自 2026-08-23 起按空闲价，此前仍按原规则）。
+- **加载动画**：用量面板首次进入、数据仍在加载时显示转圈加载动画与提示文字，避免白屏无反馈；余额查询加载中同步使用加载动画。
+- **表格适配**：所有表格改为宽度自适应容器（`width:100%`），单元格内容按需换行，不再因内容超宽出现横向滚动条；极窄窗口下容器保留横向滚动兜底。窗口缩放、不同分辨率下查看更舒适。
+
+---
+
 ## v1.10.0 (2026-08-23)
 
 - **新增 DeepSeek 官方模型 `deepseek-v4-flash-vision-exp`（DeepSeek-V4-Flash-Vision-Exp）**：官方价格表、概览「按模型」表、按 API 服务商 × 模型明细、用量日历、缓存命中列表与 PNG 报告均自动按该模型计价；「价格表」页新增该模型一行，`modelKey` 识别优先匹配 `vision`（避免被误归入 `deepseek-v4-flash`）。

package/lib/client.js

@@ -38,19 +38,20 @@ window.__ModuleLoader__.load({
       subtab: { border: "1px solid rgba(128,128,128,.35)", background: "transparent", borderRadius: 6, padding: "5px 14px", fontSize: fs(12), cursor: "pointer", color: "inherit" },
       subtabOn: { border: "1px solid rgba(90,140,255,.5)", background: "rgba(90,140,255,.22)", borderRadius: 6, padding: "5px 14px", fontSize: fs(12), cursor: "pointer", color: "inherit", fontWeight: 600 },
       scroll: { overflowX: "auto", overflowY: "hidden", width: "100%", maxWidth: "100%", minWidth: 0 },
-      // 表格宽度用 max-content：内容多宽表就有多宽，容器窄时出现横向滚动条而不是裁剪右侧列
-      tbl: { width: "max-content", minWidth: "100%", borderCollapse: "collapse", fontSize: fs(12) },
-      th: { textAlign: "right", padding: "7px 10px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap", opacity: 0.55, fontWeight: 500 },
-      thFirst: { textAlign: "left", padding: "7px 10px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap", opacity: 0.55, fontWeight: 500 },
-      td: { textAlign: "right", padding: "7px 10px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap" },
-      tdFirst: { textAlign: "left", padding: "7px 10px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap" },
-      tdWrap: { textAlign: "left", padding: "7px 10px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word", minWidth: 120, maxWidth: 220 },
-      tdTotal: { textAlign: "right", padding: "7px 10px", fontWeight: 600, borderTop: "1px solid rgba(128,128,128,.35)" },
-      tdTotalFirst: { textAlign: "left", padding: "7px 10px", fontWeight: 600, borderTop: "1px solid rgba(128,128,128,.35)" },
-      tdClick: { textAlign: "left", padding: "7px 10px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap", cursor: "pointer" },
-      tdClickSel: { textAlign: "left", padding: "7px 10px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap", cursor: "pointer", color: "#5a8cff", fontWeight: 600 },
-      tdGroup: { textAlign: "left", padding: "7px 10px", fontWeight: 600, background: "rgba(128,128,128,.09)", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap" },
-      tdGroupR: { textAlign: "right", padding: "7px 10px", fontWeight: 600, background: "rgba(128,128,128,.09)", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "nowrap" },
+      // 表格宽度自适应容器（width:100% + 列内容允许换行），不再用 max-content 撑出横向滚动条；
+      // 极窄窗口下容器仍保留 overflow-x 兜底。
+      tbl: { width: "100%", borderCollapse: "collapse", fontSize: fs(12) },
+      th: { textAlign: "right", padding: "7px 8px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word", opacity: 0.55, fontWeight: 500, lineHeight: 1.5 },
+      thFirst: { textAlign: "left", padding: "7px 8px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word", opacity: 0.55, fontWeight: 500, lineHeight: 1.5 },
+      td: { textAlign: "right", padding: "7px 8px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word" },
+      tdFirst: { textAlign: "left", padding: "7px 8px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word" },
+      tdWrap: { textAlign: "left", padding: "7px 8px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word" },
+      tdTotal: { textAlign: "right", padding: "7px 8px", fontWeight: 600, borderTop: "1px solid rgba(128,128,128,.35)", whiteSpace: "normal", wordBreak: "break-word" },
+      tdTotalFirst: { textAlign: "left", padding: "7px 8px", fontWeight: 600, borderTop: "1px solid rgba(128,128,128,.35)", whiteSpace: "normal", wordBreak: "break-word" },
+      tdClick: { textAlign: "left", padding: "7px 8px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word", cursor: "pointer" },
+      tdClickSel: { textAlign: "left", padding: "7px 8px", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word", cursor: "pointer", color: "#5a8cff", fontWeight: 600 },
+      tdGroup: { textAlign: "left", padding: "7px 8px", fontWeight: 600, background: "rgba(128,128,128,.09)", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word" },
+      tdGroupR: { textAlign: "right", padding: "7px 8px", fontWeight: 600, background: "rgba(128,128,128,.09)", borderBottom: "1px solid rgba(128,128,128,.2)", whiteSpace: "normal", wordBreak: "break-word" },
       badgeHit: { display: "inline-block", padding: "2px 8px", borderRadius: 999, fontSize: fs(11), fontWeight: 500, background: "rgba(46,204,113,.18)", color: "#2ecc71", whiteSpace: "nowrap" },
       badgePeak: { display: "inline-block", padding: "2px 8px", borderRadius: 999, fontSize: fs(11), fontWeight: 500, background: "rgba(255,152,0,.18)", color: "#ff9800", whiteSpace: "nowrap" },
       badgeValley: { display: "inline-block", padding: "2px 8px", borderRadius: 999, fontSize: fs(11), fontWeight: 500, background: "rgba(90,140,255,.18)", color: "#5a8cff", whiteSpace: "nowrap" },
@@ -78,9 +79,23 @@ window.__ModuleLoader__.load({
       legend: { display: "flex", alignItems: "center", gap: 6, fontSize: fs(11), opacity: 0.65, marginTop: 8, flexWrap: "wrap" },
       legendBar: { display: "inline-block", width: 100, height: 8, borderRadius: 4, background: "linear-gradient(90deg,rgba(128,128,128,.12),rgba(46,134,222,.3),rgba(46,134,222,.85))" },
       numInput: { border: "1px solid rgba(128,128,128,.35)", background: "transparent", borderRadius: 4, padding: "3px 6px", fontSize: fs(12), color: "inherit", width: 78, textAlign: "right" },
-      selDayTitle: { fontSize: fs(13), fontWeight: 600, marginTop: 14 }
+      selDayTitle: { fontSize: fs(13), fontWeight: 600, marginTop: 14 },
+      billHint: { border: "1px solid rgba(90,140,255,.35)", background: "rgba(90,140,255,.08)", borderRadius: 8, padding: "10px 14px", marginTop: 10, fontSize: fs(12), lineHeight: 1.9 },
+      billHintTitle: { fontWeight: 600, marginBottom: 4, color: "#5a8cff" },
+      nowPeriod: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginTop: 10, fontSize: fs(12) },
+      loading: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, padding: "48px 0", color: "inherit" },
+      spinner: { width: 28, height: 28, borderRadius: "50%", border: "3px solid rgba(90,140,255,.22)", borderTopColor: "#5a8cff", animation: "dshUsageSpin .8s linear infinite", flexShrink: 0 },
+      loadText: { fontSize: fs(12), opacity: 0.65 }
     };
 
+    // 注入全局样式（幂等，仅一次）：加载动画关键帧等
+    if (typeof document !== "undefined" && document.head && !document.getElementById("dsh-usage-plugin-style")) {
+      var styleSheetEl = document.createElement("style");
+      styleSheetEl.id = "dsh-usage-plugin-style";
+      styleSheetEl.textContent = "@keyframes dshUsageSpin{to{transform:rotate(360deg)}}";
+      document.head.appendChild(styleSheetEl);
+    }
+
     // ── helpers ──
     var pad2 = function (n) { return (n < 10 ? "0" : "") + n; };
     var fmtInt = function (n) { return String(Math.round(n || 0)).replace(/\B(?=(\d{3})+(?!\d))/g, ","); };
@@ -127,6 +142,24 @@ window.__ModuleLoader__.load({
       var t = d.getUTCHours() * 60 + d.getUTCMinutes();
       return (t >= 9 * 60 && t < 12 * 60) || (t >= 14 * 60 && t < 18 * 60);
     };
+    // 返回当前计费时段 { peak, label, desc }，区分：工作日高峰 / 工作日空闲 / 周末空闲（周末自 2026-08-23 起全天按空闲价）
+    var periodNow = function (ts) {
+      ts = ts || Date.now();
+      var d = new Date(ts + 8 * 3600 * 1000);
+      var wd = d.getUTCDay(); // 0=周日 1=周一 … 6=周六
+      var isWeekend = wd === 0 || wd === 6;
+      var t = d.getUTCHours() * 60 + d.getUTCMinutes();
+      var inPeakHours = (t >= 9 * 60 && t < 12 * 60) || (t >= 14 * 60 && t < 18 * 60);
+      if (isWeekend) {
+        if (ts >= WEEKEND_FLAT_AT) return { peak: false, label: "周末空闲时段", desc: "周末（周六、周日）全天按空闲价计费" };
+        return inPeakHours
+          ? { peak: true, label: "周末高峰时段", desc: "2026-08-23 前仍按原规则分峰谷" }
+          : { peak: false, label: "周末空闲时段", desc: "2026-08-23 前仍按原规则分峰谷" };
+      }
+      return inPeakHours
+        ? { peak: true, label: "工作日高峰时段", desc: "周一至周五 9:00–12:00、14:00–18:00" }
+        : { peak: false, label: "工作日空闲时段", desc: "工作日其余时间" };
+    };
     // 计费档位选择：auto 用 autoCost（按生效日期自动切换），base 用 baseCost，其余用 peakValleyCost
     // 计费档位显示文案
     var regimeLabel = function (regime) {
@@ -194,6 +227,27 @@ window.__ModuleLoader__.load({
       );
     }
 
+    // ── 计费时段说明（区分工作日高峰 / 工作日空闲 / 周末全天空闲）──
+    function BillingHint(props) {
+      return el("div", { style: st.billHint },
+        el("div", { style: st.billHintTitle }, "高峰 / 空闲时段说明"),
+        el("div", null,
+          el("span", { style: st.badgePeak }, "工作日高峰"), " 周一至周五 9:00–12:00、14:00–18:00"
+        ),
+        el("div", null,
+          el("span", { style: st.badgeValley }, "空闲时段"), " 工作日其余时间，以及周末（周六、周日）全天（自 2026-08-23 起；此前仍按原规则分峰谷）"
+        )
+      );
+    }
+
+    // ── 数据加载动画 ──
+    function LoadingView(props) {
+      return el("div", { style: st.loading },
+        el("div", { style: st.spinner }),
+        el("div", { style: st.loadText }, props.text || "正在加载用量数据…")
+      );
+    }
+
     // ── long-image report ──
     function drawReport(canvas, records) {
       records = records.slice();
@@ -1003,6 +1057,10 @@ window.__ModuleLoader__.load({
       });
 
       return el("div", null,
+        el("div", { style: st.nowPeriod },
+          el("span", { style: periodNow().peak ? st.badgePeak : st.badgeValley }, "当前 · " + periodNow().label),
+          el("span", { style: st.sub }, periodNow().desc)
+        ),
         el("div", { style: st.sec }, "今日 $ / ¥ 汇率"),
         el("div", { style: st.cards, marginTop: 8 },
           el(Card, { label: "$ → ¥", value: fx.rate ? ("$1 = ¥" + Number(fx.rate).toFixed(4)) : "暂不可用", hint: fx.date ? ("汇率日期 " + fx.date) : "等待获取" }),
@@ -1105,12 +1163,16 @@ window.__ModuleLoader__.load({
       var destDir = destState[0], setDestDir = destState[1];
       var canvasNode = null, fileInputNode = null;
       var timer = props.timer;
+      // 初始加载中标记：首次请求完成/失败后置 false（后续定时刷新静默进行，避免闪烁）
+      var loadingState = React.useState(true);
+      var loading = loadingState[0], setLoading = loadingState[1];
 
       function refresh() {
         api({ action: "list" }).then(function (res) {
           setData(res || { records: [], count: 0, dataPath: "", persistOk: false, persistError: "", pricing: null, days: [] });
           setError("");
-        }).catch(function (e) { setError(String((e && e.message) || e)); });
+          setLoading(false);
+        }).catch(function (e) { setError(String((e && e.message) || e)); setLoading(false); });
       }
 
       React.useEffect(function () {
@@ -1189,7 +1251,7 @@ window.__ModuleLoader__.load({
 
       var records = data.records || [];
       var dataPath = data.dataPath || "";
-      var nowPeak = isPeakNow(Date.now());
+      var nowPeriod = periodNow(Date.now());
       var effectiveAt = data.effectiveAt || 0;
       var nowEffective = effectiveAt ? (Date.now() >= effectiveAt) : true;
       return el("div", { style: st.root },
@@ -1200,7 +1262,7 @@ window.__ModuleLoader__.load({
               el("div", { style: st.title }, "用量与消耗"),
               el("div", { style: st.sub }, "记录插件激活后的每一次模型调用")
             ),
-            el("span", { style: nowPeak ? st.badgePeak : st.badgeValley }, nowPeak ? "当前 · 高峰时段" : "当前 · 空闲时段"),
+            el("span", { style: nowPeriod.peak ? st.badgePeak : st.badgeValley }, "当前 · " + nowPeriod.label),
               el("span", { style: nowEffective ? st.badgeHit : st.badgeValley }, nowEffective ? "新价格已生效" : "新价格未生效")
           ),
           el("div", { style: st.actions },
@@ -1217,13 +1279,18 @@ window.__ModuleLoader__.load({
             }, t.t);
           })
         ),
+        el(BillingHint, null),
         el("div", { style: st.note, marginTop: 6 },
           "计价说明：DeepSeek 官方与 SiliconFlow 按人民币价格；DigitalOcean 按美元官方价 × USD/CNY 汇率折算人民币；千问暂不计费；AMD GPU Cloud DeepSeek V4 Flash 免费按 ¥0。"
         ),
-        tab === "overview" ? el(OverviewView, { records: records, regime: "auto" }) : null,
-        tab === "calendar" ? el(CalendarView, { records: records, regime: "auto", days: data.days || [] }) : null,
-        tab === "cache" ? el(CacheListView, { records: records, regime: "auto" }) : null,
-        tab === "prices" ? el(PriceView, { pricing: data.pricing, effectiveAt: data.effectiveAt, fx: data.fx || {}, onFxRefresh: function () { api({ action: "fxRefresh" }).then(refresh).catch(function () {}); }, onChanged: refresh }) : null,
+        loading
+          ? el(LoadingView, null)
+          : el("div", null,
+            tab === "overview" ? el(OverviewView, { records: records, regime: "auto" }) : null,
+            tab === "calendar" ? el(CalendarView, { records: records, regime: "auto", days: data.days || [] }) : null,
+            tab === "cache" ? el(CacheListView, { records: records, regime: "auto" }) : null,
+            tab === "prices" ? el(PriceView, { pricing: data.pricing, effectiveAt: data.effectiveAt, fx: data.fx || {}, onFxRefresh: function () { api({ action: "fxRefresh" }).then(refresh).catch(function () {}); }, onChanged: refresh }) : null
+          ),
         el("div", { style: st.actions, marginTop: 4 },
           el("button", { style: st.btn, onClick: function () { doExport("csv"); } }, "导出 CSV"),
           el("button", { style: st.btn, onClick: function () { doExport("json"); } }, "导出 JSON"),
@@ -1372,7 +1439,7 @@ window.__ModuleLoader__.load({
               actionUrl ? el("a", { style: st.actionLink, href: actionUrl, target: "_blank", rel: "noreferrer" }, selected.actionLabel || "打开服务商凭据页面") : null
             )
           : null,
-        s.status === "loading" && !d ? el("div", { style: st.empty }, "正在查询余额…") : null,
+        s.status === "loading" && !d ? el(LoadingView, { text: "正在查询余额…" }) : null,
         d && d.ok
           ? el("div", { style: st.hero },
               el("div", { style: st.heroLabel }, heroLabel),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feiyang666/dsh-usage-plugin",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "DeepSeek Harness usage & cost tracker plugin: per-call token/cache-hit stats, peak/off-peak billing, DeepSeek balance query, CSV/JSON/PNG export with custom destination, and persistent local storage. Ships a host half plus a web client half in one npm package; installs into a DSH profile as a dsh.bundle with one command (dsh plugin --profile web add @feiyang666/dsh-usage-plugin).",
   "keywords": [
     "deepseek",

package/scripts/release.mjs

@@ -4,7 +4,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 const REPO = 'feiyang-dev/dsh-usage-plugin'
-const TAG = 'v1.10.0'
+const TAG = 'v1.11.1'
 
 function getCredential() {
   const input = 'protocol=https\nhost=github.com\n\n'
@@ -76,8 +76,9 @@ if (created.status !== 201) {
 const release = JSON.parse(created.body)
 console.log('release id:', release.id, 'url:', release.html_url)
 
-// 打包并上传 tarball 作为附件
-const pack = spawnSync('npm', ['pack'], { encoding: 'utf8' })
+// 打包并上传 tarball 作为附件（Windows 下 npm 为 npm.cmd 批处理脚本，需经 shell 执行）
+const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm'
+const pack = spawnSync(npmCmd, ['pack'], { encoding: 'utf8', shell: process.platform === 'win32' })
 const tgzName = (pack.stdout || '').trim().split('\n').pop()
 if (tgzName && fs.existsSync(tgzName)) {
   const buf = fs.readFileSync(tgzName)

package/scripts/upload-asset.mjs

@@ -3,7 +3,7 @@ import https from 'node:https'
 import fs from 'node:fs'
 
 const REPO = 'feiyang-dev/dsh-usage-plugin'
-const RELEASE_ID = 373691852
+const RELEASE_ID = 375098880
 
 function getCredential() {
   const input = 'protocol=https\nhost=github.com\n\n'