移动端界面适配 ook826092-cloud/dsh-mobile-css

dsh-mobile-css
Awesome DeepSeek Harness license stars awesome · DSH plugin

DeepSeek Harness（DSH）Web UI 移动端适配插件 —— 让你的 DSH 在手机上真正好用起来！

纯 CSS 注入 + 两个轻量辅助脚本，零依赖、零源码修改、随时可卸载。
通过官方 WebServer.tapIndex() 钩子注入，桌面端完全不受影响。

✨ 特色功能

📱 界面整体优化
- 紧凑字号体系：针对手机屏幕调整字体大小层级，信息密度更高、一屏装更多内容，同时保证可读性
- 移动端字体栈：优先使用手机系统的优质字体（小米 MiSans / 鸿蒙 HarmonyOS Sans / Roboto 等），观感更自然
- 安全触控目标：独立控件 ≥44px，不再误触；输入框防安卓聚焦自动缩放

🖥️ 输入区（Composer）
- 输入卡全宽贴边：充分利用屏幕宽度
- 光标对齐修复：透明输入层与镜像文字层字号严格一致，光标不再错位
- 模型名智能隐藏：只显示 v 形箭头，点击仍可切换模型，不再挤占权限开关
- 发送按钮贴右：按钮永远停在右下角

🗂️ 侧边栏抽屉式
- 展开时覆盖主界面（带遮罩 + 阴影），主界面不再被挤压变形
- 点击遮罩即可关闭，交互跟手机 App 一致
- 收起时保留小图标条（rail）

⚙️ 设置页两页式
- 手机标准交互：全屏菜单页 → 点击选项跳转全屏内容页 → ☰ 返回
- 标题与按钮同级布局、顶部留白紧凑
- 长标签自动换行、表单/表格/图片防溢出

💬 消息区
- 用户消息气泡占满整行，不再又高又窄
- 消息底部操作条（复制/点赞/分支/统计）换行完整显示，统计单行紧凑
- 工具调用摘要允许换行，不再被省略号截断

📊 统计行
- 只保留有用信息，固定两行（耗时+速度 / 缓存+Token），行数不随内容跳变

📋 Markdown 表格
- 长单元格内容（如工具名）自动换行，不再盖住相邻列

📦 安装教程

方式一：从 GitHub 一键安装（推荐）

dsh plugin --profile web add github:ook826092-cloud/dsh-mobile-css

方式二：从 npm 安装

dsh plugin --profile web add dsh-mobile-css

方式三：手动 patch（不经过包管理器）

将以下内容加入你的 profile patch（~/.dsh/profiles/web/cordis.patch.yml）：

- insert:
- id: dsh-mobile-css
name: "dsh-mobile-css"

然后安装依赖并启动：

cd ~/.dsh/profiles/web
pnpm add dsh-mobile-css
dsh web

安装后

1. 重启 dsh web
2. 浏览器硬刷新（清除缓存或隐私窗口）
3. 打开 DSH Web UI，在手机上感受移动端适配效果

卸载

删除 patch 中的 dsh-mobile-css 条目，重启 dsh web 即可完全移除。插件只注入 CSS 和两个事件监听脚本，不留任何残留。

📸 实机效果

| 主对话界面 | 抽屉式侧边栏 |
| 设置菜单 | 设置页面 |

截图来自 Android 真机实拍。

🛡️ 兼容性与通用性

- 触发条件：pointer: coarse（触屏）或视口 ≤1024px —— 适用于几乎所有现代 Android / iOS 手机，桌面端（鼠标 + 宽屏）完全不受影响
- 不依赖具体机型：不写死任何设备型号、分辨率、像素密度；所有尺寸通过媒体查询和相对单位自适应
- 浏览器要求：现代 Chrome / 系统浏览器（基于 Chromium 的安卓浏览器均支持；:has() 选择器需要 Chrome 105+，安卓手机浏览器均为 Chromium 内核，均满足）
- 前端版本：插件按 DSH Web 前端的 CSS Modules 类名选择器编写；DSH 升级后如个别选择器失效，复查对应类名即可（这是所有 CSS 类插件共有的特性，非插件缺陷）
- 安全：纯 CSS + 两个事件监听脚本（遮罩关闭抽屉、设置导航收起），无网络请求、无凭证访问、无文件系统操作

📜 协议

MIT License