dsh-rightbar-quicknav:右侧栏标签的常驻竖排快捷导航

前言

DSH 的右侧栏承载了大量能力:Files、Git、Tasks、Terminal、Browser、Image Studio、Memory 等,全部收在标签条后面。想打开某个功能,得先点开「打开右侧栏」按钮,再在弹出的标签条里找到目标标签,至少两步。如果只是切一次标签,这个成本并不划算。

dsh-rightbar-quicknav 就是针对这一步的插件。它由 zuoyunlai 维护,分类为客户端插件,在社区目录中的星标数为 0。下面介绍它的能力、安装方式与使用边界。

它做什么

插件在宿主自己已有的「打开右侧栏」按钮正下方,挂一条常驻的竖排图标轨。收起状态只显示 3 个图标,需要时悬停即可展开全部标签:

1、收起时只显示 3 个图标,几乎是隐藏的,鼠标移上去才展开;
2、展开后列出当前可用的全部标签;
3、悬停某个图标时,出现一行标题气泡;
4、点击图标直接打开右侧栏并切到该标签,一次点击代替两步操作。

标签列表不是硬编码的,而是从宿主自身的 tab registry(sidebarRightTabs.guide())读取,因此任何注册了标签的插件都会自动出现在图标轨里。

安装与启用

通过插件管理器安装(推荐)的做法是:在 Plugins → Add 中指向该包,可以是 npm tarball 或本地目录,bundle patch 会把客户端一半接进 Web / Desktop profile。

手动安装的命令如下:

cd ~/.dsh/profiles/<your-profile>
pnpm add dsh-rightbar-quicknav

安装完成后必须完整重启 DSH。客户端模块在启动时组合,仅刷新页面不够。

运行要求写在 package.json 里:

  • DSH >= 0.2.1-rc.1,需要 sidebarRightTabs / sidebarRight 客户端服务;
  • React 由宿主提供,该插件自身没有运行时依赖,也没有构建步骤。

行为细节

插件的几何位置与交互方式如下表:

位置 视口右边缘,10px 间距;在宿主「打开右侧栏」按钮下方 50px
收起 3 个图标
展开 悬停触发,指针移开后延迟 200 ms 收起
气泡 单行、自适应宽度,空间不足时翻到另一侧
跳转 调用 sidebarRight.openTab(kind)
隐藏条件 右侧栏已打开,或当前没有会话显示在屏幕上

设计与实现边界

几点值得说明的实现选择:

  • 只挂载到 additive 的 shell.overlay 槽位,不覆盖也不替换宿主自带 UI;
  • 视觉全部使用 inline React 样式,因为宿主不提供 styles 服务,基于 class 的 CSS 会静默失效;
  • 几何跟随是事件驱动的(MutationObserver + ResizeObserver),稳态下无轮询、无强制布局;
  • 锚点是宿主自己的按钮,通过稳定属性 data-sidebar-right-expand 定位,有 aria-label 兜底;两者都不匹配时图标轨退回默认位置并打一条 warning,不消失也不挂错位置;
  • 键盘可达:图标轨是 toolbar,使用 roving tabindex 与方向键,Esc 关闭气泡,焦点轮廓只在键盘聚焦时显示;
  • 尊重 prefers-reduced-motion;渲染期异常由 ErrorBoundary 捕获,不会让槽位空白;
  • UI 文案中英双语,宿主提供 locale 命名空间时注册在 rightbarQuicknav 下。

仓库里还带了一轮完整审计及后续修复记录,包括总审计、交互与可访问性评审、性能与资源评审、逐项修复台账四份文档。

开发与发布流程

插件自带零依赖的渲染冒烟测试:

node --check client.js     # 语法检查
node --test tests/         # 渲染冒烟测试

测试加载真实的 client.js,用最小 React stub 驱动插件自身的 apply() → slots.inject → slots.register 路径,断言渲染与副作用不抛异常。README 提到,这个测试存在的直接原因是曾经有一个 effect 里的未定义变量让整条图标轨静默消失。

发布只由 CI 执行,流程为:

1、同时提升 package.json 的 version 与 client.js 的 VERSION 常量,两者必须一致;
2、在 CHANGELOG.md 增加 ## [x.y.z] 小节;
3、提交到 main;
4、git tag vX.Y.Z && git push origin vX.Y.Z。

推送 tag 后由 .github/workflows/publish.yml 执行版本一致性校验、语法检查与测试,并以 npm Trusted Publishing(OIDC)加 provenance 声明发布,不使用 NPM_TOKEN。工作流还会等待 npm 真正提供该版本后才判定成功,避免 npm publish 返回成功但版本尚在处理队列里造成的假绿。本包故意不提供本地 npm publish:其发布权限要求 2FA 且拒绝绕过 2FA 的 token,本地发布只会进队列。

适用场景与注意

适合需要频繁切换右侧栏标签、且希望少一次点击的 DSH 使用者,尤其是右侧栏被多个插件扩展过的项目。

使用前有两点需要留意:

1、插件以当前 DSH 进程的权限运行,安装启用前应自行检查源码与许可证(本包为 MIT);
2、DSH 低于 0.2.1-rc.1 时所依赖的客户端服务不可用,插件不会生效。

结语

这个插件的价值很窄:它只解决右侧栏标签切换的一步操作,不做更多事。标签列表随宿主注册动态变化,实现上不侵入宿主 UI,也不引入运行时依赖,是小改动边界划得清楚的一个例子。

目录页:https://www.skillhub.cn/plugins/zuoyunlai/dsh-rightbar-quicknav

代码仓库:https://github.com/zuoyunlai/dsh-rightbar-quicknav

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

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

小夜