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 图标栏的状态：图标同样改为纵向成组排列。

兼容性

版本漂移提示：本插件通过类名后缀匹配（[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: 安装的开发插件，改完保存后硬刷新浏览器即可看到效果。

权限与数据

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

工作原理

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 标记的 <style> 标签，覆盖 footerActions 的排列方向。

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

故障排查

日志位置：浏览器开发者工具 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 描述问题（请勿公开未修复的细节）。