GiftFeed
gift-feed礼物连击 · 受控礼物事件流 + 同 id 连击合并 combo ×N 滚动弹跳计数(纯函数 applyGiftEvent 可测) + 横幅左滑入/自动消散计时(每连击重置) + max 同屏上限挤旧 + dogfood Avatar · 直播打赏特效(pointer-events none)
用法
基础用法
受控传入礼物事件流（events 数组追加），组件自动合并同 id 连击并播放进场动画。
tsx
const [events, setEvents] = useState<GiftEvent[]>([]);
// 收到礼物时追加事件；同一 id 再次传入 → combo 递增
// setEvents((p) => [...p, { id: "g1", user: { name: "土豪哥" }, gift: { name: "火箭", icon: "🚀" }, combo }]);
<GiftFeed events={events} />横幅上限
max 控制同时在屏的横幅数（超出挤掉最旧），这里只保留 1 条。
tsx
<GiftFeed events={events} max={1} />停留时长
duration 控制单条无新连击后的停留毫秒，调短后横幅消散更快。
tsx
<GiftFeed events={events} duration={2000} />何时用
直播间/互动场景展示打赏礼物连击横幅时用：同一用户对同一礼物快速连点合并为 combo ×N 弹跳计数、自动消散、同屏上限挤旧。它是叠在内容之上的特效层（pointer-events:none）；通用结果反馈用 Result，普通通知用 Notification。配合 FloatingReactions 做点赞飘心。
导入
ts
import { GiftFeed, applyGiftEvent } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| events* | GiftEvent[] | — | 受控礼物事件流（追加）。GiftEvent = {id, user:{name,avatar?}, gift:{name,icon?,color?}, combo?}，同 id 再次传入视为同一连击 |
| max | number | 3 | 同时显示横幅上限（超出挤掉最旧） |
| duration | number | 4000 | 单条无新连击后停留 ms |
| className | string | — | 容器类名 |
applyGiftEvent 为纯函数：把一个 GiftEvent 归并进当前在屏横幅数组（同 id 合并、combo 递增、超 max 挤旧），可单独单元测试。
禁忌 / 坑
events是「追加流」语义：靠id区分是否同一连击，同 id 才合并 combo。不同礼物务必给不同id，否则会被误并为连击。combo由调用方维护并递增（组件只负责动画呈现）；不传则按出现次数自增。- 注意
events数组无限增长会占内存，示例里用.slice(-30)截断；生产同理别让它无界累积。 - 暂无其它已知坑。
相关
Alert · Banner · Toast · Notification · ServiceMessage · Result