dsh-panel-scroll:给 DSH 侧栏补上滚动

前言

用 DeepSeek Harness(DSH)久了会遇到两个界面问题:左侧面板列表有几个条目就占几行,选项一多,底部的「工作区」就被挤出窗口;右侧栏有些 tab 的内容比盒子高,却被 overflow: hidden/clip 裁掉,既看不见也滚不到。这两处都不是配置项,插件注册接口也只接受 id / order / label,没有尺寸参数。下面介绍的 gusong1729/dsh-panel-scroll 就是一个客户端插件,直接在 DOM 层补这两个缺口。

这是什么

dsh-panel-scroll 由 gusong1729 维护,分类是客户端插件,给 DSH 的 Web / Desktop 界面打一个小布局补丁:左侧面板列表封顶 4 行、剩下的用滚轮滑出来;右侧栏被裁掉内容的容器改成可以上下滚动。仓库地址是 https://github.com/gusong1729/dsh-panel-scroll ,社区目录页是 https://www.skillhub.cn/plugins/gusong1729/dsh-panel-scroll 。许可证为 MIT,package.json 里版本号为 0.2.4。

核心功能

  1. 左侧面板列表封顶:默认只显示 4 行(学习 / 插件 / 插件市场 / 自动化任务等),剩下的用滚轮滑出来,「工作区」往上升、会话列表多露几条。
  2. 右侧栏不再裁内容:右栏里凡是「内容比盒子高、却被 overflow: hidden/clip 切掉」的容器,改成可以上下滚动,滑到底能看到原本够不到的项。

安装与启用

README 给出的安装方式有两种。方式一是本地目录,适合开发或自用,把插件所在的绝对路径交给 dsh plugin add:

dsh plugin --profile <你的 profile> add /绝对路径/dsh-panel-scroll

也可以在 DSH 里让 agent 用 plugin_manager 的 install_bundle 指向该目录。方式二是 npm,README 标注为「如果已发布」:

dsh plugin --profile <你的 profile> add dsh-panel-scroll

无论哪种方式,装完都要重启一次 DSH 才生效,因为客户端插件代码是在启动时装载的。

配置

配置全部走 localStorage,改完刷新页面即可,不需要重启。可用键有两个:

键 默认 说明
dsh-panel-scroll:rows 4 面板列表显示几行,取值 1–20。设成 3 时算上「学习」那一行正好 4 行
dsh-panel-scroll:unclog 开 设为 "off" 关闭右栏的滚动修复,只保留左侧 4 行封顶

在 DevTools Console 里改值后刷新即可:

localStorage['dsh-panel-scroll:rows'] = 3
location.reload()

工作原理

左栏的做法是向 sidebar.panellist 注册一个不可见的标记行,它的 DOM 节点必然落在真正的面板列表里,插件从这个锚点往上走,找到「自己那一行」和「行列表」,判据是有没有同 tag 同 class 的兄弟,而不是硬编码的类名,再给列表发布一条 max-height: N × 行距 的样式表规则。这里刻意用样式表加 !important,不用内联样式,因为 shell 重渲染会把内联值冲掉。

右栏的做法是先不认类名,按「贴着视口右边缘、高度 ≥ 70% 视口的最宽容器」定位右栏,再扫描其子树:内容比盒子高、且被 hidden/clip 裁掉的容器改成 overflow-y: auto;另外还处理起始侧溢出——justify-content: flex-end/center 这类末端或居中对齐时,多出的内容会落在容器上边界之外,scrollHeight 不计入、任何 scrollTop 都够不到,表现为「滚到顶也看不到第一项」,这类容器往往还是 overflow: visible,所以这条判据先于 overflow 判断执行:检测到有子元素跑到容器上边界之上,就先把对齐改成 flex-start,让溢出变成正常的下方溢出、可滚动。

适用场景与注意

适合在 DSH 里长期开多个面板、右侧栏有长内容、又不想动 shell 源码的人。安装前应检查源码与许可证。下面是 README 列出的已知限制:

  1. 依赖 shell 的 DOM 结构。插件刻意避开类名(DSH 用的是 CSS Module 哈希类名),但 shell 若改了层级关系,插件可能失效,失效时表现为「没效果」,不会破坏界面。
  2. 在 dsh 0.2.1-rc.2 上验证过,package.json 里 dsh.engines.dsh 声明为 >=0.2.1-rc.2 <0.3.0。
  3. 右栏关闭时,「贴右边的那条」是主区,因此右栏规则也会作用到主区。不想要就把 dsh-panel-scroll:unclog 设成 "off"。
  4. 注册的标记项 label 为空,会出现在面板列表的「更多」菜单和无障碍树里,是一个空项。
  5. 面板少于 2 个时左侧封顶逻辑不生效,因为没有兄弟行可判定。
  6. 高度小于 60px 的被裁容器不处理,阈值内是滚动条比内容还高的区域,修了反而更糟。
  7. 开发时改完 client.js,刷新页面即可生效,不需要重启 DSH。

验收与开发

插件包是 link: 安装到 profile 的,相关文件都在 client.js,通过 window.__ModuleLoader__.load({ id, factory }) 暴露 apply/inject。两种验证方式都不需要装进 DSH:

node tests/smoke.mjs

这条命令用无依赖的冒烟测试装载 client.js,跑 apply()/注册/销毁。浏览器验收页 tests/harness.html 复刻了 shell 骨架,打开后底部打印 HARNESS PASS。也可以用无头 Edge 跑一遍并截图:

msedge --headless=new --disable-gpu --window-size=1400,900 \
  --screenshot=harness.png tests/harness.html

卸载

dsh plugin --profile <你的 profile> remove dsh-panel-scroll

或者在 Plugins 页面把 dsh-panel-scroll 关掉或卸载。插件全部效果都走注入的样式表加类名,卸载时样式表移除、加过的类在 dispose() 里清掉,不残留。README 提到 0.2.2 及更早版本曾用内联样式,卸载后左栏会保持封顶直到刷新,0.2.3 起修正。

小结

dsh-panel-scroll 的价值不在新功能,而是把两个没有配置项可用的界面问题在 DOM 层补掉:左栏封顶滚动、右栏解除裁剪。改动面小、回退也干净,适合需要面板列表更紧凑、又希望右侧长内容可滚动的人。目录页 https://www.skillhub.cn/plugins/gusong1729/dsh-panel-scroll ,源码 https://github.com/gusong1729/dsh-panel-scroll 。

说明:社区目录是独立站点,与 DeepSeek / 幻方无官方从属关系,不是官方应用商店。

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

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

小夜