归档抛物线飞入

实现一个归档抛物线飞入动效（原生 HTML/CSS/JS，零依赖，单文件交付）：
【效果描述】用户点击卡片上的"归档"按钮后，该卡片生成一个飞行副本，沿自然抛物线弧线飞向页面右上角的归档角标：飞行中副本从 scale 1 缩小至 0.2 并渐隐，命中角标后副本消失、角标轻微弹跳提示、源卡片从列表中移除。弧线不是直线瞬移，而是"先抛起后落下"的曲线轨迹，视觉上符合物理直觉。
【交互参数】
- 触发条件：点击卡片内 .uw-archive-btn；目标为页面中带有 data-archive-target 属性的角标元素
- 动画拆解：外层元素承担 translateX，animation 300ms linear；内层元素承担 translateY，animation 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)（ease-out 类缓出，先快后慢形成弧线）；缩放与透明度作用于内层，scale 1 → 0.2、opacity 1 → 0，同 300ms 同步执行；总时长可在 300-400ms 区间调节（注释标出）
- 轨迹计算：起飞前用 getBoundingClientRect() 分别取源卡片中心点与角标中心点，差值作为 X/Y 轴终点位移；纵向建议额外加 -40px 的初始上抛偏移增强弧线感（可调）
- 角标反馈：副本消失后角标执行一次 scale 1 → 1.3 → 1 的 200ms 弹跳
- 边界情况：角标不在视口内时仍以其实际坐标飞行（允许飞出屏幕）；连续快速点击多张卡片时各自独立生成副本并行飞行，互不干扰；prefers-reduced-motion 时跳过飞行动画，卡片直接移除、角标仅做不带动画的数字更新
【使用示例】
1. 消息归档：列表项 <div class="uw-card"><span>消息内容</span><button class="uw-archive-btn">归档</button></div>，页头放 <div class="uw-badge" data-archive-target>归档箱 <i class="uw-count">3</i></div>，点击后卡片飞入角标且计数 +1
2. 加入购物车：将角标换成购物车图标（data-archive-target 不变），副本内容可替换为商品缩略图 <img>，飞行视觉元素由 flyContent 工厂函数返回，可按项目替换为任意节点
【实现要点】
1. 点击时克隆源卡片（或调用 flyContent 工厂）生成副本，position: fixed 定位到源卡片坐标，pointer-events: none，加入高 z-index 层
2. 副本采用嵌套结构：<div class="uw-fly-x"><div class="uw-fly-y">内容</div></div>，外层只写 translateX 动画，内层只写 translateY + scale + opacity 动画——单条 transform 无法合成弧线，必须双轴分层
3. 通过 CSS 自定义属性 --uw-fly-x / --uw-fly-y 把 JS 算出的终点位移注入 keyframes（用 Web Animations API 的 element.animate() 更简洁，可二选一，注释说明）
4. 内层动画 onfinish 后：移除副本 DOM → 触发角标弹跳 class（uw-badge-pop，animationend 后移除）→ 更新计数 → 源卡片执行 200ms 高度收缩淡出后从 DOM 删除
5. 所有 keyframes 与类名集中定义，类名均以 uw- 开头
【质量要求】不污染全局样式、类名加 uw- 前缀；prefers-reduced-motion 时禁用动画；注释标出可调参数（总时长、上抛偏移量、终点缩放值、角标弹跳幅度）

【参考资源】
- 资料详情：https://ui.undoai.cn/components/parabola-archive-fly/
- 效果快照：https://ui.undoai.cn/components/parabola-archive-fly/cover.png
- Demo 源码：https://ui.undoai.cn/components/parabola-archive-fly/demo.html

展开后加载源代码