手机端侧边栏外壳 AliceLJY/dsh-thumb

dsh-thumb

DeepSeek Harness（dsh）网页 GUI 的手机外壳。侧边栏不再挤压聊天区，改为浮层抽屉；点一下会话就自动收起；设置面板变成全屏单列；对话记录按手机阅读距离重新调校。桌面端不受影响。

中文说明

个人工具，按原样发布。 为一个人的手机和一个 dsh 版本（0.1.0-rc.6）而写。不承诺维护，也不承诺回复 issue。如果 dsh 升级把它弄坏了，先看 src/client.js 顶部的 LOCATORS 里那四个条目——改起来只要几分钟。

2026-10-21 对照 dsh 0.2.1-rc.2 重新验证过（同样的 393×660 视口，Playwright）：抽屉和遮罩仍然可用，原版仍然把聊天区挤到 113px。唯一坏掉的是右侧面板的定位器——上游把 detailsCol 改名成了 rightbarCol——所以 LOCATORS.details 现在同时匹配这两个名字。

为什么

在手机上，dsh 的首屏没问题——侧边栏自动收成 56px 的图标栏，输入框也放得下。一切只在侧边栏展开之后才崩，而展开侧边栏偏偏是切换会话的必经之路。

在 iPhone 14 Pro 视口（393×660）、dsh 0.1.0-rc.6 上实测，装这个插件之前：

| 情况 | 之前 | 之后 |
| 收起图标栏 | 正常 | 不受影响 |
| 侧边栏展开 | 占掉 71% 屏幕，把聊天区挤到 113px | 变成浮层；聊天区保持完整 393px |
| 点完一个会话 | 侧边栏不关，你只能在 113px 的缝里读 | 自动收起 |
| 关闭侧边栏 | 只能点收起按钮 | 点遮罩任意位置 |
| 设置面板 | 800px 双栏布局硬塞进 393px；每个英文单词都折行；取值选择器掉出屏幕 | 全屏单列，文字正常折行，选择器留在屏幕内 |
| 设置里被裁掉的元素 | 7 个 | 1 个 |
| 对话记录高度（3 轮会话） | 610px——按桌面阅读距离定的 | 490px，短了五分之一 |

这不是上游的 bug——这是明说的约定。@deepseek-ai/dsh-client-ui-layout 里的列宽求解器写道：

侧边栏从不退让：它的渲染宽度永远是拖拽偏好（或收起的图标栏），中间列作为最后手段吸收所有剩余亏空。

SIDEBAR_DEFAULT = 280，393px 视口正好是 393 − 280 = 113。退让链先压缩详情面板，再关掉它，然后中间列吃掉剩下的一切。在窄桌面窗口里还剩几百像素时，这很合理；在手机上不合理。

安装 / 移除 / 关闭

install
dsh plugin --profile web add github:AliceLJY/dsh-thumb
confirm "dsh-thumb" is in dsh.profile.bundles in ~/.dsh/profiles/web/package.json, then restart the service

remove
dsh plugin --profile web remove dsh-thumb
again, confirm it is gone from the bundles array, then restart

没有 npm 包：dsh plugin add 把参数直接交给 pnpm，所以一个 github: 说明符直接安装仓库。冷存储下实测 8.9s，dsh 会自己把它追加到 dsh.profile.bundles。

想在本地改？把同一条命令指向路径：

dsh plugin --profile web add link:/absolute/path/to/dsh-thumb

⚠️ 回滚要撤销两处：package.json 和 node_modules 里的链接。只恢复前者，下次 pnpm add 看到链接还在，判定「Already up to date」，什么都不写却报成功——看着装上了，其实没有。

不想重启任何东西就关掉：

- 在 URL 末尾加 ?thumb=0，或
- 在控制台执行 localStorage.setItem('dsh-thumb','0') 再刷新

与 GitHub 上同类插件的区别

同一时期冒出一批 dsh 移动端项目，常见做法是在 CSS 里硬编码 dsh 的类名（pI_x6G_sidebarCol、Md3f7G_scroll 之类）。这些类名由 CSS Modules 在构建时生成，每次 dsh 重新构建都会变，插件随之静默失效——样式不再生效，页面照常渲染，日志里什么都没有。只是某天开始觉得变难用了。

CSS 里没有出现任何宿主类名（有几处注释提到一个类名，是作为不要硬编码的反例）。三列改为在运行时按语义后缀定位一次（sidebarCol——这一半来自上游源码变量，能扛住哈希），再打上我们自己的 data-thumb 属性；所有规则都基于这些属性。上游若改名，只会在一个地方断掉一个定位器，你能找到它，而不是样式到处悄悄失效。

行为也走官方接口：关闭抽屉调用 ctx.layout.toggleSidebar()——ui-sidebar 自己用的那个公开 ILayout 方法——而不是在某个按钮上合成点击。

适用范围

布局规则只在两个条件同时成立时生效：视口 ≤1023px（与上游的 SIDEBAR_AUTO_COLLAPSE = 1024 对齐，全局只有一个断点）且侧边栏被手动展开。56px 的窄条完全不动——它本来就好用。

平板上抽屉还值得吗？

这份文件早先的版本猜过：到平板宽度附近就不值得了，建议把断点降到 767px。实测下来，这个猜测是错的。

关键看点完会话之后你处于什么状态，因为切换会话必须走这条路。原版让侧边栏保持展开，正文停在 width − 280。外壳会把它关掉，只留 56px 窄条和 width − 56：

| 视口 | 原版 | 加外壳 | 提升 |
| 393px | 113px | 337px | +198% |
| 480px | 200px | 424px | +112% |
| 604px | 324px | 548px | +69% |
| 768px | 488px | 712px | +46% |
| 900px | 620px | 844px | +36% |
| 1023px | 743px | 967px | +30% |
用 node test/measure-widths.mjs 重新生成那张表；这个文件也解释了为什么它量的是你最终剩下的宽度，而不是抽屉盖住的宽度——第一次尝试就错在这里。

增益随宽度收窄，符合预期——但在支持范围内任何位置都没有反转。下调断点会关掉一个在它本该帮忙的尺寸上仍值 30–46% 的东西。1023px 断点保留。

密度规则是唯一一处刻意例外：它们在 ≤1023px 且抽屉关闭时生效，因为那才是你读对话记录时的状态。在实测会话上，那是 610px 的列缩到 490px——其中 60px 仅来自轮次之间的间隙（16px → 10px），这部分不花任何交互成本。正文从 16px/28px → 14px/21px，操作按钮从 28px → 24px；按钮本来就已经低于 44px 的 iOS 触摸目标，所以最后这一项是取舍，样式表顶部的 --thumb-hit 会把它补回来。

桌面端已验证未变：侧边栏 280px，中间 1160px，position: static，无遮罩，设置仍是 800px 双栏面板。

已知限制

- 悬停提示仍可能溢出右边缘（悬停工作区行时出现的深色卡片）。刻意不修：它的类名（_card / _copyable）太通用，没法安全定位；要正经修，就得每帧扫描所有 position: fixed 层并把它们夹回视口——对一个纯外观、不阻塞任何操作的问题来说，影响范围不明。正确的修法在上游，在提示自己的触摸处理里。
- 在 393、480、560、604、640、700、768、900 和 1023px 下实测，外加桌面 1440×900——见 Scope 下的表。手机尺寸是日常在用的；其余只量过一次，没真正住进去。
- 设置导航仍然竖排，而不是横向滚动。flex-direction: row 规则落在的包装元素并不是真正排布那些条目的那个，所以它在面板顶部占掉一些纵向空间。保持原样：面板从不可用变成可用，追查确切的导航容器属于打磨，不是修复。
- 助手回复下方的操作行保持 28px，而用户消息下方的缩到 24px。它们位于第二层 flex 包装里，对 height、align-self 和 min-height 都没反应，而没有任何点名这些类的规则设置高度——所以决定它们尺寸的东西需要比类名扫描更宽的探查。刻意不动：在一个三轮会话上是 12px，约占列的 2%。
- 上游改变列布局方式就意味着要更新这里。 定位器是 src/client.js 顶部 LOCATORS 里的四个条目——改起来几分钟的事。

验证

node test/smoke.mjs # 21 assertions against a running dsh
这套测试驱动一个真实的 dsh 实例，先在手机视口跑一遍，再在 1440×900 下跑一遍：定位器打标、抽屉后面聊天保持全宽、四个密度数值、包含性、平板宽度、关闭开关，还有一轮桌面回归，断言正文仍是 16px。有一条断言是端到端验证，不是属性检查——它把同一份对话记录加载两次，一次带 ?thumb=0，要求外壳版本至少短 15%。

到目前为止它抓到两个真实回归，都值得了解。

关闭开关，出现在测试首次运行时。?thumb=0 一直只禁用 React 组件，在密度规则落地之前这就够了——每条规则都挂在一个只有活组件才会设置的抽屉属性上。密度规则在抽屉关闭时也生效，于是样式表自己成了承重结构，开关再也够不到它。现在 ensureStyle 和 stampFrame 直接检查它。

包含性，这条测试没抓到——它是从手机上反馈回来的。中间窗格除了对话记录还挂载了 trace 视图，而 trace 工具栏由文字按钮组成。[class*="_actions"] > button 把它们每一个都定成 24px 见方，Duration / Turns / Calls 挤成无法阅读的重叠。现在每条密度规则都走 FLOW，这个作用域靠消息项来识别对话记录列，而不是靠类名。教训不在选择器，而在于：一套只打开一个标签页的测试，会在相邻视图坏掉时继续通过。于是有了包含性断言——并且通过重新引入 bug 验证过它会失败，确实失败，还点名了那三个按钮。

复现这一条要注意：trace 标签页在手机宽度下不接受 Playwright 点击。先在桌面尺寸打开，再缩小视口——同一个挂载视图，窄布局，中间不导航。

运行截图不公开——里面是真实的工作区和会话标题。

复现之前有三个坑值得知道：

1. ESM 忽略 NODE_PATH —— 全局安装的 playwright 需要绝对说明符，而且它是 CommonJS，所以要导入默认导出。
2. Chrome 会走系统代理，ts.net 地址会超时——用 http://127.0.0.1:3080 加 --no-proxy-server。
3. waitUntil: 'networkidle' 永远不会触发 —— dsh 保持一条长连接，所以用 domcontentloaded 加固定等待。

开发笔记

两个坑，都属于「看起来在别处，其实是你自己干的」那种： 插件始终不激活，整个页面一片空白。 package.json 里的 dsh.client.inject 和 client.js 导出的 inject 看起来一模一样，含义却完全不同：前者列的是包名（模块加载顺序），后者列的是 cordis 服务名（['slots', 'layout']）。后者写错，插件就一直停在 pending 状态，shell 报 web boot: 1 entry did not activate，页面什么都不渲染。照抄 @deepseek-ai/dsh-client-ui-sidebar 注入的内容。

一个永远关不掉的抽屉。 判断是否展开的检查，最初读的是侧边栏渲染后的宽度（大于 56px 就算展开），而抽屉的 CSS 正是把侧边栏固定成 320px 的那段代码。这个条件被它自己的副作用污染了，于是一直为真：折叠按钮、遮罩、自动关闭全都像坏了，看起来像是 ctx.layout.toggleSidebar() 在窄视口下没生效（其实它一直正常）。现在改成读 AppFrame 写在 frame 上的内联 grid-template-columns，这是上游的本意，本插件从不碰它。规则：绝不要用你自己会覆盖的量来推导条件。

License

MIT