149 lines
3.3 KiB
Markdown
149 lines
3.3 KiB
Markdown
# Flutter Monisuo 项目说明
|
|
|
|
## 项目信息
|
|
|
|
- **名称**: flutter_monisuo (虚拟货币模拟交易平台)
|
|
- **框架**: Flutter 3
|
|
- **语言**: Dart
|
|
- **UI 库**: shadcn_ui 0.52.1
|
|
- **图标**: lucide_icons_flutter
|
|
- **动画**: flutter_animate
|
|
- **状态管理**: Provider
|
|
|
|
## 当前阶段: Phase 6 主题系统深度优化
|
|
|
|
### 目标
|
|
设计并实现一套专业、一致、响应式的主题系统，确保:
|
|
- 视觉一致性
|
|
- 良好的可读性 (对比度 >= 4.5:1)
|
|
- **杜绝文字和背景颜色一样无法区分的情况**
|
|
|
|
### 参考文件
|
|
- `specs/theme-design.md` - 主题设计规范
|
|
- `IMPLEMENTATION_PLAN.md` - 实施计划 (Phase 6 部分)
|
|
|
|
## 开发命令
|
|
|
|
```bash
|
|
# 获取依赖
|
|
flutter pub get
|
|
|
|
# 运行应用 (Chrome)
|
|
flutter run -d chrome
|
|
|
|
# 运行应用 (macOS)
|
|
flutter run -d macos
|
|
|
|
# 分析代码
|
|
flutter analyze
|
|
|
|
# 运行测试
|
|
flutter test
|
|
```
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
lib/
|
|
├── core/
|
|
│ ├── constants/
|
|
│ │ ├── app_colors.dart # 颜色定义 (需重构)
|
|
│ │ └── api_endpoints.dart
|
|
│ ├── theme/
|
|
│ │ ├── app_theme.dart # 主题配置 (需重构)
|
|
│ │ ├── app_text_styles.dart # 文字样式 (待创建)
|
|
│ │ └── app_spacing.dart # 间距圆角 (待创建)
|
|
│ ├── network/
|
|
│ └── storage/
|
|
├── data/
|
|
│ ├── models/
|
|
│ └── services/
|
|
├── providers/
|
|
├── routes/
|
|
├── ui/
|
|
│ ├── shared/
|
|
│ │ └── ui_constants.dart # 整合导出
|
|
│ ├── components/
|
|
│ │ ├── coin_card.dart # 有硬编码颜色
|
|
│ │ ├── asset_card.dart
|
|
│ │ └── trade_button.dart
|
|
│ └── pages/
|
|
│ ├── auth/
|
|
│ ├── main/
|
|
│ ├── home/
|
|
│ ├── market/
|
|
│ ├── trade/
|
|
│ ├── asset/
|
|
│ ├── mine/
|
|
│ └── orders/
|
|
└── main.dart
|
|
```
|
|
|
|
## 颜色系统设计
|
|
|
|
### 主色调
|
|
```dart
|
|
primary: #00D4AA // 青绿色 (品牌色)
|
|
primaryLight: #00E6B8
|
|
primaryDark: #00B894
|
|
```
|
|
|
|
### 涨跌色
|
|
```dart
|
|
up: #00C853 // 涨/买入 (绿色)
|
|
down: #FF5252 // 跌/卖出 (红色)
|
|
```
|
|
|
|
### 背景色 (深色主题)
|
|
```dart
|
|
background: #0F0F1A // 页面背景
|
|
cardBackground: #1A1A2E // 卡片背景
|
|
inputBackground: #16213E // 输入框背景
|
|
```
|
|
|
|
### 文字颜色
|
|
```dart
|
|
textPrimary: #FFFFFF // 主要文字
|
|
textSecondary: #B0B0C0 // 次要文字
|
|
textHint: #6B6B80 // 提示文字
|
|
textDisabled: #4A4A5A // 禁用文字
|
|
```
|
|
|
|
## 禁止事项
|
|
|
|
- ❌ 文字与背景颜色相同
|
|
- ❌ 低对比度组合 (对比度 < 4.5)
|
|
- ❌ 仅用颜色区分状态
|
|
- ❌ 过小的触摸目标 (< 44px)
|
|
- ❌ 不一致的组件样式
|
|
- ❌ 硬编码颜色值
|
|
- ❌ 修改业务逻辑/API/Provider
|
|
|
|
## 测试要点
|
|
|
|
1. **对比度检查**
|
|
- 所有文字/背景组合 >= 4.5:1
|
|
- 使用对比度检查工具验证
|
|
|
|
2. **视觉一致性**
|
|
- 所有页面风格统一
|
|
- 组件样式一致
|
|
|
|
3. **功能验证**
|
|
- `flutter analyze` 无错误
|
|
- 应用可正常运行
|
|
|
|
## 已完成的工作
|
|
|
|
- ✅ shadcn_ui 集成
|
|
- ✅ 所有页面已重构为 shadcn 组件
|
|
- ✅ 基础主题配置
|
|
|
|
## 当前任务
|
|
|
|
1. 重构颜色系统 (app_colors.dart)
|
|
2. 清理硬编码颜色
|
|
3. 创建文字样式系统
|
|
4. 创建间距圆角系统
|
|
5. 更新所有页面使用新主题
|