READMESource: master@cfa4bce2
dsh-wallpaper · DSH 壁纸插件
中文 | English
让用户在 DSH Web 界面更换背景图片的插件,支持:主界面 / 轨迹页独立壁纸、边栏自动跟随当前页面壁纸、无壁纸、预设渐变、上传图片、导入文件夹、裁剪图片、模糊、面板半透明、全界面自定义文字颜色 / 阴影、填充与位置调整,界面可切换中文 / English。
图片以原始字节存浏览器 IndexedDB(不压缩、不 base64、不受 localStorage 5MB 限制),通过 object URL 显示;「当前选择 + 效果参数」存 localStorage。
安装
从 GitHub 安装(推荐)
dsh plugin --profile web add github:RNlao/dsh-wallpaper#v0.1.0
从 Release 安装
下载 dsh-wallpaper-0.1.0.tgz,然后执行:
dsh plugin --profile web add /path/to/dsh-wallpaper-0.1.0.tgz
从源码安装 / 开发链接(非持久安装)
git clone https://github.com/RNlao/dsh-wallpaper.git
dsh plugin --profile web add link:./dsh-wallpaper
也可以在仓库主页选择 Code → Download ZIP,解压后从上一级目录执行 dsh plugin --profile web add link:./dsh-wallpaper-main。如果 web profile 尚未初始化,先运行一次 dsh web。
link: 是开发链接,不是持久化安装:插件会持续依赖该源码目录,目录移动或删除后插件会失效。源码只需链接一次;修改 lib/client.js 不需要重新 link 或重启服务,DSH client HMR 会自动重载,未立即反映时再强刷浏览器。
生效与更新
- 首次安装或卸载:如果
dsh web正在运行,需要重启该进程并强刷浏览器,使新的 profile bundle 列表生效。 - host 或挂载配置变化:需要重启
dsh web。本插件当前 host 半为空实现,日常开发通常只有 client 改动。
安装后打开 设置 → 壁纸 / Wallpaper。卸载:dsh plugin --profile web remove dsh-wallpaper。
平台兼容性
插件本身跨平台(纯浏览器实现,host 半为空插件,无操作系统特定代码),Windows / macOS / Linux 功能一致,差异仅在路径与快捷键:
- 数据目录:macOS / Linux 默认
~/.dsh;Windows 默认%USERPROFILE%\.dsh。 - 安装命令:GitHub、Release 和源码
link:./dsh-wallpaper安装在各平台相同。 - 浏览器强刷:macOS
Cmd+Shift+R;Windows / LinuxCtrl+Shift+R。 - 导入文件夹依赖
webkitdirectory,是浏览器特性(Chrome / Edge / Safari 支持,Firefox 不支持),与操作系统无关。
功能
- 总开关:关闭「启用壁纸效果」会撤销背景、透明度和字体样式,完整恢复 DSH 原始外观;再次打开会恢复已保存配置。
- 无壁纸:当前页面不使用壁纸,保留其他已启用的插件设置。
- 预设:8 个内置渐变。
- 图片库:上传 / 导入文件夹 / 裁剪的图片进入图片库(缩略图网格、可删、点选设背景)。
- 裁剪:拖拽框选保留区域 → 输出新图。
- 主界面 / 轨迹页:两套壁纸可独立配置;轨迹页默认跟随主界面,也可选择自己的图片、渐变或无壁纸。
- 模糊与表面不透明度:主界面和独立轨迹壁纸分别保存模糊 0–50px、表面不透明度 0–1.0;工作区和侧栏可降到完全透明,输入区域在最低值保留极轻表面;轨迹跟随主界面壁纸时同步继承主页效果。
- 界面语言:设置页顶部可切换 中文 / English。
- 文字可读性:主界面文字颜色支持自动 / 浅色 / 深色 / 自定义取色,应用于标题栏、输入栏权限与模型、思考和工具调用;实心主操作按钮保留反色文字,避免低对比度。侧栏独立跟随 DSH 外观:浅色外观统一使用深色文字和图标,深色外观统一使用浅色文字和图标。插件文字规则不进入 DSH 设置区域。
- 轨迹配色方案:轨迹页提供 DSH 原生 / 清澈 / 青玉三套方案,每套都包含浅色和深色外观 palette,并随 DSH 外观自动切换;清澈与青玉的普通文字统一使用高对比深色 / 浅色且不附加强制阴影,方案差异集中在品牌色、状态色、边框与小型浮层。Main 与轨迹页共用同一套标题栏文字规则,切换页面不会改变标题栏明暗。
- 填充与位置:裁切填充 / 完整显示 / 拉伸;水平、垂直位置,主界面与轨迹页分别保存。
存储说明
- 图片原始字节 → 浏览器 IndexedDB(库
dsh-wallpaper/ storeimages)。不压缩、不 base64、容量不受 5MB 限制。 - 当前选择 + 效果参数 →
localStorage(仅元数据,很小)。
工作原理
- 背景层:
body::before(固定、z-index:-1)承载主界面或轨迹页的图片/渐变;通过:has([data-trajectory-scroll])判断当前是否为轨迹视图,标题栏、边栏与当前视图共用当前页面的同一张壁纸。 - 面板透出:主界面与轨迹页使用可调半透明表面;侧栏保留稍实的层次以区分导航区域,输入区域也保留轻微表面。小型控件、菜单、悬停和选择状态继续保持必要的可读性;关闭总开关会恢复 DSH 原始外观。
- 图片存取:图片以 Blob 存 IndexedDB,
URL.createObjectURL(blob)生成临时 URL 供<img>/CSS 使用,用完revokeObjectURL释放;缩略图按需读取(GalleryThumb组件 mount 时读取、unmount 时释放)。 - 文字颜色与轨迹配色:主界面颜色设置作用于标题栏、对话文字语义 token、思考、工具区域和输入提示,但通过正向区域白名单排除 DSH 设置界面。轨迹顶部工具栏、时间线、搜索、表格文字与图标由所选方案统一控制,每套方案根据 DSH 浅色/深色外观选择对应 palette;业务状态色保留区分,审批卡片的实心允许按钮强制保留白色文字。
- 设置页:
slots.inject('settings.section', …)注册「壁纸 / Wallpaper」页;设置页顶部切换主界面与轨迹页,轨迹页默认继承主界面。插件设置控件使用 DSH 原生主题 token。 - 生命周期:样式、slot 注册、object URL 均挂在插件 fiber 上,禁用/卸载即清理。
已知限制
- 导入文件夹依赖
webkitdirectory(Chrome / Edge / Safari 支持,Firefox 不支持)。单张上传不依赖它,全浏览器可用。 - 图片存 IndexedDB:浏览器清除站点数据(清缓存/隐私模式)会一并清掉;换浏览器不共享。
- 半透明面板底色通道取自当前 DSH 的
design-platform.css;若未来 token 色值调整,透明度观感可能略变(不影响功能)。
No comments yet. Be the first to write one.