dsh-plugin-rightbar:为 DeepSeek Harness Web 端提供共享右侧栏

前言

在 DeepSeek Harness(DSH)里,不少客户端插件需要在聊天区域旁边展示面板。宿主自带的 details 槽位是 single 型,已被工具详情占用;shell.overlay 只是浮层,没有统一的布局协调。结果是各插件各自写 position: fixed; right: 0,互相抢 z-index、各自改 #root 宽度,留宽与收起逻辑重复实现。

dsh-plugin-rightbar(维护者 lo2589,MIT,当前版本 0.1.0)在 Web 客户端上注册一个共享的「聊天右边那一列」:其它插件往 rightbar.tab 槽位挂标签页,而不是各自固定浮层。下面介绍它的定位、安装方式,以及插件作者如何接入。

这是什么

插件 id 为 rightbar,分类属于客户端,仅支持 Web(dsh.client.platform = web)。宿主半端是空 apply,整列 UI 在浏览器里完成。

它向 shell.overlay 注册一个条目,用 children 声明 list 型槽位 rightbar.tab(机制与宿主 AppFrame 声明 sidebar / details 相同)。想贴边的插件向该槽位注册标签即可;本插件自身不提供业务标签,没有标签注册时整列不渲染,并让出的宽度归零。

核心功能

统一槽位与宽度

  • 槽位名:rightbar.tab(kind: 'list'、scope: 'root')。
  • 注册方式:slots.register({ name: 'rightbar.tab', id, label, order }, Component)。
  • 页面宽度由本插件通过 <html> 上的 CSS 变量 --rightbar-w 控制;无标签时为 0px。
  • 一次只渲染当前激活的标签(renderSlot('rightbar.tab', {}, { only: id }))。

交互与尺寸

默认展开,宽度 420px,可拖左边缘调整;最小 280px,最大为窗口宽的 70%;点右上角 › 收成 32px 竖条。层级 z-index: 600(高于常见遗留浮动面板 500–530,低于全屏模态 9997+)。

浏览器偏好写在 localStorage:rightbar.open、rightbar.active、rightbar.width。想默认收起可执行:

localStorage.setItem('rightbar.open', 'false')

跨插件激活

无需 import,通过窗口事件切换到自己的标签:

window.dispatchEvent(new CustomEvent('rightbar:activate', { detail: { id: 'my-plugin' } }))

rightbar 未安装时无人监听,事件无害。

可选「让位」兼容

仍用 position: fixed; right: 0 的老面板可能与右栏重叠。本插件可按 localStorage['rightbar.adopt'] 做偏移兼容,默认关闭(off)。可选 declared(只处理带 data-rightbar-adopt="1" 的面板)或 all(按样式启发式匹配 body 直接子元素)。正式接入仍应注册 rightbar.tab。

Agent skill

安装后 agent 会话 skill 目录会多一条 rightbar-tab(由 cordis.patch.yml 的 rightbar-skill 提供),说明槽位名、注册方式、三条硬性要求与可选座位写法,便于 agent 编写新面板时对齐契约。

安装与启用

前置:可运行 Web 客户端的 DeepSeek Harness(--profile web),且 node ≥ 22 在 PATH 上。

从 GitHub 安装(推荐):

cd /path/to/deepseek-harness

node --import tsx/esm apps/cli/src/bin.ts plugin --profile web add github:lo2589/dsh-plugin-rightbar

若已安装全局 dsh 命令,等价于:

dsh plugin --profile web add github:lo2589/dsh-plugin-rightbar

本地目录(改代码时):

cd /path/to/deepseek-harness
node --import tsx/esm apps/cli/src/bin.ts plugin --profile web add link:/path/to/dsh-plugin-rightbar

装完后必须重启一次 dsh;bundle 在启动时组装,不重启插件不会挂上。

装完如何确认

没有其它插件注册标签时,右侧空白是正常现象。可先开演示标签验证槽位链是否通:

localStorage.setItem('rightbar.demo', 'true')

在浏览器刷新后应出现「演示 A」「演示 B」两个标签。

卸载

cd /path/to/deepseek-harness
node --import tsx/esm apps/cli/src/bin.ts plugin --profile web remove dsh-plugin-rightbar

重启后 rightbar.tab 不再声明;已接入插件的 slots.inject 不会触发,不会因此崩溃。

典型用法:给自己的插件挂标签

在插件 client 半端 apply(ctx) 中:

var slots = ctx.get('slots')
slots.inject('rightbar.tab', function () {
  return slots.register(
    { name: 'rightbar.tab', id: 'my-plugin', label: '我的面板', order: 20 },
    MyPanel,
  )
})

要点:

  1. slots.inject 会等待槽位声明出现,加载顺序无关;rightbar 卸载时注册自动撤销,重装后自动恢复。
  2. 将 rightbar 视为可选:未安装时 inject 不触发,应保留自有浮动面板作为兜底。
  3. 面板组件只填满 rightbar 给的盒子:不要 position: fixed、不要改 #root 宽度、不要自造 z-index 压层。
  4. 全页只允许一个 rightbar;第二次声明 rightbar.tab 会被槽位注册表拒绝。

适用场景与注意

适合: 需要在 DSH Web 聊天旁稳定展示面板、且希望与同类 UI 共存的插件作者;愿意用槽位替代各自 fixed 右栏的团队。

不适合: 非 Web profile(本插件 client 平台限定为 web);期望装完立刻看到内容但不注册任何 tab 的使用者——需接入 tab 或开 rightbar.demo。

安全与信任: 插件以当前 dsh 进程权限运行。DSH 生态主张「一切皆插件」;社区目录 SkillHub 插件页 为独立站点,与 DeepSeek / 幻方无官方从属。安装前请阅读 GitHub 仓库 源码与 MIT 许可证。

已知环境差异: Safari 曾因宿主 .frame 的 overflow: hidden 裁剪 fixed overlay;0.1.0 起面板与收起竖条通过 ReactDOM.createPortal 挂到 document.body。隐私模式下 localStorage 可能不可用,偏好会静默退回默认值。

结尾

dsh-plugin-rightbar 用单一 list 槽位 rightbar.tab 和 --rightbar-w 把「聊天右侧一列」变成可共享座位,减少 fixed 面板互挡与宽度争抢。插件详情见 SkillHub 目录,源码与契约表见 GitHub:lo2589/dsh-plugin-rightbar。

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

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

小夜