02 · SYSTEM / COMPONENTS
组件库
基于 shadcn/ui 的 55 个组件，已全量套用 POSX 主题。本页展示金融场景的关键组件与使用约束 —— 组件一律从 @/components/ui/* 引入，禁止重新实现。
Button · 按钮
一屏只允许一个 Purple 实心主按钮；危险操作用 destructive；低优先级用 outline / ghost。
Badge · 徽章
同一页面只用一种风格。业务状态映射：成功 → Teal · 处理中 → Gold · 失败 → Rose（不占用系统语义色）。
Stat Card · 金融数据卡
标签 11px mono 大写 + 数值 tabular-nums + 涨跌专用色（↑ #059669 / ↓ #DC2626，独立于语义 Token）。
Source: World Bank WDI · 2024 / Visa Onchain Analytics · 2025-12 / Nilson / CMSPI · 2025（数据来自唯一数据源 posx-data.json）
Form · 表单
label 必须关联 input；辅助文字用 aria-describedby；金额输入右对齐 + 货币前缀；不可逆操作必须 OTP / 二次确认。
Table · 交易表格
金额列右对齐 + 等宽数字；正负值用语义色；状态用业务徽章。
Alert Dialog · 资金操作确认
不可逆资金操作必须 alert-dialog（不可点遮罩关闭），配合 OTP 使用。
Skeleton · 加载态
金融数据加载必须用 Skeleton 占位，禁止 Spinner 占满页面。
Chart · 图表
色彩从 --chart-1..5 取值（Purple → Teal → Gold → Azure → Rose 严格顺序）；网格细线；数字 tabular-nums。