dsh-remote-mobile 1.5.0 → 1.7.0

package/lib/index.js

@@ -143,45 +143,65 @@ export function apply(ctx, config = {}) {
     }
     // 6. 服务就绪时输出提示横幅与接入地址
     let printed = false;
+    let disposed = false;
+    let timer1 = null;
+    let timer2 = null;
+    try {
+        ctx.on?.('dispose', () => {
+            disposed = true;
+            if (timer1)
+                clearTimeout(timer1);
+            if (timer2)
+                clearTimeout(timer2);
+        });
+    }
+    catch { }
     const printReadyBanner = () => {
-        if (printed)
+        // 生命周期守卫：若上下文已废弃/进入 dispose，放弃回调
+        if (disposed || printed)
             return;
         printed = true;
-        if (ctx.webServer && ctx.webServer.server) {
-            patchHttpServerWithVirtualizer(ctx.webServer.server, gateMiddleware, store, styleStore);
-        }
         try {
-            const conn = typeof ctx.get === 'function' ? ctx.get('connection') : undefined;
-            if (conn)
-                attachConnectionAuth(conn);
+            const webServer = (typeof ctx.get === 'function' ? ctx.get('webServer') : undefined) || ctx.webServer;
+            if (webServer?.server) {
+                patchHttpServerWithVirtualizer(webServer.server, gateMiddleware, store, styleStore);
+            }
+            try {
+                const conn = typeof ctx.get === 'function' ? ctx.get('connection') : undefined;
+                if (conn)
+                    attachConnectionAuth(conn);
+            }
+            catch (e) {
+                ctx.logger?.debug?.('[dsh-remote-mobile] 就绪回调获取 connection 失败:', e);
+            }
+            const tsIp = getLocalTailscaleIp();
+            const lanIp = getLocalLanIp();
+            const port = webServer?.port ?? 3080;
+            const opts = store.getOptions();
+            const divider = '─'.repeat(72);
+            console.log(`\n┌${divider}`);
+            console.log(`│ [dsh-remote-mobile] 官方临时 Token 鉴权已接管，PC/移动端访问无需携带官方token`);
+            console.log(`│ 远程安全网关已就绪，支持手机浏览器访问:`);
+            console.log(`│   • 本机回环:   http://127.0.0.1:${port}`);
+            if (lanIp && lanIp !== '127.0.0.1') {
+                console.log(`│   • 局域网:     http://${lanIp}:${port} (同 Wi-Fi 局域网直连)`);
+            }
+            if (tsIp) {
+                console.log(`│   • 虚拟私网:   http://${tsIp}:${port} (Tailscale 私网异地直连)`);
+            }
+            console.log(`│ 访问与配置说明:`);
+            console.log(`│   - 手机/远程设备打开对应地址即可直接访问`);
+            console.log(`│   - 在本机打开 Web 界面 ->「设置」->「远程与移动端」进行安全管理:`);
+            console.log(`│     可开启免密直连(局域网/Tailscale)、查看 6 位临时配对码或设置长期密码`);
+            console.log(`│   - 项目文档:   https://github.com/IceApriler/dsh-remote-mobile`);
+            console.log(`└${divider}\n`);
+            ctx.logger?.info?.(`[dsh-remote-mobile] 移动端远程控制与安全门禁已激活 (上下文虚拟化桥接就绪，样式片段: ${styleStore.list().length} 个)`);
+            if (tsIp) {
+                ctx.logger?.info?.(`[dsh-remote-mobile] Tailscale 地址: http://${tsIp}:${port} (免密直连: ${opts.allowTailscale ? '已开启' : '已关闭'})`);
+            }
         }
         catch (e) {
-            ctx.logger?.debug?.('[dsh-remote-mobile] 就绪回调获取 connection 失败:', e);
-        }
-        const tsIp = getLocalTailscaleIp();
-        const lanIp = getLocalLanIp();
-        const port = ctx.webServer?.port ?? 3080;
-        const opts = store.getOptions();
-        const divider = '─'.repeat(72);
-        console.log(`\n┌${divider}`);
-        console.log(`│ [dsh-remote-mobile] 官方临时 Token 鉴权已接管，PC/移动端访问无需携带官方token`);
-        console.log(`│ 远程安全网关已就绪，支持手机浏览器访问:`);
-        console.log(`│   • 本机回环:   http://127.0.0.1:${port}`);
-        if (lanIp && lanIp !== '127.0.0.1') {
-            console.log(`│   • 局域网:     http://${lanIp}:${port} (同 Wi-Fi 局域网直连)`);
-        }
-        if (tsIp) {
-            console.log(`│   • 虚拟私网:   http://${tsIp}:${port} (Tailscale 私网异地直连)`);
-        }
-        console.log(`│ 访问与配置说明:`);
-        console.log(`│   - 手机/远程设备打开对应地址即可直接访问`);
-        console.log(`│   - 在本机打开 Web 界面 ->「设置」->「远程与移动端」进行安全管理:`);
-        console.log(`│     可开启免密直连(局域网/Tailscale)、查看 6 位临时配对码或设置长期密码`);
-        console.log(`│   - 项目文档:   https://github.com/IceApriler/dsh-remote-mobile`);
-        console.log(`└${divider}\n`);
-        ctx.logger?.info?.(`[dsh-remote-mobile] 移动端远程控制与安全门禁已激活 (上下文虚拟化桥接就绪，样式片段: ${styleStore.list().length} 个)`);
-        if (tsIp) {
-            ctx.logger?.info?.(`[dsh-remote-mobile] Tailscale 地址: http://${tsIp}:${port} (免密直连: ${opts.allowTailscale ? '已开启' : '已关闭'})`);
+            // 上下文若在并发或极端时序下重载，静默退出，防止未捕获异常导致主进程崩溃
         }
     };
     // 1) 优先在 loader 插件树就绪后紧跟官方提示打印
@@ -190,7 +210,7 @@ export function apply(ctx, config = {}) {
         const settled = loader?.await?.();
         if (settled && typeof settled.then === 'function') {
             settled.then(() => {
-                setTimeout(printReadyBanner, 120);
+                timer1 = setTimeout(printReadyBanner, 120);
             }).catch((e) => {
                 ctx.logger?.debug?.('[dsh-remote-mobile] loader await 异常:', e);
             });
@@ -200,7 +220,7 @@ export function apply(ctx, config = {}) {
         ctx.logger?.debug?.('[dsh-remote-mobile] 获取 loader 失败:', e);
     }
     // 2) 兜底定时器（避免无 loader 环境时不输出）
-    setTimeout(printReadyBanner, 1500);
+    timer2 = setTimeout(printReadyBanner, 1500);
 }
 // 导出所有子模块类型与核心工具
 export * from './auth/tailscale.js';

package/lib/styles/style-snippets.js

@@ -62,11 +62,39 @@ const PRESET_SIDEBAR_CSS = `
     position: relative !important;
   }
 
-  [class*="_frame"]:has([class*="_sidebarCol"]) [class*="_centerCol"] {
+  /* 核心修复：显式将三列锁定到各自的 Grid 轨道！
+     官方 AppFrame 为三栏 CSS Grid 布局（sidebarCol + centerCol + rightbarCol）。
+     当 sidebarCol 设为 position: fixed 后脱离 Grid 自动流，会导致后续两列前移：
+     centerCol 移入第 1 列(0px)，rightbarCol 移入第 2 列(1fr 全宽) 并全屏覆盖在
+     对话区上方，其透明容器拦截全部点击与触摸手势（Issue #6）。
+     通过显式指定 grid-column，确保每列始终位于设计轨道，杜绝错位覆盖。 */
+  [class*="_frame"]:has([class*="_sidebarCol"]) > [class*="_sidebarCol"] {
+    grid-column: 1 !important;
+  }
+
+  [class*="_frame"]:has([class*="_sidebarCol"]) [class*="_centerCol"],
+  [class*="_frame"]:has([class*="_sidebarCol"]) > [class*="_centerCol"] {
+    grid-column: 2 !important;
     width: 100vw !important;
     max-width: 100vw !important;
   }
 
+  [class*="_frame"]:has([class*="_sidebarCol"]) > [class*="_rightbarCol"] {
+    grid-column: 3 !important;
+  }
+
+  /* 右侧栏折叠态穿透防御：折叠时宽度清零并禁用指针事件，杜绝透明层与边缘手柄拦截触摸 */
+  [class*="_frame"][data-rightbar-collapsed] [class*="_rightbarCol"],
+  [class*="_rightbarCol"]:not(:has([data-sidebar-right-open])) {
+    width: 0px !important;
+    min-width: 0px !important;
+    pointer-events: none !important;
+  }
+  [class*="_rightbarCol"]:has([data-sidebar-right-open]),
+  [class*="_frame"]:not([data-rightbar-collapsed]) [class*="_rightbarCol"] {
+    pointer-events: auto !important;
+  }
+
   /* 2. 侧边栏最外层容器：作为整体抽屉浮层（阴影仅加在最外层，严禁污染内部列表） */
   [class*="_sidebarCol"] {
     position: fixed !important;
@@ -116,6 +144,48 @@ const PRESET_SIDEBAR_CSS = `
     background: rgb(0 0 0 / 24%);
   }
 
+  /* 兜底防御：当左侧栏实际处于折叠状态（内部含 _collapsed 类，如官方仅收起内部但 frame
+     未及时打上 data-sidebar-collapsed）时，严禁渲染遮罩，彻底杜绝黑纱常驻与点击拦截 */
+  [class*="_frame"]:has([class*="_sidebarCol"]:has([class*="_collapsed"]))::after,
+  [class*="_frame"][data-sidebar-collapsed]::after {
+    content: none !important;
+    display: none !important;
+  }
+
+  /* 展开态自适应宽度：支持 360px 窄屏与大屏手机灵活伸缩，覆盖官方内联 280px */
+  [class*="_sidebarCol"]:not(:has([class*="_collapsed"])) {
+    width: min(85vw, 320px) !important;
+    max-width: 85vw !important;
+  }
+
+  /* 条目触控热区友好化：行高 44px + 次级操作按钮 36px，防误触相邻会话并易于点击更多操作 */
+  [class*="_sidebarCol"] [role="treeitem"],
+  [class*="_sidebarCol"] [data-dsh-part="sidebar-entry"] {
+    min-height: 44px !important;
+  }
+  [class*="_sidebarCol"] [role="treeitem"] button,
+  [class*="_sidebarCol"] [role="treeitem"] [role="button"] {
+    min-width: 36px !important;
+    min-height: 36px !important;
+  }
+
+  /* 触屏设备没有 hover：工作区/会话右侧操作按钮（更多操作 ⋯、新建会话 + 等）
+     在 PC 依赖鼠标悬停显现，移动端必须常显，保证触屏用户可随时直接交互 */
+  [class*="_sidebarCol"] [class*="_rowActions"] {
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: flex !important;
+    align-items: center !important;
+    flex-shrink: 0 !important;
+  }
+
+  /* 标题容器弹性自适应并防文字挤出视野，超长文本自然截断不破坏按钮布局 */
+  [class*="_sidebarCol"] [class*="_projectText"],
+  [class*="_sidebarCol"] [class*="_sessionText"] {
+    min-width: 0 !important;
+    flex: 1 1 auto !important;
+  }
+
   /* 内层根节点铺满抽屉：覆盖官方响应式脚本写入的内联 width，
      消除「外层 ~320 / 内层内联 280」的宽度差与右缘空白条 */
   [class*="_sidebarCol"] > [data-slot="sidebar"] > div {
@@ -144,15 +214,16 @@ const PRESET_SIDEBAR_CSS = `
     display: none !important;
   }
 
-  /* 折叠状态下，Logo 按钮悬浮在屏幕左上角作为展开把手（与 dsh-draggable-nav 拖拽脚本联动） */
+  /* 折叠状态下，Logo 按钮悬浮在屏幕左上角作为展开把手（与 dsh-draggable-nav 拖拽脚本联动）
+     放大到 44px 触控尺寸，并避让刘海屏/灵动岛顶部安全区 */
   [class*="_sidebarCol"] [class*="_collapsed"] [class*="_logoRow"],
   [class*="_frame"][data-sidebar-collapsed] [class*="_sidebarCol"] [class*="_logoRow"] {
     position: fixed !important;
-    top: 10px !important;
-    left: 10px !important;
-    width: 40px !important;
-    height: 40px !important;
-    border-radius: 10px !important;
+    top: max(12px, env(safe-area-inset-top)) !important;
+    left: 12px !important;
+    width: 44px !important;
+    height: 44px !important;
+    border-radius: 12px !important;
     background: var(--dsw-alias-bg-layer-1, rgba(255, 255, 255, 0.95)) !important;
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
@@ -197,8 +268,17 @@ const PRESET_SIDEBAR_CSS = `
       min-height: 0 !important;
     }
   }
+
+  /* 8. 兼容处理：隐藏生态插件中重复挂载的小鲸鱼悬浮按钮 (#dshRemoteWhale) 避免入口与手势冲突 */
+  #dshRemoteWhale,
+  button[id="dshRemoteWhale"],
+  [data-dsh-plugin="remote-web-ui"] {
+    display: none !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
+  }
 `;
-/** 设置面板预设：官方设置弹窗整体微缩 + 遮罩锁滚动 + 内容横向滑动 */
+/** 设置面板预设：官方设置弹窗上下堆叠 + 顶部导航横滑 + 内容纵向自然滚览 */
 const PRESET_SETTINGS_CSS = `
 /* ===== dsh-remote-mobile · 设置面板适配 ===== */
 /* 注：窄屏媒体查询由注入层按端包裹 */
@@ -217,38 +297,9 @@ const PRESET_SETTINGS_CSS = `
     overscroll-behavior: contain !important;
   }
 
-  /* 移动端设置弹窗顶部固定提示：内容较宽（530px 等比微缩）需左右滑动浏览。
-     挂在 overlay 容器 ::before 上（absolute 定位相对 fixed overlay），
-     不随弹窗内容滚动，也不参与 flex 居中布局。内测声明等通用 Modal
-     （_root 容器，不在本选择器集合内）不会出现此提示。 */
-  [data-slot*="overlay"]:has([role="dialog"])::before,
-  [class*="_overlay"]:has([role="dialog"])::before,
-  [class*="_modalWrapper"]:has([role="dialog"])::before {
-    content: "↔ 左右滑动浏览设置";
-    position: absolute;
-    top: 16px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 100006 !important;
-    box-sizing: border-box;
-    white-space: nowrap;
-    max-width: calc(100vw - 32px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background: rgba(0, 0, 0, 0.62);
-    color: #ffffff;
-    font-size: 12px;
-    line-height: 18px;
-    border-radius: 999px;
-    padding: 4px 14px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
-    pointer-events: none;
-    text-align: center;
-  }
-
   /* 弹窗卡片：仅命中设置弹窗——外层 overlay 容器内含 role=dialog（设置弹窗由
      data-slot overlay / overlay 类包裹）。内测声明等通用 Modal 直接挂在 body、
-     无 data-slot overlay，天然排除，不会被 94vw / 530px 覆写。 */
+     无 data-slot overlay，天然排除。卡片设为纵向滚动，取消横向滑动。 */
   [data-slot*="overlay"]:has([role="dialog"]) [role="dialog"],
   [data-slot*="overlay"]:has([role="dialog"]) [class*="_dialog"],
   [data-slot*="overlay"]:has([role="dialog"]) [class*="_modalContent"],
@@ -260,25 +311,22 @@ const PRESET_SETTINGS_CSS = `
   [class*="_modalWrapper"]:has([role="dialog"]) [class*="_modalContent"],
   [class*="_settingsModal"] {
     position: relative !important;
-    width: 94vw !important;
-    max-width: 94vw !important;
-    height: 86vh !important;
+    width: 96vw !important;
+    max-width: 96vw !important;
     height: 86dvh !important;
-    max-height: 88vh !important;
-    max-height: 88dvh !important;
+    max-height: 86dvh !important;
     margin: auto !important;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
-    border-radius: 16px !important;
+    border-radius: 14px !important;
     background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
     -webkit-overflow-scrolling: touch !important;
     overscroll-behavior: contain !important;
-    font-size: 13.5px !important;
+    font-size: 14px !important;
   }
 
-  /* 弹窗内部等比微缩：dialog 的全部直接子元素（如设置弹窗的 nav 左侧按钮列表 +
-     content 右侧内容）统一 zoom 0.88，保证整窗一致缩放。 */
+  /* 取消 zoom 微缩，恢复正常比例 */
   [data-slot*="overlay"]:has([role="dialog"]) [role="dialog"] > *,
   [data-slot*="overlay"]:has([role="dialog"]) [class*="_dialog"] > *,
   [data-slot*="overlay"]:has([role="dialog"]) [class*="_modalContent"] > *,
@@ -289,12 +337,10 @@ const PRESET_SETTINGS_CSS = `
   [class*="_modalWrapper"]:has([role="dialog"]) [class*="_dialog"] > *,
   [class*="_modalWrapper"]:has([role="dialog"]) [class*="_modalContent"] > *,
   [class*="_settingsModal"] > * {
-    zoom: 0.88 !important;
+    zoom: 1 !important;
   }
 
-  /* 弹窗右侧内容主体（直接 div 子元素）：固定最小宽度并铺满高度，单屏显示更多
-     内容且字号更精致。左侧导航列表不强制宽度，保持官方窄宽。
-     同样限定在设置弹窗上下文内，避免波及通用 Modal。 */
+  /* 取消 530px 定宽：主体内容 div 铺满宽度，高度自然自适应 */
   [data-slot*="overlay"]:has([role="dialog"]) [role="dialog"] > div,
   [data-slot*="overlay"]:has([role="dialog"]) [class*="_dialog"] > div,
   [data-slot*="overlay"]:has([role="dialog"]) [class*="_modalContent"] > div,
@@ -305,9 +351,41 @@ const PRESET_SETTINGS_CSS = `
   [class*="_modalWrapper"]:has([role="dialog"]) [class*="_dialog"] > div,
   [class*="_modalWrapper"]:has([role="dialog"]) [class*="_modalContent"] > div,
   [class*="_settingsModal"] > div {
-    min-width: 530px !important;
-    width: 530px !important;
-    height: 100% !important;
+    min-width: 0 !important;
+    width: 100% !important;
+    height: auto !important;
+  }
+
+  /* 上下堆叠：只命中带 nav 的设置类弹窗，通用 Modal 不受影响 */
+  [role="dialog"]:has(nav) {
+    flex-direction: column !important;
+  }
+  [role="dialog"]:has(nav) > nav {
+    width: 100% !important;
+    flex: none !important;
+  }
+  [role="dialog"] [class*="_navTitle"] {
+    display: none !important;
+  }
+  [role="dialog"] [class*="_navList"] {
+    display: flex !important;
+    flex-direction: row !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    gap: 4px !important;
+    padding: 4px 2px !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+  [role="dialog"] [class*="_navList"] > * {
+    flex: none !important;
+    white-space: nowrap !important;
+  }
+  /* 移动端收紧官方内容区的厚 padding（原 24px/32px），释放横向显示空间 */
+  [role="dialog"] [class*="_content"] {
+    width: 100% !important;
+    min-width: 0 !important;
+    flex: 1 1 auto !important;
+    padding: 10px 4px !important;
   }
 
   /* 重置插件市场等弹窗在窄屏隐藏左侧 nav 的行为：保持导航列表可见。
@@ -616,8 +694,8 @@ export const BUILTIN_PRESETS = [
         id: 'preset-settings',
         name: { zh: '设置面板适配', en: 'Settings Panel' },
         description: {
-            zh: '官方设置弹窗居中微缩显示更多内容，遮罩锁死滚动，内部支持左右横滑。',
-            en: 'Centers and scales down the settings dialog, locks overlay scroll, and enables horizontal panning.',
+            zh: '官方设置弹窗上下堆叠自适应浏览：顶部导航横滑切换，内容纵向自然滚览，告别横向截断。',
+            en: 'Stacks settings dialog vertically: horizontal scrollable nav tabs at top, vertical flowing content.',
         },
         defaultPcEnabled: false,
         defaultMobileEnabled: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote-mobile",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "DeepSeek Harness 远程与移动端安全网关插件：零修改 DSH 底层代码安全开放局域网与 Tailscale 连接 | DeepSeek Harness (DSH) Remote & Mobile Security Guard: safely opens Tailscale/LAN with zero core modifications, QR scan auth, RSA encryption & brute-force defense.",
   "keywords": [
     "dsh",