@qzsy/dsh-bridge 3.3.1 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 更新日志
 
+## [v3.4.0] - 2026-11-02
+
+### ✨ 新增
+
+- **移动端模型切换器底部 sheet**：宿主的模型二级菜单从桌面 popover 改成全宽底部 sheet——圆角、抓手、遮罩、滚动区、`safe-area` 底部留白，切换模型更接近原生。
+- **模型 sheet 手势**：点遮罩关闭；在顶部抓手上向下拖关闭（跟手 + 松手吸附）；桌面端 popover 完全不变。
+- **兼容有/无搜索框的宿主**：优先用「搜索模型」输入框定位；没有搜索框的移动版本按模型触发链 + 菜单行数兜底，不依赖宿主 CSS Modules 哈希。
+
+### 🧪 验证
+
+- 真实 DSH + 无头 Chrome：模型二级菜单变成 390px 全宽、`z=1200`、18px 顶部圆角、遮罩 `z=1190`；底部安全区叠加后内边距 48px；点遮罩 / 顶部下拉均能关闭，7/7 通过。
+
+
 ## [v3.3.1] - 2026-11-02
 
 ### 🐛 修复

package/README.md

@@ -48,6 +48,7 @@ dsh plugin --profile <name> add @qzsy/dsh-bridge
 
 - 内容区占满屏宽，左上角「菜单」按钮打开会话 / 工作区 / 插件入口；
 - 支持手势：左缘向右滑打开、抽屉内向左滑关闭，拖动时跟手，松手吸附；
+- 模型切换器在手机上改为底部 sheet：全宽、抓手、遮罩，支持下拉/点遮罩关闭；
 - 全面屏自动避开安全区：刘海 / 状态栏 / 底部 home indicator 不遮挡内容；
 - 点遮罩、点会话行、按 Esc 或转回桌面宽度都会自动收起；
 - 桌面端保持 DSH 原生布局，不受影响。

package/client/client.js

@@ -236,7 +236,8 @@ var MOBILE_DRAWER_CSS = `
 }
 
 .qzsy-mobile-header,
-.qzsy-mobile-backdrop {
+.qzsy-mobile-backdrop,
+.qzsy-model-sheet-backdrop {
   display: none;
 }
 
@@ -366,6 +367,109 @@ var MOBILE_DRAWER_CSS = `
     opacity: 0;
     pointer-events: none;
   }
+
+  /* 5. \u6A21\u578B\u5207\u6362\u5668\uFF1A\u628A\u5BBF\u4E3B\u684C\u9762 popover \u6539\u6210\u79FB\u52A8\u7AEF\u5E95\u90E8 sheet */
+  @keyframes qzsy-model-sheet-in {
+    from { transform: translateY(100%); opacity: 0.6; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  .qzsy-model-sheet-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 1190;
+    background: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 240ms ease;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  body.qzsy-model-sheet-open .qzsy-model-sheet-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  [data-qzsy-model-sheet] {
+    position: fixed !important;
+    top: auto !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    height: auto !important;
+    max-height: 82vh !important;
+    max-height: 82dvh !important;
+    margin: 0 !important;
+    padding: 18px 0 0 !important;
+    border: 0 !important;
+    border-radius: 18px 18px 0 0 !important;
+    background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
+    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18) !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+    z-index: 1200 !important;
+    transform-origin: bottom center !important;
+    animation: qzsy-model-sheet-in 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+    will-change: transform;
+  }
+  [data-qzsy-model-sheet]::before {
+    content: '';
+    position: absolute;
+    top: 7px;
+    left: 50%;
+    width: 36px;
+    height: 4px;
+    margin-left: -18px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.18);
+    pointer-events: none;
+  }
+  [data-qzsy-model-sheet] > div,
+  [data-qzsy-model-sheet] div[role="menu"] {
+    width: 100% !important;
+    max-width: 100% !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    box-sizing: border-box !important;
+  }
+  [data-qzsy-model-sheet] div[role="menu"] {
+    max-height: calc(82vh - 40px) !important;
+    max-height: calc(82dvh - 40px) !important;
+    overflow-y: auto !important;
+    overscroll-behavior: contain !important;
+    padding: 8px 12px calc(14px + var(--qzsy-safe-bottom, 0px)) !important;
+  }
+  [data-qzsy-model-sheet] input {
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  [data-qzsy-model-sheet] button[role="menuitem"],
+  [data-qzsy-model-sheet] [role="option"] {
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  [data-qzsy-model-sheet].qzsy-model-sheet-closing {
+    transform: translateY(100%) !important;
+    opacity: 0 !important;
+    transition: transform 220ms ease, opacity 220ms ease !important;
+    animation: none !important;
+  }
+  body.qzsy-model-sheet-dragging [data-qzsy-model-sheet] {
+    transform: translateY(var(--qzsy-model-sheet-y, 0px)) !important;
+    transition: none !important;
+    animation: none !important;
+  }
+  body.qzsy-model-sheet-dragging .qzsy-model-sheet-backdrop {
+    opacity: var(--qzsy-model-sheet-progress, 1) !important;
+    transition: none !important;
+  }
 }
 `;
 function isElement(value) {
@@ -405,6 +509,11 @@ function setupMobileDrawer() {
   let disposed = false;
   let gesture = null;
   let suppressClickUntil = 0;
+  let modelPortal = null;
+  let modelBackdrop = null;
+  let modelChainUntil = 0;
+  let modelDrag = null;
+  let modelDragHandlers = null;
   const ensureElements = () => {
     if (disposed || !document.body) return;
     injectStyles();
@@ -484,6 +593,219 @@ function setupMobileDrawer() {
       if (!disposed && isOpen()) closeDrawer({ restoreFocus: false });
     }, 60);
   };
+  const bodyPortalOf = (node) => {
+    let el = node;
+    while (el && el.parentElement && el.parentElement !== document.body) el = el.parentElement;
+    return el && el.parentElement === document.body ? el : null;
+  };
+  const visiblePortal = (el) => {
+    if (!el || !el.isConnected) return false;
+    const s = getComputedStyle(el);
+    if (s.display === "none" || s.visibility === "hidden") return false;
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0;
+  };
+  const isModelTrigger = (target) => {
+    const el = target?.closest?.('button, [role="menuitem"], [role="button"], a');
+    if (!el) return false;
+    const label = `${el.getAttribute("aria-label") || ""} ${el.getAttribute("title") || ""} ${el.innerText || ""}`;
+    return /模型|Model|model/.test(label);
+  };
+  const findModelPortal = () => {
+    if (!isMobileViewport()) return null;
+    const search = document.querySelector(
+      'input[placeholder*="\u641C\u7D22\u6A21\u578B"], input[placeholder*="Search model"], input[aria-label*="\u641C\u7D22\u6A21\u578B"], input[aria-label*="Search model"]'
+    );
+    if (search) {
+      const menu = search.closest('[role="menu"]') || search.closest('[class*="_menu"]');
+      const portal = bodyPortalOf(menu || search);
+      if (portal && visiblePortal(portal)) {
+        const s = getComputedStyle(portal);
+        if ((s.position === "fixed" || s.position === "absolute") && portal.getBoundingClientRect().width > 120) return portal;
+      }
+    }
+    if (Date.now() > modelChainUntil) return null;
+    const candidates = [];
+    for (const el of document.body.children) {
+      if (!(el instanceof HTMLElement)) continue;
+      if (el === modelBackdrop || el.classList.contains(HEADER_CLASS) || el.classList.contains(BACKDROP_CLASS)) continue;
+      if (!visiblePortal(el)) continue;
+      const s = getComputedStyle(el);
+      if (s.position !== "fixed" && s.position !== "absolute") continue;
+      const menu = el.querySelector('[role="menu"], [role="listbox"]');
+      if (!menu) continue;
+      const text = menu.innerText || "";
+      const rows = menu.querySelectorAll('[role="menuitem"], [role="option"], button, a, [tabindex]').length;
+      const hasSearch = Boolean(el.querySelector('input[placeholder*="\u641C\u7D22\u6A21\u578B"], input[placeholder*="Search model"]'));
+      if (/推理等级|Reasoning effort|推理强度/i.test(text) && rows <= 2) continue;
+      const rect = el.getBoundingClientRect();
+      const alreadySheet = rect.width >= window.innerWidth - 2 && Math.abs(rect.bottom - window.innerHeight) < 2 && rect.height > 120;
+      if (alreadySheet && !hasSearch) continue;
+      if (hasSearch || rows > 2) candidates.push({ el, rows, hasSearch });
+    }
+    candidates.sort((a, b) => Number(b.hasSearch) - Number(a.hasSearch) || b.rows - a.rows);
+    return candidates[0]?.el || null;
+  };
+  const hostBackdropPresent = () => {
+    for (const el of document.body.children) {
+      if (!(el instanceof HTMLElement)) continue;
+      if (el === modelBackdrop || el.classList.contains(HEADER_CLASS) || el.classList.contains(BACKDROP_CLASS)) continue;
+      const s = getComputedStyle(el);
+      if (s.position !== "fixed") continue;
+      const r = el.getBoundingClientRect();
+      if (r.width < window.innerWidth - 4 || r.height < window.innerHeight - 4) continue;
+      if (Number(s.opacity) < 0.1) continue;
+      const bg = s.backgroundColor || "";
+      if (!/^rgba?\(/.test(bg) || /rgba\(0,\s*0,\s*0,\s*0\)/.test(bg)) continue;
+      if (el.querySelector('[role="menu"]')) continue;
+      return true;
+    }
+    return false;
+  };
+  const requestHostModelClose = (portal) => {
+    if (disposed || !portal || !portal.isConnected) return;
+    const PointerCtor = typeof window.PointerEvent === "function" ? window.PointerEvent : window.MouseEvent;
+    try {
+      document.body.dispatchEvent(new PointerCtor("pointerdown", { bubbles: true, cancelable: true }));
+    } catch {
+    }
+    try {
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
+    } catch {
+    }
+    window.setTimeout(() => {
+      if (disposed || !portal.isConnected) return;
+      const trigger = document.querySelector('button[aria-haspopup="menu"][aria-expanded="true"][aria-label*="\u9009\u62E9\u6A21\u578B"], button[aria-haspopup="menu"][aria-expanded="true"][aria-label*="Select model"]');
+      try {
+        trigger?.click();
+      } catch {
+      }
+      window.setTimeout(() => {
+        if (!disposed && portal.isConnected && modelPortal === portal) clearModelSheet();
+      }, 450);
+    }, 120);
+  };
+  const closeModelSheetNow = () => {
+    const portal = modelPortal;
+    if (!portal) return;
+    document.body.classList.remove("qzsy-model-sheet-open");
+    document.body.style.removeProperty("--qzsy-model-sheet-y");
+    document.body.style.removeProperty("--qzsy-model-sheet-progress");
+    requestHostModelClose(portal);
+  };
+  const closeModelSheetAnimated = () => {
+    const portal = modelPortal;
+    if (!portal) return;
+    portal.classList.add("qzsy-model-sheet-closing");
+    document.body.classList.remove("qzsy-model-sheet-open");
+    window.setTimeout(() => requestHostModelClose(portal), 180);
+  };
+  const ensureModelBackdrop = () => {
+    if (modelBackdrop || hostBackdropPresent()) return;
+    modelBackdrop = document.createElement("div");
+    modelBackdrop.className = "qzsy-model-sheet-backdrop";
+    modelBackdrop.setAttribute("aria-hidden", "true");
+    modelBackdrop.addEventListener("pointerdown", (event) => event.stopPropagation(), true);
+    modelBackdrop.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      closeModelSheetNow();
+    });
+    document.body.appendChild(modelBackdrop);
+  };
+  const detachModelDrag = () => {
+    if (!modelPortal || !modelDragHandlers) return;
+    modelPortal.removeEventListener("touchstart", modelDragHandlers.onStart);
+    modelPortal.removeEventListener("touchmove", modelDragHandlers.onMove);
+    modelPortal.removeEventListener("touchend", modelDragHandlers.onEnd);
+    modelPortal.removeEventListener("touchcancel", modelDragHandlers.onEnd);
+    modelDragHandlers = null;
+  };
+  const attachModelDrag = (portal) => {
+    if (!portal || modelDragHandlers) return;
+    const onStart = (event) => {
+      if (event.touches?.length !== 1) return;
+      const touch = event.touches[0];
+      const rect = portal.getBoundingClientRect();
+      if (touch.clientY - rect.top > 30) return;
+      if (event.target.closest?.('input, textarea, select, button, a, [contenteditable="true"]')) return;
+      modelDrag = { startY: touch.clientY, startT: Date.now(), dy: 0, active: false, height: rect.height };
+    };
+    const onMove = (event) => {
+      if (!modelDrag) return;
+      const touch = event.touches?.[0];
+      if (!touch) return;
+      const dy = touch.clientY - modelDrag.startY;
+      if (!modelDrag.active) {
+        if (dy < 6) return;
+        modelDrag.active = true;
+        document.body.classList.add("qzsy-model-sheet-dragging");
+      }
+      modelDrag.dy = Math.max(0, dy);
+      document.body.style.setProperty("--qzsy-model-sheet-y", `${modelDrag.dy}px`);
+      document.body.style.setProperty("--qzsy-model-sheet-progress", String(Math.max(0, 1 - modelDrag.dy / Math.max(1, modelDrag.height))));
+      if (event.cancelable) event.preventDefault();
+    };
+    const onEnd = () => {
+      if (!modelDrag) return;
+      const drag = modelDrag;
+      modelDrag = null;
+      if (!drag.active) return;
+      document.body.classList.remove("qzsy-model-sheet-dragging");
+      document.body.style.removeProperty("--qzsy-model-sheet-y");
+      document.body.style.removeProperty("--qzsy-model-sheet-progress");
+      const velocity = drag.dy / Math.max(1, Date.now() - drag.startT);
+      if (drag.dy > 110 || velocity > 0.5) closeModelSheetAnimated();
+    };
+    portal.addEventListener("touchstart", onStart, { passive: true });
+    portal.addEventListener("touchmove", onMove, { passive: false });
+    portal.addEventListener("touchend", onEnd, { passive: true });
+    portal.addEventListener("touchcancel", onEnd, { passive: true });
+    modelDragHandlers = { onStart, onMove, onEnd };
+  };
+  const clearModelSheet = () => {
+    if (modelPortal) {
+      detachModelDrag();
+      modelPortal.removeAttribute("data-qzsy-model-sheet");
+      modelPortal.classList.remove("qzsy-model-sheet", "qzsy-model-sheet-closing");
+    }
+    modelPortal = null;
+    modelDrag = null;
+    document.body?.classList.remove("qzsy-model-sheet-open", "qzsy-model-sheet-dragging");
+    document.body?.style.removeProperty("--qzsy-model-sheet-y");
+    document.body?.style.removeProperty("--qzsy-model-sheet-progress");
+    if (modelBackdrop) {
+      modelBackdrop.remove();
+      modelBackdrop = null;
+    }
+  };
+  const applyModelSheet = (portal) => {
+    if (modelPortal === portal) return;
+    clearModelSheet();
+    modelPortal = portal;
+    portal.setAttribute("data-qzsy-model-sheet", "");
+    portal.classList.add("qzsy-model-sheet");
+    attachModelDrag(portal);
+    ensureModelBackdrop();
+    window.requestAnimationFrame(() => {
+      if (!disposed && modelPortal === portal) document.body.classList.add("qzsy-model-sheet-open");
+    });
+  };
+  const syncModelSheet = () => {
+    if (disposed) return;
+    if (!isMobileViewport()) {
+      clearModelSheet();
+      return;
+    }
+    if (modelPortal && !visiblePortal(modelPortal)) clearModelSheet();
+    const found = findModelPortal();
+    if (!found) {
+      if (modelPortal?.isConnected) return;
+      if (modelPortal) clearModelSheet();
+      return;
+    }
+    if (found !== modelPortal) applyModelSheet(found);
+  };
   const onClick = (event) => {
     if (Date.now() < suppressClickUntil) {
       event.preventDefault();
@@ -498,6 +820,11 @@ function setupMobileDrawer() {
       else openDrawer();
       return;
     }
+    if (isModelTrigger(target)) {
+      modelChainUntil = Date.now() + 6e3;
+      window.setTimeout(syncModelSheet, 30);
+      window.setTimeout(syncModelSheet, 180);
+    }
     if (!isOpen()) return;
     if (target.closest(`.${BACKDROP_CLASS}`)) {
       closeDrawer();
@@ -531,6 +858,7 @@ function setupMobileDrawer() {
       clearDrag();
       closeDrawer({ restoreFocus: false });
     }
+    syncModelSheet();
   };
   const onVisibilityChange = () => {
     if (document.visibilityState === "hidden" && isOpen()) {
@@ -538,9 +866,10 @@ function setupMobileDrawer() {
       clearDrag();
       closeDrawer({ restoreFocus: false });
     }
+    if (document.visibilityState === "visible") syncModelSheet();
   };
   const onTouchStart = (event) => {
-    if (disposed || !isMobileViewport() || event.touches?.length !== 1) return;
+    if (modelPortal || disposed || !isMobileViewport() || event.touches?.length !== 1) return;
     const touch = event.touches[0];
     const sidebar = document.querySelector('div[class*="_sidebarCol"]');
     if (!sidebar) return;
@@ -572,7 +901,7 @@ function setupMobileDrawer() {
     };
   };
   const onTouchMove = (event) => {
-    if (!gesture || disposed) return;
+    if (modelPortal || !gesture || disposed) return;
     const touch = event.touches?.[0];
     if (!touch) return;
     const dx = touch.clientX - gesture.startX;
@@ -620,11 +949,11 @@ function setupMobileDrawer() {
     window.requestAnimationFrame(clearDrag);
   };
   const onTouchEnd = (event) => {
-    if (!gesture) return;
+    if (modelPortal || !gesture) return;
     finishGesture(event.changedTouches?.[0]);
   };
   const onTouchCancel = () => {
-    if (!gesture) return;
+    if (modelPortal || !gesture) return;
     finishGesture(null);
   };
   injectStyles();
@@ -645,9 +974,11 @@ function setupMobileDrawer() {
       if (!document.querySelector(`.${HEADER_CLASS}`) || !document.querySelector(`.${MENU_CLASS}`) || !document.querySelector(`.${BACKDROP_CLASS}`) || !document.getElementById(MOBILE_DRAWER_CSS_ID)) {
         ensureElements();
       }
+      syncModelSheet();
     });
     observer.observe(document.body, { childList: true });
   }
+  syncModelSheet();
   syncAria();
   return () => {
     disposed = true;
@@ -664,6 +995,7 @@ function setupMobileDrawer() {
     window.removeEventListener("touchmove", onTouchMove);
     window.removeEventListener("touchend", onTouchEnd);
     window.removeEventListener("touchcancel", onTouchCancel);
+    clearModelSheet();
     clearDrag();
     document.body?.classList.remove(OPEN_CLASS);
     document.body?.classList.remove("qzsy-drawer-ready");

package/client/mobile.js

@@ -33,7 +33,8 @@ export const MOBILE_DRAWER_CSS = `
 }
 
 .qzsy-mobile-header,
-.qzsy-mobile-backdrop {
+.qzsy-mobile-backdrop,
+.qzsy-model-sheet-backdrop {
   display: none;
 }
 
@@ -163,6 +164,109 @@ export const MOBILE_DRAWER_CSS = `
     opacity: 0;
     pointer-events: none;
   }
+
+  /* 5. 模型切换器：把宿主桌面 popover 改成移动端底部 sheet */
+  @keyframes qzsy-model-sheet-in {
+    from { transform: translateY(100%); opacity: 0.6; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  .qzsy-model-sheet-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 1190;
+    background: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 240ms ease;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  body.qzsy-model-sheet-open .qzsy-model-sheet-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  [data-qzsy-model-sheet] {
+    position: fixed !important;
+    top: auto !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    height: auto !important;
+    max-height: 82vh !important;
+    max-height: 82dvh !important;
+    margin: 0 !important;
+    padding: 18px 0 0 !important;
+    border: 0 !important;
+    border-radius: 18px 18px 0 0 !important;
+    background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
+    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18) !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+    z-index: 1200 !important;
+    transform-origin: bottom center !important;
+    animation: qzsy-model-sheet-in 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+    will-change: transform;
+  }
+  [data-qzsy-model-sheet]::before {
+    content: '';
+    position: absolute;
+    top: 7px;
+    left: 50%;
+    width: 36px;
+    height: 4px;
+    margin-left: -18px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.18);
+    pointer-events: none;
+  }
+  [data-qzsy-model-sheet] > div,
+  [data-qzsy-model-sheet] div[role="menu"] {
+    width: 100% !important;
+    max-width: 100% !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    box-sizing: border-box !important;
+  }
+  [data-qzsy-model-sheet] div[role="menu"] {
+    max-height: calc(82vh - 40px) !important;
+    max-height: calc(82dvh - 40px) !important;
+    overflow-y: auto !important;
+    overscroll-behavior: contain !important;
+    padding: 8px 12px calc(14px + var(--qzsy-safe-bottom, 0px)) !important;
+  }
+  [data-qzsy-model-sheet] input {
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  [data-qzsy-model-sheet] button[role="menuitem"],
+  [data-qzsy-model-sheet] [role="option"] {
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  [data-qzsy-model-sheet].qzsy-model-sheet-closing {
+    transform: translateY(100%) !important;
+    opacity: 0 !important;
+    transition: transform 220ms ease, opacity 220ms ease !important;
+    animation: none !important;
+  }
+  body.qzsy-model-sheet-dragging [data-qzsy-model-sheet] {
+    transform: translateY(var(--qzsy-model-sheet-y, 0px)) !important;
+    transition: none !important;
+    animation: none !important;
+  }
+  body.qzsy-model-sheet-dragging .qzsy-model-sheet-backdrop {
+    opacity: var(--qzsy-model-sheet-progress, 1) !important;
+    transition: none !important;
+  }
 }
 `;
 
@@ -211,6 +315,11 @@ export function setupMobileDrawer() {
   let disposed = false;
   let gesture = null;
   let suppressClickUntil = 0;
+  let modelPortal = null;
+  let modelBackdrop = null;
+  let modelChainUntil = 0;
+  let modelDrag = null;
+  let modelDragHandlers = null;
 
   const ensureElements = () => {
     if (disposed || !document.body) return;
@@ -296,6 +405,228 @@ export function setupMobileDrawer() {
     }, 60);
   };
 
+  // ---- 模型切换器：宿主桌面 popover → 移动端底部 sheet ----
+  const bodyPortalOf = (node) => {
+    let el = node;
+    while (el && el.parentElement && el.parentElement !== document.body) el = el.parentElement;
+    return el && el.parentElement === document.body ? el : null;
+  };
+
+  const visiblePortal = (el) => {
+    if (!el || !el.isConnected) return false;
+    const s = getComputedStyle(el);
+    if (s.display === 'none' || s.visibility === 'hidden') return false;
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0;
+  };
+
+  const isModelTrigger = (target) => {
+    const el = target?.closest?.('button, [role="menuitem"], [role="button"], a');
+    if (!el) return false;
+    const label = `${el.getAttribute('aria-label') || ''} ${el.getAttribute('title') || ''} ${el.innerText || ''}`;
+    return /模型|Model|model/.test(label);
+  };
+
+  const findModelPortal = () => {
+    if (!isMobileViewport()) return null;
+    const search = document.querySelector(
+      'input[placeholder*="搜索模型"], input[placeholder*="Search model"], input[aria-label*="搜索模型"], input[aria-label*="Search model"]',
+    );
+    if (search) {
+      const menu = search.closest('[role="menu"]') || search.closest('[class*="_menu"]');
+      const portal = bodyPortalOf(menu || search);
+      if (portal && visiblePortal(portal)) {
+        const s = getComputedStyle(portal);
+        if ((s.position === 'fixed' || s.position === 'absolute') && portal.getBoundingClientRect().width > 120) return portal;
+      }
+    }
+    // 无搜索框的宿主（如移动端版本）用「模型触发链 + 菜单行数」兜底
+    if (Date.now() > modelChainUntil) return null;
+    const candidates = [];
+    for (const el of document.body.children) {
+      if (!(el instanceof HTMLElement)) continue;
+      if (el === modelBackdrop || el.classList.contains(HEADER_CLASS) || el.classList.contains(BACKDROP_CLASS)) continue;
+      if (!visiblePortal(el)) continue;
+      const s = getComputedStyle(el);
+      if (s.position !== 'fixed' && s.position !== 'absolute') continue;
+      const menu = el.querySelector('[role="menu"], [role="listbox"]');
+      if (!menu) continue;
+      const text = menu.innerText || '';
+      const rows = menu.querySelectorAll('[role="menuitem"], [role="option"], button, a, [tabindex]').length;
+      const hasSearch = Boolean(el.querySelector('input[placeholder*="搜索模型"], input[placeholder*="Search model"]'));
+      // 排除「模型 / 推理等级」两行的第一层 popover
+      if (/推理等级|Reasoning effort|推理强度/i.test(text) && rows <= 2) continue;
+      // 已经是全宽底部 sheet 的宿主菜单不再重复改造
+      const rect = el.getBoundingClientRect();
+      const alreadySheet = rect.width >= window.innerWidth - 2 && Math.abs(rect.bottom - window.innerHeight) < 2 && rect.height > 120;
+      if (alreadySheet && !hasSearch) continue;
+      if (hasSearch || rows > 2) candidates.push({ el, rows, hasSearch });
+    }
+    candidates.sort((a, b) => Number(b.hasSearch) - Number(a.hasSearch) || b.rows - a.rows);
+    return candidates[0]?.el || null;
+  };
+
+  const hostBackdropPresent = () => {
+    for (const el of document.body.children) {
+      if (!(el instanceof HTMLElement)) continue;
+      if (el === modelBackdrop || el.classList.contains(HEADER_CLASS) || el.classList.contains(BACKDROP_CLASS)) continue;
+      const s = getComputedStyle(el);
+      if (s.position !== 'fixed') continue;
+      const r = el.getBoundingClientRect();
+      if (r.width < window.innerWidth - 4 || r.height < window.innerHeight - 4) continue;
+      if (Number(s.opacity) < 0.1) continue;
+      const bg = s.backgroundColor || '';
+      if (!/^rgba?\(/.test(bg) || /rgba\(0,\s*0,\s*0,\s*0\)/.test(bg)) continue;
+      if (el.querySelector('[role="menu"]')) continue;
+      return true;
+    }
+    return false;
+  };
+
+  const requestHostModelClose = (portal) => {
+    if (disposed || !portal || !portal.isConnected) return;
+    const PointerCtor = typeof window.PointerEvent === 'function' ? window.PointerEvent : window.MouseEvent;
+    try { document.body.dispatchEvent(new PointerCtor('pointerdown', { bubbles: true, cancelable: true })); } catch { /* 忽略 */ }
+    try { document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })); } catch { /* 忽略 */ }
+    window.setTimeout(() => {
+      if (disposed || !portal.isConnected) return;
+      const trigger = document.querySelector('button[aria-haspopup="menu"][aria-expanded="true"][aria-label*="选择模型"], button[aria-haspopup="menu"][aria-expanded="true"][aria-label*="Select model"]');
+      try { trigger?.click(); } catch { /* 忽略 */ }
+      window.setTimeout(() => {
+        if (!disposed && portal.isConnected && modelPortal === portal) clearModelSheet();
+      }, 450);
+    }, 120);
+  };
+
+  const closeModelSheetNow = () => {
+    const portal = modelPortal;
+    if (!portal) return;
+    document.body.classList.remove('qzsy-model-sheet-open');
+    document.body.style.removeProperty('--qzsy-model-sheet-y');
+    document.body.style.removeProperty('--qzsy-model-sheet-progress');
+    requestHostModelClose(portal);
+  };
+
+  const closeModelSheetAnimated = () => {
+    const portal = modelPortal;
+    if (!portal) return;
+    portal.classList.add('qzsy-model-sheet-closing');
+    document.body.classList.remove('qzsy-model-sheet-open');
+    window.setTimeout(() => requestHostModelClose(portal), 180);
+  };
+
+  const ensureModelBackdrop = () => {
+    if (modelBackdrop || hostBackdropPresent()) return;
+    modelBackdrop = document.createElement('div');
+    modelBackdrop.className = 'qzsy-model-sheet-backdrop';
+    modelBackdrop.setAttribute('aria-hidden', 'true');
+    modelBackdrop.addEventListener('pointerdown', (event) => event.stopPropagation(), true);
+    modelBackdrop.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      closeModelSheetNow();
+    });
+    document.body.appendChild(modelBackdrop);
+  };
+
+  const detachModelDrag = () => {
+    if (!modelPortal || !modelDragHandlers) return;
+    modelPortal.removeEventListener('touchstart', modelDragHandlers.onStart);
+    modelPortal.removeEventListener('touchmove', modelDragHandlers.onMove);
+    modelPortal.removeEventListener('touchend', modelDragHandlers.onEnd);
+    modelPortal.removeEventListener('touchcancel', modelDragHandlers.onEnd);
+    modelDragHandlers = null;
+  };
+
+  const attachModelDrag = (portal) => {
+    if (!portal || modelDragHandlers) return;
+    const onStart = (event) => {
+      if (event.touches?.length !== 1) return;
+      const touch = event.touches[0];
+      const rect = portal.getBoundingClientRect();
+      if (touch.clientY - rect.top > 30) return;
+      if (event.target.closest?.('input, textarea, select, button, a, [contenteditable="true"]')) return;
+      modelDrag = { startY: touch.clientY, startT: Date.now(), dy: 0, active: false, height: rect.height };
+    };
+    const onMove = (event) => {
+      if (!modelDrag) return;
+      const touch = event.touches?.[0];
+      if (!touch) return;
+      const dy = touch.clientY - modelDrag.startY;
+      if (!modelDrag.active) {
+        if (dy < 6) return;
+        modelDrag.active = true;
+        document.body.classList.add('qzsy-model-sheet-dragging');
+      }
+      modelDrag.dy = Math.max(0, dy);
+      document.body.style.setProperty('--qzsy-model-sheet-y', `${modelDrag.dy}px`);
+      document.body.style.setProperty('--qzsy-model-sheet-progress', String(Math.max(0, 1 - modelDrag.dy / Math.max(1, modelDrag.height))));
+      if (event.cancelable) event.preventDefault();
+    };
+    const onEnd = () => {
+      if (!modelDrag) return;
+      const drag = modelDrag;
+      modelDrag = null;
+      if (!drag.active) return;
+      document.body.classList.remove('qzsy-model-sheet-dragging');
+      document.body.style.removeProperty('--qzsy-model-sheet-y');
+      document.body.style.removeProperty('--qzsy-model-sheet-progress');
+      const velocity = drag.dy / Math.max(1, Date.now() - drag.startT);
+      if (drag.dy > 110 || velocity > 0.5) closeModelSheetAnimated();
+    };
+    portal.addEventListener('touchstart', onStart, { passive: true });
+    portal.addEventListener('touchmove', onMove, { passive: false });
+    portal.addEventListener('touchend', onEnd, { passive: true });
+    portal.addEventListener('touchcancel', onEnd, { passive: true });
+    modelDragHandlers = { onStart, onMove, onEnd };
+  };
+
+  const clearModelSheet = () => {
+    if (modelPortal) {
+      detachModelDrag();
+      modelPortal.removeAttribute('data-qzsy-model-sheet');
+      modelPortal.classList.remove('qzsy-model-sheet', 'qzsy-model-sheet-closing');
+    }
+    modelPortal = null;
+    modelDrag = null;
+    document.body?.classList.remove('qzsy-model-sheet-open', 'qzsy-model-sheet-dragging');
+    document.body?.style.removeProperty('--qzsy-model-sheet-y');
+    document.body?.style.removeProperty('--qzsy-model-sheet-progress');
+    if (modelBackdrop) {
+      modelBackdrop.remove();
+      modelBackdrop = null;
+    }
+  };
+
+  const applyModelSheet = (portal) => {
+    if (modelPortal === portal) return;
+    clearModelSheet();
+    modelPortal = portal;
+    portal.setAttribute('data-qzsy-model-sheet', '');
+    portal.classList.add('qzsy-model-sheet');
+    attachModelDrag(portal);
+    ensureModelBackdrop();
+    window.requestAnimationFrame(() => {
+      if (!disposed && modelPortal === portal) document.body.classList.add('qzsy-model-sheet-open');
+    });
+  };
+
+  const syncModelSheet = () => {
+    if (disposed) return;
+    if (!isMobileViewport()) {
+      clearModelSheet();
+      return;
+    }
+    if (modelPortal && !visiblePortal(modelPortal)) clearModelSheet();
+    const found = findModelPortal();
+    if (!found) {
+      if (modelPortal?.isConnected) return; // 已应用，等待宿主关闭后移除
+      if (modelPortal) clearModelSheet();
+      return;
+    }
+    if (found !== modelPortal) applyModelSheet(found);
+  };
+
   const onClick = (event) => {
     if (Date.now() < suppressClickUntil) {
       event.preventDefault();
@@ -311,6 +642,14 @@ export function setupMobileDrawer() {
       else openDrawer();
       return;
     }
+
+    // 模型切换器：记录触发链，等宿主把二级菜单 portal 挂到 body 后再改造成 sheet
+    if (isModelTrigger(target)) {
+      modelChainUntil = Date.now() + 6000;
+      window.setTimeout(syncModelSheet, 30);
+      window.setTimeout(syncModelSheet, 180);
+    }
+
     if (!isOpen()) return;
 
     if (target.closest(`.${BACKDROP_CLASS}`)) {
@@ -353,6 +692,7 @@ export function setupMobileDrawer() {
       clearDrag();
       closeDrawer({ restoreFocus: false });
     }
+    syncModelSheet();
   };
 
   const onVisibilityChange = () => {
@@ -361,11 +701,12 @@ export function setupMobileDrawer() {
       clearDrag();
       closeDrawer({ restoreFocus: false });
     }
+    if (document.visibilityState === 'visible') syncModelSheet();
   };
 
   // ---- 手势：左缘右滑打开；抽屉内左滑关闭；拖动跟手 ----
   const onTouchStart = (event) => {
-    if (disposed || !isMobileViewport() || event.touches?.length !== 1) return;
+    if (modelPortal || disposed || !isMobileViewport() || event.touches?.length !== 1) return;
     const touch = event.touches[0];
     const sidebar = document.querySelector('div[class*="_sidebarCol"]');
     if (!sidebar) return;
@@ -401,7 +742,7 @@ export function setupMobileDrawer() {
   };
 
   const onTouchMove = (event) => {
-    if (!gesture || disposed) return;
+    if (modelPortal || !gesture || disposed) return;
     const touch = event.touches?.[0];
     if (!touch) return;
     const dx = touch.clientX - gesture.startX;
@@ -450,12 +791,12 @@ export function setupMobileDrawer() {
   };
 
   const onTouchEnd = (event) => {
-    if (!gesture) return;
+    if (modelPortal || !gesture) return;
     finishGesture(event.changedTouches?.[0]);
   };
 
   const onTouchCancel = () => {
-    if (!gesture) return;
+    if (modelPortal || !gesture) return;
     finishGesture(null);
   };
 
@@ -480,10 +821,12 @@ export function setupMobileDrawer() {
       if (!document.querySelector(`.${HEADER_CLASS}`) || !document.querySelector(`.${MENU_CLASS}`) || !document.querySelector(`.${BACKDROP_CLASS}`) || !document.getElementById(MOBILE_DRAWER_CSS_ID)) {
         ensureElements();
       }
+      syncModelSheet();
     });
     observer.observe(document.body, { childList: true });
   }
 
+  syncModelSheet();
   syncAria();
 
   return () => {
@@ -498,6 +841,7 @@ export function setupMobileDrawer() {
     window.removeEventListener('touchmove', onTouchMove);
     window.removeEventListener('touchend', onTouchEnd);
     window.removeEventListener('touchcancel', onTouchCancel);
+    clearModelSheet();
     clearDrag();
     document.body?.classList.remove(OPEN_CLASS);
     document.body?.classList.remove('qzsy-drawer-ready');

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@qzsy/dsh-bridge",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "DSH 远程隧道云官方客户端插件：一条命令把本机 DeepSeek Harness 接入云端隧道（设备码绑定、短期令牌、本地门禁代理、HTTP/SSE/WebSocket 反向隧道）。",
-  "releaseNotes": "【v3.3.1】移动端安全区与手势修复\\n• 全面屏：菜单按钮/内容/抽屉按 safe-area-inset 让位，刘海、状态栏、home indicator 不再遮挡\\n• 手势：左缘右滑打开、抽屉内左滑关闭；拖动跟手、遮罩渐变，松手按距离/速度吸附\\n• 纵向滚动不误触抽屉；滑动后的合成点击会被吞掉\\n• 首次加载不再播放侧栏滑出动画",
+  "releaseNotes": "【v3.4.0】移动端模型切换器改为底部 sheet\\n• 模型二级菜单全宽贴底：圆角、抓手、遮罩、滚动区、safe-area 底部留白\\n• 支持点遮罩关闭、顶部下拉关闭（跟手 + 松手吸附）\\n• 兼容有/无「搜索模型」输入框的宿主版本，不依赖宿主哈希\\n• 桌面端模型 popover 完全不变",
   "type": "module",
   "main": "lib/index.js",
   "exports": {