Files

主要修复:
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 调试工具

2026-03-24 09:41:23 +08:00

7.4 KiB

Raw Blame History

应用新设计系统到 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 - 提现弹窗样式

任务要求

✅ 必须遵守

不破坏现有 API 接口 - 所有接口调用保持不变
不修改业务逻辑 - 只更新 UI/UX
不修改数据模型 - Model 类保持不变
渐进式更新 - 分步骤更新，避免大规模重构

🎯 核心任务

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

更新颜色系统 (lib/core/theme/app_color_scheme.dart)
- 添加 Material Design 3 颜色
- Primary: #72dcff (青色)
- Secondary: #dd8bfb (紫色)
- Tertiary: #afffd1 (绿色)
- Error: #ff716c (红色)
- Surface 系列: #0b0e14, #161a21, #1c2028, #22262f
更新字体系统 (lib/core/theme/app_theme.dart)
- 添加 Google Fonts 依赖
- Space Grotesk (标题)
- Manrope (正文)
- 配置 TextTheme

创建 GlassPanel 组件 (lib/ui/components/glass_panel.dart)

class GlassPanel extends StatelessWidget {
  final Widget child;
  final double blur;
  final Color? backgroundColor;
  final BorderRadius? borderRadius;

  // 实现毛玻璃效果
}

创建 NeonGlow 组件 (lib/ui/components/neon_glow.dart)

class NeonGlow extends StatelessWidget {
  final Widget child;
  final Color glowColor;
  final double blurRadius;

  // 实现霓虹光效
}

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

更新交易页面 (lib/ui/pages/trade/trade_page.dart)
- 应用新的颜色系统
- 使用 GlassPanel 组件
- 添加 NeonGlow 效果
- 保持现有 API 调用不变
更新行情页面 (lib/ui/pages/market/market_page.dart)
- 应用新的卡片样式
- 使用新的颜色系统
- 保持现有列表逻辑
更新我的页面 (lib/ui/pages/mine/mine_page.dart)
- 应用新的卡片样式
- 使用新的颜色系统
- 保持现有功能
更新充值弹窗 (lib/ui/pages/asset/asset_page.dart)
- 应用新的弹窗样式
- 使用 GlassPanel
- 保持现有逻辑
更新提现弹窗 (lib/ui/pages/asset/asset_page.dart)
- 应用新的弹窗样式
- 使用 GlassPanel
- 保持现有逻辑

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

运行 Flutter Analyze
```
cd flutter_monisuo
flutter analyze
```
- 确保 0 errors
- 修复 warnings
测试应用
```
flutter run -d chrome
```
- 测试所有页面显示正常
- 测试主题切换功能
- 验证 API 调用正常
优化性能
- 检查毛玻璃效果性能
- 优化不必要的重建
- 确保流畅度

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

构建生产版本

flutter build web --release --dart-define=ENV=prod

提交代码

git add .
git commit -m "feat(ui): 应用新设计系统

- 更新颜色系统为 Material Design 3
- 添加 Space Grotesk 和 Manrope 字体
- 创建 GlassPanel 和 NeonGlow 组件
- 更新所有页面样式
- 保持现有 API 接口不变"

git push

设计系统详情

颜色系统 (Material Design 3)

// 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

字体系统

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

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

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

组件样式

GlassPanel (毛玻璃效果)

background: rgba(34, 38, 47, 0.4)
backdrop-filter: blur(20px)
border: 1px solid rgba(69, 72, 79, 0.15)

NeonGlow (霓虹光效)

/* 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)

执行规则

严格遵循 Phase 顺序 - 不要跳跃
增量提交 - 每完成一个 Phase 就提交
保持兼容性 - 不破坏现有功能
测试验证 - 每个阶段都要测试
文档更新 - 更新 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！ 🚀✨

7.4 KiB Raw Blame History Unescape Escape