dsh-liquid-glass-studio:DSH 液态玻璃主题与壁纸库

前言

在 DeepSeek Harness(DSH)里长时间写提示、审审批、切会话时,界面材质往往是一整块不透明面板:中间工作区即便能换背景,侧栏和浮层仍会挡住壁纸,读起来像「贴图在框里」而不是桌面一体。社区里常见的 glassmorphism 主题也常把 backdrop-filter 铺满整面,性能和可读性都不稳定。

下面介绍维护者 pure-serendipity-five 的客户端插件 dsh-liquid-glass-studio(包名 @local/dsh-liquid-glass):中间工作区全透明,左右侧栏、审批卡、弹窗采用分层「iOS 26 液态玻璃」材质,并附带可拖动的壁纸控制条与九宫格画廊。分类上属于 DSH 社区目录中的「趣味换装」;GitHub 仓库当前星标为 0。插件在 DSH 进程权限下运行,安装前建议自行阅读源码与 MIT 许可证。

这是什么

dsh-liquid-glass-studio 是面向 DSH Desktop 的主题类 Cordis 插件:纯 CSS 静态材质(styles.css)+ 包根目录的客户端半体(client.js)负责注册、探测 DOM、变量与本地存储;宿主半体(index.js)提供壁纸扫描与缩略图预览接口。

设计要点是「分层玻璃」:壁纸完整透出;字压不住的问题通过白纱、模糊与边缘光学(折射、色差、高光等五层规格)一起处理。左下角玻璃控制条可切换场景、环境音、壁纸,「画廊」按钮打开带缩略图的九宫格。

内容 位置
材质(纯 CSS,静态) styles.css
注册 / 探测 / 变量 / 存储 client.js(必须在包根)
壁纸服务 + 预览图接口 index.js
验证 test/

核心功能

五层玻璃光学

README 将合格实现定义为五层,缺层即不合格:

  1. 半透明层:rgba(255,255,255,var(--dshlg-alpha)) 与顶部柔光,档位值 × 区域倍数。
  2. 折射层:SVG 滤镜链,位移图用 <mask> 裁成只有外圈亮(边缘约 12%,强度 10px),避免整面 feDisplacementMap 扭曲背景。
  3. 色差层:::before 的 conic-gradient 彩虹环,只留最外缘约 2px。
  4. 高光层:顶光、菲涅尔内光环、指针跟随镜面高光。
  5. 动态层:pointermove 更新 --dshlg-mx/my;交互态模糊减弱、折射与高光增强(缓动 300ms)。

通透度四档由 CONFIG.glassTier 控制:clear(白纱 8%)、regular(3%,默认)、thin(1.5%)、off(0)。各区域相对厚薄由 REGION_MULT 决定(例如审批卡 10、弹窗 13、侧栏 4.6 等),换档时整体联动。

自适应与性能预算

  • 亮 / 暗主题跟随 theme/change,颜色走 --dsw-alias-*,不硬编码主题色。
  • prefers-reduced-motion: reduce:关闭悬停过渡与指针高光。
  • prefers-reduced-transparency: reduce:玻璃降级为约 92% 实色面板。
  • prefers-contrast: high:加强描边与阴影。
  • 玻璃预算:左栏 / 右栏 / 输入卡片等骨架面保留模糊;浮层(审批卡 / 弹窗 / 菜单)最多 2 处同时模糊,超出标记 data-dshlg-glass-over 降级为实色。左栏会话行使用行级玻璃(不单独吃 blur 预算)。
  • 右栏收起后整列零 blur、零不透明底色,与工作区同款透明(由 test/collapse.test.mjs 专项验证)。
  • 若 styles.css 加载失败,client.js 内联兜底材质仍可保持玻璃与降级逻辑。

壁纸与控制条

控制条布局:[壁纸▾] [画廊] | [场景…] | [松风] [音量] | [收起]。

宿主会扫描本包 wallpapers/、Steam 工坊 431960、Wallpaper Engine 的 projects/,仅支持 web / video 类型。缩略图经宿主 /__preview?id=…;列表接口 /__wallpapers 每项带 previewExt。壁纸服务依赖宿主半体在端口 39321~39324 上起的本地服务,插件会自动探测;探不到则回落内置背景层,其余主题功能仍可用。

安装与启用

DSH 生态是「一切皆插件」;社区目录 skillhub.cn 与 GitHub 仓库独立维护,并非 DeepSeek / 幻方官方应用商店。

通过插件管理器(约 30 秒)

在 DSH 左侧栏「插件」,或本插件控制中心的「插件」页,包名 / 仓库标识填写:

github:pure-serendipity-five/dsh-liquid-glass-studio

命令行等价写法

本机已安装 dsh CLI 时:

dsh plugin --profile desktop add github:pure-serendipity-five/dsh-liquid-glass-studio

装完后完全退出 DSH(托盘图标右键 → 退出;仅关窗口不算)再启动才会生效。需要 DSH Desktop;package.json 要求 Node >=20。

README 注明已向 awesome-dsh-plugin 提交收录(PR #6140),合并后可在 dsh-market 的「主题」页按名 dsh-liquid-glass-studio 搜索安装。

生效与热更新

改了什么 怎么生效
client.js / styles.css 按 F5 刷新
index.js(宿主半体) 完全退出 DSH 再启动
确认状态 控制中心 →「系统」页;或看左下角是否有壁纸控制条

典型用法与调参

经过上面的安装步骤后,日常操作主要在左下角控制条:换壁纸、打开画廊、切场景与环境音;「收起」会移除控制条,可通过改 CONFIG.wallpaper.controls 后 Ctrl+R 恢复。

进阶调参在 lib/client.js 顶部 CONFIG(README 调参速查示例):

glassTier: 'regular',            // clear 8% / regular 3% / thin 1.5% / off 0

glass: {
  blur: 18, saturate: 1.6, radius: 20,
  border: 1, borderAlpha: 0.18,
  topLine: 0.3, fresnel: 0.22,
  shadowY: 8, shadowBlur: 32, shadowAlpha: 0.35,
  edgeRefract: 10, edgeWidth: 0.12,
  chroma: 2, chromaAlpha: 0.22,
  activeBlur: 0.7, activeRefract: 1.6, activeHighlight: 1.5,
  pointerFollow: true,
},

sidebar: { alpha: null, frost: null },
rightWhenClosed: 'auto',
refractRegions: false,

侧栏滚动若仍卡,可将 glass.blur 降到 12,或改用 glassTier: 'thin'。浅色 / 明亮壁纸下对比度可能低于 4.5:1,可尝试 glassTier: 'clear' 或文档中的 contentFill: 'keep' 缓解。

安装异常时,可先运行:

node <插件目录>\test\check-install.mjs

检查 profile 的 bundle 列表、依赖链接与 client.js 路径。DSH 加载器固定请求 /plugins/<id>/client.js,客户端半体必须位于包根 client.js,仅放在 lib/client.js 并在 exports 声明会导致插件静默不加载。

适用场景与注意

适合谁:希望在 DSH Desktop 里把 Harness 做成「壁纸 + 分层玻璃 UI」的开发者或长期桌面用户;需要 Wallpaper Engine / Steam 工坊等本地壁纸源时,宿主半体价值更大。

务必注意:

  1. 插件与 DSH 同进程权限运行,安装前请阅读 GitHub 源码 与 MIT 许可证。
  2. 卸载或回滚:从 profile 的 package.json 去掉 @local/dsh-liquid-glass 条目后重启;仅 Ctrl+R 不会重新组合插件树。
  3. CONFIG 中外观键名(如 sidebarGlass)勿与功能开关同名,否则后者会覆盖前者导致调参无效。
  4. 开发改 index.js 必须冷重启;改客户端材质 F5 即可。

维护者提供了 test/ 下的诊断与验证脚本(含 collapse.test.mjs、verify.mjs),改样式但界面无变化时可先跑诊断 bat 或上述安装自检。

结尾

dsh-liquid-glass-studio 把 DSH 界面拆成「全透明工作区 + 预算内模糊骨架 + 浮层降级」的液态玻璃主题,并接上本地壁纸画廊与控制条。若你要在桌面 Harness 里统一视觉而不牺牲右栏收起时的通透,可按文档安装并完全重启 DSH 后体验。

  • 社区目录页:https://www.skillhub.cn/plugins/pure-serendipity-five/dsh-liquid-glass-studio
  • GitHub:https://github.com/pure-serendipity-five/dsh-liquid-glass-studio
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye