dsh-ui-fixes

Readme

# dsh-ui-fixes

> Three CSS-only fixes for the DSH web GUI: a scrollable settings nav, compact session-header
> tabs, and a working conversation-width drag handle.
>
> DSH Web GUI 的三个纯 CSS 修复：设置弹窗左侧导航可滚动、会话 header 标签恢复紧凑间距、
> 恢复对话流拖拽调宽。

[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)

> **拥有**：4 条官方 CSS 缺陷修复（设置导航可滚 / header 标签间距 / 对话列拖拽调宽 / 设置页多余线条）。
> **冲突时**：修复 ③ **反向覆盖** `dsh-ui-harmonizer` 写在 `div[data-phase]` 上的 `--dsh-chat-content-width` —— 两者在「对话内容宽度」上互斥，本插件优先（官方拖拽调宽是被覆盖的那个）；想恢复 harmonizer 的滑块就删掉「修复 3」那 3 行。
> **回滚**：从 `dsh.profile.bundles` 去掉 `dsh-ui-fixes` + 重启应用。

---

## 它修什么

| # | 症状 | 根因 | 修法 |
| --- | --- | --- | --- |
| ① | 设置弹窗**左侧导航滚不动**，设置项一多就被裁掉 | 官方 `*_panel` 固定 `height:800px` + `overflow:hidden`；右侧 `*_options` 有 `overflow-y:auto` 能滚，左侧 `*_navList` 却是 `overflow:visible` | 约束 `*_nav`，让 `*_navList` 自己滚 |
| ② | 会话 header 标签间距**36px 太远** | 官方 `.X_tabs{gap:36px}` 与 `[class$="_tabs"]{gap:8px}` **特异度相同（都是 0,1,0）**，官方加载在后 → 36px 生效 | `!important` 落实 8px，作用域限定在会话 header |
| ③ | 中间对话流**不能拖拽调宽**（拖了没反应） | 某个 UI 协调插件在**同一个元素**上覆盖了官方变量定义，把动态公式换成固定 `748px`，而拖拽写入的是 `--dsh-chat-user-width` | **还原官方表达式**（⚠️ 不能用 `unset`） |
| ④ | 设置页（插件页）tab 组下方有**多余线条**：一条横贯整行 + 一条纯黑 2px 贴在选中胶囊底下 | 容器 `.X_tabs{border-bottom:.5px solid …}` + 选中 tab 的 `::after{height:2px;background:rgb(20,20,19)}`；而选中态已经是橙色实心胶囊 | 两条都去掉（`aria-selected` 精确定位，限定在 `[class$="_section"]` 内） |

### ① 设置弹窗左侧导航滚不动

`*_panel` 是固定 `height:800px` + `overflow:hidden`；右侧内容区能滚，左侧导航却是 `overflow:visible`。
装了较多插件的环境（设置里多出「桌面设置」「手机连接」「Token Saver」「记忆」等页面）就会撑爆。

实测（Chromium，人为制造溢出）：

| 状态 | navList client/scroll | 滚轮结果 |
| --- | --- | --- |
| 不溢出（15 个设置页） | 656 / 656 | 看不出问题 |
| 人为造溢出 | 736 / 920 | `scrollTop` 恒 **0**（滚不动） |
| 加上本插件 | 736 / 920 | `scrollTop` = **184** ✓ |

### ② 会话 header 标签间距 36px 太远

两条同特异度的规则打架，官方那条赢：

```css
[class$="_tabs"]  { gap: 8px }    /* 插件想要紧凑 */
.X_tabs           { gap: 36px }   /* 官方，加载在后 → 生效 */
```

本插件用 `!important` 落实 8px，作用域限定在 `[data-slot="conversation.session.header"]`，
不影响其它 `*_tabs`。实测 `gap` **36px → 8px**，四个按钮间距 `[8, 8, 8]`。

### ③ 对话流不能拖拽调宽

官方在会话根元素（`div[data-phase]`）上定义：

```css
._0cyzDW_root {
  --dsh-chat-content-width: var(--dsh-chat-user-width,
      clamp(680px, calc(var(--dsh-conversation-column-width,0px) * .64), 920px));
}
```

**拖拽写入的就是 `--dsh-chat-user-width`**。而 UI 协调插件（如 `dsh-ui-harmonizer`）在**同一个元素**上写：

```css
div[data-phase] { --dsh-chat-content-width: var(--enhancer-content-width) }   /* 固定 748px */
```

整条定义被替换 → 拖拽写得再对，宽度永远是 748px → **纹丝不动**。

本插件还原官方表达式。实测：

| | 被覆盖时 | 本插件 |
| --- | --- | --- |
| 对话列 | x=517, w=**748**, margin `0 205px` | **x=497, w=788, margin `0px 184.766px`**（官方基准值）|
| 拖 +100px | 748 → 748 ✗ | 788 → 640 ✓ |
| 拖 −200px | 748 → 748 ✗ | 640 → 1040 ✓ |
| `--dsh-chat-user-width` | 空 | 640px ✓ |

> ⚠️ **不能用 `unset` 偷懒**：实测 `--dsh-chat-content-width: unset` 会把官方的默认公式一起丢掉，
> 列宽变成撑满 `1158px`、`margin` 归零。必须原样还原官方表达式。

### ④ 设置页 tab 组的多余线条

```css
.X_tabs            { border-bottom: .5px solid var(--dsw-alias-border-l2) }   /* 横贯 556px */
.X_tab[aria-selected=true]::after { height: 2px; background: rgb(20,20,19) }  /* 纯黑，贴在胶囊下 */
```

选中态本来就是橙色实心胶囊，这两条线纯属多余（尤其那条纯黑的）。本插件去掉两者，
实测修复后 `border-bottom-width = 0px`、`::after display: none`，且选择器命中数唯一
（`allSelectedTabs: 1`），不影响会话 header 的同名 `_tabs`。

## 安装

```bash
# ① npm（快，走 registry）
dsh plugin --profile <profile> add dsh-ui-fixes

# ② GitHub（源码直装，跟随 main 分支）
dsh plugin --profile <profile> add github:jipika/dsh-ui-fixes
```

本插件自带 `dsh.bundle` 补丁层（见 `cordis.patch.yml`），上面的命令会**自动把
`dsh-ui-fixes` 加进 profile 的 `bundles` 列表并插入组合树**，不需要手工编辑
profile 的 `cordis.patch.yml`（实测：`dsh plugin add` 后 `bundles` 自动多出该项，无 warning）。

`desktop` profile 被 Electron 独占（CLI 子命令会被拒），此时手改 `package.json`
—— `dependencies` 加一项、`bundles` 加一项 —— 再 `pnpm install`：
**两处都要加**，只加依赖不会激活（`dsh.bundle` 声明本身不会自动挂载）。

**改 client 半边必须重启应用**（client bundle 在 host 启动时读进内存，刷新页面无效）。

## 实现

```
dsh-ui-fixes
  ├─ lib/index.js   host 半边：空 apply()，只为让 cordis 行能挂载 client bundle
  └─ lib/client.js  浏览器半边：__ModuleLoader__.load → 注入一个 <style id="dsh-ui-fixes-style">
```

client 半边 `inject = []`，**不注册任何 slot、不碰官方 DOM、不做任何 JS 改造** —— 只追加一个
`<style>` 元素，注入是幂等的（已存在就直接返回）。删掉 cordis 行即完全恢复。

## 已知限制

- 依赖官方 CSS Modules 的**类名后缀**（`_navList` / `_tabs` / `_nav`）：哈希前缀随前端构建变化，
  后缀恒定，所以按 `[class$="..."]` 匹配。官方前端大改即可能失效。
- ③ 的副作用：**`dsh-ui-harmonizer` 设置里的「对话内容宽度」滑块不再影响布局**（拖拽优先）。
  想恢复滑块，删掉 `lib/client.js` 里「修复 3」那 3 行即可。
- 属于**版本敏感型**补丁，建议随 DSH 升级回归验证一次。

## License

MIT © 2026 jipika