dsh-apple-liquid-glass: Apply Apple-style Liquid Glass to DSH Web Client

前言

DeepSeek Harness(DSH)的 Web 客户端默认界面偏功能向,若你希望在不改业务逻辑的前提下,给输入区、侧栏控件和模型选择器统一一层半透明「液态玻璃」材质,并附带 Dynamic Island、开场动画等视觉细节,社区插件 dsh-apple-liquid-glass 走的就是这条路:通过 Cordis patch 注入样式与少量前端逻辑,所有开关集中在 Settings → Liquid Glass,聊天主界面不挂浮动按钮。

下面介绍插件定位、能力边界、安装方式与典型配置。

这是什么

维护者 tianyuec11-design 在 GitHub 开源的 dsh-apple-liquid-glass(当前包版本 0.4.3,MIT 许可证)面向 DSH Web(dsh.client.platform: web),要求宿主 DSH >= 0.2.1-0。README 注明预览环境为 DSH 0.2.1-rc.5 web profile。

一句话定位:为 composer、侧栏控件、模型选择器、发送按钮等表面施加 Apple 风格的 liquid-glass 材质;composer 顶边与两侧有淡蓝色流动光晕(输入时暂停);顶部 Dynamic Island 整合会话头信息与设置入口;开场 hello 按笔画顺序显现;切换模型时在模型触发器上方出现紧凑粒子球。页面背景、消息气泡、原 header、模型下拉菜单本体不在本版材质范围内。

社区目录 SkillHub 插件页 将其归类为 趣味换装;GitHub 星标数为 3(以目录线索为准,安装前可在仓库页自行核对)。

核心功能

玻璃强度与分表面开关

在 Settings → Liquid Glass 中:

  • Glass intensity:0–100% 滑块,预设 Off / Light / Mid / Strong 对应 0 / 35 / 65 / 100,实时生效并自动保存。
  • Surfaces:四个独立开关,默认全开——composer 卡片、侧栏控件、模型选择器、发送按钮。关闭某一表面会立刻恢复该处原生样式,其余仍保持玻璃;0% 会移除所有表面覆盖,但四个开关状态仍保留。composer 顶/侧蓝色光晕归属 Composer card 开关。

配置按浏览器写入 localStorage,键名 dsh-apple-liquid-glass.settings.v1。

Composer 边缘光晕

玻璃开启时,composer 顶边与两侧有蓝色渐变光晕;约 2px 条带加 1.5px 模糊,可见厚度控制在约 1.5mm 以内。键入、按键或 IME 组合输入会立即冻结流动,末次输入约 1.1s 后恢复。强度 0% 或对应表面关闭时光晕消失。

Dynamic Island

composer 列顶部居中、距顶约 1cm 的深蓝玻璃胶囊(收起约 5cm × 1cm)。收起时无文字,仅左侧约 0.6cm 处状态点:DSH 思考/生成中为红,空闲为绿。点击展开后可看到会话标题、模式、对话/轨迹标签、时间、余额、上下文占用,以及进入 Liquid Glass 设置的快捷入口;展开时原 header 临时隐藏,点外部或按 Esc 收起。

开场动画(Opening animation)

独立开关。开启后先预览一次,之后每个 DSH 窗口会话播放一次(同标签刷新不重复)。Apple 活动风格的手写小写 hello,按 h → e → l → l → o 笔画顺序在半透明舞台显现,约 5–7 秒,点击任意处或 Esc 可跳过。系统 prefers-reduced-motion 时改为静态 hello 约 2 秒。

模型切换粒子球

用户通过模型选择器切换到不同模型后,模型触发器上方自动出现约 1/6 尺寸的蓝色粒子球(96px 画布),流动 5s、淡出 5s,透明且不拦截指针;仅粒子遮挡,周围 UI 仍可用。需在近期与模型选择器交互且标签确实变化时触发;减少动效模式下会缩短。

实现要点(摘自 README)

纯 CSS 材质、小型 DOM 控制器、React 设置区块与 2D canvas 粒子层,无第三方运行时依赖。composer 的 backdrop-filter 放在 ::before 伪元素上,避免固定定位弹层成为 backdrop 根;蓝色光晕在 ::after 上通过 background-position 动画实现。

安装与启用

插件以当前 DSH 进程权限运行;安装前建议浏览仓库源码与 MIT 许可证。DSH Desktop 自带包管理;CLI 路径下 dsh plugin 需要 pnpm 在 PATH 中。

DSH Desktop(推荐从 GitHub 安装)

  1. 侧栏打开 Plugins。
  2. 点击 Add plugin / +,选择 Install a third-party plugin。
  3. 粘贴仓库 URL:
https://github.com/tianyuec11-design/dsh-apple-liquid-glass
  1. 安装后 Enable,刷新页面(或按宿主提示重启)。
  2. 左下角账户菜单 → Settings → Liquid Glass,调节强度与 Opening animation。

dsh web 命令行

dsh plugin --profile web add 'github:tianyuec11-design/dsh-apple-liquid-glass'

安装后重启 dsh web。

固定版本 Release 包

https://github.com/tianyuec11-design/dsh-apple-liquid-glass/releases/download/v0.4.3/dsh-apple-liquid-glass-0.4.3.tgz

README 说明:dshmarket 的 Themes 标签只列目录内主题;从 GitHub 安装的主题出现在 Installed plugins,仍是完整 bundle 主题,可正常启用/禁用。

本地目录或自构建 tgz(开发)

Desktop:第三方插件安装处粘贴本地绝对路径,例如 C:\path\to\dsh-apple-liquid-glass,安装 → Enable → 刷新。

本地 dsh web:

dsh plugin --profile web add "C:\path\to\dsh-apple-liquid-glass"

自构建:node scripts/build.mjs 与 npm pack 后,通过插件管理器安装生成的 dsh-apple-liquid-glass-0.4.3.tgz。

典型用法

先做安装与启用,再打开 Settings → Liquid Glass:

  1. 用强度滑块或 Off / Light / Mid / Strong 预设调整整体玻璃感;需要完全关闭材质时设为 0%(分表面开关状态仍保留)。
  2. 在 Surfaces 中按需关闭 composer、侧栏、模型选择器或发送按钮中的任意一项,对比原生与玻璃混排效果。
  3. 打开 Opening animation 体验开场 hello;若不需要动效,关闭该开关即可。
  4. 点击顶部 Dynamic Island 展开,查看会话元数据并从岛内向 Liquid Glass 设置跳转。

聊天区域无插件专属浮动按钮;日常操作均在设置页完成。

适用场景与注意

适合长期在 DSH Web / Desktop Web 配置 下工作、希望界面统一 glassmorphism 风格且保留细粒度表面控制的开发者。Dynamic Island 与粒子效果会增加 DOM/canvas 层,低性能设备或强依赖「减少动效」的系统设置时,应优先关 Opening animation 或降低强度。

本插件不修改页面背景与消息区视觉;与宿主 DSH 版本不匹配时,以 package.json 中 dsh.engines.dsh: ">=0.2.1-0" 为准。社区目录 SkillHub 为独立站点,与 DeepSeek / 幻方无官方从属关系,安装来源以 GitHub 仓库 README 为准。

结尾

dsh-apple-liquid-glass 把 Apple 风格的 liquid glass、Dynamic Island、笔画序 hello 和模型切换粒子球收进「设置页驱动」的主题插件,适合在 DSH「一切皆插件」的生态里做 Web 端趣味换装。

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

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

Xiaoye