用 dsh-client-ui-mobile-adapt 把 DeepSeek Harness Web 界面搬上手机

前言

DeepSeek Harness(dsh)是 DeepSeek AI 开源的智能体运行时,架构口号是「一切皆插件」:模型适配、工具、持久化、Agent 循环,以及 Web UI 本身,都以插件形式挂在 Cordis 上。官方仓库给出的最快体验方式是安装 Node.js 之后执行:

npx @deepseek-ai/dsh web

服务默认监听 http://127.0.0.1:3080。桌面浏览器里,这套界面是三栏壳:左侧会话/文件,中间对话,右侧详情。用鼠标拖拽还算顺手;一旦把同一个页面开到手机上,侧边栏、设置弹层、轨迹表格和底部统计就会挤在一起,输入工具行也容易折成两排。

社区插件 dsh-client-ui-mobile-adapt 针对的就是这件事。维护者 Hotsteel2901 在仓库里写得很直接:为在 Android Termux 里写代码的开发者,把三栏桌面布局收成单列。它不改 dsh 核心,只在窄屏视口下改客户端布局。

写之前有两点需要先说清楚。第一,DeepSeek Harness 目前仍是开发者预览,官方 README 写明会有破坏性变更。第二,插件目录 deepseek-harness-plugin.com 是独立的社区站点,和 DeepSeek / 幻方没有官方从属关系,不能把它当成官方应用商店。

这是什么

dsh-client-ui-mobile-adapt 是一款界面增强类的客户端插件,由 Hotsteel2901 维护,许可证为 MIT,当前仓库版本号是 0.1.0。目录页与 GitHub 仓库均显示 8 个 star。

它解决的问题很具体:默认 Web GUI 按桌面三栏设计,手机上不好用。插件在 max-width: 768px 时把中栏拉满全宽,侧边栏改成左侧抽屉,输入工具强制单行,设置和轨迹详情改成可滚动的全屏/悬浮面板。视口大于这个宽度时,桌面布局保持原样。

package.json 可以看到,它按官方客户端插件格式声明了 dsh.client(平台为 web),同时带有 dsh.bundle.patch,因此既可以当普通客户端插件注入,也可以作为 profile 的组合包一层挂上去。入口是 lib/index.js(host 侧几乎是空的),真正干活的是浏览器端的 lib/client.js

peer 依赖钉在 DeepSeek Harness 0.1.0-rc.6 这一代客户端包上,包括 @deepseek-ai/dsh-client-runtimedsh-client-ui-slotsdsh-client-ui-layoutdsh-client-locale 以及 @deepseek-ai/cordis。README 也写明:CSS 类名对应的是 0.1.0-rc.6 前端构建产物里的 CSS Modules 哈希。dsh 升级、前端重新构建之后,这些类名可能对不上,需要重新核对。

核心功能

仓库 README 用一张表把改动拆开了,对照 lib/client.js 里注入的样式和槽位,可以确认下面这些能力是真实存在的。

1、整体布局。手机宽度下,三栏 Grid 被写成 0 minmax(0,1fr) 0,中间会话区占满全宽;右侧详情列和拖拽手柄直接隐藏。侧边栏脱离文档流,改成 fixed 的左侧抽屉,宽度大约是 min(320px, 86vw),用 left 位移而不是 transform 做显隐,避免抽屉内部的 fixed 面板被裁切。

2、汉堡按钮与遮罩。插件往 shell.overlay 槽位注入一个左上角浮动按钮(带安全区 env(safe-area-inset-*)),点一下调用 layout.toggleSidebar()。抽屉打开时有一层半透明遮罩,点遮罩即可关闭。桌面端这两块是 display: none

3、会话头部和输入行。头部给汉堡按钮留出左边距,标题和操作允许换行;「对话 / 轨迹」标签按屏幕中线居中。输入工具行(权限、计划、附加、模型、上下文、发送)强制单行,触发器宽度限制在 112px。模型选择、上下文详情、命令菜单的最大宽度是 calc(100vw - 16px),避免弹出层跑出屏幕。

4、设置与插件面板。设置面板在手机上改成全屏:顶部导航变成可横滑的单行,内容区自己滚动,并带关闭按钮。运行中的插件列表面板改成 fixed 悬浮,底部抬高约 130px,避免挡住输入区的触发按钮。

5、轨迹页。表格拉满全宽;详情不再跟表格并排,而是变成底部附近的固定高度悬浮窗(min(52vh, 460px)),内部可滚动。

6、底部统计胶囊。插件替换了会话输入区 conversation.composer.dock 里的 stats 槽位。没有数据时不渲染;有轮次或 Token 时显示一颗胶囊,摘要包括轮数/步数、缓存命中率和输入/输出 Token。点一下展开完整面板,可以看到 LLM 耗时、工具调用耗时、平均首 Token 延迟、解码速度、缓存读写拆分等。文案带中英两套字典,走插件自己的 mobileAdapt 语言包。

7、视口与安全区html / body 使用 100dvh,输入区底部补 safe-area-inset-bottom。README 把这一项标成 iOS 适配;源码里这些规则挂在 max-width: 768px 媒体查询下,Android 窄屏同样会生效。另外,源码对 769px–1024px 的平板宽度只压缩了会话头部留白,并不会启用整套单列改造。

它不做消息编辑、多模型搜索、PWA 或局域网暴露,只改布局和统计展示。如果需要那些能力,要另找对应插件,不要指望这一包全包。

安装与启用

社区目录页给出的安装命令原文是:

dsh plugin add github:Hotsteel2901/dsh-client-ui-mobile-adapt

如需可复现安装,目录页建议固定 commit:

dsh plugin add github:Hotsteel2901/dsh-client-ui-mobile-adapt#<commit>

官方文档里,dsh plugin 实际是在某个 profile 目录里转发给 pnpm。Web UI 对应的常见写法是带上 --profile,例如装进默认的 web profile:

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

维护者 README 还提供了另外两条路,更贴近它「既是客户端插件、又是 bundle」的形态。

方式一:单独建一个 webmobile profile。$DSH_HOME/profiles/webmobile/ 放一份 package.json,把本包写进 dependencies,并在 dsh.profile.bundles 里按顺序挂上 @deepseek-ai/dsh-base@deepseek-ai/dsh-web-appdsh-client-ui-mobile-adapt。然后:

cd ~/.dsh/profiles/webmobile
npm install
dsh --profile webmobile

依赖地址仓库推荐用 GitHub archive 的 tarball,而不是 github: 简写:

https://github.com/Hotsteel2901/dsh-client-ui-mobile-adapt/archive/refs/heads/main.tar.gz

方式二:装进已有 profile。 README 给出的命令是:

dsh plugin --profile web <profile名> add https://github.com/Hotsteel2901/dsh-client-ui-mobile-adapt/archive/refs/heads/main.tar.gz

也可以在该 profile 的 cordis.patch.yml 里手动插入一行(与仓库自带的 patch 一致):

- insert:
    - id: ui-mobile-adapt
      name: 'dsh-client-ui-mobile-adapt'

改完后重启对应的 dsh 进程。仓库写的是「重启即生效」。

这里有一个安装层面的冲突,需要按来源分开看。目录页推广 github:Hotsteel2901/dsh-client-ui-mobile-adapt;维护者 README 则提醒:较新的 npm 默认会拦截 git://github:用户名/仓库 以及部分远程 tarball(EALLOWGIT / EALLOWREMOTE),所以它建议用上面的 .../archive/refs/heads/main.tar.gz。官方《打包与安装插件》文档另外说明:从 git 安装时,若包带 prepare 构建脚本,pnpm 10 及以上可能要求把包名写入 profile 的 pnpm-workspace.yamlallowBuilds。本仓库已经带上构建好的 lib/,没有把构建步骤作为使用前提。实际安装时以本机包管理器报错为准,优先采用 README 的 tarball 形式通常更省事。

更新到最新代码时,README 给出的清理方式是:

npm cache clean --force
rm -rf node_modules/dsh-client-ui-mobile-adapt
npm install

装好之后怎么用

插件没有额外的斜杠命令或配置项。用法就是把 Web UI 开在窄屏浏览器里。

1、用 npx @deepseek-ai/dsh webdsh --profile webmobile 启动服务。官方默认地址仍是本机 http://127.0.0.1:3080。若你在 Termux 里跑 dsh、再用同一台手机的浏览器访问,走的就是这条回环地址;从另一台设备访问,需要自己处理网络暴露,这超出本插件的范围,官方 Web UI 默认也只绑在 127.0.0.1。

2、用宽度不超过 768px 的视口打开页面。可以把手机浏览器转到竖屏,或在桌面开发者工具里把设备模式调到常见手机宽度。大于 768px 时,你应当看到和未安装插件时几乎一样的桌面三栏。

3、点左上角汉堡按钮打开会话列表等侧栏内容,点遮罩关闭。进入设置后,面板应铺满屏幕,顶部类目可以左右滑,内容可以上下滚。切到轨迹页时,点开一条记录,详情会以底部悬浮窗出现,而不是右侧窄列。

4、会话产生轮次或 Token 消耗后,输入框下方会出现统计胶囊。点开可以看到轮数、步数、耗时和 Token 明细;再点 × 关闭。

仓库没有提供截图或交互录屏,以上步骤对应的是 README 功能表和客户端源码里的槽位,而不是第三方使用报告。

适用场景与注意事项

适合这几类用法:在 Android Termux 里跑 dsh,再用手机浏览器看 Web UI;电脑上的 dsh 只给自己用,偶尔用手机点开本机页面做确认;已经能接受默认 Web GUI,只是嫌窄屏三栏难用,不想换一套完全不同的皮肤或 TUI。

不适合把它当成「手机版 dsh」。它不提供独立 App,不改 Agent 权限模型,也不把服务从 127.0.0.1 改成局域网可访问。平板宽度(源码里是 769px 到 1024px)几乎还是桌面窄栏,只有头部间距被压缩。

使用前还有几条硬约束。

插件以当前 dsh 进程的权限运行,安装时还可能执行代码。目录页和官方插件文档都要求先看源代码和许可证;只从自己核过的仓库安装,并用 commit 哈希钉死版本,避免 main 分支下一次推送悄悄改掉你正在跑的内容。本包是 MIT,源码量不大,lib/client.js 主要是 CSS 与两个槽位组件,检查成本相对低,但仍然应该自己过一遍。

它绑定的是 0.1.0-rc.6 的前端类名。DeepSeek Harness 还在快速迭代,官方明确会有不兼容变更。升级 dsh 之后如果手机布局突然失效,优先怀疑 CSS Modules 哈希变了,而不是手机浏览器坏了。

社区里还有其他移动端适配插件,实现方式和额外功能并不相同。本文只根据目录页和这个仓库的 README / 源码介绍 dsh-client-ui-mobile-adapt,不对其它插件做未核实的对比。

小结

dsh-client-ui-mobile-adapt 做的事情很克制:在 768px 以下把 DeepSeek Harness 的 Web GUI 收成单列,侧边栏变抽屉,设置和轨迹可滚动,统计收成一颗能点开的胶囊;桌面端不动。维护者是 Hotsteel2901,MIT 许可,当前版本 0.1.0,面向在 Termux 或手机浏览器里使用 dsh 的人。

目录页:https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-client-ui-mobile-adapt/

GitHub:https://github.com/Hotsteel2901/dsh-client-ui-mobile-adapt

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

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

小夜