移动端布局修复 AcidGr/dsh-web-mobile-fix

dsh-web-mobile-fix

DeepSeek Harness Web UI 的移动端布局修复插件。

纯客户端 CSS 覆盖层，在窄屏（视口 ≤700px）下修复最影响使用的移动端问题，完全不改动产品源码：

- 设置面板改为全屏纵向布局，不再被挤成桌面布局
- 侧边栏打开时悬浮显示，不再挤压对话区
- 设置页导航单行自适应排版
- 输入框操作栏单行自适应排版，防止窄屏下按钮折行分层

工作原理

插件带一个浏览器端（exports["./client"]，通过 dsh.client.platform: "web" 声明），由 client-modules 扫描器发现并随启动清单加载。它注入一个 标签，内容是针对产品稳定 data-slot 属性的 @media (max-width: 700px) 覆盖；插件卸载时标签自动移除——完全可逆。

兼容性

- 需要 Harness Web profile（dsh --profile web），0.1.x 系列均可
- 选择器针对产品槽位契约，同版本线内稳定；产品大改版后可能需要小幅调整

安装

方式一：直接发给你的 DSH（最省心 🤖）

直接在 DSH 网页对话框中把本仓库链接发给 AI，并附上指令： “帮我安装这个插件：https://github.com/AcidGr/dsh-web-mobile-fix”

DSH Agent 会自动在后台执行安装命令并完成配置。

方式二：CLI 命令行安装（推荐）

直接从 npm 安装：

dsh plugin --profile web add dsh-web-mobile-fix

（本地开发或不想走 npm 时，也支持直接使用 GitHub 仓库地址：

dsh plugin --profile web add github:AcidGr/dsh-web-mobile-fix
）

安装完成后，刷新浏览器页面即可生效。

方式三：手动安装（离线 / 无 pnpm）

PROFILE="$DSH_HOME/profiles/web" # 按实际修改 DSH_HOME 和 profile 名
mkdir -p "$PROFILE/plugins" "$PROFILE/node_modules/@dsh-profile"
cp -r dsh-web-mobile-fix "$PROFILE/plugins/mobile-fix"
ln -sfn ../../plugins/mobile-fix "$PROFILE/node_modules/@dsh-profile/mobile-fix"
在 $PROFILE/cordis.patch.yml 追加：
- insert:
- id: mobile-fix
name: '@dsh-profile/mobile-fix'

验证

用手机或在电脑上将窗口缩至手机宽度（≤700px）打开 Web UI：
- 点击左上角鲸鱼图标展开侧边栏，将以浮层抽屉形式展开，不再挤压对话正文，点击右侧空白处自动收起；
- 输入框底部的操作按钮与发送按钮在同一行整齐对齐，不会折行分层；
- 设置面板以全屏纵向形式展示，顶部导航标签支持水平自适应滑动。

回滚

- bundle 安装：dsh plugin --profile web remove dsh-web-mobile-fix
- 手动安装：删掉 cordis.patch.yml 里的 mobile-fix insert 块（插件目录可留可删）

不修改任何产品源码，升级不覆盖、无残留。

许可证

MIT