dsh-orca-glass:DeepSeek Harness 液态玻璃折射层

前言

DeepSeek Harness(DSH)采用插件化架构,皮肤系统主要负责静态的底色、磨砂与边框。复杂的液态玻璃折射效果(如色散边缘、动态高光)需要动态注入 SVG 滤镜,而皮肤系统通常没有 JS 执行权限。本插件旨在为 Web 端 DSH 注入 SVG 折射滤镜层,与 orca-scene 皮肤配合,实现完整的液态玻璃视觉效果。

插件概览

dsh-orca-glass 是由 huzhengbang2007 维护的一个趣味换装类插件。它通过 JavaScript 动态向文档注入 SVG 滤镜定义和覆盖层样式,利用 backdrop-filter: url(#svgFilter) 实现背景折射与色散,并配合指针移动实现高光跟随。

核心功能

插件主要完成以下工作:
1. SVG 折射滤镜注入:在 document.body 中注入 0 尺寸 SVG,包含 feTurbulence(波纹噪声)和 feDisplacementMap(位移映射),生成霜化、色散边缘与折射效果。
2. CSS 样式覆盖:注入 <style> 规则,限定在 html[data-dsh-skin='orca-scene'] 下,覆盖侧边栏、详情栏、气泡、输入卡等元素的样式。
3. 视觉增强:添加颗粒层(grain)、指针径向高光(spot)以及浮空玻璃卡片效果(float)。
4. 实时调参接口:提供全局对象 window.__orcaGlass,允许在运行时调整折射强度、色散、颗粒度等参数。

安装与配置

安装过程分为装皮肤和装插件两步,缺一不可。

1. 安装皮肤

首先需要安装配套的 orca-scene 皮肤。将整个 skin/orca-scene/ 目录复制到 $DSH_HOME/skins/orca-scene/(本机通常为 ~/.dsh/skins/orca-scene/)。随后在皮肤中心激活该皮肤,或在配置文件中指定:

// $DSH_HOME/skin-center-active.json
{ "active": "orca-scene", "initialized": true, "background": { "enabled": true, "inputCardBlur": 18, "bubbleOpacity": 55, "bubbleBlur": 14 } }

2. 安装插件

将插件包放入 profile 的 node_modules 目录中:

$DSH_HOME/profiles/<profile>/node_modules/dsh-orca-glass/

在 profile 的 package.json 中登记两处配置:dependencies 用于解析包,dsh.profile.bundles 用于加载插件层。

{
  "dependencies": { "dsh-orca-glass": "file:../../plugins/dsh-orca-glass" },
  "dsh": { "profile": { "bundles": [ /* ...其它 bundles... */ "dsh-orca-glass" ] } }
}

注意:客户端插件只在 DSH 启动时装载,修改配置后需重启 DSH。

参数调整

插件加载后,在浏览器控制台可使用 window.__orcaGlass 进行调参。

常用方法

window.__orcaGlass.get()                         // 获取当前参数
window.__orcaGlass.tune({ refract: 32, chroma: 12 }) // 调整折射强度与色散
window.__orcaGlass.tune({ float: false, grain: 0 }) // 关闭浮空卡或颗粒
window.__orcaGlass.reset()                       // 重置为默认参数
window.__orcaGlass.css()                         // 获取当前生成的 CSS 文本

参数说明

参数 默认值 说明
refract 18 折射位移强度(feDisplacementMap scale,px)
chroma 7 三通道色散差,值越大边缘彩边越明显
frost / frostSoft 14 / 9 大面/小面霜化程度(feGaussianBlur stdDeviation)
grain 0.35 颗粒层不透明度(0..1)
float true 左右两栏浮空玻璃卡(左栏 + 右详情栏)
spot / spotSize 0.15 / 560 指针高光强度与半径(px)

注意事项

  1. 路径限制:插件必须在纯 ASCII 路径下运行。若路径包含非 ASCII 字符,可能导致路径 mojibake(errno -4094)。建议避免使用中文路径或使用 junction 符号(某些环境下不可穿透)。
  2. 配置完整性:必须同时满足“源码在 node_modules 中”和“package.json 中登记了 dsh.profile.bundles”,插件才会加载。
  3. 皮肤依赖:插件注入的 CSS 规则带有皮肤门控(html[data-dsh-skin='orca-scene']),切换至其他皮肤时折射层会自动失效。
  4. 配置存储:调整后的参数会保存在 localStorage["dsh-orca-glass"] 中。

卸载

  • 停用插件:从 package.json 的 dsh.profile.bundles 中移除 dsh-orca-glass 并重启 DSH。
  • 回退效果:临时调用 window.__orcaGlass.tune({ refract: 0, grain: 0, float: false })。
  • 换皮肤:折射层会随皮肤切换自动失效。

总结

dsh-orca-glass 通过补充 JS 能力,解决了 DSH 皮肤在动态滤镜渲染上的短板。配合 orca-scene 皮肤,能在 Web 端实现高拟真的液态玻璃交互体验。

羽毛球分组比赛记分
小程序二维码

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

小夜