液态玻璃输入框 typemiao/dsh-liquid-chatbox

dsh-liquid-chatbox

关于

为 DSH 桌面 UI（Electron/Chromium）打造的液态玻璃输入卡片。
只给输入卡片加样式：保留半透明底色，再用 SVG 位移透镜和逐通道色散，折射卡片背后的内容。

这个包不改调色板、字体、窗口边框，也不改全局表面样式。它是纯客户端 bundle，没有构建步骤，也没有原生依赖。

特性

- 折射输入卡片：输入卡片用 SVG feDisplacementMap 弯折背后的内容，采用 BK7 玻璃模型和凸起边缘轮廓。
- 色散：三份位移副本（R、G、B 各用自己的折射率）先用 feColorMatrix 分离，再做滤色混合。
- 贴合卡片的位移图：位移图按卡片实际宽高比和圆角生成，卡片变大或变小时重新生成，透镜带始终贴在边框上，不会漂移。
- 上下对称：顶部和底部都朝卡片中心采样，两条边框的透镜效果一致。
- 设置：设置 → 通用 → 玻璃质感：模糊、卡片底色、折射强度、色散，带重置按钮。数值保存在 localStorage 的 dsh-glass-settings 下。
- 无需构建：纯 ESM，由 DSH 客户端模块加载器加载。

环境要求

- DSH 桌面应用。透镜滤镜挂载在 dsh-app:// 上；在普通浏览器里，卡片保留底色和模糊，但 SVG 透镜不会挂载。
- 基于 Chromium 的渲染器（backdrop-filter: url(#svgFilter) 只有 Chromium 支持）。
- 窗口材质推荐 Windows 11；卡片在任何页面都能用，但卡片背后没有内容时，正是亚克力背景让折射效果可见。

安装

方式 A：手动（配置档）

1. 把这个文件夹复制到 DSH 配置档：

%USERPROFILE%\.dsh\profiles\desktop\node_modules\dsh-liquid-chatbox

2. 把插件加进 %USERPROFILE%\.dsh\profiles\desktop\cordis.patch.yml：

- insert:
- id: liquid-chatbox
name: dsh-liquid-chatbox

3. 重启 DSH 桌面应用。

pnpm 可能清理不在配置档依赖树里的包。如果你用 pnpm 管理配置档，把插件注册成 file: 依赖（或作为 bundle 安装），免得它被挪到 node_modules/.ignored。

方式 B：bundle/插件管理器

包自带 cordis.patch.yml（dsh.bundle.patch），认识 DSH bundle 格式的管理器可以直接安装。装好包，重启应用即可。

使用

打开设置 → 通用，滚动到玻璃质感。滑块即时生效；「恢复默认」会把模糊重置为 0.5px、底色 18%、折射 0.04、色散 2.5。

工作原理

- client.js 注入一个 元素，并挂载输入卡片使用的透镜 SVG 滤镜（#dsh-lg-refract）。
- 位移贴图在运行时生成，来源是一张圆角矩形 SDF，其宽高比与圆角半径都和卡片一致；色带宽度为 36px（随卡片宽度缩放），且轮廓单调，因此映射不会折叠。
- 卡片使用：

backdrop-filter: blur(0.5px) url(#dsh-lg-refract)
contrast(1.05) brightness(1.1) saturate(1.8);

- 色散用三份位移副本（R、G、B）实现，用 feColorMatrix 分离，再做滤色混合。

0.2.0 的改动

- 作用范围收窄到输入卡片：移除了粉色点缀、Maple Mono 覆盖、玻璃窗口边框和全局表面重绘。
- 位移贴图现在匹配卡片的宽高比与圆角半径，并在尺寸变化时重新生成，修复了色带偏离边框的问题。
- 上下边缘对称地向卡片中心取样，因此下边框能呈现与上边框相同的反射。
- 恢复为单调的边缘轮廓：此前的凸起轮廓可能让映射折叠，使色带内的文字看起来在倒退。

已知限制

- backdrop-filter 取样的是页面绘制出的背景，而不是 DWM 材质或桌面。亚克力效果仍然实时生效，但透镜无法折射材质本身。
- 位移取样若落在半透明像素上，原始内容会透过半透明的滤镜结果显现出来（一道淡淡的边缘残影）。把输出改为不透明可以消除它，但空出的像素会被页面颜色填充，因为材质颜色不在滤镜输入里。
- 透镜需要卡片背后有东西。在纯色区域上没有什么可弯折，效果在那里不可见。
- 在吸顶、可滚动的表面上做大范围模糊或折射很吃 GPU/CPU；默认值保持得很小。

开发

node --check client.js

- index.js —— 空的主机端部分。
- client.js —— 整个客户端插件（样式 + 滤镜 + 设置行）。
- locale/*.json —— 语言目录元数据。
- icon.svg —— 插件图标。

无依赖，无需构建。

致谢

折射模型和边缘凸起思路源自两个 MIT 协议项目：

- sohumsuthar/liquid-glass —— BK7 折射模型与位移贴图方案。
- shuding/liquid-glass —— 边缘凸起（applyEdgeBulge）凸透镜思路。

完整声明见 THIRD_PARTY_NOTICES.md。

许可证

MIT © 2026 typemiao