@qzsy/dsh-bridge 3.2.1 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # 更新日志
 
+## [v3.3.1] - 2026-11-02
+
+### 🐛 修复
+
+- **全面屏安全区**：菜单按钮、内容区、抽屉都按 `safe-area-inset-*` 让位，刘海 / 状态栏 / 底部 home indicator 不再遮挡；横屏左右安全区同样生效。
+- **首次加载闪动**：侧栏首帧先无动画隐藏，再启用 280ms 过渡，页面加载时不再看到侧栏从 0 滑出。
+
+### ✨ 改进
+
+- **手势滑动**：支持左缘右滑打开、抽屉内左滑关闭；拖动时抽屉跟手、遮罩同步渐变，松手按距离/速度吸附。
+- **手势防误触**：纵向滚动不触发抽屉；滑动后的合成点击会被吞掉，避免误开/误关会话。
+
+### 🧪 验证
+
+- 模拟 47px 顶部 / 34px 底部安全区：按钮 y=57、内容 padding-top=99px，抽屉 padding 47/34 全部生效。
+- 模拟触摸：拖动中 `translateX=-150px`、松手打开；抽屉内左滑关闭；纵向滑动不误开；9/9 通过。
+
+
+## [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
 
 ### 🐛 修复

package/README.md

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

package/client/client.js

@@ -119,7 +119,9 @@ 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",
@@ -186,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 {
@@ -211,6 +215,465 @@ 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 DRAGGING_CLASS = "qzsy-drawer-dragging";
+var HEADER_CLASS = "qzsy-mobile-header";
+var MENU_CLASS = "qzsy-mobile-menu-btn";
+var BACKDROP_CLASS = "qzsy-mobile-backdrop";
+var STYLE_PLUGIN = "@qzsy/dsh-bridge";
+var EDGE_START_ZONE = 28;
+var DRAG_THRESHOLD = 8;
+var MOBILE_DRAWER_CSS = `
+:root {
+  --qzsy-safe-top: env(safe-area-inset-top, 0px);
+  --qzsy-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --qzsy-safe-left: env(safe-area-inset-left, 0px);
+  --qzsy-safe-right: env(safe-area-inset-right, 0px);
+}
+
+.qzsy-mobile-header,
+.qzsy-mobile-backdrop {
+  display: none;
+}
+
+/* \u83DC\u5355\u6309\u94AE\u5BB9\u5668\uFF1A\u59CB\u7EC8\u5728\u5BBF\u4E3B\u4E4B\u4E0A\uFF1B\u5BB9\u5668\u81EA\u8EAB\u4E0D\u62E6\u622A\u70B9\u51FB */
+.qzsy-mobile-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 65;
+  box-sizing: border-box;
+  align-items: flex-end;
+  padding-top: 10px;
+  padding-top: calc(10px + var(--qzsy-safe-top, 0px));
+  padding-right: 10px;
+  padding-right: calc(10px + var(--qzsy-safe-right, 0px));
+  padding-bottom: 2px;
+  padding-left: 10px;
+  padding-left: calc(10px + var(--qzsy-safe-left, 0px));
+  pointer-events: none;
+}
+
+@media (max-width: 767px) {
+  .qzsy-mobile-header { display: flex; }
+
+  /* 1. \u5DE6\u4FA7\u680F\u8131\u79BB grid\uFF0C\u5185\u5BB9\u5360\u6EE1\uFF1B\u9876\u90E8\u7ED9\u83DC\u5355\u6309\u94AE\u7559\u51FA\u5B89\u5168\u533A\u9AD8\u5EA6 */
+  [data-slot="root"] > div[class*="_frame"] {
+    grid-template-columns: 0px minmax(0px, 1fr) minmax(0px, 0px) !important;
+    box-sizing: border-box !important;
+    padding-top: 52px !important;
+    padding-top: calc(52px + var(--qzsy-safe-top, 0px)) !important;
+    padding-bottom: 0 !important;
+    padding-bottom: var(--qzsy-safe-bottom, 0px) !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\uFF1B\u5185\u90E8\u907F\u5F00\u5B89\u5168\u533A\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;
+    box-sizing: border-box !important;
+    padding-top: 0 !important;
+    padding-top: var(--qzsy-safe-top, 0px) !important;
+    padding-bottom: 0 !important;
+    padding-bottom: var(--qzsy-safe-bottom, 0px) !important;
+    padding-left: 0 !important;
+    padding-left: var(--qzsy-safe-left, 0px) !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;
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    will-change: transform;
+  }
+  /* \u9996\u5E27\u5148\u5C31\u4F4D\u3001\u4E0D\u64AD\u653E\u5165\u573A\u52A8\u753B\uFF0C\u907F\u514D\u9875\u9762\u52A0\u8F7D\u65F6\u4FA7\u680F\u4ECE 0 \u6ED1\u51FA */
+  body.qzsy-drawer-ready div[class*="_sidebarCol"] {
+    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+  }
+  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;
+  }
+
+  /* \u62D6\u52A8\u4E2D\uFF1A\u5173\u95ED\u8FC7\u6E21\uFF0Ctransform/\u906E\u7F69\u76F4\u63A5\u8DDF\u624B */
+  body.qzsy-drawer-dragging div[class*="_sidebarCol"] {
+    transition: none !important;
+    transform: translateX(var(--qzsy-drawer-x, -102%)) !important;
+  }
+  body.qzsy-drawer-dragging .qzsy-mobile-backdrop {
+    transition: none !important;
+    opacity: var(--qzsy-drawer-progress, 0) !important;
+    pointer-events: auto !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. \u83DC\u5355\u6309\u94AE\uFF1A\u4F4D\u4E8E\u5B89\u5168\u533A\u4E0B\u65B9\u7684 52px \u7559\u767D\u6761\u5185 */
+  .qzsy-mobile-menu-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    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;
+    pointer-events: auto;
+    -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 drawerWidth() {
+  if (typeof window === "undefined") return 300;
+  return Math.min(300, Math.round(window.innerWidth * 0.84));
+}
+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;
+  let gesture = null;
+  let suppressClickUntil = 0;
+  const ensureElements = () => {
+    if (disposed || !document.body) return;
+    injectStyles();
+    let header = document.querySelector(`.${HEADER_CLASS}`);
+    if (!header) {
+      header = document.createElement("div");
+      header.className = HEADER_CLASS;
+      document.body.appendChild(header);
+    }
+    let btn = header.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>';
+      header.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 setDragProgress = (x, width) => {
+    document.body.style.setProperty("--qzsy-drawer-x", `${x}px`);
+    document.body.style.setProperty("--qzsy-drawer-progress", String(Math.max(0, Math.min(1, 1 - Math.abs(x) / width))));
+  };
+  const clearDrag = () => {
+    document.body.classList.remove(DRAGGING_CLASS);
+    document.body.style.removeProperty("--qzsy-drawer-x");
+    document.body.style.removeProperty("--qzsy-drawer-progress");
+  };
+  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) => {
+    if (Date.now() < suppressClickUntil) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    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()) {
+      gesture = null;
+      clearDrag();
+      closeDrawer({ restoreFocus: false });
+    }
+  };
+  const onVisibilityChange = () => {
+    if (document.visibilityState === "hidden" && isOpen()) {
+      gesture = null;
+      clearDrag();
+      closeDrawer({ restoreFocus: false });
+    }
+  };
+  const onTouchStart = (event) => {
+    if (disposed || !isMobileViewport() || event.touches?.length !== 1) return;
+    const touch = event.touches[0];
+    const sidebar = document.querySelector('div[class*="_sidebarCol"]');
+    if (!sidebar) return;
+    const open = isOpen();
+    if (!open) {
+      if (touch.clientX > EDGE_START_ZONE) return;
+      ensureSidebarExpanded();
+      gesture = {
+        mode: "open",
+        startX: touch.clientX,
+        startY: touch.clientY,
+        startT: Date.now(),
+        width: drawerWidth(),
+        active: false,
+        dx: 0
+      };
+      return;
+    }
+    if (!sidebar.contains(event.target)) return;
+    if (event.target.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+    gesture = {
+      mode: "close",
+      startX: touch.clientX,
+      startY: touch.clientY,
+      startT: Date.now(),
+      width: drawerWidth(),
+      active: false,
+      dx: 0
+    };
+  };
+  const onTouchMove = (event) => {
+    if (!gesture || disposed) return;
+    const touch = event.touches?.[0];
+    if (!touch) return;
+    const dx = touch.clientX - gesture.startX;
+    const dy = touch.clientY - gesture.startY;
+    if (!gesture.active) {
+      if (Math.abs(dx) < DRAG_THRESHOLD) return;
+      if (Math.abs(dx) < Math.abs(dy) * 1.2) {
+        gesture = null;
+        return;
+      }
+      if (gesture.mode === "open" && dx <= 0) {
+        gesture = null;
+        return;
+      }
+      if (gesture.mode === "close" && dx >= 0) {
+        gesture = null;
+        return;
+      }
+      gesture.active = true;
+      suppressClickUntil = Date.now() + 450;
+      document.body.classList.add(DRAGGING_CLASS);
+    }
+    const width = Math.max(1, gesture.width);
+    let x;
+    if (gesture.mode === "open") x = Math.max(-width, Math.min(0, -width + dx));
+    else x = Math.max(-width, Math.min(0, dx));
+    gesture.dx = dx;
+    setDragProgress(x, width);
+  };
+  const finishGesture = (touch) => {
+    if (!gesture) return;
+    const current = gesture;
+    gesture = null;
+    if (!current.active) return;
+    const endX = touch ? touch.clientX : current.startX + current.dx;
+    const dx = endX - current.startX;
+    const elapsed = Math.max(1, Date.now() - current.startT);
+    const velocity = dx / elapsed;
+    const threshold = Math.min(90, Math.max(60, current.width * 0.3));
+    const openNow = current.mode === "open" ? dx > threshold || velocity > 0.45 : !(dx < -Math.max(50, threshold * 0.7) || velocity < -0.35);
+    document.body.classList.toggle(OPEN_CLASS, openNow);
+    if (openNow) ensureSidebarExpanded();
+    syncAria();
+    suppressClickUntil = Date.now() + 250;
+    window.requestAnimationFrame(clearDrag);
+  };
+  const onTouchEnd = (event) => {
+    if (!gesture) return;
+    finishGesture(event.changedTouches?.[0]);
+  };
+  const onTouchCancel = () => {
+    if (!gesture) return;
+    finishGesture(null);
+  };
+  injectStyles();
+  ensureElements();
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("visibilitychange", onVisibilityChange);
+  window.addEventListener("resize", onResize);
+  window.addEventListener("touchstart", onTouchStart, { passive: true });
+  window.addEventListener("touchmove", onTouchMove, { passive: true });
+  window.addEventListener("touchend", onTouchEnd, { passive: true });
+  window.addEventListener("touchcancel", onTouchCancel, { passive: true });
+  window.requestAnimationFrame(() => {
+    if (!disposed && document.body) document.body.classList.add("qzsy-drawer-ready");
+  });
+  if (typeof MutationObserver === "function" && document.body) {
+    observer = new MutationObserver(() => {
+      if (!document.querySelector(`.${HEADER_CLASS}`) || !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;
+    gesture = null;
+    try {
+      observer?.disconnect();
+    } catch {
+    }
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("keydown", onKeyDown, true);
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    window.removeEventListener("resize", onResize);
+    window.removeEventListener("touchstart", onTouchStart);
+    window.removeEventListener("touchmove", onTouchMove);
+    window.removeEventListener("touchend", onTouchEnd);
+    window.removeEventListener("touchcancel", onTouchCancel);
+    clearDrag();
+    document.body?.classList.remove(OPEN_CLASS);
+    document.body?.classList.remove("qzsy-drawer-ready");
+    document.querySelector(`.${HEADER_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"];
@@ -738,6 +1201,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'];
@@ -460,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

@@ -65,6 +65,8 @@ export const zh = {
   durationHoursMinutes: '${hours} 小时 ${minutes} 分',
   durationMinutes: '${minutes} 分钟',
   durationUnderMinute: '不足 1 分钟',
+  menuOpen: '打开菜单',
+  menuClose: '关闭菜单',
 };
 
 export const en = {
@@ -133,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 = {}) {

package/client/mobile.js

@@ -0,0 +1,509 @@
+// 移动端抽屉导航：把宿主左侧栏（会话/工作区菜单）改成从左侧滑出的 sheet。
+//
+// 设计目标（对齐 tmp/dsh-bridge 的移动端体验，但只保留本项目需要的部分）：
+// - 窄屏内容占满屏宽，左侧栏变成带遮罩的抽屉；
+// - 支持全面屏安全区（刘海/状态栏/home indicator），菜单按钮和抽屉内容都不被遮挡；
+// - 支持手势：左缘右滑打开、抽屉内左滑关闭，拖动时抽屉跟随手指，松手吸附；
+// - 桌面端完全不受影响。
+//
+// 宿主 DOM 是 CSS Modules 哈希类名，本模块只依赖稳定结构/ARIA：
+//   div[class*="_frame"] / _sidebarCol / _centerCol / _rightbarCol / _overlayLayer
+//   button[aria-label*="打开侧边栏"]（英文 Open sidebar）
+//   div[class*="sessionRow"]（会话行；projectRow 是工作区分组，不能误关）
+import { createTranslator } from './locales.mjs';
+
+export const MOBILE_MAX_WIDTH = 767;
+export const MOBILE_DRAWER_CSS_ID = 'qzsy-mobile-drawer-styles';
+export const MOBILE_UI_FLAG = 'data-qzsy-mobile-drawer';
+const OPEN_CLASS = 'qzsy-drawer-open';
+const DRAGGING_CLASS = 'qzsy-drawer-dragging';
+const HEADER_CLASS = 'qzsy-mobile-header';
+const MENU_CLASS = 'qzsy-mobile-menu-btn';
+const BACKDROP_CLASS = 'qzsy-mobile-backdrop';
+const STYLE_PLUGIN = '@qzsy/dsh-bridge';
+const EDGE_START_ZONE = 28;
+const DRAG_THRESHOLD = 8;
+
+export const MOBILE_DRAWER_CSS = `
+:root {
+  --qzsy-safe-top: env(safe-area-inset-top, 0px);
+  --qzsy-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --qzsy-safe-left: env(safe-area-inset-left, 0px);
+  --qzsy-safe-right: env(safe-area-inset-right, 0px);
+}
+
+.qzsy-mobile-header,
+.qzsy-mobile-backdrop {
+  display: none;
+}
+
+/* 菜单按钮容器：始终在宿主之上；容器自身不拦截点击 */
+.qzsy-mobile-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 65;
+  box-sizing: border-box;
+  align-items: flex-end;
+  padding-top: 10px;
+  padding-top: calc(10px + var(--qzsy-safe-top, 0px));
+  padding-right: 10px;
+  padding-right: calc(10px + var(--qzsy-safe-right, 0px));
+  padding-bottom: 2px;
+  padding-left: 10px;
+  padding-left: calc(10px + var(--qzsy-safe-left, 0px));
+  pointer-events: none;
+}
+
+@media (max-width: 767px) {
+  .qzsy-mobile-header { display: flex; }
+
+  /* 1. 左侧栏脱离 grid，内容占满；顶部给菜单按钮留出安全区高度 */
+  [data-slot="root"] > div[class*="_frame"] {
+    grid-template-columns: 0px minmax(0px, 1fr) minmax(0px, 0px) !important;
+    box-sizing: border-box !important;
+    padding-top: 52px !important;
+    padding-top: calc(52px + var(--qzsy-safe-top, 0px)) !important;
+    padding-bottom: 0 !important;
+    padding-bottom: var(--qzsy-safe-bottom, 0px) !important;
+  }
+  div[class*="_centerCol"] { grid-column: 2 !important; }
+  div[class*="_rightbarCol"] { grid-column: 3 !important; }
+  div[class*="_overlayLayer"] { grid-column: 1 / -1 !important; }
+
+  /* 2. 原生侧栏改为 fixed 抽屉（默认藏在屏幕左侧；内部避开安全区） */
+  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;
+    box-sizing: border-box !important;
+    padding-top: 0 !important;
+    padding-top: var(--qzsy-safe-top, 0px) !important;
+    padding-bottom: 0 !important;
+    padding-bottom: var(--qzsy-safe-bottom, 0px) !important;
+    padding-left: 0 !important;
+    padding-left: var(--qzsy-safe-left, 0px) !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;
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    will-change: transform;
+  }
+  /* 首帧先就位、不播放入场动画，避免页面加载时侧栏从 0 滑出 */
+  body.qzsy-drawer-ready div[class*="_sidebarCol"] {
+    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+  }
+  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;
+  }
+
+  /* 拖动中：关闭过渡，transform/遮罩直接跟手 */
+  body.qzsy-drawer-dragging div[class*="_sidebarCol"] {
+    transition: none !important;
+    transform: translateX(var(--qzsy-drawer-x, -102%)) !important;
+  }
+  body.qzsy-drawer-dragging .qzsy-mobile-backdrop {
+    transition: none !important;
+    opacity: var(--qzsy-drawer-progress, 0) !important;
+    pointer-events: auto !important;
+  }
+
+  /* 3. 半透明遮罩：点击收起 */
+  .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. 菜单按钮：位于安全区下方的 52px 留白条内 */
+  .qzsy-mobile-menu-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    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;
+    pointer-events: auto;
+    -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 drawerWidth() {
+  if (typeof window === 'undefined') return 300;
+  return Math.min(300, Math.round(window.innerWidth * 0.84));
+}
+
+/**
+ * 安装移动端抽屉导航。无 DOM 环境（单测/SSR）安全退化为 no-op。
+ * 返回 disposer；宿主若支持 ctx.effect，可注册为插件副作用。
+ */
+export 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;
+  let gesture = null;
+  let suppressClickUntil = 0;
+
+  const ensureElements = () => {
+    if (disposed || !document.body) return;
+    injectStyles();
+
+    let header = document.querySelector(`.${HEADER_CLASS}`);
+    if (!header) {
+      header = document.createElement('div');
+      header.className = HEADER_CLASS;
+      document.body.appendChild(header);
+    }
+    let btn = header.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>';
+      header.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*="打开侧边栏"], button[title*="打开侧边栏"], button[aria-label*="Open sidebar"], button[title*="Open sidebar"], div[class*="collapsed"] button[class*="toggle"]',
+    );
+    if (expand) {
+      try { expand.click(); } catch { /* 宿主没挂载完时忽略，下次打开再试 */ }
+    }
+  };
+
+  const setDragProgress = (x, width) => {
+    document.body.style.setProperty('--qzsy-drawer-x', `${x}px`);
+    document.body.style.setProperty('--qzsy-drawer-progress', String(Math.max(0, Math.min(1, 1 - Math.abs(x) / width))));
+  };
+
+  const clearDrag = () => {
+    document.body.classList.remove(DRAGGING_CLASS);
+    document.body.style.removeProperty('--qzsy-drawer-x');
+    document.body.style.removeProperty('--qzsy-drawer-progress');
+  };
+
+  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) => {
+    if (Date.now() < suppressClickUntil) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    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()) {
+      gesture = null;
+      clearDrag();
+      closeDrawer({ restoreFocus: false });
+    }
+  };
+
+  const onVisibilityChange = () => {
+    if (document.visibilityState === 'hidden' && isOpen()) {
+      gesture = null;
+      clearDrag();
+      closeDrawer({ restoreFocus: false });
+    }
+  };
+
+  // ---- 手势：左缘右滑打开；抽屉内左滑关闭；拖动跟手 ----
+  const onTouchStart = (event) => {
+    if (disposed || !isMobileViewport() || event.touches?.length !== 1) return;
+    const touch = event.touches[0];
+    const sidebar = document.querySelector('div[class*="_sidebarCol"]');
+    if (!sidebar) return;
+    const open = isOpen();
+
+    if (!open) {
+      if (touch.clientX > EDGE_START_ZONE) return;
+      // 先把宿主侧栏展开，保证拖动时抽屉里有完整会话列表
+      ensureSidebarExpanded();
+      gesture = {
+        mode: 'open',
+        startX: touch.clientX,
+        startY: touch.clientY,
+        startT: Date.now(),
+        width: drawerWidth(),
+        active: false,
+        dx: 0,
+      };
+      return;
+    }
+
+    if (!sidebar.contains(event.target)) return;
+    if (event.target.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+    gesture = {
+      mode: 'close',
+      startX: touch.clientX,
+      startY: touch.clientY,
+      startT: Date.now(),
+      width: drawerWidth(),
+      active: false,
+      dx: 0,
+    };
+  };
+
+  const onTouchMove = (event) => {
+    if (!gesture || disposed) return;
+    const touch = event.touches?.[0];
+    if (!touch) return;
+    const dx = touch.clientX - gesture.startX;
+    const dy = touch.clientY - gesture.startY;
+
+    if (!gesture.active) {
+      if (Math.abs(dx) < DRAG_THRESHOLD) return;
+      // 纵向为主：交还给宿主滚动，本次不拦截
+      if (Math.abs(dx) < Math.abs(dy) * 1.2) { gesture = null; return; }
+      if (gesture.mode === 'open' && dx <= 0) { gesture = null; return; }
+      if (gesture.mode === 'close' && dx >= 0) { gesture = null; return; }
+      gesture.active = true;
+      suppressClickUntil = Date.now() + 450;
+      document.body.classList.add(DRAGGING_CLASS);
+    }
+
+    const width = Math.max(1, gesture.width);
+    let x;
+    if (gesture.mode === 'open') x = Math.max(-width, Math.min(0, -width + dx));
+    else x = Math.max(-width, Math.min(0, dx));
+    gesture.dx = dx;
+    setDragProgress(x, width);
+  };
+
+  const finishGesture = (touch) => {
+    if (!gesture) return;
+    const current = gesture;
+    gesture = null;
+    if (!current.active) return;
+
+    const endX = touch ? touch.clientX : current.startX + current.dx;
+    const dx = endX - current.startX;
+    const elapsed = Math.max(1, Date.now() - current.startT);
+    const velocity = dx / elapsed;
+    const threshold = Math.min(90, Math.max(60, current.width * 0.3));
+    const openNow = current.mode === 'open'
+      ? dx > threshold || velocity > 0.45
+      : !(dx < -Math.max(50, threshold * 0.7) || velocity < -0.35);
+
+    document.body.classList.toggle(OPEN_CLASS, openNow);
+    if (openNow) ensureSidebarExpanded();
+    syncAria();
+    suppressClickUntil = Date.now() + 250;
+    // 等一帧让浏览器接住当前拖动位置，再撤掉拖动样式做吸附动画
+    window.requestAnimationFrame(clearDrag);
+  };
+
+  const onTouchEnd = (event) => {
+    if (!gesture) return;
+    finishGesture(event.changedTouches?.[0]);
+  };
+
+  const onTouchCancel = () => {
+    if (!gesture) return;
+    finishGesture(null);
+  };
+
+  injectStyles();
+  ensureElements();
+  document.addEventListener('click', onClick, true);
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('visibilitychange', onVisibilityChange);
+  window.addEventListener('resize', onResize);
+  window.addEventListener('touchstart', onTouchStart, { passive: true });
+  window.addEventListener('touchmove', onTouchMove, { passive: true });
+  window.addEventListener('touchend', onTouchEnd, { passive: true });
+  window.addEventListener('touchcancel', onTouchCancel, { passive: true });
+
+  // 等侧栏先无动画地藏到屏幕外，再启用过渡（否则首次加载会看到 280ms 滑出）
+  window.requestAnimationFrame(() => {
+    if (!disposed && document.body) document.body.classList.add('qzsy-drawer-ready');
+  });
+
+  if (typeof MutationObserver === 'function' && document.body) {
+    observer = new MutationObserver(() => {
+      if (!document.querySelector(`.${HEADER_CLASS}`) || !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;
+    gesture = null;
+    try { observer?.disconnect(); } catch { /* 忽略 */ }
+    document.removeEventListener('click', onClick, true);
+    document.removeEventListener('keydown', onKeyDown, true);
+    document.removeEventListener('visibilitychange', onVisibilityChange);
+    window.removeEventListener('resize', onResize);
+    window.removeEventListener('touchstart', onTouchStart);
+    window.removeEventListener('touchmove', onTouchMove);
+    window.removeEventListener('touchend', onTouchEnd);
+    window.removeEventListener('touchcancel', onTouchCancel);
+    clearDrag();
+    document.body?.classList.remove(OPEN_CLASS);
+    document.body?.classList.remove('qzsy-drawer-ready');
+    document.querySelector(`.${HEADER_CLASS}`)?.remove();
+    document.querySelector(`.${BACKDROP_CLASS}`)?.remove();
+    document.getElementById(MOBILE_DRAWER_CSS_ID)?.remove();
+    root.removeAttribute(MOBILE_UI_FLAG);
+  };
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@qzsy/dsh-bridge",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "description": "DSH 远程隧道云官方客户端插件：一条命令把本机 DeepSeek Harness 接入云端隧道（设备码绑定、短期令牌、本地门禁代理、HTTP/SSE/WebSocket 反向隧道）。",
-  "releaseNotes": "【v3.2.1】网关发布不再掉线\\n• 网关 drain（滚动重启）后自动重连，不再需要人工点「连接」\\n• 网关在线时面板只显示一行「网关：地址 + 新窗口打开」，掉线才展开详情\\n• npm 仓库地址补 git+ 前缀",
+  "releaseNotes": "【v3.3.1】移动端安全区与手势修复\\n• 全面屏：菜单按钮/内容/抽屉按 safe-area-inset 让位，刘海、状态栏、home indicator 不再遮挡\\n• 手势：左缘右滑打开、抽屉内左滑关闭；拖动跟手、遮罩渐变，松手按距离/速度吸附\\n• 纵向滚动不误触抽屉；滑动后的合成点击会被吞掉\\n• 首次加载不再播放侧栏滑出动画",
   "type": "module",
   "main": "lib/index.js",
   "exports": {