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