dsh-pocket 2.1.3 → 2.2.0

package/README.en.md

@@ -191,7 +191,7 @@ Such tools take over all traffic and often cut cloudflared's tunnel-edge connect
 ```sh
 npm install
 node client/build.mjs   # rebuild after editing client/
-npm test                # proxy / auth / compression / tunnel / service / RPC / settings (91 tests)
+npm test                # proxy / auth / compression / tunnel / service / RPC / settings (93 tests)
 ```
 
 **Want to try your changes locally without publishing?** Point the installed plugin at your local checkout with a symlink and restart dsh web. Full steps (including switching back to the npm release) are in [LOCAL-DEV.md](./LOCAL-DEV.md).

package/README.md

@@ -192,7 +192,7 @@ npx @deepseek-ai/dsh web
 ```sh
 npm install
 node client/build.mjs   # 改 client/ 后重新打包
-npm test                # 代理 / 认证 / 压缩 / 隧道 / 服务 / RPC / 设置（91 测试）
+npm test                # 代理 / 认证 / 压缩 / 隧道 / 服务 / RPC / 设置（93 测试）
 ```
 
 **改完想在本机先试？** 不用发版：把插件换成指向本地仓库的软链，重启 dsh web 就是本地代码。完整步骤（含怎么换回 npm 官方版本）见 [LOCAL-DEV.md](./LOCAL-DEV.md)。

package/client/client.js

@@ -535,14 +535,19 @@ var MOBILE_CSS = `
      it to 500), and when the layer outranks the drawer, the backdrop paints
      ABOVE the drawer and swallows every tap \u2014 the drawer opens but no row
      can be pressed (every tap just closes it). The drawer must therefore
-     outrank any such raise: 600 clears the known 500 while staying under the
-     fixed-position banners/toasts (z 9999) that float at the viewport level. */
+     outrank any such raise.
+     1200 (was 600) clears the mobile layers shipped by
+     @linxin666/dsh-web-ui-all \u2014 its sidebar pane is z-index 1100, its
+     details pane 1000 and its full-screen frame ::after mask 1050 (issue
+     #67: that mask sat on top of the 600 drawer and ate every tap). Still
+     far under the fixed-position banners/toasts (z 9999) that float at the
+     viewport level. */
   [data-mobile-nav="frame"] > :first-child {
     position: absolute !important;
     inset: 0 auto 0 0 !important;
     width: max-content !important;
     max-width: 92vw !important;
-    z-index: 600 !important;
+    z-index: 1200 !important;
     transform: translateX(-110%);
     transition: transform .28s var(--ds-ease-in-out, ease-in-out);
     background: var(--dsw-alias-bg-base, #ffffff);
@@ -571,6 +576,32 @@ var MOBILE_CSS = `
     transform: none !important;
   }
 
+  /* Kill a competing full-screen mask (issue #67).
+     @linxin666/dsh-web-ui-all ships its own mobile drawer, and part of it is
+
+       [data-dsh-frame]:not([data-sidebar-collapsed])::after {
+         content: ""; position: fixed; inset: 0; z-index: 1050;
+         background: rgb(0 0 0 / 24%);
+       }
+
+     The pseudo-element belongs to the frame we already mark, and the frame
+     carries only "position: relative" with z-index auto \u2014 no stacking context
+     \u2014 so this mask competes with the drawer in the parent stacking context
+     and, at 1050, paints over it. It covers the whole viewport, so every tap
+     on a session row lands on the mask instead: the drawer opens but nothing
+     inside it can be pressed, and the page behind cannot be scrolled.
+     Removing it is safe: the mobile stylesheet already renders its own
+     backdrop, and tapping outside the drawer is handled in JS.
+
+     The attribute selector is repeated on purpose. Their rule has the same
+     specificity (0,2,1) once ours is written the obvious way, and plugin
+     stylesheets are injected in load order, so a tie would be decided by
+     whichever plugin happened to load last. Doubling the attribute makes it
+     (0,3,1) and deterministic. */
+  [data-mobile-nav="frame"][data-mobile-nav="frame"]:not([data-sidebar-collapsed])::after {
+    content: none !important;
+  }
+
   /* Drag handles are useless on touch and would float over the drawer. */
   [data-side="sidebar"],
   [data-side="details"] {
@@ -1200,8 +1231,44 @@ var en = {
   "files": "Files"
 };
 
+// client/mobile/layout-mode.mjs
+function resolveLayout({ urlValue, stored, narrowMatch }) {
+  const url = String(urlValue ?? "").trim();
+  if (url === "desktop") return "desktop";
+  if (url === "mobile") return "mobile";
+  if (stored === "desktop" || stored === "mobile") return stored;
+  return narrowMatch ? "mobile" : "desktop";
+}
+function persistLayoutFromUrl(urlValue) {
+  if (typeof localStorage === "undefined") return "";
+  const v = String(urlValue ?? "").trim();
+  try {
+    if (v === "desktop" || v === "mobile") localStorage.setItem("dsh-pocket.layout", v);
+    else if (v === "auto" || v === "") localStorage.removeItem("dsh-pocket.layout");
+  } catch {
+  }
+  try {
+    const s = localStorage.getItem("dsh-pocket.layout");
+    return s === "desktop" || s === "mobile" ? s : "";
+  } catch {
+    return "";
+  }
+}
+
 // client/mobile/mobile-apply.tsx
 function mobileApply(ctx) {
+  const urlValue = new URL(window.location.href).searchParams.get("dsh-layout") ?? "";
+  const narrowMQ = window.matchMedia("(max-width: 1023px)");
+  const stored = persistLayoutFromUrl(urlValue);
+  const layout = resolveLayout({ urlValue, stored, narrowMatch: narrowMQ.matches });
+  document.body?.setAttribute("data-dsh-pocket-layout", layout);
+  if (layout === "desktop") return;
+  let narrow = narrowMQ;
+  if (layout === "mobile") {
+    narrow = { matches: true, addEventListener: () => {
+    }, removeEventListener: () => {
+    } };
+  }
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-mobile-nav: dictionaries");
   ctx.effect(() => {
     const tag = document.createElement("style");
@@ -1214,7 +1281,6 @@ function mobileApply(ctx) {
     };
   }, "dsh-mobile-nav: styles");
   ctx.effect(() => {
-    const narrow = window.matchMedia("(max-width: 1023px)");
     const viewport = document.querySelector('meta[name="viewport"]');
     const originalViewport = viewport?.content ?? "";
     const themeMeta = document.createElement("meta");
@@ -1246,7 +1312,6 @@ function mobileApply(ctx) {
     };
   }, "dsh-mobile-nav: status bar theme + viewport + zoom guard");
   ctx.effect(() => {
-    const narrow = window.matchMedia("(max-width: 1023px)");
     if (!narrow.matches) return () => {
     };
     const onChevronClick = (event) => {
@@ -1258,7 +1323,6 @@ function mobileApply(ctx) {
     return () => document.removeEventListener("click", onChevronClick, true);
   }, "dsh-mobile-nav: aionui explorer close marker");
   ctx.effect(() => {
-    const narrow = window.matchMedia("(max-width: 1023px)");
     if (!narrow.matches) return () => {
     };
     const frame = () => document.querySelector('[data-mobile-nav="frame"]');
@@ -1276,7 +1340,6 @@ function mobileApply(ctx) {
     };
   }, "dsh-mobile-nav: explorer availability (issue #48)");
   ctx.effect(() => {
-    const narrow = window.matchMedia("(max-width: 1023px)");
     if (!narrow.matches) return () => {
     };
     const frame = () => document.querySelector('[data-mobile-nav="frame"]');
@@ -1301,7 +1364,6 @@ function mobileApply(ctx) {
     };
   }, "dsh-mobile-nav: preview sheet open marker");
   ctx.effect(() => {
-    const narrow = window.matchMedia("(max-width: 1023px)");
     if (!narrow.matches) return () => {
     };
     const moveTps = (stats) => {
@@ -1335,7 +1397,6 @@ function mobileApply(ctx) {
     };
   }, "dsh-mobile-nav: stats line marker");
   ctx.effect(() => {
-    const narrow = window.matchMedia("(max-width: 1023px)");
     if (!narrow.matches) return () => {
     };
     const cols = ["[data-aionui-explorer-col]", "[data-aionui-preview-col]"];

package/client/mobile/layout-mode.mjs

@@ -0,0 +1,46 @@
+// 布局模式判定（issue #74：宽屏手机/Pad 可选电脑布局）
+//
+// 优先级：URL 参数 (?dsh-layout=desktop|mobile|auto) > localStorage > 默认 auto。
+//   - 'auto' 不写 localStorage，仅按 matchMedia 走；
+//   - 显式 'desktop' / 'mobile' 同步到 localStorage，下次无 URL 参数也走同样布局。
+//
+// 纯函数，便于单测；mobile-apply.tsx 读 DOM/localStorage 喂进来。
+
+/** @typedef {'mobile' | 'desktop'} ForcedLayout */
+
+/** 解析输入。 */
+export function resolveLayout({ urlValue, stored, narrowMatch }) {
+  const url = String(urlValue ?? '').trim();
+  if (url === 'desktop') return 'desktop';
+  if (url === 'mobile') return 'mobile';
+  // 'auto' / 空 / 非法值 → 用 localStorage / matchMedia
+  if (stored === 'desktop' || stored === 'mobile') return stored;
+  return narrowMatch ? 'mobile' : 'desktop';
+}
+
+/** 同步 localStorage 的副作用（在 mobileApply 入口跑一次）。返回最终存储值。 */
+export function persistLayoutFromUrl(urlValue) {
+  if (typeof localStorage === 'undefined') return '';
+  const v = String(urlValue ?? '').trim();
+  try {
+    if (v === 'desktop' || v === 'mobile') localStorage.setItem('dsh-pocket.layout', v);
+    else if (v === 'auto' || v === '') localStorage.removeItem('dsh-pocket.layout');
+  } catch { /* 隐私模式/无 storage → 静默 */ }
+  try {
+    const s = localStorage.getItem('dsh-pocket.layout');
+    return s === 'desktop' || s === 'mobile' ? s : '';
+  } catch {
+    return '';
+  }
+}
+
+/** 读 localStorage 当前的 layout 值（'desktop' | 'mobile' | ''）。 */
+export function readStoredLayout() {
+  if (typeof localStorage === 'undefined') return '';
+  try {
+    const v = localStorage.getItem('dsh-pocket.layout');
+    return v === 'desktop' || v === 'mobile' ? v : '';
+  } catch {
+    return '';
+  }
+}

package/client/mobile/mobile-apply.tsx

@@ -6,6 +6,7 @@ import { MobileDrawerFooter } from './MobileDrawerFooter.tsx'
 import { MOBILE_CSS } from './mobile.css.ts'
 import { NS, en, zh } from './locales.ts'
 import type { MobileNavKey } from './locales.ts'
+import { resolveLayout, persistLayoutFromUrl } from './layout-mode.mjs'
 
 declare module '@deepseek-ai/dsh-client-ui-slots' {
   interface LocaleNamespaceMap {
@@ -23,6 +24,22 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
  * @param ctx - client root context.
  */
 export function mobileApply(ctx): void {
+  // 布局模式（issue #74）：URL 参数 > localStorage > auto(=matchMedia)。
+  // desktop 模式（宽屏手机/平板强制电脑布局）下整段 mobile 效果都不挂——
+  // 不加 styles、不挂 slots、不跑 effects，直接走 DSH 原生桌面 UI。
+  const urlValue = new URL(window.location.href).searchParams.get('dsh-layout') ?? '';
+  const narrowMQ = window.matchMedia('(max-width: 1023px)');
+  const stored = persistLayoutFromUrl(urlValue);
+  const layout = resolveLayout({ urlValue, stored, narrowMatch: narrowMQ.matches });
+  document.body?.setAttribute('data-dsh-pocket-layout', layout);
+  if (layout === 'desktop') return;
+  // 强制 mobile：narrow 永远 true；宽度变化不再切换（用户已显式选 mobile）
+  // auto 模式：narrow 是真实的 matchMedia，宽度变化会触发 effect 挂载/卸载
+  let narrow: MediaQueryList = narrowMQ;
+  if (layout === 'mobile') {
+    narrow = { matches: true, addEventListener: () => {}, removeEventListener: () => {} } as MediaQueryList;
+  }
+
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-mobile-nav: dictionaries')
 
   ctx.effect(() => {
@@ -52,7 +69,6 @@ export function mobileApply(ctx): void {
   //   zoom; modern browsers are covered by the stylesheet's
   //   touch-action: manipulation (which keeps pan and pinch zoom).
   ctx.effect(() => {
-    const narrow = window.matchMedia('(max-width: 1023px)')
     const viewport = document.querySelector<HTMLMetaElement>('meta[name="viewport"]')
     const originalViewport = viewport?.content ?? ''
     const themeMeta = document.createElement('meta')
@@ -96,7 +112,6 @@ export function mobileApply(ctx): void {
   // sheet's own collapse chevron is tapped, so closing is symmetric with
   // opening.
   ctx.effect(() => {
-    const narrow = window.matchMedia('(max-width: 1023px)')
     if (!narrow.matches) return () => {}
     const onChevronClick = (event: MouseEvent) => {
       const target = event.target as HTMLElement | null
@@ -115,7 +130,6 @@ export function mobileApply(ctx): void {
   // `data-mobile-nav-explorer="1|0"` so the stylesheet can hide the entries
   // on hosts without it (dsh-web-ui installs keep the feature).
   ctx.effect(() => {
-    const narrow = window.matchMedia('(max-width: 1023px)')
     if (!narrow.matches) return () => {}
     const frame = (): HTMLElement | null => document.querySelector('[data-mobile-nav="frame"]')
     const check = () => {
@@ -141,7 +155,6 @@ export function mobileApply(ctx): void {
   // whenever the suite hides the column again (collapse chevron / tab
   // close), so a restored-but-unwanted sheet never appears.
   ctx.effect(() => {
-    const narrow = window.matchMedia('(max-width: 1023px)')
     if (!narrow.matches) return () => {}
     const frame = (): HTMLElement | null => document.querySelector('[data-mobile-nav="frame"]')
     const onTap = (event: MouseEvent) => {
@@ -173,7 +186,6 @@ export function mobileApply(ctx): void {
   // marked row out as ONE horizontally scrolling line with every metric
   // reachable.
   ctx.effect(() => {
-    const narrow = window.matchMedia('(max-width: 1023px)')
     if (!narrow.matches) return () => {}
     // The composer root renders the TPS readout ("TPS 89.4 tok/s") as its
     // own row BELOW the status strip; fold it into the strip so every
@@ -218,7 +230,6 @@ export function mobileApply(ctx): void {
   // with the Web Animations API each time a column turns visible, then
   // leave the resting state to the stylesheet.
   ctx.effect(() => {
-    const narrow = window.matchMedia('(max-width: 1023px)')
     if (!narrow.matches) return () => {}
     const cols = ['[data-aionui-explorer-col]', '[data-aionui-preview-col]']
     const seen = new Map<string, boolean>()

package/client/mobile/mobile.css.ts

@@ -210,14 +210,19 @@ export const MOBILE_CSS = `
      it to 500), and when the layer outranks the drawer, the backdrop paints
      ABOVE the drawer and swallows every tap — the drawer opens but no row
      can be pressed (every tap just closes it). The drawer must therefore
-     outrank any such raise: 600 clears the known 500 while staying under the
-     fixed-position banners/toasts (z 9999) that float at the viewport level. */
+     outrank any such raise.
+     1200 (was 600) clears the mobile layers shipped by
+     @linxin666/dsh-web-ui-all — its sidebar pane is z-index 1100, its
+     details pane 1000 and its full-screen frame ::after mask 1050 (issue
+     #67: that mask sat on top of the 600 drawer and ate every tap). Still
+     far under the fixed-position banners/toasts (z 9999) that float at the
+     viewport level. */
   [data-mobile-nav="frame"] > :first-child {
     position: absolute !important;
     inset: 0 auto 0 0 !important;
     width: max-content !important;
     max-width: 92vw !important;
-    z-index: 600 !important;
+    z-index: 1200 !important;
     transform: translateX(-110%);
     transition: transform .28s var(--ds-ease-in-out, ease-in-out);
     background: var(--dsw-alias-bg-base, #ffffff);
@@ -246,6 +251,32 @@ export const MOBILE_CSS = `
     transform: none !important;
   }
 
+  /* Kill a competing full-screen mask (issue #67).
+     @linxin666/dsh-web-ui-all ships its own mobile drawer, and part of it is
+
+       [data-dsh-frame]:not([data-sidebar-collapsed])::after {
+         content: ""; position: fixed; inset: 0; z-index: 1050;
+         background: rgb(0 0 0 / 24%);
+       }
+
+     The pseudo-element belongs to the frame we already mark, and the frame
+     carries only "position: relative" with z-index auto — no stacking context
+     — so this mask competes with the drawer in the parent stacking context
+     and, at 1050, paints over it. It covers the whole viewport, so every tap
+     on a session row lands on the mask instead: the drawer opens but nothing
+     inside it can be pressed, and the page behind cannot be scrolled.
+     Removing it is safe: the mobile stylesheet already renders its own
+     backdrop, and tapping outside the drawer is handled in JS.
+
+     The attribute selector is repeated on purpose. Their rule has the same
+     specificity (0,2,1) once ours is written the obvious way, and plugin
+     stylesheets are injected in load order, so a tie would be decided by
+     whichever plugin happened to load last. Doubling the attribute makes it
+     (0,3,1) and deterministic. */
+  [data-mobile-nav="frame"][data-mobile-nav="frame"]:not([data-sidebar-collapsed])::after {
+    content: none !important;
+  }
+
   /* Drag handles are useless on touch and would float over the drawer. */
   [data-side="sidebar"],
   [data-side="details"] {

package/package.json

@@ -80,5 +80,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "version": "2.1.3"
+  "version": "2.2.0"
 }