monisuo/REFACTOR_PLAN.md

# Monisuo 前端重构计划 - 使用 shadcn_ui

**创建时间**: 2026-03-22 02:20
**状态**: ⏳ 进行中

---

## ✅ 已完成

### 1. 依赖安装
- ✅ shadcn_ui 0.2.6 已安装
- ✅ flutter_animate 已安装
- ✅ lucide_icons_flutter 已安装

### 2. 技能文档
- ✅ 全局技能：`~/.agents/skills/shadcn-ui-flutter/`
- ✅ 项目技能：`~/.agent/skills/shadcn-ui-flutter/`

### 3. 主应用配置
- ✅ `main.dart` 已更新为 ShadApp
- ✅ 主题配置完成（深色模式 + Slate 配色）

---

## 🔄 重构计划

### 阶段 1: 核心页面重构（优先）

#### 1.1 主页面
- ✅ `main_page_shadcn.dart` - 已创建
- ⏳ 替换原来的 `main_page.dart`

#### 1.2 登录/注册页面
- ✅ `login_page_shadcn.dart` - 已创建示例
- ⏳ 创建 `register_page_shadcn.dart`
- ⏳ 完整表单验证

#### 1.3 首页（home_page.dart）
需要重构的内容：
- 使用 ShadCard 替换 Material Card
- 使用 ShadButton 替换 ElevatedButton
- 使用 LucideIcons 替换 Material Icons
- 使用 ShadTheme 获取主题

#### 1.4 行情页面（market_page.dart）
需要重构的内容：
- 币种列表使用 ShadCard
- 价格显示使用 shadcn 文本样式
- 搜索框使用 ShadInput

#### 1.5 交易页面（trade_page.dart）
需要重构的内容：
- 买入/卖出使用 ShadButton
- 数量输入使用 ShadInputFormField
- 币种选择使用 ShadSelect

#### 1.6 资产页面（asset_page.dart）
需要重构的内容：
- 资产卡片使用 ShadCard
- 充值/提现按钮使用 ShadButton
- 资金列表优化

#### 1.7 个人中心（mine_page.dart）
需要重构的内容：
- 菜单项使用 shadcn 样式
- 设置项使用 ShadSwitch
- 退出登录使用 ShadButton

---

### 阶段 2: 组件优化

#### 2.1 自定义组件
创建项目特定的 shadcn 组件：

**CoinCard** - 币种卡片
```dart
class CoinCard extends StatelessWidget {
  final String name;
  final String code;
  final double price;
  final double change24h;

  @override
  Widget build(BuildContext context) {
    return ShadCard(
      child: Row(
        children: [
          ShadAvatar(coinIcon),
          Column(
            children: [
              Text(name, style: ShadTheme.of(context).textTheme.large),
              Text(code, style: ShadTheme.of(context).textTheme.muted),
            ],
          ),
          Spacer(),
          Column(
            children: [
              Text('\$$price', style: ShadTheme.of(context).textTheme.large),
              ShadBadge(
                child: Text('$change24h%'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
```

**TradeButton** - 交易按钮
```dart
class TradeButton extends StatelessWidget {
  final bool isBuy;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ShadButton(
      backgroundColor: isBuy ? Colors.green : Colors.red,
      child: Text(isBuy ? '买入' : '卖出'),
      onPressed: onPressed,
    );
  }
}
```

**AssetCard** - 资产卡片
```dart
class AssetCard extends StatelessWidget {
  final String title;
  final double balance;
  final double change;

  @override
  Widget build(BuildContext context) {
    return ShadCard(
      title: Text(title),
      child: Column(
        children: [
          Text('\$$balance', style: ShadTheme.of(context).textTheme.h2),
          Text('$change%', style: ShadTheme.of(context).textTheme.muted),
        ],
      ),
    );
  }
}
```

---

### 阶段 3: 高级功能

#### 3.1 表单管理
使用 ShadForm 重构所有表单：
- 登录表单
- 注册表单
- 交易表单
- 充值/提现表单

#### 3.2 对话框
使用 ShadDialog 替换所有对话框：
- 确认对话框
- 错误提示
- 成功提示

#### 3.3 动画
使用 flutter_animate 添加动画：
- 页面切换动画
- 列表加载动画
- 按钮点击动画

---

## 📋 重构检查清单

### 必须替换的组件

- [ ] `MaterialApp` → `ShadApp.custom`
- [ ] `Scaffold` → 保持使用
- [ ] `AppBar` → 自定义 AppBar
- [ ] `ElevatedButton` → `ShadButton`
- [ ] `TextButton` → `ShadButton.link`
- [ ] `OutlinedButton` → `ShadButton.outline`
- [ ] `TextField` → `ShadInputFormField`
- [ ] `Card` → `ShadCard`
- [ ] `Icon(Icons.xxx)` → `Icon(LucideIcons.xxx)`

### 样式迁移

- [ ] `Theme.of(context)` → `ShadTheme.of(context)`
- [ ] `Colors.xxx` → `ShadTheme.of(context).colorScheme.xxx`
- [ ] `TextStyle` → `ShadTheme.of(context).textTheme.xxx`

---

## 🎯 重构步骤

### 步骤 1: 替换主入口
```bash
# 1. 备份原文件
cp lib/main.dart lib/main_backup.dart

# 2. 使用新版本（已完成）
# main.dart 已更新为使用 ShadApp
```

### 步骤 2: 逐页重构
```bash
# 按优先级重构
1. login_page.dart      # 登录页（已完成示例）
2. main_page.dart       # 主页（已完成示例）
3. home_page.dart       # 首页
4. market_page.dart     # 行情
5. trade_page.dart      # 交易
6. asset_page.dart      # 资产
7. mine_page.dart       # 我的
```

### 步骤 3: 组件优化
```bash
# 创建自定义组件
1. CoinCard - 币种卡片
2. TradeButton - 交易按钮
3. AssetCard - 资产卡片
4. PriceChart - 价格图表
```

### 步骤 4: 测试验证
```bash
# 测试所有功能
1. 用户登录/注册
2. 查看行情
3. 进行交易
4. 查看资产
5. 个人设置
```

---

## 🎨 主题定制

### 当前主题配置
```dart
ShadThemeData(
  brightness: Brightness.dark,
  colorScheme: const ShadSlateColorScheme.dark(),
)
```

### 可选配色方案
- **Slate**（当前）：专业、稳重
- **Zinc**：现代、简洁
- **Blue**：活力、信任
- **Green**：财富、增长
- **Violet**：创新、独特

### 自定义品牌色
```dart
ShadThemeData(
  colorScheme: const ShadSlateColorScheme.dark(
    custom: {
      'brand': Color(0xFF00D4AA),  # 品牌绿
      'up': Color(0xFF10B981),      # 涨
      'down': Color(0xFFEF4444),    # 跌
    },
  ),
)
```

---

## 📊 预期效果

### 视觉改进
- ✅ 更现代的设计风格
- ✅ 统一的视觉语言
- ✅ 更好的深色模式支持
- ✅ 流畅的动画效果

### 用户体验改进
- ✅ 更清晰的视觉层次
- ✅ 更好的交互反馈
- ✅ 更快的加载动画
- ✅ 更直观的表单验证

### 代码质量改进
- ✅ 更少的样板代码
- ✅ 更好的组件复用
- ✅ 更容易的主题切换
- ✅ 更简单的表单管理

---

## 🚀 快速开始

### 方式 1: 渐进式重构（推荐）
```bash
# 1. 保持现有页面运行
# 2. 逐个页面重构
# 3. 测试通过后替换原文件
```

### 方式 2: 完全重构
```bash
# 1. 重构所有页面
# 2. 全面测试
# 3. 一次性发布
```

---

## 📝 重构示例

### Before (Material)
```dart
ElevatedButton(
  child: Text('登录'),
  style: ElevatedButton.styleFrom(
    backgroundColor: AppColors.primary,
  ),
  onPressed: () {},
)
```

### After (shadcn_ui)
```dart
ShadButton(
  child: Text('登录'),
  onPressed: () {},
)
```

---

## ⏱️ 预计时间

- **阶段 1**（核心页面）：2-3 小时
- **阶段 2**（组件优化）：1-2 小时
- **阶段 3**（高级功能）：1-2 小时
- **测试验证**：1 小时

**总计**：5-8 小时

---

## 🎯 下一步

1. ✅ 确认依赖已安装
2. ⏳ 选择重构方式（渐进式推荐）
3. ⏳ 开始重构首页
4. ⏳ 逐步完成其他页面
5. ⏳ 全面测试

---

**状态**: 准备就绪，等待开始重构
**建议**: 采用渐进式重构，降低风险