QRCode 二维码
生成和显示二维码
功能描述
将文本内容编码为二维码图像，用于地址分享和扫码支付。
属性规范
| 属性 | 类型 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
| value | string | Y | - | 编码内容 |
| size | number | N | 200 | 尺寸（px） |
| logo | string | N | - | 中心 logo URL |
| logoSize | number | N | 50 | logo 尺寸 |
| errorLevel | enum | N | 'M' | 纠错级别 |
| color | string | N | '#000000' | 前景色 |
| bgColor | string | N | '#FFFFFF' | 背景色 |
errorLevel 纠错级别
| 值 | 容错率 | 使用场景 |
|---|---|---|
| L | 7% | 内容短，追求小尺寸 |
| M | 15% | 默认，平衡选择 |
| Q | 25% | 有 logo 遮挡 |
| H | 30% | 恶劣环境（印刷品） |
显示规则
内容类型
| 类型 | 格式 | 示例 |
|---|---|---|
| 纯地址 | address | 0x1234...5678 |
| 支付请求 | ethereum:address?value=amount | ethereum:0x1234?value=1000000000000000000 |
| BFM 协议 | bfm:address?amount=100 | bfm:bfm1234?amount=100 |
Logo 处理
- logo 放置在二维码中心
- MUST 使用 Q 或 H 级纠错
- logo 周围留白 4px
行为规范
必须 (MUST)
- 正确编码内容
- 有 logo 时提高纠错级别
- 支持保存为图片
建议 (SHOULD)
- 提供复制内容功能
- 显示编码内容的简短说明
- 加载中显示占位
可选 (MAY)
- 支持动态内容（动画二维码）
- 支持自定义样式（圆点、方块）
布局规范
收款码
┌─────────────────────────────────┐
│ │
│ ┌─────────────┐ │
│ │ │ │
│ │ QR Code │ │
│ │ [logo] │ │
│ │ │ │
│ └─────────────┘ │
│ │
│ 0x1234...5678 │
│ │
│ [复制地址] [保存图片] │
│ │
└─────────────────────────────────┘设计标注
尺寸建议
| 场景 | 尺寸 |
|---|---|
| 列表项预览 | 80px |
| 弹窗展示 | 200px |
| 全屏展示 | min(80vw, 320px) |
留白要求
- 二维码周围 MUST 有白色边距（quiet zone）
- 最小边距：4 个模块宽度
保存功能
保存图片规格
- 格式：PNG
- 尺寸：原尺寸的 2x（高清）
- 包含：二维码 + 地址文本 + 品牌 logo
保存后反馈
type: success
message: "二维码已保存到相册"