第五篇：组件篇
定义产品的「UI 组件规范」
概述
本篇定义 BFM Pay 所需的 UI 组件的行为规范，不涉及具体技术实现。
组件分层
┌─────────────────────────────────────┐
│ Page Components │ ← 页面组合层
├─────────────────────────────────────┤
│ Domain Components │ ← 业务领域组件
│ (Wallet, Token, Transaction) │
├─────────────────────────────────────┤
│ Common Components │ ← 通用业务组件
│ (AddressDisplay, AmountDisplay) │
├─────────────────────────────────────┤
│ Base Components │ ← 基础 UI 组件
│ (Button, Input, Card, Sheet) │
└─────────────────────────────────────┘依赖规则
- 上层组件 MAY 依赖下层组件
- 下层组件 MUST NOT 依赖上层组件
- 同层组件 SHOULD NOT 相互依赖
章节导航
01-基础组件
无业务逻辑的通用 UI 组件。
| 组件 | 说明 |
|---|---|
| Button | 按钮 |
| Input | 输入框 |
| Card | 卡片容器 |
| Sheet | 底部抽屉 |
| Dialog | 对话框 |
| Toast | 轻提示 |
02-通用组件
可复用的业务展示组件。
| 组件 | 说明 |
|---|---|
| AddressDisplay | 地址显示 |
| AmountDisplay | 金额显示 |
| TokenIcon | 代币图标 |
| QRCode | 二维码 |
03-钱包组件
钱包业务领域组件。
| 组件 | 说明 |
|---|---|
| WalletCard | 钱包卡片 |
| ChainSelector | 链选择器 |
| TransactionItem | 交易记录项 |
04-布局组件
页面布局和导航组件。
| 组件 | 说明 |
|---|---|
| AppLayout | 应用布局 |
| TabBar | 底部导航栏 |
| Header | 页面头部 |
05-表单系统
表单状态管理和验证规范。
06-交互规范
触摸、手势、动效、可访问性规范。
规范符号说明
| 符号 | 含义 |
|---|---|
| MUST | 必须实现 |
| SHOULD | 建议实现 |
| MAY | 可选实现 |
下一篇
完成组件篇后，继续阅读 第六篇：安全篇。