前言¶
DSH 的插件生态强调「一切皆插件」。社区目录是独立站点，与 DeepSeek / 幻方无官方从属关系。日常使用 DSH Web UI 时，默认界面比较固定；如果要换配色、加整页背景，或者把侧栏、会话区、插件面板拆成可停靠、可浮动的卡片，就需要在 Web 客户端侧做 UI 扩展。
下面介绍 dsh-ui-beautify。它由 Zalpha263 维护，MIT 许可，面向 DSH 0.1.1-rc.2 及以上版本的 Web 界面，支持 Windows / Linux / macOS。
这是什么¶
dsh-ui-beautify 是一个 DSH Web UI 插件，用来给 DeepSeek Harness（DSH）的 Web 界面增加外观和布局能力：
- 四套配色预设
- 整页背景图
- VSCode 式卡片布局
- 插件面板统一入口
- 设置自动记忆
- 可撤销、可还原
它主要作用于 Web UI 的样式和面板组织。实现上以 lib/client.js 为客户端主要脚本，Host 半区 lib/index.js 用于注册；本包是手写 loader 格式（__ModuleLoader__.load），不是 tsdown 产物。
核心功能¶
配色预设¶
提供四套预设：默认 / 深海蓝 / 暖沙 / 松石绿。浅色 / 深色模式各有适配，一键切换。全局强调色会随配色预设变化。
整页背景图¶
支持本地图片一键上传，自动压缩并添加可读遮罩，侧边栏与主区都会显示背景。
背景图以压缩后的 data URL 保存在浏览器 localStorage 中，约 5MB 配额内；超大图片上传时会自动压缩到最长边 ≤2560px。
卡片布局¶
侧栏 / 会话 / 停靠卡三张卡片，可拖出浮动，也可吸附到上 / 下 / 左 / 中 / 右任一区域。
一个区域只能停一张卡；原区域已有卡片时，会被挤成浮动卡，区域空出后自动回位。
缩放与折叠¶
- 停靠态：手柄拖宽；双击手柄重置默认宽度。
- 浮动态：四边 / 四角拖动缩放。
- 侧栏拖窄到 <240px 时自动折叠成图标栏。
- 中间栏（会话区）最小保底 480px。
- 会话区吸附到左侧 / 右侧后，空出的中间区域不再保底。
- 侧栏 / 停靠卡均可缩到 120px；停靠卡拖到 <140px 会关闭。
插件面板¶
插件面板是统一入口。卡片模式占停靠卡，经典模式为右侧停靠面板，支持插件列表与标签页宿主。
设置记忆与撤销¶
配色、背景图、布局保存在浏览器本地，刷新页面、重启 DSH 后自动恢复。
清除、重置、切回经典模式可即时还原；卸载后无残留。
安装与启用¶
前置要求¶
- DSH
0.1.1-rc.2及以上 - 官方安装方式需要 pnpm
先安装 pnpm：
npm install -g pnpm
安装插件¶
安装命令中会钉住提交号：
dsh plugin --profile web add github:Zalpha263/dsh-ui-beautify#<完整40位commit>
<完整40位commit> 是占位符，需要替换为仓库中实际的完整提交号；已核实资料未提供具体提交号。
安装完成后重启 DSH，打开「设置 → UI设置」即可使用。
典型用法¶
以下操作都从「设置 → UI设置」进入。
外观美化¶
1、切换配色预设。
2、选择本地图片作为全页背景。
3、如需移除，点击清除背景图。
4、如需恢复默认，点击重置全部。
布局¶
1、切换经典布局或卡片布局。
2、打开 / 关闭插件面板。
3、如需恢复，点击恢复默认布局。
拖拽卡片¶
按住卡片顶部抓取条拖动。松手位置在停靠区（上 / 下 / 左 / 中 / 右）时，卡片吸附回位；不在停靠区时，就地浮动。Esc 可取消拖动。
缩放¶
- 浮动窗：四边 / 四角拖动缩放。
- 停靠卡：手柄拖宽；双击手柄重置默认宽度。
升级¶
先推送新提交，再把 profile 的 package.json 中钉住的提交号改为新提交（无 BOM），然后执行：
dsh plugin --profile web install
最后重启 DSH 或硬刷新页面。
卸载¶
dsh plugin --profile web remove dsh-ui-beautify
适用场景与注意¶
适合希望调整 DSH Web UI 外观、背景或面板布局的本地使用者。安装前建议检查源码与许可证；插件以当前 dsh 进程权限运行，源码、提交号和许可协议都应作为安装前确认项。
需要注意：
- 设置保存在浏览器
localStorage；清除浏览器站点数据会重置设置。 - 背景图占用浏览器本地存储，存在约 5MB 配额限制。
- 部分样式选择器针对当前客户端产物编写；DSH 大版本升级后可能失效，升级后请在「外观美化」里复核效果。
- 社区目录页链接未在已核实资料中确认；本文只给出仓库地址。
链接¶
GitHub：https://www.github.com/Zalpha263/dsh-ui-beautify
