- 新增 cold_wallet 表结构及默认数据 - 补充 order_fund 表字段(wallet_id, wallet_address, pay_time, confirm_time, withdraw_contact) - 创建数据库补丁脚本 sql/patch_cold_wallet.sql - 创建充值功能测试脚本 test_deposit_api.sh - 创建数据库检查脚本 check_database.sh - 更新充值功能检查报告 check_cold_wallet.md 修复问题:充值功能因缺少冷钱包表而无法使用
5.4 KiB
5.4 KiB
Flutter Monisuo 页面优化(Phase 2)
You are running a Ralph BUILDING loop for this goal: 完成 P3 和 P4 任务,优化所有页面使用新的设计系统。
背景
P0、P1、P2 任务已完成:
- ✅ ThemeProvider 和明暗主题切换
- ✅ 颜色系统(AppColorScheme)
- ✅ 间距与圆角系统(AppSpacing、AppRadius)
- ✅ 现代弹窗和底部抽屉模板
现在需要将这些设计系统应用到所有页面。
参考文件
specs/modernization-v2.md- 现代化设计规范(必读)lib/core/theme/app_color_scheme.dart- 颜色系统lib/core/theme/app_spacing.dart- 间距与圆角系统lib/ui/shared/modern_dialog.dart- 现代弹窗模板lib/ui/shared/modern_bottom_sheet.dart- 现代底部抽屉模板AGENTS.md- 项目说明
任务优先级
P3 - 页面优化(必须完成)
1. 登录页面 (login_page.dart)
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 确保输入框和按钮符合触摸目标(44x44)
- 使用 Theme.of(context) 替换硬编码颜色
- 添加主题切换支持(浅色/深色)
2. 首页 (home_page.dart)
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 使用 AppColorScheme 颜色
- 优化卡片布局
- 添加主题切换支持
3. 行情页 (market_page.dart)
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 使用 AppColorScheme 颜色
- 优化搜索框和列表项
- 添加主题切换支持
4. 交易页 (trade_page.dart)
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 使用 AppColorScheme 颜色
- 优化表单布局
- 添加主题切换支持
5. 资产页 (asset_page.dart)
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 使用 AppColorScheme 颜色
- 优化卡片布局
- 添加主题切换支持
6. 我的页面 (mine_page.dart) - 部分完成
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 优化列表项布局
- 确保主题切换开关正常工作
7. 更新现有弹窗
- 查找所有使用 AlertDialog 的地方
- 替换为 ModernDialog
- 或使用 ShadDialog
P4 - 验证与优化(高优先级)
8. 对比度检查
- 检查所有文字/背景组合
- 确保对比度 >= 4.5:1(WCAG AA)
- 修复低对比度问题
9. 响应式布局
- 使用 AppBreakpoints 测试不同屏幕尺寸
- 确保移动端和平板端布局正常
10. 动画优化(可选)
- 添加主题切换过渡动画
- 添加页面过渡动画
- 确保动画流畅(60fps)
执行规则
- 按优先级执行:先完成所有 P3 页面优化,再进行 P4 验证
- 增量提交:每完成一个页面就提交
- 保持功能:不要破坏现有功能
- 遵循规范:严格遵循
specs/modernization-v2.md - 使用设计系统:
- 使用
AppSpacing间距(xs/sm/md/lg/xl/xxl) - 使用
AppRadius圆角(sm/md/lg/xl/xxl/full) - 使用
AppColorScheme颜色 - 使用
Theme.of(context)获取主题
- 使用
- 测试验证:每完成一个页面运行
flutter analyze
代码示例
使用 AppSpacing
// ❌ 错误 - 硬编码
SizedBox(height: 16)
Padding(padding: EdgeInsets.all(16))
// ✅ 正确 - 使用 AppSpacing
SizedBox(height: AppSpacing.md)
Padding(padding: EdgeInsets.all(AppSpacing.md))
Padding(padding: AppSpacing.pagePadding)
使用 AppRadius
// ❌ 错误 - 硬编码
BorderRadius.circular(12)
// ✅ 正确 - 使用 AppRadius
BorderRadius.circular(AppRadius.lg)
AppRadius.radiusLg
使用颜色系统
// ❌ 错误 - 硬编码
color: Color(0xFF00D4AA)
// ✅ 正确 - 使用 AppColorScheme
color: AppColorScheme.primaryDark
color: AppColorScheme.getChangeColor(isUp)
使用主题
// ✅ 正确 - 从主题获取颜色
final theme = ShadTheme.of(context);
color: theme.colorScheme.primary
style: theme.textTheme.h3
完成标准
当所有任务完成时,在 IMPLEMENTATION_PLAN.md 中更新:
### 7.4 P3 - 页面优化 ✅
- [x] 7.4.1 登录页面现代化
- [x] 7.4.2 首页现代化
- [x] 7.4.3 行情页现代化
- [x] 7.4.4 交易页现代化
- [x] 7.4.5 资产页现代化
- [x] 7.4.6 我的页面现代化
### 7.5 P4 - 验证与优化 ✅
- [x] 7.5.1 对比度检查(WCAG AA >= 4.5:1)
- [x] 7.5.2 响应式布局测试
- [x] 7.5.3 动画优化
STATUS: COMPLETE
注意事项
- ❌ 不要修改业务逻辑(Provider、Service、API)
- ❌ 不要修改数据模型
- ❌ 不要破坏现有功能
- ✅ 只修改 UI/UX 相关代码
- ✅ 保持代码整洁
- ✅ 使用设计系统常量
- ✅ 避免硬编码值
提交信息格式
feat(ui): 优化 <页面名称> 使用现代设计系统
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 使用 AppColorScheme 颜色
- 添加主题切换支持
示例:
feat(ui): 优化登录页面使用现代设计系统
- 使用 AppSpacing 替换硬编码间距
- 使用 AppRadius 替换硬编码圆角
- 确保触摸目标 >= 44x44
- 添加主题切换支持
开始吧!让所有页面都现代化! 🎨✨