@iasiv5/dsh-quota-watch 0.0.14 → 0.0.16

package/lib/client.js

@@ -88,7 +88,7 @@ var CARD_SELECTOR = "[data-dsh-quota-watch-card]";
 var FETCH_TIMEOUT_MS = 15e3;
 var COPY = {
   zh: {
-    title: "\u5957\u9910\u76D1\u63A7",
+    title: "Token\u989D\u5EA6",
     openDetails: "\u67E5\u770B\u8BE6\u60C5",
     backToOverview: "\u8FD4\u56DE\u989D\u5EA6\u6982\u89C8",
     providerNames: { glm: "GLM", copilot: "Copilot" },
@@ -166,7 +166,7 @@ var STYLE_TEXT = `
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
-.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger svg { display: block; width: 22px; height: 22px; }
 .dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -177,8 +177,10 @@ var STYLE_TEXT = `
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dqw-pop { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-pop[hidden] { display: none; }
 .dqw-pop *, .dqw-pop *::before, .dqw-pop *::after { box-sizing: border-box; }
+.dqw-pop-header { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .dqw-pop-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
-.dqw-pop-back { align-self: flex-start; margin: 0; padding: 3px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 10.5px; line-height: 14px; cursor: pointer; }
+.dqw-pop-back { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; }
+.dqw-pop-back svg { display: block; width: 16px; height: 16px; }
 .dqw-pop-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-overview-list { display: flex; flex-direction: column; gap: 2px; }
 .dqw-overview-row { display: flex; align-items: center; width: 100%; gap: 6px; margin: 0; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@@ -250,8 +252,8 @@ function quotaIcon(doc) {
   const namespace = "http://www.w3.org/2000/svg";
   const svg = doc.createElementNS(namespace, "svg");
   svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("width", "16");
-  svg.setAttribute("height", "16");
+  svg.setAttribute("width", "22");
+  svg.setAttribute("height", "22");
   svg.setAttribute("fill", "none");
   svg.setAttribute("stroke", "currentColor");
   svg.setAttribute("stroke-width", "1.7");
@@ -259,17 +261,39 @@ function quotaIcon(doc) {
   svg.setAttribute("stroke-linejoin", "round");
   svg.setAttribute("aria-hidden", "true");
   svg.setAttribute("focusable", "false");
-  const arc = doc.createElementNS(namespace, "path");
-  arc.setAttribute("d", "M4 17a8 8 0 0 1 16 0");
+  const dial = doc.createElementNS(namespace, "circle");
+  dial.setAttribute("cx", "12");
+  dial.setAttribute("cy", "12");
+  dial.setAttribute("r", "9");
+  const ticks = doc.createElementNS(namespace, "path");
+  ticks.setAttribute("d", "M12 2.7v2.1M12 19.2v2.1M2.7 12h2.1M19.2 12h2.1M5.43 5.43l1.49 1.49M17.08 17.08l1.49 1.49M18.57 5.43l-1.49 1.49M6.92 17.08l-1.49 1.49");
   const needle = doc.createElementNS(namespace, "path");
-  needle.setAttribute("d", "m12 17 3.2-5.2");
+  needle.setAttribute("d", "M12 12l4.5-4");
   const hub = doc.createElementNS(namespace, "circle");
   hub.setAttribute("cx", "12");
-  hub.setAttribute("cy", "17");
-  hub.setAttribute("r", "1");
+  hub.setAttribute("cy", "12");
+  hub.setAttribute("r", "1.2");
   hub.setAttribute("fill", "currentColor");
   hub.setAttribute("stroke", "none");
-  svg.append(arc, needle, hub);
+  svg.append(dial, ticks, needle, hub);
+  return svg;
+}
+function backIcon(doc) {
+  const namespace = "http://www.w3.org/2000/svg";
+  const svg = doc.createElementNS(namespace, "svg");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("width", "16");
+  svg.setAttribute("height", "16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.7");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const chevrons = doc.createElementNS(namespace, "path");
+  chevrons.setAttribute("d", "M11 4 7 8l4 4M7 4 3 8l4 4");
+  svg.append(chevrons);
   return svg;
 }
 function kvRow(doc, label, value) {
@@ -478,13 +502,17 @@ function mountQuotaCard({
   function renderDetail(detail, key, provider, fromRail = false) {
     detail.replaceChildren();
     if (fromRail) {
+      const header = doc.createElement("div");
+      header.className = "dqw-pop-header";
       const back = doc.createElement("button");
       back.type = "button";
       back.className = "dqw-pop-back";
       back.dataset.action = "back-to-overview";
       back.setAttribute("aria-label", copy.backToOverview);
-      back.textContent = copy.backToOverview;
-      detail.append(back, text(doc, "p", "dqw-pop-title", copy.providerNames[key]));
+      back.title = copy.backToOverview;
+      back.append(backIcon(doc));
+      header.append(back, text(doc, "p", "dqw-pop-title", copy.providerNames[key]));
+      detail.append(header);
     }
     if (provider?.status === "stale") {
       detail.append(text(doc, "p", "dqw-error", `${copy.stale}${provider.error ? `: ${provider.error}` : ""}`));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iasiv5/dsh-quota-watch",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "DSH Web sidebar monitor for GLM Coding Plan quotas and GitHub Copilot credits",
   "type": "module",
   "main": "./src/host.mjs",

package/src/client.mjs

@@ -9,7 +9,7 @@ const FETCH_TIMEOUT_MS = 15_000
 
 const COPY = {
   zh: {
-    title: '套餐监控',
+    title: 'Token额度',
     openDetails: '查看详情',
     backToOverview: '返回额度概览',
     providerNames: { glm: 'GLM', copilot: 'Copilot' },
@@ -88,7 +88,7 @@ const STYLE_TEXT = `
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
-.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger svg { display: block; width: 22px; height: 22px; }
 .dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -99,8 +99,10 @@ const STYLE_TEXT = `
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dqw-pop { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, #1f1f1f)); } }
 .dqw-pop[hidden] { display: none; }
 .dqw-pop *, .dqw-pop *::before, .dqw-pop *::after { box-sizing: border-box; }
+.dqw-pop-header { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .dqw-pop-title { margin: 0; font-size: 11px; font-weight: 600; line-height: 16px; }
-.dqw-pop-back { align-self: flex-start; margin: 0; padding: 3px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 10.5px; line-height: 14px; cursor: pointer; }
+.dqw-pop-back { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; }
+.dqw-pop-back svg { display: block; width: 16px; height: 16px; }
 .dqw-pop-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-overview-list { display: flex; flex-direction: column; gap: 2px; }
 .dqw-overview-row { display: flex; align-items: center; width: 100%; gap: 6px; margin: 0; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@@ -179,8 +181,8 @@ function quotaIcon(doc) {
   const namespace = 'http://www.w3.org/2000/svg'
   const svg = doc.createElementNS(namespace, 'svg')
   svg.setAttribute('viewBox', '0 0 24 24')
-  svg.setAttribute('width', '16')
-  svg.setAttribute('height', '16')
+  svg.setAttribute('width', '22')
+  svg.setAttribute('height', '22')
   svg.setAttribute('fill', 'none')
   svg.setAttribute('stroke', 'currentColor')
   svg.setAttribute('stroke-width', '1.7')
@@ -188,17 +190,40 @@ function quotaIcon(doc) {
   svg.setAttribute('stroke-linejoin', 'round')
   svg.setAttribute('aria-hidden', 'true')
   svg.setAttribute('focusable', 'false')
-  const arc = doc.createElementNS(namespace, 'path')
-  arc.setAttribute('d', 'M4 17a8 8 0 0 1 16 0')
+  const dial = doc.createElementNS(namespace, 'circle')
+  dial.setAttribute('cx', '12')
+  dial.setAttribute('cy', '12')
+  dial.setAttribute('r', '9')
+  const ticks = doc.createElementNS(namespace, 'path')
+  ticks.setAttribute('d', 'M12 2.7v2.1M12 19.2v2.1M2.7 12h2.1M19.2 12h2.1M5.43 5.43l1.49 1.49M17.08 17.08l1.49 1.49M18.57 5.43l-1.49 1.49M6.92 17.08l-1.49 1.49')
   const needle = doc.createElementNS(namespace, 'path')
-  needle.setAttribute('d', 'm12 17 3.2-5.2')
+  needle.setAttribute('d', 'M12 12l4.5-4')
   const hub = doc.createElementNS(namespace, 'circle')
   hub.setAttribute('cx', '12')
-  hub.setAttribute('cy', '17')
-  hub.setAttribute('r', '1')
+  hub.setAttribute('cy', '12')
+  hub.setAttribute('r', '1.2')
   hub.setAttribute('fill', 'currentColor')
   hub.setAttribute('stroke', 'none')
-  svg.append(arc, needle, hub)
+  svg.append(dial, ticks, needle, hub)
+  return svg
+}
+
+function backIcon(doc) {
+  const namespace = 'http://www.w3.org/2000/svg'
+  const svg = doc.createElementNS(namespace, 'svg')
+  svg.setAttribute('viewBox', '0 0 16 16')
+  svg.setAttribute('width', '16')
+  svg.setAttribute('height', '16')
+  svg.setAttribute('fill', 'none')
+  svg.setAttribute('stroke', 'currentColor')
+  svg.setAttribute('stroke-width', '1.7')
+  svg.setAttribute('stroke-linecap', 'round')
+  svg.setAttribute('stroke-linejoin', 'round')
+  svg.setAttribute('aria-hidden', 'true')
+  svg.setAttribute('focusable', 'false')
+  const chevrons = doc.createElementNS(namespace, 'path')
+  chevrons.setAttribute('d', 'M11 4 7 8l4 4M7 4 3 8l4 4')
+  svg.append(chevrons)
   return svg
 }
 
@@ -427,13 +452,17 @@ export function mountQuotaCard({
   function renderDetail(detail, key, provider, fromRail = false) {
     detail.replaceChildren()
     if (fromRail) {
+      const header = doc.createElement('div')
+      header.className = 'dqw-pop-header'
       const back = doc.createElement('button')
       back.type = 'button'
       back.className = 'dqw-pop-back'
       back.dataset.action = 'back-to-overview'
       back.setAttribute('aria-label', copy.backToOverview)
-      back.textContent = copy.backToOverview
-      detail.append(back, text(doc, 'p', 'dqw-pop-title', copy.providerNames[key]))
+      back.title = copy.backToOverview
+      back.append(backIcon(doc))
+      header.append(back, text(doc, 'p', 'dqw-pop-title', copy.providerNames[key]))
+      detail.append(header)
     }
     if (provider?.status === 'stale') {
       detail.append(text(doc, 'p', 'dqw-error', `${copy.stale}${provider.error ? `: ${provider.error}` : ''}`))