液态玻璃皮肤 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+）。