Global Services

TechUI has built a high-performance, lightweight, and highly integrated system infrastructure. These functions do not rely on massive third-party libraries but achieve comprehensive coverage from visuals to interactions through self-developed solutions (such as WASM, native API encapsulation).

TuiService is the "central nervous system" of the TechUI component library. Based on Vue 3's provide / inject dependency injection mechanism, it constructs a global communication and state management solution that spans components and hierarchy levels.

It is responsible not only for managing the application's theme, configuration, and device information but also integrates core logic for message feedback, view transitions, route control, and backend management systems. Through the <TuiProvider> component, these capabilities are seamlessly injected into every corner of the application.

Core Mechanism and Usage

Before using TuiService, you must ensure that your application's root node is wrapped with the TuiProvider component. For configuration details, please refer to the Provider chapter.

In any child component, you do not need to import modules one by one; simply inject the $global identifier to retrieve the complete service instance:

import { inject } from 'vue';

// Inject in setup
const global = inject('$global');

// Recommended: Destructure to use core features
const { 
  $tState,           // Global reactive state tree
  $tMessage,         // Message prompt service
  routerTransition,  // Route navigation with animation
  themeToggle,       // Theme toggle function
} = inject('$global');

Reactive State Tree

This is the application's "Data Warehouse," containing all globally shared dynamic data. All states are Vue reactive objects; modifications trigger view updates immediately.

• Global Config (globalConfig): Manages basic settings like platform type, 3D switches, and mask effects.
• Runtime State (globalState): Real-time monitoring of fullscreen status, sidebar collapse, click targets, and window size changes.
• Device Perception (deviceInfo): Automatic detection of screen resolution, device type (PC/Mobile), and landscape/portrait orientation.
• Appearance Config: Includes theme color palettes (themePalette), background rendering (backgroundConfig), and CSS variable parameters (globalParams).

Interaction & Feedback System

Provides a unified set of UI feedback interfaces, allowing direct function calls without manually mounting components.

• Message Notification: $tMessage (Message), $tNotify (Notification), $tToast (Light Tip), $tFlash (Strong Alert).
• Global Mask: $tMask controls global background blurring and click interception.
• Loading State: $tLoading provides full-screen or local loading animation services.
• Popovers & Panels: $tPopover manages global popups, controlPanel manages the system console.

Core Functional Functions

Encapsulates complex business logic, providing out-of-the-box methods.

• View Transition: routerTransition and themeToggle provide cinematic page transitions and theme switching animations.
• System Control: Supports softReload (Soft reload without refresh) and hardReload (Hard reload).
• Route Helper: Shortcut tools for route parameter operations like updateRouteQuery.
• Utility Set: Includes underlying tools like Internationalization (i18n) and Local Encrypted Storage (tStoreCrypto).