技能介绍

问题所在

在交易、签约或回款确认等关键业务节点，一个「成功」的视觉反馈能显著提升用户信心。然而，很多开发者在实现庆祝动效时，习惯性地引入全屏遮罩层（overlay）或 el-dialog 全屏 loading 来承载礼花，这就立刻破坏了点击穿透（click-through）能力。结果是：动画播放时，按钮、表单、弹窗被冻结，用户误以为页面卡死。

如何工作

本技能只做一件事：在成交成功的瞬间，用 canvas-confetti 播放一束肉眼可见的礼花，且绝不拦截任何鼠标与页面操作。其核心步骤包括：

依赖接入：引入 canvas-confetti，默认由库自建 canvas 并设为不接收指针。
非阻挡画布：显式保证 pointer-events: none，禁止使用全屏 div 或遮罩，禁止在 canvas 上绑定 click。
礼花发射：在成功回调中调用 confetti()，建议 particleCount >= 80，持续 1–3s；追求仪式感可用短连发，同样保持 click-through。
挂载时机：仅在业务成功路径（成交、回款确认、合同签署成功）触发；失败或取消时不播放，也不改变任何业务提示。

适用边界与避坑

该技能适用于任何需要「有动效，但不影响点击」的正向业务瞬间。但必须严格规避以下反模式：

全屏遮罩：用全屏 div 盖住页面再放礼花，会直接挡掉点击。
事件吞没：canvas 未设 pointer-events: none，或创建 z-index 极高且可点的自定义层，会误吞业务事件。
无限循环：在 setInterval 里无限放礼花，导致性能下降与用户干扰。
失败也庆祝：在失败或取消路径放礼花，会误导用户。

此外，系统开启「减少动态效果」（prefers-reduced-motion: reduce）时应跳过粒子动画，仅保留 Toast 文案。动画结束后，若自建 canvas，建议移除节点，避免残留占位。验收时务必手工验证：礼花播放中点击按钮/输入框仍有响应，开发者工具中 canvas 的 pointer-events 为 none。