液态玻璃皮肤wwwAngHua/dsh-liquid-glass

DeepSeek Harness · Liquid Glass（液态玻璃）个性化皮肤

截屏

把 DeepSeek Harness 的 Web UI 整体改造成 液态玻璃（Liquid Glass） 风格，
并在 设置 → 个性化 中新增完整的壁纸与外观自定义面板。

实现方式

DeepSeek Harness 的浏览器插件由 dsh-client-modules 扫描后经
/plugins//client.js 提供给前端（cache-control: no-cache，刷新即生效）。
本项目将全部功能注入到 dsh-client-ui-theme（主题插件）的客户端 bundle 中：

- 主题插件本身已经持有 slots / locale 服务并注册了「外观」行，天然是外观
自定义的宿主；
- 修改的是 已存在插件 的 bundle，因此 无需重启 DSH 服务，刷新页面即可；
- 原 bundle 已备份在 backup/client.original.js，可一键还原。

功能

液态玻璃（Liquid Glass）全局皮肤
- 所有面板、侧栏、设置弹窗、菜单、气泡、输入框改为半透明毛玻璃：
backdrop-filter: blur() saturate() + 半透明底色（color-mix 按明暗主题取色）。
- 玻璃高光描边（顶部内发光 + 白色 hairline 边框）、统一圆角、柔和投影。
- 全量覆盖 --dsw- 设计令牌，所以每个组件自动变玻璃，无需逐类定制。
- 可调：面板透明度、背景模糊、色彩饱和、圆角、光晕强度。
- 一键总开关：关闭即完全恢复官方外观。

自定义壁纸（设置 → 个性化 → 壁纸）
- 类型：渐变 / 图片 / 视频 / 无
- 7 款内置动态渐变（极光/海洋/落日/星云/晨曦/霓虹/墨韵），支持缓慢流动动画
- 图片/视频壁纸：本地上传（存入 IndexedDB，不占 localStorage）或输入 URL
- 可调：透明度、模糊、亮度、饱和度、暗化、填充方式（铺满/适应）
- 视频壁纸：静音、循环开关（自动播放已按浏览器策略静音处理）
- 实时预览 + 所见即所得（设置面板本身就是半透明的，壁纸透过玻璃可见）

其他个性化
- 自定义主题色（吸色器 + 8 款预设），可全局应用到按钮/链接/激活态
- 动态效果总开关（关闭全部动画/过渡）
- 一键恢复默认

持久化
- 设置保存在 localStorage（dsh.liquid-glass.v1）
- 上传的图片/视频保存在 IndexedDB（dsh-liquid-glass 库）
- 全部刷新/重启后保留

目录

dsh-liquid-glass/
├── src/
│   ├── liquid-glass.css     # 液态玻璃皮肤样式（全部规则挂在 html[data-lg] 下）
│   ├── addon.js             # 引擎 + 设置面板（locales / IDB / 壁纸渲染 / React UI）
│   ├── addon-css-block.js   # 样式注入块（含 __LG_CSS__ 占位）
│   └── addon-apply.js       # apply(ctx) 内的接入代码
├── backup/client.original.js  # 官方原始 bundle（还原用）
├── dist/client.new.js         # 构建产物
├── build.js                   # 拼接构建脚本
├── deploy.sh                  # 部署到 DSH 安装
├── restore.sh                 # 还原官方 bundle
└── test-.js                  # 无头测试（load / apply / render / CDP）

构建与部署

node build.js        # 生成 dist/client.new.js
./deploy.sh          # 复制到安装目录（需要写 ~/.npm 权限）

已知修复（v2）

- 设置弹窗被压缩进侧边栏：backdrop-filter 会把元素变成 fixed 后代的包含块，
而设置弹窗正好挂在侧边栏列内部。已改为把毛玻璃模糊/填充放在列的 ::before
伪元素上（伪元素不产生包含块），弹窗恢复为视口居中全屏显示。
- 聊天区底部白色大板：输入卡片原为 82% 不透明白色。已降为 62% 半透明并加
backdrop-filter 磨砂，与整体液态玻璃风格一致。

已知修复（v3）

- 个性化页面风格统一：原来使用重色大卡片（带填充+阴影），与原生设置页
（模型/插件标签页）的卡片语言不一致。已改为原生样式——透明底 + 1px 细边框
+ 圆角 10px + 无阴影，标题改为原生 14px/600，像素级对比与原生页一致。
- 侧边栏白色渐变：真凶是会话列表底部的 .qDHVXG_fade 淡出条
（linear-gradient(to bottom, transparent, var(--dsw-specific-sidebar-fill))），
在玻璃侧栏下会渲染成一条白带。已将其背景置为透明。

已知修复（v4）

- 个性化页面改为平铺风格：彻底去掉卡片边框与圆角，三个分组（壁纸 / 液态玻璃
/ 其他）之间用 border-top 细分隔线区分，与原生"通用"设置页的平铺行风格一致。

新增功能（v5）

- 代码卡片 macOS 红黄绿灯：我输出的代码块（.md-code-block）与文件读取卡片
（[data-read]）的左上角添加苹果风格的红/黄/绿装饰灯（纯装饰，不挡交互）。
- 文字颜色自定义：个性化新增「文字颜色」分组——界面文字颜色（全局主文字色，
覆盖 --dsw-alias-label-primary）与 AI 输出文字颜色（作用于
[data-chat-flow-kind="assistant"/"assistant-step"] 的聊天输出文本），各带
启用开关 + 吸色器 + 8 款预设。

已知修复（v5.1）

- 代码卡片头体统一：卡片头（banner）原比卡片体更白（90% vs 82% 透明度），
接缝处显出一条"分割线"。已将
--dsw-alias-markdown-code-block-banner 与 --dsw-alias-markdown-code-block
统一为同一个玻璃色，头与体成为一整块连续表面，无分割线。

已知修复（v5.2）

- 个性化导航图标：设置导航的图标由 ui-settings-general 按 section id 硬编码
映射，liquid-glass 原先落到默认齿轮。已为该 id 补上 IconSparkle16（星光）
映射（同时备份了该插件的原始 bundle，deploy/restore 脚本均已覆盖）。

新增功能（v6）

- 授权提示音：聊天输入框工具栏（添加文件/权限按钮之后）新增喇叭图标按钮
（SVG 图标，非 emoji）。当工具需要授权（检测到 [data-approval-key] 授权面板
出现）时播放双音提示音（WebAudio 合成，无音频文件）。开关状态持久化。
- DeepSeek 余额钱包：喇叭按钮后新增钱包图标按钮，点击弹出可自由拖动的
小弹窗（右上角关闭按钮），显示绿/红圆点 + 账户余额：X.XX CNY（取
total_balance，优先 CNY 币种；绿点=可用，红点=不可用/失败），支持手动刷新。
- 优先走服务端代理 /lg-balance（node half 用宿主 DEEPSEEK_API_KEY 请求
https://api.deepseek.com/user/balance，密钥不出服务器；该路由需重启服务
后生效）；
- 代理不可用（未重启）时：若本机 localStorage 有已粘贴的 Key 则直接请求；否则
通过 credentials.describe 探测宿主是否已配置 DEEPSEEK_API_KEY——已配置则
提示"重启服务后自动生效"、不再要求输入；只有宿主也未配置时才显示粘贴框。

已知修复（v6.1）

- 钱包关闭按钮失效：关闭按钮内含 SVG，点击时 pointerdown 的目标是 SVG 而非
按钮本身，被标题栏拖拽逻辑误判为拖拽（指针被捕获，click 不再派发到按钮）。已
改为 close.contains(e.target) 判定，关闭恢复正常，拖拽不受影响。
- 密钥复用：浏览器无法读取宿主密钥（credentials.describe 只返回已配置状态、
不返回值）。弹窗现在会探测"宿主已配置密钥"并停止要求输入，改为提示重启后自动
生效；代理路由（/lg-balance）在重启 DSH 服务后启用，届时余额零配置直出。

还原

./restore.sh         # 恢复 backup/client.original.js

注意事项

- 修改的是 npm 缓存中的安装（/Users/wwwanghua/.npm/_npx/…/dsh-client-ui-theme）。
DSH 升级或 npm 缓存清理后需要重新 ./deploy.sh。
- 生效方式：刷新浏览器页面（Cmd+R），无需重启 DSH 服务。
- 浏览器需支持 backdrop-filter / color-mix（Chrome 111+ / Safari 16.2+ / Firefox 113+）。