通知组件
TechUI 提供了一套由 调度器 (Dispatcher) 统一接管的全局消息通知体系。
与传统 UI 库不同,TechUI 的通知系统不仅仅是简单的弹窗,而是一个具备优先级管理、通道分流和视觉分级的完整反馈机制。它确保了在信息过载时,界面依然有序,且关键信息能够穿透干扰触达用户。
核心组件体系
系统包含四种维度的通知组件,分别适用于不同的交互场景:
| 组件名称 | 视觉定位 | 交互模式 | 典型场景 |
|---|---|---|---|
| Message (消息) | 顶部居中 | 自动堆叠 (并行) | 操作反馈(保存成功、删除失败)。 |
| Notification (通知) | 屏幕右上 | 自动堆叠 (并行) | 系统级通知(版本更新、新订单),通常需手动关闭。 |
| Toast (轻提示) | 屏幕底部 | 单例排队 (串行) | 弱交互反馈(已复制、已刷新),保持界面极度整洁。 |
| Flash (闪光) | 全局/任意 | 强占插队 (独占) | 最高优先级告警(断网、核心故障),伴随全屏光晕特效。 |
设计哲学 调度与优先级
所有的通知请求均汇集至底层的 $aDispatcher,由其根据预设策略分发至不同通道。
通道分流 (Channels)
- 并行通道 (Message/Notify):允许屏幕上同时存在多条消息,通过自动计算高度差进行整齐堆叠。
- 串行通道 (Toast):同一时间只显示一条。多条 Toast 会进入队列,像播放列表一样依次展示。
强占式机制 (Preemption)
这是 TechUI 的独特设计。当 Flash 告警触发时:
- 系统会立即暂停当前的 Toast 队列。
- Flash 优先展示,并伴随强烈的视觉光晕。
- 待 Flash 处理完毕后,原有的 Toast 队列才会恢复播放。
视觉色调 (Tone)
为了适应复杂的业务背景,所有通知组件均支持 5 级视觉色调配置:
weak/base:适合常规提示。strong/strongInvert:适合强调。extremeInvert:极高对比度,用于必须引起注意的场景。
快速开始
所有的通知均通过全局方法触发,无需在模板中预埋组件。
javascript
import { inject } from 'vue';
const { $tMessage, $tFlash } = inject('$global');
// 常规反馈
$tMessage({ content: "保存成功", type: "success" });
// 紧急告警 (触发插队机制)
$tFlash({
content: "连接断开!",
type: "danger",
aniType: "sudden"
});