通知和事件中心
1）任命
通知中心在系统和用户之间提供反馈,而不中断活动流。它捕获异步事件（投注，交易，奖金，KYC状态），并提供单个位置来查看通知，过滤和管理通知。
主要原则：- 在不分心的情况下通知。
- 优先级而不是重复。
- 在适当的地方采取行动。
2）通知类型及其应用
3）优先次序和重要程度
1.Critical（错误、故障、安全）-需要立即注意（Modal/Banner）。
2.Important（付款、出价、现金）-Toast+写入通知中心。
3.Informational（新闻、奖金）-徽章和磁带。
4.Social（朋友、聊天室、锦标赛）-不阻止UI的分组通知。
UX规则："每个屏幕不超过一个活动通知"。
如果它们更多-合并："3个新事件"。
4）通知中心架构
4.1事件来源
Backend → Event Bus → Notification Service → UI.
事件分类为"类型"，"severity"，"context"，"ttl"，"userId"。
保存在"notification_store" （Redis+DB）中。
4.2客户端流
WebSocket / SSE для real-time.
本地状态→ lazy装载10-20个通知。
Push API（移动/浏览器）-经用户同意可选。
4.3数据模型（示例）
json
{
"id": "n12345",
"type": "deposit_success",
"severity": "info",
"title": "Replenishment successful,"
"message": "You made 500 ₴ through Papara,"
"timestamp": "2025-11-03T19:20:00Z",
"context": { "transactionId": "tx123" },
"read": false,
"action": {"label": "View," "url": "/wallet/history "}
}5） UI组件
5.1图标和徽章
显示未读数（"≤ 99"）。
单击时,将打开通知面板/中心。
'aria-label='有新的通知'；在nule-'aria-hidden="true"。
5.2通知面板
卡片列表：图标→标题→短文本→ CTA →时间。
状态：新,读取,交付错误,从归档下载。
按日期分组：今天，昨天，早些时候。
5.3张通知卡
html
<article class="notif new" role="article">
<div class="icon success"></div>
<div class="content">
<h4> Replenishment successful </h4>
<p> 500 ₴ via Papara </p>
<time datetime =" 2025-11-03T19: 20"> 5 min ago </time>
</div>
<button class =" icon" aria-label = "Delete"> </button>
</article>6）状态和行动
新增：以颜色/背景色调突出显示。
阅读：苍白；没有徽章。
错误：图标+Retry。
系统：不删除,仅存档。
- Swipe （mobile） →删除/读取。
- 按钮：阅读更多,重复,隐藏。
- 大规模行动：记下所有已阅读的内容，清除所有内容。
7）视觉原理
通知中最多3行文本。
标题粗体，最多50个字符。
- 成功-绿色/'accent-success'
- 错误-红色/'accent-danger'
- 信息-蓝色/'accent-info'
- 注意-橙色/'accent-warning'
- 对比≥ AA，阴影最小。
- 动画：fade/slide ≤ 160毫秒，没有永久性移动。
8）时间安排和显示
Toast：3-5秒，暂停。
横幅：在行动之前。
Badge：虽然有未读。
收件箱：TTL存储（例如14-30天）。
在失去屏幕焦点时自动关闭-小心（不要失去重要状态）。
9）A11y和键盘
Toast具有'role='status'（或错误的'alert'）。
通知中心是'role='region' 's'aria-label='通知中心'。
支持箭头导航和Tab/Shift+Tab。
VoiceOver：在添加时阅读新通知（'aria-live='polite'"）。
焦点在出现时不会"跳跃"-仅在触觉关键的情况下。
10）性能
懒惰的下载和分区（每个20-30）。
数据压缩（"gzip"/"br"），查询分组。
WebSocket reconnection + backoff.
仅在"转换/操作性"上使用动画。
11） iGaming脚本
11.1投注和现金
"接受率"，"系数更改"，"现金完成"-toast+录制到磁带中。
错误时-toast"无法交付",带有Retry的横幅。
11.2付款
"补充成功"→ toast。
"处理输出"→磁带条目、ETA和更多按钮。
PSP错误→红色toast+CTA Retry。
11.3奖金和促销
主屏幕上的横幅："新锦标赛"，"存款奖金"。
通知中心存储所有促销活动的历史记录。
能够隐藏/取消订阅营销类型。
11.4 KYC和安全
在验证完成之前的Persistent横幅。
"KYC已确认"→磁带中的绿色toast+存档。
"文档已过期"→通知+CTA更新。
12）度量标准
通知的CTR（按类型）。
Dismiss rate（有多少人在没有动作的情况下关闭）。
Unread count avg и time-to-read.
Delivery success rate (для realtime).
事件和表演之间的偏差（目标≤ 300毫秒）。
WebSocket/Push交付时的错误/返回率。
13）反模式
每个事件中的声音和弹出窗口。
不可预测的自动闭合计时器。
重复相同的通知。
无缘无故截图器（"确认"，"重新启动"）。
将通知用作营销垃圾邮件。
14）设计系统令牌
json
{
"toast": {
"durationMs": 4000,
"maxWidth": 400,
"gap": 12,
"radius": 10,
"shadow": "var(--elev-3)"
},
"badge": {
"size": 18,
"color": "var(--accent-info)"
},
"panel": {
"width": 380,
"radius": 12,
"gap": 8,
"padding": "12 16"
},
"a11y": {
"ariaLive": "polite",
"contrastAA": true
}
}15） QA支票清单
功能性
- Real Time交付≤ 300毫秒。
- Toast在事件发生后显示≤ 100毫秒。
- 中心已同步（read/unread）。
- 大众的"阅读一切"工作。
UX
一次不超过1次。
- 通知的寿命是最佳的（3-5秒）。
- 重要通知将在生效之前保留。
- 文本≤ 3行，CTA一行。
A11y
- 'role="status" "/'aria-live'是正确的。
- 箭头导航和Tab工作。
- AA ≥的对比。
表演
- 分割和懒惰装载。
- >100通知时不带带带。
- 数据压缩和延迟渲染。
16）设计系统中的文档
Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Gaids：通知优先级，TTL，grouping，文桉写作。
模式：即时事件的触轮，重要事件的横幅，历史的中心。
Do/Do n't gallery："垃圾邮件通知"vs"平静的意识"。
简短摘要
通知中心不仅是事件的"内幕"，而且是信任和透明的体系结构。设计精良的通知会产生一种控制感：所有重要的东西都交付，没有消失，噪音被抑制。对于iGaming来说，这是至关重要的-用户必须看到赌注，付款和状态的确认，而不必被游戏分散注意力。