# 应用新设计系统到 Flutter 项目

You are running a development task using the **monisuo-dev skill** workflow.

## 背景

我们已经完成了 Monisuo 项目的现代化改造，现在需要应用一套全新的设计系统，包括：
- Material Design 3 配色方案
- Space Grotesk + Manrope 字体组合
- Glass Panel 和 Neon Glow 效果
- 组件化开发

## 参考文件

- **Feature Spec**: `docs/features/apply-new-styles.md` (必读)
- **样式参考**:
  - `页面样式/交易.txt` - 交易页面完整样式
  - `页面样式/行情.txt` - 行情页面完整样式
  - `页面样式/我的.txt` - 我的页面完整样式
  - `页面样式/充值弹窗.txt` - 充值弹窗样式
  - `页面样式/提现弹窗.txt` - 提现弹窗样式

## 任务要求

### ✅ 必须遵守
1. **不破坏现有 API 接口** - 所有接口调用保持不变
2. **不修改业务逻辑** - 只更新 UI/UX
3. **不修改数据模型** - Model 类保持不变
4. **渐进式更新** - 分步骤更新，避免大规模重构

### 🎯 核心任务

#### Phase 1: 创建设计系统和基础组件 (2小时)

1. **更新颜色系统** (`lib/core/theme/app_color_scheme.dart`)
   - 添加 Material Design 3 颜色
   - Primary: #72dcff (青色)
   - Secondary: #dd8bfb (紫色)
   - Tertiary: #afffd1 (绿色)
   - Error: #ff716c (红色)
   - Surface 系列: #0b0e14, #161a21, #1c2028, #22262f

2. **更新字体系统** (`lib/core/theme/app_theme.dart`)
   - 添加 Google Fonts 依赖
   - Space Grotesk (标题)
   - Manrope (正文)
   - 配置 TextTheme

3. **创建 GlassPanel 组件** (`lib/ui/components/glass_panel.dart`)
   ```dart
   class GlassPanel extends StatelessWidget {
     final Widget child;
     final double blur;
     final Color? backgroundColor;
     final BorderRadius? borderRadius;
     
     // 实现毛玻璃效果
   }
   ```

4. **创建 NeonGlow 组件** (`lib/ui/components/neon_glow.dart`)
   ```dart
   class NeonGlow extends StatelessWidget {
     final Widget child;
     final Color glowColor;
     final double blurRadius;
     
     // 实现霓虹光效
   }
   ```

#### Phase 2: 更新页面样式 (3小时)

5. **更新交易页面** (`lib/ui/pages/trade/trade_page.dart`)
   - 应用新的颜色系统
   - 使用 GlassPanel 组件
   - 添加 NeonGlow 效果
   - 保持现有 API 调用不变

6. **更新行情页面** (`lib/ui/pages/market/market_page.dart`)
   - 应用新的卡片样式
   - 使用新的颜色系统
   - 保持现有列表逻辑

7. **更新我的页面** (`lib/ui/pages/mine/mine_page.dart`)
   - 应用新的卡片样式
   - 使用新的颜色系统
   - 保持现有功能

8. **更新充值弹窗** (`lib/ui/pages/asset/asset_page.dart`)
   - 应用新的弹窗样式
   - 使用 GlassPanel
   - 保持现有逻辑

9. **更新提现弹窗** (`lib/ui/pages/asset/asset_page.dart`)
   - 应用新的弹窗样式
   - 使用 GlassPanel
   - 保持现有逻辑

#### Phase 3: 测试和优化 (1小时)

10. **运行 Flutter Analyze**
    ```bash
    cd flutter_monisuo
    flutter analyze
    ```
    - 确保 0 errors
    - 修复 warnings

11. **测试应用**
    ```bash
    flutter run -d chrome
    ```
    - 测试所有页面显示正常
    - 测试主题切换功能
    - 验证 API 调用正常

12. **优化性能**
    - 检查毛玻璃效果性能
    - 优化不必要的重建
    - 确保流畅度

#### Phase 4: 构建和部署 (0.5小时)

13. **构建生产版本**
    ```bash
    flutter build web --release --dart-define=ENV=prod
    ```

14. **提交代码**
    ```bash
    git add .
    git commit -m "feat(ui): 应用新设计系统
    
    - 更新颜色系统为 Material Design 3
    - 添加 Space Grotesk 和 Manrope 字体
    - 创建 GlassPanel 和 NeonGlow 组件
    - 更新所有页面样式
    - 保持现有 API 接口不变"
    
    git push
    ```

## 设计系统详情

### 颜色系统 (Material Design 3)

```dart
// Primary (青色)
primary: #72dcff
primaryDim: #00c3ed
primaryContainer: #00d2ff

// Secondary (紫色)
secondary: #dd8bfb
secondaryDim: #ce7eec
secondaryContainer: #6e208c

// Tertiary (绿色)
tertiary: #afffd1
tertiaryDim: #00efa0
tertiaryContainer: #00ffab

// Error (红色)
error: #ff716c
errorDim: #d7383b
errorContainer: #9f0519

// Surface (深色背景)
background: #0b0e14
surface: #0b0e14
surfaceDim: #0b0e14
surfaceBright: #282c36
surfaceContainerLowest: #000000
surfaceContainerLow: #10131a
surfaceContainer: #161a21
surfaceContainerHigh: #1c2028
surfaceContainerHighest: #22262f

// On Surface (文字)
onSurface: #ecedf6
onSurfaceVariant: #a9abb3
outline: #73757d
outlineVariant: #45484f
```

### 字体系统

```dart
// Headline (标题)
fontFamily: Space Grotesk
fontWeight: 300-700

// Body (正文)
fontFamily: Manrope
fontWeight: 300-700

// Label (标签)
fontFamily: Manrope
fontWeight: 500-700
```

### 组件样式

#### GlassPanel (毛玻璃效果)
```css
background: rgba(34, 38, 47, 0.4)
backdrop-filter: blur(20px)
border: 1px solid rgba(69, 72, 79, 0.15)
```

#### NeonGlow (霓虹光效)
```css
/* Primary Glow */
box-shadow: 0 0 20px rgba(114, 220, 255, 0.15)

/* Secondary Glow */
box-shadow: 0 0 20px rgba(221, 139, 251, 0.15)

/* Tertiary Glow */
box-shadow: 0 0 25px rgba(175, 255, 209, 0.2)
```

## 执行规则

1. **严格遵循 Phase 顺序** - 不要跳跃
2. **增量提交** - 每完成一个 Phase 就提交
3. **保持兼容性** - 不破坏现有功能
4. **测试验证** - 每个阶段都要测试
5. **文档更新** - 更新 CHANGELOG

## 完成标准

当所有任务完成时：
- ✅ 所有页面使用新设计系统
- ✅ **深色主题样式完整**
- ✅ **亮色主题样式完整**
- ✅ **主题切换功能正常**
- ✅ flutter analyze 0 errors
- ✅ 应用运行正常
- ✅ API 调用正常
- ✅ 代码已提交

### ⚠️ 重要提示：必须支持明暗主题

**深色主题 (Dark Theme)**
- 背景：深色 (#0b0e14, #161a21)
- 文字：亮色 (#ecedf6, #a9abb3)
- GlassPanel：深色半透明
- NeonGlow：明亮效果

**亮色主题 (Light Theme)**
- 背景：浅色 (#FFFFFF, #FAFAFA)
- 文字：深色 (#0b0e14, #161a21)
- GlassPanel：浅色半透明
- NeonGlow：柔和效果

**实现方式**：
- 在 `app_color_scheme.dart` 中定义 `lightShad` 和 `darkShad`
- 在 `app_theme.dart` 中定义 `lightTheme` 和 `darkTheme`
- 使用 `ThemeProvider` (已存在) 进行主题切换
- 所有组件必须响应主题变化

### ⚠️ 重要提示：必须使用中文

**所有UI文字必须使用中文**：
- ✅ 按钮文字：Buy → 买入，Sell → 卖出
- ✅ 标签文字：Price → 价格，Amount → 数量
- ✅ 提示文字：Available → 可用，Fee → 手续费
- ✅ 页面标题：Trade → 交易，Market → 行情，Assets → 资产
- ✅ 弹窗标题：Deposit → 充值，Withdraw → 提现
- ✅ 状态文字：Completed → 已完成，Pending → 待处理

**参考翻译**：
```
Trade → 交易
Market → 行情
Assets → 资产
Profile → 我的
Buy → 买入
Sell → 卖出
Price → 价格
Amount → 数量
Total → 总计
Fee → 手续费
Available → 可用
Balance → 余额
Deposit → 充值
Withdraw → 提现
Order → 订单
History → 历史
Search → 搜索
All → 全部
Hot → 热门
Favorites → 收藏
Real-time → 实时
24h High → 24小时最高
24h Low → 24小时最低
24h Vol → 24小时成交量
Place Buy Order → 下买单
Place Sell Order → 下卖单
```

---

**开始执行吧！让 Monisuo 拥有最现代化的 UI！** 🚀✨