@dougen/dsh-deepseek-usage 0.3.0 → 0.3.1

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,28 @@ 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 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 +92,6 @@ window.__ModuleLoader__.load({
 				} catch (e) {
 					if (!mounted.current) return;
 					setError(e instanceof Error ? e.message : String(e));
-				} finally {
-					if (mounted.current) setSpinning(false);
 				}
 			}, []);
 
@@ -146,10 +146,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,30 +173,21 @@ 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);
@@ -207,15 +197,13 @@ window.__ModuleLoader__.load({
 		const inject = ["slots"];
 
 		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(

package/package.json

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