FAVKTOXIC/dsh-theme-liquid-glass

dsh-theme-liquid-glass

DeepSeek Harness Web UI 的纯正液态玻璃主题。

English

一套完整的磨砂玻璃皮肤：SVG 边缘折射、可自定义的动态壁纸、玻璃透镜质感按钮、
重新设计的全屏模型选择器，以及专属的水滴设置图标。

v0.4.2 — 需要 DeepSeek Harness ≥ 0.1.2-rc.1。本版本适配 harness 的客户端包拆分：
已被移除的 @deepseek-ai/dsh-client-runtime 的 store 部分迁移到了
@deepseek-ai/dsh-client-store。详见 CHANGELOG.md。

功能特性

液态玻璃界面
- SVG 边缘折射 · 通过 feDisplacementMap 在输入卡片、发送按钮、消息气泡、
视图标签、队列坞、侧边栏按钮上实现边缘折射效果。强度可通过滑块调节。
- 磨砂玻璃质感 · 用 token 覆盖（ctx.theme.overrideTokens）把 --dsw-alias-
语义 token 替换为半透明玻璃质感值。玻璃参数由 body 上的 --dsh-lg- 自定义
属性驱动，改动即时生效。
- 玻璃透镜按钮 · 发送、视图标签、侧边栏操作、命令 (+) 按钮全部采用玻璃
材质 + 边缘折射。
- 水滴设置图标 · 设置导航中的齿轮被水滴图标取代，一眼可辨。
- 悬浮高亮 · 所有可交互元素在悬停时呈现细微光晕与抬起效果。

壁纸与背景
- 自定义背景模糊与亮度 · 独立控制壁纸模糊（bgBlur）与亮度（brightness），
让背景在玻璃之下呈现最佳效果。
- 内置动态演示壁纸 · 开箱即用的色块壁纸，可通过速度、色块数量、颜色变化、
模糊、透明度调节。
- 多种壁纸来源 · 网页链接（iframe，可选 host 代理）、本地 HTML、本地图片、
本地视频。

模型选择器
- 重新设计的模型选择器 · 全屏毛玻璃选择器，provider 分组网格布局 + 悬停
高亮——跳过中间根面板，直达模型列表。

设置页
- 独立的顶层 「液态玻璃」 页面（settings.section，与 通用设置 / 模型 /
插件 并列），分「页面背景」「输入卡片 · 磨砂玻璃」两组。所有改动实时生效，
「恢复默认」一键还原。
- 一键关闭 · 主开关会同时撤掉全部 token 覆盖、移除壁纸、关闭所有磨砂/透镜
规则——所有视觉都挂在 body.dsh-lg-on 门控 class 上，关闭即零残留。

实现要点
- 磨砂用 filter: blur() 打在独立背景层上（inset: -48px 留出出血），绝不
用 #root 上的 backdrop-filter——非 none 的 backdrop-filter 会让 #root
成为所有 position: fixed 后代的包含块（菜单、弹层、toast 会被重新锚定）。

目录结构

src/index.ts          host 半区：壁纸文件路由 + 文件上传 + 网页代理
src/client/index.ts   browser 半区：token 层 + 背景图层 + 玻璃参数 + 设置页
src/shared.ts         常量与设置类型（无运行时依赖）
build.mjs             swc 构建（lib/index.js + lib/client.js 加载器格式）

安装到 web profile

方式一：从 npm 安装（推荐）

dsh plugin add --profile web dsh-theme-liquid-glass

刷新浏览器即可生效。

兼容性：需要 DeepSeek Harness ≥ 0.1.2-rc.1。更早的 harness 版本使用
已移除的 dsh-client-runtime 包，v0.4.0 不再支持。

方式二：本地开发链接

用 Windows junction 把源码目录链接进 profile 的 node_modules
（直接 dsh plugin add "" 可能生成坏相对符号链接，并把该插件从
profile 的 bundles 列表里移除）：

1) 移除残留条目
dsh plugin remove --profile web dsh-theme-liquid-glass

2) 用 junction 指向源码目录
New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\web\node_modules\dsh-theme-liquid-glass"
-Target "" -Force

3) 确保主题出现在 profile bundles
dsh plugin add --profile web dsh-theme-liquid-glass

刷新浏览器即可生效。

改代码后：重新构建，然后刷新。
cd
node build.mjs

client 改动（设置页 UI、玻璃参数）构建后刷新即可生效；
host 改动（路由、上传端点）需要重启 dsh web 重新加载 host 半区。

构建

npm install
npm run build        # 一次性构建（lib/index.js + lib/client.js）
npm run watch        # watch 模式（配合 client-hmr 热替换）
npm run dev          # 构建 + 冒烟测试
npm test             # 运行客户端冒烟测试
npm run typecheck    # tsc --noEmit

客户端注入说明

client 半区必须导出 inject 数组（服务名）：['slots','locale','theme']
（与已发布的 dsh-ui-appearance / dsh-dream-skin 插件一致）。client loader 用
它构建 fiber 注入表，缺失会导致 cannot get property X without inject 并让
整个 web boot fail-loud。apply() 整体有 try/catch 兜底——运行时错误只降级，
不会把 GUI 带崩。

持久化说明（为什么用 localStorage）

设置保存在浏览器 localStorage（键 dsh-liquid-glass.settings），不走
settings RPC：harness 的 settings 网关只对浏览器客户端暴露硬编码的产品
命名空间，第三方命名空间即使 host 半区注册了也不会送达客户端 scope
（客户端会一直停在 loading）。已发布的 dsh-ui-appearance / dsh-dream-skin
插件都遇到同一堵墙，并都选择了 localStorage。

代价：设置跟随浏览器——换浏览器或清站点数据会丢失。

设置项参考

| 字段 | 说明 |
| --- | --- |
| enabled | 总开关 |
| wallpaper.kind | none / url / html / image / video / local |
| wallpaper.value | 网页链接或 wallpapers 目录下的相对路径 |
| wallpaper.proxy | 网页链接走 host 代理（绕过 X-Frame-Options） |
| wallpaper.muted | 视频壁纸静音（默认 true；取消静音可能被自动播放策略阻止） |
| demo.speed | demo.html 动画速度倍率 0.1–4（步进 0.1） |
| demo.blobs | demo.html 色块数量 1–6 |
| demo.colorCycle | demo.html 颜色变化 0–10（0=静态） |
| demo.blur | demo.html 色块模糊 10–140px |
| demo.opacity | demo.html 色块不透明度 0.2–1 |
| demo.wash | demo.html 背景渐变流动开关 |
| glass.frosted | 磨砂开关（输入卡片/气泡/队列坞 backdrop 模糊） |
| glass.blur | 输入卡片磨砂强度 0–60px |
| glass.bgBlur | 背景壁纸独立模糊 0–60px（与卡片磨砂解耦） |
| glass.refraction | 边缘折射 0–1 |
| glass.tint | 玻璃颜色 |
| glass.tintOpacity | 玻璃颜色不透明度 0–1 |
| glass.toolTextColor | 操作文字颜色（十六进制，空=默认） |
| glass.codeBlockOpacity | 代码块背景不透明度 0.2–1（独立于玻璃颜色不透明度） |
| glass.glassBrightness | 玻璃材质亮度 0.2–1.6（tint 明度缩放，>1 变亮 /wallpapers 下是否存在 demo.html。
若不存在，会自动写入内置默认演示壁纸（已有文件不会被覆盖）。默认路径为
$DSH_HOME/wallpapers/demo.html；壁纸目录可通过 wallpaperDir 配置项修改。

预览

输入卡片边缘折射
液态玻璃气泡聊天界面
设置面板

许可证

MIT