通知

Notification (通知) 是用于展示系统级重要信息的反馈组件。与轻量级的 Message 不同，Notification 支持标题与内容的分离展示，默认停留在屏幕右上角，并且通常不会自动关闭，直到用户确认或手动关闭。

它非常适合用于“新订单提醒”、“版本更新通知”、“任务执行结果”等需要用户明确感知的场景。

基础用法

通过 $tNotify 方法即可创建一个通知实例。

import { inject } from 'vue';

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

// 1. 基础通知 (仅内容)
$tNotify({ content: "您有一条新的待办事项" });

// 2. 带标题的标准通知
$tNotify({ 
  title: "系统维护", 
  content: "服务器将于今晚 00:00 进行例行维护，请提前保存数据。",
  type: "warning" 
});

进阶特性

视觉层级 (Tone)

Notification 支持 5 种视觉色调等级，配合 type 使用，可适应不同的背景复杂度或强调需求。

• weak: 弱化背景，适合非侵入式通知。
• base (默认): 标准强度。
• strong: 强色调，高饱和度。
• strongInvert: 强反色。
• extremeInvert: 极反色，用于最高级别的视觉强调。

$tNotify({
  title: "磁盘空间告警",
  content: "剩余空间不足 5%",
  type: "danger",
  tone: "strong" // 使用强色调背景
});

手动关闭与回调

默认情况下，Notification 的 duration 为 0（不自动关闭）。您可以通过 onClose 回调监听用户的关闭操作。

$tNotify({
  title: "文件导出",
  content: "点击关闭以清除此消息",
  onClose: () => {
    console.log("用户已阅，执行清理逻辑...");
  }
});

自动关闭

如果希望通知像 Message 一样自动消失，可以设置 duration（毫秒）。

// 15秒后自动关闭
$tNotify({
  title: "自动保存",
  content: "草稿已保存",
  duration: 15000 
});

通知分组 (Grouping)

当多个具有相同标题和内容的通知连续触发时，开启 grouping 可以将它们合并。这在处理高频系统消息（如连续报错）时非常有用。

// 连续触发时，界面只会显示一个通知框，并带有计数徽标
$tNotify({ 
  title: "连接超时", 
  content: "尝试重新连接服务器...", 
  type: "error",
  grouping: true 
});

全局方法

$tNotify(options)

创建并显示一条通知。返回一个包含 destroy() 方法的实例对象，用于手动提前关闭。

const notify = $tNotify({ title: "上传中...", content: "进度 0%", duration: 0 });

// 模拟进度更新后关闭
setTimeout(() => {
  notify.destroy();
}, 2000);

$tNotifyCloseAll()

立即关闭当前所有显示的 Notification 实例。

API 参考

属性名	类型	默认值	说明
title	String	-	通知标题，字体加粗显示。
content	String	(必填)	通知详情内容。
type	String	'info'	主题色类型：primary, success, warning, danger/error, info, emphasis 等。
tone	String	'base'	视觉色调。可选值：'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'。
duration	Number	0	显示时间 (ms)。0 表示不自动关闭。
onClose	Function	-	关闭时的回调函数。
position	String	'top-right'	弹出位置。可选：top-right, top-left, bottom-right, bottom-left 等。
grouping	Boolean	false	是否合并相同内容的通知。
showClose	Boolean	true	是否显示关闭按钮。
icon	String	-	自定义图标类名。
hideIcon	Boolean	false	是否隐藏图标。
transparent	Boolean	true	是否启用半透明背景。
backgroundBlur	Boolean	true	是否启用背景模糊。
hasShadow	Boolean	true	是否显示阴影。
shadowColor	String	'weak'	阴影强度等级。
className	String	-	自定义 CSS 类名。
appendTo	String/Object	-	指定挂载容器。

全局配置

全局配置对象 $attentionConfig 是响应式的。修改默认配置可立即影响后续创建的通知。

import { inject } from 'vue';

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

const changeConfig = () => {
  // 动态修改默认位置和时长
  $attentionConfig.value.notification.position = "bottom-right";
  $attentionConfig.value.notification.duration = 10000;
  $attentionConfig.value.notification.offset = 30;
};

全局 ESC 监控

为了提供高效且符合直觉的交互体验，本组件深度集成了全局 escCounter 监控。当用户按下 Esc 键时，所有当前显示的通知实例将会被自动销毁。这允许用户通过键盘快速清理屏幕上的临时信息，无需逐个手动点击关闭。