Introduction

In the DSH plugin ecosystem, multiple plugins may simultaneously add UI elements such as buttons, icons, charts, and input boxes to the page. Since there is no unified position management among plugins, overlapping, occlusion, and crowding are actual problems encountered.

dsh-ui-hub is a DSH Web client plugin maintained by Han-1413141, licensed under the MIT License. It enumerates the official UI and plugin UI on the page into a manageable list, providing individual toggles, drag/coordinate positioning, collision avoidance, and one-click auto-arrangement.

What is this

  • Plugin Name: dsh-ui-hub
  • Maintainer: Han-1413141
  • License: MIT
  • Runtime Environment: Node.js ≥ 20, and requires DeepSeek Harness supporting the dsh plugin command
  • Launch Method: The plugin starts with dsh web

One sentence: Provides a unified control panel for UI in DSH Web pages.

Core Features

The following introduces verified features:

  • Enumerates plugin UI within every [data-slot] slot on the platform, as well as floating controls detached from slots.
  • Unrecognized new controls can be captured by clicking “Pick Element”.
  • The top level of the panel is divided into two categories: “Official UI” and “Plugin UI”.
  • Categories and slot groups fold in two levels; all are collapsed by default, and the expanded state is automatically remembered.
  • Each UI root node can be toggled independently, and internal buttons, icons, charts, and input boxes can be toggled individually.
  • Supports three positioning modes: Default, Fine-tune, and Floating.
  • In drag mode, you can directly drag any UI to change its position, or drag the bottom-right handle to resize it.
  • Collision avoidance supports three levels: Off, Smart, and Strict. Once a specific item is locked, it will not be squeezed, but it can squeeze others.
  • One-click auto-arrangement to align all floating UI into a vertical column along the right edge.
  • All toggles, positions, sizes, and collapse states are saved in the browser’s localStorage and automatically restored after refreshing or restarting the session.
  • Does not modify any plugin code; closing or uninstalling the plugin restores the page element-by-element.

Installation and Enablement

First, install the plugin:

dsh plugin --profile web add github:Han-1413141/dsh-ui-hub

After installation, restart dsh web. A “UI Manager” capsule button will appear in the top-right corner of the page. You can also open the management panel using the shortcut Ctrl+Shift+U or ⌘⇧U on macOS.

Typical Usage

  1. After opening the panel, the top layer consists of two collapsed categories: “Official UI” and “Plugin UI”. Click a category to expand the group names grouped by slots, then click a group name to expand the UI entries within that group.

  2. The switch on the left side of the entry row is used to immediately show or hide the corresponding UI. The ⋯ on the right can be clicked to expand details.

  3. Set the positioning mode in the details:
    - Default: Keeps the original layout.
    - Fine-tune: Enter horizontal/vertical offsets.
    - Floating: Enter X/Y coordinates.

  4. When direct adjustment is needed, enable “Drag Mode” in the top toolbar. Once enabled, you can directly drag any UI on the page to change its position, or drag the bottom-right handle to change its size.

  5. The top toolbar also allows for:
    - Auto-arrange: Aligns all floating UI into a vertical column along the right edge.
    - Pick Element: Clicks on unrecognized controls on the page to include them in management.
    - Restore All Default: Restores manual adjustments to default settings.

  6. You can also operate via the programming interface:

window.dshUiHub.items()
window.dshUiHub.setConfig(key, { on: false })
window.dshUiHub.arrange()
window.dshUiHub.dragMode(true)

The calls above are used to read the UI list, hide a specific UI, auto-arrange in one click, and enable direct drag mode, respectively.

Applicable Scenarios and Notes

Suitable for users who have installed multiple plugins in DSH Web with many page UI elements, and need to individually hide, move, lock, or organize floating controls.

Notes before use:

  • Floating mode uses position:fixed. If a UI’s ancestor element has a CSS transform, fixed will be positioned relative to that ancestor; for such UIs, it is recommended to use the “Fine-tune” mode.
  • It relies on the platform’s public [data-slot] anchors and each plugin’s data-* markers. If the platform is upgraded and names are changed, the corresponding entry will reappear with the new identity, while the old configuration remains locally.
  • Internal elements are numbered according to DOM order. If a plugin rearranges its child elements, the configuration might fall onto adjacent elements due to the sequence number.
  • Default and Fine-tune modes respect the original slot layout. For full-page reordering across slots, please switch the entries to Floating and use “Auto-arrange”.
  • Positioning is implemented via data-uihub-float, CSS variables, and !important rules. Removing the marker restores the plugin’s own style.
  • All states are saved in the browser’s localStorage and are related to the current browser environment.
  • The plugin runs in the current DSH Web environment. Before installing, please check the source code and the MIT license to confirm the source and code are trustworthy.

Links

  • Directory Page: https://www.skillhub.cn/plugins/Han-1413141/dsh-ui-hub
  • GitHub: https://github.com/Han-1413141/dsh-ui-hub