dsh-panel-tint
No description
- Stars
- 0
- Language
- JavaScript
- Created
- Aug 26, 2026
- Updated
- Aug 29, 2026
Introduction
dsh-panel-tint(面板底色控制)
给 dsh web 增加 侧边栏 / 正文框 / 输入框 三个区域的"底色不透明度"独立滑块。
普通皮肤模式与 Wallpaper Engine 壁纸模式均生效:WE 模式下能压过皮肤中心的
background-color: transparent !important 中和规则,给全透明面板补上可读底色。
功能
- 三个独立滑块(0–100%,默认 0 = 保持原样,插件零影响),即时生效(拖动即变,无需刷新):
- 侧边栏底色:保留皮肤自带的背景(含渐变层次),只缩放透明度;0 = 全透明。
- 正文框底色:每条"正文"(助手回答 / 用户消息)的文本框,thinking 不参与。
- 输入框底色:保留皮肤原色,0 = 全透明透出壁纸。
- 智能读色(跨皮肤兼容):
- 输入框 / 侧边栏:读取皮肤当前的真实背景色(background-color,透明则读渐变色),保留原色相只调透明度——如蓝色输入框不会变白;
- 正文框:读取皮肤自带的文本框格式与颜色(圆角 / 内边距 / 边框 / 阴影 / 颜色)。读到的是**官方默认(未修改、透明无框)**时才启用插件自己的 Word 文本框样式(白底金边 + 圆角);皮肤自带文本框则完整保留其格式、只调透明度。
- 皮肤/主题切换自适应:切换皮肤或浅/深主题时自动重读原色与格式。
- 设置持久化在
settings.yaml的panel-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 解析,无需额外拉包。
工作原理
- Host(
lib/index.js):installSettingsSection注册panel-tint设置命名空间(schema 默认值、持久化)。 - Client(
lib/client.js):- 绑定 settingsScope,滑块改值 → 本地配置缓存即时更新并应用(不依赖 scope 异步回传,保证实时);scope 仅负责持久化与外部同步;
- 直接以内联
!important在目标元素上写背景(与皮肤同款做法,能压过皮肤 patches.css 与 WE 壁纸中性化规则); - 原色缓存:元素"干净"时读取皮肤真实背景色/格式并缓存(WeakMap),皮肤/主题切换时失效重读;
- 皮肤自带背景保留渐变格式(
scaleGradientAlpha只缩放 alpha); - MutationObserver 观察 DOM 变化(消息渲染 / 折叠态)自动重放。
兼容性
- 官方默认外观:正文框使用插件自带的 Word 文本框样式;
- 自带文本框与配色的皮肤:读取并保留其格式与颜色;
- Wallpaper Engine 壁纸模式:内联
!important压过中性化规则,正常生效; - 已知边界:正文框在滑块 >0 时用"纯色/缩放透明度"的方式控制皮肤自带框的底色,个别皮肤的复杂多图层背景(多层渐变叠加)可能呈现为单层效果。
License
MIT