# Flutter Monisuo 现代化改造

You are running a Ralph BUILDING loop for this goal: **将 Flutter Monisuo 应用打造为现代化、简约、专业的虚拟货币交易平台**。

## 背景

当前应用已完成 shadcn_ui 集成和基础主题配置，但需要全面现代化改造，包括：
1. ✅ 支持明暗主题切换
2. ✅ 现代化弹窗布局
3. ✅ 整体布局设计优化
4. ✅ 统一字号、颜色、间距
5. ✅ 色彩交互一致性
6. ✅ 现代化简约风格（Vercel/Linear 风格）

## 参考文件

- `specs/modernization-v2.md` - **现代化设计规范（必读）**
- `specs/theme-design.md` - 原有主题设计
- `AGENTS.md` - 项目说明和命令
- `~/.agents/skills/superdesign-flutter/SKILL.md` - Flutter 设计技能

## 任务优先级

### P0 - 核心基础设施（必须完成）

1. **明暗主题系统**
   - [ ] 创建 `ThemeProvider`（lib/providers/theme_provider.dart）
   - [ ] 更新 `main.dart` 使用 `MultiProvider`
   - [ ] 创建浅色主题配置（lib/core/theme/light_theme.dart）
   - [ ] 更新深色主题配置（lib/core/theme/dark_theme.dart）
   - [ ] 在 `mine_page.dart` 添加主题切换开关

2. **颜色系统重构**
   - [ ] 更新 `lib/core/constants/app_colors.dart` 使用新的颜色定义
   - [ ] 确保所有颜色符合现代设计规范（modernization-v2.md）
   - [ ] 移除所有硬编码颜色

3. **字体系统集成**
   - [ ] 添加 `google_fonts` 到 `pubspec.yaml`
   - [ ] 配置 Inter 字体为主字体
   - [ ] 配置 JetBrains Mono 为数字字体
   - [ ] 更新 `app_theme.dart` 使用 Google Fonts

### P1 - 组件现代化（高优先级）

4. **间距与圆角系统**
   - [ ] 创建 `lib/core/theme/app_spacing.dart`（Spacing 类）
   - [ ] 创建 `lib/core/theme/app_border_radius.dart`（BorderRadius 类）
   - [ ] 更新所有页面使用统一的间距和圆角

5. **按钮组件优化**
   - [ ] 更新所有按钮符合现代设计规范
   - [ ] 确保最小触摸目标 44x44
   - [ ] 统一按钮样式（primary/secondary/ghost）

6. **卡片组件优化**
   - [ ] 更新所有卡片使用边框代替阴影
   - [ ] 统一圆角和内边距
   - [ ] 确保背景色正确

7. **输入框优化**
   - [ ] 统一输入框样式
   - [ ] 优化焦点状态
   - [ ] 确保足够的内边距

### P2 - 弹窗现代化（中优先级）

8. **标准弹窗**
   - [ ] 创建现代弹窗模板（lib/ui/shared/modern_dialog.dart）
   - [ ] 更新所有 AlertDialog 为现代样式
   - [ ] 统一弹窗圆角和内边距

9. **底部抽屉**
   - [ ] 创建现代底部抽屉模板（lib/ui/shared/modern_bottom_sheet.dart）
   - [ ] 添加拖动指示器
   - [ ] 优化圆角和布局

### P3 - 页面优化（标准优先级）

10. **登录页面**
    - [ ] 优化布局和间距
    - [ ] 添加明暗主题支持
    - [ ] 确保输入框和按钮现代化

11. **首页**
    - [ ] 优化卡片布局
    - [ ] 添加明暗主题支持
    - [ ] 统一间距和圆角

12. **行情页**
    - [ ] 优化列表项布局
    - [ ] 添加明暗主题支持
    - [ ] 统一间距和圆角

13. **交易页**
    - [ ] 优化表单布局
    - [ ] 添加明暗主题支持
    - [ ] 统一按钮和输入框

14. **资产页**
    - [ ] 优化卡片布局
    - [ ] 添加明暗主题支持
    - [ ] 统一间距和圆角

15. **我的页面**
    - [ ] 添加主题切换开关
    - [ ] 优化列表项布局
    - [ ] 统一间距和圆角

### P4 - 验证与优化（低优先级）

16. **对比度检查**
    - [ ] 使用对比度检查工具验证所有文字/背景组合
    - [ ] 确保对比度 >= 4.5:1（WCAG AA）

17. **响应式布局**
    - [ ] 添加响应式断点支持
    - [ ] 测试不同屏幕尺寸

18. **动画优化**
    - [ ] 添加过渡动画
    - [ ] 确保动画流畅（60fps）

## 执行规则

1. **按优先级执行**：P0 → P1 → P2 → P3 → P4
2. **增量提交**：每完成一个子任务就提交
3. **保持功能**：不要破坏现有功能
4. **遵循规范**：严格遵循 `specs/modernization-v2.md`
5. **测试验证**：每完成一个模块运行 `flutter analyze`

## 完成标准

当所有任务完成时，在 `IMPLEMENTATION_PLAN.md` 中添加：

```
STATUS: COMPLETE
```

## 注意事项

- ❌ **不要修改业务逻辑**（Provider、Service、API）
- ❌ **不要修改数据模型**
- ❌ **不要破坏现有功能**
- ✅ **只修改 UI/UX 相关代码**
- ✅ **保持代码整洁**
- ✅ **添加必要的注释**

## 提交信息格式

```
feat(ui): <简短描述>

- <详细说明1>
- <详细说明2>
```

示例：
```
feat(ui): 添加明暗主题切换支持

- 创建 ThemeProvider
- 配置浅色和深色主题
- 在我的页面添加主题切换开关
```

---

**开始吧！让 Monisuo 成为最现代化的 Flutter 应用！** 🚀