dsh-client-ui-mobile:把 DSH Web GUI 做成可用的手机界面

前言

DeepSeek Harness(DSH)的 Web 外壳默认按桌面设计:三栏布局、拖拽调宽、悬停提示和 8px 的 resize 热区。在手机上页面仍能打开,但对话区会被挤在 56px 侧栏旁边,输入框还容易和软键盘抢空间。改 shell、fork 或本地构建一套移动端并不划算。

dsh-client-ui-mobile 是社区维护的标准 DSH 客户端插件,在同一套 URL 上注入手机布局:折叠侧栏为抽屉、底部导航、以及可手动切换的 Desktop/Mobile 模式。维护者为 MARYCOMPLEX,仓库在 GitHub,目录页见 SkillHub。README 写明针对 @deepseek-ai/dsh 0.2.1-rc.2 构建与测试;package.json 中 engines.dsh 为 >=0.2.0 <0.3.0。这是社区插件,与 DeepSeek 无隶属关系。

这是什么

一句话:在视口宽度 ≤ 768px 时,把 DSH Web GUI 从「能渲染」变成「能操作」的手机界面;更宽的视口保持原样不动。

插件通过文档化的扩展点工作(全局样式、shell.bottom 插槽、ctx.layout),不修改 shell 源码,也没有独立构建步骤。发行包以 lib/client.js 作为浏览器端入口。

核心功能

下面行为均仅在 ≤ 768px 生效;桌面宽度不受影响。

区域 行为
框架 三栏收成一栏,中间对话区占满宽度
侧栏 变为遮罩抽屉(min(86vw, 300px));点会话、面板或遮罩可关闭
底栏 高 56px:Chat / Sessions / Plugins(未注册 Plugins 面板时隐藏该项)/ Desktop
桌面拖拽条 8px col-resize 把手隐藏,避免误触
右侧面板 强制全屏,不再占一列
输入区 输入框 16px 字号,减轻 iOS 聚焦缩放;通过 visualViewport 随软键盘收缩框架
布局 使用 100dvh 与 env(safe-area-inset-*) 适配刘海与手势条
宽内容 pre、table 在各自容器内横向滚动,不撑破页面
设置 设置弹窗变为全屏 sheet;原 188px 侧导航变为可横向滚动的标签条

自适应布局默认开启。底栏最右侧 Desktop 可在当前浏览器关闭手机布局;关闭后底栏消失,右下角保留 Mobile 药丸按钮可再打开。选择保存在 localStorage 键 dsh-client-ui-mobile.enabled("1" / "0")。也可用 URL:?dshm=off、?dshm=on 强制状态并记住。在 Settings → Plugins 禁用插件或移除 loader 行后,界面与未装插件时一致。

安装与启用

推荐以 bundle 方式安装到 web profile:

dsh plugin --profile web add github:MARYCOMPLEX/dsh-client-ui-mobile

安装后打开 Settings → Plugins,启用 mobile-ui bundle。启用 bundle 会追加其 patch 层并插入 loader 行。

需要固定版本时可钉住 release:

dsh plugin --profile web add "github:MARYCOMPLEX/dsh-client-ui-mobile#v0.1.0"

若 profile 关闭了配置 HMR,安装或变更后需重启 dsh web。

不想用 bundle 时,可先 dsh plugin --profile <name> add … 安装包,再在 profile 的 cordis.patch.yml 自行插入 loader 行:

# <profile>/cordis.patch.yml
- insert:
    - id: mobile-ui
      name: "dsh-client-ui-mobile"

无论哪种方式,包必须落在该 profile 的 node_modules 中,loader 才能解析 dsh-client-ui-mobile。

典型用法

  1. 在开发机或服务器上按上文命令为 web profile 安装并启用 mobile-ui。
  2. 用手机浏览器或窄视口(≤ 768px)打开同一 DSH Web 地址,用底栏在 Chat、Sessions、Plugins 间切换;侧栏从抽屉进入。
  3. 需要临时查看桌面三栏布局时,点底栏 Desktop;要恢复手机布局点右下角 Mobile,或访问带 ?dshm=on 的 URL。
  4. 若自适应布局导致某页难以操作,可用 ?dshm=off 退出并记住状态。

实现要点(给插件作者)

客户端插件与 shell 同浏览器运行,本插件大致做三件事:

  1. 全局样式 — 通过 ctx.effect 向 document.head 注入 <style>,卸载时移除;规则包在媒体查询内并作用在插件标记的 frame 上,避免影响桌面。
  2. shell.bottom — 底栏与 Mobile 药丸注册为 React 组件,进入框架底行网格,而不是浮在内容之上。
  3. ctx.layout — 底栏根据 panelInfo 高亮当前面板,并调用 toggleSidebar() / selectPanel() 导航。

因 shell 的 CSS Modules 类名按构建哈希,插件用 data-dshm-* 标记三栏,并显式钉住 grid 列,避免抽屉 position: fixed 后中间列滑到 0 宽轨道导致黑屏(README 中有对应 CSS 与 smoke 测试说明)。

适用场景与注意

适合经常在手机上查看 DSH 对话、会话列表或插件面板,又不想维护 fork 的开发者。也适合在平板窄窗或浏览器 DevTools 移动模式下验收 Web GUI。

使用前请注意:

  • 插件在当前 DSH Web 进程的浏览器上下文中运行,样式与导航逻辑来自第三方源码;安装前宜浏览 仓库 与 MIT 许可证。
  • 面向 DSH 0.2.x;小版本内 slot 与 ctx.layout 相对稳定,大版本仍可能变动。
  • 插件可改样式、插槽与布局状态,不能改 shell 组件内部;Composer 的发送键、手势等仍以官方为准。
  • Android Chrome 有测试记录;iOS Safari(安全区、visualViewport 键盘 inset)已实现但未在真机验证,问题可到 GitHub Issues 反馈。
  • 768px 为插件自有断点;与 shell 右栏自动全屏的边界对齐时,插件额外做了全屏 CSS 兜底。

DSH 生态强调「一切皆插件」;SkillHub 等目录是社区站点,不是 DeepSeek 或幻方官方应用商店。

结尾

dsh-client-ui-mobile 用标准客户端插件方式,在窄视口下重排 DSH Web 三栏、抽屉侧栏与底栏导航,并保留 Desktop/Mobile 手动切换与 URL 逃生参数。安装命令以 README 为准;更多细节与开发说明见 GitHub 仓库 与 SkillHub 目录页。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye