tippykafuu/dsh-client-ui-wallpaper

dsh-client-ui-wallpaper

预置壁纸 / default wallpaper

中文

🎯 用途

给 dsh 的 Web GUI 换壁纸的浏览器端插件。

📥 安装

dsh plugin --profile web add github:tippykafuu/dsh-client-ui-wallpaper

dsh plugin --profile web add link:
重启 dsh web 生效

🎨 自定义

node build-client.mjs                      # 换成 assets/wallpaper.png
node build-client.mjs             # 换成指定图片

构图调参在 styles/wallpaper.css 的 :root 里：

| 变量 | 作用 | 默认值 |
|---|---|---|
| --dsh-wallpaper-size | 尺寸，auto 高度 表示宽度按比例 | auto min(78vh, 58vw) |
| --dsh-wallpaper-position | 贴在哪个角 | right 2.5vw bottom -1vh |
| --dsh-wallpaper-tint | 压在壁纸上的底色浓度，越大越淡、文字越清楚 | 浅色 62%，深色 70% |

改完重跑 node build-client.mjs 再刷新。

🧹 卸载

dsh plugin --profile web remove dsh-client-ui-wallpaper
重启 dsh web 生效

🧩 扩展

styles/wallpaper.css 就是这个插件注入页面的全部内容，改样式直接往里加选择器。

换构图 / 换浓度：改上面那三个变量。注意 .pI_x6G_frame 和 .wSkVaW_root 两条置空规则要
同时保留，只留一条的话，壁纸会在 App 挂载后被盖住。

让更多区域透出壁纸：给对应容器的 background 加 transparent !important，或把它的底色
token 改成半透明（例如左侧栏用的 --dsw-specific-sidebar-fill）。左侧栏默认实心是刻意保留的。

加多张壁纸 / 做切换：需要往设置页加一项。客户端半边在 inject 里声明要用的客户端服务
（如 slots、settingsScope），在 apply(ctx) 里注册设置行；build-client.mjs 里把单张图
改成按选项切换的多份 data URI。

把图片移到外部：现在图片内联在 bundle 里。想换成外部资源，可以让宿主半边
lib/index.js 注册一条 webserver 路由把 assets/wallpaper.png 发出去，样式改成指向那个 URL；
代价是插件不再自包含，多一个运行时依赖。

加宿主侧能力：lib/index.js 是标准的 Cordis 插件，可以 inject 宿主服务、注册路由、往
index.html 注入行，和 dsh 自带宿主插件的写法一致。

改名：三处要一起改——package.json 的 name、build-client.mjs 生成的 bundle id、补丁
行的 name。bundle 的 id 必须等于包名，exports["./client"] 必须指向构建产物，这两条不能破。

🗂️ 文件

| 文件 | 用途 |
|---|---|
| package.json | 包声明：插件名、dsh.bundle、dsh.client、客户端入口 |
| cordis.patch.yml | 挂载层：把插件行插进 profile 的插件树 |
| lib/index.js | 宿主半边，空的 Cordis 插件 |
| lib/client.js | 浏览器半边（构建产物，勿手改） |
| styles/wallpaper.css | 壁纸样式 |
| assets/wallpaper.png | 壁纸原图 |
| build-client.mjs | 构建 lib/client.js |
| verify-install.mjs | 安装自检 |

🖼️ 图片声明

assets/wallpaper.png 来自互联网，版权归原作者所有，此处仅作示例与个人使用。本仓库的 MIT
许可只覆盖代码，不覆盖该图片；如需商用请自行替换为已获授权的图片。原作者如有异议，提 issue
即可，会立即移除。

📜 许可

MIT

English

🎯 What it does

Changes the wallpaper of the dsh Web GUI.

📥 Install

dsh plugin --profile web add github:tippykafuu/dsh-client-ui-wallpaper

dsh plugin --profile web add link:
restart dsh web to take effect

🎨 Customize

node build-client.mjs                      # use assets/wallpaper.png
node build-client.mjs          # use a specific image

Composition is tuned in styles/wallpaper.css, under :root:

| Variable | Purpose | Default |
|---|---|---|
| --dsh-wallpaper-size | Size; auto  keeps the aspect ratio | auto min(78vh, 58vw) |
| --dsh-wallpaper-position | Which corner it sticks to | right 2.5vw bottom -1vh |
| --dsh-wallpaper-tint | 叠加在图像上的色调；值越高 = 壁纸越淡，文字越清晰 | 浅色 62%，深色 70% |

编辑后重新运行 node build-client.mjs，然后重新加载。

🧹 卸载

dsh plugin --profile web remove dsh-client-ui-wallpaper
重启 dsh web 以生效

🧩 扩展

styles/wallpaper.css 就是此插件注入页面的全部内容——在其中添加选择器即可改变其外观。

重新构图 / 重新着色：更改上述三个变量。保留两条遮蔽规则，.pI_x6G_frame 和
.wSkVaW_root；只保留其中一条时，应用挂载后壁纸会再次被覆盖。

让更多区域透出：为该容器的 background 添加 transparent !important，或使其填充令牌半透明（例如左侧边栏的 --dsw-specific-sidebar-fill，默认情况下它是有意设为不透明的）。

多个壁纸 / 切换器：这需要在设置中增加一行。在 inject 中声明所需的客户端服务（例如 slots、settingsScope），在 apply(ctx) 内注册一个设置行，并将 build-client.mjs 中的单张图像改为由该选项选择的多个 data URI。

将图像移出打包文件：目前图像内联在打包文件中。要外部提供它，让宿主部分（lib/index.js）为 assets/wallpaper.png 注册一个 webserver 路由，并将样式表指向该 URL——代价是插件不再自包含。

添加宿主端能力：lib/index.js 是一个普通的 Cordis 插件。它可以注入宿主服务、注册路由并向 index.html 注入行，与 dsh 自带的宿主插件完全一样。

重命名：需同时更改三处——package.json 中的 name、build-client.mjs 输出的打包文件 id，以及补丁行中的 name。打包文件 id 必须等于包名，且 exports["./client"] 必须指向构建后的文件；这两者都不能出错。

🗂️ 文件

| 文件 | 用途 |
|---|---|
| package.json | 包清单：插件名称、dsh.bundle、dsh.client、客户端入口 |
| cordis.patch.yml | 挂载层：将插件行插入到 profile 树中 |
| lib/index.js | 宿主部分，一个空的 Cordis 插件 |
| lib/client.js | 浏览器部分（构建输出，请勿手动编辑） |
| styles/wallpaper.css | 壁纸样式 |
| assets/wallpaper.png | 源壁纸图像 |
| build-client.mjs | 构建 lib/client.js |
| verify-install.mjs | 安装自检 |

🖼️ 图像声明

assets/wallpaper.png 来自互联网。版权归原作者所有，此处仅作为个人使用的示例包含在内。本仓库的 MIT 许可证仅涵盖代码，不涵盖图像——在任何商业使用前，请将其替换为已获许可的图像。如果原作者提出异议，请提交 issue，我们会立即将其移除。

📜 许可证

MIT

↑ 回到顶部 / Back to top