From 25b7f38df80138bc63c466e0d27853fb0483b531 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Wed, 11 Nov 2026 11:12:24 +0800
Subject: [PATCH] 111

---
 src/api/mall/trade/brokerage/record/index.ts  |  39 ++-
 src/api/member/opentypehistory/index.ts       |  66 +++-
 src/api/member/user/index.ts                  |   9 +
 src/utils/formatter.ts                        |   9 +
 .../brokerage/record/BrokerageRecordList.vue  | 266 +++++++++++++++
 .../mall/trade/brokerage/record/index.vue     | 190 +----------
 .../user/BrokerageOrderListDialog.vue         |   2 +-
 src/views/member/opentype-history/index.vue   | 314 ++++++++++++++++--
 .../user/components/UserExportDialog.vue      |  41 ++-
 .../user/detail/UserBrokerageRecordDrawer.vue |  32 ++
 .../member/user/detail/UserBrokerageTree.vue  | 110 +++++-
 src/views/member/user/detail/index.vue        |  14 +-
 .../member/user/detail/useBrokerageTree.ts    |   1 +
 src/views/member/user/index.vue               | 127 ++++++-
 tests/brokerage-record-list.test.cjs          | 271 +++++++++++++++
 tests/member-user-brokerage.test.cjs          | 252 +++++++++++++-
 tests/member-user-export.test.cjs             |  57 +++-
 17 files changed, 1539 insertions(+), 261 deletions(-)
 create mode 100644 src/views/mall/trade/brokerage/record/BrokerageRecordList.vue
 create mode 100644 src/views/member/user/detail/UserBrokerageRecordDrawer.vue
 create mode 100644 tests/brokerage-record-list.test.cjs

diff --git a/src/api/mall/trade/brokerage/record/index.ts b/src/api/mall/trade/brokerage/record/index.ts
index 7df9a225..f908bb9a 100644
--- a/src/api/mall/trade/brokerage/record/index.ts
+++ b/src/api/mall/trade/brokerage/record/index.ts
@@ -1,8 +1,43 @@
 import request from '@/config/axios'
 
+export interface BrokerageRecordVO {
+  id: number
+  userId: number
+  userAvatar?: string
+  userNickname?: string
+  sourceUserId?: number | null
+  sourceUserAvatar?: string
+  sourceUserNickname?: string
+  bizId: string
+  bizType: number
+  sourceUserLevel?: number | null
+  title: string
+  description: string
+  price: number | string
+  status: number
+  unfreezeTime?: string | number
+  createTime: string | number
+}
+
+export interface BrokerageRecordPageParams {
+  pageNo: number
+  pageSize: number
+  userId?: number | string | null
+  sourceUserId?: number | string | null
+  sourceUserLevel?: number
+  bizType?: number
+  bizId?: string
+  status?: number | null
+  createTime?: string[] | null
+  incomeOnly?: boolean
+}
+
 // 查询佣金记录列表
-export const getBrokerageRecordPage = async (params: any) => {
-  return await request.get({ url: `/trade/brokerage-record/page`, params })
+export const getBrokerageRecordPage = async (params: BrokerageRecordPageParams) => {
+  return await request.get<{ list: BrokerageRecordVO[]; total: number }>({
+    url: '/trade/brokerage-record/page',
+    params
+  })
 }
 
 // 查询佣金记录详情
diff --git a/src/api/member/opentypehistory/index.ts b/src/api/member/opentypehistory/index.ts
index fda42896..6ecaaa05 100644
--- a/src/api/member/opentypehistory/index.ts
+++ b/src/api/member/opentypehistory/index.ts
@@ -1,4 +1,42 @@
 import request from '@/config/axios'
+import type { UserExportProgress } from '@/api/member/user'
+
+export interface OpenTypeBrokerageRecipient {
+  userId: number
+  userCode?: string
+  nickname?: string
+  avatar?: string
+  memberExists: boolean
+  sourceUserLevel?: number | null
+  settledPrice: number | string
+  pendingPrice: number | string
+  cancelledPrice: number | string
+}
+
+export interface OpenTypeHistoryVO {
+  id: number
+  memberId: number
+  memberNickname?: string
+  memberUserCode?: string
+  memberAvatar?: string
+  memberMobile?: string
+  vipTitle?: string
+  vipDuration?: string
+  payPrice: number
+  payStatus: boolean | number | string
+  payTime?: string | number
+  payRefundId?: number
+  refundStatus?: number | null
+  refundPayPrice?: number
+  refundTime?: string | number
+  createTime?: string | number
+  brokerageSummary?: {
+    settledPrice: number | string
+    pendingPrice: number | string
+    cancelledPrice: number | string
+    recipients: OpenTypeBrokerageRecipient[]
+  }
+}
 
 // 会员开通记录 API
 export const OpenTypeHistoryApi = {
@@ -9,9 +47,31 @@ export const OpenTypeHistoryApi = {
     return await request.post({ url: `/member/open-type/history/admin-open`, data })
   },
   page: async (params: any) => {
-    return await request.get({ url: `/member/open-type/history/page`, params })
+    return await request.get<{ list: OpenTypeHistoryVO[]; total: number }>({
+      url: `/member/open-type/history/page`,
+      params
+    })
+  },
+  exportHistory: (params: Record<string, unknown>) => {
+    return request.post<UserExportProgress>({
+      url: '/member/open-type/history/export-async',
+      params
+    })
+  },
+  getExportProgress: (taskId: string) => {
+    return request.get<UserExportProgress>({
+      url: '/member/open-type/history/export-progress',
+      params: { taskId }
+    })
+  },
+  downloadExport: (taskId: string) => {
+    return request.download<Blob>({
+      url: '/member/open-type/history/export-download',
+      params: { taskId },
+      timeout: 300000
+    })
   },
   refund: async (params: any) => {
     return await request.get({ url: `/member/open-type/history/refund`, params })
-  },
-}
\ No newline at end of file
+  }
+}
diff --git a/src/api/member/user/index.ts b/src/api/member/user/index.ts
index 9848df8f..44c4d61c 100644
--- a/src/api/member/user/index.ts
+++ b/src/api/member/user/index.ts
@@ -1,11 +1,18 @@
 import request from '@/config/axios'
 
+export interface BrokerageIncomeSummary {
+  settledPrice: number | string
+  pendingPrice: number | string
+}
+
 export interface MemberSummary {
   id: number
   userCode?: string | null
   nickname?: string | null
   avatar?: string | null
   memberExists: boolean
+  brokerageSummary?: BrokerageIncomeSummary
+  contributionSummary?: BrokerageIncomeSummary
 }
 
 export interface UserInviterVO extends MemberSummary {
@@ -23,6 +30,7 @@ export interface UserVO {
   id: number
   userCode?: string | null
   inviter?: UserInviterVO | null
+  brokerageSummary?: BrokerageIncomeSummary
   avatar: string | undefined
   birthday: number | undefined
   createTime: number | undefined
@@ -90,6 +98,7 @@ export const getUser = async (id: number) => {
 
 export const getBrokerageChildrenPage = (params: {
   bindUserId: number
+  contributionUserId?: number
   pageNo: number
   pageSize: number
 }) => {
diff --git a/src/utils/formatter.ts b/src/utils/formatter.ts
index 8777f322..795575e7 100644
--- a/src/utils/formatter.ts
+++ b/src/utils/formatter.ts
@@ -1,5 +1,14 @@
 import { floatToFixed2 } from '@/utils'
 
+/** 累计佣金可能以 Long 字符串返回，保留整数分的完整精度。 */
+export const brokeragePriceToYuan = (price?: number | string | null): string => {
+  if (price == null) return '—'
+  const amount = BigInt(price)
+  const negative = amount < 0n
+  const digits = (negative ? -amount : amount).toString().padStart(3, '0')
+  return `${negative ? '-' : ''}${digits.slice(0, -2)}.${digits.slice(-2)}`
+}
+
 // 格式化金额【分转元】
 // @ts-ignore
 export const fenToYuanFormat = (_, __, cellValue: any, ___) => {
diff --git a/src/views/mall/trade/brokerage/record/BrokerageRecordList.vue b/src/views/mall/trade/brokerage/record/BrokerageRecordList.vue
new file mode 100644
index 00000000..ce67a665
--- /dev/null
+++ b/src/views/mall/trade/brokerage/record/BrokerageRecordList.vue
@@ -0,0 +1,266 @@
+<template>
+  <ContentWrap>
+    <el-form
+      :model="queryParams"
+      :inline="true"
+      class="-mb-15px"
+      label-width="84px"
+      @submit.prevent
+    >
+      <el-form-item v-if="fixedUserId === undefined" label="收益人编号">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入会员编号"
+          clearable
+          class="!w-200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item v-if="fixedSourceUserId === undefined" label="来源会员">
+        <el-input
+          v-model="queryParams.sourceUserId"
+          placeholder="请输入会员编号"
+          clearable
+          class="!w-200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="全部状态"
+          clearable
+          class="!w-160px"
+          :value-on-clear="undefined"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :value-on-clear="() => undefined"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+  <ContentWrap>
+    <div v-if="error" class="brokerage-record-list__error" role="alert">
+      <el-alert :title="error" type="error" :closable="false" show-icon />
+      <el-button @click="getList">重试</el-button>
+    </div>
+    <el-table
+      v-else
+      v-loading="loading"
+      :data="list"
+      stripe
+      :show-overflow-tooltip="true"
+      scrollbar-always-on
+    >
+      <el-table-column label="编号" align="center" prop="id" min-width="76" />
+      <el-table-column label="收益人" align="left" min-width="180">
+        <template #default="{ row }">
+          <div class="brokerage-record-list__member">
+            <el-avatar :src="row.userAvatar || undefined" :size="32" aria-hidden="true"
+              ><Icon icon="ep:user"
+            /></el-avatar>
+            <div
+              ><span>{{ row.userNickname || '会员资料缺失' }}</span
+              ><small>编号 {{ row.userId }}</small></div
+            >
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="来源会员" align="left" min-width="180">
+        <template #default="{ row }">
+          <div v-if="row.sourceUserId" class="brokerage-record-list__member">
+            <el-avatar :src="row.sourceUserAvatar || undefined" :size="32" aria-hidden="true"
+              ><Icon icon="ep:user"
+            /></el-avatar>
+            <div
+              ><span>{{ row.sourceUserNickname || '会员资料缺失' }}</span
+              ><small>编号 {{ row.sourceUserId }}</small></div
+            >
+          </div>
+          <span v-else>来源未知</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="业务编号" align="center" prop="bizId" min-width="110" />
+      <el-table-column v-if="showSourceLevel" label="分销层级" align="center" min-width="100">
+        <template #default="{ row }">
+          {{ row.sourceUserLevel > 0 ? `${row.sourceUserLevel}级分销` : '层级未知' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" align="center" prop="title" min-width="130" />
+      <el-table-column label="金额（元）" align="right" prop="price" min-width="110">
+        <template #default="{ row }">{{ brokeragePriceToYuan(row.price) }}</template>
+      </el-table-column>
+      <el-table-column label="说明" align="left" prop="description" min-width="180" />
+      <el-table-column label="状态" align="center" prop="status" min-width="92">
+        <template #default="{ row }"
+          ><dict-tag :type="DICT_TYPE.BROKERAGE_RECORD_STATUS" :value="row.status"
+        /></template>
+      </el-table-column>
+      <el-table-column
+        label="解冻时间"
+        align="center"
+        prop="unfreezeTime"
+        :formatter="dateFormatter"
+        width="180"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180"
+      />
+    </el-table>
+    <Pagination
+      v-if="!error"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, reactive, ref, watch } from 'vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { brokeragePriceToYuan } from '@/utils/formatter'
+import { getBrokerageRecordPage, type BrokerageRecordVO } from '@/api/mall/trade/brokerage/record'
+
+const props = defineProps<{
+  fixedUserId?: number
+  fixedSourceUserId?: number
+  defaultStatus?: number
+  fixedBizType?: number
+  fixedBizId?: string
+  showSourceLevel?: boolean
+}>()
+
+const loading = ref(false)
+const error = ref('')
+const total = ref(0)
+const list = ref<BrokerageRecordVO[]>([])
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: '',
+  sourceUserId: '',
+  status: props.defaultStatus as number | undefined,
+  createTime: [] as string[] | undefined
+})
+let requestVersion = 0
+
+async function getList() {
+  const version = ++requestVersion
+  loading.value = true
+  error.value = ''
+  list.value = []
+  try {
+    const data = await getBrokerageRecordPage({
+      pageNo: queryParams.pageNo,
+      pageSize: queryParams.pageSize,
+      userId: props.fixedUserId ?? (queryParams.userId.trim() || undefined),
+      sourceUserId: props.fixedSourceUserId ?? (queryParams.sourceUserId.trim() || undefined),
+      bizType: props.fixedBizType,
+      bizId: props.fixedBizId,
+      status: queryParams.status,
+      createTime: queryParams.createTime,
+      incomeOnly: true
+    })
+    if (version !== requestVersion) return
+    list.value = data.list
+    total.value = data.total
+  } catch {
+    if (version === requestVersion) {
+      error.value = '分销记录加载失败，请重试'
+      total.value = 0
+    }
+  } finally {
+    if (version === requestVersion) loading.value = false
+  }
+}
+
+function handleQuery() {
+  queryParams.pageNo = 1
+  void getList()
+}
+
+function resetQuery() {
+  queryParams.userId = ''
+  queryParams.sourceUserId = ''
+  queryParams.status = props.defaultStatus
+  queryParams.createTime = []
+  handleQuery()
+}
+
+watch(
+  () => [
+    props.fixedUserId,
+    props.fixedSourceUserId,
+    props.defaultStatus,
+    props.fixedBizType,
+    props.fixedBizId
+  ],
+  resetQuery,
+  {
+    immediate: true
+  }
+)
+onBeforeUnmount(() => {
+  requestVersion += 1
+})
+</script>
+
+<style scoped lang="scss">
+.brokerage-record-list {
+  &__member {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    .el-avatar {
+      flex-shrink: 0;
+    }
+    div {
+      display: grid;
+      gap: 3px;
+      min-width: 0;
+    }
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    small {
+      color: var(--el-text-color-secondary);
+      font-size: 12px;
+    }
+  }
+  &__error {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+}
+</style>
diff --git a/src/views/mall/trade/brokerage/record/index.vue b/src/views/mall/trade/brokerage/record/index.vue
index aa10c242..aae4daf8 100644
--- a/src/views/mall/trade/brokerage/record/index.vue
+++ b/src/views/mall/trade/brokerage/record/index.vue
@@ -1,196 +1,10 @@
 <template>
   <doc-alert title="【交易】分销返佣" url="https://doc.iocoder.cn/mall/trade-brokerage/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="用户编号" prop="userId">
-        <el-input
-          v-model="queryParams.userId"
-          placeholder="请输入用户编号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" min-width="60" />
-      <el-table-column label="用户编号" align="center" prop="userId" min-width="80" />
-      <el-table-column label="头像" align="center" prop="userAvatar" width="70px">
-        <template #default="scope">
-          <el-avatar :src="scope.row.userAvatar" />
-        </template>
-      </el-table-column>
-      <el-table-column label="昵称" align="center" prop="userNickname" min-width="80px" />
-      <el-table-column label="业务编号" align="center" prop="bizId" min-width="80" />
-      <el-table-column label="标题" align="center" prop="title" min-width="110" />
-      <el-table-column
-        label="金额"
-        align="center"
-        prop="price"
-        min-width="60"
-        :formatter="fenToYuanFormat"
-      />
-      <el-table-column label="说明" align="center" prop="description" min-width="120" />
-      <el-table-column label="状态" align="center" prop="status" min-width="85">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BROKERAGE_RECORD_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="解冻时间"
-        align="center"
-        prop="unfreezeTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="applyPage"
-    />
-  </ContentWrap>
+  <BrokerageRecordList />
 </template>
 
 <script setup lang="ts">
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
-import * as BrokerageRecordApi from '@/api/mall/trade/brokerage/record'
-import { fenToYuanFormat } from '@/utils/formatter'
-import { BrokerageRecordBizTypeEnum } from '@/utils/constants'
+import BrokerageRecordList from './BrokerageRecordList.vue'
 
 defineOptions({ name: 'TradeBrokerageRecord' })
-
-const loading = ref(true)
-const total = ref(0)
-const list = ref<any[]>([])
-const allCommissionList = ref<any[]>([])
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  userId: null as number | null,
-  status: null as number | null,
-  createTime: [] as string[]
-})
-const queryFormRef = ref()
-
-/** 仅保留分佣入账（排除提现申请/驳回；兼容历史 bizType 错位） */
-const isCommissionRecord = (row: any) => {
-  if (!row) return false
-  if (
-    row.bizType === BrokerageRecordBizTypeEnum.WITHDRAW.type ||
-    row.bizType === BrokerageRecordBizTypeEnum.WITHDRAW_REJECT.type
-  ) {
-    return false
-  }
-  const title = String(row.title || '')
-  const description = String(row.description || '')
-  if (title.includes('提现') || description.includes('提现')) {
-    return false
-  }
-  return Number(row.price) > 0
-}
-
-const applyPage = () => {
-  total.value = allCommissionList.value.length
-  const start = (queryParams.pageNo - 1) * queryParams.pageSize
-  list.value = allCommissionList.value.slice(start, start + queryParams.pageSize)
-}
-
-/** 查询列表：分页拉取后过滤提现，只展示分佣 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const fetchSize = 100 // 后端 PageParam 上限
-    const maxPages = 20
-    const collected: any[] = []
-    let remoteTotal = 0
-
-    for (let pageNo = 1; pageNo <= maxPages; pageNo++) {
-      const data = await BrokerageRecordApi.getBrokerageRecordPage({
-        userId: queryParams.userId,
-        status: queryParams.status,
-        createTime: queryParams.createTime,
-        pageNo,
-        pageSize: fetchSize
-      })
-      const rows = data.list || []
-      remoteTotal = data.total || 0
-      collected.push(...rows)
-      if (rows.length < fetchSize || collected.length >= remoteTotal) {
-        break
-      }
-    }
-
-    allCommissionList.value = collected.filter(isCommissionRecord)
-    // 当前页超出时回退到最后一页
-    const maxPage = Math.max(1, Math.ceil(allCommissionList.value.length / queryParams.pageSize) || 1)
-    if (queryParams.pageNo > maxPage) {
-      queryParams.pageNo = maxPage
-    }
-    applyPage()
-  } finally {
-    loading.value = false
-  }
-}
-
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-onMounted(() => {
-  getList()
-})
 </script>
diff --git a/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue b/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
index 04ad6ccf..5323604b 100644
--- a/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
+++ b/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
@@ -109,7 +109,7 @@ defineOptions({ name: 'BrokerageOrderListDialog' })
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
+const list = ref<BrokerageRecordApi.BrokerageRecordVO[]>([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
diff --git a/src/views/member/opentype-history/index.vue b/src/views/member/opentype-history/index.vue
index d6092e1c..55617c76 100644
--- a/src/views/member/opentype-history/index.vue
+++ b/src/views/member/opentype-history/index.vue
@@ -1,18 +1,101 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-      <el-form-item label="会员标题" prop="title">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="用户名" prop="memberName">
         <el-input
-v-model="queryParams.title" placeholder="请输入会员标题" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
+          v-model.trim="queryParams.memberName"
+          placeholder="请输入用户昵称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="memberMobile">
+        <el-input
+          v-model.trim="queryParams.memberMobile"
+          placeholder="请输入手机号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="充值时间" prop="payTime">
+        <el-date-picker
+          v-model="queryParams.payTime"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="退款时间" prop="refundTime">
+        <el-date-picker
+          v-model="queryParams.refundTime"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="支付状态" prop="payStatus">
+        <el-select
+          v-model="queryParams.payStatus"
+          placeholder="请选择支付状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option label="支付成功" :value="true" />
+          <el-option label="未支付" :value="false" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="退款状态" prop="refundStatus">
+        <el-select
+          v-model="queryParams.refundStatus"
+          placeholder="请选择退款状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_REFUND_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
+        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
+        <el-button
+          type="success"
+          plain
+          :loading="exportDialogRef?.submitting"
+          @click="exportDialogRef?.open(queryParams)"
+        >
+          <Icon icon="ep:download" class="mr-5px" />
+          {{ exportDialogRef?.isActive ? '查看导出进度' : '导出' }}
         </el-button>
       </el-form-item>
     </el-form>
@@ -25,6 +108,10 @@ v-model="queryParams.title" placeholder="请输入会员标题" clearable @keyup
           <div class="flex items-center gap-2">
             <PreviewImage :src="row.memberAvatar" />
             <div class="flex flex-col items-start">
+              <div class="table-cell">
+                <span>用户ID:</span>
+                <span>{{ row.memberUserCode || '—' }}</span>
+              </div>
               <div class="table-cell">
                 <span>昵称:</span>
                 <span>{{ row.memberNickname }}</span>
@@ -51,6 +138,71 @@ v-model="queryParams.title" placeholder="请输入会员标题" clearable @keyup
           <span>{{ fenToYuan(row.payPrice) }}元</span>
         </template>
       </el-table-column>
+      <el-table-column
+        label="本单分销收益（元）"
+        min-width="360px"
+        align="center"
+        :show-overflow-tooltip="false"
+      >
+        <template #default="{ row }">
+          <div v-if="row.brokerageSummary" class="open-type-brokerage">
+            <div class="open-type-brokerage__totals">
+              <span
+                >已结算
+                <strong>{{ brokeragePriceToYuan(row.brokerageSummary.settledPrice) }}</strong></span
+              >
+              <span>待结算 {{ brokeragePriceToYuan(row.brokerageSummary.pendingPrice) }}</span>
+              <span v-if="Number(row.brokerageSummary.cancelledPrice) > 0">
+                已取消 {{ brokeragePriceToYuan(row.brokerageSummary.cancelledPrice) }}
+              </span>
+            </div>
+            <div
+              v-for="recipient in row.brokerageSummary.recipients"
+              :key="`${recipient.userId}-${recipient.sourceUserLevel}`"
+              class="open-type-brokerage__recipient"
+            >
+              <el-avatar :src="recipient.avatar || undefined" :size="30" aria-hidden="true">
+                <Icon icon="ep:user" />
+              </el-avatar>
+              <div class="open-type-brokerage__member">
+                <span>{{
+                  recipient.memberExists ? recipient.nickname || '未设置昵称' : '会员资料缺失'
+                }}</span>
+                <small>
+                  ID {{ recipient.userCode || recipient.userId }} ·
+                  {{
+                    Number(recipient.sourceUserLevel) > 0
+                      ? `${recipient.sourceUserLevel}级分销`
+                      : '层级未知'
+                  }}
+                </small>
+              </div>
+              <div class="open-type-brokerage__amounts">
+                <span>已结算 {{ brokeragePriceToYuan(recipient.settledPrice) }}</span>
+                <span v-if="Number(recipient.pendingPrice) > 0"
+                  >待结算 {{ brokeragePriceToYuan(recipient.pendingPrice) }}</span
+                >
+                <span v-if="Number(recipient.cancelledPrice) > 0"
+                  >已取消 {{ brokeragePriceToYuan(recipient.cancelledPrice) }}</span
+                >
+              </div>
+            </div>
+            <span v-if="!row.brokerageSummary.recipients.length" class="open-type-brokerage__empty"
+              >未产生佣金</span
+            >
+            <el-button
+              v-hasPermi="['trade:brokerage-record:query']"
+              link
+              type="primary"
+              :aria-label="`查看开通记录${row.id}的分销明细`"
+              @click="openBrokerageDetails(row)"
+            >
+              分销明细
+            </el-button>
+          </div>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
       <el-table-column label="支付相关" width="300px" align="center">
         <template #default="{ row }">
           <div class="flex flex-col items-start">
@@ -92,6 +244,11 @@ v-model="queryParams.title" placeholder="请输入会员标题" clearable @keyup
           </div>
         </template>
       </el-table-column>
+      <el-table-column label="创建时间" prop="createTime" width="180px" align="center">
+        <template #default="{ row }">
+          {{ row.createTime ? formatDate(row.createTime) : '—' }}
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="{ row }">
           <el-button
@@ -107,30 +264,80 @@ v-model="queryParams.title" placeholder="请输入会员标题" clearable @keyup
     </el-table>
     <!-- 分页 -->
     <Pagination
-:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
   </ContentWrap>
+  <UserExportDialog
+    ref="exportDialogRef"
+    record-name="会员开通记录"
+    storage-prefix="member-open-type-history-export"
+    :export-api="historyExportApi"
+  />
+  <el-drawer
+    v-model="brokerageDetailsVisible"
+    title="会员开通分销明细"
+    size="min(1320px, 94vw)"
+    destroy-on-close
+  >
+    <template v-if="selectedBrokerageOrder && brokerageDetailsVisible">
+      <p class="open-type-brokerage-order">
+        开通记录 {{ selectedBrokerageOrder.id }} ·
+        {{ selectedBrokerageOrder.memberNickname || '会员资料缺失' }} · 支付
+        {{ fenToYuan(selectedBrokerageOrder.payPrice) }} 元
+      </p>
+      <BrokerageRecordList
+        :key="selectedBrokerageOrder.id"
+        :fixed-biz-type="2"
+        :fixed-biz-id="String(selectedBrokerageOrder.id)"
+        show-source-level
+      />
+    </template>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { fenToYuan } from "@/utils/index"
+import { fenToYuan } from '@/utils/index'
 import { formatDate } from '@/utils/formatTime'
-import { DICT_TYPE } from '@/utils/dict'
-import * as OpenTypeHistoryApi from '@/api/member/opentypehistory'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { brokeragePriceToYuan } from '@/utils/formatter'
+import { OpenTypeHistoryApi, type OpenTypeHistoryVO } from '@/api/member/opentypehistory'
+import UserExportDialog from '@/views/member/user/components/UserExportDialog.vue'
+import BrokerageRecordList from '@/views/mall/trade/brokerage/record/BrokerageRecordList.vue'
 
 const message = useMessage()
 
 const queryFormRef = ref()
+const exportDialogRef = ref<InstanceType<typeof UserExportDialog>>()
+const historyExportApi = {
+  create: OpenTypeHistoryApi.exportHistory,
+  progress: OpenTypeHistoryApi.getExportProgress,
+  download: OpenTypeHistoryApi.downloadExport
+}
 
 const loading = ref(true)
-const list = ref<Array<any>>([])
+const list = ref<OpenTypeHistoryVO[]>([])
 const total = ref(0)
+const brokerageDetailsVisible = ref(false)
+const selectedBrokerageOrder = ref<OpenTypeHistoryVO>()
+
+const openBrokerageDetails = (row: OpenTypeHistoryVO) => {
+  selectedBrokerageOrder.value = row
+  brokerageDetailsVisible.value = true
+}
 
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  title: "",
-  createTime: []
+  memberName: '',
+  memberMobile: '',
+  payTime: [] as string[],
+  createTime: [] as string[],
+  refundTime: [] as string[],
+  payStatus: undefined as boolean | undefined,
+  refundStatus: undefined as number | undefined
 })
 
 /** bit(1) 映射异常时，以支付时间为准 */
@@ -143,14 +350,14 @@ const isPaid = (row: any) => {
 // 退款
 const handleRefund = async (row: any) => {
   try {
-    console.log(row);
+    console.log(row)
     await message.confirm('是否确认退款？')
-    await OpenTypeHistoryApi.OpenTypeHistoryApi.refund({ id: row.id })
+    await OpenTypeHistoryApi.refund({ id: row.id })
     message.success('退款成功')
     getList()
   } catch (error) {
-    console.log("|退款|,以外的错误error:", error);
-    message.error("退款失败")
+    console.log('|退款|,以外的错误error:', error)
+    message.error('退款失败')
   }
 }
 
@@ -170,7 +377,7 @@ const resetQuery = () => {
 const getList = async () => {
   loading.value = true
   try {
-    const data = await OpenTypeHistoryApi.OpenTypeHistoryApi.page(queryParams)
+    const data = await OpenTypeHistoryApi.page(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -184,6 +391,67 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.open-type-brokerage {
+  display: grid;
+  gap: 8px;
+  text-align: left;
+  font-size: 12px;
+
+  &__totals {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+
+    strong {
+      color: var(--el-color-primary);
+    }
+  }
+
+  &__recipient {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+
+  &__member {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    small {
+      color: var(--el-text-color-secondary);
+    }
+  }
+
+  &__amounts {
+    display: grid;
+    flex-shrink: 0;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__empty {
+    color: var(--el-text-color-secondary);
+  }
+
+  .el-button {
+    justify-self: start;
+  }
+}
+
+.open-type-brokerage-order {
+  margin: 0 0 16px;
+  color: var(--el-text-color-regular);
+}
+
 .table-cell {
   display: flex;
   justify-content: flex-start;
@@ -204,4 +472,4 @@ onMounted(() => {
     color: lightblue;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/member/user/components/UserExportDialog.vue b/src/views/member/user/components/UserExportDialog.vue
index e09c9d69..0b2ff2f0 100644
--- a/src/views/member/user/components/UserExportDialog.vue
+++ b/src/views/member/user/components/UserExportDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     v-model="visible"
-    title="会员用户导出"
+    :title="`${recordName}导出`"
     width="560px"
     :close-on-click-modal="false"
     append-to-body
@@ -13,8 +13,8 @@
           <Icon icon="ep:document" :size="22" />
         </span>
         <div>
-          <h2>会员用户导出</h2>
-          <p>按点击导出时的搜索条件导出全部匹配用户</p>
+          <h2>{{ recordName }}导出</h2>
+          <p>按点击导出时的搜索条件导出全部匹配{{ recordName }}</p>
         </div>
       </div>
     </template>
@@ -54,7 +54,7 @@
             :status="progressStatus"
             :stroke-width="8"
             :show-text="false"
-            :aria-label="`会员用户导出进度 ${task.progress}%`"
+            :aria-label="`${recordName}导出进度 ${task.progress}%`"
           />
           <div class="export-count">
             <span
@@ -67,9 +67,7 @@
       <div v-if="isActive || task?.status === 'SUCCESS'" class="export-hint">
         <Icon icon="ep:info-filled" :size="15" aria-hidden="true" />
         <p v-if="isActive"> 关闭弹窗后任务继续，可点击“查看导出进度”重新打开。 </p>
-        <p v-else-if="task?.status === 'SUCCESS'">
-          临时导出文件，请及时下载；失效后可重新导出。
-        </p>
+        <p v-else-if="task?.status === 'SUCCESS'"> 临时导出文件，请及时下载；失效后可重新导出。 </p>
       </div>
       <el-alert
         v-if="errorMessage"
@@ -112,6 +110,17 @@ import download from '@/utils/download'
 import { getTenantId } from '@/utils/auth'
 import { useUserStore } from '@/store/modules/user'
 
+const props = defineProps<{
+  recordName?: string
+  storagePrefix?: string
+  exportApi?: {
+    create: typeof UserApi.exportUsers
+    progress: typeof UserApi.getUserExportProgress
+    download: typeof UserApi.downloadUserExport
+  }
+}>()
+
+const recordName = computed(() => props.recordName ?? '会员用户')
 const visible = ref(false)
 const submitting = ref(false)
 const downloading = ref(false)
@@ -120,7 +129,7 @@ const errorMessage = ref('')
 const pollFailed = ref(false)
 const existingTask = ref(false)
 const userStore = useUserStore()
-const storageKey = `member-user-export:${getTenantId() ?? ''}:${userStore.getUser.id}`
+const storageKey = `${props.storagePrefix ?? 'member-user-export'}:${getTenantId() ?? ''}:${userStore.getUser.id}`
 const isActive = computed(
   () => task.value?.status === 'WAITING' || task.value?.status === 'RUNNING'
 )
@@ -135,7 +144,7 @@ const statusTitle = computed(() => {
   if (task.value?.status === 'SUCCESS') return '导出已完成'
   if (task.value?.status === 'FAILURE') return '导出未完成'
   if (task.value?.status === 'WAITING') return '等待开始导出'
-  return '正在导出用户数据'
+  return `正在导出${recordName.value}数据`
 })
 const statusIcon = computed(() => {
   if (submitting.value) return 'ep:loading'
@@ -171,8 +180,10 @@ const downloadFile = async () => {
   downloading.value = true
   errorMessage.value = ''
   try {
-    const data = await UserApi.downloadUserExport(downloadTask.taskId)
-    download.excel(data, downloadTask.fileName || '会员用户.xlsx')
+    const data = await (props.exportApi?.download ?? UserApi.downloadUserExport)(
+      downloadTask.taskId
+    )
+    download.excel(data, downloadTask.fileName || `${recordName.value}.xlsx`)
   } catch {
     errorMessage.value = '文件已生成，下载失败，请点击“下载 Excel”重试。'
     visible.value = true
@@ -184,7 +195,9 @@ const downloadFile = async () => {
 const poll = async (version: number) => {
   if (!task.value || !activePage || version !== pollingVersion) return
   try {
-    const data = await UserApi.getUserExportProgress(task.value.taskId)
+    const data = await (props.exportApi?.progress ?? UserApi.getUserExportProgress)(
+      task.value.taskId
+    )
     if (!activePage || version !== pollingVersion) return
     task.value = data
     pollFailed.value = false
@@ -221,7 +234,7 @@ const submitExport = async () => {
   pollFailed.value = false
   errorMessage.value = ''
   try {
-    const data = await UserApi.exportUsers(querySnapshot)
+    const data = await (props.exportApi?.create ?? UserApi.exportUsers)(querySnapshot)
     if (!data?.taskId) throw new Error('导出任务编号为空')
     task.value = data
     existingTask.value = data.existingTask
@@ -238,7 +251,7 @@ const submitExport = async () => {
 const open = async (params: Record<string, unknown>) => {
   visible.value = true
   if (submitting.value) return
-  // 从同一个 search-form 对象拍下快照，只去掉分页；保留男/女页面固定的性别条件。
+  // 拷贝当前搜索条件，去掉分页参数并保留数组和零值条件。
   querySnapshot = Object.fromEntries(
     Object.entries(params)
       .filter(([key]) => key !== 'pageNo' && key !== 'pageSize')
diff --git a/src/views/member/user/detail/UserBrokerageRecordDrawer.vue b/src/views/member/user/detail/UserBrokerageRecordDrawer.vue
new file mode 100644
index 00000000..1cedbb16
--- /dev/null
+++ b/src/views/member/user/detail/UserBrokerageRecordDrawer.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-drawer v-model="visible" :title="title" size="min(1320px, 94vw)" destroy-on-close>
+    <BrokerageRecordList
+      v-if="visible && userId !== undefined"
+      :key="contextVersion"
+      :fixed-user-id="userId"
+      :fixed-source-user-id="sourceUserId"
+      :default-status="1"
+    />
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import BrokerageRecordList from '@/views/mall/trade/brokerage/record/BrokerageRecordList.vue'
+
+const visible = ref(false)
+const title = ref('分销收益记录')
+const userId = ref<number>()
+const sourceUserId = ref<number>()
+const contextVersion = ref(0)
+
+function open(options: { userId: number; sourceUserId?: number; title: string }) {
+  userId.value = options.userId
+  sourceUserId.value = options.sourceUserId
+  title.value = options.title
+  contextVersion.value += 1
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/views/member/user/detail/UserBrokerageTree.vue b/src/views/member/user/detail/UserBrokerageTree.vue
index 201b67f9..ddf6e6bd 100644
--- a/src/views/member/user/detail/UserBrokerageTree.vue
+++ b/src/views/member/user/detail/UserBrokerageTree.vue
@@ -3,7 +3,7 @@
     <div class="brokerage-tree__toolbar">
       <div>
         <h3>分销关系</h3>
-        <p>查看直接邀请人，逐层展开下级会员</p>
+        <p>收益按已结算累计，贡献以当前会员为收益人</p>
       </div>
       <div class="brokerage-tree__tools">
         <span class="brokerage-tree__legend"><i aria-hidden="true"></i>当前会员</span>
@@ -60,6 +60,38 @@
                 <span>ID {{ data.member.userCode || data.member.id }}</span>
               </div>
             </div>
+            <div class="brokerage-tree__amounts nodrag nopan">
+              <div class="brokerage-tree__amount">
+                <div class="brokerage-tree__amount-heading">
+                  <span>分销收益</span>
+                  <el-button
+                    v-hasPermi="['trade:brokerage-record:query']"
+                    link
+                    type="primary"
+                    size="small"
+                    @click="openRecords(data, 'income')"
+                    >收益记录</el-button
+                  >
+                </div>
+                <strong>{{ priceText(data.member.brokerageSummary?.settledPrice) }}</strong>
+                <small>待结算 {{ priceText(data.member.brokerageSummary?.pendingPrice) }}</small>
+              </div>
+              <div v-if="data.role !== 'current'" class="brokerage-tree__amount">
+                <div class="brokerage-tree__amount-heading">
+                  <span>为当前会员贡献</span>
+                  <el-button
+                    v-hasPermi="['trade:brokerage-record:query']"
+                    link
+                    type="primary"
+                    size="small"
+                    @click="openRecords(data, 'contribution')"
+                    >贡献记录</el-button
+                  >
+                </div>
+                <strong>{{ priceText(data.member.contributionSummary?.settledPrice) }}</strong>
+                <small>待结算 {{ priceText(data.member.contributionSummary?.pendingPrice) }}</small>
+              </div>
+            </div>
             <div class="brokerage-tree__meta" aria-live="polite" :title="bindingTime(data)">
               <span v-if="data.branch?.error" class="brokerage-tree__error">{{
                 data.branch.error
@@ -181,11 +213,12 @@
     <p v-if="root" class="brokerage-tree__hint"
       >滚轮缩放，拖动画布移动。每个分支每次加载 20 人，悬停时钟查看绑定时间。</p
     >
+    <UserBrokerageRecordDrawer ref="recordDrawerRef" />
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, toRef, useId, watch } from 'vue'
+import { computed, nextTick, ref, toRef, useId, watch } from 'vue'
 import {
   VueFlow,
   Handle,
@@ -209,7 +242,9 @@ import { graphlib, layout as layoutGraph } from '@dagrejs/dagre'
 import type { UserVO } from '@/api/member/user'
 import { CommonStatusEnum } from '@/utils/constants'
 import { formatDate } from '@/utils/formatTime'
+import { brokeragePriceToYuan } from '@/utils/formatter'
 import { useBrokerageTree, type BrokerageTreeNode } from './useBrokerageTree'
+import UserBrokerageRecordDrawer from './UserBrokerageRecordDrawer.vue'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 import '@vue-flow/controls/dist/style.css'
@@ -220,16 +255,21 @@ const { root, graph, refreshing, refreshError, hasMore, loadChildren, toggleBran
 const flowId = `member-brokerage-${useId()}`
 const { fitView, zoomIn, zoomOut, onNodesInitialized } = useVueFlow({ id: flowId })
 const { push } = useRouter()
+const recordDrawerRef = ref<InstanceType<typeof UserBrokerageRecordDrawer>>()
 const roleLabels = { inviter: '直接邀请人', current: '当前会员', child: '下级会员' }
-const NODE_WIDTH = 248
-const NODE_HEIGHT = 174
+const NODE_WIDTH = 312
+const NODE_HEIGHT = 322
+const CURRENT_NODE_HEIGHT = 244
 
 const layout = computed(() => {
   const tree = new graphlib.Graph()
   tree.setGraph({ rankdir: 'TB', nodesep: 28, ranksep: 64, marginx: 24, marginy: 24 })
   tree.setDefaultEdgeLabel(() => ({}))
-  graph.value.nodes.forEach(({ member }) =>
-    tree.setNode(String(member.id), { width: NODE_WIDTH, height: NODE_HEIGHT })
+  graph.value.nodes.forEach(({ member, role }) =>
+    tree.setNode(String(member.id), {
+      width: NODE_WIDTH,
+      height: role === 'current' ? CURRENT_NODE_HEIGHT : NODE_HEIGHT
+    })
   )
   graph.value.edges.forEach(({ source, target }) => tree.setEdge(String(source), String(target)))
   layoutGraph(tree)
@@ -242,7 +282,10 @@ const layout = computed(() => {
       sourcePosition: Position.Bottom,
       targetPosition: Position.Top,
       style: { pointerEvents: 'all' },
-      position: { x: position.x - NODE_WIDTH / 2, y: position.y - NODE_HEIGHT / 2 },
+      position: {
+        x: position.x - NODE_WIDTH / 2,
+        y: position.y - (data.role === 'current' ? CURRENT_NODE_HEIGHT : NODE_HEIGHT) / 2
+      },
       ariaLabel: `${roleLabels[data.role]} ${data.member.nickname || data.member.id}`
     }
   })
@@ -269,6 +312,24 @@ function openDetail(id: number) {
   push({ name: 'MemberUserDetail', params: { id } })
 }
 
+function priceText(price: number | string | undefined) {
+  const amount = brokeragePriceToYuan(price)
+  return amount === '—' ? amount : `￥${amount}`
+}
+
+function openRecords(data: BrokerageTreeNode, mode: 'income' | 'contribution') {
+  if (!root.value) return
+  const name = data.member.nickname || `会员 ${data.member.id}`
+  recordDrawerRef.value?.open({
+    userId: mode === 'income' ? data.member.id : root.value.id,
+    sourceUserId: mode === 'contribution' ? data.member.id : undefined,
+    title:
+      mode === 'income'
+        ? `${name}的分销收益记录（编号 ${data.member.id}）`
+        : `${name}为当前会员贡献的记录（${data.member.id} → ${root.value.id}）`
+  })
+}
+
 async function fitTree() {
   await nextTick()
   if (props.active) await fitView({ padding: 0.18, maxZoom: 1, duration: 0 })
@@ -332,7 +393,7 @@ watch(
   }
 
   &__canvas {
-    height: 520px;
+    height: 640px;
     margin-top: 12px;
     border: 1px solid var(--el-border-color-light);
     border-radius: 8px;
@@ -345,8 +406,8 @@ watch(
     flex-direction: column;
     justify-content: space-between;
     box-sizing: border-box;
-    width: 248px;
-    height: 174px;
+    width: 312px;
+    height: 322px;
     padding: 14px;
     border: 1px solid var(--el-border-color);
     border-radius: 8px;
@@ -355,6 +416,7 @@ watch(
     font-size: 12px;
 
     &--current {
+      height: 244px;
       border: 2px solid var(--el-color-primary);
       padding: 13px;
     }
@@ -395,6 +457,34 @@ watch(
     gap: 8px;
     color: var(--el-text-color-regular);
   }
+  &__amounts {
+    display: grid;
+    gap: 8px;
+  }
+  &__amount {
+    display: grid;
+    gap: 3px;
+    padding-top: 8px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+  &__amount-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 22px;
+    color: var(--el-text-color-regular);
+  }
+  &__amount strong {
+    font-size: 16px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+  }
+  &__amount small {
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
   &__time {
     display: flex;
     padding: 2px;
diff --git a/src/views/member/user/detail/index.vue b/src/views/member/user/detail/index.vue
index 7e89b1c2..d0ab23dd 100644
--- a/src/views/member/user/detail/index.vue
+++ b/src/views/member/user/detail/index.vue
@@ -88,7 +88,7 @@
   <UserForm ref="formRef" @success="getUserData(id)" />
 </template>
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, onActivated, watch } from 'vue'
 import * as WalletApi from '@/api/pay/wallet/balance'
 import * as UserApi from '@/api/member/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -143,6 +143,18 @@ const { currentRoute } = useRouter() // 路由
 const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
 const id = route.params.id
+
+const syncDetailTab = () => {
+  if (
+    route.name === 'MemberUserDetail' &&
+    String(route.params.id) === String(id) &&
+    route.query.tab === 'brokerage'
+  ) {
+    activeDetailTab.value = 'brokerage'
+  }
+}
+watch(() => route.query.tab, syncDetailTab, { immediate: true })
+onActivated(syncDetailTab)
 /* 用户钱包相关信息 */
 const WALLET_INIT_DATA = {
   balance: 0,
diff --git a/src/views/member/user/detail/useBrokerageTree.ts b/src/views/member/user/detail/useBrokerageTree.ts
index dc62d612..a40c62f6 100644
--- a/src/views/member/user/detail/useBrokerageTree.ts
+++ b/src/views/member/user/detail/useBrokerageTree.ts
@@ -54,6 +54,7 @@ export function useBrokerageTree(user: Ref<UserVO | null | undefined>) {
     try {
       const page = await UserApi.getBrokerageChildrenPage({
         bindUserId: id,
+        contributionUserId: root.value?.id,
         pageNo: branch.pageNo + 1,
         pageSize: PAGE_SIZE
       })
diff --git a/src/views/member/user/index.vue b/src/views/member/user/index.vue
index 0d470d98..7497a8f7 100644
--- a/src/views/member/user/index.vue
+++ b/src/views/member/user/index.vue
@@ -3,7 +3,7 @@
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" :rules="queryRules" class="-mb-15px" label-width="68px" @submit.prevent>
       <el-form-item label="用户昵称" prop="nickname">
         <el-input v-model="queryParams.nickname" class="!w-240px" clearable placeholder="请输入用户昵称"
           @keyup.enter="handleQuery" />
@@ -54,6 +54,15 @@
           class="!w-240px" end-placeholder="结束日期" start-placeholder="开始日期" type="daterange"
           value-format="YYYY-MM-DD HH:mm:ss" />
       </el-form-item>
+      <el-form-item label="分销收益（元）" prop="brokerageRange" label-width="110px">
+        <div class="member-user-income-range">
+          <el-input v-model.trim="queryParams.brokerageRange[0]" clearable inputmode="decimal"
+            placeholder="最低金额" aria-label="最低分销收益，单位元" @keyup.enter="handleQuery" />
+          <span>至</span>
+          <el-input v-model.trim="queryParams.brokerageRange[1]" clearable inputmode="decimal"
+            placeholder="最高金额" aria-label="最高分销收益，单位元" @keyup.enter="handleQuery" />
+        </div>
+      </el-form-item>
       <el-form-item v-if="false" label="用户等级" prop="levelId">
         <MemberLevelSelect v-model="queryParams.levelId" />
       </el-form-item>
@@ -70,7 +79,7 @@
           重置
         </el-button>
         <el-button v-hasPermi="['member:user:query']" type="success" plain :loading="exportDialogRef?.submitting"
-          @click="exportDialogRef?.open(queryParams)">
+          @click="handleExport">
           <Icon class="mr-5px" icon="ep:download" />
           {{ exportDialogRef?.isActive ? '查看导出进度' : '导出' }}
         </el-button>
@@ -81,10 +90,13 @@
 
   <!-- 列表 -->
   <ContentWrap class="member-user-list">
+    <el-alert v-if="listError" :title="listError" type="error" :closable="false" show-icon class="mb-12px">
+      <el-button link type="primary" @click="getList">重试</el-button>
+    </el-alert>
     <el-table v-loading="loading" class="member-user-table" :data="list" :show-overflow-tooltip="false" :stripe="true"
       border flexible scrollbar-always-on :scrollbar-tabindex="0" table-layout="fixed"
       @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
+      <el-table-column align="center" type="selection" width="55" />
       <el-table-column align="center" label="用户编号" prop="id" width="84px" />
       <el-table-column align="center" label="用户ID" prop="userCode" width="84px" />
       <el-table-column align="center" label="性别" prop="sex" width="76px">
@@ -94,7 +106,7 @@
       </el-table-column>
       <el-table-column align="center" label="头像" prop="avatar" width="76px">
         <template #default="{ row }">
-          <div class="w-[50px] h-[50px]">
+          <div class="mx-auto w-[50px] h-[50px]">
             <PreviewImage :src="row.avatar" />
           </div>
         </template>
@@ -157,6 +169,16 @@
           <span v-else>—</span>
         </template>
       </el-table-column>
+      <el-table-column align="center" label="分销收益（元）" min-width="148px">
+        <template #default="{ row }">
+          <el-button v-if="row.brokerageSummary?.settledPrice != null" link type="primary"
+            class="member-user-income-link" :aria-label="`查看会员${row.nickname || row.userCode || row.id}的分销关系`"
+            @click="openBrokerageDetail(row.id)">
+            {{ brokeragePriceToYuan(row.brokerageSummary.settledPrice) }}
+          </el-button>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="时间" min-width="256px">
         <template #default="{ row }">
           <div class="member-user-times">
@@ -209,7 +231,7 @@
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
+    <Pagination v-if="!listError" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
       @pagination="getList" />
   </ContentWrap>
 
@@ -228,6 +250,8 @@
   <UserOpenVipForm ref="userOpenVipFormRef" @success="getList" />
 </template>
 <script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { brokeragePriceToYuan } from '@/utils/formatter'
 import { formatDate } from '@/utils/formatTime'
 import * as UserApi from '@/api/member/user'
 import * as AreaApi from '@/api/system/area'
@@ -252,6 +276,8 @@ const props = defineProps<{ sex?: number }>()
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
+const listError = ref('')
+let listVersion = 0
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
 const queryParams = reactive({
@@ -267,10 +293,32 @@ const queryParams = reactive({
   loginDate: [],
   createTime: [],
   memberRecentTagList: [] as string[],
+  brokerageRange: ['', ''] as [string, string],
   levelId: null,
   groupId: null
 })
-const queryFormRef = ref() // 搜索的表单
+const queryFormRef = ref<FormInstance>() // 搜索的表单
+const queryRules: FormRules = {
+  brokerageRange: [{
+    validator: (_rule, range, callback) => {
+      const amounts = range as [string, string]
+      if (amounts.some((amount) => amount !== '' && !/^\d+(?:\.\d{1,2})?$/.test(amount))) {
+        callback(new Error('请输入非负金额，最多两位小数'))
+        return
+      }
+      const prices = amounts.map(getBrokeragePrice)
+      const [min, max] = prices
+      if (prices.some((price) => price !== undefined && BigInt(price) > 9223372036854775807n)) {
+        callback(new Error('分销收益金额超出范围'))
+      } else if (min !== undefined && max !== undefined && BigInt(min) > BigInt(max)) {
+        callback(new Error('最低收益不能大于最高收益'))
+      } else {
+        callback()
+      }
+    },
+    trigger: 'change'
+  }]
+}
 const exportDialogRef = ref<InstanceType<typeof UserExportDialog>>()
 const areaList = ref([]) // 省市区列表
 const updateLevelFormRef = ref() // 修改会员等级表单
@@ -279,18 +327,46 @@ const updateMemberTagFormRef = ref() // 修改用户标签表单
 const userOpenVipFormRef = ref() // 开通会员
 const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
 
+const getBrokeragePrice = (amount: string): string | undefined => {
+  if (amount === '') return undefined
+  const [yuan, fen = ''] = amount.split('.')
+  return (BigInt(yuan) * 100n + BigInt(fen.padEnd(2, '0'))).toString()
+}
+
+const getQueryParams = () => {
+  const { brokerageRange, ...params } = queryParams
+  return {
+    ...params,
+    brokeragePriceMin: getBrokeragePrice(brokerageRange[0]),
+    brokeragePriceMax: getBrokeragePrice(brokerageRange[1])
+  }
+}
+
 /** 查询列表 */
 const getList = async () => {
+  if (!(await queryFormRef.value?.validate().catch(() => false))) return
+  const version = ++listVersion
   loading.value = true
+  listError.value = ''
   try {
-    const data = await UserApi.getUserPage(queryParams)
+    const data = await UserApi.getUserPage(getQueryParams())
+    if (version !== listVersion) return
     list.value = data.list
     total.value = data.total
+  } catch {
+    if (version !== listVersion) return
+    list.value = []
+    listError.value = '会员列表加载失败，请重试'
   } finally {
-    loading.value = false
+    if (version === listVersion) loading.value = false
   }
 }
 
+const handleExport = async () => {
+  if (!(await queryFormRef.value?.validate().catch(() => false))) return
+  exportDialogRef.value?.open(getQueryParams())
+}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -299,7 +375,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
   handleQuery()
 }
 
@@ -309,6 +385,10 @@ const openDetail = (id: number) => {
   push({ name: 'MemberUserDetail', params: { id } })
 }
 
+const openBrokerageDetail = (id: number) => {
+  push({ name: 'MemberUserDetail', params: { id }, query: { tab: 'brokerage' } })
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -380,6 +460,16 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+.member-user-income-range {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  :deep(.el-input) {
+    width: 112px;
+  }
+}
+
 .member-user-list {
   width: 100%;
   max-width: 100%;
@@ -434,16 +524,17 @@ onMounted(async () => {
 .member-user-addresses {
   display: grid;
   gap: 4px;
-  text-align: left;
+  text-align: center;
 }
 
 .member-user-times {
   display: grid;
   gap: 4px;
-  text-align: left;
+  text-align: center;
 
   >div {
     display: flex;
+    justify-content: center;
     gap: 4px;
     white-space: nowrap;
   }
@@ -466,13 +557,14 @@ onMounted(async () => {
   width: 100%;
   gap: 10px;
   align-items: center;
+  justify-content: center;
   padding: 4px;
   border: 0;
   border-radius: 4px;
   color: var(--el-text-color-primary);
   background: transparent;
   font: inherit;
-  text-align: left;
+  text-align: center;
 
   .el-avatar {
     flex-shrink: 0;
@@ -504,6 +596,17 @@ onMounted(async () => {
   }
 }
 
+.member-user-income-link {
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--el-color-primary);
+    outline-offset: 2px;
+  }
+}
+
 .switch-cell {
   display: flex;
   justify-content: center;
diff --git a/tests/brokerage-record-list.test.cjs b/tests/brokerage-record-list.test.cjs
new file mode 100644
index 00000000..4bcbe30a
--- /dev/null
+++ b/tests/brokerage-record-list.test.cjs
@@ -0,0 +1,271 @@
+const { test } = require('node:test')
+const assert = require('node:assert/strict')
+const fs = require('node:fs')
+const path = require('node:path')
+const vm = require('node:vm')
+const ts = require('typescript')
+const vue = require('vue')
+const { parse, compileTemplate } = require('vue/compiler-sfc')
+
+const filename = path.join(
+  __dirname,
+  '../src/views/mall/trade/brokerage/record/BrokerageRecordList.vue'
+)
+const { descriptor } = parse(fs.readFileSync(filename, 'utf8'))
+const script = ts.transpileModule(descriptor.scriptSetup.content, {
+  compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS }
+}).outputText
+const flush = async () => {
+  await vue.nextTick()
+  for (let index = 0; index < 8; index++) await Promise.resolve()
+}
+const deferred = () => {
+  let resolve
+  const promise = new Promise((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+function harness(initialProps = {}, fetch = async () => ({ list: [], total: 0 })) {
+  const props = vue.reactive(initialProps)
+  const calls = []
+  let unmount
+  const runtimeVue = {
+    ...vue,
+    onBeforeUnmount: (fn) => {
+      unmount = fn
+    }
+  }
+  const api = { fetch }
+  const context = {
+    exports: {},
+    defineProps: () => props,
+    require: (name) => {
+      if (name === 'vue') return runtimeVue
+      if (name === '@/api/mall/trade/brokerage/record') {
+        return {
+          getBrokerageRecordPage: (query) => {
+            calls.push({ ...query })
+            return api.fetch(query)
+          }
+        }
+      }
+      throw new Error(`Unexpected import ${name}`)
+    }
+  }
+  const scope = vue.effectScope()
+  scope.run(() =>
+    vm.runInNewContext(
+      script +
+        '\nglobalThis.state = { queryParams, list, total, loading, error, getList, resetQuery, handleQuery };',
+      context
+    )
+  )
+  return {
+    ...context,
+    api,
+    calls,
+    props,
+    stop: () => {
+      unmount()
+      scope.stop()
+    }
+  }
+}
+
+test('共享分销记录列表、抽屉与会员开通记录模板可编译', () => {
+  for (const file of [
+    filename,
+    path.join(__dirname, '../src/views/member/user/detail/UserBrokerageRecordDrawer.vue'),
+    path.join(__dirname, '../src/views/member/opentype-history/index.vue')
+  ]) {
+    const { descriptor: component } = parse(fs.readFileSync(file, 'utf8'))
+    assert.deepEqual(
+      compileTemplate({ source: component.template.content, filename: file, id: 'records' }).errors,
+      []
+    )
+  }
+})
+
+test('开通订单明细固定业务类型与业务编号，重置和切换订单均保留正确范围', async () => {
+  const h = harness({ fixedBizType: 2, fixedBizId: '100', showSourceLevel: true })
+  await flush()
+  assert.equal(h.calls[0].bizType, 2)
+  assert.equal(h.calls[0].bizId, '100')
+  assert.equal(h.calls[0].status, undefined)
+  assert.equal(h.calls[0].incomeOnly, true)
+  h.state.queryParams.status = 2
+  h.state.queryParams.pageNo = 3
+  await h.state.getList()
+  assert.equal(h.calls.at(-1).bizId, '100')
+  assert.equal(h.calls.at(-1).status, 2)
+  h.state.resetQuery()
+  await flush()
+  assert.equal(h.calls.at(-1).bizType, 2)
+  assert.equal(h.calls.at(-1).bizId, '100')
+  assert.equal(h.calls.at(-1).pageNo, 1)
+  assert.equal(h.calls.at(-1).status, undefined)
+  h.props.fixedBizId = '101'
+  await flush()
+  assert.equal(h.calls.at(-1).bizId, '101')
+  assert.equal(h.calls.at(-1).bizType, 2)
+  h.stop()
+})
+
+test('快速切换开通订单时忽略上一单的佣金响应', async () => {
+  const old = deferred()
+  const h = harness({ fixedBizType: 2, fixedBizId: '100' }, ({ bizId }) =>
+    bizId === '100' ? old.promise : Promise.resolve({ list: [{ id: 20, bizId: '101' }], total: 1 })
+  )
+  h.props.fixedBizId = '101'
+  await flush()
+  old.resolve({ list: [{ id: 10, bizId: '100' }], total: 100 })
+  await flush()
+  assert.equal(h.state.list.value[0].bizId, '101')
+  assert.equal(h.state.total.value, 1)
+  h.stop()
+})
+
+test('贡献明细固定收益人与来源，默认已结算，重置保留固定条件', async () => {
+  const h = harness({ fixedUserId: 1, fixedSourceUserId: 5, defaultStatus: 1 })
+  await flush()
+  assert.equal(h.calls[0].userId, 1)
+  assert.equal(h.calls[0].sourceUserId, 5)
+  assert.equal(h.calls[0].status, 1)
+  assert.equal(h.calls[0].incomeOnly, true)
+  h.state.queryParams.status = 0
+  h.state.queryParams.createTime = ['2026-11-01 00:00:00', '2026-11-11 23:59:59']
+  h.state.queryParams.userId = '999'
+  h.state.queryParams.sourceUserId = '888'
+  h.state.queryParams.pageNo = 4
+  await h.state.getList()
+  assert.equal(h.calls.at(-1).userId, 1)
+  assert.equal(h.calls.at(-1).sourceUserId, 5)
+  assert.equal(h.calls.at(-1).status, 0)
+  h.state.resetQuery()
+  await flush()
+  assert.equal(h.calls.at(-1).userId, 1)
+  assert.equal(h.calls.at(-1).sourceUserId, 5)
+  assert.equal(h.calls.at(-1).pageNo, 1)
+  assert.equal(h.calls.at(-1).status, 1)
+  assert.equal(h.calls.at(-1).createTime.length, 0)
+  h.stop()
+})
+
+test('真实后台分页支持超过2000条记录，清空状态查询全部并保留零状态', async () => {
+  const h = harness({}, async ({ pageNo }) => ({ list: [{ id: pageNo, price: 100 }], total: 3001 }))
+  await flush()
+  assert.equal(h.calls.length, 1)
+  h.state.queryParams.pageNo = 231
+  h.state.queryParams.status = undefined
+  h.state.queryParams.createTime = undefined
+  await h.state.getList()
+  assert.equal(h.calls.length, 2)
+  assert.equal(h.calls.at(-1).pageNo, 231)
+  assert.equal(h.calls.at(-1).status, undefined)
+  assert.equal(h.calls.at(-1).createTime, undefined)
+  assert.equal(h.state.total.value, 3001)
+  assert.equal(h.state.list.value[0].id, 231)
+  h.state.queryParams.status = 0
+  h.state.handleQuery()
+  await flush()
+  assert.equal(h.calls.at(-1).status, 0)
+  assert.equal(h.calls.at(-1).pageNo, 1)
+  h.stop()
+})
+
+test('快速切换会员忽略旧响应，查询失败显示错误并可重试', async () => {
+  const old = deferred()
+  const h = harness({ fixedUserId: 1 }, ({ userId }) =>
+    userId === 1 ? old.promise : Promise.resolve({ list: [{ id: 20, userId: 2 }], total: 1 })
+  )
+  h.props.fixedUserId = 2
+  await flush()
+  old.resolve({ list: [{ id: 10, userId: 1 }], total: 100 })
+  await flush()
+  assert.equal(h.state.list.value[0].userId, 2)
+  assert.equal(h.state.total.value, 1)
+  h.api.fetch = async () => {
+    throw new Error('network')
+  }
+  await h.state.getList()
+  assert.match(h.state.error.value, /重试/)
+  assert.equal(h.state.list.value.length, 0)
+  assert.equal(h.state.loading.value, false)
+  h.api.fetch = async () => ({ list: [{ id: 30 }], total: 1 })
+  await h.state.getList()
+  assert.equal(h.state.error.value, '')
+  assert.equal(h.state.list.value[0].id, 30)
+  h.stop()
+})
+
+test('抽屉关闭卸载后忽略迟到请求', async () => {
+  const pending = deferred()
+  const h = harness({ fixedUserId: 1 }, () => pending.promise)
+  h.stop()
+  pending.resolve({ list: [{ id: 40 }], total: 1 })
+  await flush()
+  assert.equal(h.state.list.value.length, 0)
+})
+
+test('实际Element分页组件在加载后页期间保持总数和页码', async () => {
+  const { ElPagination } = require('element-plus')
+  const nextPage = deferred()
+  const h = harness({}, ({ pageNo }) =>
+    pageNo === 1 ? Promise.resolve({ list: [{ id: 1 }], total: 3001 }) : nextPage.promise
+  )
+  await flush()
+  const renderer = vue.createRenderer({
+    createElement: (type) => ({ type, children: [] }),
+    createText: (text) => ({ text }),
+    createComment: (text) => ({ text }),
+    setText: (node, text) => {
+      node.text = text
+    },
+    setElementText: (node, text) => {
+      node.text = text
+    },
+    patchProp: () => {},
+    parentNode: (node) => node.parent,
+    nextSibling: () => null,
+    insert: (node, parent) => {
+      parent.children.push(node)
+      node.parent = parent
+    },
+    remove: (node) => {
+      node.parent.children.splice(node.parent.children.indexOf(node), 1)
+    }
+  })
+  const app = renderer.createApp({
+    setup: () => () =>
+      vue.h(ElPagination, {
+        total: h.state.total.value,
+        currentPage: h.state.queryParams.pageNo,
+        pageSize: h.state.queryParams.pageSize,
+        layout: 'prev, pager, next',
+        'onUpdate:current-page': (page) => {
+          h.state.queryParams.pageNo = page
+        },
+        onCurrentChange: () => {
+          void h.state.getList()
+        }
+      })
+  })
+  app.mount({ children: [] })
+  h.state.queryParams.pageNo = 231
+  const loading = h.state.getList()
+  await flush()
+  assert.equal(h.state.total.value, 3001)
+  assert.equal(h.state.queryParams.pageNo, 231)
+  assert.equal(h.calls.length, 2)
+  assert.equal(h.calls.at(-1).pageNo, 231)
+  nextPage.resolve({ list: [{ id: 231 }], total: 3001 })
+  await loading
+  await flush()
+  assert.equal(h.state.queryParams.pageNo, 231)
+  assert.equal(h.state.list.value[0].id, 231)
+  assert.equal(h.calls.length, 2)
+  app.unmount()
+  h.stop()
+})
diff --git a/tests/member-user-brokerage.test.cjs b/tests/member-user-brokerage.test.cjs
index f7c7360e..0bf38d3e 100644
--- a/tests/member-user-brokerage.test.cjs
+++ b/tests/member-user-brokerage.test.cjs
@@ -102,7 +102,7 @@ test('会员列表与详情模板可编译，邀请人紧跟禁用列，关系
   const list = fs.readFileSync(path.join(detailDirectory, '../index.vue'), 'utf8')
   assert.match(
     list,
-    /label="是否禁用"[\s\S]*?<\/el-table-column>\s*<el-table-column label="邀请人"/
+    /label="是否禁用"[\s\S]*?<\/el-table-column>\s*<el-table-column[^>]*label="邀请人"/
   )
   assert.match(list, /openDetail\(row.inviter.id\)/)
   const detail = fs.readFileSync(path.join(detailDirectory, 'index.vue'), 'utf8')
@@ -135,8 +135,8 @@ test('直属下级按20人分页，去重后继续正确推进页码', async ()
   assert.equal(h.tree.hasMore(h.tree.branches[1]), false)
   await h.tree.loadChildren(1)
   assert.deepEqual(h.calls, [
-    { bindUserId: 1, pageNo: 1, pageSize: 20 },
-    { bindUserId: 1, pageNo: 2, pageSize: 20 }
+    { bindUserId: 1, contributionUserId: 1, pageNo: 1, pageSize: 20 },
+    { bindUserId: 1, contributionUserId: 1, pageNo: 2, pageSize: 20 }
   ])
   h.stop()
 })
@@ -157,6 +157,7 @@ test('可展开超过三级，收起后再次展开复用已加载的分支与
   await h.tree.toggleBranch(2)
   assert.deepEqual(nodeIds(h.tree), [90, 1, 2, 3, 4])
   assert.equal(h.calls.length, 3)
+  assert.ok(h.calls.every((query) => query.contributionUserId === 1))
   h.stop()
 })
 
@@ -317,6 +318,7 @@ test('实际Dagre布局在宽分支和三级关系中无节点重叠，节点详
       if (name === '@dagrejs/dagre') return require('@dagrejs/dagre')
       if (name === '@/utils/constants') return { CommonStatusEnum: { DISABLE: 1 } }
       if (name === '@/utils/formatTime') return { formatDate: (value) => value.toISOString() }
+      if (name === '@/utils/formatter') return { brokeragePriceToYuan: (value) => value === undefined ? '—' : (Number(value) / 100).toFixed(2) }
       if (name === './useBrokerageTree') return { useBrokerageTree: () => h.tree }
       throw new Error(`Unexpected import ${name}`)
     }
@@ -324,7 +326,7 @@ test('实际Dagre布局在宽分支和三级关系中无节点重叠，节点详
   const scope = vue.effectScope()
   scope.run(() =>
     vm.runInNewContext(
-      transpile(descriptor.scriptSetup.content) + '\nglobalThis.state = { layout, openDetail };',
+      transpile(descriptor.scriptSetup.content) + '\nglobalThis.state = { layout, openDetail, openRecords, recordDrawerRef, priceText };',
       context
     )
   )
@@ -338,15 +340,253 @@ test('实际Dagre布局在宽分支和三级关系中无节点重叠，节点详
   )
   for (let index = 0; index < nodes.length; index++) {
     for (let other = index + 1; other < nodes.length; other++) {
+      const first = nodes[index]
+      const second = nodes[other]
+      const firstHeight = first.data.role === 'current' ? 244 : 322
+      const secondHeight = second.data.role === 'current' ? 244 : 322
       assert.ok(
-        Math.abs(nodes[index].position.x - nodes[other].position.x) >= 248 ||
-          Math.abs(nodes[index].position.y - nodes[other].position.y) >= 174
+        first.position.x + 312 <= second.position.x ||
+          second.position.x + 312 <= first.position.x ||
+          first.position.y + firstHeight <= second.position.y ||
+          second.position.y + secondHeight <= first.position.y
       )
     }
   }
+  const opened = []
+  context.state.recordDrawerRef.value = { open: (query) => opened.push(query) }
+  context.state.openRecords({ member: child(2, 1), role: 'child' }, 'income')
+  context.state.openRecords({ member: child(2, 1), role: 'child' }, 'contribution')
+  assert.equal(opened[0].userId, 2)
+  assert.equal(opened[0].sourceUserId, undefined)
+  assert.equal(opened[1].userId, 1)
+  assert.equal(opened[1].sourceUserId, 2)
+  assert.equal(context.state.priceText(undefined), '—')
+  assert.equal(context.state.priceText(0), '￥0.00')
   context.state.openDetail(2)
   assert.equal(routes[0].params.id, 2)
   assert.equal(routes[0].name, 'MemberUserDetail')
   scope.stop()
   h.stop()
 })
+
+function incomeQueryHarness() {
+  const { descriptor } = parse(fs.readFileSync(path.join(detailDirectory, '../index.vue'), 'utf8'))
+  const requests = []
+  const exports = []
+  const routes = []
+  const context = {
+    exports: {},
+    ref: vue.ref,
+    reactive: vue.reactive,
+    defineOptions: () => {},
+    defineProps: () => ({ sex: 2 }),
+    useMessage: () => ({}),
+    useRouter: () => ({ push: (route) => routes.push(route) }),
+    onMounted: () => {},
+    require: (name) => {
+      if (name === '@/api/member/user') return {
+        getUserPage: async (params) => { requests.push(params); return { list: [], total: 0 } }
+      }
+      if (name === '@/api/system/area') return {}
+      if (name === '@/utils/constants') return { CommonStatusEnum: { ENABLE: 0, DISABLE: 1 } }
+      throw new Error(`Unexpected import ${name}`)
+    }
+  }
+  vm.runInNewContext(
+    transpile(descriptor.scriptSetup.content) + '\nglobalThis.state = { queryParams, queryRules, queryFormRef, getBrokeragePrice, getQueryParams, getList, handleQuery, resetQuery, handleExport, exportDialogRef, openDetail, openBrokerageDetail };',
+    context
+  )
+  const { state } = context
+  const validate = () => new Promise((resolve, reject) => state.queryRules.brokerageRange[0].validator(
+    {}, state.queryParams.brokerageRange, (error) => error ? reject(error) : resolve(true)
+  ))
+  state.queryFormRef.value = {
+    validate,
+    resetFields: () => { state.queryParams.brokerageRange = ['', ''] }
+  }
+  state.exportDialogRef.value = { open: (params) => exports.push(params) }
+  return { state, requests, exports, routes, validate }
+}
+
+test('收益区间支持零值、相等边界、单边与未设置，查询前转换整数分', async () => {
+  const h = incomeQueryHarness()
+  for (const [range, min, max] of [
+    [['', ''], undefined, undefined],
+    [['0', '0.00'], '0', '0'],
+    [['12.34', '12.34'], '1234', '1234'],
+    [['1.2', ''], '120', undefined],
+    [['', '0'], undefined, '0']
+  ]) {
+    h.state.queryParams.brokerageRange = range
+    await h.state.getList()
+    const query = h.requests.at(-1)
+    assert.equal(query.brokeragePriceMin, min)
+    assert.equal(query.brokeragePriceMax, max)
+    assert.equal(query.sex, 2)
+    assert.equal('brokerageRange' in query, false)
+  }
+  assert.equal(h.requests.length, 5)
+})
+
+test('收益区间校验拦截负数、非法精度、倒序和超出Long范围，搜索与导出均生效', async () => {
+  const h = incomeQueryHarness()
+  for (const range of [
+    ['-1', ''], ['1.001', ''], ['abc', ''], ['1e3', ''],
+    ['10', '9.99'], ['92233720368547758.08', ''], ['', '92233720368547758.08']
+  ]) {
+    h.state.queryParams.brokerageRange = range
+    await assert.rejects(h.validate())
+    await h.state.getList()
+    await h.state.handleExport()
+  }
+  assert.equal(h.requests.length, 0)
+  assert.equal(h.exports.length, 0)
+})
+
+test('超过JS安全整数的收益边界精确传递，搜索回第一页，导出沿用相同区间', async () => {
+  const h = incomeQueryHarness()
+  h.state.queryParams.brokerageRange = ['9007199254740993.01', '92233720368547758.07']
+  h.state.queryParams.pageNo = 5
+  h.state.handleQuery()
+  await flush()
+  assert.equal(h.requests[0].pageNo, 1)
+  assert.equal(h.requests[0].brokeragePriceMin, '900719925474099301')
+  assert.equal(h.requests[0].brokeragePriceMax, '9223372036854775807')
+  await h.state.handleExport()
+  assert.equal(h.exports[0].brokeragePriceMin, '900719925474099301')
+  assert.equal(h.exports[0].brokeragePriceMax, '9223372036854775807')
+  h.state.resetQuery()
+  await flush()
+  assert.equal(h.requests.at(-1).brokeragePriceMin, undefined)
+  assert.equal(h.requests.at(-1).brokeragePriceMax, undefined)
+})
+
+test('佣金格式化保留完整整数分精度并区分缺失金额与零', () => {
+  const context = {
+    exports: {},
+    require: (name) => {
+      if (name === '@/utils') return {}
+      throw new Error(`Unexpected import ${name}`)
+    }
+  }
+  vm.runInNewContext(transpile(fs.readFileSync(path.join(__dirname, '../src/utils/formatter.ts'), 'utf8')), context)
+  const format = context.exports.brokeragePriceToYuan
+  for (const [value, expected] of [
+    [undefined, '—'], [null, '—'], [0, '0.00'], [1, '0.01'], [99, '0.99'],
+    [100, '1.00'], [12345, '123.45'], ['900719925474099301', '9007199254740993.01'],
+    ['9223372036854775807', '92233720368547758.07'], ['-101', '-1.01']
+  ]) assert.equal(format(value), expected)
+})
+
+test('会员表格全部居中，收益列紧随邀请人，零收益也提供关系详情入口', () => {
+  const { descriptor } = parse(fs.readFileSync(path.join(detailDirectory, '../index.vue'), 'utf8'))
+  const columns = Array.from(descriptor.template.content.matchAll(/<el-table-column\b[^>]*>/g), (match) => match[0])
+  assert.ok(columns.length > 10)
+  assert.ok(columns.every((column) => /\balign="center"/.test(column)))
+  const inviterIndex = columns.findIndex((column) => /\blabel="邀请人"/.test(column))
+  const incomeIndex = columns.findIndex((column) => /\blabel="分销收益（元）"/.test(column))
+  assert.equal(incomeIndex, inviterIndex + 1)
+  const incomeColumn = descriptor.template.content.match(/<el-table-column\b[^>]*label="分销收益（元）"[^>]*>([\s\S]*?)<\/el-table-column>/)[1]
+  assert.match(incomeColumn, /<el-button\b[^>]*\blink\b/)
+  assert.match(incomeColumn, /@click="openBrokerageDetail\(row.id\)"/)
+  const incomeButton = incomeColumn.match(/<el-button\b[^>]*>/)[0]
+  const condition = incomeButton.match(/\bv-if="([^"]+)"/)?.[1]
+  if (condition) {
+    for (const price of [0, '0']) {
+      assert.equal(vm.runInNewContext(condition, { row: { brokerageSummary: { settledPrice: price } } }), true)
+    }
+  }
+  assert.doesNotMatch(incomeButton, /\bdisabled\b/)
+  assert.match(incomeColumn, /brokeragePriceToYuan\(row.brokerageSummary\??\.settledPrice\)/)
+  const styles = descriptor.styles.map((style) => style.content).join('\n')
+  for (const selector of ['member-user-addresses', 'member-user-times', 'member-user-inviter']) {
+    assert.match(styles, new RegExp(`\\.${selector}\\s*\\{[^}]*text-align:\\s*center`))
+  }
+  const h = incomeQueryHarness()
+  h.state.openBrokerageDetail(1125)
+  assert.equal(h.routes[0].name, 'MemberUserDetail')
+  assert.equal(h.routes[0].params.id, 1125)
+  assert.equal(h.routes[0].query.tab, 'brokerage')
+  h.state.openDetail(1125)
+  assert.equal(h.routes[1].name, 'MemberUserDetail')
+  assert.equal(h.routes[1].params.id, 1125)
+  assert.equal(h.routes[1].query, undefined)
+})
+
+function detailTabHarness(query = {}) {
+  const { descriptor } = parse(fs.readFileSync(path.join(detailDirectory, 'index.vue'), 'utf8'))
+  const route = vue.reactive({ name: 'MemberUserDetail', params: { id: '1125' }, query })
+  const lifecycle = {}
+  const runtimeVue = { ...vue, onActivated: (fn) => { lifecycle.activated = fn } }
+  const context = {
+    exports: {},
+    ref: vue.ref,
+    unref: vue.unref,
+    defineOptions: () => {},
+    useRoute: () => route,
+    useRouter: () => ({ currentRoute: vue.ref(route) }),
+    onMounted: (fn) => { lifecycle.mounted = fn },
+    require: (name) => {
+      if (name === 'vue') return runtimeVue
+      if (name === '@/store/modules/tagsView') return { useTagsViewStore: () => ({ delView: () => {} }) }
+      if (name === '@/api/member/user' || name === '@/api/pay/wallet/balance') return {}
+      if (name === 'element-plus') return { ElMessage: { warning: () => {} } }
+      throw new Error(`Unexpected import ${name}`)
+    }
+  }
+  const scope = vue.effectScope()
+  scope.run(() => vm.runInNewContext(
+    transpile(descriptor.scriptSetup.content) + '\nglobalThis.state = { activeDetailTab, syncDetailTab };',
+    context
+  ))
+  return { ...context, route, lifecycle, stop: () => scope.stop() }
+}
+
+test('收益入口首次直达和query变化定位分销关系，常规入口默认喜欢我', async () => {
+  const direct = detailTabHarness({ tab: 'brokerage' })
+  assert.equal(direct.state.activeDetailTab.value, 'brokerage')
+  direct.stop()
+  const normal = detailTabHarness()
+  assert.equal(normal.state.activeDetailTab.value, '0')
+  normal.route.query.tab = 'brokerage'
+  await flush()
+  assert.equal(normal.state.activeDetailTab.value, 'brokerage')
+  normal.stop()
+})
+
+test('同URL缓存详情再次激活定位分销关系，普通缓存入口保留手动页签', () => {
+  const targeted = detailTabHarness({ tab: 'brokerage' })
+  targeted.state.activeDetailTab.value = '3'
+  targeted.lifecycle.activated()
+  assert.equal(targeted.state.activeDetailTab.value, 'brokerage')
+  targeted.stop()
+  const normal = detailTabHarness()
+  normal.state.activeDetailTab.value = '3'
+  normal.lifecycle.activated()
+  assert.equal(normal.state.activeDetailTab.value, '3')
+  normal.stop()
+})
+
+test('缓存详情忽略其他会员、其他页面和非分销query的页签变更', async () => {
+  const h = detailTabHarness()
+  h.state.activeDetailTab.value = '4'
+  h.route.params.id = '1126'
+  h.route.query.tab = 'brokerage'
+  await flush()
+  h.lifecycle.activated()
+  assert.equal(h.state.activeDetailTab.value, '4')
+  h.route.params.id = '1125'
+  h.route.name = 'MemberUser'
+  h.route.query.tab = undefined
+  await flush()
+  h.route.query.tab = 'brokerage'
+  await flush()
+  h.lifecycle.activated()
+  assert.equal(h.state.activeDetailTab.value, '4')
+  h.route.name = 'MemberUserDetail'
+  h.route.query.tab = 'other'
+  await flush()
+  h.lifecycle.activated()
+  assert.equal(h.state.activeDetailTab.value, '4')
+  h.stop()
+})
diff --git a/tests/member-user-export.test.cjs b/tests/member-user-export.test.cjs
index 60c9afa0..86969d21 100644
--- a/tests/member-user-export.test.cjs
+++ b/tests/member-user-export.test.cjs
@@ -34,7 +34,7 @@ const flush = async () => {
 }
 
 // 执行真实组件的 setup 脚本，以 Vue 响应式状态、可控计时器和 API 替身验证异步交互。
-function createHarness(overrides = {}, savedTask) {
+function createHarness(overrides = {}, savedTask, dialogProps = {}) {
   const lifecycle = {}
   const timers = new Map()
   const calls = { exports: [], polls: [], downloads: [], files: [] }
@@ -60,6 +60,7 @@ function createHarness(overrides = {}, savedTask) {
     computed,
     Blob,
     Object,
+    defineProps: () => dialogProps,
     onMounted: (fn) => {
       lifecycle.mounted = fn
     },
@@ -313,3 +314,57 @@ test('开始另一个任务不会改变正在下载的文件名', async () => {
   assert.equal(h.calls.files[0][1], '会员用户.xlsx')
   assert.equal(h.state.task.value.taskId, 'task-2')
 })
+
+test('会员开通记录复用进度弹窗，保留未支付、未退款条件和日期快照，使用独立接口及恢复记录', async () => {
+  const calls = { queries: [], polls: [], downloads: [] }
+  const h = createHarness({}, undefined, {
+    recordName: '会员开通记录',
+    storagePrefix: 'member-open-type-history-export',
+    exportApi: {
+      create: async (params) => {
+        calls.queries.push(params)
+        return waiting({ taskId: 'history-task' })
+      },
+      progress: async (taskId) => {
+        calls.polls.push(taskId)
+        return waiting({ taskId, status: 'RUNNING' })
+      },
+      download: async (taskId) => {
+        calls.downloads.push(taskId)
+        return new Blob(['history excel'])
+      }
+    }
+  })
+  const params = {
+    pageNo: 3,
+    pageSize: 10,
+    memberName: '测试会员',
+    memberMobile: '139',
+    payStatus: false,
+    refundStatus: 0,
+    payTime: ['2026-11-01 00:00:00', '2026-11-11 23:59:59'],
+    refundTime: ['2026-11-05 00:00:00', '2026-11-11 23:59:59'],
+    createTime: ['2026-10-01 00:00:00', '2026-11-11 23:59:59']
+  }
+  await h.exposed.open(params)
+  await flush()
+  params.payTime[0] = 'changed'
+  params.refundTime[0] = 'changed'
+  assert.equal(calls.queries[0].payStatus, false)
+  assert.equal(calls.queries[0].refundStatus, 0)
+  assert.equal(Object.hasOwn(calls.queries[0], 'userCode'), false)
+  assert.equal(Object.hasOwn(calls.queries[0], 'title'), false)
+  assert.equal(calls.queries[0].payTime[0], '2026-11-01 00:00:00')
+  assert.equal(calls.queries[0].refundTime[0], '2026-11-05 00:00:00')
+  assert.equal(calls.queries[0].refundTime[1], '2026-11-11 23:59:59')
+  assert.equal(calls.queries[0].pageNo, undefined)
+  assert.equal(calls.queries[0].pageSize, undefined)
+  assert.equal(h.storage.get('member-open-type-history-export:1:100'), 'history-task')
+  assert.equal(h.storage.has('member-user-export:1:100'), false)
+  assert.deepEqual(calls.polls, ['history-task'])
+  h.state.task.value = finished()
+  await h.state.downloadFile()
+  assert.deepEqual(calls.downloads, ['task-1'])
+  assert.equal(h.calls.exports.length, 0)
+  assert.equal(h.calls.downloads.length, 0)
+})