dsh-theme-liquid-glass

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

一套完整的磨砂玻璃皮肤：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 变亮 <1 变暗） | | glass.brightness | 背景亮度 0.2–1.6 |

首次启动

插件首次启用时，会检查 <DSH_HOME>/wallpapers 下是否存在 demo.html。 若不存在，会自动写入内置默认演示壁纸（已有文件不会被覆盖）。默认路径为 $DSH_HOME/wallpapers/demo.html；壁纸目录可通过 wallpaperDir 配置项修改。

预览

许可证

MIT