monisuo/flutter_monisuo/PROMPT.md

目标

使用 shadcn_ui 现代化 Flutter 虚拟货币交易平台的主题和 UI，统一设计系统，提升用户体验。

参考文件

• specs/theme-modernization.md - 主题现代化规范
• AGENTS.md - 项目说明和注意事项
• ../REFACTOR_PLAN.md - 已有的重构计划
• IMPLEMENTATION_PLAN.md - 实施计划（待创建）

任务范围

Phase 1: 分析和学习 (Analysis & Learning)

1. 读取并理解 ../REFACTOR_PLAN.md - 已有的重构计划
2. 分析现有页面：
   • 哪些页面已经用 shadcn 重构
   • 哪些页面还在使用 Material 组件
   • 哪些地方有硬编码的颜色/样式
3. 识别主题配置：
   • 当前的 ShadTheme 配置
   • 品牌色、涨跌色、中性色
   • 深色/浅色模式支持
4. 列出需要创建的自定义组件

Phase 2: 核心页面替换 (Core Pages Replacement)

高优先级 - 立即执行

1. 主页面替换

   • 文件: lib/ui/pages/main/main_page.dart
   • 替换为: lib/ui/pages/main/main_page_shadcn.dart
   • 操作: 删除原文件，重命名 shadcn 版本

2. 登录页替换

   • 文件: lib/ui/pages/auth/login_page.dart
   • 替换为: lib/ui/pages/auth/login_page_shadcn.dart
   • 操作: 删除原文件，重命名 shadcn 版本

3. 首页重构

   • 文件: lib/ui/pages/home/home_page.dart
   • 目标:
     • 使用 ShadCard 展示资产概览
     • 使用 ShadButton 进行快捷操作
     • 使用 LucideIcons 替换 Material Icons
     • 添加 flutter_animate 动画

Phase 3: 功能页面重构 (Feature Pages Refactoring)

高优先级

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 - 币种卡片

   // lib/ui/components/coin_card.dart
   // 显示：币种图标、名称、代码、价格、24h变化
   // 使用：ShadCard + ShadAvatar + ShadBadge
   

2. TradeButton - 交易按钮

   // lib/ui/components/trade_button.dart
   // 买入：绿色 ShadButton
   // 卖出：红色 ShadButton.destructive
   

3. AssetCard - 资产卡片

   // lib/ui/components/asset_card.dart
   // 显示：标题、余额、变化
   // 使用：ShadCard + 大号文本
   

4. PriceChart - 价格图表（可选）

   // 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. 品牌色定制

   // 在 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

P1 - 高优先级

1. 重构 market_page.dart
2. 重构 trade_page.dart
3. 重构 asset_page.dart
4. 重构 mine_page.dart

P2 - 中优先级

1. 创建自定义组件
2. 重构 register_page.dart

P3 - 低优先级

1. 动画优化
2. 主题定制
3. 性能优化

完成标准

• 所有核心页面已重构为 shadcn 组件
• 所有按钮使用 ShadButton
• 所有卡片使用 ShadCard
• 所有输入框使用 ShadInputFormField
• 所有图标使用 LucideIcons
• 统一的间距和颜色
• 流畅的动画效果
• 功能验证通过
• flutter analyze 无错误
• 应用可正常运行

注意事项

• ⚠️ 不要修改业务逻辑
• ⚠️ 不要修改 API 调用
• ⚠️ 不要修改 Provider 逻辑
• ⚠️ 不要删除现有功能
• ⚠️ 每次修改后测试功能
• ⚠️ 保持代码整洁

工作流程

1. 先读取理解：阅读现有代码和重构计划
2. 优先替换：先完成已有 shadcn 版本的替换
3. 逐个重构：按优先级重构每个页面
4. 创建组件：提取可复用的自定义组件
5. 持续验证：每完成一个页面就测试
6. 更新文档：完成后更新 IMPLEMENTATION_PLAN.md

输出格式

创建 IMPLEMENTATION_PLAN.md：

# 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

开始指令

开始工作：

1. 读取 ../REFACTOR_PLAN.md 了解已有计划
2. 读取 specs/theme-modernization.md 了解规范
3. 读取 AGENTS.md 了解项目结构
4. 创建 IMPLEMENTATION_PLAN.md
5. 开始执行 P0 优先级任务

Let's modernize the Monisuo Flutter app with a beautiful shadcn_ui theme! 🎨✨