跳到主要内容
Termlib

UI 组件 · 反馈

通知提醒框

Notification

也叫：通知、消息通知、右上角通知、Notice

从屏幕角落（通常是右上角）弹出的消息卡片，带标题和正文，用来提醒新消息或后台任务结果。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

后台导出任务完成时，在页面右上角弹出一个通知提醒框，宽 360px，左侧对勾图标，标题「导出完成」，正文「订单数据已生成，共 1,280 条」，下方带「下载」按钮，右上角可关闭，8 秒后自动消失，鼠标悬停时暂停计时。

发给

01判断

你的内容是这样吗？

对照两列，确认通知提醒框是不是你要找的。

符合这些情况，用通知提醒框

  • 后台任务完成或失败，而用户此时可能在做别的事
  • 系统主动推送的新消息，比如新审批、新评论、被人提及
  • 消息需要标题加一两句正文，一句话说不清

是这些情况，换成别的

  • 只是反馈用户刚刚点击的操作结果

    改用轻提示

  • 需要长期保存、可回看的消息，应该放在消息中心列表里

  • 必须用户确认才能继续的事情

    改用对话框

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    用户每点一次按钮都从右上角弹一条通知，内容只有「操作成功」

  2. 02

    通知不会自动关闭又没有关闭按钮，堆满右侧一整列

  3. 03

    弹出的通知刚好盖住顶部导航的用户菜单或关键按钮

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

一张浮动的小卡片，由状态图标、标题、正文、可选操作按钮和右上角关闭按钮组成，多条时纵向堆叠。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1屏幕右上角或右下角的一张带投影小卡片
  2. 2卡片有加粗标题和一两行正文，右上角有关闭图标
  3. 3多条时从上往下排成一列

04解释

详细解释

通知提醒框是一张小卡片，从右上角（有时右下角）滑入，包含图标、标题、一两行正文，右上角有关闭按钮，有时还带「查看」之类的操作按钮。它可以几秒后自动关闭，也可以一直停留直到用户手动关掉。典型场景：导出任务完成、收到新的审批、有人在评论里提到你。

它和 轻提示 的区别在于信息量和来源：轻提示只有一句话，反馈用户刚刚做的操作；通知提醒框有标题和正文，往往是系统主动推送、与用户当前操作无关的消息。和 警告提示 的区别：警告提示固定在页面里说明持续状态，通知是浮在页面之上的临时卡片。

通知提醒框不等于消息中心。需要长期保存、可回看的消息，应该另做一个带徽标的通知列表。

开发者信息
术语 ID
component-notification
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-notification-notice
  • .el-notification
  • .arco-notification
  • .t-notification
  • .n-notification
  • .toast:has(.toast-header)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • notification
  • notify
  • notification-card
  • push-notification
  • notice-message
  • notification-message
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Notification
  • Notify
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30