# 目标

使用 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 - 币种卡片**
   ```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

### 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`：

```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
```

## 开始指令

开始工作：
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! 🎨✨