Core Methods

TechUI provides a comprehensive global function library covering various aspects from theme customization and interface interaction to underlying security. These methods can be used directly in the setup syntax sugar of Vue components, greatly improving development efficiency.

Universality and Differentiation

This chapter is a common chapter for all component libraries, aiming to explain the general architecture and global services of the TechUI ecosystem.

Given that different product versions (such as Prime, Scifi, Admin, etc.) have different functional positionings, some global states or functions displayed in the documentation may only be effective in specific component libraries.

Please be sure to pay attention to the applicable version tags marked next to each API when reading to distinguish its availability.

As shown in the following example:

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

This means that the Scifi component library does not support this option. If no such flag is specified, it is common to all component libraries.

Theme & Color

$tc(str, cpt)

Retrieves color values from the theme palette.

Parameters:

• str (String): Color path, e.g., 'primary.main'.
• cpt (Boolean): Whether to return a computed property, default is false.

Returns: Color value or Computed property.

// Get color value
const primaryColor = $tc('primary.main');

// Get reactive color value
const primaryColorRef = $tc('primary.main', true);

themeToggle(themeName)

Switches to the specified preset theme.

Parameters:

• themeName (String): Theme name (must be registered).

// Switch theme
themeToggle('darkBlue');

Background Management

initBG(config)

Initializes the background.

Parameters:

• config (Object): Background configuration object (optional).

// Initialize with default configuration
initBG();

// Initialize with custom configuration
initBG({
  graphicType: 'SvgPattern',
  SvgPattern: { /* configuration */ }
});

resetBG()

Resets the background, removing background styles.

resetBG();

Loading Animation

initSpinner(config)

Initializes loading animation configuration.

Parameters:

• config (Object): Loading animation configuration (optional).

initSpinner({
  full: { name: "ringA", size: 80 },
  area: { name: "pointB", size: 35 }
});

Adaptive System

resetAdaptiveConfig()

Resets adaptive configuration, clearing related states and styles.

resetAdaptiveConfig();

initResizeBy()

Gets the computed property function for the adaptive benchmark DOM.

Returns: Computed property function.

const resizeByFn = initResizeBy();
const resizeBy = resizeByFn.value('global'); // Returns globalConfig.resizeBy

Internationalization

initI18n()

Asynchronously initializes the internationalization system.

await initI18n();

i18n(str)

Gets localized language string.

Parameters:

• str (String): Language path, e.g., 'common.confirm'.

Returns: Translated text.

const confirmText = i18n('common.confirm');

getSysLang()

Gets the current system language.

Returns: Language code ('cn' | 'hk' | 'en').

const lang = getSysLang();

tConsolei18n(type, name, msg, thro)

Outputs internationalized console messages.

Parameters:

• type (String): Message type.
• name (String): Message name.
• msg (String): Message key.
• thro (Boolean): Whether to throttle, default is true.

tConsolei18n('error', 'Network', 'errors.network');

Interface Control

controlPanelToggle()

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

Toggles the display state of the control panel.

controlPanelToggle();

maximizeToggle()

Toggles the maximized state.

maximizeToggle();

toggleSider()

Toggles the sidebar collapse state.

Although the Base and Scifi component libraries do not have a sidebar, this method can still be used to control a custom-built sidebar.

toggleSider();

Routing Related

updateRouteQuery(query)

Adds query parameters to the current route.

Parameters:

• query (Object): Query parameter object to add.

updateRouteQuery({ id: 123, tab: 'info' });

getRouteQuery(key)

Gets query parameters of the current route.

Parameters:

• key (String): Parameter key name (optional, returns all if not passed).

Returns: Parameter value or complete query object.

// Get single parameter
const id = getRouteQuery('id');

// Get all parameters
const query = getRouteQuery();

routerTransition(config)

Controls route transition animation.

Parameters:

• config (Object): Transition configuration.

routerTransition({
  name: 'vt-slide-left',
  duration: 0.5
});

Page Reload

softReload()

Soft reload: Resets the TuiProvider component via v-if, information in state management remains unchanged.

softReload();

hardReload()

Hard reload: Refreshes the entire page via location.reload(), information in state management will be lost.

hardReload();

Message

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tMessage(options)

Displays a message prompt.

Parameters:

• options (Object | String): Message configuration or message text.

// Simple usage
$tMessage('Operation successful');

// Complete configuration
$tMessage({
  type: 'success',      // success | error | warning | info
  content: 'Operation successful',
  duration: 3000,
  closable: true
});

$tMessageCloseAll()

Closes all messages.

$tMessageCloseAll();

Notification

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tNotify(options)

Displays a notification.

Parameters:

• options (Object): Notification configuration.

$tNotify({
  type: 'info',
  title: 'System Notification',
  content: 'You have a new message',
  duration: 4500
});

$tNotifyCloseAll()

Closes all notifications.

$tNotifyCloseAll();

Toast

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tToast(options)

Displays a Toast prompt.

Parameters:

• options (Object | String): Toast configuration or text.

// Simple usage
$tToast('Saved');

// Complete configuration
$tToast({
  content: 'Saved',
  duration: 2000,
  position: 'center'  // top | center | bottom
});

$tToastClose()

Closes the current Toast.

$tToastClose();

Flash Alert

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tFlash(options)

Displays a flash alert.

Parameters:

• options (Object): Flash configuration.

$tFlash({
  content: 'New message',
  appearance: 'toast',
  frequency: 2
});

$tFlashClose()

Closes the Flash alert.

$tFlashClose();

Attention Dispatcher

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tAttentionDispatcher(config)

Configures the attention component dispatcher, used to sort and pop up all reminder components in order.

Parameters:

• config (Object): Dispatcher configuration.

$tAttentionDispatcher({
  queue: [
    { type: 'message', content: 'First item' },
    { type: 'notify', content: 'Second item' }
  ],
  position: 'bottom-right'
});

$tAttentionDispatcherClose()

Closes the dispatcher.

$tAttentionDispatcherClose();

Popover

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

$tPopover(target, options)

Displays a Popover.

Parameters:

• target (Element | String): Target element or selector.
• options (Object): Popover configuration.

$tPopover('#btn', {
  content: 'Tip content',
  placement: 'top',    // top | bottom | left | right
  trigger: 'hover'     // hover | click
});

$tPopoverCloseAll()

Closes all Popovers.

$tPopoverCloseAll();

Mask

$tMask(options)

Displays the mask layer.

Parameters:

• options (Object): Mask configuration.

$tMask({
  blur: true,
  closable: true,
  zIndex: 1000
});

$tMaskClose()

Closes the mask layer.

$tMaskClose();

Loading

$tLoading(options)

Displays loading animation.

Parameters:

• options (Object | String): Loading configuration or hint text.

// Simple usage
$tLoading('Loading...');

// Complete configuration
$tLoading({
  text: 'Loading...',
  type: 'full',        // full | area
  spinner: 'ringA'
});

$tLoadingClose()

Closes loading animation.

$tLoadingClose();

Audio Prompt

Audio playback manager.

audio.play('notification');
audio.stop();

Encryption & Decryption

Encryption and decryption methods provided by the Wasm module.

openEnc(data)

Data encryption function.

Parameters:

• data (Any): Data to be encrypted.
• params (String): Optional parameters ['data','front','store','com'].

Returns: Encrypted string.

const encrypted = openEnc({ user: 'admin' },params);

openDec(encryptedData)

Data decryption function.

Parameters:

• encryptedData (String): Encrypted data.
• params (String): Optional parameters ['data','end','store','com'].

Returns: Decrypted data.

const decrypted = openDec(encrypted,params);

tStoreCrypto

Encrypted storage tool providing secure local storage functionality.

• type (String): Optional parameters ['local','session'] corresponding to localStorage and sessionStorage.

// Encrypted save
tStoreCrypto.s(type,'key', data);

// Decrypted read
const data = tStoreCrypto.g(type,'key');

// Delete
tStoreCrypto.d(type,'key');

Feature Flags

isActAdvFeatures

Whether advanced component features are enabled.

if (isActAdvFeatures) {
  // Use advanced components
}

isActEchartsFeatures

Whether ECharts features are enabled.

if (isActEchartsFeatures) {
  // Use ECharts related features
}

isActAdminFeatures

Whether Admin features are enabled.

if (isActAdminFeatures) {
  // Use Admin related features
}

$tBus Event Bus

• Global event bus for inter-component event communication. Deprecated and not recommended!!!.
• It is recommended to use provide and inject for small-scale component communication.
• It is recommended to use global state management for large-scale component communication.

// Emit event
$tBus.emit('eventName', data);

// Listen to event
$tBus.on('eventName', callback);

// Remove listener
$tBus.off('eventName', callback);