Provider

<TuiProvider> is the top-level component of the TechUI component library, acting as the unified Provider for global state, services, configuration, and core functions. You need to use this component at the outermost layer of your application to ensure the proper functioning of all TechUI features and the effectiveness of global configurations.

Component Functions

This component is the core entry point of the application, primarily responsible for the following functions:

• Global State & Service Injection: Uses the Vue provide mechanism to inject core services and states such as $tService, message notifications, masks, and loading states into all child components.
• Theme & Style Management: Listens for global theme changes ($gTheme, $gThemeScheme), updates CSS class names on the body in real-time, and initializes Echarts themes.
• View & Router Transitions: Encapsulates routerTransition and themeToggle methods to provide route navigation and theme switching with transition animations.
• Route Interception & Permission Control (Admin Features): When Admin Features are enabled, it handles route initialization, dynamic addition, login verification, and menu data persistence (via IndexedDB).
• System Event Handling: Listens for keyboard events (F11 full-screen toggle, Esc counting) and document click events.
• Device Information Awareness: Initializes and listens for device information (e.g., screen orientation, resolution, touch capability).
• Hard/Soft Reload: Provides softReload and hardReload methods.

How to Use

Place <TuiProvider> inside your Vue root component (e.g., App.vue), typically wrapping <router-view> or the main content of the application.

<template>
  <TuiProvider>
    <router-view />
  </TuiProvider>
</template>

// No need to import TuiProvider via import; it is globally imported in main.js and can be used directly.

Core Capabilities Provided

The component provides a complete global context to all its descendant components via provide('$global', ...). You can access it in any child component using the following method:

const global = inject('$global');
// Or using destructuring
const { $tMessage, routerTransition, $tState } = inject('$global');

Below is a detailed list of all injectable objects:

Global Interaction & Feedback (UI Feedback)

This section includes services for all system popups, prompts, and masks, along with their corresponding closing methods.

Service Name	Close/Destroy Method	Description
$tMessage	$tMessageCloseAll	Message alerts
$tNotify	$tNotifyCloseAll	Notification alerts
$tToast	$tToastClose	Lightweight toasts
$tLoading	$tLoadingClose	Global loading state
$tMask	$tMaskClose	Global mask layer (for modals or blocking operations)
$tPopover	$tPopoverCloaseAll	Popover service
$tFlash	$tFlashClose	Flash alerts
$tAttentionDispatcher	$tAttentionDispatcherClose	Attention dispatcher

Routing & Navigation Helpers (Routing)

Provides enhanced routing capabilities, especially for parameter handling and transition animations.

Name	Type	Description
routerTransition	Function	Core Method. Executes route navigation with view transition animations. Supports automatic determination of forward/backward direction.
updateRouteQuery	Function	Updates the Query parameters of the current route, supporting push or replace modes.
getRouteQuery	Function	Retrieves route parameters. Returns all if no argument is passed; returns a single value if a string is passed; returns multiple values if an array is passed.

System Control & State (System & Control)

Name	Type	Description
$tState	Object	Core State Tree. Contains reactive data such as globalConfig, deviceInfo, themePalette, etc.
$tBus	Object	Global Event Bus for cross-component communication.
$tService	Object	A collection object containing all utility functions.
themeToggle	Function	Toggles the theme color scheme and automatically triggers the theme switch transition animation.
softReload	Function	Soft Reload. Resets adaptive configurations and partial states without refreshing the browser.
hardReload	Function	Hard Reload. Directly calls window.location.reload().
logout	Function	Logout. Clears user data, Token, and IndexedDB, then redirects to the login page (exists only when isActAdminFeatures is true).
proxy	Object	The Proxy object of the current component instance (usually used to access Vue global properties).

Feature Flags

Used to determine which module sets are currently enabled in the system. (Usually not needed for business development logic).

Name	Type	Description
isActAdminFeatures	Boolean	Whether background management features (route permissions, menus, login interception) are enabled.
isActEchartsFeatures	Boolean	Whether Echarts chart support and automatic theme registration are enabled.
isActAdvFeatures	Boolean	Whether advanced features are enabled (specifically referring to the advanced feature set defined within the project).