Notification Components

TechUI provides a global message notification system managed by a unified Dispatcher. Unlike traditional UI libraries, this system is a complete feedback mechanism featuring priority management, channel shunting, and visual grading to ensure critical information reaches the user even during information overload.

Core Component System

The system consists of four types of notification components tailored for different interaction scenarios:

Component	Visual Positioning	Interaction Mode	Typical Scenario
Message	Top-center	Auto-stacking (Parallel)	Operational feedback (e.g., "Save successful").
Notification	Top-right	Auto-stacking (Parallel)	System-level notifications (e.g., version updates), usually requiring manual closing.
Toast	Bottom	Singleton Queuing (Serial)	Weak interaction feedback (e.g., "Copied"), keeping the interface clean.
Flash	Global/Any	Preemptive Interruption (Exclusive)	Highest priority alerts (e.g., network loss, critical failure) with full-screen halo effects.

Dispatching and Priority

All notification requests are sent to the underlying $aDispatcher, which distributes them to different channels based on preset strategies.

Channel Shunting

• Parallel Channel (Message/Notify): Allows multiple messages to coexist on the screen, neatly stacked by automatically calculating height differences.
• Serial Channel (Toast): Displays only one item at a time. Multiple Toasts enter a queue and are shown sequentially, similar to a playlist.

Preemptive Mechanism

This is a unique TechUI design. When a Flash alert is triggered:

1. The system immediately pauses the current Toast queue.
2. The Flash is displayed with priority, accompanied by strong visual halo effects.
3. The original Toast queue resumes only after the Flash is processed.

Visual Tone

All notification components support five levels of visual tone configuration to adapt to complex business backgrounds:

• weak / base: Suitable for routine prompts.
• strong / strongInvert: Suitable for emphasis.
• extremeInvert: Extremely high contrast for scenarios that must grab attention.

Quick Start

All notifications are triggered via global methods, eliminating the need to embed components in templates.

import { inject } from 'vue';

const { $tMessage, $tFlash } = inject('$global');

// Standard feedback
$tMessage({ content: "Save successful", type: "success" });

// Urgent alert (triggers the interruption mechanism)
$tFlash({ 
  content: "Connection lost!", 
  type: "danger", 
  aniType: "sudden" 
});