dsh-client-ui-beautify

DeepSeek Harness 「美化界面」一键皮肤插件 / One-click UI beautify skin for DeepSeek Harness

一个 DeepSeek Harness 客户端插件：在 设置 → 插件 → 插件配置 页提供一张「美化界面」配置卡片和标准开关，开启后为整个 Web 界面叠加极光渐变背景、毛玻璃面板、渐变用户气泡与品牌色滚动条；关闭后完全还原默认外观。

A DeepSeek Harness client plugin: a configuration card with a standard switch under Settings → Plugins → 插件配置; when enabled it layers an aurora-gradient background, glass panels, gradient user bubbles and brand-colored scrollbars over the whole web surface, and restores the stock look completely when disabled.

功能特性 / Features

• 🎛️ 标准位置：配置卡片注册在 settings.plugin.item 槽位，出现在「设置 → 插件 → 插件配置」标签页，与其他可配置插件并列。
• 🔘 原生开关样式：track + thumb 药丸开关，与 DSH 内置开关同一视觉语言——关闭时中性轨道、开启时品牌色轨道，自动适配深/浅主题，支持「减少动态效果」偏好。
• 🌌 极光背景：内置深色（极光星空 + 月亮）/ 浅色（晨雾）两幅 SVG 场景图，随主题切换；叠加缓慢漂移的光晕与漂浮尘埃粒子。
• 🪟 玻璃面板：通过 theme.overrideTokens() 叠加 --dsw-* token 覆盖层，侧边栏、输入框等面板呈半透明毛玻璃质感；不支持 color-mix() 的旧浏览器自动回退为不透明配色。
• 💬 渐变气泡 & 品牌滚动条：用户气泡品牌蓝渐变、滚动条品牌色胶囊样式、选区高亮同步换色。
• ♾️ 完全还原：关闭时移除 HTML 属性标记并 dispose token 覆盖层，不残留任何样式。
• ☁️ 宿主持久化：开关状态保存在宿主 settings.yaml 的 beautify: 命名空间，跨浏览器、跨设备一致。

工作原理 / How it works

插件分为两个半区：

宿主半区（lib/index.js）

• 用 settingsNamespace("beautify") + installSettingsSection(ctx, NS, Config, config, …) 向设置服务注册命名空间，schemastery schema 为 enabled: boolean = true；

• 该设置节持久化在 profile 的 settings.yaml：

  beautify:
    enabled: true

• 注册这个设置节是必须的：0.1.1-rc.2 的「插件配置」页只渲染 宿主 serve 的设置命名空间 ∩ 声明了同名 key 的卡片 的交集——没有宿主半区，卡片永远不会被派发。

浏览器半区（lib/client.js）

• 卡片声明 key: "beautify"，通过 ctx.settingsScope.bind({ namespace: "beautify" }) 绑定作用域，经 scope.set("enabled", …) 读写；
• 美化效果由两层组成，激活时立即应用（无需等设置页打开）：
  • token 层：ctx.theme.overrideTokens(SOURCE, TOKENS) 叠加半透明面板、渐变气泡、品牌色等 --dsw-* 别名/专用 token，关闭时精确还原；
  • 样式层：全部规则以 html[data-dsh-beautify="on"] 属性为门，开关只切换这一个属性；
• 订阅 scope 快照：设置在任何地方被修改（含其他设备），效果实时跟随。

安装 / Installation

需要：DeepSeek Harness（Web profile，即浏览器 GUI 所在服务）。以下以便携版目录 <DSH>（含 data/profiles/web 与 data/profiles/node_modules）为例，已在 0.1.1-rc.2 上验证。

方式 A：让 AI 助手帮你装（推荐）

1. 在 DSH 的会话里粘贴本仓库地址：

   请帮我安装这个插件：https://github.com/sqs404/dsh-client-ui-beautify

2. AI 会替你完成全部安装步骤：把 lib/ 与 package.json 放进 profile 的 node_modules、在 cordis.patch.yml 的 insert 列表注册 ui-beautify、重启服务并验证加载。

3. 重启后打开 设置 → 插件 → 插件配置 即可看到「美化界面」卡片。

方式 B：手动本地安装（备用）

1. 将本仓库的 lib/ 目录与 package.json 放入 profile 的 node_modules 对应路径：

   <DSH>/data/profiles/node_modules/@deepseek-ai/dsh-client-ui-beautify/
   ├── package.json
   └── lib/
       ├── index.js
       └── client.js

2. 在 <DSH>/data/profiles/web/cordis.patch.yml 中加入（若已有则跳过）：

   - insert:
       - id: ui-beautify
         name: '@deepseek-ai/dsh-client-ui-beautify'

3. 重启 DSH 服务，刷新浏览器页面。

方式 C：包管理器安装（实验性）

在 profile 的 package.json 中把插件声明为 GitHub 依赖后执行 pnpm install（需本机装有 git 与 pnpm）：

{
  "dependencies": {
    "@deepseek-ai/dsh-client-ui-beautify": "github:sqs404/dsh-client-ui-beautify"
  }
}

安装完成后仍按方式 B 的第 2、3 步启用并重启。

使用 / Usage

1. 打开 设置 → 插件 → 插件配置，找到「美化界面」卡片。
2. 点击右侧的标准开关：
   • 开（默认）：立即叠加全部美化效果；
   • 关：完全还原默认外观。
3. 偏好即时写入宿主 settings.yaml 并全端同步；系统开启「减少动态效果」时漂移/粒子动画自动停用。

未加载完成时开关短暂禁用，就绪后即可交互。

兼容性 / Compatibility

• 在 DeepSeek Harness 0.1.1-rc.2（Windows 便携版）上开发并验证。
• 宿主半区依赖（扁平 node_modules 直接解析）：@deepseek-ai/schemastery、@deepseek-ai/dsh-settings。
• 浏览器半区注入服务：slots、locale、theme、settingsScope（分别由 dsh-client-runtime、dsh-client-locale、dsh-client-ui-theme、dsh-client-ui-settings 提供）。
• peer：react ^18.2.0、@deepseek-ai/cordis ^4.0.1。
• 无构建步骤：lib/ 即发布产物；纯前端实现视觉部分，除设置读写外不发起任何网络请求。

仓库结构 / Repository layout

dsh-client-ui-beautify/
├── lib/
│   ├── index.js    # host 半区：注册 beautify 设置命名空间
│   └── client.js   # browser 半区：配置卡片、标准开关、token 覆盖层、门控样式表
├── package.json    # DSH 客户端插件元数据（dsh.client 约定）
├── README.md
└── LICENSE         # MIT

生态说明 / Ecosystem note

遵循 DeepSeek Harness 社区插件建议：插件托管在作者自己的 GitHub 仓库，并添加了 dsh-plugin topic 方便发现。姊妹插件：dsh-client-ui-cache-hit（侧边栏缓存命中率卡片）。

许可证 / License

MIT © 2026 sqs404