跟进结果轻提示
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_f1b049da/lf2026712
技能介绍
要解决的问题
跟进操作后缺少即时反馈是常见的体验缺口。用户提交跟进记录后,界面毫无变化,会误以为操作未生效;如果每个组件都自行 new Notyf(),又会出现多个 toast 堆叠、样式错乱、无法自动关闭的问题。更糟糕的是,用 Toast 替代删除确认等高风险操作,会让用户在不经意间误触不可逆操作。
核心能力与实现
本技能基于 Notyf 库,提供一套全局单例的轻量反馈方案。核心思路是应用内只创建一个 Notyf 实例,通过两个方法复用:toastFollowOk 展示成功提示(绿色),toastFollowFail 展示失败提示(红色,可附带简短原因)。
关键步骤:
- 引入
notyf依赖及对应 CSS 文件。 - 在应用入口初始化单例实例,避免重复
new。 - 在保存跟进的 API 调用
then回调中触发成功提示,catch回调中触发失败提示。 - 文案保持简短,错误提示可携带简要原因。
适用边界
本技能仅适用于轻量级操作反馈场景:保存跟进、表单提交、Demo 操作等。不要用它替代删除确认、支付确认等需要用户明确决策的高风险交互——这类场景应使用 SweetAlert 等确认弹窗。同时,本技能不处理站内信、推送通知等持久化消息通道。如果已有全局通知架构,将本技能作为补充层即可。
使用场景
- 在客户跟进页面,保存跟进记录后用 Toast 提示保存成功或失败。
- 表单提交后,不跳转页面,用轻提示反馈提交结果,适合多步操作。
- Demo 演示增删改查时,用 Toast 即时显示操作成功或错误状态。
- 调用跟进 API 后,根据 then/catch 状态用不同颜色提示用户。
适合人员
- 全栈开发者:需要快速为表单和 API 操作添加即时反馈,不想重复写通知逻辑。
- 产品演示者:在演示后台管理功能时,需要让操作结果即时可见,提升观众理解。
- 前端工程师:正在集成轻量通知系统,希望避免多组件重复创建 Notyf 实例。
- 后端转前端开发者:熟悉 API 调用流程,希望将 then/catch 状态直观展示给用户。