优化

2026-03-23 02:43:35 +08:00
parent a27ee426db
commit a8f9882e54
18 changed files with 1368 additions and 418 deletions
--- a/flutter_monisuo/PROMPT.md
+++ b/flutter_monisuo/PROMPT.md
@@ -1,266 +1,104 @@
 # 目标

-使用 shadcn_ui 现代化 Flutter 虚拟货币交易平台的主题和 UI，统一设计系统，提升用户体验。
+为 Flutter 数字货币应用 (monisuo) 设计并实现一套专业、一致、响应式的主题系统，确保:
+- 视觉一致性
+- 良好的可读性 (对比度 >= 4.5:1)
+- 响应式布局
+- 专业的金融应用风格
+- **杜绝文字和背景颜色一样无法区分的情况**

 ## 参考文件

- `specs/theme-modernization.md` - 主题现代化规范
+- `specs/theme-design.md` - 主题设计规范 (颜色系统、间距、圆角、文字样式)
 - `AGENTS.md` - 项目说明和注意事项
- `../REFACTOR_PLAN.md` - 已有的重构计划
- `IMPLEMENTATION_PLAN.md` - 实施计划（待创建）
+- `IMPLEMENTATION_PLAN.md` - 实施计划 (Phase 6: 主题系统深度优化)

-## 任务范围
+## 设计原则

-### Phase 1: 分析和学习 (Analysis & Learning)
-1. 读取并理解 `../REFACTOR_PLAN.md` - 已有的重构计划
-2. 分析现有页面：
-   - 哪些页面已经用 shadcn 重构
-   - 哪些页面还在使用 Material 组件
-   - 哪些地方有硬编码的颜色/样式
-3. 识别主题配置：
-   - 当前的 ShadTheme 配置
-   - 品牌色、涨跌色、中性色
-   - 深色/浅色模式支持
-4. 列出需要创建的自定义组件
+1. **一致性** - 所有页面使用统一的设计语言
+2. **可读性** - 确保文字与背景对比度充足 (WCAG AA 标准 >= 4.5:1)
+3. **响应式** - 适配不同屏幕尺寸
+4. **专业性** - 符合金融/交易类应用的专业感
+5. **无障碍** - 避免颜色冲突，杜绝文字和背景颜色一样无法区分的情况

-### Phase 2: 核心页面替换 (Core Pages Replacement)
-**高优先级 - 立即执行**
+## 禁止事项

-1. **主页面替换**
-   - 文件: `lib/ui/pages/main/main_page.dart`
-   - 替换为: `lib/ui/pages/main/main_page_shadcn.dart`
-   - 操作: 删除原文件，重命名 shadcn 版本
+- ❌ 文字与背景颜色相同
+- ❌ 低对比度组合 (对比度 < 4.5)
+- ❌ 仅用颜色区分状态
+- ❌ 过小的触摸目标 (< 44px)
+- ❌ 不一致的组件样式
+- ❌ 硬编码颜色值

-2. **登录页替换**
-   - 文件: `lib/ui/pages/auth/login_page.dart`
-   - 替换为: `lib/ui/pages/auth/login_page_shadcn.dart`
-   - 操作: 删除原文件，重命名 shadcn 版本
+## 当前任务: Phase 6 主题系统深度优化

-3. **首页重构**
-   - 文件: `lib/ui/pages/home/home_page.dart`
-   - 目标:
-     - 使用 ShadCard 展示资产概览
-     - 使用 ShadButton 进行快捷操作
-     - 使用 LucideIcons 替换 Material Icons
-     - 添加 flutter_animate 动画
+### P0 - 立即执行 (核心基础)

-### Phase 3: 功能页面重构 (Feature Pages Refactoring)
-**高优先级**
+1. **6.1 颜色系统重构**
+   - 重构 `lib/core/constants/app_colors.dart`
+   - 统一主色调 (#00D4AA 青绿色系)
+   - 标准化涨跌色 (#00C853 绿 / #FF5252 红)
+   - 优化背景色层次 (#0F0F1A -> #1A1A2E -> #16213E)
+   - 清理 `coin_card.dart` 等文件中的硬编码颜色

-1. **行情页面 (market_page.dart)**
-   - 币种列表使用 ShadCard
-   - 价格变化使用 ShadBadge（涨绿跌红）
-   - 搜索框使用 ShadInput
-   - 列表项使用 ShadListTile
-
-2. **交易页面 (trade_page.dart)**
-   - 买入按钮：绿色 ShadButton
-   - 卖出按钮：红色 ShadButton.destructive
-   - 数量输入：ShadInputFormField
-   - 币种选择：ShadSelect（如果需要）
-
-3. **资产页面 (asset_page.dart)**
-   - 总资产卡片：大号 ShadCard
-   - 充值/提现按钮：ShadButton
-   - 资金列表：ShadListTile
-
-4. **个人中心 (mine_page.dart)**
-   - 菜单项：统一布局
-   - 设置项：ShadSwitch
-   - 退出登录：ShadButton.destructive
-
-### Phase 4: 自定义组件创建 (Custom Components)
-**中优先级**
-
-创建可复用的业务组件：
-
-1. **CoinCard - 币种卡片**
-   ```dart
-   // lib/ui/components/coin_card.dart
-   // 显示：币种图标、名称、代码、价格、24h变化
-   // 使用：ShadCard + ShadAvatar + ShadBadge
-   ```
-
-2. **TradeButton - 交易按钮**
-   ```dart
-   // lib/ui/components/trade_button.dart
-   // 买入：绿色 ShadButton
-   // 卖出：红色 ShadButton.destructive
-   ```
-
-3. **AssetCard - 资产卡片**
-   ```dart
-   // lib/ui/components/asset_card.dart
-   // 显示：标题、余额、变化
-   // 使用：ShadCard + 大号文本
-   ```
-
-4. **PriceChart - 价格图表**（可选）
-   ```dart
-   // lib/ui/components/price_chart.dart
-   // 显示：价格趋势
-   // 使用：CustomPaint + flutter_animate
-   ```
-
-### Phase 5: 注册页面重构 (Register Page)
-**中优先级**
-
- 文件: `lib/ui/pages/auth/register_page.dart`
- 创建完整的注册表单
- 使用 ShadForm + ShadInputFormField
- 添加表单验证
-
-### Phase 6: 动画优化 (Animation Enhancement)
-**低优先级**
-
-使用 flutter_animate 添加动画：
-
-1. **页面切换动画**
-   - 淡入淡出效果
-   - 滑动效果
-
-2. **列表加载动画**
-   - 交错淡入
-   - 滑动进入
-
-3. **交互反馈动画**
-   - 按钮点击缩放
-   - 卡片悬停效果
-
-### Phase 7: 主题定制 (Theme Customization)
-**可选**
-
-1. **品牌色定制**
-   ```dart
-   // 在 main.dart 中
-   const brandGreen = Color(0xFF00D4AA);
-   const upColor = Color(0xFF10B981);
-   const downColor = Color(0xFFEF4444);
-   ```
-
-2. **配色方案调整**
-   - 可选：Zinc, Blue, Violet 等
-
-### Phase 8: 验证和测试 (Validation & Testing)
-
-1. **功能验证**
-   - 运行应用，测试所有功能
-   - 确保无运行时错误
-
-2. **视觉验证**
-   - 检查所有页面一致性
-   - 检查深色模式效果
-   - 检查动画流畅度
-
-3. **代码验证**
-   - 运行 `flutter analyze`
-   - 确保无警告和错误
-
-## 优先级
-
-### P0 - 立即执行
-1. 替换 main_page.dart
-2. 替换 login_page.dart
-3. 重构 home_page.dart
+2. **6.4 Shadcn 主题定制**
+   - 创建自定义 ShadColorScheme (品牌绿色)
+   - 更新 `main.dart` 使用自定义主题

 ### P1 - 高优先级
-1. 重构 market_page.dart
-2. 重构 trade_page.dart
-3. 重构 asset_page.dart
-4. 重构 mine_page.dart
+
+1. **6.2 文字样式系统**
+   - 创建 `lib/core/theme/app_text_styles.dart`
+   - 标题样式 (h1-h4)、正文样式、数字样式
+
+2. **6.3 间距与圆角系统**
+   - 创建 `lib/core/theme/app_spacing.dart`
+   - 统一间距常量、圆角常量、响应式断点

 ### P2 - 中优先级
-1. 创建自定义组件
-2. 重构 register_page.dart

-### P3 - 低优先级
-1. 动画优化
-2. 主题定制
-3. 性能优化
+1. **6.5 组件样式统一**
+   - 优化按钮、卡片、输入框样式
+
+2. **6.6 页面样式优化**
+   - 所有页面应用新主题系统
+
+### P3 - 验证
+
+1. **6.7 对比度检查**
+   - 验证所有文字/背景组合 >= 4.5:1

 ## 完成标准

- [ ] 所有核心页面已重构为 shadcn 组件
- [ ] 所有按钮使用 ShadButton
- [ ] 所有卡片使用 ShadCard
- [ ] 所有输入框使用 ShadInputFormField
- [ ] 所有图标使用 LucideIcons
- [ ] 统一的间距和颜色
- [ ] 流畅的动画效果
- [ ] 功能验证通过
+- [ ] 颜色系统完整且无重复定义
+- [ ] 所有文字/背景对比度 >= 4.5:1
+- [ ] 无硬编码颜色值
+- [ ] 统一的间距和圆角系统
+- [ ] 所有页面使用新主题
 - [ ] `flutter analyze` 无错误
 - [ ] 应用可正常运行

+## 技术栈
+
+- Flutter
+- shadcn_ui (UI 组件库)
+- Lucide Icons
+
 ## 注意事项

 - ⚠️ **不要修改业务逻辑**
 - ⚠️ **不要修改 API 调用**
 - ⚠️ **不要修改 Provider 逻辑**
 - ⚠️ **不要删除现有功能**
- ⚠️ **每次修改后测试功能**
- ⚠️ **保持代码整洁**
-
-## 工作流程
-
-1. **先读取理解**：阅读现有代码和重构计划
-2. **优先替换**：先完成已有 shadcn 版本的替换
-3. **逐个重构**：按优先级重构每个页面
-4. **创建组件**：提取可复用的自定义组件
-5. **持续验证**：每完成一个页面就测试
-6. **更新文档**：完成后更新 IMPLEMENTATION_PLAN.md
-
-## 输出格式
-
-创建 `IMPLEMENTATION_PLAN.md`：
-
-```markdown
-# Monisuo 主题现代化实施计划
-
-## Status
-STATUS: BUILDING
-
-## Progress
-
-### Phase 1: Analysis ✅
- [分析结果]
-
-### Phase 2: Core Pages
- [ ] main_page.dart 替换
- [ ] login_page.dart 替换
- [ ] home_page.dart 重构
-
-### Phase 3: Feature Pages
- [ ] market_page.dart 重构
- [ ] trade_page.dart 重构
- [ ] asset_page.dart 重构
- [ ] mine_page.dart 重构
-
-### Phase 4: Custom Components
- [ ] CoinCard 创建
- [ ] TradeButton 创建
- [ ] AssetCard 创建
-
-## Changes Made
-[详细记录每个文件的修改]
-
-## Issues Found
-[发现的问题]
-
-## Questions
-[需要确认的问题]
-
-## Completion
-When all tasks are done, update status to:
-STATUS: COMPLETE
-```
+- ⚠️ **确保文字和背景颜色区分明显**
+- ⚠️ **每次修改后运行 flutter analyze**

 ## 开始指令

 开始工作：
-1. 读取 `../REFACTOR_PLAN.md` 了解已有计划
-2. 读取 `specs/theme-modernization.md` 了解规范
-3. 读取 `AGENTS.md` 了解项目结构
-4. 创建 `IMPLEMENTATION_PLAN.md`
-5. 开始执行 P0 优先级任务
+1. 读取 `specs/theme-design.md` 了解设计规范
+2. 读取 `IMPLEMENTATION_PLAN.md` 了解实施计划
+3. 按 P0 -> P1 -> P2 -> P3 优先级执行
+4. 完成后更新 IMPLEMENTATION_PLAN.md 状态

-Let's modernize the Monisuo Flutter app with a beautiful shadcn_ui theme! 🎨✨
+Let's create a professional theme system for the Monisuo Flutter app! 🎨