dsh-sidebar-footer-rows:把侧边栏底栏动作改成一行一个

前言

DeepSeek Harness(DSH)侧边栏底部会挂多个插件注册的 sidebar.footer.action 槽位按钮,例如文献、主题、微信连接、工作区分类等。宿主 UI 把这一区域做成横向 flex 且不换行,插件一多,子项会被压缩或截断。若你本地装了好几个底栏插件,却看到图标挤在一行、文字折行或显示不全,问题往往出在容器布局而不是单个插件本身。下面介绍客户端插件 dsh-sidebar-footer-rows(维护者 polychromate),它通过注入样式把底栏改成纵向「一行一个、铺满整行」,并在侧边栏折叠为窄条(rail)时恢复宿主原有的居中单行表现。

这是什么

dsh-sidebar-footer-rows 是 DeepSeek Harness 的客户端插件(分类:客户端 / UI 相关)。它不新增业务按钮,只调整 @deepseek-ai/dsh-client-ui-sidebar 里底栏动作区域的 CSS 布局:由默认的「挤在一行」改为「每个动作占满一行宽度」。仓库:https://github.com/polychromate/dsh-sidebar-footer-rows;社区目录页:https://www.skillhub.cn/plugins/polychromate/dsh-sidebar-footer-rows。

宿主为什么需要补丁

README 说明,宿主给底栏容器写了类似下面的规则(类名前缀随构建哈希变化,后缀如 _footerActions 来自 CSS Module):

.…_settingsArea, .…_footerActions { flex:none; width:100%; min-width:0 }
.…_footerActions { display:flex }   /* 没有 flex-wrap */

容器是 flex 且不允许换行,子项默认 flex-shrink:1,注册者增多时就会被压缩、截断。本插件注入一张样式表,把该容器改成纵向排列;并用 :not([class*="_collapsed"]) 限制在侧边栏展开态,折叠成 rail 时不改宿主原本的图标尺寸与居中排列。

选择器用 [class*="_footerActions"] 等子串匹配,是因为宿主类名前缀(如 README 中提到的 kB3qhq_)每次构建会变,而 _footerActions、_root、_collapsed 等局部名相对稳定。

核心功能

  1. 纵向堆叠:底栏 sidebar.footer.action 条目由一行挤排改为每个占一行全宽。
  2. 统一子项宽度与对齐:部分条目自带满宽样式,但例如 dsh-literature 对按钮写了行内 width: 36,仅靠容器 align-items: stretch 压不住;插件对底栏内子元素使用 width: 100% !important,并对 button 统一左对齐与 padding-inline: 8px,避免拉满宽度后图标仍居中、各行 x 不对齐。
  3. Host 侧空实现:样式在 Client 侧完成;index.js 为空实现,client.js 用 ctx.effect 注入并清理 <style>。
  4. 可选调参:若只要自动换行、能放几个放几个,可把 client.js 内 CSS 换成 flex-wrap: wrap(见下文「调参」)。

代价(README 已说明):底栏里所有 button 都会被拉成整行宽、内容左对齐。若某个插件需保持原始尺寸,需用更具体的 CSS(如 width: auto !important 按类名或 data-*)覆盖。

安装与启用

插件以当前 DSH 进程权限运行;安装前请自行查看仓库源码与 MIT 许可证,确认可接受其行为。

本地目录安装(README 原文)

  1. 打开 DSH:设置 / 侧边栏 → 插件 页。
  2. 添加插件,填写本插件目录的绝对路径。
  3. 安装并重新加载页面(Client 改动通常需重装或使用链接目录并重启宿主)。

发布后命令行(README 原文,包名以发布为准)

dsh plugin --profile <你的 profile> add <包名>

README 未给出固定的 dsh plugin add github:owner/repo 形式;以你使用的 profile 与市场/包名为准。当前 package.json 中包名为 dsh-sidebar-footer-rows,版本 1.0.3。

实测环境:作者在 DSH 0.2.1-rc.5 桌面版(macOS)上实测通过。仓库未声明 engines.dsh;选择器依赖的 _footerActions / _root / _collapsed 仅在该版本上核对过,其他版本需自行验证。

典型用法与调参

安装后无需额外配置即可生效:展开侧边栏时底栏动作应为一行一个;折叠为 rail 时保持宿主默认单行居中。

若希望「换行多列」而不是严格一行一个,可编辑 client.js 中的 CSS,例如:

[class*="_footerActions"] { flex-wrap: wrap; gap: 6px; }

改完后重新加载页面;Client 代码变更需重装插件或使用链接目录并重启宿主。

适用场景与注意

适合:同时安装多个 sidebar.footer.action 插件,需要在展开侧边栏时清晰看到每个底栏入口、避免截断与文字异常折行的用户。

同类参考(README):npm 上另有功能相近的 dsh-sidebar-footer-stack(不在社区目录,但可通过 dsh plugin add dsh-sidebar-footer-stack 安装);社区目录中还有 @choi-p/dsh-footer-order(可配置顺序的上下堆叠)。本插件定名 dsh-sidebar-footer-rows,原因之一是 npm 名 dsh-sidebar-footer-stack 已被占用。

兼容与维护:纯 CSS 补丁,无 Host 业务逻辑;宿主 UI 大改类名或底栏结构时选择器可能失效。未声明 engines.dsh 时,升级 DSH 后应目视检查底栏布局。

结尾

dsh-sidebar-footer-rows 用一张 Client 侧样式表解决 DSH 侧边栏底栏 flex 不换行导致的挤压问题,把 sidebar.footer.action 改成展开态下一行一个、全宽左对齐,并在 rail 折叠态交还宿主默认行为。需要细节、调参或与同类插件对比时,以 GitHub README 为准。

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

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

小夜