dsh-remote-control 1.2.0 → 2.0.0

package/dist/bundle/client.cjs

@@ -36,6 +36,7 @@ module.exports = __toCommonJS(main_exports);
 var STATUS_ROUTE = "/plugins/dsh-remote-control/status";
 var NEW_ROUTE = "/plugins/dsh-remote-control/pairing/new";
 var IMAGE_ROUTE = "/plugins/dsh-remote-control/pairing.png";
+var UNPAIR_ROUTE = "/plugins/dsh-remote-control/unpair";
 var SLOT_NAME = "conversation.composer.dock";
 var PILL_ID = "dsh-remote-control";
 var PILL_ORDER = 20;
@@ -65,34 +66,53 @@ function panelViewFor(answer, httpStatus) {
 function pillLabel(status) {
   const relay = status?.relay;
   if (relay === "idle") return { text: "\u8FDC\u7A0B\u672A\u542F\u52A8", tone: "off" };
-  if (relay === "offline") return { text: "\u8FDC\u7A0B\u672A\u8FDE\u63A5", tone: "off" };
+  if (relay === "offline") return { text: "\u5DF2\u65AD\u5F00\u8FDE\u63A5", tone: "error" };
   if (relay === "connecting") return { text: "\u8FDE\u63A5\u4E2D", tone: "wait" };
   if (relay !== "online") return { text: "\u8FDC\u7A0B\u63A7\u5236", tone: "off" };
   const paired = typeof status?.paired === "number" ? status.paired : 0;
-  return paired > 0 ? { text: "\u5DF2\u914D\u5BF9", tone: "on" } : { text: "\u672A\u914D\u5BF9", tone: "off" };
+  if (paired > 0) {
+    const waiting = waitingCount(status);
+    if (waiting > 0) return { text: `\u7B49 ${waiting} \u4EF6\u4E8B`, tone: "wait" };
+    return { text: "\u5DF2\u914D\u5BF9", tone: "on" };
+  }
+  return { text: "\u672A\u914D\u5BF9", tone: "off" };
+}
+function waitingCount(status) {
+  const count = status?.waiting;
+  return typeof count === "number" && count > 0 ? Math.min(Math.floor(count), 99) : 0;
+}
+function humanDuration(sec) {
+  const total = typeof sec === "number" && sec > 0 ? Math.floor(sec) : 0;
+  if (total < 60) return `${total} \u79D2`;
+  const minutes = Math.floor(total / 60);
+  return minutes >= 10 ? `${minutes} \u5206` : `${minutes} \u5206 ${total % 60} \u79D2`;
+}
+function waitingRow(status) {
+  const count = waitingCount(status);
+  if (count === 0) return "";
+  const oldest = typeof status?.waitingOldestSec === "number" ? status.waitingOldestSec : 0;
+  return `${count} \u4EF6${oldest > 0 ? ` \xB7 \u6700\u4E45 ${humanDuration(oldest)}` : ""}`.slice(0, 40);
 }
-var RELAY_TEXT = {
-  online: "\u5DF2\u8FDE\u63A5",
-  connecting: "\u8FDE\u63A5\u4E2D",
-  offline: "\u672A\u8FDE\u63A5",
-  idle: "\u672A\u542F\u52A8"
-};
 function relayAddress(url) {
   if (typeof url !== "string" || url.trim() === "") return "";
   const withoutScheme = url.trim().replace(/^[a-z][a-z0-9+.-]*:\/\//i, "");
   const authority = /^[^/?]*/.exec(withoutScheme)?.[0] ?? "";
   return authority.slice(0, 40);
 }
-function infoRows(status) {
-  const rows = [];
-  const label = typeof status?.hostLabel === "string" ? status.hostLabel.trim() : "";
-  if (label !== "") rows.push(["\u672C\u673A", label]);
-  const server = relayAddress(status?.serverUrl);
-  if (server !== "") rows.push(["\u4E2D\u7EE7", server]);
-  const relay = typeof status?.relay === "string" ? status.relay : "";
-  rows.push(["\u72B6\u6001", RELAY_TEXT[relay] ?? "\u672A\u77E5"]);
-  rows.push(["\u5DF2\u914D\u5BF9", `${typeof status?.paired === "number" ? status.paired : 0} \u53F0`]);
-  return rows;
+function relayRow(status) {
+  return relayAddress(status?.serverUrl);
+}
+function relayStateRow(status) {
+  const relay = status?.relay;
+  if (relay === "online") return "\u5DF2\u8FDE\u63A5";
+  if (relay === "connecting") return "\u8FDE\u63A5\u4E2D";
+  if (relay === "offline") return "\u5DF2\u65AD\u5F00";
+  if (relay === "idle") return "\u672A\u542F\u52A8";
+  return "";
+}
+function versionRow(status) {
+  const version = status?.version;
+  return typeof version === "string" && version.trim() !== "" ? version.trim().slice(0, 24) : "";
 }
 function secondsText(ms) {
   const whole = Math.max(0, Math.round(ms / 1e3));
@@ -112,24 +132,36 @@ var CSS = `
 .drc-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--dsw-alias-label-dimmed, #9aa0a6); }
 .drc-dot[data-tone="wait"] { background: var(--dsw-alias-state-warn-primary, #faad14); }
 .drc-dot[data-tone="on"] { background: var(--dsw-alias-state-success-primary, #52c41a); }
+.drc-dot[data-tone="error"] { background: var(--dsw-alias-state-error-primary, #ff4d4f); }
 .drc-panel { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; width: 240px;
-  padding: 12px 14px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.1)); border-radius: 12px;
+  padding: 10px 12px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.1)); border-radius: 12px;
   background: var(--dsw-specific-tip, var(--dsw-alias-bg-layer-1, #ffffff));
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
   color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 18px; }
-/* \u8FDE\u63A5\u4FE1\u606F\u90A3\u4E00\u680F\uFF1A\u952E\u5DE6\u503C\u53F3\uFF0C\u503C\u88AB\u622A\u65AD\u65F6\u7701\u7565\u53F7\u2014\u2014\u548C\u90A3\u9897 pill \u540C\u4E00\u5957"\u6324\u4E0D\u4E0B\u5C31\u622A\u6587\u5B57\u4E0D\u6491\u5BB9\u5668"\u3002 */
-.drc-info { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px;
-  padding-bottom: 6px; border-bottom: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08)); }
-.drc-row { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
+/* \u62AC\u5934\u4E00\u884C\uFF1A\u5DE6\u4FA7\u72B6\u6001\uFF0C\u53F3\u4FA7\u52A8\u4F5C\u3002\u4E24\u9897\u6309\u94AE\u90FD\u6536\u5728\u8FD9\u4E2A\u53F3\u4E0A\u89D2\uFF082026-10-03 \u91CD\u8BBE\u8BA1\u7684\u8981\u6C42\uFF09\u3002 */
+.drc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.drc-head-label { font-weight: 600; }
+.drc-head-label[data-tone="off"] { color: var(--dsw-alias-label-secondary, #6b7280); }
+.drc-head-label[data-tone="wait"] { color: var(--dsw-alias-state-warn-primary, #faad14); }
+.drc-head-label[data-tone="on"] { color: var(--dsw-alias-state-success-primary, #52c41a); }
+.drc-head-label[data-tone="error"] { color: var(--dsw-alias-state-error-primary, #ff4d4f); }
+.drc-actions { display: flex; gap: 6px; flex: 0 0 auto; }
+.drc-btn { padding: 2px 10px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.1));
+  border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer;
+  white-space: nowrap; }
+.drc-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04)); }
+/* \u6B63\u6587\u90A3\u4E09\u884C\uFF08\u4E2D\u7EE7 / \u72B6\u6001 / \u7248\u672C\uFF09\uFF1A\u952E\u5DE6\u503C\u53F3\uFF08space-between\uFF09\uFF0C\u503C\u88AB\u622A\u65AD\u65F6\u7701\u7565\u53F7\u2014\u2014
+   \u548C\u90A3\u9897 pill \u540C\u4E00\u5957"\u6324\u4E0D\u4E0B\u5C31\u622A\u6587\u5B57\u4E0D\u6491\u5BB9\u5668"\u3002\u7B2C\u4E00\u884C\u5E26\u90A3\u6761\u5206\u9694\u7EBF\uFF0C\u540E\u4E24\u884C\u53EA\u7559\u884C\u8DDD\u3002 */
+.drc-info { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
+  white-space: nowrap; margin-top: 8px; padding-top: 6px;
+  border-top: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08)); }
+.drc-info + .drc-info { margin-top: 2px; padding-top: 0; border-top: 0; }
 .drc-key { flex: 0 0 auto; color: var(--dsw-alias-label-tertiary); }
-.drc-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
-.drc-qr { display: block; width: 200px; height: 200px; margin: 0 auto; image-rendering: pixelated; }
+.drc-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.drc-qr { display: block; width: 200px; height: 200px; margin: 8px auto 0; image-rendering: pixelated; }
 .drc-code { margin: 8px 0 0; text-align: center; font-weight: 600; font-size: 14px; letter-spacing: 2px; }
 .drc-note { margin: 4px 0 0; text-align: center; color: var(--dsw-alias-label-tertiary); }
 .drc-note[data-kind="failed"] { color: var(--dsw-alias-state-error-primary, #ff4d4f); }
-.drc-actions { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
-.drc-btn { padding: 2px 10px; border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.1));
-  border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
 `;
 function isSlots(value) {
   if (!value || typeof value !== "object") return false;
@@ -168,7 +200,11 @@ function warn(message, error) {
 }
 function ensureStyle(doc) {
   try {
-    if (doc.querySelector(`style[data-plugin-css="${STYLE_ID}"]`)) return;
+    const existing = doc.querySelector(`style[data-plugin-css="${STYLE_ID}"]`);
+    if (existing) {
+      if (existing.textContent !== CSS) existing.textContent = CSS;
+      return;
+    }
     const element = doc.createElement("style");
     element.setAttribute("data-plugin-css", STYLE_ID);
     element.textContent = CSS;
@@ -222,59 +258,61 @@ function buildPill(root, deps) {
     node.addEventListener("click", onClick);
     return node;
   };
-  const infoBlock = () => {
-    if (!lastStatus) return void 0;
-    const box = doc.createElement("div");
-    box.className = "drc-info";
-    for (const [key, value] of infoRows(lastStatus)) {
+  const qrNote = () => expiresInMs > 0 ? `\u626B\u7801\u914D\u5BF9 \xB7 ${secondsText(expiresInMs)}\u540E\u8FC7\u671F` : "\u914D\u5BF9\u7801\u5DF2\u8FC7\u671F\uFF0C\u70B9\u53F3\u4E0A\u89D2\u300C\u5237\u65B0\u300D\u91CD\u65B0\u751F\u6210";
+  const header = () => {
+    const head = doc.createElement("div");
+    head.className = "drc-head";
+    const state = pillLabel(lastStatus);
+    const stateText = text("span", "drc-head-label", state.text);
+    stateText.setAttribute("data-tone", state.tone);
+    head.appendChild(stateText);
+    const actions = doc.createElement("div");
+    actions.className = "drc-actions";
+    const action = pairedNow() > 0 ? { label: "\u9000\u51FA\u914D\u5BF9", run: requestUnpair } : { label: "\u5237\u65B0", run: requestPairing };
+    actions.appendChild(buttonOf(action.label, () => void action.run()));
+    head.appendChild(actions);
+    return head;
+  };
+  const infoRows = () => {
+    if (!lastStatus) return [];
+    const rows = [
+      // 排第一：它是唯一一条"看完要做点什么"的，其余三条都是"知道就行"。
+      ["\u5F85\u5904\u7406", waitingRow(lastStatus)],
+      ["\u4E2D\u7EE7", relayRow(lastStatus)],
+      ["\u72B6\u6001", relayStateRow(lastStatus)],
+      ["\u7248\u672C", versionRow(lastStatus)]
+    ];
+    return rows.filter(([, value]) => value !== "").map(([key, value]) => {
       const row = doc.createElement("div");
-      row.className = "drc-row";
+      row.className = "drc-info";
       row.appendChild(text("span", "drc-key", key));
       row.appendChild(text("span", "drc-value", value));
-      box.appendChild(row);
-    }
-    return box;
+      return row;
+    });
   };
   const paint = () => {
     if (!panel) return;
     panel.replaceChildren();
-    const info = infoBlock();
-    if (info) panel.appendChild(info);
-    if (view.kind === "info") {
-      const actions2 = doc.createElement("div");
-      actions2.className = "drc-actions";
-      actions2.appendChild(buttonOf(pairedNow() > 0 ? "\u518D\u914D\u4E00\u53F0" : "\u751F\u6210\u914D\u5BF9\u7801", () => void requestPairing()));
-      panel.appendChild(actions2);
-      return;
-    }
+    panel.appendChild(header());
     if (view.kind === "loading") {
       panel.appendChild(text("p", "drc-note", "\u6B63\u5728\u751F\u6210\u914D\u5BF9\u7801\u2026"));
-      return;
-    }
-    if (view.kind === "qr") {
+    } else if (view.kind === "qr") {
       const image = doc.createElement("img");
       image.className = "drc-qr";
       image.setAttribute("alt", "\u914D\u5BF9\u4E8C\u7EF4\u7801");
       image.src = view.imageSrc;
       panel.appendChild(image);
       panel.appendChild(text("p", "drc-code", view.token));
-      panel.appendChild(text("p", "drc-note", `\u626B\u7801\u914D\u5BF9 \xB7 ${secondsText(expiresInMs)}\u540E\u8FC7\u671F`));
-      const actions2 = doc.createElement("div");
-      actions2.className = "drc-actions";
-      actions2.appendChild(buttonOf("\u6362\u4E00\u5F20", () => void requestPairing()));
-      panel.appendChild(actions2);
-      return;
+      panel.appendChild(text("p", "drc-note", qrNote()));
+    } else if (view.kind === "unavailable" || view.kind === "failed") {
+      const note = view.kind === "unavailable" ? text("p", "drc-note", view.reason) : (() => {
+        const node = text("p", "drc-note", `\u914D\u5BF9\u8BF7\u6C42\u6CA1\u6210\u529F\uFF1A${view.detail}`);
+        node.setAttribute("data-kind", "failed");
+        return node;
+      })();
+      panel.appendChild(note);
     }
-    const note = view.kind === "unavailable" ? text("p", "drc-note", view.reason) : (() => {
-      const node = text("p", "drc-note", `\u914D\u5BF9\u8BF7\u6C42\u6CA1\u6210\u529F\uFF1A${view.detail}`);
-      node.setAttribute("data-kind", "failed");
-      return node;
-    })();
-    panel.appendChild(note);
-    const actions = doc.createElement("div");
-    actions.className = "drc-actions";
-    actions.appendChild(buttonOf("\u518D\u8BD5\u4E00\u6B21", () => void requestPairing()));
-    panel.appendChild(actions);
+    for (const row of infoRows()) panel.appendChild(row);
   };
   const closePanel = () => {
     if (countTimer !== void 0) {
@@ -313,24 +351,49 @@ function buildPill(root, deps) {
       if (countTimer === void 0) {
         countTimer = setInterval(() => {
           expiresInMs -= 1e3;
-          if (expiresInMs <= 0) void requestPairing();
-          else paint();
+          if (expiresInMs <= 0) {
+            clearInterval(countTimer);
+            countTimer = void 0;
+          }
+          paint();
         }, 1e3);
       }
     }
     paint();
   }
+  async function requestUnpair() {
+    if (disposed || !panel) return;
+    try {
+      await deps.fetchImpl(UNPAIR_ROUTE, {
+        method: "POST",
+        headers: { "x-drc-pair": "1" },
+        credentials: "same-origin"
+      });
+    } catch (error) {
+      warn("\u9000\u51FA\u914D\u5BF9\u8BF7\u6C42\u5931\u8D25\uFF08\u9762\u677F\u4F1A\u9760\u4E0B\u4E00\u6B21\u8F6E\u8BE2\u5BF9\u8D26\uFF09", error);
+    }
+    if (disposed || !panel) return;
+    if (lastStatus) lastStatus = { ...lastStatus, paired: 0 };
+    write();
+    view = { kind: "loading" };
+    paint();
+    void requestPairing();
+  }
   const openPanel = () => {
     if (panel || disposed) return;
     panel = doc.createElement("div");
     panel.className = "drc-panel";
     panel.setAttribute("role", "dialog");
-    panel.setAttribute("aria-label", "dsh-remote-control \u8FDE\u63A5\u4FE1\u606F");
+    panel.setAttribute("aria-label", "dsh-remote-control \u914D\u5BF9");
     panel.tabIndex = -1;
     root.appendChild(panel);
     button.setAttribute("aria-expanded", "true");
-    view = { kind: "info" };
-    paint();
+    if (pairedNow() > 0) {
+      view = { kind: "info" };
+      paint();
+    } else {
+      void requestPairing();
+    }
     try {
       panel.focus();
     } catch {
@@ -367,6 +430,14 @@ function buildPill(root, deps) {
       const body = await response.json?.();
       if (!body || typeof body !== "object") return;
       lastStatus = body;
+      if (view.kind === "qr" && pairedNow() > 0) {
+        view = { kind: "info" };
+        if (countTimer !== void 0) {
+          clearInterval(countTimer);
+          countTimer = void 0;
+        }
+        if (panel) paint();
+      }
       write();
     } catch (error) {
       deps.warn?.("status poll failed");