Bundle

dsh-sidebar-stack

Stacks the DSH sidebar footer actions vertically so dsh-cost-meter, dsh-context and other sidebar.footer.action plugins no longer crowd into one row.

Source: MosesCharm
License: MIT
Updated: Updated 3 hours ago

Readme

# dsh-sidebar-stack

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

[![DSH](https://img.shields.io/badge/DSH-0.1.5--rc.1%2B-4d6bfe)](https://www.npmjs.com/package/@deepseek-ai/dsh)
[![license](https://img.shields.io/badge/license-MIT-green)](./LICENSE)

---

## 概述

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

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

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

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

## 效果

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

同时兼容侧边栏折叠成 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`，本插件的规则会变成无害的重复声明。

## 安装

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

从源码目录安装：

```sh
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`。

## 卸载

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

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

## 快速开始

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

## 配置

**无需配置**，安装即生效。

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

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

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

## 权限与数据

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

插件全部代码即 `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")` 模式。样式标签带唯一标记，重复注入会被去重。

## 故障排查

| 现象 | 原因 / 处理 |
|---|---|
| 装完没变化 | 未硬刷新浏览器 → `Ctrl/Cmd + Shift + R` |
| 仍然没变化 | host 半侧变更需重启 `dsh web` |
| 升级 DSH 后失效 | 上游可能改了容器类名。检查 `[class*="_footerActions"]` 是否仍匹配，见下方「开发」 |
| 想确认插件已加载 | 浏览器控制台查看 `<head>` 中是否存在 `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 })` 包装。

本地验证：

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

**调试上游类名是否变化**：

```sh
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](./NOTES.md)**（面向维护者，非使用文档）。

## 许可证与安全

[MIT](./LICENSE)。

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

Install

dsh plugin --profile web add github:MosesCharm/dsh-sidebar-stack

Profile: web

This source has no pinned commit, so a later push upstream changes what installs. Prefer pinning a commit.

Source