Default Configuration Items

The control panel includes a series of built-in system-level configuration switches, covering three major categories: visual style, interaction experience, and layout mode. These options are intelligently displayed or hidden based on the current running environment and authorization status.

Visual & Effects

• Theme

  • Type: Radio / Color Swatch Selection
  • Description: Switches the theme style of the current application (e.g., DeepBlue, Night).
  • Visibility Logic: This option is automatically hidden if the system has only one theme registered.

• 3D Panel

  • Type: Switch
  • Description: Enables or disables the 3D perspective deformation effect of the SciFi panel. When enabled, the panel produces a subtle 3D parallax effect following the mouse position.
  • Visibility Logic: Displayed only when advanced features (isActAdvFeatures) are enabled and the 3D engine is successfully initialized.

• Mask Blur

  • Type: Switch
  • Description: Controls whether to enable Gaussian blur (Backdrop Filter) for the background of popups, sidebars, or mask layers. Disabling it can improve rendering performance on low-end devices.

Interaction Experience

• Transition

  • Type: Switch
  • Description: Globally enables or disables view transition animations during route navigation and state switching.
  • Visibility Logic: Displayed only in browsers that support the View Transitions API (such as Chrome/Edge). Automatically hidden in non-Webkit kernel browsers like Firefox.

• Sound

  • Type: Switch
  • Description: Globally enables or disables sound effects for system components (such as message notifications, click feedback).

• Navigation Trigger

  • Type: Radio
  • Description: Controls how submenus in the sidebar or top navigation are triggered.
  • Click: Click the parent menu to expand the sub-menu.
  • Hover: Hover the mouse to expand the sub-menu.

Layout & Adaptation

• Adaptive Mode (Adaptive)

  • Type: Radio
  • Description: Controls the scaling strategy of the TuiAdaptive panel.
  • Extension: Maintains aspect ratio; leaves whitespace or extends the background for excess space.
  • Flexible: Smart scaling; attempts to fill the screen.
  • Fixed: Strictly maintains the design aspect ratio.
  • Stretch: Forcibly stretches to fill the screen (may cause distortion).
  • Disabled: Disables the adaptive function; renders at original pixels.

• Global Background (Background)

  • Type: Radio
  • Description: Controls the rendering strategy of the background layer.
  • All: Displays both bottom (Root) and foreground (View) backgrounds.
  • View: Displays only the content area background.
  • Root: Displays only the root background.
  • None: Disables background rendering.

• Floater Insert

  • Type: Radio
  • Description: Controls the DOM node position where floating elements (such as Popups, Tooltips) are mounted.
  • Adaptive Panel (#tuiAdpt): Mounted inside the adaptive container; scales with the container.
  • Root Node (#tuiRoot): Mounted on the Body root node; unaffected by scaling.

• Visibility Logic: This option is hidden when Adaptive Mode is set to "Disabled".