Files
monisuo/flutter_monisuo/specs/theme-modernization.md
sion c3f196ded4 feat: 添加业务分析后端接口
新增 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 使用真实数据
- 动态决策建议基于实际数据
2026-03-22 04:50:19 +08:00

4.7 KiB
Raw Blame History

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 核心页面(高优先级)

  1. 首页 (home_page.dart)

    • 使用 ShadCard 展示资产概览
    • 使用 ShadButton 进行快捷操作
    • 添加 flutter_animate 动画
  2. 行情页面 (market_page.dart)

    • 币种列表使用 ShadCard
    • 价格变化使用 ShadBadge
    • 搜索框使用 ShadInput
  3. 交易页面 (trade_page.dart)

    • 买入/卖出使用不同颜色的 ShadButton
    • 数量输入使用 ShadInputFormField
    • 币种选择使用 ShadSelect
  4. 资产页面 (asset_page.dart)

    • 总资产使用大号 ShadCard
    • 充值/提现使用 ShadButton
    • 资金列表使用 ShadListTile
  5. 个人中心 (mine_page.dart)

    • 菜单项使用统一布局
    • 设置项使用 ShadSwitch
    • 退出登录使用 ShadButton.destructive

2.2 认证页面(中优先级)

  1. 登录页面 (login_page.dart)

    • 已有示例login_page_shadcn.dart
    • 需要替换原文件
  2. 注册页面 (register_page.dart)

    • 创建 shadcn 版本
    • 完整表单验证

2.3 主框架(高优先级)

  1. 主页面 (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 - 立即执行

  1. 替换 main_page.dart 为 shadcn 版本
  2. 替换 login_page.dart 为 shadcn 版本
  3. 重构 home_page.dart

P1 - 高优先级

  1. 重构 market_page.dart
  2. 重构 trade_page.dart
  3. 重构 asset_page.dart

P2 - 中优先级

  1. 重构 mine_page.dart
  2. 重构 register_page.dart
  3. 创建自定义组件

P3 - 低优先级

  1. 优化动画
  2. 添加高级效果
  3. 性能优化

参考资源