@qzsy/dsh-bridge 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # 更新日志
 
+## [v3.3.0] - 2026-11-02
+
+### ✨ 新增
+
+- **移动端抽屉导航**：手机访问 DSH 时，左侧栏（会话 / 工作区 / 插件入口）改为从左侧滑出的 sheet，内容区占满屏幕；此前展开侧栏会把内容挤到 110px。
+- **顶部菜单按钮**：窄屏左上角固定一枚菜单按钮，点击打开/关闭抽屉；抽屉打开时按钮隐藏并显示半透明遮罩。
+- **收起路径**：点遮罩、点会话行、点「新建会话 / 收起侧边栏」、按 Esc、转回桌面宽度都会自动收起；桌面端完全不启用。
+- **宿主重渲染自愈**：按钮 / 遮罩 / 样式被宿主移除时，`MutationObserver` 会自动补回。
+
+### 🧪 验证
+
+- 真实无头 Chrome + 运行中的 DSH 验证：390×844 下内容 390px 占满、抽屉宽度 300px、遮罩/按钮 aria 正确；遮罩 / Esc / 会话行 / 断点切换收起均通过；构建产物 `client.js` 的 `apply()` 安装验证通过。
+
+
+## [v3.2.1] - 2026-11-02
+
+### 🐛 修复
+
+- **网关发布不再掉线**：收到网关 `drain`（滚动重启）后不再停在「已断开」，在途请求结束后自动重连；此前每次网关发布都要人工点「连接」，长连接会一直停在离线。
+- **npm 仓库地址**：`repository.url` 补 `git+` 前缀，符合 npm 规范写法。
+
+### ✨ 调整
+
+- **网关卡片精简**：在线时只显示一行「网关：地址 + 新窗口打开」；掉线 / 连接中才展开状态徽标、可编辑地址与保存。
+
 ## [v3.2.0] - 2026-11-02
 
 ### ✨ 新增

package/README.md

@@ -42,6 +42,14 @@ dsh plugin --profile <name> add @qzsy/dsh-bridge
 
 面板会把 Host 路由（存在时）显示为主地址，并同时列出 Path 路由。
 
+## 手机访问
+
+窄屏（≤ 767px）访问 DSH 时，插件会自动把左侧栏改成抽屉，不需要额外配置：
+
+- 内容区占满屏宽，左上角「菜单」按钮打开会话 / 工作区 / 插件入口；
+- 点遮罩、点会话行、按 Esc 或转回桌面宽度都会自动收起；
+- 桌面端保持 DSH 原生布局，不受影响。
+
 ## 本地门禁与安全语义
 
 插件会在本机监听一个代理端口（默认 `3092`），把请求转发给 DSH 本体并注入 DSH 原生

package/client/client.js

@@ -58,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",
@@ -117,12 +119,16 @@ var zh = {
   durationHours: "${hours} \u5C0F\u65F6",
   durationHoursMinutes: "${hours} \u5C0F\u65F6 ${minutes} \u5206",
   durationMinutes: "${minutes} \u5206\u949F",
-  durationUnderMinute: "\u4E0D\u8DB3 1 \u5206\u949F"
+  durationUnderMinute: "\u4E0D\u8DB3 1 \u5206\u949F",
+  menuOpen: "\u6253\u5F00\u83DC\u5355",
+  menuClose: "\u5173\u95ED\u83DC\u5355"
 };
 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",
@@ -182,7 +188,9 @@ var en = {
   durationHours: "${hours} h",
   durationHoursMinutes: "${hours} h ${minutes} min",
   durationMinutes: "${minutes} min",
-  durationUnderMinute: "< 1 min"
+  durationUnderMinute: "< 1 min",
+  menuOpen: "Open menu",
+  menuClose: "Close menu"
 };
 function detectLang(host = {}) {
   try {
@@ -207,6 +215,276 @@ function createTranslator(host = {}) {
   };
 }
 
+// client/mobile.js
+var MOBILE_MAX_WIDTH = 767;
+var MOBILE_DRAWER_CSS_ID = "qzsy-mobile-drawer-styles";
+var MOBILE_UI_FLAG = "data-qzsy-mobile-drawer";
+var OPEN_CLASS = "qzsy-drawer-open";
+var MENU_CLASS = "qzsy-mobile-menu-btn";
+var BACKDROP_CLASS = "qzsy-mobile-backdrop";
+var STYLE_PLUGIN = "@qzsy/dsh-bridge";
+var MOBILE_DRAWER_CSS = `
+.qzsy-mobile-menu-btn,
+.qzsy-mobile-backdrop {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  /* 1. \u5DE6\u4FA7\u680F\u8131\u79BB grid\uFF0C\u5185\u5BB9\u5360\u6EE1\uFF1B\u9876\u90E8\u7559\u51FA 52px \u7ED9\u83DC\u5355\u6309\u94AE */
+  [data-slot="root"] > div[class*="_frame"] {
+    grid-template-columns: 0px minmax(0px, 1fr) minmax(0px, 0px) !important;
+    padding-top: 52px !important;
+    box-sizing: border-box !important;
+  }
+  div[class*="_centerCol"] { grid-column: 2 !important; }
+  div[class*="_rightbarCol"] { grid-column: 3 !important; }
+  div[class*="_overlayLayer"] { grid-column: 1 / -1 !important; }
+
+  /* 2. \u539F\u751F\u4FA7\u680F\u6539\u4E3A fixed \u62BD\u5C49\uFF08\u9ED8\u8BA4\u85CF\u5728\u5C4F\u5E55\u5DE6\u4FA7\uFF09 */
+  div[class*="_sidebarCol"] {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    width: min(300px, 84vw) !important;
+    max-width: 84vw !important;
+    height: 100vh !important;
+    height: 100dvh !important;
+    z-index: 60 !important;
+    background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
+    border-right: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08)) !important;
+    box-shadow: none !important;
+    transform: translateX(-102%) !important;
+    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    will-change: transform;
+  }
+  body.qzsy-drawer-open div[class*="_sidebarCol"] {
+    transform: translateX(0) !important;
+    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18) !important;
+  }
+  body.qzsy-drawer-open div[class*="_sidebarCol"] > div > div[class*="_root"] {
+    width: 100% !important;
+  }
+
+  /* 3. \u534A\u900F\u660E\u906E\u7F69\uFF1A\u70B9\u51FB\u6536\u8D77 */
+  .qzsy-mobile-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 55;
+    background: rgba(0, 0, 0, 0.42);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 280ms ease;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  body.qzsy-drawer-open .qzsy-mobile-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* 4. \u9876\u90E8\u83DC\u5355\u6309\u94AE\uFF08\u4F4D\u4E8E 52px \u7559\u767D\u6761\u5185\uFF0C\u907F\u514D\u906E\u6321\u4F1A\u8BDD\u6807\u9898\uFF09 */
+  .qzsy-mobile-menu-btn {
+    display: inline-flex;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    z-index: 65;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
+    border-radius: 12px;
+    background: var(--dsw-alias-bg-layer-1, #ffffff);
+    color: var(--dsw-alias-label-primary, #111827);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity 180ms ease, transform 180ms ease;
+  }
+  .qzsy-mobile-menu-btn:active { transform: scale(0.94); }
+  .qzsy-mobile-menu-btn svg { display: block; }
+  body.qzsy-drawer-open .qzsy-mobile-menu-btn {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+`;
+function isElement(value) {
+  return Boolean(value) && value.nodeType === 1;
+}
+function isMobileViewport() {
+  return typeof window !== "undefined" && Number(window.innerWidth) <= MOBILE_MAX_WIDTH;
+}
+function menuLabel(open) {
+  const t = createTranslator({});
+  return open ? t("menuClose") : t("menuOpen");
+}
+function injectStyles() {
+  let style = document.getElementById(MOBILE_DRAWER_CSS_ID);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = MOBILE_DRAWER_CSS_ID;
+    style.dataset.plugin = STYLE_PLUGIN;
+    style.dataset.pluginCss = `${STYLE_PLUGIN}/mobile`;
+    document.head.appendChild(style);
+  }
+  if (style.textContent !== MOBILE_DRAWER_CSS) style.textContent = MOBILE_DRAWER_CSS;
+}
+function setupMobileDrawer() {
+  if (typeof document === "undefined" || typeof window === "undefined") return () => {
+  };
+  const root = document.documentElement;
+  if (!root || root.getAttribute(MOBILE_UI_FLAG) === "1") return () => {
+  };
+  root.setAttribute(MOBILE_UI_FLAG, "1");
+  let menuBtn = null;
+  let observer = null;
+  let disposed = false;
+  const ensureElements = () => {
+    if (disposed || !document.body) return;
+    injectStyles();
+    let btn = document.querySelector(`.${MENU_CLASS}`);
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = MENU_CLASS;
+      btn.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="8" x2="21" y2="8"></line><line x1="3" y1="15" x2="15" y2="15"></line></svg>';
+      document.body.appendChild(btn);
+    }
+    let mask = document.querySelector(`.${BACKDROP_CLASS}`);
+    if (!mask) {
+      mask = document.createElement("div");
+      mask.className = BACKDROP_CLASS;
+      mask.setAttribute("aria-hidden", "true");
+      document.body.appendChild(mask);
+    }
+    menuBtn = btn;
+    syncAria();
+  };
+  const isOpen = () => Boolean(document.body?.classList.contains(OPEN_CLASS));
+  const syncAria = () => {
+    if (!menuBtn) return;
+    const label = menuLabel(isOpen());
+    if (menuBtn.getAttribute("aria-label") !== label) menuBtn.setAttribute("aria-label", label);
+    if (menuBtn.getAttribute("title") !== label) menuBtn.setAttribute("title", label);
+    menuBtn.setAttribute("aria-expanded", isOpen() ? "true" : "false");
+  };
+  const ensureSidebarExpanded = () => {
+    const expand = document.querySelector(
+      'button[aria-label*="\u6253\u5F00\u4FA7\u8FB9\u680F"], button[title*="\u6253\u5F00\u4FA7\u8FB9\u680F"], button[aria-label*="Open sidebar"], button[title*="Open sidebar"], div[class*="collapsed"] button[class*="toggle"]'
+    );
+    if (expand) {
+      try {
+        expand.click();
+      } catch {
+      }
+    }
+  };
+  const openDrawer = () => {
+    if (disposed || !isMobileViewport() || !document.body) return;
+    ensureElements();
+    ensureSidebarExpanded();
+    document.body.classList.add(OPEN_CLASS);
+    syncAria();
+  };
+  const closeDrawer = ({ restoreFocus = true } = {}) => {
+    if (!document.body) return;
+    const wasOpen = isOpen();
+    document.body.classList.remove(OPEN_CLASS);
+    syncAria();
+    if (wasOpen && restoreFocus) {
+      try {
+        menuBtn?.focus?.({ preventScroll: true });
+      } catch {
+      }
+    }
+  };
+  const closeSoon = () => {
+    window.setTimeout(() => {
+      if (!disposed && isOpen()) closeDrawer({ restoreFocus: false });
+    }, 60);
+  };
+  const onClick = (event) => {
+    const target = event.target;
+    if (!isElement(target)) return;
+    if (target.closest(`.${MENU_CLASS}`)) {
+      event.preventDefault();
+      if (isOpen()) closeDrawer();
+      else openDrawer();
+      return;
+    }
+    if (!isOpen()) return;
+    if (target.closest(`.${BACKDROP_CLASS}`)) {
+      closeDrawer();
+      return;
+    }
+    const sidebar = document.querySelector('div[class*="_sidebarCol"]');
+    if (!sidebar || !sidebar.contains(target)) return;
+    if (target.closest('input, textarea, select, [contenteditable="true"]')) return;
+    const sessionRow = target.closest('div[class*="sessionRow"]');
+    if (sessionRow && !target.closest('button, [role="button"]')) {
+      closeSoon();
+      return;
+    }
+    const action = target.closest('button, [role="button"], a');
+    if (!action) return;
+    const label = `${action.getAttribute("aria-label") || ""} ${action.getAttribute("title") || ""} ${action.innerText || ""}`;
+    if (/新建会话|New session|收起侧边栏|Collapse sidebar/.test(label)) {
+      closeSoon();
+      return;
+    }
+    if (action.closest('button[class*="panelRow"]') && !/更多|More/.test(label)) {
+      closeSoon();
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" && isOpen()) closeDrawer();
+  };
+  const onResize = () => {
+    if (!isMobileViewport() && isOpen()) closeDrawer({ restoreFocus: false });
+  };
+  const onVisibilityChange = () => {
+    if (document.visibilityState === "hidden" && isOpen()) closeDrawer({ restoreFocus: false });
+  };
+  injectStyles();
+  ensureElements();
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("visibilitychange", onVisibilityChange);
+  window.addEventListener("resize", onResize);
+  if (typeof MutationObserver === "function" && document.body) {
+    observer = new MutationObserver(() => {
+      if (!document.querySelector(`.${MENU_CLASS}`) || !document.querySelector(`.${BACKDROP_CLASS}`) || !document.getElementById(MOBILE_DRAWER_CSS_ID)) {
+        ensureElements();
+      }
+    });
+    observer.observe(document.body, { childList: true });
+  }
+  syncAria();
+  return () => {
+    disposed = true;
+    try {
+      observer?.disconnect();
+    } catch {
+    }
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("keydown", onKeyDown, true);
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    window.removeEventListener("resize", onResize);
+    document.body?.classList.remove(OPEN_CLASS);
+    document.querySelector(`.${MENU_CLASS}`)?.remove();
+    document.querySelector(`.${BACKDROP_CLASS}`)?.remove();
+    document.getElementById(MOBILE_DRAWER_CSS_ID)?.remove();
+    root.removeAttribute(MOBILE_UI_FLAG);
+  };
+}
+
 // client/index.js
 var name = PLUGIN_ID;
 var inject = ["slots", "connection"];
@@ -543,6 +821,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 },
@@ -559,35 +849,55 @@ function BridgePanel() {
       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",
@@ -702,6 +1012,18 @@ var ctxRpc = async () => ({ ok: false, error: { code: "no-context", message: "RP
 var serviceControl = null;
 function apply(ctx) {
   ctxRpc = (endpoint, payload, signal) => ctx.connection.rpc.call(RPC_CHANNEL, endpoint, payload, signal);
+  let disposeMobile = () => {
+  };
+  try {
+    disposeMobile = setupMobileDrawer();
+  } catch {
+  }
+  if (typeof ctx.effect === "function") {
+    try {
+      ctx.effect(() => disposeMobile, `${PLUGIN_ID}: mobile drawer`);
+    } catch {
+    }
+  }
   const panel = (props = {}) => h(BridgePanel, { ...props, key: "qzsy-dsh-bridge-panel" });
   let visible = true;
   let registration = null;

package/client/index.js

@@ -4,6 +4,7 @@
 // 在线态与最近错误。所有网络操作走 Host 侧 RPC（同一 profile 的本地回环）。
 import { PLUGIN_ID, PACKAGE_NAME, RPC_CHANNEL, RPC_ENDPOINTS } from '../lib/identity.js';
 import { createTranslator } from './locales.mjs';
+import { setupMobileDrawer } from './mobile.js';
 
 export const name = PLUGIN_ID;
 export const inject = ['slots', 'connection'];
@@ -305,6 +306,19 @@ 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'));
+  // 在线态只展示一行「网关：地址」：把 wss://host/_gw/connect 归一成可点开的 web 地址。
+  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 },
     h('div', { style: { marginBottom: 12 } },
@@ -320,27 +334,47 @@ function BridgePanel() {
       t,
     }) : null,
 
+    // 网关卡片：在线时只留一行「网关：地址 + 新窗口打开」；掉线/连接中才展开
+    // 状态徽标与可编辑地址，避免正常状态下一屏塞满诊断信息。
     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,
+      connected
+        ? h('div', { style: styles.row },
+          h('span', { style: { ...styles.muted, whiteSpace: 'nowrap' } }, `${t('gatewayLabel')}：`),
+          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('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 },
@@ -427,6 +461,19 @@ let serviceControl = null;
 
 export function apply(ctx) {
   ctxRpc = (endpoint, payload, signal) => ctx.connection.rpc.call(RPC_CHANNEL, endpoint, payload, signal);
+
+  // 移动端增强：左侧栏改为抽屉。桌面端由 CSS 断点自动跳过；
+  // 失败只影响移动端布局，绝不能让设置页挂掉。
+  let disposeMobile = () => {};
+  try {
+    disposeMobile = setupMobileDrawer();
+  } catch {}
+  if (typeof ctx.effect === 'function') {
+    try {
+      ctx.effect(() => disposeMobile, `${PLUGIN_ID}: mobile drawer`);
+    } catch {}
+  }
+
   const panel = (props = {}) => h(BridgePanel, { ...props, key: 'qzsy-dsh-bridge-panel' });
   let visible = true;
   let registration = null;

package/client/locales.mjs

@@ -3,6 +3,8 @@ export const zh = {
   title: '远程访问',
   subtitle: 'DSH 远程隧道云 · 官方客户端',
   gateway: 'SaaS 网关地址',
+  gatewayLabel: '网关',
+  openInNewWindow: '新窗口打开',
   save: '保存网关',
   saved: '已保存',
   device: '设备',
@@ -63,12 +65,16 @@ export const zh = {
   durationHoursMinutes: '${hours} 小时 ${minutes} 分',
   durationMinutes: '${minutes} 分钟',
   durationUnderMinute: '不足 1 分钟',
+  menuOpen: '打开菜单',
+  menuClose: '关闭菜单',
 };
 
 export const en = {
   title: 'Remote Access',
   subtitle: 'DSH Remote Tunnel Cloud · Official Client',
   gateway: 'SaaS gateway URL',
+  gatewayLabel: 'Gateway',
+  openInNewWindow: 'Open in new window',
   save: 'Save gateway',
   saved: 'Saved',
   device: 'Device',
@@ -129,6 +135,8 @@ export const en = {
   durationHoursMinutes: '${hours} h ${minutes} min',
   durationMinutes: '${minutes} min',
   durationUnderMinute: '< 1 min',
+  menuOpen: 'Open menu',
+  menuClose: 'Close menu',
 };
 
 export function detectLang(host = {}) {