手机侧栏抽屉 better-er/dsh-mobile-drawer

DSH·手机适配

窄屏下把 DSH 改成手机能用的形态：收起时是左上角一个悬浮小方块，展开时是覆盖式抽屉，点会话自动收起，压掉切会话时的自动聚焦，并在右上角给一排手机键盘上没有的按键。

纯浏览器端插件，不改任何原生界面与内置样式，只在窄屏加副作用。

引言

让 DSH 在手机浏览器里顺手一点。

功能

四条行为都只在窄屏生效，视口宽度小于 1024 像素时算窄屏，宽屏下插件完全不介入。

取舍是读优先：手机上多数时候在翻内容而不是在写，软键盘一弹就吃掉半屏，所以收起态把宽度还给对话、自动聚焦一并压掉；而你伸手去点输入框时它立刻放手。判据是键盘由谁要来的，自动弹的压，手要的不碰。

- 收起态：侧栏列压到零宽，中央区拿回整幅宽度，左上角出现一个 44 像素的悬浮方块，点它展开侧栏。
- 展开态：侧栏变成 280 像素宽的覆盖式抽屉，压在对话之上，右侧有一层遮罩，点遮罩或点侧栏里的收起按钮即可关掉。
- 点会话自动收起：在抽屉里点任意会话行，侧栏立刻收起，把屏幕让回对话；点行内的更多按钮不触发。
- 压键盘：切会话后输入框会无条件夺回焦点，手机上这会拉起软键盘并把页面顶起，插件压掉紧随会话点击的那一次聚焦，并持续压制一秒半；用户主动点输入框就立即放弃压制。
- 手机按键：右上角浮一排手机键盘上没有的键，目前是 Shift、Ctrl 与 Tab。Tab 在打 / 或 @ 时让菜单补全，否则在光标处插入制表符，终端里交给 shell 补全；Shift 与 Ctrl 是粘滞修饰键，点一下锁定、再点取消，锁定时按回车分别是换行与跟普通回车相反的发送模式。

截图

| 收起态 · 左上角悬浮小方块 | 展开态 · 覆盖式抽屉 |
| 手机端收起为左上角悬浮小方块 | 手机端展开为覆盖式抽屉 |

展开态里的会话名与工作区名已替换为示例。

使用

用 Edge 或手机浏览器打开 DSH web，把窗口缩到 1024 像素以下，或直接在手机上访问，就能看到收起态的小方块。点方块展开抽屉，点任一会话收起，右上角会出现那排按键。

已在 Xiaomi 14 上通过 mi14-webview 实测，1200×2670 的屏幕正常触发。按键条的点击与高亮、Tab 的补全与插入、Shift 换行与 Ctrl 排队都验证过。

方块图标直接克隆内置收起栏的鲸鱼标记，跟随后续版本的品牌变化；拿不到内置图标时方块不显示，插件不自造兜底图标，收起态的布局副作用也一并跳过，侧栏保持内置形态，不会出现收起了却没有展开入口的局面。

安装

从 GitHub 安装：源码在 src/，lib/ 不入仓库，安装时 npm 会触发 prepare 脚本现场构建。

dsh plugin --profile web add github:better-er/dsh-mobile-drawer

从 npm 安装：包内已含构建产物 lib/index.js 与 lib/client.js，安装时不再构建。

dsh plugin --profile web add dsh-mobile-drawer

两种方式装完都会自动挂载，重启 DSH web 后启用，无需手工编辑任何文件。

卸载

dsh plugin --profile web remove dsh-mobile-drawer

彻底移除，重启 DSH web 后不再加载。

工作原理

浏览器半身只借 ctx.layout.toggleSidebar() 翻转内置的窄屏侧栏状态，其余全走 DOM 副作用：注入一段只对窄屏生效的样式，给 body 挂状态类，创建一个悬浮方块与一层遮罩，再用捕获阶段的 click、focusin、pointerdown 监听完成收起与聚焦压制。

按键条不由 slot 渲染，插件自己建 DOM 固定到右上角，终端与文件编辑器这些不在会话输入区的页面也要看得见；conversation.input.dock 上只留一个空组件存下会话作用域的 inputActions。点击处理不在按钮上，而在 document 的 pointerdown 捕获阶段：触发菜单的关闭监听挂在那里，晚一步菜单就被关掉。按当前焦点分三路：对话输入框走 inputActions，终端与编辑器收合成的 Tab，普通 input 与 textarea 自己补字符。

窄屏判定与内置对齐，用的是 max-width: 1023.98px。收起态直接覆盖 AppFrame 的网格轨道，把侧栏列压到零宽；展开态把侧栏根节点绝对定位成 280 像素的抽屉，这样不会脱离网格放置，中央区始终是整幅宽度。完整设计见 设计说明。

要求与开发

- 是标准形态的 dsh client 插件，声明 dsh.client，导出 ./client。
- 同时声明了 dsh.bundle，因此也是一个自挂载的 bundle 层插件：用 dsh plugin --profile <name> add 从 GitHub 安装后会被自动识别为 profile layer 并挂载，无需手工写组合 entry。
- 浏览器半身依赖 layout 与 slots 服务；宿主入口没有运行时行为，只为让包能被 Loader 加载。
- 构建型插件：src/ 是 TypeScript 源码，lib/ 是构建产物且不入库，安装或发布前由 prepare 构建。

开发

pnpm install
pnpm typecheck # tsc --noEmit 严格类型检查
pnpm build # tsdown，产出 lib/index.js 与 lib/client.js

- src/index.ts：宿主入口，无运行时行为，只用于让包被 Loader 加载。
- src/client/index.ts：浏览器半身，窄屏侧栏与聚焦压制。
- src/client/keys.tsx：右上角按键条，目前是 Shift、Ctrl 与 Tab。
- 构建用 tsdown，client 产物是 window.__ModuleLoader__.load({ id, factory }) 的注册式模块，@deepseek-ai/cordis 与 react 保持外部依赖。

License

MIT