把侧边栏底部的动作按钮改成一行一个、铺满整行,并让各行的图标落在同一条竖线上。
安装
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:polychromate/dsh-sidebar-footer-rows
装任何插件都等于在你的机器上跑第三方代码,权限和你本人一样大——能读你的文件、用你的凭据、访问网络,工具审批管不到它。GitHub 来源的插件还会在安装时执行构建脚本——pnpm 默认拦截,所以安装可能停在 ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED 或 ERR_PNPM_IGNORED_BUILDS;dsh 会打印出需要添加的确切键名,把它加进该 profile 的 pnpm-workspace.yaml 的 allowBuilds 下,重跑一次即可装上。放行构建本身就是一次信任判断:请只安装可信来源,并尽量锁定 commit(github:owner/repo#sha)。
README
把 DeepSeek Harness 侧边栏底部那一行动作按钮(sidebar.footer.action 槽位,
如「文献 / ✦ 昔涟 / 微信连接 / work…」)从挤在一行改成一行一个。
为什么需要它
宿主 @deepseek-ai/dsh-client-ui-sidebar 给这个槽位的容器写了:
.…_settingsArea, .…_footerActions { flex:none; width:100%; min-width:0 }
.…_footerActions { display:flex } /* 没有 flex-wrap */
容器是 flex 且不允许换行,子项默认 flex-shrink:1,于是注册者一多就被压缩、
截断。这个插件注入一张样式表,把该容器改成纵向排列,并让侧边栏折叠成窄条(rail)
时恢复宿主原本的居中单行。
选择器为什么这么写
宿主类名前缀是每次构建生成的哈希(当前是 kB3qhq_),升级宿主就会变;CSS Module
的局部名后缀(_footerActions、_root、_collapsed)是稳定的,所以用子串匹配。
为什么子项要 width: 100% !important
光把容器改成纵向还不够。底栏四个条目里,三个自己就写了满宽:
| 条目 | 来自 | 宽度来源 |
|---|---|---|
| 工作区分类 | dsh-workspace-categories |
自带 CSS .twt-foot{…width:100%…}(那个「开关」是按钮里的一个 <span>,不是独立控件) |
| 微信连接 | dsh-wechat-remote |
自带 CSS module 类 sidebarButton |
| ✦ 昔涟 | dsh-cyrene-theme |
自带样式 |
| 文献 | dsh-literature |
行内 style={{ width: 36, height: 36 }} |
行内样式优先级高于任何普通样式表规则,所以只靠 align-items: stretch 或
> * 都压不住它——条目外层的盒子满了,里面那个按钮还是 36px,图标旁边放不下
「文献」两个字,只能上下折行。规则因此要打到控件本身:
[class*="_root"]:not([class*="_collapsed"]) [class*="_footerActions"] > *,
[class*="_root"]:not([class*="_collapsed"]) [class*="_footerActions"] div,
[class*="_root"]:not([class*="_collapsed"]) [class*="_footerActions"] button {
width: 100% !important;
min-width: 0;
box-sizing: border-box;
}
[class*="_root"]:not([class*="_collapsed"]) [class*="_footerActions"] button {
justify-content: flex-start !important;
text-align: left !important;
padding-inline: 8px !important;
}
第二条治的是「对齐」。.zt-iconbtn 是 display:inline-flex +
justify-content:center + padding:0 的居中图标按钮,而 .twt-foot 是
width:100% + padding:0 8px 的左对齐行。宽度拉平之后,两者的图标仍然会落在
不同的 x 上——所以要统一 justify-content 与左右内边距。
:not([class*="_collapsed"]) 把这一切限制在展开态,折叠成窄条(rail)时保持宿主
原本的图标尺寸与居中排列。
代价是:底栏里所有 button 都会被拉成整行宽、内容左对齐、左右内边距 8px。
若某个插件你希望保持原始尺寸,给它加一条更具体的 width: auto !important
(按类名或 [data-*] 属性),告诉我插件的名字也可以。
文件
| 文件 | 作用 |
|---|---|
cordis.patch.yml |
bundle 补丁,插入 sidebar-footer-rows 行 |
index.js |
Host 半边,空实现(样式全在 Client 侧) |
client.js |
Client 半边,ctx.effect 注入/清理 <style> |
locale/*.json |
插件管理页显示的标题与说明 |
icon.svg |
插件图标 |
安装
设置/侧边栏 → 插件 页 → 添加插件 → 填本目录的绝对路径 → 安装。
发布之后也可以用命令行(名字见下方「发布前必须改名」):
dsh plugin --profile <你的 profile> add <包名>
实测版本
DSH 0.2.1-rc.5 桌面版(macOS)实测通过。
没有声明 engines.dsh:选择器依赖的 _footerActions / _root / _collapsed 是
宿主的 CSS Module 局部名,我只在这一版上核对过,不想凭猜写下兼容范围让市场误判。
你要是在别的版本上跑通了,把 engines 补进 package.json 再放开发布。
同类插件
两件事值得知道:
- 本插件最初想叫
dsh-sidebar-footer-stack,但 npm 上这个名字已被占用(作者daniel92,v1.5.2,MIT),功能也高度重合——纵向堆叠 + 统一卡片外观 + 拖动换序; 它不在社区目录里,所以商店搜不到,但dsh plugin add dsh-sidebar-footer-stack能装。因此本插件定名为dsh-sidebar-footer-rows。 - 社区目录里已有一个同类:
@choi-p/dsh-footer-order(分类 UI 增强,把sidebar.footer.action改成上下堆叠并允许配置顺序)。
若日后还要改名,只有三处需要动,且必须一致:
| 位置 | 改什么 |
|---|---|
package.json |
name |
cordis.patch.yml |
insert[].name(id 随便取,唯一即可) |
client.js |
const PLUGIN(Client 模块 id 必须等于包名) |
发布到商店(清单)
建仓库:把这个目录推到你自己的 GitHub 仓库,仓库名建议与包名一致。 填好
package.json里的author/repository/homepage/bugs(现在是占位符), 以及LICENSE里的版权人。(可选)发 npm:
npm publish --access public(scoped 包必须带--access public)。 收录不要求发 npm;但发了市场才会显示下载量。注意 社区目录的规矩: 已发布包的repository必须指回被收录的那个仓库,否则两者不会关联。投稿:给 awesome-dsh-plugin 提一个 PR,只加一个文件
data/plugins/<owner>__<repo>.yml:url: https://github.com/<owner>/<repo> name: <owner>/<repo> category: ui description: en: Stacks the sidebar footer actions into one full-width row each. zh: 把侧边栏底部的动作按钮改成一行一个、铺满整行。不要手写
npm:键(会被校验拒绝),也不要手工改两个 README(它们由脚本生成)。 描述里出现:(冒号+空格)必须给整行加引号。合并后条目自动出现在
data/plugins/→ 目录站与市场索引(含 dshmarket 的搜索)。
调参
只想要「自动换行、能放几个放几个」而不是一行一个,把 client.js 里的 CSS 换成:
[class*="_footerActions"] { flex-wrap: wrap; gap: 6px; }
改完重新加载页面即可(Client 代码改动需要重装或用链接目录 + 重启宿主)。
链接
同类插件
zhu1090093659/dsh-web#packages/dsh-task-board★ 9925
侧边栏多列任务看板:卡片交给真实 DSH 智能体会话执行,支持 cron 定时(Host 侧到点执行,关浏览器也生效)。
zhu1090093659/dsh-web#packages/dsh-web-all★ 9925
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。
MeteorNOX/DeepSeek-Balance-Whale-Widget★ 6712
右下角常驻的小鲸鱼挂件:余额、今日已用与每轮对话消耗(含峰谷价),余额预警与今日预算的泡泡内容都可编辑;泡泡点击序列模块化自定义,支持并列加权 A/B、随机台词与随机图片;内置 30+ 厂商模板(OpenAI / OpenRouter / Kimi / 硅基流动 / 方舟 / 智谱 / MiniMax 等),按模型查余额与订阅额度;另有任务结束音效、导入音频、自定义角色与资源管理。数据全在本机,无遥测。
ccch1mneyyy/dsh-TUI★ 6538
Claude Code 风格全屏终端 UI:像素鲸鱼顶栏、实时工作状态行、思考流式展开。
omdsh-dev/DSH-better-sidebar★ 4808
侧边栏完整工作台:内置文件渲染编辑、终端、Git 与子代理,支持三方插件注册新 Tab。
Devin-AXIS/deepseek-design#deepseek-idesign★ 1672
可视化设计工作室,支持网站、App 原型、海报、信息卡、报告和杂志的模板创建、元素编辑、选区级 AI 草稿衔接与导出。
社区评论
评论公开保存在 GitHub Discussions。加载评论会连接 GitHub 和 Giscus;发表内容需要 GitHub 账号。