DeepSeek Harness(DSH)界面美化插件 dsh-ui-beautify

前言

DeepSeek Harness(DSH)默认的 Web 界面功能完备,但外观选项较少。开发者在长期使用中,希望对界面进行更多定制:从色彩风格到背景图片,再到字体选择,都希望有更精细的控制。

dsh-ui-beautify 正是在这个场景下出现的插件。它通过覆盖 DSH 官方 theme 服务的 overrideTokens 设计令牌,配合插件自身的 <style> 绘制背景图,在不替换 app root、不追加第二个应用的前提下,为 DSH Web 界面提供了一套可配置的外观层。

插件说明

dsh-ui-beautify 是一个为 DeepSeek Harness Web 界面提供外观定制的插件,由开发者 vi0let-dev 维护。它不依赖运行时库(React 由 DSH 浏览器模块表提供),所有逻辑在浏览器端执行,不联网,不读取会话内容。

插件通过覆盖设计令牌,实现风格预设、表面透明度、背景图、界面与代码字体等功能。版本 0.1.2 设置页固定 100% 不透明,表面透明度只影响设置页之外的界面;背景图存储改为 IndexedDB Blob,解除 localStorage 的字符上限限制。

核心功能

风格预设

提供五套风格预设:DSH(跟随系统)、玻璃、暖纸、樱花、极简。每套预设都定义了明亮与深色两组取值,包括背景色、表面色、边框色、圆角等。

表面透明度

通过 0–100% 的透明度滑块,调整主背景、卡片、侧栏、气泡、代码块等表面的不透明度。设置面板始终保持 100% 不透明,方便在调整透明度时观察效果。

背景图

支持本地图片上传或 HTTP(S) 图片链接。本地图片在浏览器内压缩后保存,原文件上限 40 MB,压缩后上限 12 MB;最长边超过 2560px 时会自动缩放。

同时支持背景模糊(0–24px)和背景遮罩(0–70%),用于在背景图上叠加一层半透明遮罩,保证文字可读性。

字体设置

界面字体支持:跟随 DSH、系统无衬线、衬线(宋体)、圆体、等宽、自定义(逗号分隔的字体列表)。代码字体支持:跟随 DSH、等宽、系统无衬线、自定义。

圆角风格

随预设改变 --dsw-radius-* 相关 CSS 变量,但不会修改 DSH 的语义状态色(如成功/错误/警告色)。

恢复默认

两次点击确认后,恢复“跟随 DSH + 不透明 + 无背景图 + 跟随字体”的默认状态。

安装与启用

插件需要 DSH >=0.2.1-rc.2 <0.3.0,并且仅在 Web 界面(dsh.client.platform = "web")下生效。

方式一:插件页安装(推荐)

  1. 在 DSH 侧边栏点击 插件 → 添加插件。
  2. 输入 github:vi0let-dev/dsh-ui-beautify。
  3. 按提示启用插件。
  4. 完全退出 DSH 并重启,然后硬刷新页面(Windows/Linux Ctrl+F5,macOS Cmd+Shift+R)。
  5. 侧边栏 → 设置,左侧出现 界面美化,即安装成功。

方式二:GitHub 命令行安装

先确认自己的 profile 名称:

$env:DSH_PROFILE

然后执行:

dsh plugin --profile <profile> add github:vi0let-dev/dsh-ui-beautify

锁定到版本 0.1.2:

dsh plugin --profile <profile> add "github:vi0let-dev/dsh-ui-beautify#v0.1.2"

安装后同样需要完全退出并重启 DSH,再硬刷新页面。

升级与卸载

GitHub 直装会在 profile 里放一份副本。升级时重新执行一次 dsh plugin --profile <profile> add github:vi0let-dev/dsh-ui-beautify(或锁定 #v0.1.2),完全退出并重启后刷新页面即可。

卸载时在插件页停用并卸载,重启 DSH 后刷新页面。插件卸载时会移除 token 图层、背景图样式、根节点属性和 CSS 变量,浏览器 localStorage 里的两个键需要手动清除(见下方「配置」)。

典型用法

打开 设置 → 界面美化。设置面板始终 100% 不透明,透明度滑块只改变面板之外的界面。

  1. 在「外观风格」里选择一套预设,或保持“跟随 DSH”。
  2. 需要背景图时,选择本地图片,或粘贴 http(s) 图片链接后点「使用链接」。
  3. 调整「表面透明度」让背景图透出;文字不清楚时调高「背景遮罩」或降低「背景模糊」。
  4. 在「字体」里选择界面字体/代码字体;选「自定义…」后输入逗号分隔的字体名。

典型组合示例:

  • 玻璃 + 背景图 + 60% 透明度 + 20% 遮罩:半透明磨砂感,背景图可见且文字可读。
  • 暖纸 + 不透明 + 衬线字体:接近纸张的阅读界面。
  • 极简 + 不透明 + 等宽字体:低装饰、高信息密度。

适用场景与注意

适合需要自定义 DeepSeek Harness Web 界面外观的开发者,尤其是希望统一项目风格、减少视觉疲劳、或在不同环境中保持一致体验的场景。

插件以当前 DSH 进程权限运行,安装前建议查看源码(见 GitHub 仓库)。插件不执行动态代码,不替换 DSH 的 app root,不向 document.body 追加第二个应用;背景图只画在 body::before / body::after 两个插件自有伪元素上。

已知限制包括:尚未做真机视觉验证,只做了静态核对与单元测试;只覆盖已知/常用的设计令牌,部分嵌套组件可能保留自己的不透明表面;透明度需要背景图才明显;菜单/弹出层有 88% 不透明度下限;远程图片受浏览器 CSP 与网络策略约束。

结尾

dsh-ui-beautify 为 DSH Web 界面提供了一套轻量级的外观定制方案,在不改变 DSH 核心逻辑的前提下,让开发者可以根据个人偏好调整界面风格、透明度、背景图和字体。如果你希望 DSH 的界面更符合自己的使用习惯,可以尝试安装并配置。

  • 插件目录页:https://www.skillhub.cn/plugins/vi0let-dev/dsh-ui-beautify
  • GitHub 仓库:https://github.com/vi0let-dev/dsh-ui-beautify
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜