dsh-pocket 2.1.4 → 2.2.0

package/client/client.js

@@ -1231,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");
@@ -1245,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");
@@ -1277,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) => {
@@ -1289,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"]');
@@ -1307,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"]');
@@ -1332,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) => {
@@ -1366,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/package.json

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