dsh-mobile-remote-view:手机端查看 DSH 桌面

前言

DSH 的 Web GUI 专为桌面端设计。在手机上通过远程工具查看 DSH 时,横屏界面被压缩到竖屏中,正文过小且操作困难。dsh-mobile-remote-view 插件将整个界面逆时针旋转 90°,并将侧栏、对话页、右栏拆分为各自占满一屏的独立页面,以适应手机竖屏操作。

插件简介

  • 名称: dsh-mobile-remote-view
  • 作者: RonnyJung2021
  • 许可: MIT
  • 分类: 客户端插件

核心功能

该插件主要解决手机远程查看时的布局适配问题,具体能力包括:

  • 整页旋转 90°:将 DSH 桌面界面转为竖屏布局。
  • 一屏一页:对话页、侧栏页、右栏页各自占满一屏,通过页键切换。
  • 拇指尺寸:正文与输入框字号 12-27px(默认 19px),按钮与会话行高度 48px,确保手指可点击。
  • 控制条与滚动条:贴边设计,支持页面缩放与字号调整的浮窗操作。
  • 坐标层:保证菜单、提示等浮层在旋转后仍跟随触发器,不发生偏移。
  • 插件卡片配置:提供 7 个旋钮,可配置旋转方向、控制条位置与厚度、缩放、字号、自动进入模式及坐标层开关。
  • 自动进入模式:在插件卡片中开启后,打开 Web GUI 会自动进入手机远程模式。
  • 语言跟随:界面文案跟随 DSH 的语言设置。
  • 退出还原:点击退出后恢复桌面版布局,并清理注入的样式与属性。

安装与启用

插件需要通过脚本安装到 DSH 的 Web profile 中。

node scripts/install-profile.mjs

安装完成后,侧栏会出现「手机远程模式」入口,或通过插件卡片开启自动进入功能。安装后需要重启 DSH 引擎本身才能生效。

使用方法

  1. 进入模式:在侧栏顶部找到「手机远程模式」并点击。
  2. 查看与切换:页面旋转 90°,控制条与滚动条出现在左侧。点击页键可在对话页、侧栏页之间切换;打开右栏时会自动成为独立一页。
  3. 退出:点击控制条上的「退出」按钮,界面转回桌面版面。

配置说明

插件卡片提供 7 个配置项,配置写入 profile 后永久生效:

  • rotate:旋转方向(-90° 或 90°)。
  • barEdge:控制条位置(top, bottom, left, right)。
  • barSize:控制条厚度(40-120px)。
  • scale:页面整体缩放(0.6-2.5)。
  • contentFontSize:正文字号(12-27px)。
  • autoEnter:是否自动进入模式。
  • virtualizeCoordinates:是否启用坐标层(防止菜单偏移)。

注意事项与限制

  • iOS Safari 限制:由于浏览器限制,iOS Safari 不支持元素级全屏,全屏键可能不显示。
  • 软键盘:软键盘遮挡问题不在插件处理范围内,输入行为按浏览器原生方式处理。
  • 浮层偏移:Selection 或 Range 对象生成的浮层在旋转后会偏移 90°。
  • 会话判定:插件同时识别 data-session-id 和 data-row-key="session:…" 两种会话行标记。
  • 菜单偏移:如果关闭「换算坐标」开关,菜单可能会偏移 90°。
  • 卡片只读:如果在插件注入中未检测到旋钮,插件卡片将显示为只读状态。

总结

该插件通过旋转与分屏机制,将 DSH 桌面界面改造为适合手机竖屏操作的布局。它不改变 DSH 的核心逻辑,仅调整视图呈现,适合需要通过手机远程查看或管理 DSH 工作流的用户。

插件目录
GitHub 仓库

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

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

小夜