Gamble Hub UI组件库

1）目标和原则

为何：加快信息传递,提供一致的UX和简化支持。

• 语义和中立。组件解决了UI问题，而没有业务逻辑。
• A11y-by-default.角色，焦环，aria属性和对比度被缝合成组件。
• i18n-first.行长、数字格式、RTL-从开箱即用。
• Temization。浅色/深色主题和品牌口音通过令牌。
• 可扩展性。单个API，次要发行版的稳定性，主要迁移。

2）基础： 设计令牌（基金会）

json
{
"color": {
"text": { "default": "{palette. neutral. 900}", "muted": "{palette. neutral. 600}", "inverse": "{palette. neutral. 0}" },
"surface": { "default": "{palette. neutral. 0}", "elevated": "{palette. neutral. 50}", "brand": "{palette. brand. 50}" },
"accent": { "primary": "{palette. brand. 600}", "success": "{palette. green. 600}", "warning": "{palette. amber. 600}", "error": "{palette. red. 600}" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24 },
"radius": { "sm": 8, "md": 12, "lg": 16, "full": 999 },
"elevation": { "0": "none", "1": "0 1px 2px rgba(0,0,0,.08)", "2": "0 4px 12px rgba(0,0,0,.12)" },
"motion": { "fast": "120ms", "base": "200ms" },
"opacity": { "disabled": 0. 45, "muted": 0. 7 }
}

规则：语义令牌（例如'颜色。accent.success'）由组件使用；调色板是内部调色板。

3）组件类别

1.Базовые (Primitives): Button, Icon, Typography, Link, Badge, Divider, Avatar.

2.Формы: Input, PasswordInput, NumberInput, Select, Combobox, DatePicker, Checkbox, Radio, Switch, Slider, Textarea, FileUpload.

3.导航： AppBar, Tabs, Breadcrumbs, Pagination, Drawer/Sidebar, Stepper.

4.Фидбек: Alert, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.

5.数据和表：表，DataList，卡，Accordion，Tag，EmptyState。

• GameTile（游戏卡）
• ProviderBadge
• JackpotTicker
• LiveBadge（直播桌/节目）
• LobbyFilters（提供商/类型/限制）
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4）组件页面： 强制性内容

分配和何时使用/不使用。
组成和变体。尺寸，状态，修饰符。
API.Props，事件，插槽，控制/不受控制的模式。
A11y.角色，焦点，aria链接，live区域。
i18n.长度，格式，本地化签名。
Microcopy.推荐文本（CTA，提示，错误）。
代码示例。类型案例，边缘案例（错误，下载，空白）。
测试。Visual/unit/interaction/A11 y矩阵。
反例子。频繁使用错误。

5）关键组件： 快速规格

5.1 Button

选项： "primary | secondary | ghost | destructive"尺寸：'sm | md | lg'

状态： normal, hover, focus-visible, active, loading, disabled

A11y： 可见焦点环，"aria-busy"在"loading"，"aria-pressed" for toggle

Microcopy： Activity+对象（"保存更改","通过验证"）

反例子： "OK"

5.2 Input / Field

阵容： label, field, helper, error, prefix/suffix

A11y: `aria-invalid`, `aria-describedby`, связка `for/id`

错误模式： 什么是错误的+如何修复（"键入+380格式的数字……"）

插槽： "prefix"（图标），"suffix"（"显示密码"按钮）

5.3 Select / Combobox

功能： 搜索列表,键盘,长列表虚拟化

A11y: `role="combobox"`, `aria-expanded`, `aria-activedescendant`

空白结果： "什么也没找到。更改查询"

5.4 Modal / Drawer

规则： trap focus,关闭ESC/overlay,将焦点返回到启动器

用途： 付款确认,奖金规则,KYC步骤

5.5 Toast / Snackbar

时间： 2-4秒，无流量锁定

Live Regions： 'aria-live=成功的'polite'，错误的'assertive'

示例： "已接受付款。资产负债表已更新"

5.6 EmptyState

Template： 上下文值+CTA+次要CTA

示例： "添加第一个游戏时，将显示您选择的游戏。 添加到收藏夹

6） iGaming组件： 特性和API

6.1 GameTile

目的：大厅/目录中的游戏卡。
阵容：封面,提供商,标签（New/Hot/Jackpot/Live）, RTP （opz.），快速行动。

ts
<GameTile title="Lightning Roulette"
provider="Evolution"
tags={["Live","Popular"]}
isJackpot={true}
onPlay={...}
onFavToggle={...}
/>

状态：hover（快速启动）,skeleton,不可用（区域/时间）。
A11y：alt文本，键盘开始，'aria-label="演奏闪电轮盘赌"。

6.2 LobbyFilters

目的：大堂过滤器（类型，提供商，限制，波动）。
Fichi：保存的预设,重置过滤器,结果计数器。
Microcopy："过滤器"、"重置过滤器"、"发现：128"。

6.3 BonusBanner / BonusCard

选项：欢迎、重新启动、现金返还、飞盘、锦标赛。
字段：标题，条件，有效期，CTA（"激活奖金"）。
A11y：提及条件是可以读取的，"aria-describedby" →条件的细节。
反模式：隐藏关键限制。

6.4 JackpotTicker

目的：自动更新大奖的运行金额。
API：数据源、更新期、货币格式。
A11y：'role='status'，不要破坏屏幕阅读器的可读性。

6.5 TournamentLeaderboard

组成：位置表，积分，奖品，计时器，自己的位置。
Fichi：分离/虚拟化,固定其行。
A11y："th"/"scope"，可读列，箭头导航。

6.6 WalletCard / BalanceWidget

领域：资产负债表，锁定资金，奖金资产负债表，货币。
行动："补充"，"退出"，"历史"。
安全：隐藏/显示金额，在公共区域掩盖。

6.7 PaymentMethodCard

字段：提供商徽标，限制，佣金，ETA，区域可用性。
状态：不可用（区域/状态）,在处理中,警告限制。
Microcopy："1.5%的费用由提供商持有"，"支付-最多15分钟"。

6.8 DepositForm / WithdrawalForm

模式：inline验证，总限制，same-method规则提示。
A11y：错误声明（"assertive"），重点转移到第一个错误。
服务字段：如果需要AML,则为"资金来源"、"目的"。

6.9 KYCStatusBadge / KYCChecklist

状态："none | basic | extended | rejected | pending"。

文字： "需要~ 2分钟"，"没有眩光的照片，可以看到角落和文字。"

CTA： "通过验证"，次要："为什么重要？».

6.10 LimitsControl / ResponsibleGamingBanner

目的：存款/利率/时间限制，中断，自我约定。
A11u/音调：中性，无压力，参考参考。

7）布局模式（回收）

注册/CUS：Stepper+Form+InlineError+PageAlert+SuccessToast。

Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.

Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.

Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.

负责任的游戏：ResponsibleGamingBanner+LimitsControl+FAQ-link。

8) Accessibility (A11y)

可见的焦点总是（包括在黑暗主题中）。
通过键盘导航所有交互式项目。
敬酒/状态的'aria-live="polite/assertive"。

对比度不低于WCAG 2。1 AA.

图标中的文本并不是唯一的意义载体。
RTL模式，320 px检查和可读性大声。

9）本地化和格式

所有自定义字符串都是通过i18n密钥进行的。

ui. button. save = Save wallet. deposit. success = Payment accepted. Balance updated.
kyc. photo. hint = Photo without glare, corners and text are visible.
filters. reset = Reset filters

日期/货币格式化是实用程序，不是字符串。
语言语调-通过音调（中性/支持/官方）。

10）表演和质量

列表虚拟化（游戏，表）。
懒惰地下载插图，逐页拼接代码。
乐队的大小：UI套餐的预算，没有严重的依赖性。
Skeleton用于感知速度，微调器最少。
测试：unit，视觉狙击，交互作用，A11y，对于关键的洪水E2E。

11）验证和发布

SemVer：补丁-错误；小型-非破坏性；主要的是迁移。
发行注释：令牌/API/行为，前后截图。
Deprecations：码头上的标记，代码时尚和林特规则。
故事书/剧场：现场示例，可访问性面板，RTL toggle。

12）撰写（贡献）

RFC到新组件：问题→选项→所选的解决方桉→ A11y → i18n → API →风险。
公关支票清单：码头，storis，测试，视觉狙击，对比，i18n，黑暗/RTL。
定义：组件+文档+测试+示例模式。

13） MVP设置和路线图

• Button, Input, Select, Checkbox, Radio, Switch, Modal, Toast, Tooltip, Progress, Skeleton, Card, EmptyState, Tabs, Pagination, Breadcrumbs, Table, GameTile, LobbyFilters, BonusBanner, WalletCard, PaymentMethodCard, DepositForm, KYCStatusBadge.

Далее: TournamentLeaderboard, JackpotTicker, MissionProgress, LimitsControl, SystemStatus, Drawer/Sidebar, DatePicker, Combobox, FileUpload.

14） microcopy示例（现成的插入）

CTA："保存更改"，"通过验证"，"添加付款方式"。

错误： "日期格式不正确。使用DD。MM。GGGG。","文件太大（最大10 MB）"

成功： "接受付款。资产负债表已更新。"，"准备好！文档已验证"

空状态： "po" {query}"一无所获。重置过滤器或重新定义查询"

15）反模式

UI组件内的业务逻辑（打破过度使用）。
无形的焦点或意义仅取决于颜色。
缝合到组件代码中的字符串（没有i18n）。
语义违规（"div"上的按钮，没有"ul/ol/li"的列表）。
没有明确规则的变体（繁殖"ButtonPrimaryBlueBig2"）。

16）支票单

• 描述了目的，变体，API。

［A11y］：角色，焦点，aria属性，对比度。

• i18 n：所有行都已完成，已检查长语言和RTL。
• Storis/Demo：常见,下载,错误,空白。
• 测试：unit+visual+interaction+A11y。
• 没有业务逻辑，只有UI/行为。

• 有组件电路和焦点顺序。
• 已定义微操作和错误/成功文本。
• 测量了关键指标（步骤转换、错误率、时间到完成）。

17）组件的文档骨架（模板）

名称和目的

何时使用/不使用

选择和状态

API （props, events,插槽）

可用性（角色，键盘，aria，对比）

i18n（键,格式,长度,RTL）

微型（示例）

代码示例（类型和边缘）

测试矩阵

反例子

底线

Gamble Hub UI不仅是一组块，而且是一门学科：令牌→组件→模式→文档→指标。紧随其后，团队可以更快地交付菲奇，用户可以获得可预测且负担得起的界面，并且产品可以扩展而无需视觉负担。如果需要,请通过MVP集收集底座的第一页,其中包含示例和i18n密钥。