优化
This commit is contained in:
@@ -10,18 +10,17 @@
|
||||
- **动画**: flutter_animate
|
||||
- **状态管理**: Provider
|
||||
|
||||
## 技术栈详情
|
||||
## 当前阶段: Phase 6 主题系统深度优化
|
||||
|
||||
### 核心依赖
|
||||
- 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
|
||||
### 目标
|
||||
设计并实现一套专业、一致、响应式的主题系统，确保:
|
||||
- 视觉一致性
|
||||
- 良好的可读性 (对比度 >= 4.5:1)
|
||||
- **杜绝文字和背景颜色一样无法区分的情况**
|
||||
|
||||
### 工具库
|
||||
- intl: 国际化
|
||||
- decimal: 精确计算
|
||||
### 参考文件
|
||||
- `specs/theme-design.md` - 主题设计规范
|
||||
- `IMPLEMENTATION_PLAN.md` - 实施计划 (Phase 6 部分)
|
||||
|
||||
## 开发命令
|
||||
|
||||
@@ -29,12 +28,11 @@
|
||||
# 获取依赖
|
||||
flutter pub get
|
||||
|
||||
# 运行应用
|
||||
flutter run
|
||||
# 运行应用 (Chrome)
|
||||
flutter run -d chrome
|
||||
|
||||
# 构建生产版本
|
||||
flutter build apk
|
||||
flutter build ios
|
||||
# 运行应用 (macOS)
|
||||
flutter run -d macos
|
||||
|
||||
# 分析代码
|
||||
flutter analyze
|
||||
@@ -47,122 +45,104 @@ flutter test
|
||||
|
||||
```
|
||||
lib/
|
||||
├── core/ # 核心功能
|
||||
│ ├── constants/ # 常量
|
||||
│ ├── network/ # 网络请求
|
||||
│ ├── storage/ # 本地存储
|
||||
│ └── theme/ # 主题配置
|
||||
├── data/ # 数据层
|
||||
│ ├── models/ # 数据模型
|
||||
│ └── services/ # API 服务
|
||||
├── providers/ # 状态管理
|
||||
├── routes/ # 路由配置
|
||||
├── ui/ # UI 层
|
||||
│ └── pages/ # 页面组件
|
||||
└── main.dart # 应用入口
|
||||
├── 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
|
||||
```
|
||||
|
||||
## 主要页面
|
||||
## 颜色系统设计
|
||||
|
||||
### 1. 认证模块
|
||||
- `login_page.dart` - 登录页（需要重构）
|
||||
- `login_page_shadcn.dart` - shadcn 版本示例（已完成）
|
||||
- `register_page.dart` - 注册页（需要重构）
|
||||
### 主色调
|
||||
```dart
|
||||
primary: #00D4AA // 青绿色 (品牌色)
|
||||
primaryLight: #00E6B8
|
||||
primaryDark: #00B894
|
||||
```
|
||||
|
||||
### 2. 主框架
|
||||
- `main_page.dart` - 主页面（需要重构）
|
||||
- `main_page_shadcn.dart` - shadcn 版本示例（已完成）
|
||||
### 涨跌色
|
||||
```dart
|
||||
up: #00C853 // 涨/买入 (绿色)
|
||||
down: #FF5252 // 跌/卖出 (红色)
|
||||
```
|
||||
|
||||
### 3. 功能页面
|
||||
- `home_page.dart` - 首页
|
||||
- `market_page.dart` - 行情
|
||||
- `trade_page.dart` - 交易
|
||||
- `asset_page.dart` - 资产
|
||||
- `mine_page.dart` - 我的
|
||||
### 背景色 (深色主题)
|
||||
```dart
|
||||
background: #0F0F1A // 页面背景
|
||||
cardBackground: #1A1A2E // 卡片背景
|
||||
inputBackground: #16213E // 输入框背景
|
||||
```
|
||||
|
||||
## 当前状态
|
||||
### 文字颜色
|
||||
```dart
|
||||
textPrimary: #FFFFFF // 主要文字
|
||||
textSecondary: #B0B0C0 // 次要文字
|
||||
textHint: #6B6B80 // 提示文字
|
||||
textDisabled: #4A4A5A // 禁用文字
|
||||
```
|
||||
|
||||
### 已完成
|
||||
- ✅ 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 状态管理
|
||||
- ❌ 数据模型结构
|
||||
- ❌ 路由逻辑
|
||||
- ❌ 文字与背景颜色相同
|
||||
- ❌ 低对比度组合 (对比度 < 4.5)
|
||||
- ❌ 仅用颜色区分状态
|
||||
- ❌ 过小的触摸目标 (< 44px)
|
||||
- ❌ 不一致的组件样式
|
||||
- ❌ 硬编码颜色值
|
||||
- ❌ 修改业务逻辑/API/Provider
|
||||
|
||||
## 测试要点
|
||||
|
||||
1. **功能测试**
|
||||
- 用户登录/注册
|
||||
- 查看行情数据
|
||||
- 进行交易操作
|
||||
- 查看资产信息
|
||||
- 修改个人设置
|
||||
1. **对比度检查**
|
||||
- 所有文字/背景组合 >= 4.5:1
|
||||
- 使用对比度检查工具验证
|
||||
|
||||
2. **视觉测试**
|
||||
- 深色模式检查
|
||||
- 浅色模式检查
|
||||
- 动画流畅度
|
||||
- 响应式布局
|
||||
2. **视觉一致性**
|
||||
- 所有页面风格统一
|
||||
- 组件样式一致
|
||||
|
||||
3. **构建测试**
|
||||
- Dart 分析通过
|
||||
- Flutter 构建成功
|
||||
- 无运行时错误
|
||||
3. **功能验证**
|
||||
- `flutter analyze` 无错误
|
||||
- 应用可正常运行
|
||||
|
||||
## 学习要点
|
||||
## 已完成的工作
|
||||
|
||||
- 如果遇到新的 UI 模式，记录到本文档
|
||||
- 如果发现业务逻辑依赖，记录到本文档
|
||||
- 如果需要新的设计 token，记录到本文档
|
||||
- 如果创建新的自定义组件，记录到本文档
|
||||
- ✅ shadcn_ui 集成
|
||||
- ✅ 所有页面已重构为 shadcn 组件
|
||||
- ✅ 基础主题配置
|
||||
|
||||
## 已知问题
|
||||
## 当前任务
|
||||
|
||||
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. 添加动画优化
|
||||
1. 重构颜色系统 (app_colors.dart)
|
||||
2. 清理硬编码颜色
|
||||
3. 创建文字样式系统
|
||||
4. 创建间距圆角系统
|
||||
5. 更新所有页面使用新主题
|
||||
|
||||
Reference in New Issue
Block a user