# 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）

## 执行规则

1. **按优先级执行**：先完成所有 P3 页面优化，再进行 P4 验证
2. **增量提交**：每完成一个页面就提交
3. **保持功能**：不要破坏现有功能
4. **遵循规范**：严格遵循 `specs/modernization-v2.md`
5. **使用设计系统**：
   - 使用 `AppSpacing` 间距（xs/sm/md/lg/xl/xxl）
   - 使用 `AppRadius` 圆角（sm/md/lg/xl/xxl/full）
   - 使用 `AppColorScheme` 颜色
   - 使用 `Theme.of(context)` 获取主题
6. **测试验证**：每完成一个页面运行 `flutter analyze`

## 代码示例

### 使用 AppSpacing
```dart
// ❌ 错误 - 硬编码
SizedBox(height: 16)
Padding(padding: EdgeInsets.all(16))

// ✅ 正确 - 使用 AppSpacing
SizedBox(height: AppSpacing.md)
Padding(padding: EdgeInsets.all(AppSpacing.md))
Padding(padding: AppSpacing.pagePadding)
```

### 使用 AppRadius
```dart
// ❌ 错误 - 硬编码
BorderRadius.circular(12)

// ✅ 正确 - 使用 AppRadius
BorderRadius.circular(AppRadius.lg)
AppRadius.radiusLg
```

### 使用颜色系统
```dart
// ❌ 错误 - 硬编码
color: Color(0xFF00D4AA)

// ✅ 正确 - 使用 AppColorScheme
color: AppColorScheme.primaryDark
color: AppColorScheme.getChangeColor(isUp)
```

### 使用主题
```dart
// ✅ 正确 - 从主题获取颜色
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
- 添加主题切换支持
```

---

**开始吧！让所有页面都现代化！** 🎨✨