外观调校 zxyxxby/dsh-appearance-tuner

dsh-appearance-tuner

DeepSeek Harness 的外观调校插件：实时调整浮层/面板的不透明度与配色、毛玻璃模糊、背景与侧栏色、强调色、圆角、正文字号、滚动条宽度。

An appearance tuner for DeepSeek Harness (DSH): live opacity & colors for floating panels, frosted-glass blur, background / sidebar colors, accent color, corner radius, content font size and scrollbar width.

特性

| 分组 | 项目 | 效果 |
| 浮层 · 面板 | 面板不透明度 0–100% | 作用于所有浮层：菜单、弹窗、悬浮卡、各类面板。100% = 实心 |
| | 面板颜色 | 不勾选 = 跟随主题（亮/暗自动适配）；勾选 = 固定颜色 + 上面的不透明度 |
| | 毛玻璃模糊 0–60px | 越大越糊；与不透明度配合，0 且 100% = 完全不透 |
| | 强力模式（默认开启） | 直接给浮层元素写 background / backdrop-filter，覆盖第三方面板自带、写死在 CSS 里的样式；目标选择器可编辑 |
| 背景与层次 | 主背景色 / 侧栏底色 / 卡片层色 | 分别对应底色、侧栏、卡片层次 |
| | 强调色 | 选中态 / 链接 / 高亮 |
| 形状与字号 | 圆角 0–24px | 菜单、弹窗、卡片 |
| | 正文字号 −4 ~ +8px | 对话正文缩放 |
| | 滚动条宽度 4–20px | 侧边滚动条 |
| 其它 | 隐藏分隔线 | 把两级边框色设为透明 |
| | 显示/隐藏悬浮按钮 | 关掉后仍可从 设置 → 外观调校 进入 |

预设按钮：完全不透明 / 恢复 DSH 默认 / 纯色极简 / 全部重置 / 复制配置（JSON 到剪贴板）。

与 dsh-watcher 的兼容性

dsh-watcher 的面板没有用 backdrop-filter，背景也直接写死在自己的 CSS 里，所以它不会跟随"全局令牌"这一类改动。本插件的强力模式（默认开启）已经内置了它的面板选择器：

.xlpj2W_menu, .CEmiCq_hudBox, .CEmiCq_drilldownPanel, .CEmiCq_vizPanel, .CEmiCq_heatmapPanel

装好本插件后，对 dsh-watcher 的效果：

| 项目 | 是否作用于 dsh-watcher 面板 | 说明 |
| 面板不透明度 / 面板颜色 | ✅ | 强力模式直接给它写 background |
| 毛玻璃模糊 | ✅ | 强力模式给它补上 backdrop-filter（它自己没写，只有这样才能出毛玻璃） |
| 强调色 / 正文字号 / 滚动条宽度 / 分隔线 | ✅ | 走全局令牌 |
| 圆角 | ❌ | 它主面板把 border-radius:12px 写死在 CSS 里，本插件不改第三方源码 |

不想让 dsh-watcher 跟着变，把上面那些选择器从「目标选择器」里删掉即可；想覆盖别的插件的面板，把它的 class 加进去就行。

安装

从 GitHub 安装

桌面应用（Desktop profile）
dsh plugin --profile desktop add github:zxyxxby/dsh-appearance-tuner

纯 Web（web profile）
dsh plugin --profile web add github:zxyxxby/dsh-appearance-tuner

装完重新打开 Host / 重启 DeepSeek Harness，再刷新页面。

从本地目录安装

dsh plugin --profile desktop add /path/to/dsh-appearance-tuner

卸载

dsh plugin --profile desktop remove dsh-appearance-tuner

使用

1. 右下角出现 ◐ 悬浮按钮（默认 34% 透明度，悬停变亮），点一下展开面板。
2. 也可以在 设置 → 外观调校 里打开（若 profile 启用了设置页）。
3. 改动立即生效；配置保存在浏览器 localStorage 的 dsh-appearance-tuner:v1 键里。

想要实心面板：不透明度拉到 100%、模糊设 0。
想要毛玻璃：不透明度 55–85% + 模糊 20–60px。

实现要点

- 无构建步骤：lib/client.js 就是浏览器分发文件，采用 DSH 客户端插件格式
window.__ModuleLoader__.load({ id, factory })，在 factory 里导出 name / inject / apply。
- 覆盖分两层：
1. 全局令牌：body, body * { --dsw-menu-surface-fill: … !important; … }
2. 强力模式（元素级）：html body <你的选择器> { background / backdrop-filter !important }，用 html body 前缀提升优先级，压过第三方插件自己的 CSS。
- 宿主侧 lib/index.js 是 Loader 可见的空实现（与 DSH 自带的 @deepseek-ai/dsh-client-ui-jobs 写法一致），真正的功能全在浏览器侧。
- 面板本身用独立 CSS（dat- 前缀），不受被覆盖的令牌影响，暗色/亮色下都可读。

兼容性

- 需要 DeepSeek Harness 0.2.0-rc.2（客户端插件契约，以及 @deepseek-ai/dsh-client-ui-slots 提供的 slots 服务）。
- 只覆盖 DSH 的全局外观令牌与浮层元素，不改动任何 DSH 或第三方插件的源文件。

开发

node tests/smoke.mjs # 用最小 DOM 桩离线加载客户端分发文件，验证契约与 CSS 生成

改 lib/client.js 后刷新页面即可看到效果；调整文件结构后需要重启 Host。

License

MIT