@dougen/dsh-deepseek-usage 0.3.0 → 0.3.2

package/README.md

@@ -11,9 +11,9 @@ DeepSeek 用量侧边栏插件（DeepSeek Harness Web UI）
 ## 功能
 
 - **余额**：`¥ 110.00` 大字显示（符号随账号币种自动切换：人民币 `¥` / 美元 `$`）
-- **档单价**：`↑¥1.50 · 💾¥0.05 · ↓¥4.50`（输入 / 输入缓存 / 输出，随当前启用模型与峰谷时段自动切换，符号跟随余额币种）
+- **档单价**：`→|1.5 ⚡0.05 |→4.5`（输入 / 输入缓存 / 输出，位于卡片右下角；随当前启用模型与峰谷时段自动切换，**切换模型时立即同步**）
 - **峰谷指示灯**：卡片右上角，高峰（9:00–12:00、14:00–18:00 北京时间）橙色，空闲绿色
-- **自动刷新**：每 5 分钟一次；点击卡片任意位置立即刷新，刷新时右下角显示旋转图标
+- **自动刷新**：每 5 分钟一次；点击卡片任意位置立即刷新
 - 跟随应用明暗主题
 
 ## 安装

package/lib/client.js

@@ -2,8 +2,9 @@
 //
 // 侧边栏底部用量卡片（注册进 `sidebar.footer.action` 槽位，独占一行，位于
 // Cordis 面板按钮下方）。轮询宿主路由 `/api/deepseek-usage`（见 lib/index.js）
-// 每 5 分钟一次，点击卡片任意位置可立即刷新；右下角在刷新时显示旋转 ⟳ 图标。
-// 卡片显示：余额（放大显示，人民币符号）+ 当前模型档单价（输入/输入缓存/输出）。
+// 每 5 分钟一次，点击卡片任意位置可立即刷新。
+// 卡片显示：余额（放大显示，符号随币种 ¥/$）+ 当前模型档单价（输入/输入缓存/
+// 输出，图标 + 数字，位于卡片右下角）+ 峰谷指示灯（右上角）。
 // 样式仅使用 `--dsw-*` 主题变量（含兜底值），跟随明暗主题。
 window.__ModuleLoader__.load({
 	id: "@dougen/dsh-deepseek-usage",
@@ -44,8 +45,8 @@ window.__ModuleLoader__.load({
 		};
 
 		const svgBase = {
-			width: 11,
-			height: 11,
+			width: 12,
+			height: 12,
 			viewBox: "0 0 24 24",
 			fill: "none",
 			stroke: "currentColor",
@@ -54,27 +55,29 @@ window.__ModuleLoader__.load({
 			strokeLinejoin: "round",
 			style: { flex: "none", display: "block" },
 		};
+		// 输入：右箭头指向右边界（→|，数据进入边界）
 		const IconIn = () => h("svg", svgBase,
-			h("path", { d: "M12 19V5" }),
-			h("path", { d: "M5 12l7-7 7 7" }));
+			h("path", { d: "M20 4v16" }),
+			h("path", { d: "M20 12H6" }),
+			h("path", { d: "M10 7l5 5-5 5" }));
+		// 输出：左边界发出右箭头（|→，数据从边界流出）
 		const IconOut = () => h("svg", svgBase,
-			h("path", { d: "M12 5v14" }),
-			h("path", { d: "M19 12l-7 7-7-7" }));
+			h("path", { d: "M4 4v16" }),
+			h("path", { d: "M4 12h14" }),
+			h("path", { d: "M14 7l5 5-5 5" }));
+		// 缓存：闪电（缓存命中，快）
 		const IconCache = () => h("svg", svgBase,
-			h("ellipse", { cx: 12, cy: 5, rx: 8, ry: 3 }),
-			h("path", { d: "M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5" }),
-			h("path", { d: "M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" }));
+			h("path", { d: "M13 2 3 14h7l-1 8 10-12h-7l1-8z" }));
 
 		// ---- the widget -------------------------------------------------
 		function UsageCell(props) {
+			const ctx = props.ctx;
 			const wide = !!props.wide;
 			const [data, setData] = useState(null);
 			const [error, setError] = useState("");
-			const [spinning, setSpinning] = useState(false);
 			const mounted = useRef(true);
 
 			const load = useCallback(async () => {
-				setSpinning(true);
 				try {
 					const res = await fetch(USAGE_PATH, { cache: "no-store" });
 					let body = null;
@@ -90,8 +93,6 @@ window.__ModuleLoader__.load({
 				} catch (e) {
 					if (!mounted.current) return;
 					setError(e instanceof Error ? e.message : String(e));
-				} finally {
-					if (mounted.current) setSpinning(false);
 				}
 			}, []);
 
@@ -99,11 +100,25 @@ window.__ModuleLoader__.load({
 				mounted.current = true;
 				load();
 				const timer = setInterval(load, POLL_MS);
+				// 模型切换（写入 settings 触发 document-updated）时立即刷新，价格同步。
+				let off = null;
+				try {
+					if (ctx && ctx.remote && typeof ctx.remote.$on === "function") {
+						off = ctx.remote.$on("settings/document-updated", () => {
+							try { load(); } catch (e) { /* 忽略刷新错误 */ }
+						});
+					}
+				} catch (e) {
+					off = null;
+				}
 				return () => {
 					mounted.current = false;
 					clearInterval(timer);
+					try {
+						if (typeof off === "function") off();
+					} catch (e) { /* 忽略退订错误 */ }
 				};
-			}, [load]);
+			}, [load, ctx]);
 
 			const balance = data && data.balance ? data.balance : null;
 			const tier = data && data.tier ? data.tier : null;
@@ -146,10 +161,9 @@ window.__ModuleLoader__.load({
 			}
 
 			const Price = (icon, label, value) =>
-				h("span", { style: { display: "inline-flex", alignItems: "center", gap: 3, minWidth: 0, color: C.sub } },
+				h("span", { style: { display: "inline-flex", alignItems: "center", gap: 3, minWidth: 0, color: C.sub, whiteSpace: "nowrap" } },
 					h("span", { style: { display: "inline-flex", alignItems: "center" }, title: label }, icon),
-					h("span", { style: { fontWeight: 600, whiteSpace: "nowrap" } }, symbol + fmtPrice(value)));
-			const Sep = () => h("span", { style: { color: C.sub, margin: "0 3px", fontSize: 10 } }, "·");
+					h("span", { style: { fontWeight: 600 } }, fmtPrice(value)));
 
 			return h("div", {
 				style: {
@@ -174,53 +188,42 @@ window.__ModuleLoader__.load({
 				title,
 				onClick: load,
 			},
-				// 第一行：余额（24px，符号与数字 3px 间距）+ 当前档单价（灰色，跟在余额后，字号不变）
+				// 第一行：余额（24px，符号与数字 3px 间距）
 				h("div", { style: { display: "flex", alignItems: "baseline", minWidth: 0, paddingRight: 14, 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)),
-					h("span", { style: { display: "inline-flex", alignItems: "center", gap: 3, marginLeft: 10 } },
-						Price(h(IconIn, null), "输入", tier && tier.input),
-						Sep(),
-						Price(h(IconCache, null), "输入缓存", tier && tier.cacheRead),
-						Sep(),
-						Price(h(IconOut, null), "输出", tier && tier.output))),
+					h("span", { style: { fontWeight: 700, fontSize: 24, color: C.label, lineHeight: "28px" } }, money(balance && balance.total))),
 				h("span", {
 					style: { position: "absolute", top: 8, right: 9, ...dot },
 					title: data && data.peak ? "高峰时段 " + (data.peakHours || "") : "空闲时段",
 				}),
-				// 刷新指示：卡片右下角
+				// 当前档单价：卡片右下角
 				h("span", {
-					className: "dsw-usage-refresh",
-					style: { position: "absolute", bottom: 8, right: 9, display: "inline-flex", alignItems: "center", color: C.sub },
-					title: "刷新中",
+					style: { position: "absolute", right: 9, bottom: 4, display: "inline-flex", alignItems: "center", gap: 5 },
 				},
-					spinning
-						? h("svg", { width: 11, height: 11, viewBox: "0 0 16 16", fill: "none", style: { animation: "dsh-usage-spin .8s linear infinite" } },
-							h("path", { d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 1.5v3h-3", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }))
-						: null),
+					Price(h(IconIn, null), "输入", tier && tier.input),
+					Price(h(IconCache, null), "输入缓存", tier && tier.cacheRead),
+					Price(h(IconOut, null), "输出", tier && tier.output)),
 				errs.length
 					? h("div", { style: { color: C.err, fontSize: 10, whiteSpace: "pre-wrap" } }, errs.join(" | "))
 					: null);
 		}
 
 		// ---- client plugin body -----------------------------------------
-		const inject = ["slots"];
+		const inject = ["slots", "remote"];
 
 		function apply(ctx) {
-			// 注入本包样式：footerActions 换行（卡片独占一行）＋ 刷新旋转动画。
+			// 注入本包样式：footerActions 换行（卡片独占一行）。
 			const tagId = "dsh-deepseek-usage";
 			if (typeof document !== "undefined" && document.querySelector(`style[data-plugin-css="${tagId}"]`) === null) {
 				const style = document.createElement("style");
 				style.dataset.plugin = "dsh-deepseek-usage";
 				style.dataset.pluginCss = tagId;
-				style.textContent =
-					'div[class*="footerActions"]{flex-wrap:wrap}' +
-					"@keyframes dsh-usage-spin{to{transform:rotate(360deg)}}";
+				style.textContent = 'div[class*="footerActions"]{flex-wrap:wrap}';
 				document.head.appendChild(style);
 			}
 			ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register(
 				{ name: "sidebar.footer.action", id: "dsh-usage", order: 100, label: "DeepSeek 用量" },
-				(props) => h(UsageCell, { wide: props.wide }),
+				(props) => h(UsageCell, { wide: props.wide, ctx }),
 			));
 		}
 

package/lib/index.js

@@ -93,6 +93,16 @@ function apply(ctx) {
             return sendJson(res, 403, { ok: false, error: "forbidden", message: "仅允许本机访问" });
           }
 
+          // ---- 当前模型当前档单价（展示用）----
+          const now = Date.now();
+          let model = DEFAULT_MODEL;
+          try {
+            const adm = ctx.get("agentDefaultModel");
+            const selection = adm && typeof adm.currentSelection === "function" ? adm.currentSelection() : void 0;
+            if (selection && typeof selection.model === "string") model = selection.model;
+          } catch {}
+          const unit = unitAt(model, now);
+
           const errors = [];
 
           // ---- 余额（官方接口，API Key）----
@@ -124,15 +134,7 @@ function apply(ctx) {
             errors.push(`余额获取失败: ${error instanceof Error ? error.message : String(error)}`);
           }
 
-          // ---- 当前模型当前档单价 + 峰谷（展示用）----
-          const now = Date.now();
-          let model = DEFAULT_MODEL;
-          try {
-            const adm = ctx.get("agentDefaultModel");
-            const selection = adm && typeof adm.currentSelection === "function" ? adm.currentSelection() : void 0;
-            if (selection && typeof selection.model === "string") model = selection.model;
-          } catch {}
-          const unit = unitAt(model, now);
+          // ---- 档单价提示（未知模型回退 chat 档）----
           if (!unit.known) errors.push(`当前模型 ${model} 不在价格表，档单价按 deepseek-chat 展示`);
 
           sendJson(res, 200, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dougen/dsh-deepseek-usage",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "DeepSeek 用量侧边栏插件：余额（官方 API）、当前档单价与峰谷时段指示灯。",
   "type": "module",
   "main": "lib/index.js",