dsh-layout-tweaks:DSH Web GUI 布局微调

前言

DSH Web GUI 的默认布局在会话头和侧栏上占用较多空间:会话名、工作模式和十几个操作按钮挤在同一行;左侧栏顶部的面板模块始终占据位置,并非每时每刻都需要。这些空间上的不便会影响操作效率。

dsh-layout-tweaks 用一个客户端插件处理这两处布局问题:把会话头拆成两行,让面板列表可一键折叠。

这是什么

dsh-layout-tweaks 是 DSH Web GUI 的布局微调插件,由维护者 TowardsDawn 开发。它默认提供两项功能:

  • 会话头上边栏拆成两行
  • 左侧栏面板列表一键折叠

该插件通过注入 CSS 实现布局调整,不修改任何其他插件的代码,不干预侧栏底部区域,免构建。

核心功能

① 会话头拆两行

默认开启。第 1 行显示会话名和工作模式;第 2 行显示撤销/恢复/快照/对话撤回/归档/标签备注/移动至工作区/复制链接等其余控件;页签行保持不变。

② 面板列表折叠

默认展开。侧栏顶部新增折叠头,点击可收起「插件 / 任务看板 / 技能中心 / SSH」,把空间让给工作区与会话列表。折叠状态记在浏览器 localStorage 中,键名为 dsh-layout-tweaks:v1。侧栏收起成 56px 轨道时折叠头自动隐藏。

安装与启用

方式一:用 dsh plugin 命令(推荐)

dsh plugin --profile web add "github:TowardsDawn/dsh-layout-tweaks"

该命令会把本包写进 profile 的 dsh.profile.bundles,并让 bundle 层读取本包的 cordis.patch.yml。

方式二:手动挂载

  1. 把本目录放到任意位置,例如 <DSH插件目录>/dsh-layout-tweaks;
  2. 编辑 <DSH_HOME>/profiles/web/package.json:
{
  "dependencies": {
    "dsh-layout-tweaks": "file:<本目录绝对路径>"
  },
  "dsh": {
    "profile": {
      "bundles": [
        // …其他插件…
        "dsh-layout-tweaks"
      ]
    }
  }
}
  1. 重启 dsh web。

本插件是纯客户端插件:lib/index.js 只是装配树里的挂载点,不注册服务、不读取会话。

注意:lib/client.js 是被宿主在启动时读入内存的(响应头带 immutable + 一年缓存),所以改动 lib/client.js 之后需要重启 dsh web 才会生效;日常的折叠开关不受影响,即时生效。

临时停用(不卸载)

编辑本包 cordis.patch.yml:

- insert:
    - id: dsh-layout-tweaks
      name: 'dsh-layout-tweaks'
      disabled: true

卸载

删掉 dsh.profile.bundles 里的那一行与对应依赖即可。插件在卸载时会自行移除注入样式、自建节点与 <html> 上的状态属性。

典型用法

关闭两行模式

需要关闭会话头两行模式时,在浏览器控制台执行:

const s = JSON.parse(localStorage.getItem('dsh-layout-tweaks:v1') || '{}')
s.headerTwoRows = false
localStorage.setItem('dsh-layout-tweaks:v1', JSON.stringify(s))
location.reload()

恢复默认

恢复默认(两行开启、面板展开):

localStorage.removeItem('dsh-layout-tweaks:v1'); location.reload()

适用场景与注意

适用场景

  • 需要在会话头和侧栏之间节省空间
  • 希望调整 DSH Web GUI 的布局以适应个人工作流
  • 需要快速切换面板列表的显示状态

注意事项

  • 插件依赖宿主 DOM 形态,DOM 结构变化可能导致失效
  • 需要浏览器支持 :has() 选择器(Chrome / Edge 105+、Firefox 121+、Safari 15.4+)
  • 不支持 :has() 时两行重排规则被 @supports 挡下,插件静默不生效;折叠功能仍可用
  • 插件以当前 dsh 进程权限运行,安装前应检查源码与许可证
  • 侧栏底部区域(上下文洞察 / 会话管理 / 检查更新 / 远程访问 / 今日消费 / 设置)的位置与顺序由宿主和其他插件决定,本插件不干预

短结尾

dsh-layout-tweaks 提供了会话头两行显示和面板列表折叠两项布局微调功能,通过纯渲染层实现,不影响其他插件。适合希望调整 DSH Web GUI 空间利用率的用户。通过官方目录或 GitHub 仓库可获取更多信息。

参考资料

  • 插件目录页:https://www.skillhub.cn/plugins/TowardsDawn/dsh-layout-tweaks
  • GitHub 仓库:https://github.com/TowardsDawn/dsh-layout-tweaks
羽毛球分组比赛记分
小程序二维码

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

小夜