From ee06dbaf9b97ebffca5b483240e98aa92c91b314 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Mon, 9 Nov 2026 13:24:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=98=B5=E7=A7=B0=E9=87=8D=E5=A4=8D?=
 =?UTF-8?q?=E3=80=81=E6=98=BE=E7=A4=BA=E5=88=86=E9=94=80=E4=BA=BA=E5=88=86?=
 =?UTF-8?q?=E9=94=80tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +
 pnpm-lock.yaml                                |  48 ++
 src/api/member/user/index.ts                  |  32 ++
 src/views/infra/file/index.vue                | 104 +---
 .../member/user/detail/UserBrokerageTree.vue  | 460 ++++++++++++++++++
 src/views/member/user/detail/index.vue        |   9 +-
 .../member/user/detail/useBrokerageTree.ts    | 201 ++++++++
 src/views/member/user/index.vue               | 302 +++++-------
 tests/member-user-brokerage.test.cjs          | 352 ++++++++++++++
 9 files changed, 1243 insertions(+), 268 deletions(-)
 create mode 100644 src/views/member/user/detail/UserBrokerageTree.vue
 create mode 100644 src/views/member/user/detail/useBrokerageTree.ts
 create mode 100644 tests/member-user-brokerage.test.cjs

diff --git a/package.json b/package.json
index 699b24f2..d91f2416 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,15 @@
     "lint:lint-staged": "lint-staged -c "
   },
   "dependencies": {
+    "@dagrejs/dagre": "3.1.3",
     "@element-plus/icons-vue": "^2.1.0",
     "@form-create/designer": "^3.2.6",
     "@form-create/element-ui": "^3.2.11",
     "@iconify/iconify": "^3.1.1",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@videojs-player/vue": "^1.0.0",
+    "@vue-flow/controls": "1.1.3",
+    "@vue-flow/core": "1.48.2",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5168d14f..a9b585d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
 
   .:
     dependencies:
+      '@dagrejs/dagre':
+        specifier: 3.1.3
+        version: 3.1.3
       '@element-plus/icons-vue':
         specifier: ^2.1.0
         version: 2.3.2(vue@3.5.12(typescript@5.3.3))
@@ -35,6 +38,12 @@ importers:
       '@videojs-player/vue':
         specifier: ^1.0.0
         version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.12(typescript@5.3.3))
+      '@vue-flow/controls':
+        specifier: 1.1.3
+        version: 1.1.3(@vue-flow/core@1.48.2(vue@3.5.12(typescript@5.3.3)))(vue@3.5.12(typescript@5.3.3))
+      '@vue-flow/core':
+        specifier: 1.48.2
+        version: 1.48.2(vue@3.5.12(typescript@5.3.3))
       '@vueuse/core':
         specifier: ^10.9.0
         version: 10.11.1(vue@3.5.12(typescript@5.3.3))
@@ -1104,6 +1113,12 @@ packages:
     resolution: {integrity: sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==}
     engines: {node: '>=14'}
 
+  '@dagrejs/dagre@3.1.3':
+    resolution: {integrity: sha512-X4aUTwOReZvthaZWOVHqlJ52/ZdhZFEM4+Lh/uR4XooUSLE6p71bcy7MPGzYnNUcNh+nj+i/qJQpCMIdQnSmrg==}
+
+  '@dagrejs/graphlib@4.0.6':
+    resolution: {integrity: sha512-Hjv7hbfmSBMP4nVXMFt4gusqWWHghQF0qNT4V5KHo4Jatvd+2L5VHKFnnIjXVuDnaHIRz7ZuHSnlf0RuZkOwWA==}
+
   '@dual-bundle/import-meta-resolve@4.2.1':
     resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
 
@@ -2324,6 +2339,17 @@ packages:
   '@volar/typescript@1.11.1':
     resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
 
+  '@vue-flow/controls@1.1.3':
+    resolution: {integrity: sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/core@1.48.2':
+    resolution: {integrity: sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==}
+    peerDependencies:
+      vue: ^3.3.0
+
   '@vue/babel-helper-vue-transform-on@1.5.0':
     resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
 
@@ -7269,6 +7295,12 @@ snapshots:
 
   '@ctrl/tinycolor@4.2.0': {}
 
+  '@dagrejs/dagre@3.1.3':
+    dependencies:
+      '@dagrejs/graphlib': 4.0.6
+
+  '@dagrejs/graphlib@4.0.6': {}
+
   '@dual-bundle/import-meta-resolve@4.2.1': {}
 
   '@element-plus/icons-vue@2.3.2(vue@3.5.12(typescript@5.3.3))':
@@ -8568,6 +8600,22 @@ snapshots:
       '@volar/language-core': 1.11.1
       path-browserify: 1.0.1
 
+  '@vue-flow/controls@1.1.3(@vue-flow/core@1.48.2(vue@3.5.12(typescript@5.3.3)))(vue@3.5.12(typescript@5.3.3))':
+    dependencies:
+      '@vue-flow/core': 1.48.2(vue@3.5.12(typescript@5.3.3))
+      vue: 3.5.12(typescript@5.3.3)
+
+  '@vue-flow/core@1.48.2(vue@3.5.12(typescript@5.3.3))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.3.3))
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.12(typescript@5.3.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   '@vue/babel-helper-vue-transform-on@1.5.0': {}
 
   '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.29.7)':
diff --git a/src/api/member/user/index.ts b/src/api/member/user/index.ts
index 4596b111..9848df8f 100644
--- a/src/api/member/user/index.ts
+++ b/src/api/member/user/index.ts
@@ -1,7 +1,28 @@
 import request from '@/config/axios'
 
+export interface MemberSummary {
+  id: number
+  userCode?: string | null
+  nickname?: string | null
+  avatar?: string | null
+  memberExists: boolean
+}
+
+export interface UserInviterVO extends MemberSummary {
+  bindUserTime?: string | number | null
+}
+
+export interface BrokerageChildVO extends MemberSummary {
+  status?: number | null
+  bindUserId: number
+  bindUserTime?: string | number | null
+  directChildCount: number
+}
+
 export interface UserVO {
   id: number
+  userCode?: string | null
+  inviter?: UserInviterVO | null
   avatar: string | undefined
   birthday: number | undefined
   createTime: number | undefined
@@ -67,6 +88,17 @@ export const getUser = async (id: number) => {
   return await request.get({ url: `/member/user/get?id=` + id })
 }
 
+export const getBrokerageChildrenPage = (params: {
+  bindUserId: number
+  pageNo: number
+  pageSize: number
+}) => {
+  return request.get<{ list: BrokerageChildVO[]; total: number }>({
+    url: '/member/user/brokerage-children-page',
+    params
+  })
+}
+
 // 修改会员用户
 export const updateUser = async (data: UserVO) => {
   return await request.put({ url: `/member/user/update`, data })
diff --git a/src/views/infra/file/index.vue b/src/views/infra/file/index.vue
index e67ad51b..84dab7c8 100644
--- a/src/views/infra/file/index.vue
+++ b/src/views/infra/file/index.vue
@@ -2,45 +2,27 @@
   <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
   <!-- 搜索 -->
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
       <el-form-item label="文件路径" prop="path">
-        <el-input
-          v-model="queryParams.path"
-          placeholder="请输入文件路径"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+        <el-input v-model="queryParams.path" placeholder="请输入文件路径" clearable @keyup.enter="handleQuery"
+          class="!w-240px" />
       </el-form-item>
       <el-form-item label="文件类型" prop="type" width="80">
-        <el-input
-          v-model="queryParams.type"
-          placeholder="请输入文件类型"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+        <el-input v-model="queryParams.type" placeholder="请输入文件类型" clearable @keyup.enter="handleQuery"
+          class="!w-240px" />
       </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-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-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="primary" plain @click="openForm">
           <Icon icon="ep:upload" class="mr-5px" /> 上传文件
         </el-button>
@@ -54,68 +36,32 @@
       <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
       <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" />
       <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
-      <el-table-column
-        label="文件大小"
-        align="center"
-        prop="size"
-        width="120"
-        :formatter="fileSizeFormatter"
-      />
+      <el-table-column label="文件大小" align="center" prop="size" width="120" :formatter="fileSizeFormatter" />
       <el-table-column label="文件类型" align="center" prop="type" width="180px" />
       <el-table-column label="文件内容" align="center" prop="url" width="110px">
         <template #default="{ row }">
-          <el-image
-            v-if="row.type.includes('image')"
-            class="h-80px w-80px"
-            lazy
-            :src="row.url"
-            :preview-src-list="[row.url]"
-            preview-teleported
-            fit="cover"
-          />
-          <el-link
-            v-else-if="row.type.includes('pdf')"
-            type="primary"
-            :href="row.url"
-            :underline="false"
-            target="_blank"
-            >预览</el-link
-          >
-          <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank"
-            >下载</el-link
-          >
+          <el-image v-if="row.type.includes('image')" class="h-80px w-80px" lazy :src="row.url"
+            :preview-src-list="[row.url]" preview-teleported fit="cover" />
+          <el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url" :underline="false"
+            target="_blank">预览</el-link>
+          <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank">下载</el-link>
         </template>
       </el-table-column>
-      <el-table-column
-        label="上传时间"
-        align="center"
-        prop="createTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
+      <el-table-column label="上传时间" align="center" prop="createTime" width="180" :formatter="dateFormatter" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button link type="primary" @click="copyToClipboard(scope.row.url)">
             复制链接
           </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:file:delete']"
-          >
+          <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['infra:file:delete']">
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+      @pagination="getList" />
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -192,7 +138,7 @@ const handleDelete = async (id: number) => {
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
-  } catch {}
+  } catch { }
 }
 
 /** 初始化 **/
diff --git a/src/views/member/user/detail/UserBrokerageTree.vue b/src/views/member/user/detail/UserBrokerageTree.vue
new file mode 100644
index 00000000..201b67f9
--- /dev/null
+++ b/src/views/member/user/detail/UserBrokerageTree.vue
@@ -0,0 +1,460 @@
+<template>
+  <section class="brokerage-tree" aria-label="会员分销关系">
+    <div class="brokerage-tree__toolbar">
+      <div>
+        <h3>分销关系</h3>
+        <p>查看直接邀请人，逐层展开下级会员</p>
+      </div>
+      <div class="brokerage-tree__tools">
+        <span class="brokerage-tree__legend"><i aria-hidden="true"></i>当前会员</span>
+        <el-button :loading="refreshing" size="small" @click="refresh">
+          <el-icon class="mr-4px" aria-hidden="true"><RefreshIcon /></el-icon>刷新
+        </el-button>
+      </div>
+    </div>
+    <el-alert v-if="refreshError" :title="refreshError" type="error" :closable="false" show-icon />
+    <div v-if="root" class="brokerage-tree__canvas">
+      <VueFlow
+        :id="flowId"
+        :nodes="layout.nodes"
+        :edges="layout.edges"
+        :nodes-draggable="false"
+        :nodes-connectable="false"
+        :edges-updatable="false"
+        :elements-selectable="false"
+        :connection-mode="ConnectionMode.Strict"
+        :delete-key-code="null"
+        :min-zoom="0.1"
+        :max-zoom="1.5"
+        :zoom-on-double-click="false"
+      >
+        <template #node-member="{ data }">
+          <div
+            class="brokerage-tree__node"
+            :class="{ 'brokerage-tree__node--current': data.role === 'current' }"
+          >
+            <Handle
+              v-if="data.role !== 'inviter'"
+              id="in"
+              type="target"
+              :position="Position.Top"
+              :connectable="false"
+            />
+            <div class="brokerage-tree__node-heading">
+              <span>{{ roleLabels[data.role] }}</span>
+              <el-tag
+                v-if="data.member.status === CommonStatusEnum.DISABLE"
+                size="small"
+                type="info"
+                >已禁用</el-tag
+              >
+            </div>
+            <div class="brokerage-tree__identity" :title="data.member.nickname || '未设置昵称'">
+              <el-avatar :src="data.member.avatar || undefined" :size="36" aria-hidden="true">
+                <el-icon><UserIcon /></el-icon>
+              </el-avatar>
+              <div>
+                <strong>{{
+                  data.member.memberExists ? data.member.nickname || '未设置昵称' : '会员资料缺失'
+                }}</strong>
+                <span>ID {{ data.member.userCode || data.member.id }}</span>
+              </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
+              }}</span>
+              <span
+                v-else-if="data.branch?.warning"
+                class="brokerage-tree__warning"
+                :title="data.branch.warning"
+                >关系异常，请刷新核对</span
+              >
+              <span v-else-if="data.role === 'inviter'">邀请了当前会员</span>
+              <span v-else-if="data.branch?.loading && data.branch.pageNo === 0"
+                >正在加载直属下级…</span
+              >
+              <span v-else>直属下级 {{ data.branch?.total || 0 }} 人</span>
+              <el-tooltip v-if="bindingTime(data)" :content="bindingTime(data)" placement="top">
+                <button
+                  type="button"
+                  class="brokerage-tree__time nodrag nopan"
+                  :aria-label="bindingTime(data)"
+                >
+                  <el-icon aria-hidden="true"><ClockIcon /></el-icon>
+                </button>
+              </el-tooltip>
+            </div>
+            <div class="brokerage-tree__actions nodrag nopan">
+              <el-button
+                v-if="data.role !== 'current'"
+                link
+                type="primary"
+                size="small"
+                :disabled="!data.member.memberExists"
+                @click="openDetail(data.member.id)"
+                >查看详情</el-button
+              >
+              <template v-if="data.branch">
+                <el-button
+                  v-if="data.branch.error"
+                  link
+                  type="primary"
+                  size="small"
+                  :loading="data.branch.loading"
+                  @click="loadChildren(data.member.id)"
+                  >重试</el-button
+                >
+                <el-button
+                  v-else-if="data.branch.total > 0 || data.branch.loading"
+                  link
+                  type="primary"
+                  size="small"
+                  :aria-expanded="data.branch.expanded"
+                  :loading="data.branch.loading && data.branch.pageNo === 0"
+                  @click="toggleBranch(data.member.id)"
+                >
+                  {{ data.branch.expanded ? '收起下级' : '展开下级' }}
+                </el-button>
+                <el-button
+                  v-if="
+                    data.branch.expanded &&
+                    data.branch.pageNo > 0 &&
+                    hasMore(data.branch) &&
+                    !data.branch.error
+                  "
+                  link
+                  type="primary"
+                  size="small"
+                  :loading="data.branch.loading"
+                  @click="loadChildren(data.member.id)"
+                  >加载更多</el-button
+                >
+              </template>
+            </div>
+            <Handle
+              id="out"
+              type="source"
+              :position="Position.Bottom"
+              :connectable="false"
+              :style="{
+                visibility: data.role === 'inviter' || data.branch?.total ? 'visible' : 'hidden'
+              }"
+            />
+          </div>
+        </template>
+        <Controls position="bottom-right" :show-interactive="false">
+          <template #control-zoom-in>
+            <button
+              type="button"
+              class="vue-flow__controls-button"
+              aria-label="放大关系树"
+              title="放大"
+              @click="zoomIn()"
+              ><el-icon aria-hidden="true"><PlusIcon /></el-icon>
+            </button>
+          </template>
+          <template #control-zoom-out>
+            <button
+              type="button"
+              class="vue-flow__controls-button"
+              aria-label="缩小关系树"
+              title="缩小"
+              @click="zoomOut()"
+              ><el-icon aria-hidden="true"><MinusIcon /></el-icon>
+            </button>
+          </template>
+          <template #control-fit-view>
+            <button
+              type="button"
+              class="vue-flow__controls-button"
+              aria-label="关系树适应画布"
+              title="适应画布"
+              @click="fitTree"
+              ><el-icon aria-hidden="true"><FullScreenIcon /></el-icon>
+            </button>
+          </template>
+        </Controls>
+      </VueFlow>
+    </div>
+    <el-empty v-else description="会员资料加载后可查看分销关系" />
+    <p v-if="root" class="brokerage-tree__hint"
+      >滚轮缩放，拖动画布移动。每个分支每次加载 20 人，悬停时钟查看绑定时间。</p
+    >
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, toRef, useId, watch } from 'vue'
+import {
+  VueFlow,
+  Handle,
+  Position,
+  MarkerType,
+  ConnectionMode,
+  useVueFlow,
+  type Node,
+  type Edge
+} from '@vue-flow/core'
+import { Controls } from '@vue-flow/controls'
+import {
+  User as UserIcon,
+  Refresh as RefreshIcon,
+  Clock as ClockIcon,
+  Plus as PlusIcon,
+  Minus as MinusIcon,
+  FullScreen as FullScreenIcon
+} from '@element-plus/icons-vue'
+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 { useBrokerageTree, type BrokerageTreeNode } from './useBrokerageTree'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
+import '@vue-flow/controls/dist/style.css'
+
+const props = defineProps<{ user: UserVO | null; active: boolean }>()
+const { root, graph, refreshing, refreshError, hasMore, loadChildren, toggleBranch, refresh } =
+  useBrokerageTree(toRef(props, 'user'))
+const flowId = `member-brokerage-${useId()}`
+const { fitView, zoomIn, zoomOut, onNodesInitialized } = useVueFlow({ id: flowId })
+const { push } = useRouter()
+const roleLabels = { inviter: '直接邀请人', current: '当前会员', child: '下级会员' }
+const NODE_WIDTH = 248
+const NODE_HEIGHT = 174
+
+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.edges.forEach(({ source, target }) => tree.setEdge(String(source), String(target)))
+  layoutGraph(tree)
+  const nodes: Node<BrokerageTreeNode>[] = graph.value.nodes.map((data) => {
+    const position = tree.node(String(data.member.id))
+    return {
+      id: String(data.member.id),
+      type: 'member',
+      data,
+      sourcePosition: Position.Bottom,
+      targetPosition: Position.Top,
+      style: { pointerEvents: 'all' },
+      position: { x: position.x - NODE_WIDTH / 2, y: position.y - NODE_HEIGHT / 2 },
+      ariaLabel: `${roleLabels[data.role]} ${data.member.nickname || data.member.id}`
+    }
+  })
+  const edges: Edge[] = graph.value.edges.map(({ source, target, bindUserTime }) => ({
+    id: `${source}-${target}`,
+    source: String(source),
+    target: String(target),
+    sourceHandle: 'out',
+    targetHandle: 'in',
+    type: 'smoothstep',
+    markerEnd: MarkerType.ArrowClosed,
+    ariaLabel: `邀请关系${bindUserTime ? `，绑定于${formatDate(new Date(bindUserTime))}` : ''}`
+  }))
+  return { nodes, edges }
+})
+
+function bindingTime(data: BrokerageTreeNode) {
+  const value =
+    data.role === 'current' ? root.value?.inviter?.bindUserTime : data.member.bindUserTime
+  return value ? `绑定于 ${formatDate(new Date(value))}` : ''
+}
+
+function openDetail(id: number) {
+  push({ name: 'MemberUserDetail', params: { id } })
+}
+
+async function fitTree() {
+  await nextTick()
+  if (props.active) await fitView({ padding: 0.18, maxZoom: 1, duration: 0 })
+}
+
+onNodesInitialized(fitTree)
+watch(
+  () => props.active,
+  (active) => {
+    if (active) void fitTree()
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.brokerage-tree {
+  min-width: 0;
+  color: var(--el-text-color-primary);
+
+  &__toolbar,
+  &__tools,
+  &__legend,
+  &__node-heading,
+  &__identity,
+  &__meta,
+  &__actions {
+    display: flex;
+    align-items: center;
+  }
+
+  &__toolbar {
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+  }
+  p {
+    margin: 6px 0 0;
+    color: var(--el-text-color-regular);
+    font-size: 12px;
+  }
+  &__tools {
+    gap: 16px;
+  }
+  &__legend {
+    gap: 6px;
+    font-size: 12px;
+    color: var(--el-text-color-regular);
+  }
+  &__legend i {
+    width: 8px;
+    height: 8px;
+    border: 2px solid var(--el-color-primary);
+    border-radius: 50%;
+  }
+
+  &__canvas {
+    height: 520px;
+    margin-top: 12px;
+    border: 1px solid var(--el-border-color-light);
+    border-radius: 8px;
+    background: var(--el-fill-color-lighter);
+    overflow: hidden;
+  }
+
+  &__node {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 248px;
+    height: 174px;
+    padding: 14px;
+    border: 1px solid var(--el-border-color);
+    border-radius: 8px;
+    background: var(--el-bg-color-overlay);
+    color: var(--el-text-color-primary);
+    font-size: 12px;
+
+    &--current {
+      border: 2px solid var(--el-color-primary);
+      padding: 13px;
+    }
+  }
+
+  &__node-heading {
+    height: 20px;
+    justify-content: space-between;
+    color: var(--el-text-color-regular);
+  }
+  &__node--current &__node-heading > span {
+    color: var(--el-color-primary);
+    font-weight: 600;
+  }
+  &__identity {
+    gap: 10px;
+  }
+  &__identity > div {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+  }
+  &__identity strong {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  &__identity span {
+    color: var(--el-text-color-regular);
+  }
+  &__identity .el-avatar {
+    flex-shrink: 0;
+  }
+  &__meta {
+    min-height: 20px;
+    gap: 8px;
+    color: var(--el-text-color-regular);
+  }
+  &__time {
+    display: flex;
+    padding: 2px;
+    border: 0;
+    color: inherit;
+    background: transparent;
+    cursor: pointer;
+  }
+  &__error {
+    color: var(--el-color-danger);
+  }
+  &__warning {
+    color: var(--el-text-color-primary);
+  }
+  &__actions {
+    min-height: 24px;
+    gap: 10px;
+  }
+  &__actions .el-button + .el-button {
+    margin-left: 0;
+  }
+  &__hint {
+    line-height: 1.6;
+  }
+
+  :deep(.vue-flow__handle) {
+    width: 6px;
+    height: 6px;
+    border: 0;
+    background: var(--el-border-color-darker);
+  }
+  :deep(.vue-flow__node) {
+    cursor: default;
+  }
+  :deep(.vue-flow__edge-path) {
+    stroke: var(--el-border-color-darker);
+    stroke-width: 1.5;
+  }
+  :deep(.vue-flow__arrowhead polyline) {
+    stroke: var(--el-border-color-darker);
+    fill: var(--el-border-color-darker);
+  }
+  :deep(.vue-flow__controls) {
+    box-shadow: none;
+    border: 1px solid var(--el-border-color);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  :deep(.vue-flow__controls-button) {
+    background: var(--el-bg-color-overlay);
+    color: var(--el-text-color-primary);
+    border-color: var(--el-border-color-light);
+  }
+  :deep(.vue-flow__controls-button:hover) {
+    background: var(--el-fill-color-light);
+  }
+  :deep(button:focus-visible),
+  :deep(.vue-flow__node:focus-visible) {
+    outline: 2px solid var(--el-color-primary);
+    outline-offset: 2px;
+  }
+}
+</style>
diff --git a/src/views/member/user/detail/index.vue b/src/views/member/user/detail/index.vue
index e0fc610a..7e89b1c2 100644
--- a/src/views/member/user/detail/index.vue
+++ b/src/views/member/user/detail/index.vue
@@ -29,7 +29,7 @@
         <template #header>
           <CardTitle title="账户明细" />
         </template>
-        <el-tabs>
+        <el-tabs v-model="activeDetailTab">
           <el-tab-pane label="喜欢我">
             <LikePage type="user" :memberId="id" />
           </el-tab-pane>
@@ -73,6 +73,9 @@
           <el-tab-pane v-if="false" label="优惠劵" lazy>
             <UserCouponList :user-id="id" />
           </el-tab-pane>
+          <el-tab-pane label="分销关系" name="brokerage" lazy>
+            <UserBrokerageTree :user="user" :active="activeDetailTab === 'brokerage'" />
+          </el-tab-pane>
           <el-tab-pane label="推广用户" lazy>
             <UserBrokerageList :bind-user-id="id" />
           </el-tab-pane>
@@ -85,6 +88,7 @@
   <UserForm ref="formRef" @success="getUserData(id)" />
 </template>
 <script lang="ts" setup>
+import { defineAsyncComponent } from 'vue'
 import * as WalletApi from '@/api/pay/wallet/balance'
 import * as UserApi from '@/api/member/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -112,6 +116,9 @@ import LookWechatPage from "@/views/member/recent/cmp/look-wechat.vue"
 
 defineOptions({ name: 'MemberDetail' })
 
+const UserBrokerageTree = defineAsyncComponent(() => import('./UserBrokerageTree.vue'))
+const activeDetailTab = ref('0')
+
 const loading = ref(true) // 加载中
 const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
 
diff --git a/src/views/member/user/detail/useBrokerageTree.ts b/src/views/member/user/detail/useBrokerageTree.ts
new file mode 100644
index 00000000..dc62d612
--- /dev/null
+++ b/src/views/member/user/detail/useBrokerageTree.ts
@@ -0,0 +1,201 @@
+import { computed, onBeforeUnmount, reactive, ref, watch, type Ref } from 'vue'
+import * as UserApi from '@/api/member/user'
+import type { BrokerageChildVO, MemberSummary, UserVO } from '@/api/member/user'
+
+const PAGE_SIZE = 20
+
+export interface BrokerageBranch {
+  children: BrokerageChildVO[]
+  total: number
+  pageNo: number
+  expanded: boolean
+  loading: boolean
+  error: string
+  warning: string
+}
+
+export interface BrokerageTreeNode {
+  member: MemberSummary & { status?: number | null; bindUserTime?: string | number | null }
+  role: 'inviter' | 'current' | 'child'
+  branch?: BrokerageBranch
+}
+
+export function useBrokerageTree(user: Ref<UserVO | null | undefined>) {
+  const root = ref<UserVO | null>(null)
+  const branches = reactive<Record<number, BrokerageBranch>>({})
+  const refreshing = ref(false)
+  const refreshError = ref('')
+  const parents = new Map<number, number>()
+  let generation = 0
+  let refreshVersion = 0
+
+  function createBranch(total = 0): BrokerageBranch {
+    return {
+      children: [],
+      total,
+      pageNo: 0,
+      expanded: false,
+      loading: false,
+      error: '',
+      warning: ''
+    }
+  }
+
+  function hasMore(branch: BrokerageBranch) {
+    return branch.pageNo === 0 || branch.pageNo * PAGE_SIZE < branch.total
+  }
+
+  async function loadChildren(id: number) {
+    const branch = branches[id]
+    if (!branch || branch.loading || !hasMore(branch)) return
+    const requestGeneration = generation
+    branch.loading = true
+    branch.error = ''
+    try {
+      const page = await UserApi.getBrokerageChildrenPage({
+        bindUserId: id,
+        pageNo: branch.pageNo + 1,
+        pageSize: PAGE_SIZE
+      })
+      if (requestGeneration !== generation) return
+      const ancestors = new Set<number>([id])
+      let parent = parents.get(id)
+      while (parent !== undefined && !ancestors.has(parent)) {
+        ancestors.add(parent)
+        parent = parents.get(parent)
+      }
+      const loaded = new Set(branch.children.map((child) => child.id))
+      for (const child of page.list) {
+        if (
+          ancestors.has(child.id) ||
+          child.bindUserId !== id ||
+          (parents.has(child.id) && parents.get(child.id) !== id)
+        ) {
+          branch.warning = '检测到异常邀请关系，已跳过异常节点，请刷新核对。'
+          continue
+        }
+        if (loaded.has(child.id)) continue
+        loaded.add(child.id)
+        parents.set(child.id, id)
+        branches[child.id] = createBranch(child.directChildCount)
+        branch.children.push(child)
+      }
+      branch.total = page.total
+      branch.pageNo += 1
+    } catch {
+      if (requestGeneration === generation) branch.error = '下级加载失败，请重试'
+    } finally {
+      if (requestGeneration === generation) branch.loading = false
+    }
+  }
+
+  async function initialize(value: UserVO | null | undefined) {
+    generation += 1
+    root.value = value?.id ? value : null
+    parents.clear()
+    Object.keys(branches).forEach((id) => delete branches[Number(id)])
+    if (!root.value) return
+    const id = root.value.id
+    branches[id] = createBranch()
+    branches[id].expanded = true
+    if (root.value.inviter?.id === id) {
+      branches[id].warning = '当前会员的邀请人指向自己，请核对邀请关系。'
+    } else if (root.value.inviter) {
+      parents.set(id, root.value.inviter.id)
+    }
+    await loadChildren(id)
+  }
+
+  async function toggleBranch(id: number) {
+    const branch = branches[id]
+    if (!branch) return
+    branch.expanded = !branch.expanded
+    if (branch.expanded && branch.pageNo === 0) await loadChildren(id)
+  }
+
+  async function refresh() {
+    if (!root.value || refreshing.value) return
+    const id = root.value.id
+    const requestGeneration = generation
+    const version = ++refreshVersion
+    refreshing.value = true
+    refreshError.value = ''
+    try {
+      const value = await UserApi.getUser(id)
+      if (requestGeneration !== generation) return
+      if (!value) {
+        refreshError.value = '会员资料不存在'
+        await initialize(null)
+        return
+      }
+      await initialize(value)
+    } catch {
+      if (requestGeneration === generation) refreshError.value = '刷新失败，请重试'
+    } finally {
+      if (version === refreshVersion) refreshing.value = false
+    }
+  }
+
+  const graph = computed(() => {
+    const nodes: BrokerageTreeNode[] = []
+    const edges: { source: number; target: number; bindUserTime?: string | number | null }[] = []
+    const current = root.value
+    if (!current) return { nodes, edges }
+    if (current.inviter && current.inviter.id !== current.id) {
+      nodes.push({ member: current.inviter, role: 'inviter' })
+      edges.push({
+        source: current.inviter.id,
+        target: current.id,
+        bindUserTime: current.inviter.bindUserTime
+      })
+    }
+    nodes.push({
+      member: { ...current, memberExists: true },
+      role: 'current',
+      branch: branches[current.id]
+    })
+    const pending = [current.id]
+    const visited = new Set<number>([current.id])
+    while (pending.length) {
+      const id = pending.shift()!
+      const branch = branches[id]
+      if (!branch?.expanded) continue
+      for (const child of branch.children) {
+        if (visited.has(child.id)) continue
+        visited.add(child.id)
+        nodes.push({ member: child, role: 'child', branch: branches[child.id] })
+        edges.push({ source: id, target: child.id, bindUserTime: child.bindUserTime })
+        pending.push(child.id)
+      }
+    }
+    return { nodes, edges }
+  })
+
+  watch(
+    user,
+    (value) => {
+      refreshVersion += 1
+      refreshing.value = false
+      refreshError.value = ''
+      void initialize(value)
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    generation += 1
+    refreshVersion += 1
+  })
+
+  return {
+    root,
+    graph,
+    branches,
+    refreshing,
+    refreshError,
+    hasMore,
+    loadChildren,
+    toggleBranch,
+    refresh
+  }
+}
diff --git a/src/views/member/user/index.vue b/src/views/member/user/index.vue
index 8d0d6da0..0d470d98 100644
--- a/src/views/member/user/index.vue
+++ b/src/views/member/user/index.vue
@@ -3,127 +3,56 @@
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form
-      ref="queryFormRef"
-      :inline="true"
-      :model="queryParams"
-      class="-mb-15px"
-      label-width="68px"
-    >
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
       <el-form-item label="用户昵称" prop="nickname">
-        <el-input
-          v-model="queryParams.nickname"
-          class="!w-240px"
-          clearable
-          placeholder="请输入用户昵称"
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.nickname" class="!w-240px" clearable placeholder="请输入用户昵称"
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="用户ID" prop="userCode">
-        <el-input
-          v-model="queryParams.userCode"
-          class="!w-240px"
-          clearable
-          placeholder="App 我的页面显示的 ID"
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.userCode" class="!w-240px" clearable placeholder="App 我的页面显示的 ID"
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="手机号" prop="mobile">
-        <el-input
-          v-model="queryParams.mobile"
-          class="!w-240px"
-          clearable
-          placeholder="请输入手机号"
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.mobile" class="!w-240px" clearable placeholder="请输入手机号"
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="微信号" prop="wechatNum">
-        <el-input
-          v-model.trim="queryParams.wechatNum"
-          class="!w-240px"
-          clearable
-          placeholder="请输入微信号"
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model.trim="queryParams.wechatNum" class="!w-240px" clearable placeholder="请输入微信号"
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item v-if="props.sex === undefined" label="用户性别" prop="sex">
-        <el-select
-          v-model="queryParams.sex"
-          class="!w-240px"
-          clearable
-          placeholder="请选择用户性别"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+        <el-select v-model="queryParams.sex" class="!w-240px" clearable placeholder="请选择用户性别">
+          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="是否禁用" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          class="!w-240px"
-          clearable
-          placeholder="请选择禁用状态"
-        >
+        <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择禁用状态">
           <el-option label="已禁用" :value="CommonStatusEnum.DISABLE" />
           <el-option label="未禁用" :value="CommonStatusEnum.ENABLE" />
         </el-select>
       </el-form-item>
       <el-form-item label="用户标签" prop="memberRecentTagList">
-        <el-select
-          v-model="queryParams.memberRecentTagList"
-          class="!w-240px"
-          clearable
-          collapse-tags
-          collapse-tags-tooltip
-          filterable
-          multiple
-          placeholder="请选择用户标签"
-        >
-          <el-option
-            v-for="dict in getStrDictOptions(DICT_TYPE.MEMBER_RECENT_TAG)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+        <el-select v-model="queryParams.memberRecentTagList" class="!w-240px" clearable collapse-tags
+          collapse-tags-tooltip filterable multiple placeholder="请选择用户标签">
+          <el-option v-for="dict in getStrDictOptions(DICT_TYPE.MEMBER_RECENT_TAG)" :key="dict.value"
+            :label="dict.label" :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="用户地址" prop="addressAreaId">
-        <el-cascader
-          v-model="queryParams.addressAreaId"
-          :options="areaList"
-          :props="{ ...defaultProps, checkStrictly: true }"
-          class="!w-240px"
-          clearable
-          filterable
-          placeholder="请选择省/市/区"
-          separator="-"
-        />
+        <el-cascader v-model="queryParams.addressAreaId" :options="areaList"
+          :props="{ ...defaultProps, checkStrictly: true }" class="!w-240px" clearable filterable placeholder="请选择省/市/区"
+          separator="-" />
       </el-form-item>
       <el-form-item label="注册时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-          end-placeholder="结束日期"
-          start-placeholder="开始日期"
-          type="daterange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-        />
+        <el-date-picker v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" 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="loginDate">
-        <el-date-picker
-          v-model="queryParams.loginDate"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-          end-placeholder="结束日期"
-          start-placeholder="开始日期"
-          type="daterange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-        />
+        <el-date-picker v-model="queryParams.loginDate" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px" end-placeholder="结束日期" start-placeholder="开始日期" type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss" />
       </el-form-item>
       <el-form-item v-if="false" label="用户等级" prop="levelId">
         <MemberLevelSelect v-model="queryParams.levelId" />
@@ -140,13 +69,8 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button
-          v-hasPermi="['member:user:query']"
-          type="success"
-          plain
-          :loading="exportDialogRef?.submitting"
-          @click="exportDialogRef?.open(queryParams)"
-        >
+        <el-button v-hasPermi="['member:user:query']" type="success" plain :loading="exportDialogRef?.submitting"
+          @click="exportDialogRef?.open(queryParams)">
           <Icon class="mr-5px" icon="ep:download" />
           {{ exportDialogRef?.isActive ? '查看导出进度' : '导出' }}
         </el-button>
@@ -157,19 +81,9 @@
 
   <!-- 列表 -->
   <ContentWrap class="member-user-list">
-    <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 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" label="用户编号" prop="id" width="84px" />
       <el-table-column align="center" label="用户ID" prop="userCode" width="84px" />
@@ -200,34 +114,18 @@
           {{ row.wechatNum || '—' }}
         </template>
       </el-table-column>
-      <el-table-column
-        align="center"
-        label="微信二维码"
-        prop="wechatQrCode"
-        width="100px"
-        :show-overflow-tooltip="false"
-      >
+      <el-table-column align="center" label="微信二维码" prop="wechatQrCode" width="100px" :show-overflow-tooltip="false">
         <template #default="{ row }">
-          <PreviewImage
-            v-if="row.wechatQrCode"
-            :src="row.wechatQrCode"
-            :width="64"
-            :height="64"
-            fit="contain"
-            alt="微信二维码"
-          />
+          <PreviewImage v-if="row.wechatQrCode" :src="row.wechatQrCode" :width="64" :height="64" fit="contain"
+            alt="微信二维码" />
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column align="center" min-width="184px" label="用户标签">
         <template #default="{ row }">
           <div v-if="row.memberTagList?.length" class="member-user-tags">
-            <dict-tag
-              v-for="v in row.memberTagList"
-              :key="v.tagBizType"
-              :type="DICT_TYPE.MEMBER_RECENT_TAG"
-              :value="v.tagBizType"
-            />
+            <dict-tag v-for="v in row.memberTagList" :key="v.tagBizType" :type="DICT_TYPE.MEMBER_RECENT_TAG"
+              :value="v.tagBizType" />
           </div>
           <span v-else>—</span>
         </template>
@@ -235,17 +133,30 @@
       <el-table-column align="center" label="是否禁用" width="92px">
         <template #default="{ row }">
           <div class="switch-cell">
-            <el-switch
-              v-model="row.status"
-              size="small"
-              :active-value="CommonStatusEnum.DISABLE"
-              :inactive-value="CommonStatusEnum.ENABLE"
-              :disabled="!checkPermi(['member:user:update'])"
-              @change="handleStatusChange(row)"
-            />
+            <el-switch v-model="row.status" size="small" :active-value="CommonStatusEnum.DISABLE"
+              :inactive-value="CommonStatusEnum.ENABLE" :disabled="!checkPermi(['member:user:update'])"
+              @change="handleStatusChange(row)" />
           </div>
         </template>
       </el-table-column>
+      <el-table-column align="center" label="邀请人" min-width="196px">
+        <template #default="{ row }">
+          <component :is="row.inviter?.memberExists ? 'button' : 'div'" v-if="row.inviter" class="member-user-inviter"
+            :class="{ 'member-user-inviter--link': row.inviter.memberExists }"
+            :type="row.inviter.memberExists ? 'button' : undefined"
+            :aria-label="row.inviter.memberExists ? `查看邀请人${row.inviter.nickname || row.inviter.id}的详情` : undefined"
+            @click="row.inviter.memberExists && openDetail(row.inviter.id)">
+            <el-avatar :src="row.inviter.avatar || undefined" :size="32" aria-hidden="true">
+              <Icon icon="ep:user" />
+            </el-avatar>
+            <span class="member-user-inviter__text">
+              <span>{{ row.inviter.memberExists ? row.inviter.nickname || '未设置昵称' : '会员资料缺失' }}</span>
+              <span class="member-user-inviter__id">ID {{ row.inviter.userCode || row.inviter.id }}</span>
+            </span>
+          </component>
+          <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">
@@ -260,58 +171,34 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column
-        :show-overflow-tooltip="false"
-        align="center"
-        fixed="right"
-        label="操作"
-        width="144px"
-      >
+      <el-table-column :show-overflow-tooltip="false" align="center" fixed="right" label="操作" width="144px">
         <template #default="{ row }">
           <div class="member-user-actions">
             <el-button link type="primary" @click="openDetail(row.id)">详情</el-button>
-            <el-dropdown
-              v-hasPermi="[
-                'member:user:update',
-                'member:user:update-level',
-                'member:user:update-point'
-              ]"
-              @command="(command) => handleCommand(command, row)"
-            >
+            <el-dropdown v-hasPermi="[
+              'member:user:update',
+              'member:user:update-level',
+              'member:user:update-point'
+            ]" @command="(command) => handleCommand(command, row)">
               <el-button link type="primary">
                 <Icon icon="ep:d-arrow-right" />
                 更多
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    v-if="checkPermi(['member:user:update'])"
-                    command="handleUpdate"
-                  >
+                  <el-dropdown-item v-if="checkPermi(['member:user:update'])" command="handleUpdate">
                     编辑
                   </el-dropdown-item>
-                  <el-dropdown-item
-                    v-if="checkPermi(['member:user:update-level'])"
-                    command="handleUpdateLevel"
-                  >
+                  <el-dropdown-item v-if="checkPermi(['member:user:update-level'])" command="handleUpdateLevel">
                     修改等级
                   </el-dropdown-item>
-                  <el-dropdown-item
-                    v-if="checkPermi(['member:user:update-point'])"
-                    command="handleUpdatePoint"
-                  >
+                  <el-dropdown-item v-if="checkPermi(['member:user:update-point'])" command="handleUpdatePoint">
                     修改积分
                   </el-dropdown-item>
-                  <el-dropdown-item
-                    v-if="checkPermi(['pay:wallet:update-member-tag'])"
-                    command="handleUpdateMemberTag"
-                  >
+                  <el-dropdown-item v-if="checkPermi(['pay:wallet:update-member-tag'])" command="handleUpdateMemberTag">
                     修改用户标签
                   </el-dropdown-item>
-                  <el-dropdown-item
-                    v-if="checkPermi(['pay:wallet:update-member-tag'])"
-                    command="handleOpenVipTag"
-                  >
+                  <el-dropdown-item v-if="checkPermi(['pay:wallet:update-member-tag'])" command="handleOpenVipTag">
                     开通会员
                   </el-dropdown-item>
                 </el-dropdown-menu>
@@ -322,12 +209,8 @@
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination
-      v-model:limit="queryParams.pageSize"
-      v-model:page="queryParams.pageNo"
-      :total="total"
-      @pagination="getList"
-    />
+    <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
+      @pagination="getList" />
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -559,7 +442,7 @@ onMounted(async () => {
   gap: 4px;
   text-align: left;
 
-  > div {
+  >div {
     display: flex;
     gap: 4px;
     white-space: nowrap;
@@ -578,6 +461,49 @@ onMounted(async () => {
   white-space: nowrap;
 }
 
+.member-user-inviter {
+  display: flex;
+  width: 100%;
+  gap: 10px;
+  align-items: center;
+  padding: 4px;
+  border: 0;
+  border-radius: 4px;
+  color: var(--el-text-color-primary);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+
+  .el-avatar {
+    flex-shrink: 0;
+  }
+
+  &__text {
+    display: grid;
+    min-width: 0;
+    gap: 2px;
+  }
+
+  &__id {
+    color: var(--el-text-color-regular);
+    font-size: 12px;
+  }
+
+  &--link {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--el-color-primary);
+      background: var(--el-fill-color-light);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--el-color-primary);
+      outline-offset: 2px;
+    }
+  }
+}
+
 .switch-cell {
   display: flex;
   justify-content: center;
diff --git a/tests/member-user-brokerage.test.cjs b/tests/member-user-brokerage.test.cjs
new file mode 100644
index 00000000..f7c7360e
--- /dev/null
+++ b/tests/member-user-brokerage.test.cjs
@@ -0,0 +1,352 @@
+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 detailDirectory = path.join(__dirname, '../src/views/member/user/detail')
+const hookSource = fs.readFileSync(path.join(detailDirectory, 'useBrokerageTree.ts'), 'utf8')
+const transpile = (source) =>
+  ts.transpileModule(source, {
+    compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS }
+  }).outputText
+const child = (id, bindUserId, directChildCount = 0) => ({
+  id,
+  bindUserId,
+  directChildCount,
+  userCode: `U${id}`,
+  nickname: `会员${id}`,
+  memberExists: true
+})
+const member = (id = 1, inviterId = 90) => ({
+  id,
+  userCode: `U${id}`,
+  nickname: `会员${id}`,
+  inviter: inviterId
+    ? { id: inviterId, nickname: '邀请人', userCode: `U${inviterId}`, memberExists: true }
+    : null
+})
+const deferred = () => {
+  let resolve, reject
+  const promise = new Promise((done, fail) => {
+    resolve = done
+    reject = fail
+  })
+  return { promise, resolve, reject }
+}
+const flush = async () => {
+  await vue.nextTick()
+  for (let index = 0; index < 8; index++) await Promise.resolve()
+}
+
+function harness(overrides = {}, initial = member()) {
+  const calls = []
+  const api = {
+    getBrokerageChildrenPage: async () => ({ list: [], total: 0 }),
+    getUser: async (id) => member(id),
+    ...overrides
+  }
+  const childQuery = api.getBrokerageChildrenPage
+  api.getBrokerageChildrenPage = (query) => {
+    calls.push({ ...query })
+    return childQuery(query)
+  }
+  let unmount
+  const runtimeVue = {
+    ...vue,
+    onBeforeUnmount: (fn) => {
+      unmount = fn
+    }
+  }
+  const module = { exports: {} }
+  vm.runInNewContext(transpile(hookSource), {
+    exports: module.exports,
+    require: (name) => {
+      if (name === 'vue') return runtimeVue
+      if (name === '@/api/member/user') return api
+      throw new Error(`Unexpected import ${name}`)
+    }
+  })
+  const user = vue.ref(initial)
+  const scope = vue.effectScope()
+  const tree = scope.run(() => module.exports.useBrokerageTree(user))
+  return {
+    tree,
+    user,
+    api,
+    calls,
+    stop: () => {
+      unmount()
+      scope.stop()
+    }
+  }
+}
+const nodeIds = (tree) => Array.from(tree.graph.value.nodes, ({ member }) => member.id)
+
+test('会员列表与详情模板可编译，邀请人紧跟禁用列，关系树使用懒加载页签', () => {
+  for (const file of [
+    path.join(detailDirectory, '../index.vue'),
+    path.join(detailDirectory, 'index.vue'),
+    path.join(detailDirectory, 'UserBrokerageTree.vue')
+  ]) {
+    const { descriptor } = parse(fs.readFileSync(file, 'utf8'))
+    assert.deepEqual(
+      compileTemplate({ source: descriptor.template.content, filename: file, id: 'brokerage' })
+        .errors,
+      []
+    )
+  }
+  const list = fs.readFileSync(path.join(detailDirectory, '../index.vue'), 'utf8')
+  assert.match(
+    list,
+    /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')
+  assert.match(detail, /label="分销关系" name="brokerage" lazy/)
+  assert.match(detail, /defineAsyncComponent\(\(\) => import\('\.\/UserBrokerageTree.vue'\)\)/)
+  assert.match(detail, /label="推广用户" lazy/)
+})
+
+test('等待会员资料时不查询，未绑定邀请人仍展示当前会员', async () => {
+  const h = harness({}, null)
+  assert.equal(h.calls.length, 0)
+  h.user.value = member(1, null)
+  await flush()
+  assert.deepEqual(nodeIds(h.tree), [1])
+  assert.equal(h.tree.branches[1].total, 0)
+  h.stop()
+})
+
+test('直属下级按20人分页，去重后继续正确推进页码', async () => {
+  const h = harness({
+    getBrokerageChildrenPage: async ({ pageNo }) =>
+      pageNo === 1
+        ? { list: Array.from({ length: 20 }, (_, index) => child(30 - index, 1)), total: 24 }
+        : { list: [child(11, 1), child(10, 1), child(9, 1), child(8, 1)], total: 24 }
+  })
+  await flush()
+  assert.deepEqual(nodeIds(h.tree).slice(0, 3), [90, 1, 30])
+  await h.tree.loadChildren(1)
+  assert.equal(h.tree.branches[1].children.length, 23)
+  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 }
+  ])
+  h.stop()
+})
+
+test('可展开超过三级，收起后再次展开复用已加载的分支与展开状态', async () => {
+  const h = harness({
+    getBrokerageChildrenPage: async ({ bindUserId }) => ({
+      list: bindUserId < 4 ? [child(bindUserId + 1, bindUserId, 1)] : [],
+      total: bindUserId < 4 ? 1 : 0
+    })
+  })
+  await flush()
+  await h.tree.toggleBranch(2)
+  await h.tree.toggleBranch(3)
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2, 3, 4])
+  await h.tree.toggleBranch(2)
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2])
+  await h.tree.toggleBranch(2)
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2, 3, 4])
+  assert.equal(h.calls.length, 3)
+  h.stop()
+})
+
+test('分支失败后可重试原页，已有节点继续显示', async () => {
+  let attempts = 0
+  const h = harness({
+    getBrokerageChildrenPage: async ({ pageNo }) => {
+      if (pageNo === 1) return { list: [child(2, 1)], total: 21 }
+      if (++attempts === 1) throw new Error('offline')
+      return { list: [child(3, 1)], total: 21 }
+    }
+  })
+  await flush()
+  await h.tree.loadChildren(1)
+  assert.equal(h.tree.branches[1].pageNo, 1)
+  assert.match(h.tree.branches[1].error, /重试/)
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2])
+  await h.tree.loadChildren(1)
+  assert.equal(h.tree.branches[1].error, '')
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2, 3])
+  assert.equal(h.calls.at(-1).pageNo, 2)
+  h.stop()
+})
+
+test('初次加载失败可重试，并发重复点击只发出一次请求', async () => {
+  const pending = deferred()
+  const h = harness({ getBrokerageChildrenPage: () => pending.promise })
+  await h.tree.loadChildren(1)
+  assert.equal(h.calls.length, 1)
+  pending.reject(new Error('offline'))
+  await flush()
+  assert.equal(h.tree.branches[1].loading, false)
+  h.api.getBrokerageChildrenPage = async () => ({ list: [child(2, 1)], total: 1 })
+  await h.tree.loadChildren(1)
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2])
+  h.stop()
+})
+
+test('切换会员后忽略旧分支的迟到响应', async () => {
+  const old = deferred()
+  const h = harness({
+    getBrokerageChildrenPage: ({ bindUserId }) =>
+      bindUserId === 1 ? old.promise : Promise.resolve({ list: [child(20, 10)], total: 1 })
+  })
+  h.user.value = member(10, 99)
+  await flush()
+  old.resolve({ list: [child(2, 1)], total: 1 })
+  await flush()
+  assert.deepEqual(nodeIds(h.tree), [99, 10, 20])
+  assert.equal(h.tree.branches[1], undefined)
+  assert.equal(h.tree.branches[2], undefined)
+  h.stop()
+})
+
+test('刷新重新读取邀请人并清空旧分支，连续点击只刷新一次', async () => {
+  const pending = deferred()
+  let reads = 0
+  const h = harness({
+    getUser: () => {
+      reads++
+      return pending.promise
+    }
+  })
+  await flush()
+  const task = h.tree.refresh()
+  await h.tree.refresh()
+  assert.equal(reads, 1)
+  pending.resolve(member(1, 99))
+  await task
+  assert.deepEqual(nodeIds(h.tree), [99, 1])
+  assert.equal(h.tree.refreshing.value, false)
+  h.stop()
+})
+
+test('刷新失败保留已加载关系并允许再次刷新，切换会员会清除错误', async () => {
+  const h = harness({
+    getUser: async () => {
+      throw new Error('offline')
+    }
+  })
+  await flush()
+  await h.tree.refresh()
+  assert.match(h.tree.refreshError.value, /重试/)
+  assert.deepEqual(nodeIds(h.tree), [90, 1])
+  h.api.getUser = async () => member(1, 99)
+  await h.tree.refresh()
+  assert.equal(h.tree.refreshError.value, '')
+  assert.deepEqual(nodeIds(h.tree), [99, 1])
+  h.stop()
+})
+
+test('历史循环、错误父节点和重复数据不会形成环或重复节点，缺失会员资料仍可查看关系', async () => {
+  const h = harness({
+    getBrokerageChildrenPage: async ({ bindUserId }) =>
+      bindUserId === 1
+        ? {
+            list: [
+              child(1, 1),
+              child(90, 1),
+              child(8, 999),
+              { ...child(2, 1, 1), memberExists: false },
+              child(2, 1)
+            ],
+            total: 5
+          }
+        : { list: [child(1, 2), child(3, 2)], total: 2 }
+  })
+  await flush()
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2])
+  assert.match(h.tree.branches[1].warning, /异常/)
+  assert.equal(h.tree.graph.value.nodes.at(-1).member.memberExists, false)
+  await h.tree.toggleBranch(2)
+  assert.deepEqual(nodeIds(h.tree), [90, 1, 2, 3])
+  assert.match(h.tree.branches[2].warning, /异常/)
+  h.stop()
+})
+
+test('会员邀请自己时显示异常提示，组件卸载后忽略请求结果', async () => {
+  const pending = deferred()
+  const h = harness({ getBrokerageChildrenPage: () => pending.promise }, member(1, 1))
+  assert.deepEqual(nodeIds(h.tree), [1])
+  assert.match(h.tree.branches[1].warning, /自己/)
+  h.stop()
+  pending.resolve({ list: [child(2, 1)], total: 1 })
+  await flush()
+  assert.equal(h.tree.branches[2], undefined)
+})
+
+test('实际Dagre布局在宽分支和三级关系中无节点重叠，节点详情跳转使用内部编号', async () => {
+  const h = harness({
+    getBrokerageChildrenPage: async () => ({ list: [child(2, 1, 1), child(3, 1)], total: 2 })
+  })
+  await flush()
+  const { descriptor } = parse(
+    fs.readFileSync(path.join(detailDirectory, 'UserBrokerageTree.vue'), 'utf8')
+  )
+  const props = vue.reactive({ user: member(), active: true })
+  const routes = []
+  const context = {
+    exports: {},
+    defineProps: () => props,
+    useRouter: () => ({ push: (route) => routes.push(route) }),
+    require: (name) => {
+      if (name === 'vue') return { ...vue, useId: () => 'test' }
+      if (name === '@vue-flow/core')
+        return {
+          Position: { Top: 'top', Bottom: 'bottom' },
+          MarkerType: { ArrowClosed: 'arrowclosed' },
+          ConnectionMode: { Strict: 'strict' },
+          useVueFlow: () => ({
+            onNodesInitialized: () => {},
+            fitView: async () => {},
+            zoomIn: () => {},
+            zoomOut: () => {}
+          })
+        }
+      if (name === '@vue-flow/controls' || name.endsWith('.css')) return {}
+      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 === './useBrokerageTree') return { useBrokerageTree: () => h.tree }
+      throw new Error(`Unexpected import ${name}`)
+    }
+  }
+  const scope = vue.effectScope()
+  scope.run(() =>
+    vm.runInNewContext(
+      transpile(descriptor.scriptSetup.content) + '\nglobalThis.state = { layout, openDetail };',
+      context
+    )
+  )
+  const nodes = context.state.layout.value.nodes
+  assert.equal(nodes.length, 4)
+  assert.ok(nodes.every((node) => node.style.pointerEvents === 'all'))
+  assert.ok(
+    context.state.layout.value.edges.every(
+      (edge) => edge.sourceHandle === 'out' && edge.targetHandle === 'in'
+    )
+  )
+  for (let index = 0; index < nodes.length; index++) {
+    for (let other = index + 1; other < nodes.length; other++) {
+      assert.ok(
+        Math.abs(nodes[index].position.x - nodes[other].position.x) >= 248 ||
+          Math.abs(nodes[index].position.y - nodes[other].position.y) >= 174
+      )
+    }
+  }
+  context.state.openDetail(2)
+  assert.equal(routes[0].params.id, 2)
+  assert.equal(routes[0].name, 'MemberUserDetail')
+  scope.stop()
+  h.stop()
+})