@dougen/dsh-deepseek-usage 0.8.0 → 0.9.0

package/README.md

@@ -154,6 +154,15 @@ node lib/pricing-remote.js --check --html page.html --json
 > `node --test --test-isolation=none "test/*.test.mjs"`（Node ≥ 22.8），或逐个跑
 > `node test/parse.test.mjs`、`node test/pricing.test.mjs`、`node test/pricing-store.test.mjs`、
 > `node test/client-layout.test.mjs`、`node test/host-route.test.mjs`。
+>
+> 两种偶发失败都属于环境限制，不是插件行为，逐文件运行可稳定复现通过：
+> - `host-route` 的"合并写回"用例依赖点击时的 `FORCED_GAP_MS`（30s）节流门；多个测试文件
+>   共用同一进程（`--test-isolation=none`）时那条"强制同步"可能被门挡掉。
+> - Windows 上原子写（写 `.tmp` 后 `rename`）可能被安全软件短暂占用而报
+>   `EPERM ... rename`；重跑即过。
+>
+> 另：`test/host-route.test.mjs` 与 `test/pricing-store.test.mjs` 都只需要一个可写的临时目录
+> （`os.tmpdir()`），若该目录不可写（`mkdtemp ... EPERM`），把 `TEMP`/`TMP` 指到任意可写目录即可。
 
 ## Uninstall / 卸载
 

package/lib/client.js

@@ -27,9 +27,11 @@ window.__ModuleLoader__.load({
 		// ---- constants -------------------------------------------------
 		const POLL_MS = 5 * 60 * 1000;
 		const USAGE_PATH = "/api/deepseek-usage";
-		// 常态卡片高度：上下 padding 8+8 + 余额行 lineHeight 28 + 边框 2 = 46。
-		// 异常态把卡片置空时用它兜住高度，侧边栏高度不跳动。
-		const CARD_MIN_HEIGHT = 46;
+		// 常态卡片高度：上下 padding 8+16 + 金额行 minHeight 28 + 边框 2 = 54。
+		// 底部多留的 8px 是为了让倒计时那一行与下方单价行之间有呼吸感。
+		// 倒计时与圆点都在金额行内定位，不额外增高（无头 Chromium 实测 cardH=54）。
+		// 异常态把卡片置空时用它兜住同一个高度，侧边栏高度不跳动。
+		const CARD_MIN_HEIGHT = 54;
 		// 卡片还没拿到余额时的快速重试节奏（宿主刚重启、接口刚起来、或本次请求失败）：
 		// 否则要等满 5 分钟轮询才会从空卡片变成真实数字。
 		const QUICK_RETRY_MS = [4000, 8000, 15000, 30000];
@@ -382,7 +384,9 @@ window.__ModuleLoader__.load({
 					boxSizing: "border-box",
 					flex: "1 1 100%",
 					minWidth: 0,
-					padding: "8px 10px",
+					// 上 8 下 10（配合单价行 bottom:2，这组是用户看过后选定的观感）。
+					// 顶部保持 8px 不动，圆点才能继续紧贴右上角。
+					padding: "8px 10px 12px",
 					borderRadius: 10,
 					border: "1px solid " + C.border,
 					background: C.bg,
@@ -399,35 +403,44 @@ window.__ModuleLoader__.load({
 				},
 				onClick: onCardClick,
 			},
-				// 第一行：余额（24px，符号与数字 3px 间距）。右侧留出"圆点 + 倒计时"的位置：
-				// 倒计时贴右，圆点再靠右，所以余额右侧 padding 是 100（约 3 个倒计时字符宽）。
-				h("div", { style: { display: "flex", alignItems: "baseline", minWidth: 0, paddingRight: 100, gap: 6 } },
+				// 金额行：余额 + 右侧「倒计时 + 峰谷圆点」。
+				// 倒计时与圆点放在同一个 flex 行里、alignItems:center，两者圆心必然重合；
+				// 整组 alignSelf:flex-start + 负 margin，让圆点距卡片顶/右各 8px。
+				// 两个反面做法都试过并实测过：
+				//   · alignSelf:center → 圆点被压到卡片中线，不再是"右上角"；
+				//   · paddingTop:6    → 金额行被撑高，卡片被撑大，圆点反而更靠下。
+				// 倒计时 minWidth:0 + overflow:hidden：窄侧边栏下先省略号截断，不挤压余额
+				// （实测 "2d 23h" 在 170px 宽的卡片里仍放得下）。
+				h("div", { style: { display: "flex", alignItems: "baseline", minHeight: 28, minWidth: 0, gap: 6 } },
 					h("span", { style: { fontWeight: 700, fontSize: 24, color: C.label, lineHeight: "28px", marginRight: 3 } }, symbol),
-					h("span", { style: { fontWeight: 700, fontSize: 24, color: C.label, lineHeight: "28px" } }, money(balance && balance.total))),
-				// 倒计时：距下次峰谷切换的剩余时间（`2d 15h` / `5h 47m` / `23m` / `switching`）。
-				// 与圆点同一行、位于圆点左侧；英文单位且无前缀，中英界面一致。
-				h("span", {
-					style: {
-						position: "absolute",
-						top: 9,
-						right: 27,
-						left: 9,
-						textAlign: "right",
-						fontSize: 12,
-						lineHeight: "14px",
-						color: C.sub,
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-					},
-				}, countdown),
-				// 峰谷指示灯：只有颜色（橙=高峰 / 绿=空闲），没有 title、没有其他文字。
-				h("span", { style: { position: "absolute", top: 8, right: 9, ...dot } }),
+					h("span", { style: { fontWeight: 700, fontSize: 24, color: C.label, lineHeight: "28px" } }, money(balance && balance.total)),
+					// 负 margin 只挪动整组，不改变金额行高度（卡片高度由内边距决定）。
+					// 实测：marginTop -4 与 marginRight -3 时，圆点距卡片顶、右各 8px
+					// （右侧不能按"内边距 10 − 8"去推，内边距本就含在行宽里）。
+					h("span", { style: { display: "flex", alignItems: "center", gap: 6, minWidth: 0, marginLeft: "auto", flex: "0 1 auto", alignSelf: "flex-start", marginTop: -4, marginRight: -3 } },
+						// 倒计时：距下次峰谷切换的剩余时间（`2d 15h` / `5h 47m` / `23m` / `switching`）。
+						// 纯英文单位、无前缀，中英界面一致。
+						// 字号/字重刻意与右下角单价数字对齐（继承卡片正文 12px、fontWeight 600），
+						// 让右上角这行和右下角单价行是同一套文字样式。
+						h("span", {
+							style: {
+								fontWeight: 600,
+								color: C.sub,
+								minWidth: 0,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+							},
+						}, countdown),
+						// 峰谷指示灯：只有颜色（橙=高峰 / 绿=空闲），没有 title、没有其他文字。
+						h("span", { style: dot }))),
 				// 底部行：只剩当前档单价，恒靠右下角。
+				// 这组 bottom:2 + 卡片下内边距 10 是用户看过多组对比后选定的观感（价格略微下移、
+				// 下方不再空一大块）。注意绝对定位的行不参与卡片高度计算，改内边距时两者要一起看。
 				// 用 flex-end 而不是 space-between：容器只有一个子元素时 space-between 会把它
 				// 推到最左侧（0.6.0 的回归点）。
 				h("span", {
-					style: { position: "absolute", left: 9, right: 9, bottom: 4, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 6 },
+					style: { position: "absolute", left: 9, right: 9, bottom: 2, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 6 },
 				},
 					h("span", { style: { display: "inline-flex", alignItems: "center", gap: 5, flex: "none" } },
 						Price(h(IconIn, null), t("price.input"), tier && tier.input),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dougen/dsh-deepseek-usage",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "DeepSeek 余额侧边栏插件：余额（官方 API）、当前档单价与峰谷时段指示灯，支持中/英文界面。",
   "type": "module",
   "main": "lib/index.js",