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

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 - 交易按钮

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 - 资产卡片

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: 替换主入口

# 1. 备份原文件
cp lib/main.dart lib/main_backup.dart

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

步骤 2: 逐页重构

# 按优先级重构
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: 组件优化

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

步骤 4: 测试验证

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

---

🎨 主题定制

当前主题配置

ShadThemeData(
  brightness: Brightness.dark,
  colorScheme: const ShadSlateColorScheme.dark(),
)

可选配色方案

• Slate（当前）：专业、稳重
• Zinc：现代、简洁
• Blue：活力、信任
• Green：财富、增长
• Violet：创新、独特

自定义品牌色

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

---

📊 预期效果

视觉改进

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

用户体验改进

• ✅ 更清晰的视觉层次
• ✅ 更好的交互反馈
• ✅ 更快的加载动画
• ✅ 更直观的表单验证

代码质量改进

• ✅ 更少的样板代码
• ✅ 更好的组件复用
• ✅ 更容易的主题切换
• ✅ 更简单的表单管理

---

🚀 快速开始

方式 1: 渐进式重构（推荐）

# 1. 保持现有页面运行
# 2. 逐个页面重构
# 3. 测试通过后替换原文件

方式 2: 完全重构

# 1. 重构所有页面
# 2. 全面测试
# 3. 一次性发布

---

📝 重构示例

Before (Material)

ElevatedButton(
  child: Text('登录'),
  style: ElevatedButton.styleFrom(
    backgroundColor: AppColors.primary,
  ),
  onPressed: () {},
)

After (shadcn_ui)

ShadButton(
  child: Text('登录'),
  onPressed: () {},
)

---

⏱️ 预计时间

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

总计：5-8 小时

---

🎯 下一步

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

---

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