169 lines
3.9 KiB
Markdown
169 lines
3.9 KiB
Markdown
|
# Flutter Monisuo 项目说明
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
|
|||
|
|
- **名称**: flutter_monisuo (虚拟货币模拟交易平台)
|
|||
|
|
- **框架**: Flutter 3
|
|||
|
|
- **语言**: Dart
|
|||
|
|
- **UI 库**: shadcn_ui 0.52.1
|
|||
|
|
- **图标**: lucide_icons_flutter
|
|||
|
|
- **动画**: flutter_animate
|
|||
|
|
- **状态管理**: Provider
|
|||
|
|
|
|||
|
|
## 技术栈详情
|
|||
|
|
|
|||
|
|
### 核心依赖
|
|||
|
|
- Flutter SDK: >=3.0.0 <4.0.0
|
|||
|
|
- shadcn_ui: ^0.52.1
|
|||
|
|
- provider: ^6.1.1
|
|||
|
|
- dio: ^5.4.0
|
|||
|
|
- shared_preferences: ^2.2.2
|
|||
|
|
|
|||
|
|
### 工具库
|
|||
|
|
- intl: 国际化
|
|||
|
|
- decimal: 精确计算
|
|||
|
|
|
|||
|
|
## 开发命令
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 获取依赖
|
|||
|
|
flutter pub get
|
|||
|
|
|
|||
|
|
# 运行应用
|
|||
|
|
flutter run
|
|||
|
|
|
|||
|
|
# 构建生产版本
|
|||
|
|
flutter build apk
|
|||
|
|
flutter build ios
|
|||
|
|
|
|||
|
|
# 分析代码
|
|||
|
|
flutter analyze
|
|||
|
|
|
|||
|
|
# 运行测试
|
|||
|
|
flutter test
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
lib/
|
|||
|
|
├── core/ # 核心功能
|
|||
|
|
│ ├── constants/ # 常量
|
|||
|
|
│ ├── network/ # 网络请求
|
|||
|
|
│ ├── storage/ # 本地存储
|
|||
|
|
│ └── theme/ # 主题配置
|
|||
|
|
├── data/ # 数据层
|
|||
|
|
│ ├── models/ # 数据模型
|
|||
|
|
│ └── services/ # API 服务
|
|||
|
|
├── providers/ # 状态管理
|
|||
|
|
├── routes/ # 路由配置
|
|||
|
|
├── ui/ # UI 层
|
|||
|
|
│ └── pages/ # 页面组件
|
|||
|
|
└── main.dart # 应用入口
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 主要页面
|
|||
|
|
|
|||
|
|
### 1. 认证模块
|
|||
|
|
- `login_page.dart` - 登录页（需要重构）
|
|||
|
|
- `login_page_shadcn.dart` - shadcn 版本示例（已完成）
|
|||
|
|
- `register_page.dart` - 注册页（需要重构）
|
|||
|
|
|
|||
|
|
### 2. 主框架
|
|||
|
|
- `main_page.dart` - 主页面（需要重构）
|
|||
|
|
- `main_page_shadcn.dart` - shadcn 版本示例（已完成）
|
|||
|
|
|
|||
|
|
### 3. 功能页面
|
|||
|
|
- `home_page.dart` - 首页
|
|||
|
|
- `market_page.dart` - 行情
|
|||
|
|
- `trade_page.dart` - 交易
|
|||
|
|
- `asset_page.dart` - 资产
|
|||
|
|
- `mine_page.dart` - 我的
|
|||
|
|
|
|||
|
|
## 当前状态
|
|||
|
|
|
|||
|
|
### 已完成
|
|||
|
|
- ✅ shadcn_ui 集成
|
|||
|
|
- ✅ main.dart 更新为 ShadApp
|
|||
|
|
- ✅ 登录页 shadcn 示例
|
|||
|
|
- ✅ 主页面 shadcn 示例
|
|||
|
|
- ✅ 主题配置（Slate 深色）
|
|||
|
|
|
|||
|
|
### 进行中
|
|||
|
|
- ⏳ 替换原文件为 shadcn 版本
|
|||
|
|
- ⏳ 重构剩余页面
|
|||
|
|
- ⏳ 创建自定义组件
|
|||
|
|
|
|||
|
|
### 待开始
|
|||
|
|
- ❌ 动画优化
|
|||
|
|
- ❌ 性能优化
|
|||
|
|
- ❌ 测试覆盖
|
|||
|
|
|
|||
|
|
## 重构注意事项
|
|||
|
|
|
|||
|
|
### 已有的 shadcn 组件
|
|||
|
|
shadcn_ui 提供的组件：
|
|||
|
|
- ShadApp, ShadTheme
|
|||
|
|
- ShadButton (多种变体)
|
|||
|
|
- ShadCard, ShadDialog
|
|||
|
|
- ShadInputFormField, ShadSelect
|
|||
|
|
- ShadBadge, ShadAvatar
|
|||
|
|
- ShadListTile, ShadSwitch
|
|||
|
|
- 等等...
|
|||
|
|
|
|||
|
|
### 需要统一的样式
|
|||
|
|
1. **按钮**: 所有按钮使用 ShadButton
|
|||
|
|
2. **卡片**: 所有卡片使用 ShadCard
|
|||
|
|
3. **输入**: 所有输入框使用 ShadInputFormField
|
|||
|
|
4. **图标**: 所有图标使用 LucideIcons
|
|||
|
|
5. **颜色**: 使用 ShadTheme 获取颜色
|
|||
|
|
|
|||
|
|
### 禁止修改
|
|||
|
|
- ❌ API 服务逻辑
|
|||
|
|
- ❌ Provider 状态管理
|
|||
|
|
- ❌ 数据模型结构
|
|||
|
|
- ❌ 路由逻辑
|
|||
|
|
|
|||
|
|
## 测试要点
|
|||
|
|
|
|||
|
|
1. **功能测试**
|
|||
|
|
- 用户登录/注册
|
|||
|
|
- 查看行情数据
|
|||
|
|
- 进行交易操作
|
|||
|
|
- 查看资产信息
|
|||
|
|
- 修改个人设置
|
|||
|
|
|
|||
|
|
2. **视觉测试**
|
|||
|
|
- 深色模式检查
|
|||
|
|
- 浅色模式检查
|
|||
|
|
- 动画流畅度
|
|||
|
|
- 响应式布局
|
|||
|
|
|
|||
|
|
3. **构建测试**
|
|||
|
|
- Dart 分析通过
|
|||
|
|
- Flutter 构建成功
|
|||
|
|
- 无运行时错误
|
|||
|
|
|
|||
|
|
## 学习要点
|
|||
|
|
|
|||
|
|
- 如果遇到新的 UI 模式，记录到本文档
|
|||
|
|
- 如果发现业务逻辑依赖，记录到本文档
|
|||
|
|
- 如果需要新的设计 token，记录到本文档
|
|||
|
|
- 如果创建新的自定义组件，记录到本文档
|
|||
|
|
|
|||
|
|
## 已知问题
|
|||
|
|
|
|||
|
|
1. **登录页**: 有两个版本，需要用 shadcn 版本替换原版
|
|||
|
|
2. **主页面**: 有两个版本，需要用 shadcn 版本替换原版
|
|||
|
|
3. **图标**: 部分页面仍使用 Material Icons，需要替换为 LucideIcons
|
|||
|
|
4. **颜色**: 部分地方硬编码颜色，需要使用主题色
|
|||
|
|
|
|||
|
|
## 下一步计划
|
|||
|
|
|
|||
|
|
1. 替换 main_page.dart 和 login_page.dart
|
|||
|
|
2. 重构 home_page.dart
|
|||
|
|
3. 重构 market_page.dart 和 trade_page.dart
|
|||
|
|
4. 重构 asset_page.dart 和 mine_page.dart
|
|||
|
|
5. 创建自定义组件（CoinCard, TradeButton 等）
|
|||
|
|
6. 添加动画优化
|