轻提示
Toast
UI 组件也叫：全局提示、Message、Snackbar、吐司提示
一句话：操作后在屏幕顶部或底部短暂出现的一行小提示，几秒后自动消失，不打断用户。
详细解释
轻提示用来告诉用户「刚才的操作有结果了」，比如「已保存」「复制成功」「网络异常，请重试」。它通常只有一个状态图标加一句话，出现在屏幕顶部居中或底部，2~3 秒后自动消失，不需要用户点任何东西。Ant Design 和 Element Plus 里叫 Message，MUI 里叫 Snackbar，sonner、react-hot-toast 这类库直接叫 Toast。
三个反馈组件的区别：轻提示是 临时的一句话，自动消失；警告提示 是嵌在页面里的固定横条，一直显示直到问题解决；通知提醒框 从右上角弹出，带标题和多行正文，适合更重要、需要用户留意的消息。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
点击「保存」成功后，在页面顶部居中显示一条轻提示「已保存」，左侧带对勾图标，3 秒后自动淡出；失败时显示红色叉号图标和「保存失败，请重试」。多条提示同时出现时依次向下堆叠，不遮挡主要操作按钮。
结构与适用场景
结构描述
一个小型浮动条，包含状态图标和一句提示文字，有时右侧带「撤销」之类的单个操作。
适用场景
- 保存、复制、删除等操作完成后，只需要一句话告知结果
- 结果不需要用户做任何决定，看一眼就能继续操作
- 执行了可撤销的操作，想在提示里附带一个「撤销」入口
不适用场景
- 错误信息需要用户仔细阅读或照着处理，几秒就消失会来不及看
- 提示需要一直留在页面上，比如账号未认证、配额即将用完
- 消息带标题和多行正文，或需要用户点进去查看详情
常见坏用法
- 表单校验错误只用轻提示报一句，用户不知道具体是哪个字段错了
- 同时连续弹出一堆轻提示，把页面顶部挡满
- 把重要的失败信息做成轻提示，几秒后消失，用户根本没看到
识别特征
- 屏幕顶部居中或底部的一个小胶囊或小条
- 只有一个图标加一句短文字
- 几秒后自动消失，没有遮罩
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-message-notice.el-message[class*="MuiSnackbar-root"].arco-message.t-message.n-message[data-sonner-toast].van-toast.toast:not(:has(.toast-header))