前言¶
DSH 插件生態裏,多個插件可能同時往頁面添加按鈕、圖標、圖表、輸入框等界面元素。插件之間沒有統一的位置管理,界面重疊、遮擋、擠在一起是實際會遇到的問題。
dsh-ui-hub 是 Han-1413141 維護的 DSH Web 客戶端插件,MIT 許可證。它把頁面上的官方 UI 和插件 UI 枚舉成可管理列表,提供逐個開關、拖拽/座標定位、碰撞避讓和一鍵自動排布。
這是什麼¶
- 插件名:dsh-ui-hub
- 維護者:Han-1413141
- 許可證:MIT
- 運行環境:Node.js ≥ 20,並需要支持
dsh plugin命令的 DeepSeek Harness - 啓動方式:插件隨
dsh web啓動
一句話:給 DSH Web 頁面裏的 UI 提供統一控制面板。
核心功能¶
下面介紹已覈實的功能:
- 枚舉平臺每個
[data-slot]插槽裏的插件 UI,以及脫離插槽的浮動控件。 - 不認識的新控件可用「拾取元素」點擊捕獲。
- 面板頂層分成「官方 UI」與「插件 UI」兩個類別。
- 類別與插槽組兩級摺疊,默認全部摺疊,展開狀態自動記憶。
- 每個 UI 根節點獨立開關,並可展開內部按鈕、圖標、圖表、輸入框逐個開關。
- 支持默認、微調、浮動三種位置模式。
- 拖拽模式下直接拖動任意 UI 改變位置,拖右下角手柄改變大小。
- 碰撞避讓支持關閉、智能、嚴格三檔;鎖定某項後只擠別人、不擠它。
- 一鍵自動排布,把所有浮動 UI 沿右緣排成對齊的縱向列。
- 所有開關、位置、大小與摺疊狀態保存在瀏覽器
localStorage,刷新或重開會話後自動恢復。 - 不修改任何插件代碼,關閉或卸載插件即逐元素還原。
安裝與啓用¶
先安裝插件:
dsh plugin --profile web add github:Han-1413141/dsh-ui-hub
安裝完成後重啓 dsh web。頁面右上角會出現「UI 管家」膠囊按鈕,也可以使用快捷鍵 Ctrl+Shift+U 或 macOS ⌘⇧U 打開管理面板。
典型用法¶
1、打開面板後,頂層是「官方 UI」和「插件 UI」兩個摺疊類別。點擊類別展開其下按插槽分組的組名,再點擊組名展開該組的 UI 條目。
2、條目行左側的開關用於立即顯示或隱藏對應 UI,右側 ⋯ 可展開詳情。
3、在詳情裏設置位置模式:
- 默認:保持原有佈局。
- 微調:填寫水平/垂直偏移。
- 浮動:填寫 X/Y 座標。
4、需要直接調整時,在頂部工具條開啓「拖拽模式」。開啓後可以直接拖動頁面上的任意 UI 改變位置,也可以拖動右下角手柄改變大小。
5、頂部工具條還可以使用:
- 「自動排布」:把所有浮動 UI 沿右緣排成對齊的縱向列。
- 「拾取元素」:點擊頁面上未識別的控件,將其納入管理。
- 「恢復全部默認」:將手動調整後的設置恢復默認。
6、也可以通過編程接口操作:
window.dshUiHub.items()
window.dshUiHub.setConfig(key, { on: false })
window.dshUiHub.arrange()
window.dshUiHub.dragMode(true)
上述調用分別用於讀取 UI 列表、隱藏某個 UI、一鍵自動排布和開啓直接拖拽模式。
適用場景與注意¶
適合在 DSH Web 中安裝了多個插件、頁面 UI 較多,且需要單獨隱藏、移動、鎖定或整理浮動控件的使用者。
使用前注意:
- 浮動模式使用
position:fixed。如果某個 UI 的祖先元素帶 CSStransform,fixed會相對該祖先定位;這類 UI 建議使用「微調」模式。 - 發現依賴平臺公開的
[data-slot]錨點與各插件的data-*標記。平臺升級後若改名,對應條目會按新身份重新出現,舊配置仍保留在本地。 - 內部元素按 DOM 順序編號。插件重排子元素後,配置可能跟隨序號落到相鄰元素上。
- 默認和微調模式尊重原插槽佈局。跨插槽的整頁重排,請把條目切到浮動後用「自動排布」。
- 定位通過
data-uihub-float、CSS 變量和!important規則實現,去掉標記即恢復插件自己的樣式。 - 所有狀態保存在瀏覽器
localStorage,與當前瀏覽器環境相關。 - 插件會在當前 DSH Web 環境中運行。安裝前請檢查源碼與 MIT 許可證,確認來源和代碼可信。
鏈接¶
- 目錄頁:https://www.skillhub.cn/plugins/Han-1413141/dsh-ui-hub
- GitHub:https://github.com/Han-1413141/dsh-ui-hub