READMESource: main@68a68b96
dsh-chat-background
给 DSH Web 界面换背景:本地图片、本地视频或内置预设渐变;右下角悬浮小圆钮点开就是调节面板。
图片和视频只存进浏览器 IndexedDB,设置只写 localStorage,不发起任何网络请求,也不读取聊天内容。
能调什么
| 控件 | 作用 |
|---|---|
| 选择图片 / 视频 | 从相册/文件里选 JPG / PNG / WebP / GIF 或 MP4 / WebM / MOV |
| 预设背景 | 晨雾、海盐、蜜桃、青提、夜色、墨岩 6 套渐变 |
| 清晰度 | 0–100%,越低越朦胧(映射到 0–14px 模糊) |
| 背景透明度 | 背景图自身的透明度 |
| 界面不透明度 | 界面底色透出多少背景 |
| 对话栏不透明度 | 输入框卡片与用户气泡的透明程度(默认 90%) |
| 亮度 / 对比度 / 饱和度 | 背景图的色彩调节 |
| 缩放 / 水平位置 / 垂直位置 | 自定义构图,适合人像或大图 |
| 暗色遮罩 | 背景上压一层黑,保证文字可读 |
| 显示方式 | 铺满 / 适应 / 平铺 |
| 动效 | 静态 / 漂浮 / 缓慢呼吸(系统“减少动态效果”时自动关闭) |
| 视频自动播放 | 循环播放;关闭后停在第一帧(省电) |
| 玻璃质感面板 | 侧边栏、卡片、浮层变半透明玻璃 |
| 启用背景美化 | 一键开/关,关闭即恢复原界面 |
右下角圆钮可上下拖动并记住位置;Esc 或点面板外关闭;刷新后设置仍在。
文件
package.json 插件清单:bundle patch + dsh.client(web)
cordis.patch.yml 宿主 Loader 行:id=chat-background
lib/index.js 宿主半边(空 apply,只为占一行)
lib/client.js 浏览器半边:背景层 + 悬浮按钮 + 调节面板(纯 DOM)
原理
- 浏览器半边在
body里插入四层固定定位元素:壁纸#dshbg-image/ 视频#dshbg-video、暗色遮罩#dshbg-veil、界面底色#dshbg-tint,z-index 为负,位于应用内容之下;视频用<video muted loop playsinline>。 - 启用时给
body加data-dshbg="on",把--dsw-alias-bg-base改成透明,聊天画布就透出壁纸;界面底色由#dshbg-tint用color-mix()按“界面不透明度”合成,浅色/深色主题都成立。 - 玻璃模式再覆盖
--dsw-specific-sidebar-fill与--dsw-alias-bg-layer-1/2/3。 - 所有 DOM 都在
ctx.effect里挂载,插件停用时会完整移除,不留样式污染。
安装
- 仓库放进
/root/dsh-chat-background; - profile 的
dependencies加"dsh-chat-background": "link:/root/dsh-chat-background",dsh.profile.bundles加dsh-chat-background; - 建
node_modules/dsh-chat-background链接,重启 Web;页面没出现小圆钮就刷新一次。
停用 / 卸载
- 从
dsh.profile.bundles删掉dsh-chat-background(或在 profile 的cordis.patch.yml里加一条disabled: true); - 重启 Web,之后可删软链与本目录;
- 想连设置一起清掉:控制台执行
localStorage.removeItem('dsh-chat-background:state:v1'),并删除 IndexedDB 库dsh-chat-background。
No comments yet. Be the first to write one.