前言¶
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