dsh-bottom-dock:把 DSH 官方右侧 dock 搬到底部

前言

在 DSH Web 里,终端、文件树、文档预览等能力通常集中在官方右侧栏 dock 里。习惯「上方对话、下方工具」布局的开发者,需要频繁把视线在左右之间切换;若再希望对话区尽量占满宽度,右侧占一列也会挤占横向空间。社区插件 dsh-bottom-dock(维护者 rsdgnchen)的做法是:不另做一套终端或预览,而是把同一套官方 dock整体重定位到底部,用仿 iOS 的上滑横杠唤出,并支持拖拽调高。本文介绍其定位、依赖的官方钩子、安装方式与使用注意。

这是什么

dsh-bottom-dock(npm 包名 @rsdgnchen/dsh-bottom-dock,当前资料中版本 0.1.0)是 DSH 的 Web 客户端插件,分类为客户端侧注入。它不改官方业务代码:面板仍由官方组件渲染、官方数据流驱动;插件只通过注入 CSS 与少量 UI,改 dock 的定位与网格,并把「从右侧滑入」改成「从下方升起」。开合仍走公开 API:ctx.sidebarRight.isExpanded() / toggleExpanded()。

探测不到官方 DOM 结构时,插件完全惰性——不注入样式、不渲染额外节点,仅把原因上报 Host 诊断端点;最坏情况是插件未生效,而不是破坏界面。

核心功能

下面介绍 README 中已说明、且与实现要点一致的能力。

整体搬家,而非双轨并存

官方右侧栏是一个面板(终端 / 文件树 / 文档预览 / 标签 / 引导等同屏切换),同一时刻只能在一个位置。本插件选择整体搬家:官方 dock 连同全部标签与按钮落到页面下方,形成「上方对话 + 下方一切」的主界面。README 明确说明:若要与「底部终端 + 右侧预览」并存,需要另一套终端(例如基于 ctx.webTerminals 自渲染),与本插件设计取舍不同。

交互与布局

  • 底部提供仿 iOS 上滑横杠,可唤出 dock;可拖拽调高、轻点收起。
  • 收起/展开动画使用 translateY(100%) ↔ 无位移,并沿用官方 visibility 延迟,避免收起瞬间闪没。
  • 展开时对话区 padding-bottom 为 dock 高度加拖拽条 8px;收起时为 8px;官方全屏形态时让位,padding 为 0。
  • 官方全屏面板(data-sidebar-right-panel="fullscreen")完全让位,不套本插件规则。

依赖的官方 data-* 契约

插件只依赖 README 列出的稳定钩子,不用哈希类名:

钩子 用途
[data-shell-overlay] 挂载插件 UI 的层(shell.overlay 槽)
[data-rightbar-col] 官方右侧栏列;健康检查锚点,找不到则整体不介入
[data-sidebar-right-panel="push"] dock 面板,重定位到底部
[data-sidebar-right-panel="fullscreen"] 官方全屏形态,插件不干预
[data-sidebar-right-open] 展开态,驱动下方升起动画与 UI 切换

安全与诊断

浏览器侧探测失败或开合失败时,会向 POST /__rsdgnchen-bottomdock/error 上报;Host 侧追加到环境变量 $RSDGNCHEN_BOTTOMDOCK_ERROR_LOG 指向的文件(默认 os.tmpdir()/rsdgnchen-bottomdock-errors.log)。

安装与启用

插件以当前 dsh 进程权限运行;安装前建议自行查看 GitHub 仓库 源码与 MIT 许可证。Node 引擎要求为 >=20(来自 package.json)。

从 GitHub 安装(推荐)

仓库已标注 GitHub dsh-plugin 主题。在 Host 上执行:

dsh plugin --profile web add github:rsdgnchen/dsh-bottom-dock
pm2 restart dsh        # 新增插件行需要重启(Host 半 + 客户端 boot 图都在启动时组装)

本地源码安装(开发/调试)

dsh plugin --profile web add file:$HOME/dsh/plugins/dsh-bottom-dock
pm2 restart dsh

经过上面的步骤,Web 客户端 boot 图会带上本插件的 Cordis patch 与 client 注入(依赖 @deepseek-ai/dsh-client-runtime、dsh-client-ui-layout、dsh-client-ui-sidebar-right、dsh-api-session-controller 等,见 package.json)。

典型用法

本插件没有单独的配置文件字段;生效后使用方式与官方右侧 dock 一致,只是入口与位置改为底部横杠:

  1. 在 Web 界面通过底部横杠上滑或点击唤出 dock(内部仍调用 toggleExpanded())。
  2. 在 dock 内切换终端、文件树、文档预览等官方标签页,行为与右侧栏相同。
  3. 拖拽横杠调整 dock 高度;轻点收起。
  4. 若需官方 dock 全屏,仍走官方全屏形态;插件对该形态不做布局覆盖。

适用场景与注意

适合谁:希望在 DSH Web 中保持官方 dock 全部能力,但偏好底部布局、希望对话区横向尽量满宽的开发者。

务必注意:

  • 与 @rsdgnchen/dsh-terminal(自带底部终端)功能重叠。两者同时启用会出现两根底部横杠。试用本插件时,README 建议在 profile 的 cordis.patch.yml 里临时关闭旧终端插件:
- id: dsh-rsdgnchen-terminal
  disabled: true

回退时去掉上述配置并重启即可。

  • DSH 生态理念是「一切皆插件」;社区目录 SkillHub 插件页 为独立站点,与 DeepSeek / 幻方无官方从属关系,安装来源以你信任的仓库与命令为准。

结尾

dsh-bottom-dock 用官方 data-* 钩子与 sidebar API,把右侧 dock 整体迁到底部,并在结构不匹配时保持惰性,适合作为 Web 端布局偏好型客户端插件试用。进一步了解可访问 SkillHub 目录页 与 GitHub:rsdgnchen/dsh-bottom-dock。

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

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

小夜