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 调试工具
5.3 KiB
5.3 KiB
应用新设计系统功能规格
1. 功能概述
- 功能名称: 应用新设计系统到 Flutter 项目
- 优先级: P0
- 负责人: 开发团队
- 预计工期: 1 天
2. 业务背景
当前痛点
- 现有 Flutter 项目使用旧的样式系统
- 缺乏统一的组件化设计
- 视觉效果不够现代化
- 缺少毛玻璃、霓虹光效等现代 UI 效果
解决方案
- 应用新的 Material Design 3 配色方案
- 使用 Space Grotesk + Manrope 字体组合
- 组件化开发，提取可复用组件
- 添加 Glass Panel 和 Neon Glow 效果
预期收益
- 统一的视觉风格
- 更好的用户体验
- 提高开发效率（组件复用）
- 现代化的 UI 效果
3. 功能详情
3.1 用户故事
作为 Monisuo 用户，我希望应用有现代化的 UI 设计，以便获得更好的使用体验和视觉享受。
3.2 功能列表
- 更新颜色系统（Material Design 3）
- 更新字体系统（Space Grotesk + Manrope）
- 创建 GlassPanel 组件
- 创建 NeonGlow 效果组件
- 更新交易页面样式
- 更新行情页面样式
- 更新我的页面样式
- 创建充值弹窗组件
- 创建提现弹窗组件
3.3 UI/UX 设计
配色方案
// Primary Colors
primary: #72dcff (青色)
secondary: #dd8bfb (紫色)
tertiary: #afffd1 (绿色)
// Surface Colors
background: #0b0e14
surface: #0b0e14
surfaceContainer: #161a21
surfaceContainerHigh: #1c2028
surfaceContainerHighest: #22262f
// Semantic Colors
error: #ff716c
success: #afffd1
warning: #ffa8a3
字体系统
// Fonts
headline: Space Grotesk (标题)
body: Manrope (正文)
label: Manrope (标签)
// Icons
Material Symbols Outlined
组件风格
- Glass Panel: 毛玻璃效果（backdrop-filter: blur(20px)）
- Neon Glow: 霓虹光效（box-shadow: 0 0 15px rgba(114, 220, 255, 0.3)）
- Dark Theme: 深色主题为主
- Rounded Corners: 大圆角设计（2rem, 1rem）
4. 技术方案
4.1 架构设计
前端方案 (Flutter)
- 状态管理: Provider (保持现有)
- UI 组件: shadcn_ui (保持现有)
- 设计系统: 新增 AppDesignSystem
新增组件
lib/ui/components/
├── glass_panel.dart # 毛玻璃面板
├── neon_button.dart # 霓虹按钮
├── neon_card.dart # 霓虹卡片
└── modern_dialog.dart # 现代弹窗（已存在，需更新）
更新文件
lib/core/theme/
├── app_color_scheme.dart # 更新颜色系统
├── app_text_styles.dart # 更新字体系统
└── app_design_system.dart # 新增设计系统
lib/ui/pages/
├── trade/trade_page.dart # 更新交易页面
├── market/market_page.dart # 更新行情页面
└── mine/mine_page.dart # 更新我的页面
4.2 API 设计
保持现有 API 不变，只更新 UI 层。
4.3 数据模型
保持现有数据模型不变。
5. 测试用例
5.1 正常流程测试
- 所有页面正常显示
- Glass Panel 效果正常
- Neon Glow 效果正常
- 字体正确显示
- 颜色正确应用
5.2 兼容性测试
- 现有 API 调用正常
- 现有功能正常工作
- 主题切换正常
- 明暗模式正常
5.3 边界条件测试
- 小屏幕设备显示正常
- 大屏幕设备显示正常
- 横屏显示正常
- 性能测试通过
6. 验收标准
功能验收
- 所有功能点已实现
- UI 符合设计稿
- 交互流畅自然
质量验收
- flutter analyze 无错误
- 现有测试通过
- 代码审查通过
- 无明显性能问题
文档验收
- 设计系统文档已更新
- 组件使用说明已添加
- CHANGELOG 已更新
7. 依赖与风险
依赖项
- ✅ Google Fonts 包已安装
- ✅ shadcn_ui 已集成
- ✅ Provider 状态管理已使用
潜在风险
- ⚠️ 字体加载可能影响性能 → 使用缓存策略
- ⚠️ 毛玻璃效果在低端设备可能卡顿 → 添加性能检测
- ⚠️ 新样式可能与现有样式冲突 → 分步骤更新
8. 时间规划
| 阶段 | 任务 | 预计时间 |
|---|---|---|
| Phase 1 | 创建设计系统和基础组件 | 2 小时 |
| Phase 2 | 更新页面样式 | 3 小时 |
| Phase 3 | 测试和优化 | 1 小时 |
| Phase 4 | 构建和部署 | 0.5 小时 |
9. 开发约束
⚠️ 重要约束
- 不破坏现有 API 接口
- 保持现有业务逻辑
- 兼容现有数据模型
- 渐进式更新，避免大规模重构
✅ 允许的操作
- 更新 UI 样式
- 创建新的 UI 组件
- 更新主题系统
- 优化视觉效果
❌ 禁止的操作
- 修改 API 接口定义
- 修改数据模型结构
- 修改业务逻辑代码
- 删除现有功能
10. 参考资料
- 交易页面样式:
页面样式/交易.txt - 行情页面样式:
页面样式/行情.txt - 我的页面样式:
页面样式/我的.txt - 充值弹窗样式:
页面样式/充值弹窗.txt - 提现弹窗样式:
页面样式/提现弹窗.txt - Material Design 3: https://m3.material.io/
- Space Grotesk Font: https://fonts.google.com/specimen/Space+Grotesk
- Manrope Font: https://fonts.google.com/specimen/Manrope
创建日期: 2026-03-24 01:42 GMT+8 最后更新: 2026-03-24 01:42 GMT+8 状态: ✅ 准备就绪