monisuo/flutter_monisuo/specs/theme-modernization.md

# Monisuo Flutter 主题现代化规范

## 项目概况

- **项目名称**: flutter_monisuo (虚拟货币模拟交易平台)
- **技术栈**: Flutter 3 + Dart + shadcn_ui 0.52.1
- **当前状态**: 已集成 shadcn_ui，部分页面已重构

## 现代化目标

### 1. 统一设计系统

#### 1.1 主题配置
- 当前：Slate 深色主题
- 目标：
  - 统一配色方案（品牌色、涨跌色、中性色）
  - 完善的深色/浅色模式支持
  - 自定义品牌色系统

#### 1.2 间距系统
- 标准化 padding/margin/gap
- 使用统一的间距 token
- 响应式布局适配

#### 1.3 组件样式
- 所有按钮统一使用 ShadButton
- 所有卡片统一使用 ShadCard
- 所有输入框统一使用 ShadInputFormField
- 所有图标统一使用 LucideIcons

### 2. 页面现代化

#### 2.1 核心页面（高优先级）
1. **首页 (home_page.dart)**
   - 使用 ShadCard 展示资产概览
   - 使用 ShadButton 进行快捷操作
   - 添加 flutter_animate 动画

2. **行情页面 (market_page.dart)**
   - 币种列表使用 ShadCard
   - 价格变化使用 ShadBadge
   - 搜索框使用 ShadInput

3. **交易页面 (trade_page.dart)**
   - 买入/卖出使用不同颜色的 ShadButton
   - 数量输入使用 ShadInputFormField
   - 币种选择使用 ShadSelect

4. **资产页面 (asset_page.dart)**
   - 总资产使用大号 ShadCard
   - 充值/提现使用 ShadButton
   - 资金列表使用 ShadListTile

5. **个人中心 (mine_page.dart)**
   - 菜单项使用统一布局
   - 设置项使用 ShadSwitch
   - 退出登录使用 ShadButton.destructive

#### 2.2 认证页面（中优先级）
1. **登录页面 (login_page.dart)**
   - 已有示例：login_page_shadcn.dart
   - 需要替换原文件

2. **注册页面 (register_page.dart)**
   - 创建 shadcn 版本
   - 完整表单验证

#### 2.3 主框架（高优先级）
1. **主页面 (main_page.dart)**
   - 已有示例：main_page_shadcn.dart
   - 需要替换原文件
   - 优化底部导航

### 3. 自定义组件

创建业务特定组件：

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

  // 使用 ShadCard + ShadAvatar + ShadBadge
}
```

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

  // 买入：绿色 ShadButton
  // 卖出：红色 ShadButton.destructive
}
```

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

  // 使用 ShadCard + 大号文本
}
```

#### 3.4 PriceChart - 价格图表
```dart
class PriceChart extends StatelessWidget {
  final List<double> prices;
  final bool isUp;

  // 使用 flutter_animate 添加动画
}
```

### 4. 动画系统

使用 flutter_animate 添加动画：

#### 4.1 页面切换动画
- 淡入淡出
- 滑动效果

#### 4.2 列表加载动画
- 交错淡入
- 滑动进入

#### 4.3 交互反馈动画
- 按钮点击缩放
- 卡片悬停效果

### 5. 主题定制

#### 5.1 品牌色系统
```dart
// 自定义品牌色
const brandGreen = Color(0xFF00D4AA);  // 品牌绿
const upColor = Color(0xFF10B981);      // 涨
const downColor = Color(0xFFEF4444);    // 跌
```

#### 5.2 配色方案选择
- **Slate**（当前）：专业、稳重
- 可选：Zinc（现代）、Blue（活力）

## 禁止事项

- ❌ 不要修改业务逻辑
- ❌ 不要修改 API 调用
- ❌ 不要修改数据模型
- ❌ 不要删除现有功能
- ❌ 不要改变 Provider 逻辑

## 验证标准

### 功能验证
- [ ] 用户可以登录/注册
- [ ] 可以查看行情
- [ ] 可以进行交易
- [ ] 可以查看资产
- [ ] 可以修改设置

### 视觉验证
- [ ] 所有页面使用统一的组件
- [ ] 所有页面有一致的间距
- [ ] 所有页面有流畅的动画
- [ ] 深色模式完美支持

### 代码验证
- [ ] 无 Dart 分析错误
- [ ] 无 Flutter 警告
- [ ] 构建成功
- [ ] 无运行时错误

## 重构优先级

### P0 - 立即执行
1. 替换 main_page.dart 为 shadcn 版本
2. 替换 login_page.dart 为 shadcn 版本
3. 重构 home_page.dart

### P1 - 高优先级
1. 重构 market_page.dart
2. 重构 trade_page.dart
3. 重构 asset_page.dart

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

### P3 - 低优先级
1. 优化动画
2. 添加高级效果
3. 性能优化

## 参考资源

- [shadcn_ui Flutter 文档](https://flutter-shadcn-ui.mariuti.com/)
- [Lucide Icons Flutter](https://pub.dev/packages/lucide_icons_flutter)
- [flutter_animate](https://pub.dev/packages/flutter_animate)
- [REFACTOR_PLAN.md](../REFACTOR_PLAN.md) - 已有的重构计划