前言¶
在 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
