dsh-background

dsh-background

DSH Web 背景美化正式插件：全页静态/视频壁纸 + 实时透明度/模糊/对比度调节 + 玻璃面板透明度控制 + 文件夹循环轮播（交叉淡入淡出）+ 模型选择器/安全等级流光边框。状态持久化到磁盘，DSH 重启后自动恢复。

兼容：DSH web（dsh web），Node >= 20，React 18。

✨ 功能

全页背景

• 静态图片：jpg / jpeg / png / svg / gif / webp / avif / apng / bmp / ico / jfif
• 动态视频：mp4 / webm / mov / mkv / avi / m4v / ogv（能否播放取决于浏览器编解码支持，如 HEVC 需浏览器/系统解码能力）
• 背景层固定在全页内容之下（z-index -1），不拦截任何鼠标事件

六个实时滑条（均带「默认」复位按钮）

滑条	默认	作用
背景透明度	85%	壁纸本身的不透明度
背景模糊度	0px	壁纸高斯模糊
背景对比度	0	双向联动（见下）
主背景玻璃透明度	30%	主背景层玻璃，越低壁纸越清晰
内容层玻璃透明度	70%	消息/卡片/菜单玻璃，越高文字越清楚
输入框玻璃透明度	45%	composer 输入卡片单独调节（不再固定纯色）

• 对比度双向联动：往右 → 主背景与内容层都更透明（背景凸显、文字变淡）；往左 → 两层都更实（文字凸显、背景变淡）
• 滑条实时作用于背景层、所有缩略图和玻璃面板

文件夹循环

• 原生目录选择器 → 本机读取（不上传）→ 定时轮播 + 交叉淡入淡出（默认 800ms，间隔/时长可自定义）
• 文件夹内随机 5 张缩略图预览（实时联动滑条）

单张背景

• 任意位置文件 → 上传至本机缓存（~/.dsh/dsh-bg-assets/）→ 持久可用（浏览器无法直接引用本地路径，这是唯一可靠的持久方案）

模块二 · 界面美化

• 模型选择器替换：流光外边框 + 玻璃透明触发器 + 推理等级拖拉条（不再是列表）
• 安全等级触发器（readonly / Full access）：流光外边框 + 玻璃透明
• 流光实现：conic-gradient 渐变角旋转（@property），边框始终贴合容器不脱离

重启记忆

• 状态持久化到 ~/.dsh/dsh-bg-state.json：上次的背景（文件夹路径或单张文件）、六个滑条值、开关、轮播间隔/淡入淡出时长，DSH 重启后全部自动恢复
• 删除该文件即恢复出厂默认

📦 安装

方式一：本机 link: 挂载（推荐开发/自用）

# 1. 克隆/放置插件目录（例如 D:\soft\dsh-plugins\dsh-background）
# 2. 构建
cd D:\soft\dsh-plugins\dsh-background
pnpm install
pnpm build

# 3. 挂载到 profile（以默认 web profile 为例）
#    在 C:\Users\<用户>\.dsh\profiles\web\package.json 的 dependencies 中加入：
#      "@kudanen/dsh-background": "link:<本插件绝对路径>"
#    并在 dsh.profile.bundles 列表中加入 "@kudanen/dsh-background"
cd C:\Users\<用户>\.dsh\profiles\web
pnpm install --force

# 4. 重启 dsh web

方式二：npm 发布后 dsh plugin add（推荐分发）

npm publish          # 发布到 npm
dsh plugin --profile web add @kudanen/dsh-background

🧑‍💻 使用

1. 打开 DSH Web → 左下角 设置 → 侧边栏 背景
2. 勾选 启用背景
3. 二选一：
   • 单张背景：点「选择文件」选任意图片/视频
   • 文件夹循环：勾选「开启文件夹循环」→ 点「选择文件夹」选壁纸目录
4. 拖动六个滑条实时调节，随时点「默认」复位
5. 重启 DSH 后自动恢复上次效果

🏗️ 架构

src/
├── index.ts              # Host 半部
│   ├── ~/.dsh/dsh-bg-state.json 持久化（原子写入 + 重试）
│   ├── 目录扫描（node:fs）与格式过滤
│   ├── 资产路由 GET /dshbg-assets/<token>/<文件名>（流式）
│   ├── JSON API /dshbg/api/*（state / save-prefs / set-folder / upload-single）
│   └── 单张上传缓存 ~/.dsh/dsh-bg-assets/（100MB 上限，唯一临时名防并发）
└── client/               # 浏览器半部（独立 bundle，注册 id = @kudanen/dsh-background）
    ├── api.ts            # fetch 封装（同源，dsh-ssh 同款模式）
    ├── store.ts          # 共享状态 + 防抖持久化（500ms）
    ├── background.ts     # 背景层（双图层交叉淡入淡出）+ 玻璃主题 override
    ├── settings.tsx      # 设置页（settings.section）
    ├── model-seat.tsx    # 模型选择座（conversation.input.model，priority -10）
    └── styles.css        # 全部样式（含流光 ring 实现）

• 通信：浏览器纯 fetch 同源调用 host 路由，不依赖 cordis remote
• 模型座：与 ui-model-selection 共享目录与选择链路（/model 命令与此座保持同步）
• 构建：tsc（类型）+ tsdown（node 半部 lib/index.js + 浏览器 bundle lib/client.js）

🛠️ 开发

pnpm watch        # tsdown --watch，改动即时重编
pnpm typecheck    # tsc --noEmit
pnpm build        # 完整构建

📄 许可证

MIT