170 lines
4.7 KiB
Markdown
170 lines
4.7 KiB
Markdown
|
# 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 应用！** 🚀
|