@qzsy/dsh-bridge 3.4.1 → 3.4.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 更新日志
 
+## [v3.4.2] - 2026-11-02
+
+### 🐛 修复
+
+- **侧滑跟手**：水平拖动期间动态注册非 passive `touchmove` 阻止页面横滑/边缘返回，抽屉真正 1:1 跟手；纵向滚动不拦截。
+- **首滑不卡**：手机首屏后在屏幕外预热展开侧栏，第一次侧滑不再在手指下触发宿主重排/挂载完整会话列表。
+- **起手不跳**：拖动起点与 CSS `-102%` 关闭位对齐，修掉第一帧约 6px 跳变。
+- **内容不弹**：拖动期间也强制侧栏内容 `100%` 宽，松手时不再出现 `280px → 300px` 宽度跳变。
+- **松手更轻**：打开距离阈值从 90px 降到约 66px、速度阈值降低；移除松手时重复的展开点击；`box-shadow` 改为过渡。
+
+### 🧪 验证
+
+- 真实触摸事件模拟：预热展开、dx=20 首帧 -286、水平移动 `defaultPrevented=true`、纵向不拦截、短滑 110px 吸附打开、阴影过渡，7/7 通过。
+
+
 ## [v3.4.1] - 2026-11-02
 
 ### 🐛 修复

package/client/client.js

@@ -300,17 +300,19 @@ var MOBILE_DRAWER_CSS = `
     transform: translateX(-102%) !important;
     overflow: hidden !important;
     overscroll-behavior: contain;
+    touch-action: pan-y;
     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;
+    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease !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"] {
+  body.qzsy-drawer-open div[class*="_sidebarCol"] > div > div[class*="_root"],
+  body.qzsy-drawer-dragging div[class*="_sidebarCol"] > div > div[class*="_root"] {
     width: 100% !important;
   }
 
@@ -514,6 +516,17 @@ function setupMobileDrawer() {
   let modelChainUntil = 0;
   let modelDrag = null;
   let modelDragHandlers = null;
+  const preventDrawerScroll = (event) => {
+    if (!gesture || !event.cancelable) return;
+    const touch = event.touches?.[0];
+    if (!touch) return;
+    const dx = touch.clientX - gesture.startX;
+    const dy = touch.clientY - gesture.startY;
+    if (Math.abs(dx) > 4 && Math.abs(dx) > Math.abs(dy) * 1.2) event.preventDefault();
+  };
+  const removeDrawerPrevent = () => {
+    window.removeEventListener("touchmove", preventDrawerScroll);
+  };
   const ensureElements = () => {
     if (disposed || !document.body) return;
     injectStyles();
@@ -561,8 +574,9 @@ function setupMobileDrawer() {
     }
   };
   const setDragProgress = (x, width) => {
+    const span = Math.max(1, width * 1.02);
     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))));
+    document.body.style.setProperty("--qzsy-drawer-progress", String(Math.max(0, Math.min(1, 1 - Math.abs(x) / span))));
   };
   const clearDrag = () => {
     document.body.classList.remove(DRAGGING_CLASS);
@@ -888,6 +902,7 @@ function setupMobileDrawer() {
         active: false,
         dx: 0
       };
+      window.addEventListener("touchmove", preventDrawerScroll, { passive: false });
       return;
     }
     if (!sidebar.contains(event.target)) return;
@@ -901,6 +916,7 @@ function setupMobileDrawer() {
       active: false,
       dx: 0
     };
+    window.addEventListener("touchmove", preventDrawerScroll, { passive: false });
   };
   const onTouchMove = (event) => {
     if (modelPortal || !gesture || disposed) return;
@@ -912,14 +928,17 @@ function setupMobileDrawer() {
       if (Math.abs(dx) < DRAG_THRESHOLD) return;
       if (Math.abs(dx) < Math.abs(dy) * 1.2) {
         gesture = null;
+        removeDrawerPrevent();
         return;
       }
       if (gesture.mode === "open" && dx <= 0) {
         gesture = null;
+        removeDrawerPrevent();
         return;
       }
       if (gesture.mode === "close" && dx >= 0) {
         gesture = null;
+        removeDrawerPrevent();
         return;
       }
       gesture.active = true;
@@ -928,8 +947,12 @@ function setupMobileDrawer() {
     }
     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));
+    if (gesture.mode === "open") {
+      const startOffset = -width * 1.02;
+      x = Math.max(startOffset, Math.min(0, startOffset + dx));
+    } else {
+      x = Math.max(-width, Math.min(0, dx));
+    }
     gesture.dx = dx;
     setDragProgress(x, width);
   };
@@ -937,15 +960,15 @@ function setupMobileDrawer() {
     if (!gesture) return;
     const current = gesture;
     gesture = null;
+    removeDrawerPrevent();
     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);
+    const threshold = Math.min(80, Math.max(50, current.width * 0.22));
+    const openNow = current.mode === "open" ? dx > threshold || velocity > 0.35 : !(dx < -Math.max(40, threshold * 0.6) || velocity < -0.3);
     document.body.classList.toggle(OPEN_CLASS, openNow);
-    if (openNow) ensureSidebarExpanded();
     syncAria();
     suppressClickUntil = Date.now() + 250;
     window.requestAnimationFrame(clearDrag);
@@ -971,6 +994,12 @@ function setupMobileDrawer() {
   window.requestAnimationFrame(() => {
     if (!disposed && document.body) document.body.classList.add("qzsy-drawer-ready");
   });
+  const preExpandSidebar = () => {
+    if (disposed || !isMobileViewport()) return;
+    ensureSidebarExpanded();
+  };
+  window.setTimeout(preExpandSidebar, 600);
+  window.setTimeout(preExpandSidebar, 1600);
   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)) {
@@ -997,6 +1026,7 @@ function setupMobileDrawer() {
     window.removeEventListener("touchmove", onTouchMove);
     window.removeEventListener("touchend", onTouchEnd);
     window.removeEventListener("touchcancel", onTouchCancel);
+    removeDrawerPrevent();
     clearModelSheet();
     clearDrag();
     document.body?.classList.remove(OPEN_CLASS);

package/client/mobile.js

@@ -97,17 +97,19 @@ export const MOBILE_DRAWER_CSS = `
     transform: translateX(-102%) !important;
     overflow: hidden !important;
     overscroll-behavior: contain;
+    touch-action: pan-y;
     will-change: transform;
   }
   /* 首帧先就位、不播放入场动画，避免页面加载时侧栏从 0 滑出 */
   body.qzsy-drawer-ready div[class*="_sidebarCol"] {
-    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease !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"] {
+  body.qzsy-drawer-open div[class*="_sidebarCol"] > div > div[class*="_root"],
+  body.qzsy-drawer-dragging div[class*="_sidebarCol"] > div > div[class*="_root"] {
     width: 100% !important;
   }
 
@@ -321,6 +323,19 @@ export function setupMobileDrawer() {
   let modelDrag = null;
   let modelDragHandlers = null;
 
+  const preventDrawerScroll = (event) => {
+    if (!gesture || !event.cancelable) return;
+    const touch = event.touches?.[0];
+    if (!touch) return;
+    const dx = touch.clientX - gesture.startX;
+    const dy = touch.clientY - gesture.startY;
+    if (Math.abs(dx) > 4 && Math.abs(dx) > Math.abs(dy) * 1.2) event.preventDefault();
+  };
+
+  const removeDrawerPrevent = () => {
+    window.removeEventListener('touchmove', preventDrawerScroll);
+  };
+
   const ensureElements = () => {
     if (disposed || !document.body) return;
     injectStyles();
@@ -371,8 +386,9 @@ export function setupMobileDrawer() {
   };
 
   const setDragProgress = (x, width) => {
+    const span = Math.max(1, width * 1.02);
     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))));
+    document.body.style.setProperty('--qzsy-drawer-progress', String(Math.max(0, Math.min(1, 1 - Math.abs(x) / span))));
   };
 
   const clearDrag = () => {
@@ -729,6 +745,7 @@ export function setupMobileDrawer() {
         active: false,
         dx: 0,
       };
+      window.addEventListener('touchmove', preventDrawerScroll, { passive: false });
       return;
     }
 
@@ -743,6 +760,7 @@ export function setupMobileDrawer() {
       active: false,
       dx: 0,
     };
+    window.addEventListener('touchmove', preventDrawerScroll, { passive: false });
   };
 
   const onTouchMove = (event) => {
@@ -755,9 +773,9 @@ export function setupMobileDrawer() {
     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; }
+      if (Math.abs(dx) < Math.abs(dy) * 1.2) { gesture = null; removeDrawerPrevent(); return; }
+      if (gesture.mode === 'open' && dx <= 0) { gesture = null; removeDrawerPrevent(); return; }
+      if (gesture.mode === 'close' && dx >= 0) { gesture = null; removeDrawerPrevent(); return; }
       gesture.active = true;
       suppressClickUntil = Date.now() + 450;
       document.body.classList.add(DRAGGING_CLASS);
@@ -765,8 +783,13 @@ export function setupMobileDrawer() {
 
     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));
+    if (gesture.mode === 'open') {
+      // 与 CSS 的 -102% 起点对齐，避免起手第一帧跳 6px
+      const startOffset = -width * 1.02;
+      x = Math.max(startOffset, Math.min(0, startOffset + dx));
+    } else {
+      x = Math.max(-width, Math.min(0, dx));
+    }
     gesture.dx = dx;
     setDragProgress(x, width);
   };
@@ -775,19 +798,19 @@ export function setupMobileDrawer() {
     if (!gesture) return;
     const current = gesture;
     gesture = null;
+    removeDrawerPrevent();
     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 threshold = Math.min(80, Math.max(50, current.width * 0.22));
     const openNow = current.mode === 'open'
-      ? dx > threshold || velocity > 0.45
-      : !(dx < -Math.max(50, threshold * 0.7) || velocity < -0.35);
+      ? dx > threshold || velocity > 0.35
+      : !(dx < -Math.max(40, threshold * 0.6) || velocity < -0.3);
 
     document.body.classList.toggle(OPEN_CLASS, openNow);
-    if (openNow) ensureSidebarExpanded();
     syncAria();
     suppressClickUntil = Date.now() + 250;
     // 等一帧让浏览器接住当前拖动位置，再撤掉拖动样式做吸附动画
@@ -820,6 +843,15 @@ export function setupMobileDrawer() {
     if (!disposed && document.body) document.body.classList.add('qzsy-drawer-ready');
   });
 
+  // 预热：手机端首屏后把宿主侧栏展开好（它在屏幕外），这样第一次侧滑不会在
+  // 手指下触发宿主重排/挂载完整会话列表，起手更稳。
+  const preExpandSidebar = () => {
+    if (disposed || !isMobileViewport()) return;
+    ensureSidebarExpanded();
+  };
+  window.setTimeout(preExpandSidebar, 600);
+  window.setTimeout(preExpandSidebar, 1600);
+
   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)) {
@@ -845,6 +877,7 @@ export function setupMobileDrawer() {
     window.removeEventListener('touchmove', onTouchMove);
     window.removeEventListener('touchend', onTouchEnd);
     window.removeEventListener('touchcancel', onTouchCancel);
+    removeDrawerPrevent();
     clearModelSheet();
     clearDrag();
     document.body?.classList.remove(OPEN_CLASS);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@qzsy/dsh-bridge",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "DSH 远程隧道云官方客户端插件：一条命令把本机 DeepSeek Harness 接入云端隧道（设备码绑定、短期令牌、本地门禁代理、HTTP/SSE/WebSocket 反向隧道）。",
-  "releaseNotes": "【v3.4.1】模型 sheet 识别收紧\\n• 模型菜单改造后立即清空触发链，关闭后再开账号菜单不会误套底部 sheet\\n• 优先按 data-model-id 等模型标记定位；无搜索框宿主的兜底窗口收紧到 2.5 秒\\n• 第一层「模型 / 推理等级」popover 保持不变",
+  "releaseNotes": "【v3.4.2】移动端侧滑跟手优化\\n• 水平拖动阻止页面横滑/边缘返回，抽屉 1:1 跟手；纵向滚动不受影响\\n• 首屏后在屏幕外预热展开侧栏，第一次侧滑不再卡顿\\n• 起手不再跳 6px，松手时内容宽度不再 280→300 跳变\\n• 打开阈值降到约 66px，速度阈值降低，松手吸附更轻快",
   "type": "module",
   "main": "lib/index.js",
   "exports": {