侧栏按钮竖排 MosesCharm/dsh-sidebar-stack

dsh-sidebar-stack

把 DSH 左侧栏底部的动作按钮竖排，让 dsh-cost-meter、dsh-context 等插件不再挤成一行。

概述

DSH 左侧栏底部的 sidebar.footer.action 是一个列表槽位，所有注册到它的插件都渲染在同一个容器里。上游的 footerActions 容器只声明了 display:flex、没有声明 flex-direction，于是默认横向排列——装了 2 个以上插件后，按钮就挤成一排。

本插件注入一段样式表，把该容器改为纵向堆叠。

解决什么问题：左侧栏底部插件按钮拥挤、文字被压缩、点击区域过小。

给谁用：在 DSH Web 端左侧栏底部装了 2 个及以上动作类插件（如 dsh-cost-meter、dsh-context）的用户。

效果

| 之前 | 之后 |
| [费用] [上下文] 横向挤在一行 | [费用][上下文] 纵向堆叠 |

同时兼容侧边栏折叠成 56px 图标栏的状态：图标同样改为纵向成组排列。

兼容性

| 项目 | 值 |
| DSH 版本 | 0.1.5-rc.1 及以上 |
| 实测版本 | 0.1.5-rc.2（Windows 11 + Chrome/Edge） |
| 最近验证 | 2026-09-21 |
| 平台 | Web（dsh.client.platform = web） |
| 依赖 | 无运行时依赖 |

版本漂移提示：本插件通过类名后缀匹配（[class="_footerActions"]），不依赖 CSS-Module 的哈希前缀，因此 DSH 升级重新生成哈希后仍能生效。若上游将来给该容器补上 flex-direction:column，本插件的规则会变成无害的重复声明。

安装

dsh plugin --profile web add dsh-sidebar-stack

从源码目录安装：

git clone https://github.com/MosesCharm/dsh-sidebar-stack
dsh plugin --profile web add ./dsh-sidebar-stack

安装后硬刷新浏览器（Ctrl/Cmd + Shift + R）。本插件为纯 client 插件，DSH 对 client 变更支持热加载；若未生效再重启 dsh web。

卸载

dsh plugin --profile web remove dsh-sidebar-stack

随后硬刷新浏览器。插件卸载时会随插件行一并移除，不会残留样式（样式标签由 DSH 的插件生命周期管理）。

快速开始

1. 安装（见上）。
2. 确认左侧栏底部至少有 2 个动作插件（通常是 dsh-cost-meter + dsh-context）。
3. 硬刷新浏览器 → 两个按钮应变为一上一下。
4. 若侧边栏已折叠为图标栏，图标也应纵向成组。

配置

无需配置，安装即生效。

如需自行微调间距，编辑 lib/client.js 中的 CSS 常量：

[class="_footerActions"] {
flex-direction: column;
gap: 2px; /* ← 调整行间距 / }

因为是 link: 安装的开发插件，改完保存后硬刷新浏览器即可看到效果。

权限与数据

| 项目 | 说明 |
| 文件访问 | 无（仅注入样式，不读写任何文件） |
| 网络请求 | 无 |
| 凭证/密钥 | 不涉及 |
| 用户数据 | 不收集、不上传 |
| 宿主侧行为 | 无（host 半侧为空实现，不注册任何服务） |

插件全部代码即 lib/client.js 中一段 CSS 字符串 + 一次 注入，可完整审计。

工作原理

1. DSH 侧边栏底部的渲染结构为：

footArea (flex-direction: column)
├── footerActions (display:flex → 默认 row) ← 所有 sidebar.footer.action 注册者 │ ├── cost-meter │ └── context-overview └── settingsArea (Settings 行)

2. 本插件的 browser 半侧在加载时向 document.head 注入一个带 data-plugin-css 标记的 标签，覆盖 footerActions 的排列方向。

3. 该注入方式与 DSH 官方 UI 包（dsh-client-ui-sidebar）及生态皮肤插件（如 dsh-dream-skin）完全一致，都是 style[data-plugin-css=...] + createElement("style") 模式。样式标签带唯一标记，重复注入会被去重。

故障排查

| 现象 | 原因 / 处理 |
| 装完没变化 | 未硬刷新浏览器 → Ctrl/Cmd + Shift + R |
| 仍然没变化 | host 半侧变更需重启 dsh web |
| 升级 DSH 后失效 | 上游可能改了容器类名。检查 [class="_footerActions"] 是否仍匹配，见下方「开发」 |
| 想确认插件已加载 | 浏览器控制台查看 中是否存在 style[data-plugin-css="dsh-sidebar-stack/footer-stack"] |
| 想回滚 | dsh plugin --profile web remove dsh-sidebar-stack，再硬刷新 |

日志位置：浏览器开发者工具 Console；宿主侧 dsh web 终端输出。

开发

本插件无构建步骤，发布物即源码。

dsh-sidebar-stack/
├── package.json # dsh.bundle + dsh.client 声明 ├── cordis.patch.yml # bundle 层：一行 insert └── lib/ ├── index.js # host 半侧（空实现） └── client.js # browser 半侧：注入样式

关键约定（dsh-client-modules 的解析规则）：

- package.json 必须声明 dsh.client.platform = "web"；
- 必须提供 exports["./client"]，否则启动报错 declares dsh.client but exports no "./client" bundle；
- browser 半侧产物必须使用 window.__ModuleLoader__.load({ id, factory }) 包装。

本地验证：

在 profile 目录下安装为 link，源码改动即时生效
dsh plugin --profile web add /abs/path/to/dsh-sidebar-stack

调试上游类名是否变化：

node -e "const c=require('fs').readFileSync(require('path').join(process.env.APPDATA,'npm/node_modules/@deepseek-ai/dsh/node_modules/@deepseek-ai/dsh-client-ui-sidebar/lib/client.js'),'utf8'); console.log(c.match(/\.([A-Za-z0-9_-]+)_footerActions\{/)?.[1] ?? 'not found')"

已知限制

- 仅针对 DSH Web 端左侧栏；右侧栏与底部工作台不在范围内。
- 若上游未来将 footerActions 改为纵向或重构该槽位，本插件可能变为无效或被自动满足。
- 折叠态（56px 图标栏）的间距为固定值 6px，不随主题变化。

设计笔记

为什么必须用 CSS 覆盖、哪些方案被否决、市场排查记录、DSH client 插件机制细节：见 NOTES.md（面向维护者，非使用文档）。

许可证与安全

MIT。

发现安全问题请通过 GitHub Security Advisory 私下报告，或开 issue 描述问题（请勿公开未修复的细节）。