前言¶
DSH 桌面端應用（Electron 殼）通常不具備瀏覽器原生的查找功能。在處理大量對話或配置內容時，手動定位文本效率較低。dsh-find-bar 插件通過攔截全局快捷鍵，在客戶端實現了一套查找欄，填補了這一空白。
插件概覽¶
這是一個 DSH web 插件，由 secyborg 維護（MIT 許可證）。它爲桌面 App 添加了 ⌘F / Ctrl+F 頁內查找功能，支持全文高亮、匹配計數與跳轉。
核心能力¶
插件通過以下機制實現查找與高亮：
- 全局監聽：在 capture 階段監聽 ⌘F / Ctrl+F，觸發時彈出自繪查找條，自動填入當前選中文本。
- 文本遍歷：使用 TreeWalker 收集頁面所有文本節點（含 shadow root），構建 DOM Range 進行匹配。
- 高亮渲染：使用 CSS Custom Highlight API（
CSS.highlights+::highlight()）繪製匹配文本。這種方式僅修改視覺樣式，不觸碰 DOM 結構，因此與 React 渲染零衝突。 - 兼容回退：在不支持 CSS Custom Highlight API 的環境中，自動退回
window.find()。
搜索範圍覆蓋當前頁面渲染的全部文本，包括對話內容、側邊欄和設置頁。
典型用法¶
安裝並重啓應用後，使用以下快捷鍵：
- 打開查找條：按下 ⌘F / Ctrl+F。
- 輸入搜索：輸入內容時自動搜索（防抖跟隨內容流式更新），計數顯示
當前/總數。 - 跳轉匹配：
- Enter / Shift+Enter：跳轉到下一個 / 上一個匹配。
- ⌘G / F3（+Shift）：跳轉到下一個 / 上一個匹配。
- 退出：按 Esc 關閉查找條並清除高亮。
安裝與啓用¶
在項目目錄下執行打包，然後通過 DSH CLI 安裝：
npm pack
dsh plugin --profile desktop add ./dsh-find-bar-0.1.0.tgz
安裝完成後，需要重啓應用。插件清單在啓動時裝載，重啓後生效。
限制與注意事項¶
- 僅限 DOM 內容：插件只搜索已渲染在 DOM 裏的內容。如果會話或列表被界面摺疊，需先展開才能搜到。
- 匹配上限：匹配結果上限爲 5000 條，超過部分顯示
+號。 - 大小寫：搜索不區分大小寫，目前暫無區分大小寫的開關。
結語¶
dsh-find-bar 通過 CSS Custom Highlight API 實現了輕量級的高亮查找，適合需要在桌面端快速定位文本的場景。更多詳情與源碼可參考 GitHub 倉庫。
