dsh-ui-liquid-glass:为 DSH Web UI 套上分层液态玻璃皮肤

前言

DeepSeek Harness(DSH)的 Web 界面默认走官方设计令牌和布局。若你只想在不动业务逻辑的前提下,把侧栏、对话区、输入框等区域换成统一的玻璃材质,并顺带换壁纸、主题色,单靠改宿主 CSS 往往要维护大量选择器,且很难做到「每一层可调、每一档滑块有效」。

dsh-ui-liquid-glass(npm 包名 @istarry/dsh-ui-liquid-glass)是社区维护者 iStarryDust 发布的 DSH 插件,归类为「趣味换装」。它在宿主 Web UI 上重绘多块玻璃区域,用随时间切换的壁纸作底,并通过右下角太阳按钮打开控制面板。本文介绍其能力边界、安装方式与使用前应了解的权限行为;事实以 GitHub 仓库 README 为准。

这是什么

一句话:面向 DSH Web 客户端的液态玻璃皮肤插件——侧栏、对话列、右侧栏、页面、输入区、会话头、设置菜单等被重新「玻璃化」,页面背景变为可按时段轮播或自行固定的壁纸;主题色与每层玻璃参数可在面板里调节。

插件不是被动样式表:会写磁盘、在宿主 Web 服务上注册 HTTP 路由,并覆盖部分官方 --dsw-* CSS 令牌;卸载插件即可恢复官方外观(作用域在 body[data-lg-skin] 下)。

核心功能

分层玻璃与统一材质

README 说明,各玻璃表面遵循同一套管线:位移贴图 → 模糊 → 对比度 → 亮度 → 饱和度 → 边缘(rim)。任意区域、任意参数组合都与示例胶囊(sample capsule)使用同一材质逻辑。

13 个可调玻璃区域

每个区域在控制面板中有独立页签,对应 README 列出的区域,例如:侧栏、对话列、右侧栏、列内页面、首页 hero、输入区(composer)、问题卡片、会话头、选中高亮、新会话行、输入区控件、对话框与菜单,以及可拖动的示例胶囊。

每区域 14 个旋钮

每个区域提供 14 项参数(着色 tint、着色饱和度、浓度 concentration、模糊、对比度、亮度、饱和度、rim 强度、位移缩放、色散等)。文档强调每个滑块都会作用到画面上,没有「空滑块」。

时段壁纸与自定义壁纸

内置三张图按本地时钟轮播(每 30 秒复查一次):

  • 04:00–11:59
  • 12:00–17:59
  • 18:00–03:59

另有四张作为普通壁纸:可固定一张、删除,或上传自己的图片。上传与删除会写入磁盘。

主题色与选中动效

四种主题色:官方 DeepSeek 蓝(默认)、金、白、黑;作用于宿主色阶与新会话层。

当前侧栏行或设置导航项的选中态带玻璃高亮;切换选中时,文档描述为透镜从旧位置弹到新位置(弹簧、拉伸、拖尾)。

明暗方案与字体

七大块表面的着色浓度与亮度会随明暗方案(light/dark)调整,避免浅色方案被过重的着色盖住。

包内附带 HarmonyOS Sans SC(三种字重),通过 --dsw-font-family 发布,不写入系统字体;卸载插件即移除。

安装与启用

在终端执行官方安装命令:

dsh plugin add @istarry/dsh-ui-liquid-glass

安装后需要重启 DSH 服务:完全退出桌面应用,或重启 dsh web。

兼容性(README):在 DSH 0.2.0-rc.2 上测试;peer 依赖 @deepseek-ai/cordis ^4.0.1。当前包版本为 0.1.0,许可证 MIT。

典型用法

重启并打开 DSH Web 界面后,点击右下角太阳按钮打开控制面板:

  1. 主题 / Theme:壁纸、主题色、文字颜色。
  2. 控件 / Controls:按区域分页,每页 14 个旋钮,并带有共享的示例胶囊。

所有数值会自动持久化。面板提供单页重置与全部重置。

浏览器侧偏好保存在 localStorage 的键 ui-liquid-glass/skin/v4 下。

权限、磁盘与 HTTP 行为

安装前建议通读 README 的 Permissions and behaviour 一节。要点如下。

写磁盘:首次激活会在 ~/.dsh/ui-liquid-glass/wallpapers 创建目录并写入内置壁纸(仅补缺、不覆盖已有文件)。Default/ 子目录与内置轮播集保持同步并会被修剪;该目录根下的文件归用户所有,不会被修剪。

HTTP 路由(需宿主具备 Web 服务,否则上传/删除入口会隐藏):

  • GET /ui-liquid-glass/wallpapers — 列表
  • GET /ui-liquid-glass/wallpapers/<name> — 图片字节
  • POST / DELETE 同路径 — 增删壁纸
  • GET /ui-liquid-glass/fonts/<file> — 内置字体

CSS:发布 --lg-* 变量,并重映射部分官方 --dsw-*(背景、菜单面、悬停填充等)。

适用场景与注意

适合谁:长期在 DSH Web UI 里工作、希望界面统一为液态玻璃风格,且愿意接受插件写本地壁纸目录、注册路由并改 CSS 令牌的用户。

不适合当作:纯只读主题包。插件以当前 DSH 进程权限运行;安装前应查看 源码与许可证,并知悉内置壁纸仅为演示用途,再分发或二次打包时需替换为有权的图片。HarmonyOS Sans SC 随包再分发,须遵守 assets/fonts/LICENSE_Fonts.txt,不得单独修改或单独再分发字体文件。

DSH 生态强调「一切皆插件」;社区目录站点(如 SkillHub 插件页)为独立社区索引,与 DeepSeek / 幻方无官方从属关系。

结尾

dsh-ui-liquid-glass 把 DSH Web UI 的多块界面拆成 13 个可独立调节的玻璃区域,配合时段壁纸、四套主题色和持久化控制面板,在不大改宿主注入方式的前提下(客户端 bundle 不声明 dsh.client.inject,主要挂钩官方 CSS 令牌与布局)完成一整套「液态玻璃」换装。

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

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

小夜