dsh-mobile-adapt:把 DSH Web 调成适合手指用的手机端交互层

前言

在手机上打开 DSH Web,常见问题是界面仍按桌面思路排:侧栏占满一列、按钮偏小、软键盘挡住输入框、正文字号偏小。自己改 CSS 或换壳 App 成本高,也不一定跟得上 DSH 主界面迭代。

下面介绍社区插件 dsh-mobile-adapt(维护者 rsbsnv,分类:客户端)。它在窄屏下注入一层移动端交互与可读性适配,不改顶栏、不强行放大其他插件控件,目标是和多数插件并存。DSH 生态里「一切皆插件」;插件目录在 SkillHub,与 DeepSeek / 幻方无官方从属关系。

这是什么

dsh-mobile-adapt 是面向 DSH Web 的客户端插件:侧栏抽屉化、滑动手势、触控命中区、软键盘避让、正文字号下限等。一句话定位:Mobile interaction & readability layer for DSH Web——把电脑版界面调成适合手指用的样子。

当前 package 版本为 1.10.0(以仓库 package.json 为准),许可证 MIT,要求 Node >= 22、DSH >= 0.2.0;README 写明支持 DSH 0.2 及以后版本,未写死上限。GitHub 仓库:rsbsnv/dsh-mobile-adapt。

核心功能

以下能力均来自项目 README,仅在视口宽度 ≤ 767px 时生效;电脑上不会改变任何布局。

侧栏抽屉与宽度

侧栏改为抽屉式:

  1. 右滑打开,左滑收起,跟手滑动;
  2. 宽度可调:点按钮在 60% / 75% / 90% / 满屏 几档间切换,按住左右拖可连续调节;
  3. 用户调过的宽度会记住,下次打开保持。

手势与返回键

  • 右滑:打开侧栏;
  • 左滑(侧栏已打开):收起侧栏;
  • 系统返回键:先关弹窗,再关侧栏,降低误退 App 的概率。

会话列表

  • 标题放大到 16px,长标题折成两行,避免单行截断;
  • 行内时间(如「6 分钟」「1 天」)保留并放大;
  • 行末只保留一个 ⋯ 菜单,归档、置顶、重命名等收进菜单;
  • 操作按钮 40×40,行高随之增加;
  • 拖动排序保持原行为:按住标题拖动,插件不拦截该手势。

触控、键盘与字号

  • 按钮与菜单项放大,点击有反馈,并去掉「点完需等待才能再点」的旧问题;
  • 软键盘弹出时界面整体上移,输入框保持可见;
  • 正文最小 15px,输入框固定 16px;若用户已自行调大字号,插件不覆盖,只保证不低于 15px。

横向滚动

代码块、表格可单独左右滑动,避免把整个页面横向拖歪。

兼容性说明

README 说明:不向顶栏加按钮,也不强行改其他插件控件尺寸;与大多数插件可一起使用。

安装与启用

安装命令以仓库 README 为准,不要用插件名自行拼接 dsh plugin add:

bash install.sh              # 安装
bash install.sh --uninstall  # 卸载

装完后刷新页面即可生效,无需重启 DSH 进程。

插件以当前 DSH 进程的权限运行;安装前请自行查看仓库源码与 MIT 许可证,确认符合你的安全与合规要求。

典型用法与可调参数

默认安装后无需额外配置。若要改阈值或字号档位,编辑仓库内 lib/client.js 中下列常量,改完重新执行 bash install.sh 并刷新页面:

改什么 找这个
多大的屏幕才算手机 PHONE_QUERY
正文最小字号 MIN_CONTENT_PX
宽度有哪几档 WIDTH_STEPS
默认宽度 DEFAULT_RATIO

适用场景与注意

适合谁: 经常在手机浏览器或 WebView 里用 DSH Web 的开发者或使用者,希望侧栏、列表、输入区在窄屏下更易点、更易读,又不想 fork 整套前端。

注意:

  1. 仅窄屏生效,桌面端行为不变;
  2. 依赖 cordis.patch.yml 注入客户端 bundle(见 package.json 的 dsh.bundle.patch),升级 DSH 后若界面结构大变,需关注插件是否仍兼容;
  3. 社区目录星标等元数据以目录页为准(撰写时 GitHub 星标为 0),选用插件时请自行评估维护活跃度。

结尾

dsh-mobile-adapt 在 DSH Web 上补了一层移动端交互与可读性:抽屉侧栏、手势、大命中区、键盘避让和字号下限,安装步骤简单,刷新即生效。需要细节或提 Issue 可访问目录页 SkillHub - dsh-mobile-adapt 与源码 GitHub - rsbsnv/dsh-mobile-adapt。

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

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

Xiaoye