dsh-liquid-glass-composer

dsh-liquid-glass-composer

把 DeepSeek Harness 的输入框变成一片液态玻璃。

顶部镜面高光、内缘白线、边缘缓慢绕行的镶边光；模型思考时玻璃里往上冒泡； 深浅主题切换带 1.7 秒的从容过渡。

安装

dsh plugin --profile <你的 profile> add dsh-liquid-glass-composer

从 GitHub 装：

dsh plugin --profile <你的 profile> add github:Siloet-phy/dsh-liquid-glass-composer

桌面版 DSH 的包管理需要先完全退出 DSH 再执行；装完重启生效。 profile 名一般是 desktop（桌面版）或 web（dsh web 起的服务）。

它做了什么

两个我坚持的设计决定

1. 玻璃里不放颜色。 真正的液态玻璃几乎是"无色"的——透白玻璃 + 染白的雾 + 白边色散。 颜色只允许出现在边缘的高光上。任何"玻璃内部有一团彩色在流动"的做法， 看着都会像彩色塑料。（我做出过六版彩色玻璃，全被否了。）
2. 不改 DSH 原生输入框的任何样式与结构。 本插件只往 slot 里加一层，靠 CSS 变量贴合尺寸。 所以原生主题、字号、布局更新都不会和它打架；卸载后原样恢复。

兼容性

• DSH：0.2.0-rc.2 及以上（依赖 conversation.input.overlay slot 与 ctx.theme 的 theme/change 事件）。
• 平台：Web 客户端（桌面版内置浏览器 / dsh web）。纯 CLI 会话不受影响。
• 浏览器：Chromium 系（Electron）。mask-composite 与 backdrop-filter 需要现代内核。
• 无障碍：遵循 prefers-reduced-motion——开启后所有动画停止，只保留静态玻璃与状态色。

开发

node selftest.mjs                      # 19 项：替身环境，验证模块面与 apply() 行为
node livetest.mjs <react-umd 目录>      # 20 项：真 React + 真 DOM，验证真的能渲染

• selftest.mjs：用替身把客户端 bundle 完整跑一遍——语法、模块面（name/inject/apply）、 apply() 在有无服务时的行为、slot 注册目标、样式挂载、theme/change 订阅、组件渲染。 改完 client.js 先跑它，因为客户端 bundle 一旦在最顶层抛错会牵连 Web 端模块系统。
• livetest.mjs：需要 react/react-dom/jsdom（故意不进 package.json 依赖， 避免让插件包带上开发期重量）。它用真 React把玻璃层真的挂进真 DOM，并验证 running 状态翻转时 data-busy / data-on 跟着变、卸载后 DOM 清干净。

两个测试装置上的坑（都写进注释了）： ① document/window 必须在 require('react-dom') 之前就位； ② 必须用 createRoot + act()，不能用 legacy ReactDOM.render—— legacy render 会把 passive effects 推到下一个任务，同步断言时会看到 "玻璃层没进 DOM"这种假失败。

技术笔记

• 主题：直接消费 DSH 的 --dsw-* token 与 body[data-ds-dark-theme]， 不自己管理主题状态；过渡窗口通过监听 ctx.theme 的 theme/change 事件实现。
• 挂点：conversation.input.overlay（list，session 作用域）； "模型是否在思考"来自标准 props 的 useSession((s) => s.running)。
• 踩过的坑（都写进注释了）：
  • mask-composite 必须 -webkit- 前缀 + 标准属性双写，否则镶边会糊成实心块。
  • 玻璃里的彩色无论多淡都会显土；低饱和色块压在深底上还会变泥浆色。
  • 循环动画必须让元素在关键帧里自己收束——曾做成"无限上浮"，到顶被裁掉，看不出破灭。
  • 给会动的元素做 scaleY 调幅度时必须显式写 transform-origin，否则元素会"消失"。
• 参考： wxperia/liquid-glass-vue 与 rdev/liquid-glass-react（折射位移图的算法来源）， 以及 Apple 的液态玻璃设计语言。

截图说明

docs/light.png 与 docs/dark.png 是设计稿（单文件 HTML 演示）在浏览器里的实拍； 插件的实现与设计稿逐像素对齐（同一套 CSS）。设计稿与全部探索过程在同一作者的 magic-cast 工作目录里，未随包发布。

卸载

dsh plugin --profile <你的 profile> remove dsh-liquid-glass-composer

卸载后输入框恢复原样，不会残留样式（样式表随插件生命周期移除）。

许可证

MIT