dsh-ui-hub:DSH Web 插件 UI 集中管理

前言

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 的祖先元素帶 CSS transform,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
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜