用户详情数据面板 - 实现方案

需求概述

在管理后台用户管理页面，点击用户详情时展示全面的数据分析视图，包括：充值记录、累计充值/提现、推广人数信息、领取福利信息等。

方案设计

一、后端：新增用户详情聚合接口

文件: AdminController.java

新增 GET /admin/user/stats?userId=xxx 接口，一次性返回所有统计数据：

{
  "code": "0000",
  "data": {
    "user": { ... },           // 用户基本信息
    "fundAccount": { ... },    // 资金账户（余额、冻结、累计充值、累计提现）
    "tradeAccounts": [...],    // 交易账户持仓列表
    "depositStats": {          // 充值统计
      "totalCount": 5,
      "totalAmount": 10000.00,
      "successCount": 4,
      "successAmount": 8000.00
    },
    "withdrawStats": {         // 提现统计
      "totalCount": 3,
      "totalAmount": 3000.00,
      "successCount": 2,
      "successAmount": 2000.00,
      "totalFee": 200.00
    },
    "referralStats": {         // 推广统计
      "directCount": 5,        // 直接推广人数
      "indirectCount": 8,      // 间接推广人数
      "referrals": [           // 直接推广人列表
        { "userId": 10, "username": "user1", "nickname": "用户1", "createTime": "...", "deposited": true }
      ]
    },
    "bonusStats": {            // 福利统计
      "newUserBonusClaimed": true,
      "totalBonusClaimed": 500.00,
      "records": [             // 领取记录
        { "type": "新人首充福利", "amount": 100, "time": "..." },
        { "type": "邀请奖励-10-1", "amount": 100, "time": "..." }
      ]
    },
    "recentOrders": [...],     // 最近10笔充提订单
    "recentTrades": [...]      // 最近10笔交易订单
  }
}

实现要点:

在 AssetService 或新建 AdminDataService 中封装聚合查询逻辑
使用已有的 AccountFundMapper、OrderFundMapper、AccountFlowMapper、OrderTradeMapper 进行数据查询
推广人列表通过 UserMapper 查询 referredBy = userId 获取
福利记录通过 AccountFlow 查询 flowType=7 (福利类型) 或通过 remark LIKE 匹配福利关键词

二、前端：用户详情弹窗升级为多标签页

文件: monisuo-admin/src/pages/monisuo/users.vue

将现有的简单详情弹窗升级为多标签页数据面板：

弹窗布局

┌──────────────────────────────────────────────┐
│ 用户详情 - username                            │
├──────────────────────────────────────────────┤
│ [概览] [充提记录] [推广信息] [福利记录] [交易记录] │
├──────────────────────────────────────────────┤
│                                              │
│  (各标签页内容区)                               │
│                                              │
└──────────────────────────────────────────────┘

标签页内容设计

1. 概览 Tab

用户基本信息卡片（用户名、昵称、手机、邮箱、注册时间、最后登录）
KPI 统计卡片行（4列网格）：
- 资金账户余额 / 冻结金额
- 累计充值 / 累计提现
- 直接推广人数 / 间接推广人数
- 累计领取福利金额
交易持仓列表（当前持有的币种）

2. 充提记录 Tab

充提统计摘要（总充值笔数/金额、总提现笔数/金额、手续费总计）
充提订单列表表格（时间、类型、金额、手续费、到账金额、状态）

3. 推广信息 Tab

推广概览卡片（推广码、直接推广人数、间接推广人数）
直接推广人列表表格（用户名、昵称、注册时间、是否已充值）

4. 福利记录 Tab

福利统计摘要（已领取总额、各类型数量）
福利领取记录表格（类型、金额、时间）

5. 交易记录 Tab

最近交易订单列表（时间、币种、方向、价格、数量、金额）

三、前端 API 层

文件: monisuo-admin/src/services/api/monisuo-admin.api.ts

新增 useGetUserStatsQuery(userId) composable，调用 /admin/user/stats 接口。

实现步骤

后端 - 在 AssetService 中新增 getUserStats(userId) 方法
后端 - 在 AdminController 中新增 /admin/user/stats 接口
前端 - 在 monisuo-admin.api.ts 中新增 API composable
前端 - 重构 users.vue 详情弹窗为多标签页数据面板

文件变更清单

文件	操作
`src/.../service/AssetService.java`	新增 `getUserStats()` 方法
`src/.../controller/AdminController.java`	新增 `/admin/user/stats` 接口
`monisuo-admin/src/services/api/monisuo-admin.api.ts`	新增 `useGetUserStatsQuery`
`monisuo-admin/src/pages/monisuo/users.vue`	重构详情弹窗

5.1 KiB Raw Blame History Unescape Escape