毛玻璃主题 hashdiana/dsh-blur-theme

dsh-gaussian-blur

一个用于 DeepSeek Harness Web UI 的毛玻璃主题。

GitHub stars
License: MIT
DSH Plugin

🌐 English ·

自带的 Web UI 让每个栏位都不透明、每条边缘都生硬。dsh-gaussian-blur 将其重塑为玻璃主题：侧边栏变成圆角悬浮卡片，会话标题栏变成毛玻璃栏，对话文本在其下方一直融化到浏览器顶部边缘，而输入框区域则悬浮在如今延伸到窗口最底部的内容之上。

🎯 栏位应当悬浮于内容之上——而不是把内容切断。

截图

玻璃对话视图：圆角侧边栏卡片、毛玻璃标题栏、悬浮输入框卡片。

滚动中：消息融入窗口的顶部和底部边缘，而不是在生硬的栏位处消失。

目录

- 截图
- 亮点
- 它改变了什么
- 安装
- 卸载 / 禁用
- 构建与开发
- 工作原理
- 许可证

亮点

- 悬浮圆角侧边栏 —— 侧边栏呈现为一张卡片（22px 圆角、细线边框、柔和阴影、主题背景），并带有对称的内边距；折叠后的侧边栏变成贴边的胶囊形。
- 毛玻璃标题栏卡片 —— 会话栏（会话名称、智能体预设、标签页）是一张半透明模糊卡片，悬浮在对话之上。
- 内容在窗口边缘融化 —— 消息在毛玻璃标题栏下方滚动，一直延伸到浏览器的顶部边缘并在那里恰好消失，同时延伸到输入框区域下方的底部边缘。没有任何内容在栏位处被生硬裁剪。
- 悬浮输入框 —— 输入框卡片是一块统一的毛玻璃面板（无渐变、无光晕），悬浮在滚动区域之上。
- 边缘渐隐，无模糊瑕疵 —— 融化效果是纯色渐变；渐隐部分不使用 backdrop-filter，因此没有次像素边缘杂色。
- 实时模糊滑块 —— 通用设置 → 卡片高斯模糊（0–100；0 = 关闭，100 = 30px，默认 60 = 18px）实时驱动两张玻璃卡片并持久保存。
- 主题自适应且支持双语 —— 仅使用 --dsw- 令牌进行样式设置（浅色/深色），提供中文和英文版本。

它改变了什么
| 表面 | 效果 |
| 侧边栏列 | 圆角悬浮卡片，细线边框 + 阴影，背景与页眉卡片匹配 |
| 侧边栏树边缘 | 可滚动时顶部/底部纯色渐隐（40px）；替代内置的底部渐隐 |
| 会话页眉 | 半透明 + 模糊的悬浮卡片；工具药丸固定在视口右上角 |
| 对话顶部边缘 | 内容在磨砂页眉下方滚动至浏览器顶部边缘；边缘处实色的渐变恰好在此处将其消融 |
| 对话底部边缘 | 内容延伸至浏览器底部边缘；底部实色的渐变将其向上消融进输入区带状区域 |
| 输入卡片 | 均匀的磨砂玻璃（模糊 + 饱和度 + 半透明填充），无光晕 |
| 设置 | 通用设置中的悬浮卡片高斯模糊滑块行，持久化在浏览器存储中 |

安装

从 GitHub 安装（推荐）：

npx -p @deepseek-ai/dsh dsh plugin --profile web add github:hashdiana/dsh-blur-theme

从本地检出安装：

npx -p @deepseek-ai/dsh dsh plugin --profile web add

然后重启配置文件：

dsh web

Git 路径附带构建好的 lib/（参见构建与开发），因此安装时不会运行构建脚本。插件集变更需要重启；之后仅客户端 bundle 的更新在刷新页面后生效。

卸载 / 禁用

临时禁用而不卸载——添加到 $DSH_HOME/profiles/web/cordis.patch.yml：

- id: dsh-gaussian-blur
disabled: true

重启 dsh web；原生界面恢复。移除这些行即可重新启用。

构建与开发

pnpm install
pnpm typecheck # tsc -b
pnpm build # tsc -b + tsdown → lib/index.js (host) + lib/client.js (browser)
pnpm test # vitest: enhancer markup/pass, settings row, plugin contract, bundle purity

客户端 bundle 以 window.__ModuleLoader__.load({ id, factory }) 形式输出；CSS Modules 由 lightningcss 进行哈希处理，并作为 标签注入。提交 lib/——Git 安装使用构建产物，而非 src/。

工作原理

- 纯客户端插件——宿主端注册插件的设置命名空间 schema（向前兼容：目前 Web 设置传输仅提供框架允许列表中的命名空间，因此浏览器端将偏好持久化在浏览器本地存储中）；视觉表面通过 exports["./client"] 提供。
- 仅使用稳定钩子——锚点来自已发布 UI 的稳定 data- 属性（data-shell-overlay、data-conversation-scroll、data-composer-seat/data-composer-card、div[data-phase]、[role="tree"]）；增强器打上自己的 data-gb-* 标记（穿过插槽 display: contents 包装器），一个样式表完成所有视觉工作。不使用哈希类名。
- Body 级淡出 — 边缘消融是附加到 document.body 的 position: fixed 覆盖层（React 从不触碰 body 子元素），纯实色→透明渐变，pointer-events: none，z-index: 5，位于所有浮动控件之下。
- 玻璃效果而不破坏胶囊 — 头部的 backdrop-filter 位于 ::before 层上；如果它位于卡片本身，Chromium 会将其作为固定工具胶囊的包含块，并将其拖出视口角落。
- 幂等 + 自愈 — 标记处理会从防抖的 MutationObserver 以及滚动/调整大小事件重新运行；dispose（HMR/卸载）会移除每个标记和覆盖层，恢复内置侧边栏淡出，并断开所有观察器。

许可证

MIT