第七章：技术需求
定义实现本产品所需的技术能力
7.1 概述
本章定义 BFM Pay 实现所需的技术能力需求，而非具体技术选型。任何满足这些需求的技术栈都可用于实现。
7.2 运行时环境需求
目标平台
| 平台 | 优先级 | 最低版本 |
|---|---|---|
| iOS WebView | P0 | iOS 14+ |
| Android WebView | P0 | Android 8+ (API 26) |
| 现代浏览器 | P1 | Chrome 90+, Safari 14+, Firefox 90+ |
| DWEB 容器 | P0 | Plaoc 最新版 |
运行时能力
| 能力 | 必需性 | 说明 |
|---|---|---|
| JavaScript ES2020+ | MUST | async/await, optional chaining, nullish coalescing |
| Web Crypto API | MUST | 加密操作 |
| IndexedDB | MUST | 本地持久化存储 |
| Fetch API | MUST | 网络请求 |
| Web Worker | SHOULD | 后台计算（密钥派生） |
| Service Worker | MAY | 离线支持 |
7.3 UI 框架需求
核心能力
| 需求 | 说明 |
|---|---|
| 组件化 | 支持可复用 UI 组件的定义和组合 |
| 响应式渲染 | 状态变化自动触发 UI 更新 |
| 生命周期管理 | 组件挂载/卸载钩子，资源清理 |
| 类型安全 | 编译时类型检查（TypeScript） |
性能指标
| 指标 | 目标值 |
|---|---|
| 首屏渲染 (FCP) | < 1.5s |
| 可交互时间 (TTI) | < 3s |
| 包体积 (gzip) | < 500KB（不含依赖） |
| 60fps 滚动 | MUST |
7.4 导航系统需求
核心能力
| 需求 | 说明 |
|---|---|
| 栈式导航 | 页面以栈结构管理，支持 push/pop |
| 手势返回 | iOS 风格的边缘滑动返回 |
| 转场动画 | 平滑的页面切换动画 |
| 深度链接 | URL 映射到特定页面和状态 |
| 状态保持 | 返回时保持页面滚动位置和表单状态 |
导航模式
┌─────────────────────────────────────┐
│ TabBar │
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ Tab A │ │ Tab B │ │ Tab C │ │
│ └───┬───┘ └───┬───┘ └───┬───┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ Stack A Stack B Stack C │ ← 每个 Tab 独立栈
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ A1 │ │ B1 │ │ C1 │ │
│ │ A2 │ │ │ │ C2 │ │
│ │ A3 │ │ │ │ │ │
│ └─────┘ └─────┘ └─────┘ │
└─────────────────────────────────────┘7.5 状态管理需求
状态分类
| 类型 | 特征 | 生命周期 |
|---|---|---|
| UI 状态 | 组件内部，如 hover/focus | 组件生命周期 |
| 表单状态 | 用户输入中的数据 | 表单生命周期 |
| 客户端状态 | 本地设置、钱包数据 | 持久化 |
| 服务端状态 | 从 API 获取的数据 | 需缓存和同步 |
核心能力
| 需求 | 说明 |
|---|---|
| 响应式更新 | 状态变化自动通知订阅者 |
| 选择器 | 订阅状态的特定部分，避免不必要的更新 |
| 持久化 | 关键状态存储到本地 |
| 缓存策略 | 服务端数据缓存、过期、重新验证 |
| 乐观更新 | 立即更新 UI，后台同步服务端 |
服务端状态管理
┌─────────────────────────────────────────────────────┐
│ Cache Layer │
├─────────────────────────────────────────────────────┤
│ Query Key │ Data │ State │ StaleTime│
│ ['balance', addr]│ 100 BFM │ fresh │ 30s │
│ ['txs', addr] │ [...] │ stale │ 60s │
│ ['price', 'BFM'] │ $0.15 │ fetching │ 10s │
└─────────────────────────────────────────────────────┘
状态机：
idle → fetching → success/error → stale → refetching → ...7.6 表单处理需求
核心能力
| 需求 | 说明 |
|---|---|
| 受控输入 | 所有输入由状态驱动 |
| 验证 | 同步验证 + 异步验证 |
| 错误处理 | 字段级 + 表单级错误 |
| 提交管理 | 提交中状态、防重复提交 |
| 类型安全 | 表单值的完整类型推断 |
验证能力
| 类型 | 时机 | 示例 |
|---|---|---|
| 同步验证 | onChange/onBlur | 必填、格式、长度 |
| 异步验证 | onBlur/防抖 | 地址格式、余额检查 |
| 表单级验证 | onSubmit | 跨字段校验 |
7.7 样式系统需求
核心能力
| 需求 | 说明 |
|---|---|
| 组件化样式 | 样式与组件绑定，避免冲突 |
| 主题系统 | 支持浅色/深色主题切换 |
| 设计令牌 | 颜色、间距、字体等统一变量 |
| 响应式 | 适配不同屏幕尺寸 |
| RTL 支持 | 阿拉伯语等从右到左布局 |
设计令牌结构
tokens/
├── colors/
│ ├── semantic (primary, destructive, muted...)
│ └── palette (具体色值)
├── spacing/
│ └── scale (4, 8, 12, 16, 24, 32...)
├── typography/
│ ├── fontFamily
│ ├── fontSize
│ └── fontWeight
└── radius/
└── scale (sm, md, lg, full)7.8 国际化需求
核心能力
| 需求 | 说明 |
|---|---|
| 翻译管理 | 分离文本和代码 |
| 插值 | 变量替换：欢迎， |
| 复数 | 不同数量的文本变体 |
| 日期/数字格式化 | 本地化格式 |
| RTL 布局 | 阿拉伯语、希伯来语支持 |
支持语言
| 语言 | 代码 | 优先级 |
|---|---|---|
| 简体中文 | zh-CN | P0 |
| 英语 | en | P0 |
| 繁体中文 | zh-TW | P1 |
| 日语 | ja | P2 |
| 韩语 | ko | P2 |
7.9 安全需求
加密能力
| 能力 | 算法/标准 |
|---|---|
| 助记词生成 | BIP39 |
| 密钥派生 | BIP44, SLIP-0010 |
| 签名 | Ed25519, secp256k1 |
| 对称加密 | AES-256-GCM |
| 哈希 | SHA-256, Keccak-256 |
| 密钥派生函数 | PBKDF2, scrypt |
存储安全
| 需求 | 说明 |
|---|---|
| 加密存储 | 敏感数据 AES 加密后存储 |
| 内存保护 | 私钥使用后立即清除 |
| 无日志 | 敏感数据不写入日志 |
7.10 测试需求
测试层级
| 层级 | 覆盖范围 | 目标覆盖率 |
|---|---|---|
| 单元测试 | 工具函数、服务 | > 80% |
| 组件测试 | UI 组件行为 | > 70% |
| 集成测试 | 模块交互 | 关键路径 |
| E2E 测试 | 用户流程 | 核心流程 |
测试能力需求
| 需求 | 说明 |
|---|---|
| 组件渲染测试 | 验证组件输出 |
| 用户交互模拟 | 点击、输入、滚动 |
| 异步测试 | 等待异步操作完成 |
| Mock | 模拟网络请求和服务 |
| 快照测试 | UI 回归检测 |
| 视觉回归 | 截图对比 |
7.11 构建和部署需求
构建产物
| 目标 | 说明 |
|---|---|
| Web SPA | 静态文件，可部署到 CDN |
| DWEB 包 | Plaoc 容器格式 |
构建优化
| 需求 | 说明 |
|---|---|
| 代码分割 | 按路由拆分，首屏最小化 |
| Tree Shaking | 移除未使用代码 |
| 压缩 | JS/CSS 压缩 |
| 资源哈希 | 文件名包含内容哈希，支持长期缓存 |
本章小结
本章定义了实现 BFM Pay 所需的技术能力，包括：
- 运行时环境和平台兼容性
- UI 框架、导航、状态管理的能力需求
- 样式系统和国际化需求
- 安全和加密能力
- 测试和构建需求
具体技术选型可根据团队熟悉度和项目需求决定。
下一章
继续阅读 第八章：系统架构。