dsh-client-ui-frosted-glass

为 dsh Web UI 提供的全局毛玻璃（frosted glass / backdrop blur）主题插件。它不改变现有浅色/深色偏好，而是在任意主题之上叠加一层半透明表面 token 覆盖与全局 backdrop-filter 模糊，让整个界面呈现 iOS/macOS 风格的磨砂玻璃质感。

截图

效果构成

插件由两半组成（都在浏览器端生效）：

1. 全局样式表（lib/client.js 内联注入）

   • 在 body 上铺一层 bg.jpeg 背景（cover 铺满并居中，base64 内联，源文件在 assets/bg.jpeg），浅色显示原图、深色叠加半透明深色遮罩压暗，作为模糊的“背后内容”。
   • 给外壳三栏框架以及浮层（menu / dialog / listbox / tooltip 等 role）施加 backdrop-filter 模糊。
   • 把内置遮罩模糊 token --dsw-mask-blur 从 blur(2px) 加强，使弹窗/图片遮罩也更“玻璃”。

2. 半透明表面 token 覆盖（通过 ctx.theme.overrideTokens）

   • 把 --dsw-alias-bg-base、--dsw-alias-bg-layer-1/2/3、--dsw-alias-bg-overlay、--dsw-specific-sidebar-fill、--dsw-specific-menu 等背景 token 改成半透明 rgba，每个都带 light / dark 双色。
   • 因为所有组件都通过 var(--dsw-*) 取色，这一层与 class 名无关，即使外壳重建后 hash 变化，半透明效果依然成立。

目录结构

dsh-client-ui-frosted-glass/
├── package.json          # dsh.bundle（自插入行）+ dsh.client（浏览器半）
├── cordis.patch.yml      # bundle 补丁：向组合插入 ui-frosted-glass 行
├── lib/
│   ├── index.js          # 宿主半（空 apply，仅为出现在 Loader 中）
│   └── client.js         # 浏览器半（window.__ModuleLoader__.load 打包格式）
├── README.md
└── README.zh.md

lib/client.js 是手写的浏览器打包产物（与 tsdown 产出的 window.ModuleLoader.load({ id, factory }) 格式一致），无需本地构建步骤即可直接使用。

安装

先克隆本仓库，再通过 profile 的插件管理安装到 web profile：

git clone https://github.com/makuralymi/dsh-webUI-Glass-Theme.git
dsh plugin --profile web add ./dsh-webUI-Glass-Theme

该命令会在 profile 目录内执行 pnpm 安装，并因包声明了 dsh.bundle.patch 而自动把它加入 dsh.profile.bundles，其 bundle 补丁会自动插入 ui-frosted-glass 行，无需再手动改 cordis.patch.yml。随后：

dsh --profile web
# 或
dsh web

提示：宿主组合在启动时构建，新增/移除插件需重启 web 进程后刷新页面才会生效。

手动安装（不依赖 dsh plugin）

以下方式与上面的 dsh plugin 二选一，不要同时使用（会重复插入同一行）。适合不方便运行 dsh plugin 的场景：

1. 把本目录安装为 profile 依赖：

   cd "$DSH_HOME/profiles/web" pnpm add

2. 在 $DSH_HOME/profiles/web/cordis.patch.yml 中追加一行：

   • insert:
     • id: ui-frosted-glass name: 'dsh-client-ui-frosted-glass'

验证

• 启动后浏览器应看到三栏外壳及其上的浮层呈现半透明磨砂效果，浅色/深色切换都生效。
• 打开开发者工具，确认 head 里存在 style[data-plugin="dsh-client-ui-frosted-glass"]，且 body 内联了 --dsw-alias-bg-base 等半透明 token。