# 目标 为 Flutter 数字货币应用 (monisuo) 设计并实现一套专业、一致、响应式的主题系统,确保: - 视觉一致性 - 良好的可读性 (对比度 >= 4.5:1) - 响应式布局 - 专业的金融应用风格 - **杜绝文字和背景颜色一样无法区分的情况** ## 参考文件 - `specs/theme-design.md` - 主题设计规范 (颜色系统、间距、圆角、文字样式) - `AGENTS.md` - 项目说明和注意事项 - `IMPLEMENTATION_PLAN.md` - 实施计划 (Phase 6: 主题系统深度优化) ## 设计原则 1. **一致性** - 所有页面使用统一的设计语言 2. **可读性** - 确保文字与背景对比度充足 (WCAG AA 标准 >= 4.5:1) 3. **响应式** - 适配不同屏幕尺寸 4. **专业性** - 符合金融/交易类应用的专业感 5. **无障碍** - 避免颜色冲突,杜绝文字和背景颜色一样无法区分的情况 ## 禁止事项 - ❌ 文字与背景颜色相同 - ❌ 低对比度组合 (对比度 < 4.5) - ❌ 仅用颜色区分状态 - ❌ 过小的触摸目标 (< 44px) - ❌ 不一致的组件样式 - ❌ 硬编码颜色值 ## 当前任务: Phase 6 主题系统深度优化 ### P0 - 立即执行 (核心基础) 1. **6.1 颜色系统重构** - 重构 `lib/core/constants/app_colors.dart` - 统一主色调 (#00D4AA 青绿色系) - 标准化涨跌色 (#00C853 绿 / #FF5252 红) - 优化背景色层次 (#0F0F1A -> #1A1A2E -> #16213E) - 清理 `coin_card.dart` 等文件中的硬编码颜色 2. **6.4 Shadcn 主题定制** - 创建自定义 ShadColorScheme (品牌绿色) - 更新 `main.dart` 使用自定义主题 ### P1 - 高优先级 1. **6.2 文字样式系统** - 创建 `lib/core/theme/app_text_styles.dart` - 标题样式 (h1-h4)、正文样式、数字样式 2. **6.3 间距与圆角系统** - 创建 `lib/core/theme/app_spacing.dart` - 统一间距常量、圆角常量、响应式断点 ### P2 - 中优先级 1. **6.5 组件样式统一** - 优化按钮、卡片、输入框样式 2. **6.6 页面样式优化** - 所有页面应用新主题系统 ### P3 - 验证 1. **6.7 对比度检查** - 验证所有文字/背景组合 >= 4.5:1 ## 完成标准 - [ ] 颜色系统完整且无重复定义 - [ ] 所有文字/背景对比度 >= 4.5:1 - [ ] 无硬编码颜色值 - [ ] 统一的间距和圆角系统 - [ ] 所有页面使用新主题 - [ ] `flutter analyze` 无错误 - [ ] 应用可正常运行 ## 技术栈 - Flutter - shadcn_ui (UI 组件库) - Lucide Icons ## 注意事项 - ⚠️ **不要修改业务逻辑** - ⚠️ **不要修改 API 调用** - ⚠️ **不要修改 Provider 逻辑** - ⚠️ **不要删除现有功能** - ⚠️ **确保文字和背景颜色区分明显** - ⚠️ **每次修改后运行 flutter analyze** ## 开始指令 开始工作: 1. 读取 `specs/theme-design.md` 了解设计规范 2. 读取 `IMPLEMENTATION_PLAN.md` 了解实施计划 3. 按 P0 -> P1 -> P2 -> P3 优先级执行 4. 完成后更新 IMPLEMENTATION_PLAN.md 状态 Let's create a professional theme system for the Monisuo Flutter app! 🎨