前言¶
DSH（DeepSeek Harness）的设置面板由多个插件拼装而成。在历史上，不同来源的页面往往使用不同的字体大小、卡片圆角和控件样式，导致界面视觉割裂。为了改善这种体验，需要一套标准化的设计语言来统一所有设置页面的视觉表现。
这是什么¶
dsh-settings-beautify 是一个 Headless 插件，为 DSH 设置界面提供单一的设计语言。它不包含导航入口，而是通过观察设置面板的结构并标记 DOM 元素，应用一套统一的样式规则。
核心功能¶
该插件主要实现以下目标：
- 统一排版：所有页面的标题、解释、条目标题和正文字号保持一致。
- 三层结构：定义了统一的层级结构：标题 → 解释 → 内容。
- 统一控件：卡片、行控件、标签、滚动条和焦点状态（Focus Ring）在所有页面上样式一致。
- 扩展性：支持通过
data-dshb-scan属性，让第三方插件贡献的页面也接入这套设计语言。 - 动画支持：微交互动画会自动检测系统的
prefers-reduced-motion设置。
安装与启用¶
该插件遵循 DSH 的社区市场包约定，可以通过插件市场或命令行安装。
- 执行安装命令：
dsh plugin --profile <profile> add dsh-settings-beautify
- 安装完成后，重启 DSH Desktop（或刷新 Web 窗口），设计语言会自动生效。
典型用法¶
由于插件是 Headless 的，它不会在设置导航栏增加新条目。你可以通过以下方式配置或扩展它：
- 启用第三方页面：在第三方页面的根元素上添加
data-dshb-scan属性，即可启用统一设计语言。 - 调整偏好设置：偏好设置存储在浏览器的
localStorage中。打开浏览器控制台，可以使用window.DSHB.setPrefs方法调整密度和动画开关：
// 设置为紧凑密度
window.DSHB.setPrefs({ density: "compact" });
// 禁用动画
window.DSHB.setPrefs({ motion: false });
适用场景与注意¶
- Headless 模式：插件本身不提供设置页面，偏好数据仅保存在
localStorage的dsh-settings-beautify:prefs键下。 - 兼容性：当前适配版本为 DSH 0.1.7-rc.2，无需修改 DSH 源码即可运行。
- 覆盖范围：支持 Shell（导航栏、头部）、通用设置、模型配置、智能体预设、内置插件等页面。
总结¶
该插件通过标准化样式和属性约定，解决了 DSH 设置界面碎片化的问题。通过简单的安装和属性配置，即可提升整体视觉的一致性。
