dsh-panel-tint

Readme

# 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` 命名空间；`启用面板底色` 为总开关，关闭即完全恢复原样。

## 安装

```powershell
# 本地安装（开发）
dsh plugin --profile web add link:E:\.dsh\dsh-panel-tint

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

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

## 截图

![蓝色皮肤下的面板底色控制](assets/screenshot-panel-tint-blue.png)

![默认浅色外观下的面板底色控制](assets/screenshot-panel-tint-default.png)

> 依赖说明：host 端使用 `@deepseek-ai/dsh-settings`、`@deepseek-ai/schemastery`，以
> peerDependencies 声明（可选），安装时从宿主 profile 解析，无需额外拉包。

## 工作原理

- **Host**（`lib/index.js`）：`installSettingsSection` 注册 `panel-tint` 设置命名空间（schema 默认值、持久化）。
- **Client**（`lib/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