新增 AnalysisController 提供 6 个分析接口: - /admin/analysis/profit - 盈利分析(交易手续费/充提手续费/资金利差) - /admin/analysis/cash-flow - 资金流动趋势(按月统计充值/提现/净流入) - /admin/analysis/trade - 交易分析(买入/卖出统计+趋势) - /admin/analysis/coin-distribution - 币种交易分布 - /admin/analysis/user-growth - 用户增长分析(新增/活跃用户) - /admin/analysis/risk - 风险指标(大额交易/异常提现/KYC/冻结账户) - /admin/analysis/health - 综合健康度评分 更新 Mapper 添加分析查询方法: - OrderFundMapper: 手续费统计、时间范围查询、大额交易、异常提现 - OrderTradeMapper: 交易金额统计、活跃用户、币种分布 前端 API 对接: - 新增 6 个分析相关 Query hooks - 更新 analytics.vue 使用真实数据 - 动态决策建议基于实际数据
4.7 KiB
4.7 KiB
Monisuo Flutter 主题现代化规范
项目概况
- 项目名称: flutter_monisuo (虚拟货币模拟交易平台)
- 技术栈: Flutter 3 + Dart + shadcn_ui 0.52.1
- 当前状态: 已集成 shadcn_ui,部分页面已重构
现代化目标
1. 统一设计系统
1.1 主题配置
- 当前:Slate 深色主题
- 目标:
- 统一配色方案(品牌色、涨跌色、中性色)
- 完善的深色/浅色模式支持
- 自定义品牌色系统
1.2 间距系统
- 标准化 padding/margin/gap
- 使用统一的间距 token
- 响应式布局适配
1.3 组件样式
- 所有按钮统一使用 ShadButton
- 所有卡片统一使用 ShadCard
- 所有输入框统一使用 ShadInputFormField
- 所有图标统一使用 LucideIcons
2. 页面现代化
2.1 核心页面(高优先级)
-
首页 (home_page.dart)
- 使用 ShadCard 展示资产概览
- 使用 ShadButton 进行快捷操作
- 添加 flutter_animate 动画
-
行情页面 (market_page.dart)
- 币种列表使用 ShadCard
- 价格变化使用 ShadBadge
- 搜索框使用 ShadInput
-
交易页面 (trade_page.dart)
- 买入/卖出使用不同颜色的 ShadButton
- 数量输入使用 ShadInputFormField
- 币种选择使用 ShadSelect
-
资产页面 (asset_page.dart)
- 总资产使用大号 ShadCard
- 充值/提现使用 ShadButton
- 资金列表使用 ShadListTile
-
个人中心 (mine_page.dart)
- 菜单项使用统一布局
- 设置项使用 ShadSwitch
- 退出登录使用 ShadButton.destructive
2.2 认证页面(中优先级)
-
登录页面 (login_page.dart)
- 已有示例:login_page_shadcn.dart
- 需要替换原文件
-
注册页面 (register_page.dart)
- 创建 shadcn 版本
- 完整表单验证
2.3 主框架(高优先级)
- 主页面 (main_page.dart)
- 已有示例:main_page_shadcn.dart
- 需要替换原文件
- 优化底部导航
3. 自定义组件
创建业务特定组件:
3.1 CoinCard - 币种卡片
class CoinCard extends StatelessWidget {
final String name;
final String code;
final double price;
final double change24h;
final String iconUrl;
// 使用 ShadCard + ShadAvatar + ShadBadge
}
3.2 TradeButton - 交易按钮
class TradeButton extends StatelessWidget {
final bool isBuy;
final VoidCallback onPressed;
// 买入:绿色 ShadButton
// 卖出:红色 ShadButton.destructive
}
3.3 AssetCard - 资产卡片
class AssetCard extends StatelessWidget {
final String title;
final double balance;
final double change;
// 使用 ShadCard + 大号文本
}
3.4 PriceChart - 价格图表
class PriceChart extends StatelessWidget {
final List<double> prices;
final bool isUp;
// 使用 flutter_animate 添加动画
}
4. 动画系统
使用 flutter_animate 添加动画:
4.1 页面切换动画
- 淡入淡出
- 滑动效果
4.2 列表加载动画
- 交错淡入
- 滑动进入
4.3 交互反馈动画
- 按钮点击缩放
- 卡片悬停效果
5. 主题定制
5.1 品牌色系统
// 自定义品牌色
const brandGreen = Color(0xFF00D4AA); // 品牌绿
const upColor = Color(0xFF10B981); // 涨
const downColor = Color(0xFFEF4444); // 跌
5.2 配色方案选择
- Slate(当前):专业、稳重
- 可选:Zinc(现代)、Blue(活力)
禁止事项
- ❌ 不要修改业务逻辑
- ❌ 不要修改 API 调用
- ❌ 不要修改数据模型
- ❌ 不要删除现有功能
- ❌ 不要改变 Provider 逻辑
验证标准
功能验证
- 用户可以登录/注册
- 可以查看行情
- 可以进行交易
- 可以查看资产
- 可以修改设置
视觉验证
- 所有页面使用统一的组件
- 所有页面有一致的间距
- 所有页面有流畅的动画
- 深色模式完美支持
代码验证
- 无 Dart 分析错误
- 无 Flutter 警告
- 构建成功
- 无运行时错误
重构优先级
P0 - 立即执行
- 替换 main_page.dart 为 shadcn 版本
- 替换 login_page.dart 为 shadcn 版本
- 重构 home_page.dart
P1 - 高优先级
- 重构 market_page.dart
- 重构 trade_page.dart
- 重构 asset_page.dart
P2 - 中优先级
- 重构 mine_page.dart
- 重构 register_page.dart
- 创建自定义组件
P3 - 低优先级
- 优化动画
- 添加高级效果
- 性能优化