前言¶
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） |
注意事項¶
- 路徑限制：插件必須在純 ASCII 路徑下運行。若路徑包含非 ASCII 字符，可能導致路徑 mojibake（errno -4094）。建議避免使用中文路徑或使用 junction 符號（某些環境下不可穿透）。
- 配置完整性：必須同時滿足“源碼在
node_modules中”和“package.json中登記了dsh.profile.bundles”，插件纔會加載。 - 皮膚依賴：插件注入的 CSS 規則帶有皮膚門控（
html[data-dsh-skin='orca-scene']），切換至其他皮膚時折射層會自動失效。 - 配置存儲：調整後的參數會保存在
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 端實現高擬真的液態玻璃交互體驗。
