@qzsy/dsh-bridge 3.3.0 → 3.4.0

package/client/mobile.js

@@ -1,42 +1,79 @@
 // 移动端抽屉导航：把宿主左侧栏（会话/工作区菜单）改成从左侧滑出的 sheet。
 //
-// 背景：DSH 宿主在窄屏下仍把左侧栏压成 56px 图标轨道，展开后会把内容区挤到
-// 110px（实测 390×844）。这里只做一件事：窄屏时内容占满，左侧栏变成带遮罩的
-// 抽屉，由顶部菜单按钮打开；桌面端完全不受影响。
+// 设计目标（对齐 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 = `
-.qzsy-mobile-menu-btn,
-.qzsy-mobile-backdrop {
+: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,
+.qzsy-model-sheet-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) {
-  /* 1. 左侧栏脱离 grid，内容占满；顶部留出 52px 给菜单按钮 */
+  .qzsy-mobile-header { display: flex; }
+
+  /* 1. 左侧栏脱离 grid，内容占满；顶部给菜单按钮留出安全区高度 */
   [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;
+    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 抽屉（默认藏在屏幕左侧） */
+  /* 2. 原生侧栏改为 fixed 抽屉（默认藏在屏幕左侧；内部避开安全区） */
   div[class*="_sidebarCol"] {
     position: fixed !important;
     top: 0 !important;
@@ -46,16 +83,26 @@ export const MOBILE_DRAWER_CSS = `
     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;
-    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !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;
@@ -64,6 +111,17 @@ export const MOBILE_DRAWER_CSS = `
     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;
@@ -82,17 +140,13 @@ export const MOBILE_DRAWER_CSS = `
     pointer-events: auto;
   }
 
-  /* 4. 顶部菜单按钮（位于 52px 留白条内，避免遮挡会话标题） */
+  /* 4. 菜单按钮：位于安全区下方的 52px 留白条内 */
   .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;
+    width: 40px;
+    height: 40px;
     padding: 0;
     border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
     border-radius: 12px;
@@ -100,6 +154,7 @@ export const MOBILE_DRAWER_CSS = `
     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;
   }
@@ -109,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;
+  }
 }
 `;
 
@@ -137,6 +295,11 @@ function injectStyles() {
   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，可注册为插件副作用。
@@ -150,18 +313,31 @@ export function setupMobileDrawer() {
   let menuBtn = null;
   let observer = null;
   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();
 
-    let btn = document.querySelector(`.${MENU_CLASS}`);
+    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>';
-      document.body.appendChild(btn);
+      header.appendChild(btn);
     }
     let mask = document.querySelector(`.${BACKDROP_CLASS}`);
     if (!mask) {
@@ -194,6 +370,17 @@ export function setupMobileDrawer() {
     }
   };
 
+  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();
@@ -218,7 +405,234 @@ 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();
+      event.stopPropagation();
+      return;
+    }
     const target = event.target;
     if (!isElement(target)) return;
 
@@ -228,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}`)) {
@@ -265,11 +687,117 @@ export function setupMobileDrawer() {
   };
 
   const onResize = () => {
-    if (!isMobileViewport() && isOpen()) closeDrawer({ restoreFocus: false });
+    if (!isMobileViewport() && isOpen()) {
+      gesture = null;
+      clearDrag();
+      closeDrawer({ restoreFocus: false });
+    }
+    syncModelSheet();
   };
 
   const onVisibilityChange = () => {
-    if (document.visibilityState === 'hidden' && isOpen()) closeDrawer({ restoreFocus: false });
+    if (document.visibilityState === 'hidden' && isOpen()) {
+      gesture = null;
+      clearDrag();
+      closeDrawer({ restoreFocus: false });
+    }
+    if (document.visibilityState === 'visible') syncModelSheet();
+  };
+
+  // ---- 手势：左缘右滑打开；抽屉内左滑关闭；拖动跟手 ----
+  const onTouchStart = (event) => {
+    if (modelPortal || 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 (modelPortal || !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 (modelPortal || !gesture) return;
+    finishGesture(event.changedTouches?.[0]);
+  };
+
+  const onTouchCancel = () => {
+    if (modelPortal || !gesture) return;
+    finishGesture(null);
   };
 
   injectStyles();
@@ -278,27 +806,46 @@ export function setupMobileDrawer() {
   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(`.${MENU_CLASS}`) || !document.querySelector(`.${BACKDROP_CLASS}`) || !document.getElementById(MOBILE_DRAWER_CSS_ID)) {
+      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;
+    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);
+    clearModelSheet();
+    clearDrag();
     document.body?.classList.remove(OPEN_CLASS);
-    document.querySelector(`.${MENU_CLASS}`)?.remove();
+    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);