界面壁纸美化RNlao/dsh-wallpaper

dsh-wallpaper · DSH 壁纸插件

让用户在 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 / Linux Ctrl+Shift+R。
- 导入文件夹依赖 webkitdirectory，是浏览器特性（Chrome / Edge / Safari 支持，Firefox 不支持），与操作系统无关。

功能

- 总开关：关闭「启用壁纸效果」会撤销背景、透明度和字体样式，完整恢复 DSH 原始外观；再次打开会恢复已保存配置。
- 无壁纸：当前页面不使用壁纸，保留其他已启用的插件设置。
- 预设：8 个内置渐变。
- 图片库：上传 / 导入文件夹 / 裁剪的图片进入图片库（缩略图网格、可删、点选设背景）。
- 裁剪：拖拽框选保留区域 → 输出新图。
- 主界面 / 轨迹页：两套壁纸可独立配置；轨迹页默认跟随主界面，也可选择自己的图片、渐变或无壁纸。
- 模糊与表面不透明度：主界面和独立轨迹壁纸分别保存模糊 0–50px、表面不透明度 0–1.0；工作区和侧栏可降到完全透明，输入区域在最低值保留极轻表面；轨迹跟随主界面壁纸时同步继承主页效果。
- 界面语言：设置页顶部可切换 中文 / English。
- 文字可读性：主界面文字颜色支持自动 / 浅色 / 深色 / 自定义取色，应用于标题栏、输入栏权限与模型、思考和工具调用；实心主操作按钮保留反色文字，避免低对比度。侧栏独立跟随 DSH 外观：浅色外观统一使用深色文字和图标，深色外观统一使用浅色文字和图标。插件文字规则不进入 DSH 设置区域。
- 轨迹配色方案：轨迹页提供 DSH 原生 / 清澈 / 青玉三套方案，每套都包含浅色和深色外观 palette，并随 DSH 外观自动切换；清澈与青玉的普通文字统一使用高对比深色 / 浅色且不附加强制阴影，方案差异集中在品牌色、状态色、边框与小型浮层。Main 与轨迹页共用同一套标题栏文字规则，切换页面不会改变标题栏明暗。
- 填充与位置：裁切填充 / 完整显示 / 拉伸；水平、垂直位置，主界面与轨迹页分别保存。

存储说明

- 图片原始字节 → 浏览器 IndexedDB（库 dsh-wallpaper / store images）。不压缩、不 base64、容量不受 5MB 限制。
- 当前选择 + 效果参数 → localStorage（仅元数据，很小）。

工作原理

- 背景层：body::before（固定、z-index:-1）承载主界面或轨迹页的图片/渐变；通过 :has([data-trajectory-scroll]) 判断当前是否为轨迹视图，标题栏、边栏与当前视图共用当前页面的同一张壁纸。
- 面板透出：主界面与轨迹页使用可调半透明表面；侧栏保留稍实的层次以区分导航区域，输入区域也保留轻微表面。小型控件、菜单、悬停和选择状态继续保持必要的可读性；关闭总开关会恢复 DSH 原始外观。
- 图片存取：图片以 Blob 存 IndexedDB，URL.createObjectURL(blob) 生成临时 URL 供 /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 色值调整，透明度观感可能略变（不影响功能）。