Functional Utilities

Functional Utilities are a set of pure logic or auxiliary tools used to quickly access low-level system capabilities within JS, such as theme switching, encrypted storage, and router operations.

Please click to view the complete documentation

For the complete documentation of global functional utilities, please click to view the Global Services - Functions chapter.

Call Method

Consistent with component functions, it is recommended to retrieve them via inject in setup.

import { inject } from 'vue';

const { 
  $tc, 
  i18n, 
  updateRouteQuery, 
  openEnc 
} = inject("$global");

Theme & Visuals

Used to manage the application's theme colors, backgrounds, and interface layout states.

$tc (Get Theme Color)

Retrieves color values from the current theme palette.

• Parameters:

  • str (String): Color path, e.g., 'primary.main' or 'background.level1'.
  • cpt (Boolean): Whether to return a Vue Computed Property (ComputedRef). Defaults to false (returns a static value).

• Returns: Color string (Hex/Rgba) or Ref object.

  • Example:

  const mainColor = $tc('primary.main');

themeToggle

Switches the theme preset for the entire application.

• Parameters: themeName (String) - Must be a registered theme name (e.g., 'darkBlue', 'techLight').

Background Control

• initBG(config): Initializes or updates the global background. config supports passing detailed configurations like { graphicType: 'SvgPattern', ... }.
• resetBG(): Removes current background styles and resets to default.

Interface Toggles

• controlPanelToggle(): Toggles the expand/collapse state of the right-side control panel (settings panel).
• maximizeToggle(): Toggles the "maximize" state of the current view content area (hides the sidebar and top bar).
• toggleSider(): Toggles the fold/expand state of the left menu bar.

Internationalization

Handles multi-language logic.

i18n

Retrieves translation text for a specified key name.

• Parameters: str (String) - Language path, e.g., 'common.submit'.
• Returns: Translated string.

getSysLang

Retrieves the currently active system language code.

• Returns: 'cn' (Simplified Chinese) | 'hk' (Traditional Chinese) | 'en' (English).

initI18n

Asynchronously initializes the internationalization system, usually called when the App starts.

tConsolei18n

Outputs logs with internationalization keys in the console (used for debugging).

• Parameters: type (Log level), name (Module name), msg (i18n key), thro (Whether to throttle).

Router & Page

Shortcut operations that do not depend on the vue-router instance.

updateRouteQuery

Updates URL Query parameters without refreshing.

• Parameters: query (Object) - Parameter object to be merged.
• Example: updateRouteQuery({ tab: 'settings', id: 1024 }).

getRouteQuery

Retrieves URL Query parameters.

• Parameters: key (String, Optional) - Specific parameter name. If not passed, returns the entire Query object.

routerTransition

Configures transition animation for route navigation.

• Parameters: config (Object) - e.g., { name: 'vt-slide-left', duration: 0.5 }.

Page Reload

• softReload(): Soft Reload. Destroys and rebuilds the root component TuiProvider via v-if. The page will not refresh with a white screen, and preserves state in Vuex/Pinia.
• hardReload(): Hard Reload. Calls location.reload(), equivalent to F5 refresh; state will be lost.

Security & Storage

Provides WASM-based encryption capabilities and secure local storage.

Encryption/Decryption (WASM)

• openEnc(data, params): Encryption function. Encrypts arbitrary data into a string.
• openDec(encryptedData, params): Decryption function. Restores the encrypted string.

tStoreCrypto (Encrypted Storage)

Encapsulation of localStorage and sessionStorage; stored data is automatically encrypted.

• Methods:
• tStoreCrypto.s(type, key, data): Save. type is 'local' or 'session'.
• tStoreCrypto.g(type, key): Get. Reads and decrypts data.
• tStoreCrypto.d(type, key): Delete. Deletes data.

System Configuration

Loading Animation Configuration

• initSpinner(config): Configures the default style for the global $tLoading. Spinner type and size can be configured separately for full-screen (full) and local (area) modes.

Adaptive Configuration

• initResizeBy(): Retrieves the calculation function for adaptive baselines. Usually used for advanced DOM size monitoring logic.
• resetAdaptiveConfig(): Resets all states of the adaptive adapter.

Feature Flags

Read-only attributes used to judge which modules are enabled in the current environment.

• isActAdvFeatures: Advanced Component Module.
• isActEchartsFeatures: Chart Module.
• isActAdminFeatures: Backend Management Module.

Event Bus

$tBus

Note: Deprecated/Not Recommended. It is recommended to prioritize provide/inject or global state management. Global event emitter, containing emit, on, off methods.