Notification Dispatcher

👑Pioneer

The Dispatcher is the core "traffic commander" of the TechUI message notification system. It is invoked whenever any notification is triggered, managing the flow distribution for four notification types: Message, Notification, Toast, and Flash.

The primary responsibilities of the dispatcher include maintaining notification queues, calculating stacking positions, resolving priority conflicts (such as Flash interruptions), and preventing UI rendering chaos caused by a large volume of notifications triggered in a short period.

Core Dispatching Logic

The dispatcher manages notifications across three dimensional channels:

Parallel Channel

Applicable Components: Message, Notification

• Mechanism: Allows multiple instances to exist simultaneously.
• Layout: The dispatcher automatically calculates the vertical coordinates for each instance based on its height and a preset offset (spacing) to create a neat stacking effect.
• Grouping: When consecutive notifications with identical content and types are detected, the dispatcher merges them, updating the counter instead of adding new DOM nodes.

Serial Channel (Queue)

Applicable Components: Toast

• Mechanism: A strict single-instance queuing mechanism.
• Logic: Only one Toast can be displayed on the screen at a time. Subsequently triggered Toasts enter a memory queue. The dispatcher renders the next item in the queue only after the current Toast is destroyed (timer ends).

Preemptive Channel (Flash)

Applicable Components: Flash

• Mechanism: A high-priority exclusive mode.
• Logic:
  1. When a Flash is triggered, the dispatcher immediately pauses the current Toast queue.
  2. The Flash is displayed with priority (accompanied by full-screen visual effects).
  3. The dispatcher resumes the Toast queue only after the Flash queue is cleared (via manual closing or expiration).
• Feature: Similar to an "emergency vehicle," Flash possesses absolute right-of-way.

Runtime State

TechUI exposes the real-time operational state of the dispatcher through the $aDispatcher object. This is typically used for debugging or developing custom state monitoring panels.

import { inject } from 'vue';
const { $aDispatcher } = inject('$global');

// Access current state
console.log($aDispatcher.queue.length);

Read-only Properties

Property	Type	Description
currentChannel	String	The name of the currently active channel. Possible values: null (idle), 'parallel', 'serial', 'flash'.
queue	Array	The queue of messages waiting to be displayed, containing configurations for all Toast or Flash instances not yet rendered.

Global Configuration

The dispatcher's behavioral configuration is located in $attentionConfig.dispatcher. These settings are reactive and immediately affect subsequent notification behavior upon modification.

import { inject } from 'vue';
const { $attentionConfig } = inject('$global');

// Modify stacking offset
$attentionConfig.value.dispatcher.offset = 50;

Configuration Items

Property	Type	Default	Description
visible	Boolean	true	Whether the dispatcher is enabled. Setting this to false prevents all notifications from appearing.
debug	Boolean	false	Whether to enable the built-in visual debug panel (displays queue info in the bottom-right corner).
offset	Number	40	The vertical spacing (px) for stacking in the Parallel channel (Message/Notify).
position	String	'bottom-right'	The position of the debug panel on the screen.

Internal API

While developers usually call specific methods like $tMessage, understanding the underlying APIs helps clarify how the system works.

$tAttentionDispatcher(options)

This is the low-level entry point for all notification components. When you call $tMessage, your parameters are standardized and passed to this method.

• Function: Pushes the notification request into the dispatch pipeline.
• Parameters: Accepts a configuration object containing component type, content, priority, etc.

$tAttentionDispatcherClose()

• Function: Forcefully clears all queues in the dispatcher and destroys all currently displayed notification instances.
• Scenario: Typically called during route transitions or user logout to ensure a clean interface.