dsh-sidebar-flex:给 DSH 侧栏的会话列表找回垂直空间

前言

DSH 的客户端 GUI 里,左侧同一列塞了两个部分:一是全局面板列表(Plugins、Plugin market、Automation、MCP connectors、Learn、Remotion、More),它不滚动,在 1234 px 高的窗口里吃掉约 396 px;二是下面的 workspace / session 区域,只剩约 120–140 px,也就是两行会话的高度。

外壳没有提供把上下两部分高度互相让出来的办法,所以会话列表长一点就会被裁掉,想点的那条根本点不到。这篇介绍的插件就是把这种取舍做成一个拖拽把手。

这个插件是什么

dsh-sidebar-flex,仓库 yuyu121704/dsh-sidebar-flex,维护者 yuyu121704,分类「客户端」。它是一个 client bundle 插件,做的事只有一件:在全局面板列表下方加一条 10 px 的分割条,让你能把面板列表的高度压下去,把腾出来的垂直空间留给真正要读的会话列表。

它只改高度,不改侧栏宽度。

核心功能

拖拽分割条。 上下拖动,面板列表随之收缩或增长,腾出的高度给 workspace + session 区域。

双击或右键分割条。 面板列表回到它自己的自然高度。

键盘微调。 分割条获得焦点后按 ↑ / ↓,每次调整 24 px。

高度记忆。 重载、重启、下次启动都会从 localStorage["dsh-sidebar-flex:nav-height"] 恢复。

有下限,不丢内容。 面板列表最低 54 px(一行)。低于自然高度时列表自己变成可滚动,内容不是被裁掉,只是重新分配了空间。

不动宽度。 侧栏宽度由外壳自己管,维持 264–420 px 的 clamp 和外壳自带的边缘把手。早先试过接管宽度,如今留在 lib/client.js 里由 ENABLE_WIDTH 控制,默认 false,处于关闭状态。

改动作用范围。 插件只改面板列表的高度,不碰会话内容列。

安装与启用

安装不走包管理器,需要手工把包放进 profile。profile 位于 <DSH data dir>/profiles/<profile>,例如 C:\Users\<you>\.dsh\profiles\desktop;client bundle 必须是该 profile 的 node_modules 里的一个包,并登记在 profile manifest 里。

Windows 下从本仓库 checkout 建立 junction:

# Windows, from a checkout of this repo
New-Item -ItemType Junction `
  -Path  "$env:USERPROFILE\.dsh\profiles\desktop\node_modules\dsh-sidebar-flex" `
  -Target (Resolve-Path .)

然后把包名加进该 profile 的 package.json 里 dsh.profile.bundles:

{
  "dsh": {
    "profile": {
      "bundles": ["...", "dsh-sidebar-flex"]
    }
  }
}

保存文件即可。@deepseek-ai/dsh-hmr 会监视 profile manifest,重新组合 profile 并通过 SSE 推送新的 client graph,分割条无需重启应用就会出现;如果没有,重载一次窗口。

这里刻意不把包登记进 dependencies:插件管理器的 reconcile() 会丢弃「曾经是 dependencies、现在不是了」的 bundle,所以让 bundle 处于 unmanaged 状态反而更稳。

典型用法

装好之后不需要额外配置,分割条就在面板列表正下方。

1、面板列表太高、会话只剩两行时,按住分割条往下拖,直到会话列表出现足够多可见行。
2、拖多了想回到原样,双击或右键点分割条。
3、只想微调 24 px,Tab 到分割条后按方向键。
4、关掉窗口再打开,高度还是上次拖到的位置。

适用场景与注意

适合会话列表较长、想直接在侧栏里翻会话的人,以及希望每个会话行都可见、不必反复滚动的人。

几点需要知道的:

  • 这是客户端插件,以当前 DSH 进程的权限运行。安装前先读一遍源码和许可证(MIT © 2026 yuyu121704),确认来源可信再放进 profile 的 node_modules。
  • client 端的实现方式是轮询侧栏列,找到里面的全局面板列表,写入 inline height 并加上一个让它可滚动的 class。React 每次渲染都会重写 inline style,所以用 MutationObserver 在重渲染后重新应用高度;外壳若替换了列表节点,把手会被重新挂回父节点。没有 client service、没有 React state,启动阶段不容易出问题。
  • 选择器用 [class*='panelList'] / [class*='sidebarCol'] 这类子串匹配,因为 DSH 会 hash 自己的 CSS-module 类名。
  • host 端(lib/index.js)被刻意留成惰性,布局完全在浏览器里渲染,所以没有 host service,也没有重启开销。
  • 兼容性边界:peerDependencies: @deepseek-ai/dsh >=0.2.0-rc.2 <0.3.0-0。作者用 @deepseek-ai/dsh-client-ui-layout、-ui-sidebar、-ui-workspace 的 0.2.2 client bundles 构建并验证过。
  • 版本 0.2.2,社区目录页显示星标为 0,属于起步阶段的小工具,用前自己验证一遍。
  • 卸载:从 dsh.profile.bundles 移除 "dsh-sidebar-flex",删掉 node_modules/dsh-sidebar-flex(junction 或拷贝),可选清除 localStorage["dsh-sidebar-flex:nav-height"]。
  • 目录页是独立的社区站点,与 DeepSeek / 幻方没有官方从属关系,别当成官方应用商店。

结尾

dsh-sidebar-flex 做的事很窄:给 DSH 侧栏的全局面板列表加一条可拖拽、可记忆的分割条,把垂直空间从面板列表让给会话列表,宽度和会话内容都不动。DSH 的理念是「一切皆插件」,这类只在客户端改布局的小插件正好落在这个模型里。目录页与源码分别在 https://www.skillhub.cn/plugins/yuyu121704/dsh-sidebar-flex 和 https://github.com/yuyu121704/dsh-sidebar-flex。

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

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

小夜