sion
4f17e7ea8a
主要修复: 1. 添加 MetaObjectHandler 自动填充时间字段 2. 启用 @EnableTransactionManagement 显式事务管理 3. 使用 LambdaUpdateWrapper 强制更新订单状态 4. 完善 MyBatis Plus 配置和字段更新策略 5. 添加详细的调试日志配置 6. 前端集成 vconsole 调试工具 关键修改文件: - SpcCloudApplication.java: 添加 @EnableTransactionManagement - FundService.java: 使用 LambdaUpdateWrapper 显式更新 - MyBatisPlusMetaObjectHandler.java: 自动填充时间字段 - application-dev.yml: 完善配置和日志 - monisuo-admin: 添加 vconsole 调试工具
307 lines
7.4 KiB
Markdown
307 lines
7.4 KiB
Markdown
# 应用新设计系统到 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！** 🚀✨
|