@qzsy/dsh-bridge 3.1.1 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # 更新日志
 
+## [v3.2.1] - 2026-11-02
+
+### 🐛 修复
+
+- **网关发布不再掉线**：收到网关 `drain`（滚动重启）后不再停在「已断开」，在途请求结束后自动重连；此前每次网关发布都要人工点「连接」，长连接会一直停在离线。
+- **npm 仓库地址**：`repository.url` 补 `git+` 前缀，符合 npm 规范写法。
+
+### ✨ 调整
+
+- **网关卡片精简**：在线时只显示一行「网关：地址 + 新窗口打开」；掉线 / 连接中才展开状态徽标、可编辑地址与保存。
+
+## [v3.2.0] - 2026-11-02
+
+### ✨ 新增
+
+- **授权后显示账号信息**：面板在授权成功（已绑定）后新增账号卡片，展示头像、昵称、邮箱/用户名，头像加载失败回退首字母。
+- **使用时长**：展示剩余时长、本月已用、累计已用，以及授权时间与已授权天数；每 60 秒自动刷新，支持手动刷新。
+- **控制面新接口** `POST /api/saas/device/profile`：设备凭据鉴权（与设备令牌同口径），只返回绑定账号的展示字段与时长，隔离边界仍为 `device.userId`；相对路径头像按请求源补全为绝对 URL。
+- **插件 RPC `getProfile`**：面板通过 Host 侧 RPC 拉取账号资料；失败只回给面板，不写入隧道 `lastError`。
+
+### 🧪 验证
+
+- 单测覆盖账号资料字段归一化、头像协议白名单、RPC 未绑定/未授权拒绝；无感授权回归覆盖绑定后读取账号资料。
+
+
 ## [v3.1.1] - 2026-11-02
 
 ### 🐛 修复

package/README.md

@@ -26,6 +26,8 @@ dsh plugin --profile <name> add @qzsy/dsh-bridge
    `https://<控制面>/device/authorize?code=...`。
 3. 在浏览器登录 SaaS 账号 → 点「**授权此设备**」→ 回到 DSH 面板。
 4. 面板会自动轮询并完成绑定，**绑定后自动开启隧道**，随后出现「**显示二维码**」按钮。
+   绑定成功后，面板顶部会出现**账号卡片**：头像、昵称/邮箱/用户名、剩余时长、本月已用、
+   累计已用与授权时间；每 60 秒自动刷新，也可手动「刷新」。
 5. 手机扫码（`https://<控制面>/open/<publicId>`）→ 登录 SaaS 账号 → 自动验证隧道归属并签发一次性
    ticket，跳转进入本机 DSH。
 
@@ -86,7 +88,7 @@ loopback 会话 cookie。来源判定：
 | 请求 502 | DSH 本体不可达：确认 `dsh web` 在运行，或配置 `targetPort` |
 | WebSocket 打不开 | 确认网关与反代放行 WS Upgrade；插件会透传 `ws-open/accept/frame/close` |
 
-## 已知限制（v3.1.0）
+## 已知限制（v3.2.0）
 
 - `getStatus` 为面板引导接口，免 adminToken，只返回脱敏状态（设备 id/secret 均掩码，不含访问令牌与二维码；`openUrl` 由 /open/<publicId> 二次校验归属）。
 - adminToken 每次进程启动随机生成，只经物理回环 `/__qzsy_bridge__/loopback-token` 签发；重启 DSH 后需重新领取（面板自动完成）。

package/client/client.js

@@ -48,6 +48,7 @@ var RPC_ENDPOINTS = Object.freeze({
   getAccessUrl: "getAccessUrl",
   startLogin: "startLogin",
   getEntryQr: "getEntryQr",
+  getProfile: "getProfile",
   setAccessPassword: "setAccessPassword",
   clearAccessPassword: "clearAccessPassword"
 });
@@ -57,6 +58,8 @@ 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",
+  gatewayLabel: "\u7F51\u5173",
+  openInNewWindow: "\u65B0\u7A97\u53E3\u6253\u5F00",
   save: "\u4FDD\u5B58\u7F51\u5173",
   saved: "\u5DF2\u4FDD\u5B58",
   device: "\u8BBE\u5907",
@@ -101,12 +104,29 @@ var zh = {
   autoStart: "\u968F DSH \u542F\u52A8\u81EA\u52A8\u5F00\u542F",
   status: "\u72B6\u6001",
   version: "\u7248\u672C",
-  loadFailed: "\u65E0\u6CD5\u8FDE\u63A5\u63D2\u4EF6 RPC"
+  loadFailed: "\u65E0\u6CD5\u8FDE\u63A5\u63D2\u4EF6 RPC",
+  authorized: "\u5DF2\u6388\u6743",
+  balance: "\u5269\u4F59\u65F6\u957F",
+  monthUsed: "\u672C\u6708\u5DF2\u7528",
+  totalUsed: "\u7D2F\u8BA1\u5DF2\u7528",
+  authorizedAt: "\u6388\u6743\u4E8E ${date}",
+  authorizedDays: "\u5DF2\u6388\u6743 ${days} \u5929",
+  profileLoading: "\u6B63\u5728\u8BFB\u53D6\u8D26\u53F7\u4FE1\u606F\u2026",
+  profileFailed: "\u8D26\u53F7\u4FE1\u606F\u8BFB\u53D6\u5931\u8D25",
+  accountUnknown: "\u8D26\u53F7",
+  refresh: "\u5237\u65B0",
+  refreshing: "\u5237\u65B0\u4E2D\u2026",
+  durationHours: "${hours} \u5C0F\u65F6",
+  durationHoursMinutes: "${hours} \u5C0F\u65F6 ${minutes} \u5206",
+  durationMinutes: "${minutes} \u5206\u949F",
+  durationUnderMinute: "\u4E0D\u8DB3 1 \u5206\u949F"
 };
 var en = {
   title: "Remote Access",
   subtitle: "DSH Remote Tunnel Cloud \xB7 Official Client",
   gateway: "SaaS gateway URL",
+  gatewayLabel: "Gateway",
+  openInNewWindow: "Open in new window",
   save: "Save gateway",
   saved: "Saved",
   device: "Device",
@@ -151,7 +171,22 @@ var en = {
   autoStart: "Auto-start with DSH",
   status: "Status",
   version: "Version",
-  loadFailed: "Cannot reach plugin RPC"
+  loadFailed: "Cannot reach plugin RPC",
+  authorized: "Authorized",
+  balance: "Time left",
+  monthUsed: "Used this month",
+  totalUsed: "Total used",
+  authorizedAt: "Authorized ${date}",
+  authorizedDays: "${days} days since authorization",
+  profileLoading: "Loading account\u2026",
+  profileFailed: "Failed to load account",
+  accountUnknown: "Account",
+  refresh: "Refresh",
+  refreshing: "Refreshing\u2026",
+  durationHours: "${hours} h",
+  durationHoursMinutes: "${hours} h ${minutes} min",
+  durationMinutes: "${minutes} min",
+  durationUnderMinute: "< 1 min"
 };
 function detectLang(host = {}) {
   try {
@@ -193,7 +228,46 @@ var styles = {
   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 }
+  qr: { width: 168, height: 168, borderRadius: 8, background: "#fff", padding: 6 },
+  accountTop: { display: "flex", gap: 12, alignItems: "center" },
+  avatar: {
+    width: 48,
+    height: 48,
+    borderRadius: 999,
+    overflow: "hidden",
+    flex: "0 0 auto",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "var(--dsw-alias-bg-secondary, #eef1f5)",
+    color: "var(--dsw-alias-label-primary, #111827)",
+    fontSize: 18,
+    fontWeight: 700
+  },
+  avatarImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
+  accountIdentity: { flex: "1 1 220px", minWidth: 0 },
+  accountName: { fontSize: 14, fontWeight: 600, lineHeight: 1.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  accountEmail: { fontSize: 12, color: "var(--dsw-alias-label-secondary, #6b7280)", lineHeight: 1.6, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  statGrid: {
+    display: "flex",
+    gap: 8,
+    flexWrap: "wrap",
+    marginTop: 12,
+    paddingTop: 12,
+    borderTop: "1px solid var(--dsw-alias-border-secondary, #e5e7eb)"
+  },
+  stat: { flex: "1 1 120px", minWidth: 0 },
+  statLabel: { display: "block", fontSize: 12, color: "var(--dsw-alias-label-secondary, #6b7280)", lineHeight: 1.6 },
+  statValue: { fontSize: 14, fontWeight: 600, lineHeight: 1.5, wordBreak: "break-word" },
+  accountFoot: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, flexWrap: "wrap", marginTop: 10 },
+  linkBtn: {
+    padding: 0,
+    border: "none",
+    background: "transparent",
+    color: "var(--dsw-alias-brand-primary, #4f6ef7)",
+    cursor: "pointer",
+    fontSize: 12
+  }
 };
 function CopyButton({ value, t }) {
   const [copied, setCopied] = React.useState(false);
@@ -222,8 +296,101 @@ function UrlRow({ label, url, t }) {
     )
   );
 }
+function formatDuration(t, seconds) {
+  const total = Math.max(0, Math.floor(Number(seconds) || 0));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  if (hours > 0) {
+    return minutes > 0 ? t("durationHoursMinutes", { hours, minutes }) : t("durationHours", { hours });
+  }
+  if (minutes > 0) return t("durationMinutes", { minutes });
+  return t("durationUnderMinute");
+}
+function formatDate(iso) {
+  if (!iso) return "";
+  const date = new Date(iso);
+  if (!Number.isFinite(date.getTime())) return "";
+  try {
+    return date.toLocaleDateString();
+  } catch {
+    return String(iso).slice(0, 10);
+  }
+}
+function AccountAvatar({ url, name: name2 }) {
+  const [failed, setFailed] = React.useState(false);
+  React.useEffect(() => {
+    setFailed(false);
+  }, [url]);
+  const initial = (name2 || "?").trim().slice(0, 1).toUpperCase() || "?";
+  return h(
+    "div",
+    { style: styles.avatar },
+    url && !failed ? h("img", { src: url, alt: name2 || "", style: styles.avatarImg, onError: () => setFailed(true) }) : h("span", null, initial)
+  );
+}
+function AccountCard({ profile, loading, error, onRefresh, t }) {
+  const user = profile?.user;
+  const usage = profile?.usage;
+  const authorization = profile?.authorization;
+  const pending = loading || !profile && !error;
+  const boundDate = formatDate(authorization?.boundAt);
+  const authorizedText = boundDate ? `${t("authorizedAt", { date: boundDate })}${authorization?.days > 0 ? ` \xB7 ${t("authorizedDays", { days: authorization.days })}` : ""}` : "";
+  return h(
+    "div",
+    { style: styles.card },
+    h(
+      "div",
+      { style: styles.accountTop },
+      h(AccountAvatar, { url: user?.avatarUrl, name: user?.name }),
+      h(
+        "div",
+        { style: styles.accountIdentity },
+        h("div", { style: styles.accountName }, user?.name || (pending ? t("profileLoading") : t("accountUnknown"))),
+        user?.email ? h("div", { style: styles.accountEmail, title: user.email }, user.email) : null,
+        user?.username ? h("div", { style: styles.accountEmail }, `@${user.username}`) : null
+      ),
+      h("span", { style: styles.badge }, t("authorized"))
+    ),
+    usage ? h(
+      "div",
+      { style: styles.statGrid },
+      h(
+        "div",
+        { style: styles.stat },
+        h("span", { style: styles.statLabel }, t("balance")),
+        h("div", { style: styles.statValue }, formatDuration(t, usage.balanceSeconds))
+      ),
+      h(
+        "div",
+        { style: styles.stat },
+        h("span", { style: styles.statLabel }, t("monthUsed")),
+        h("div", { style: styles.statValue }, formatDuration(t, usage.monthUsedSeconds))
+      ),
+      h(
+        "div",
+        { style: styles.stat },
+        h("span", { style: styles.statLabel }, t("totalUsed")),
+        h("div", { style: styles.statValue }, formatDuration(t, usage.totalUsedSeconds))
+      )
+    ) : null,
+    error ? h("div", { style: { ...styles.error, marginTop: 8 } }, `${t("profileFailed")}\uFF1A${error}`) : null,
+    h(
+      "div",
+      { style: styles.accountFoot },
+      h("span", { style: styles.muted }, authorizedText),
+      h("button", { style: styles.linkBtn, disabled: pending, onClick: onRefresh }, pending ? t("refreshing") : t("refresh"))
+    )
+  );
+}
 function BridgePanel() {
-  const t = createTranslator({});
+  const documentLang = (() => {
+    try {
+      return globalThis.document?.documentElement?.getAttribute?.("lang") ?? "";
+    } catch {
+      return "";
+    }
+  })();
+  const t = React.useMemo(() => createTranslator({}), [documentLang]);
   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);
@@ -236,6 +403,10 @@ function BridgePanel() {
   const [showQr, setShowQr] = React.useState(false);
   const [entryQr, setEntryQr] = React.useState("");
   const [passwordDraft, setPasswordDraft] = React.useState("");
+  const [profile, setProfile] = React.useState(null);
+  const [profileLoading, setProfileLoading] = React.useState(false);
+  const [profileError, setProfileError] = React.useState("");
+  const [profileTick, setProfileTick] = React.useState(0);
   const loadAdminToken = React.useCallback(async (port) => {
     if (!port) return;
     try {
@@ -280,6 +451,39 @@ function BridgePanel() {
       cancelled = true;
     };
   }, [adminToken, showQr, status?.openUrl, rpc]);
+  React.useEffect(() => {
+    if (!adminToken || !status?.device?.bound) {
+      setProfile(null);
+      setProfileError("");
+      setProfileLoading(false);
+      return;
+    }
+    let cancelled = false;
+    const load = async () => {
+      setProfileLoading(true);
+      setProfileError("");
+      try {
+        const res = await rpc(RPC_ENDPOINTS.getProfile);
+        if (cancelled) return;
+        if (res?.ok && res.value) setProfile(res.value);
+        else if (res && res.ok === false) setProfileError(res.error?.message ?? t("profileFailed"));
+      } catch (err) {
+        if (!cancelled) setProfileError(err?.message ?? String(err));
+      } finally {
+        if (!cancelled) setProfileLoading(false);
+      }
+    };
+    load().catch(() => {
+    });
+    const timer = setInterval(() => {
+      load().catch(() => {
+      });
+    }, 6e4);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, [adminToken, status?.device?.bound, profileTick, rpc, t]);
   const run = React.useCallback(async (key, fn) => {
     setBusy(key);
     setError("");
@@ -343,6 +547,18 @@ function BridgePanel() {
   const openUrl = status?.openUrl ?? "";
   const passwordSet = Boolean(status?.access?.passwordSet);
   const stateText = connected ? t("ready") : phase === "connecting" || phase === "reconnecting" ? t("connecting") : t("offline");
+  const gatewayWebUrl = React.useMemo(() => {
+    const raw = String(status?.gatewayUrl || gatewayDraft || "").trim();
+    if (!raw) return "";
+    try {
+      const url = new URL(raw);
+      if (url.protocol === "wss:") url.protocol = "https:";
+      else if (url.protocol === "ws:") url.protocol = "http:";
+      return url.origin;
+    } catch {
+      return raw.replace(/\/+$/, "");
+    }
+  }, [status?.gatewayUrl, gatewayDraft]);
   return h(
     "div",
     { style: styles.wrap },
@@ -352,35 +568,62 @@ function BridgePanel() {
       h("div", { style: { fontSize: 15, fontWeight: 700 } }, t("subtitle")),
       h("div", { style: styles.muted, marginTop: 4 }, `${PACKAGE_NAME} \xB7 v${status?.version ?? "\u2014"}`)
     ),
+    bound && adminToken ? h(AccountCard, {
+      profile,
+      loading: profileLoading,
+      error: profileError,
+      onRefresh: () => setProfileTick((value) => value + 1),
+      t
+    }) : null,
+    // 网关卡片：在线时只留一行「网关：地址 + 新窗口打开」；掉线/连接中才展开
+    // 状态徽标与可编辑地址，避免正常状态下一屏塞满诊断信息。
     h(
       "div",
       { style: styles.card },
-      h(
+      connected ? 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("span", { style: { ...styles.muted, whiteSpace: "nowrap" } }, `${t("gatewayLabel")}\uFF1A`),
+        h("a", {
+          href: gatewayWebUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { flex: 1, minWidth: 180, fontSize: 13, lineHeight: 1.6, wordBreak: "break-all", color: "inherit" }
+        }, gatewayWebUrl),
+        h("a", {
+          href: gatewayWebUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { ...styles.btn, textDecoration: "none", whiteSpace: "nowrap" }
+        }, t("openInNewWindow"))
+      ) : [
         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("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",