闪光

⭐明星组件

👑首创

Flash (闪光) 是 TechUI 通知体系中优先级最高的强提醒组件。它通常用于展示紧急告警如“服务器断连”、“数据丢失风险”、“数字孪生系统中的火警”等或关键状态变更。

与普通通知不同，Flash 具有 “强占式” 调度特性。触发时，它会伴随全屏的动态光晕特效，并立即暂停当前正在展示的其他轻提示（Toast），优先占据屏幕焦点，直到 Flash 队列被清空。

基础用法

通过 $tFlash 方法即可触发一个闪光告警。

import { inject } from 'vue';

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

// 1. 基础告警
$tFlash({ 
  content: "检测到网络异常，正在重连...", 
  type: "danger" 
});

// 2. 急促闪烁效果
$tFlash({ 
  content: "紧急制动已启动！", 
  type: "error",
  aniType: "sudden" 
});

核心特性

强占式调度 (Preemptive)

Flash 拥有绝对的“路权”。

• 插队: 当 Flash 触发时，调度器会立即暂停当前的 Toast 队列。
• 独占: 只有当所有 Flash 消息处理完毕（手动关闭或自动消失）后，之前被暂停的 Toast 才会恢复展示。
• 队列计数: 如果短时间内触发了多条 Flash，屏幕角落（由 queuePosition 决定）会显示当前剩余的告警数量。

全屏视觉特效

Flash 激活时，会产生一个以当前通知内容为中心的全屏光晕遮罩。

• 非阻塞: 遮罩层设置了 pointer-events: none，因此不会阻挡用户对页面其他内容的点击操作。
• 动画风格 (aniType):
  • soft (默认): 柔和的呼吸光晕，适合常规警告。
  • sudden: 急促的高频闪烁，适合紧急故障。

外观复用

Flash 本质上是一个调度和特效包装器，其内部的内容载体可以复用 Toast 或 Message 的样式。

// 使用 Message 的外观（顶部弹出）
$tFlash({
  content: "系统核心温度过高",
  appearance: "message", 
  position: "top-center"
});

// 使用 Toast 的外观（底部弹出，默认）
$tFlash({
  content: "连接已断开",
  appearance: "toast"
});

视觉层级 (Tone)

支持 5 种色调等级，用于增强或减弱告警的视觉冲击力。

$tFlash({
  content: "严重错误",
  type: "danger",
  tone: "strongInvert" // 强反色模式
});

全局方法

$tFlash(options)

将一条高优先级告警推入 Flash 队列。

$tFlashClose()

关闭当前正在展示的 Flash 告警。如果队列中还有剩余告警，将自动播放下一条。

API 参考

属性名	类型	默认值	说明
content	String	(必填)	告警内容。
type	String	'info'	主题色类型 (primary, danger, warning 等)。
tone	String	'base'	视觉色调。可选值：'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'。
aniType	String	'soft'	动画风格。可选：'soft' (柔和呼吸), 'sudden' (急促闪烁)。
appearance	String	'toast'	内容载体外观。可选：'toast', 'message'。
queuePosition	String	-	队列计数器的显示位置 (如 'top-right')。
queueOffset	Number	0	队列计数器相对于位置的额外偏移量 (px)。
spreadRadius	Number	15	光晕扩散半径 (px)。
blurRadius	Number	30	光晕模糊半径 (px)。
showClose	Boolean	true	是否显示关闭按钮。
onClose	Function	-	关闭时的回调函数。
duration	Number	-	展示时长。Flash 通常建议设为 0 (需手动关闭) 或较长的时长。
grouping	Boolean	false	是否开启分组。
typedConfig	Object	-	透传给内部内容组件 (Toast 或 Message) 的样式配置。
icon	String	-	自定义图标。
hideIcon	Boolean	false	是否隐藏图标。
transparent	Boolean	true	是否启用半透明背景。
backgroundBlur	Boolean	true	是否启用背景模糊。
className	String	-	自定义 CSS 类名。

全局配置

全局配置对象 $aFlash (或 $attentionConfig.flash) 是响应式的。您可以动态调整光晕特效的强度或默认外观。

import { inject } from 'vue';

const { $aFlash } = inject('$global');

const upgradeFlashEffect = () => {
  // 增强光晕效果
  $aFlash.value.spreadRadius = 50;
  $aFlash.value.blurRadius = 100;
  // 修改默认外观为 Message 风格
  $aFlash.value.appearance = "message";
};

交互权重说明

由于 Flash 组件设计用于展示极高权重、紧急或需要强制关注的通知信息（如系统级警报、成就解锁等），它特意屏蔽了全局 escCounter 的监控。

这意味着用户无法通过按下 Esc 键来快速关闭它，必须等待其动画播放结束或进行显式的交互操作。这种设计是为了防止关键信息被用户习惯性的“Esc 连击”意外忽略。