前言¶
在 DeepSeek Harness（DSH）里用模型改界面或排查样式时，常见做法是在聊天里用文字描述「左边那个按钮」「设置行右侧的图标」——对方看不见你的屏幕，上下文容易缺组件名、选择器和计算样式。DSH 的生态里可以把能力拆成插件挂在客户端；下面介绍 dsh-ui-toolbox，一个在 Web 侧边栏底部常驻的 UI 工具箱，当前首选工具是元素选取器，把页面上任意 DOM 的结构化信息收成紧凑的 @ 引用 chip 写进当前会话输入框，完整上下文仍随消息交给模型。
这是什么¶
dsh-ui-toolbox（npm 包名同名）由 miniluckybull 维护，许可证 MIT，当前发布版本 0.2.0。它是 DSH 的客户端插件：在浏览器里注册侧边栏底部工具按钮，不依赖本插件自带的服务端逻辑（index.js 为宿主侧空壳）。分类上属于「客户端」——只在 DSH Web 界面运行，与你在本机启动的 DSH 进程权限一致；安装前建议在 GitHub 仓库 阅读源码与许可证。
与「截图 + 口述」相比，选取器会采集 React 组件树线索、CSS 选择器、盒模型尺寸与位置、可见文本、常用属性以及关键计算样式，并以约定格式打包；对话区只显示小 chip，避免消息被大段 HTML 撑满。
界面上的位置与行为¶
工具箱在侧边栏 footer 的账号（设置）一行右端增加一个图标按钮（十字准星表示选取模式）。侧边栏展开时，宿主设置区会变窄约 38px，给工具按钮让位；按钮参与侧边栏排版，不会浮在会话列表或设置弹窗之上。侧边栏收成窄条时按钮仍可用。每个工具对应一个图标，悬停显示短提示；更长说明写在插件 locale（locale/*.json 的 meta.description）里。
选取过程中的高亮、提示条和 toast 通过 shell.overlay 挂到 document.body 的 portal，z-index 高于设置模态（约 1100–1105），避免反馈被设置窗口挡住；工具按钮本身仍受宿主模态正常遮挡。
核心功能：元素选取器（Element Picker）¶
当前 client.js 里工具由数据驱动的 tools 数组定义，首个工具即元素选取器，能力如下。
- 进入选取模式后，鼠标划过页面元素会实时高亮。
- 用
↑/↓在父级 / 子级 DOM 之间切换当前候选。 - 单击确认采集；
Esc或再次点击侧边栏图标退出选取模式。 - 采集结果插入当前会话输入框，表现为紧凑的
@标签引用 chip；可连续采集多个元素。 - 用户消息在对话里只渲染 chip；提交给模型时由输入触发器的
codec.serialize展开为完整<selected-element>…</selected-element>文本块。 - 若在设置页、插件页、欢迎页等非会话界面采集，引用会先暂存，回到任意会话后自动插入 chip，无需手动粘贴。
采集内容包含：元素标签片段、React 组件名与祖先组件、CSS 选择器、宽高与坐标、文本、重要属性、关键计算样式、结构片段与祖先链等。chip 首行形如 [[el:<id>|<label>]]，与闭合标记 </selected-element> 之间的正文在 UI 层折叠。缓存在浏览器 localStorage 键 dsh-ui-toolbox.elements.v1，最多 100 条、保留 7 天，便于同一会话多次引用。
安装与版本要求¶
package.json 声明 engines.dsh 为 >=0.2.1-rc.2 <0.3.0；README 写明在 DSH 0.2.1-rc.2 上做过测试。
命令行安装（将 <your-profile> 换成你的 profile 名）：
dsh plugin --profile <your-profile> add dsh-ui-toolbox
或在 DSH 界面打开 Plugins → Add plugin，输入包名 dsh-ui-toolbox，然后重启 DSH。
典型用法¶
经过上面的安装与重启，可以按下面步骤把界面元素交给模型。
- 打开任意会话，点侧边栏底部账号行右侧的十字准星图标，进入选取模式。
- 移动鼠标到目标控件（例如设置按钮），用
↑/↓微调至希望的 DOM 节点，单击采集。 - 输入框会出现对应
@chip；可继续点选第二个元素。 - 直接写自然语言需求，例如「把这两个元素合并」「把按钮换成次要样式」——模型收到的是展开后的完整元素上下文，而不是仅 chip 上的短标签。
若在非会话页面完成采集，chip 会在你下一次进入会话输入框时自动出现。
提交后模型侧可见的展开格式示例（对话里仍为 chip）：
[[el:el-abc|设置]]
（以下内容由 DSH 工具箱的元素选取器采集，来自当前 Web 界面）
<selected-element>
元素: <button class="…" aria-label="设置">
组件: SidebarSettingsTrigger ← SidebarRoot
选择器: div.hHd-Xa_footArea > div.hHd-Xa_settingsArea > button
位置: 200 × 36 @ (12, 680)
文本: 设置
属性: type="button"; aria-label="设置"
关键样式: display: flex; padding: 7px 8px; background-color: …; border-radius: 8px; …
结构: <button class="…" aria-label="设置">…</button>
祖先链: div.hHd-Xa_footArea > div.hHd-Xa_settingsArea
</selected-element>
在 DSH 里的挂载方式（开发者参考）¶
插件通过 Cordis patch 与多个公开 client 槽位接入宿主，不直接 import Harness Client 包，而是使用 ctx.inputTriggers、ctx.sessions、ctx.uiConversation 等服务。主要挂点包括：
| 槽位 / 注册点 | 作用 |
|---|---|
sidebar.footer.action（id toolbox） |
侧边栏底部常驻图标 |
shell.overlay |
选取过程的高亮、提示、toast |
conversation.composer.dock |
桥接会话 inputActions，插入 chip |
conversation.user.text.node（key elementRef） |
用户消息里渲染 chip |
ctx.inputTriggers.registerSource |
@ 下 element 引用源与序列化 |
ctx.uiConversation.userText.register |
将长文本折叠回 chip |
client.js 的 ToolboxFooter 中向 tools 数组追加项即可扩展更多侧边栏图标工具；颜色与圆角取自 --dsw-* 主题 token，文案走 toolbox locale 命名空间。
适用场景与注意¶
适合谁：在 DSH Web 里做 UI 微调、对照真实 DOM 向模型提需求、或给插件/主题开发收集选择器与组件名的用户与开发者。
权限与安全：插件以当前 DSH 进程与浏览器会话的权限运行，会读取你正在操作的 Web UI DOM，并把采集结果写入本地 localStorage 与待发消息。安装前请自行审查 源码 与 MIT 许可证条款。
版本：仅保证在 README 披露的 DSH 0.2.1-rc.2 与 engines.dsh 区间内测试；升级到 DSH 0.3.x 前需确认新版本是否仍满足引擎约束。
生态说明：DSH 奉行「一切皆插件」；SkillHub 目录页 是社区收录站点，与 DeepSeek / 幻方无官方从属关系，并非官方应用商店。
结尾¶
dsh-ui-toolbox 把「指着界面说话」变成可复用的结构化上下文：侧边栏一点、chip 进框，模型侧拿到组件、选择器与样式。若需安装说明与采集格式细节，以仓库 README 为准。
- 目录页：https://www.skillhub.cn/plugins/miniluckybull/dsh-ui-toolbox
- GitHub：https://github.com/miniluckybull/dsh-ui-toolbox
