移动端界面优化器 raomaiping-hash/dsh-client-ui-mobile

dsh-client-ui-mobile

CI
version
license

DeepSeek Harness Web GUI 的移动端 / 小平板 UI 优化器。

原生 Web 外壳是三栏桌面布局。在手机宽度下，侧边栏导轨、188px 的设置导航、以及仅 hover 才显示的工具行控件会变得拥挤或不可达。本插件在 max-width: 820px 断点下重排外壳，不修改任何上游代码——它是一个纯客户端（浏览器）插件：一个 块加一个小的 React overlay。

功能

- 抽屉式侧栏——820px 以下侧栏变为左侧抽屉；入口有两个：会话页在官方顶栏「Session 日志」按钮右侧注入一个内嵌的「展开侧边栏」按钮（不悬浮、不遮挡），首页等没有会话顶栏的页面则由右上角的悬浮按钮（FAB）承担——两者互斥，顶栏按钮一旦出现 FAB 自动让位。遮罩（仅覆盖对话区）与 Esc 关闭，会话切换时自动收起。
- 全屏设置面板——设置弹窗（桌面上是 188px 导航栏 + 内容）变为全屏面板：顶部标题 + 横向可滚动分区标签、绝对定位关闭按钮、安全区留白。
- 设置入场动画——遮罩淡入 + 面板上滑；受 prefers-reduced-motion 约束。
- 详情面板底部抽屉——工具调用详情列（小屏默认隐藏）变为从底部滑入的抽屉，由布局的 data-details-collapsed 状态驱动。
- 工具行「Inspect」按钮——小屏下显示（桌面端仅 hover 显示）并放大到 32px 触控目标。
- 安全区与触控打磨——env(safe-area-inset-)、输入框 16px 字号、touch-action: manipulation、更紧凑的输入栏间距。
- 抗升级选择器——用稳定属性（[role="dialog"][aria-modal="true"]:has(>nav)、[data-shell-overlay]）与 CSS module 局部名后缀（[class="_options"]）而非哈希类名匹配，能在 DSH 前端重构建后继续生效。

关于右侧栏： 0.1.5 移除了详情列并引入右侧栏。手机宽度下本插件把该列（[data-rightbar-col]）停靠为底部抽屉，点击官方右侧栏按钮时它会覆盖在对话之上，而不是挤压对话列。设置与抽屉功能现在已完全可用。

兼容性

- 声明目标：DSH 0.1.5-rc.2（package.json 的 dshTarget）；此前声明为 0.1.3-alpha.2。
- 0.1.5 重构了 AppFrame：详情列被移除，子元素改为 sidebar / center / rightbar / overlay。只有右栏列带 data 属性（[data-rightbar-col]，折叠/全屏/即时态由 frame 上的 data-rightbar-collapsed / data-rightbar-fullscreen / data-rightbar-instant 记录）；中栏没有 data 属性，故用其 CSS-module 后缀 [class="_centerCol"] 匹配。旧的位置选择器（:nth-child(2) / *:nth-child(3)）与 data-details-collapsed 标记均已不存在。
- 上游移除了 ctx.layout.closeDetails()，对应调用已删除；ctx.slots、ctx.layout.toggleSidebar、ctx.timeout、ctx.effect 已在本机 0.1.5-rc.2 运行时重新核实在位。
- 视觉行为仍需在本版本上做手机宽度 E2E 复核。

安装

纯 ESM，无构建步骤，无安装脚本——安装时不执行任何代码。

dsh plugin --profile web add github:raomaiping-hash/dsh-client-ui-mobile
锁定 commit 以便复现：
dsh plugin --profile web add github:raomaiping-hash/dsh-client-ui-mobile#

然后重启 DSH Web 进程，在手机宽度视口（或将浏览器缩到 ≤820px）打开 GUI。

手动 / tarball

dsh plugin --profile web add ./dsh-client-ui-mobile-0.1.0.tgz # 来自 pnpm pack

卸载

dsh plugin --profile web remove dsh-client-ui-mobile

然后重启 DSH。

工作原理

- host 半部（index.js）是空的 apply()——只为让 loader 挂载本包。
- 浏览器半部（client.js）通过 package.json 的 dsh.client（exports["./client"]）加载。它注入一个 标签，并把一个 MobileChrome 组件注册到 shell.overlay 插槽（悬浮入口 + 遮罩），再把一张小卡片注册到 settings.general.item（"已安装"提示）。
- 全部规则限定在 @media (max-width: 820px)；桌面布局不受影响。

威胁模型与范围

- 这是纯 UI 插件：无 host 路由、无文件访问、无网络、无设置持久化。它读取 ctx.layout（侧栏/详情开关）与 ctx.slots；只写入 DOM 节点和一个 标签，停止/更新时全部拆除。
- 受限执行环境不是安全边界；只安装可信来源的插件。锁定 commit hash 以便复现。

开发

git clone https://github.com/raomaiping-hash/dsh-client-ui-mobile
cd dsh-client-ui-mobile
node --check client.js # 语法
node tests/smoke.mjs # 打包完整性

由于本插件是由 DSH client-module host 直接服务的纯 JS，在已安装 profile 里编辑 client.js 并刷新页面即可通过 client-HMR 轮询生效——无需重新构建。

许可证

MIT © raomaiping-hash