Back to home@abbccdd

dsh-panel-tint

No description

Stars
0
Language
JavaScript
Created
Aug 26, 2026
Updated
Aug 29, 2026
GitHub repo

Introduction

dsh-panel-tint(面板底色控制)

给 dsh web 增加 侧边栏 / 正文框 / 输入框 三个区域的"底色不透明度"独立滑块。 普通皮肤模式与 Wallpaper Engine 壁纸模式均生效:WE 模式下能压过皮肤中心的 background-color: transparent !important 中和规则,给全透明面板补上可读底色。

功能

  • 三个独立滑块(0–100%,默认 0 = 保持原样,插件零影响),即时生效(拖动即变,无需刷新):
    • 侧边栏底色:保留皮肤自带的背景(含渐变层次),只缩放透明度;0 = 全透明。
    • 正文框底色:每条"正文"(助手回答 / 用户消息)的文本框,thinking 不参与。
    • 输入框底色:保留皮肤原色,0 = 全透明透出壁纸。
  • 智能读色(跨皮肤兼容)
    • 输入框 / 侧边栏:读取皮肤当前的真实背景色(background-color,透明则读渐变色),保留原色相只调透明度——如蓝色输入框不会变白;
    • 正文框:读取皮肤自带的文本框格式与颜色(圆角 / 内边距 / 边框 / 阴影 / 颜色)。读到的是**官方默认(未修改、透明无框)**时才启用插件自己的 Word 文本框样式(白底金边 + 圆角);皮肤自带文本框则完整保留其格式、只调透明度。
  • 皮肤/主题切换自适应:切换皮肤或浅/深主题时自动重读原色与格式。
  • 设置持久化在 settings.yamlpanel-tint 命名空间;启用面板底色 为总开关,关闭即完全恢复原样。

安装

# 本地安装(开发)
dsh plugin --profile web add link:E:\.dsh\dsh-panel-tint

# 从 GitHub / 市场安装
dsh plugin --profile web add github:abbccdd/dsh-panel-tint

安装后重启 dsh web:设置 → 面板底色。

截图

蓝色皮肤下的面板底色控制

默认浅色外观下的面板底色控制

依赖说明:host 端使用 @deepseek-ai/dsh-settings@deepseek-ai/schemastery,以 peerDependencies 声明(可选),安装时从宿主 profile 解析,无需额外拉包。

工作原理

  • Hostlib/index.js):installSettingsSection 注册 panel-tint 设置命名空间(schema 默认值、持久化)。
  • Clientlib/client.js):
    1. 绑定 settingsScope,滑块改值 → 本地配置缓存即时更新并应用(不依赖 scope 异步回传,保证实时);scope 仅负责持久化与外部同步;
    2. 直接以内联 !important 在目标元素上写背景(与皮肤同款做法,能压过皮肤 patches.css 与 WE 壁纸中性化规则);
    3. 原色缓存:元素"干净"时读取皮肤真实背景色/格式并缓存(WeakMap),皮肤/主题切换时失效重读;
    4. 皮肤自带背景保留渐变格式scaleGradientAlpha 只缩放 alpha);
    5. MutationObserver 观察 DOM 变化(消息渲染 / 折叠态)自动重放。

兼容性

  • 官方默认外观:正文框使用插件自带的 Word 文本框样式;
  • 自带文本框与配色的皮肤:读取并保留其格式与颜色;
  • Wallpaper Engine 壁纸模式:内联 !important 压过中性化规则,正常生效;
  • 已知边界:正文框在滑块 >0 时用"纯色/缩放透明度"的方式控制皮肤自带框的底色,个别皮肤的复杂多图层背景(多层渐变叠加)可能呈现为单层效果。

License

MIT