@qzsy/dsh-bridge 0.0.0-stage → 3.0.0

package/client/client.js

@@ -0,0 +1,498 @@
+window.__ModuleLoader__.load({
+  id: "@qzsy/dsh-bridge",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+    var React = require("react");
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// client/index.js
+var index_exports = {};
+__export(index_exports, {
+  BridgePanel: () => BridgePanel,
+  apply: () => apply,
+  inject: () => inject,
+  name: () => name
+});
+module.exports = __toCommonJS(index_exports);
+
+// lib/identity.js
+var PLUGIN_ID = "qzsy-dsh-bridge";
+var PACKAGE_NAME = "@qzsy/dsh-bridge";
+var RPC_CHANNEL = `/${PLUGIN_ID}`;
+var RPC_ENDPOINTS = Object.freeze({
+  getStatus: "getStatus",
+  saveGateway: "saveGateway",
+  requestDeviceCode: "requestDeviceCode",
+  bindDevice: "bindDevice",
+  unbindDevice: "unbindDevice",
+  startTunnel: "startTunnel",
+  stopTunnel: "stopTunnel",
+  getAccessUrl: "getAccessUrl",
+  setAccessPassword: "setAccessPassword",
+  clearAccessPassword: "clearAccessPassword"
+});
+
+// client/locales.mjs
+var zh = {
+  title: "\u8FDC\u7A0B\u8BBF\u95EE",
+  subtitle: "DSH \u8FDC\u7A0B\u96A7\u9053\u4E91 \xB7 \u5B98\u65B9\u5BA2\u6237\u7AEF",
+  gateway: "SaaS \u7F51\u5173\u5730\u5740",
+  save: "\u4FDD\u5B58\u7F51\u5173",
+  saved: "\u5DF2\u4FDD\u5B58",
+  device: "\u8BBE\u5907",
+  notBound: "\u672A\u7ED1\u5B9A",
+  bound: "\u5DF2\u7ED1\u5B9A",
+  getCode: "\u83B7\u53D6\u8BBE\u5907\u7801",
+  codeTitle: "\u5728\u63A7\u5236\u53F0\u6DFB\u52A0\u8BBE\u5907\u5E76\u8F93\u5165\u6B64\u8BBE\u5907\u7801",
+  codeExpires: "\u8BBE\u5907\u7801 10 \u5206\u949F\u5185\u6709\u6548\uFF0C\u7ED1\u5B9A\u540E\u81EA\u52A8\u6D88\u5931\u3002",
+  openConsole: "\u6253\u5F00\u63A7\u5236\u53F0",
+  bindManual: "\u5DF2\u6709\u8BBE\u5907\u7801\uFF1F\u76F4\u63A5\u7ED1\u5B9A",
+  bind: "\u7ED1\u5B9A",
+  unbind: "\u89E3\u7ED1\u8BBE\u5907",
+  unbindConfirm: "\u786E\u8BA4\u89E3\u7ED1\uFF1F",
+  cancel: "\u53D6\u6D88",
+  tunnel: "\u96A7\u9053",
+  start: "\u5F00\u542F\u96A7\u9053",
+  stop: "\u5173\u95ED\u96A7\u9053",
+  connecting: "\u8FDE\u63A5\u4E2D\u2026",
+  ready: "\u5728\u7EBF",
+  offline: "\u79BB\u7EBF",
+  publicUrl: "\u516C\u7F51\u5730\u5740",
+  copy: "\u590D\u5236",
+  copied: "\u5DF2\u590D\u5236",
+  accessUrl: "\u5E26\u8BBF\u95EE\u4EE4\u724C\u7684\u94FE\u63A5\uFF08\u9996\u6B21\u6253\u5F00\u540E\u5199\u5165\u4F1A\u8BDD\uFF09",
+  qr: "\u626B\u7801\u6253\u5F00",
+  lastError: "\u6700\u8FD1\u9519\u8BEF",
+  password: "\u8BBF\u95EE\u53E3\u4EE4",
+  passwordHint: "\u9996\u6B21\u4F7F\u7528\u5FC5\u987B\u5148\u8BBE\u7F6E\u8BBF\u95EE\u53E3\u4EE4\uFF1B\u8FDC\u7A0B/\u5C40\u57DF\u7F51\u8BBF\u5BA2\u9700\u51ED\u6B64\u53E3\u4EE4\u901A\u8FC7\u672C\u5730\u95E8\u7981\u3002",
+  passwordSet: "\u5DF2\u8BBE\u7F6E\u8BBF\u95EE\u53E3\u4EE4\uFF08\u53EF\u5728\u6B64\u4FEE\u6539\uFF09\u3002",
+  passwordPlaceholder: "\u81F3\u5C11 6 \u4F4D",
+  savePassword: "\u4FDD\u5B58\u53E3\u4EE4",
+  adminLocalOnly: "\u5F53\u524D\u4E0D\u662F\u7269\u7406\u672C\u673A\u6253\u5F00\uFF1A\u9762\u677F\u53EA\u8BFB\uFF0C\u8BF7\u5728\u8FD0\u884C DSH \u7684\u7535\u8111\u4E0A\u64CD\u4F5C\u3002",
+  noPublicUrl: "\u5C1A\u672A\u83B7\u53D6\u516C\u7F51\u5730\u5740\uFF08\u5148\u5F00\u542F\u96A7\u9053\uFF09",
+  autoStart: "\u968F DSH \u542F\u52A8\u81EA\u52A8\u5F00\u542F",
+  status: "\u72B6\u6001",
+  version: "\u7248\u672C",
+  loadFailed: "\u65E0\u6CD5\u8FDE\u63A5\u63D2\u4EF6 RPC"
+};
+var en = {
+  title: "Remote Access",
+  subtitle: "DSH Remote Tunnel Cloud \xB7 Official Client",
+  gateway: "SaaS gateway URL",
+  save: "Save gateway",
+  saved: "Saved",
+  device: "Device",
+  notBound: "Not bound",
+  bound: "Bound",
+  getCode: "Get device code",
+  codeTitle: "Add the device in the console and enter this code",
+  codeExpires: "The code is valid for 10 minutes and disappears after binding.",
+  openConsole: "Open console",
+  bindManual: "Already have a code? Bind it",
+  bind: "Bind",
+  unbind: "Unbind device",
+  unbindConfirm: "Confirm unbind?",
+  cancel: "Cancel",
+  tunnel: "Tunnel",
+  start: "Start tunnel",
+  stop: "Stop tunnel",
+  connecting: "Connecting\u2026",
+  ready: "Online",
+  offline: "Offline",
+  publicUrl: "Public URL",
+  copy: "Copy",
+  copied: "Copied",
+  accessUrl: "Access-token URL (writes a session cookie on first open)",
+  qr: "Scan to open",
+  lastError: "Last error",
+  password: "Access password",
+  passwordHint: "Set an access password before first use; remote/LAN visitors must pass the local gate with it.",
+  passwordSet: "Access password is set (you can change it here).",
+  passwordPlaceholder: "At least 6 characters",
+  savePassword: "Save password",
+  adminLocalOnly: "Opened outside the physical host: panel is read-only. Use the DSH machine to manage.",
+  noPublicUrl: "No public URL yet (start the tunnel first)",
+  autoStart: "Auto-start with DSH",
+  status: "Status",
+  version: "Version",
+  loadFailed: "Cannot reach plugin RPC"
+};
+function detectLang(host = {}) {
+  try {
+    const fromHost = host?.locale?.current?.();
+    if (fromHost === "en" || fromHost === "zh") return fromHost;
+  } catch {
+  }
+  try {
+    const documentLang = globalThis.document?.documentElement?.getAttribute?.("lang");
+    if (documentLang) return String(documentLang).toLowerCase().startsWith("zh") ? "zh" : "en";
+  } catch {
+  }
+  return "zh";
+}
+function createTranslator(host = {}) {
+  const lang = detectLang(host);
+  const dict = lang === "en" ? en : zh;
+  return (key, vars = {}) => {
+    let text = dict[key] ?? zh[key] ?? key;
+    for (const [name2, value] of Object.entries(vars ?? {})) text = text.replaceAll(`\${${name2}}`, String(value));
+    return text;
+  };
+}
+
+// client/index.js
+var name = PLUGIN_ID;
+var inject = ["slots", "connection"];
+var h = (type, props, ...children) => React.createElement(type, props, ...children);
+var styles = {
+  wrap: { padding: "4px 0", maxWidth: 720, fontFamily: "inherit" },
+  card: { border: "1px solid var(--dsw-alias-border-secondary, #e5e7eb)", borderRadius: 12, padding: 16, marginBottom: 12 },
+  row: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" },
+  label: { fontSize: 12, color: "var(--dsw-alias-label-secondary, #6b7280)", marginBottom: 6, display: "block" },
+  value: { fontSize: 13, lineHeight: 1.6, wordBreak: "break-all" },
+  input: { flex: "1 1 320px", minWidth: 0, padding: "8px 10px", borderRadius: 8, border: "1px solid var(--dsw-alias-border-secondary, #d1d5db)", font: "inherit", fontSize: 13 },
+  btn: { padding: "7px 14px", borderRadius: 8, border: "1px solid var(--dsw-alias-border-secondary, #d1d5db)", background: "transparent", color: "inherit", cursor: "pointer", fontSize: 13 },
+  btnPrimary: { padding: "7px 14px", borderRadius: 8, border: "none", background: "var(--dsw-alias-brand-primary, #4f6ef7)", color: "#fff", cursor: "pointer", fontSize: 13, fontWeight: 600 },
+  badge: { display: "inline-block", fontSize: 12, padding: "2px 8px", borderRadius: 999, border: "1px solid var(--dsw-alias-border-secondary, #d1d5db)" },
+  code: { fontSize: 28, fontWeight: 700, letterSpacing: 4, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", margin: "8px 0" },
+  error: { color: "var(--dsw-alias-state-error-primary, #dc2626)", fontSize: 12, lineHeight: 1.6, wordBreak: "break-all" },
+  muted: { color: "var(--dsw-alias-label-secondary, #6b7280)", fontSize: 12, lineHeight: 1.6 },
+  qr: { width: 168, height: 168, borderRadius: 8, background: "#fff", padding: 6 }
+};
+function CopyButton({ value, t }) {
+  const [copied, setCopied] = React.useState(false);
+  const copy = React.useCallback(async () => {
+    if (!value) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  }, [value]);
+  return h("button", { style: styles.btn, onClick: copy, disabled: !value }, copied ? t("copied") : t("copy"));
+}
+function UrlRow({ label, url, t }) {
+  if (!url) return null;
+  return h(
+    "div",
+    { style: { marginTop: 10 } },
+    h("span", { style: styles.label }, label),
+    h(
+      "div",
+      { style: styles.row },
+      h("input", { style: styles.input, readOnly: true, value: url, onFocus: (e) => e.currentTarget.select() }),
+      h(CopyButton, { value: url, t })
+    )
+  );
+}
+function BridgePanel() {
+  const t = createTranslator({});
+  const [adminToken, setAdminToken] = React.useState("");
+  const rpc = React.useCallback((endpoint, payload, signal) => ctxRpc(endpoint, { ...payload ?? {}, ...adminToken ? { adminToken } : {} }, signal), [adminToken]);
+  const [status, setStatus] = React.useState(null);
+  const [gatewayDraft, setGatewayDraft] = React.useState("");
+  const [codeDraft, setCodeDraft] = React.useState("");
+  const [busy, setBusy] = React.useState("");
+  const [error, setError] = React.useState("");
+  const [notice, setNotice] = React.useState("");
+  const [confirmUnbind, setConfirmUnbind] = React.useState(false);
+  const [accessUrl, setAccessUrl] = React.useState("");
+  const [qrDataUrl, setQrDataUrl] = React.useState("");
+  const [passwordDraft, setPasswordDraft] = React.useState("");
+  const loadAdminToken = React.useCallback(async (port) => {
+    if (!port) return;
+    try {
+      const res = await fetch(`http://127.0.0.1:${port}/__qzsy_bridge__/loopback-token`, { cache: "no-store" });
+      const data = await res.json();
+      if (data?.adminToken) setAdminToken(data.adminToken);
+    } catch {
+    }
+  }, []);
+  const refresh = React.useCallback(async () => {
+    const res = await rpc(RPC_ENDPOINTS.getStatus);
+    if (res?.ok && res.value) {
+      setStatus(res.value);
+      setGatewayDraft((current) => current || res.value.gatewayUrl || "");
+      setError(res.value.lastError || "");
+      if (!adminToken) await loadAdminToken(res.value.proxy?.port);
+    } else if (res && res.ok === false) {
+      setError(res.error?.message ?? t("loadFailed"));
+    }
+  }, [t, adminToken, loadAdminToken]);
+  React.useEffect(() => {
+    refresh().catch(() => {
+    });
+    const timer = setInterval(() => {
+      refresh().catch(() => {
+      });
+    }, 3e3);
+    return () => clearInterval(timer);
+  }, [refresh]);
+  React.useEffect(() => {
+    if (!adminToken || !status?.publicUrl) {
+      setAccessUrl("");
+      setQrDataUrl("");
+      return;
+    }
+    let cancelled = false;
+    rpc(RPC_ENDPOINTS.getAccessUrl).then((res) => {
+      if (cancelled || !res?.ok) return;
+      setAccessUrl(res.value?.url ?? "");
+      setQrDataUrl(res.value?.qrDataUrl ?? "");
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [adminToken, status?.publicUrl, rpc]);
+  const run = React.useCallback(async (key, fn) => {
+    setBusy(key);
+    setError("");
+    setNotice("");
+    try {
+      const res = await fn();
+      if (res && res.ok === false) throw new Error(res.error?.message ?? "RPC failed");
+      await refresh();
+      return res?.value;
+    } catch (err) {
+      setError(err?.message ?? String(err));
+      return null;
+    } finally {
+      setBusy("");
+    }
+  }, [refresh]);
+  const saveGateway = () => run("gateway", () => rpc(RPC_ENDPOINTS.saveGateway, { gatewayUrl: gatewayDraft })).then(() => setNotice(t("saved")));
+  const requestCode = () => run("code", () => rpc(RPC_ENDPOINTS.requestDeviceCode));
+  const bindCode = () => run("bind", () => rpc(RPC_ENDPOINTS.bindDevice, { code: codeDraft })).then((value) => {
+    if (value) setCodeDraft("");
+  });
+  const startTunnel = () => run("start", () => rpc(RPC_ENDPOINTS.startTunnel, { autoStart: true }));
+  const stopTunnel = () => run("stop", () => rpc(RPC_ENDPOINTS.stopTunnel));
+  const unbind = () => run("unbind", () => rpc(RPC_ENDPOINTS.unbindDevice)).then(() => setConfirmUnbind(false));
+  const savePassword = () => run("password", () => rpc(RPC_ENDPOINTS.setAccessPassword, { password: passwordDraft })).then((value) => {
+    if (value) {
+      setPasswordDraft("");
+      setNotice(t("passwordSet"));
+    }
+  });
+  const bound = Boolean(status?.device?.bound);
+  const connected = Boolean(status?.connected);
+  const phase = status?.phase ?? "idle";
+  const publicUrl = status?.publicUrl ?? "";
+  const pairing = status?.pairing;
+  const passwordSet = Boolean(status?.access?.passwordSet);
+  const stateText = connected ? t("ready") : phase === "connecting" || phase === "reconnecting" ? t("connecting") : t("offline");
+  return h(
+    "div",
+    { style: styles.wrap },
+    h(
+      "div",
+      { style: { marginBottom: 12 } },
+      h("div", { style: { fontSize: 15, fontWeight: 700 } }, t("subtitle")),
+      h("div", { style: styles.muted, marginTop: 4 }, `${PACKAGE_NAME} \xB7 v${status?.version ?? "\u2014"}`)
+    ),
+    h(
+      "div",
+      { style: styles.card },
+      h(
+        "div",
+        { style: styles.row },
+        h("span", { style: styles.badge }, `${t("status")}: ${stateText}`),
+        h("span", { style: styles.badge }, bound ? `${t("device")}: ${status?.device?.idMasked ?? ""}` : t("notBound")),
+        status?.protocol ? h("span", { style: styles.badge }, `protocol v${status.protocol}`) : null
+      ),
+      h(
+        "div",
+        { style: { marginTop: 10 } },
+        h("span", { style: styles.label }, t("gateway")),
+        h(
+          "div",
+          { style: styles.row },
+          h("input", {
+            style: styles.input,
+            value: gatewayDraft,
+            placeholder: "wss://dsh.b.nps.qzsyzn.com/_gw/connect",
+            onChange: (e) => setGatewayDraft(e.target.value)
+          }),
+          h("button", { style: styles.btnPrimary, disabled: busy === "gateway" || !gatewayDraft, onClick: saveGateway }, t("save"))
+        )
+      ),
+      !adminToken ? h("div", { style: { ...styles.muted, marginTop: 8 } }, t("adminLocalOnly")) : null,
+      error ? h("div", { style: { ...styles.error, marginTop: 10 } }, `${t("lastError")}: ${error}`) : null,
+      notice ? h("div", { style: { ...styles.muted, marginTop: 8 } }, notice) : null
+    ),
+    h(
+      "div",
+      { style: styles.card },
+      h(
+        "div",
+        { style: styles.row },
+        h(
+          "div",
+          { style: { flex: 1, minWidth: 260 } },
+          h("div", { style: { fontSize: 13, fontWeight: 600 } }, t("device")),
+          h(
+            "div",
+            { style: styles.muted },
+            bound ? `${status?.device?.tunnel?.name || "DSH"} \xB7 ${status?.device?.tunnel?.publicId || ""}` : t("notBound")
+          )
+        ),
+        !bound && h("button", { style: styles.btnPrimary, disabled: Boolean(busy), onClick: requestCode }, t("getCode")),
+        bound && h("button", {
+          style: styles.btn,
+          disabled: Boolean(busy),
+          onClick: () => setConfirmUnbind(true)
+        }, t("unbind"))
+      ),
+      pairing && pairing.status === "pending" ? h(
+        "div",
+        { style: { marginTop: 12 } },
+        h("div", { style: styles.muted }, t("codeTitle")),
+        h("div", { style: styles.code }, pairing.code),
+        h("div", { style: styles.muted }, t("codeExpires")),
+        pairing.verificationUrl ? h("a", { href: pairing.verificationUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 12 } }, t("openConsole")) : null
+      ) : null,
+      !bound ? h(
+        "div",
+        { style: { marginTop: 12 } },
+        h("span", { style: styles.label }, t("bindManual")),
+        h(
+          "div",
+          { style: styles.row },
+          h("input", { style: styles.input, value: codeDraft, onChange: (e) => setCodeDraft(e.target.value), placeholder: "ABCD-1234" }),
+          h("button", { style: styles.btn, disabled: busy === "bind" || !codeDraft, onClick: bindCode }, t("bind"))
+        )
+      ) : null,
+      confirmUnbind ? h(
+        "div",
+        { style: { marginTop: 12 } },
+        h("div", { style: { ...styles.muted, marginBottom: 8 } }, t("unbindConfirm")),
+        h(
+          "div",
+          { style: styles.row },
+          h("button", { style: styles.btnPrimary, disabled: busy === "unbind", onClick: unbind }, t("unbind")),
+          h("button", { style: styles.btn, onClick: () => setConfirmUnbind(false) }, t("cancel"))
+        )
+      ) : null
+    ),
+    h(
+      "div",
+      { style: styles.card },
+      h("div", { style: { fontSize: 13, fontWeight: 600 } }, t("password")),
+      h("div", { style: styles.muted }, passwordSet ? t("passwordSet") : t("passwordHint")),
+      h(
+        "div",
+        { style: { ...styles.row, marginTop: 8 } },
+        h("input", {
+          style: styles.input,
+          type: "password",
+          value: passwordDraft,
+          onChange: (e) => setPasswordDraft(e.target.value),
+          placeholder: t("passwordPlaceholder")
+        }),
+        h("button", { style: styles.btnPrimary, disabled: busy === "password" || passwordDraft.length < 6, onClick: savePassword }, t("savePassword"))
+      )
+    ),
+    h(
+      "div",
+      { style: styles.card },
+      h(
+        "div",
+        { style: styles.row },
+        h(
+          "div",
+          { style: { flex: 1, minWidth: 200 } },
+          h("div", { style: { fontSize: 13, fontWeight: 600 } }, t("tunnel")),
+          h("div", { style: styles.muted }, connected ? publicUrl : t("noPublicUrl"))
+        ),
+        connected ? h("button", { style: styles.btn, disabled: Boolean(busy), onClick: stopTunnel }, t("stop")) : h("button", { style: styles.btnPrimary, disabled: Boolean(busy) || !bound || !passwordSet, onClick: startTunnel }, t("start"))
+      ),
+      publicUrl ? h(
+        "div",
+        { style: { display: "flex", gap: 16, marginTop: 12, flexWrap: "wrap", alignItems: "flex-start" } },
+        h(
+          "div",
+          { style: { flex: "1 1 320px", minWidth: 260 } },
+          h(UrlRow, { label: t("publicUrl"), url: publicUrl, t }),
+          h(UrlRow, { label: t("accessUrl"), url: accessUrl, t })
+        ),
+        qrDataUrl ? h(
+          "div",
+          null,
+          h("div", { style: styles.label }, t("qr")),
+          h("img", { src: qrDataUrl, alt: t("qr"), style: styles.qr })
+        ) : null
+      ) : null
+    )
+  );
+}
+var ctxRpc = async () => ({ ok: false, error: { code: "no-context", message: "RPC not ready" } });
+var serviceControl = null;
+function apply(ctx) {
+  ctxRpc = (endpoint, payload, signal) => ctx.connection.rpc.call(RPC_CHANNEL, endpoint, payload, signal);
+  const panel = (props = {}) => h(BridgePanel, { ...props, key: "qzsy-dsh-bridge-panel" });
+  let visible = true;
+  let registration = null;
+  const register = () => {
+    if (!visible || registration) return;
+    try {
+      registration = ctx.slots.register({
+        name: "settings.section",
+        id: PLUGIN_ID,
+        order: 10,
+        label: () => createTranslator(ctx)("title")
+      }, panel);
+    } catch {
+    }
+  };
+  const unregister = () => {
+    if (!registration) return;
+    try {
+      if (typeof registration === "function") registration();
+      else registration.dispose?.();
+    } catch {
+    }
+    registration = null;
+  };
+  try {
+    ctx.slots.inject("settings.section", () => {
+      if (visible) register();
+    });
+  } catch {
+    register();
+  }
+  serviceControl = {
+    version: 1,
+    render: (props = {}) => h(BridgePanel, props),
+    setSettingsVisible: (next) => {
+      visible = Boolean(next);
+      if (visible) register();
+      else unregister();
+    },
+    settingsVisible: () => visible
+  };
+  if (typeof ctx.provide === "function") ctx.provide(PLUGIN_ID, serviceControl);
+}
+
+    return module.exports;
+  }
+});