前言¶
DeepSeek Harness(DSH)采用插件化架构。在 Web 端开发智能体或工具时,经常需要在界面右侧挂载额外的面板(如 Shell、调试器等)。dsh-right-drawer 提供了一个宿主方案,通过 dockPanels 注册表管理这些面板,使其以全高抽屉形式呈现,并自动处理边缘标签的堆叠与宽度调整。
功能说明¶
该插件主要解决右侧面板的布局与交互问题:
-
dockPanels 注册表
插件作为宿主,提供dockPanels客户端服务。内容插件(如dsh-soln-panel、dsh-agent-shell)通过注册表接入,无需自行处理底层布局逻辑。 -
标签自动堆叠
抽屉边缘的标签会根据实际测量高度紧密排列,并垂直居中成组。展开或收起抽屉时,仅改变 X 轴位置,标签组不会跳动。 -
宽度拖拽
抽屉左侧设有手柄,支持拖拽调整宽度。宽度范围在 280–900px 之间,且不会超过视口宽度的 80%。切换不同抽屉时,宽度状态会被保持。 -
与方案面板协调
插件会检测dsh-soln-panel的位置。打开的抽屉和剩余标签会自动贴到方案面板的左缘,避免内容相互遮挡。
安装与启用¶
通过官方命令安装插件:
dsh plugin --profile web add @deepseek-ai/dsh-right-drawer
如果插件尚未发布,可使用本地目录安装:
dsh plugin --profile web add file:C:/path/to/dsh-right-drawer
安装完成后重启 DeepSeek Harness。右侧将出现竖排标签,点击即可展开对应的抽屉。
卸载命令如下:
dsh plugin --profile web remove @deepseek-ai/dsh-right-drawer
典型用法¶
内容插件需要在 client 侧(apply 内)注册到 dockPanels 服务:
// 在内容插件的 client 侧代码中
const dock = ctx.get('dockPanels')
if (dock !== undefined) {
const dispose = dock.register({
id: 'shell',
label: 'Shell',
order: 1,
render: () => React.createElement(ShellContent, { connection }),
})
}
注册表 API 支持 register、unregister、subscribe 和 snapshot。
架构与依赖¶
- 浏览器端:提供
dockPanels服务,通过slots.inject('shell.overlay')挂载DockHost组件。 - Node 端:为空实现,仅确保 bundle 解析顺利。
- 依赖:
@deepseek-ai/dsh-tools@deepseek-ai/dsh-client-connection@deepseek-ai/dsh-client-ui-slotsreact(版本要求 ^18.2.0)
注意事项¶
该插件以当前 DSH 进程的权限运行。安装前建议检查源码与许可证(MIT)。
总结¶
dsh-right-drawer 为 DSH Web 插件提供了标准化的右侧抽屉宿主能力,通过注册表模式解耦了内容插件与布局逻辑。适合需要构建全高侧边栏或复杂 UI 布局的开发者。