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密鑰。