From 570b0078485541c5ceb778086daaf53c8f06b622 Mon Sep 17 00:00:00 2001
From: "zhonghua.li" <t-systems.d.li@mercedes-benz.com>
Date: Tue, 28 Jul 2026 21:48:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=89=E4=B8=9D=E6=9E=84=E5=BB=BA=E6=A0=91?=
 =?UTF-8?q?=E5=BD=A2=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/lb-fan-management.js                  |  16 +
 src/api/lb-user-coupon.js                     |   8 +
 src/views/lb-business/coupon-manage/index.vue |  70 ++-
 src/views/lb-business/fan-manage/index.vue    | 501 ++++++++++++++----
 4 files changed, 493 insertions(+), 102 deletions(-)

diff --git a/src/api/lb-fan-management.js b/src/api/lb-fan-management.js
index 257aa60..73d74bc 100644
--- a/src/api/lb-fan-management.js
+++ b/src/api/lb-fan-management.js
@@ -39,3 +39,19 @@ export function simulateLbFanLogin(data) {
     data
   })
 }
+
+export function getFanTree(params) {
+  return request({
+    url: '/lbFanManagement/tree',
+    method: 'get',
+    params
+  })
+}
+
+export function recursiveFetchFans(data) {
+  return request({
+    url: '/lbFanManagement/recursive-fetch',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/lb-user-coupon.js b/src/api/lb-user-coupon.js
index 5f3e6b2..274ff8e 100644
--- a/src/api/lb-user-coupon.js
+++ b/src/api/lb-user-coupon.js
@@ -55,3 +55,11 @@ export function exportLbUserCoupon(params) {
     responseType: 'blob'
   })
 }
+
+export function calculateMonthlyAmount(params) {
+  return request({
+    url: '/lbUserCoupon/calculateMonthlyAmount',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/lb-business/coupon-manage/index.vue b/src/views/lb-business/coupon-manage/index.vue
index a15e3bc..016007b 100644
--- a/src/views/lb-business/coupon-manage/index.vue
+++ b/src/views/lb-business/coupon-manage/index.vue
@@ -75,10 +75,11 @@
             {{ formatDateTime(scope.row.createTime) }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" fixed="right" width="140">
+        <el-table-column label="操作" fixed="right" width="280">
           <template slot-scope="scope">
             <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
             <el-button type="text" style="color:#F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button type="text" style="color:#409EFF;" @click="handleCalculateMonthly(scope.row)">计算本月优惠卷总金额</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -197,12 +198,40 @@
         <el-button type="primary" :loading="statLoading" @click="handleStat">统计</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="本月优惠券总金额" :visible.sync="calculateDialogVisible" width="500px" @close="resetCalculateForm">
+      <div v-if="calculateResult" style="padding: 20px;">
+        <div v-if="calculateResult.success" style="text-align: center;">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="用户ID">{{ calculateResult.userId || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="用户昵称">{{ calculateResult.userNickname || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="开始日期">{{ calculateResult.startDate || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="本月优惠券总金额" :span="2">
+              <span style="font-size: 24px; font-weight: bold; color: #F56C6C;">
+                {{ calculateResult.totalAmount != null ? calculateResult.totalAmount.toFixed(2) : '0.00' }}
+              </span>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <div v-else style="text-align: center; color: #F56C6C;">
+          <el-icon size="48" style="margin-bottom: 10px;"><error /></el-icon>
+          <div>{{ calculateResult.message || '计算失败' }}</div>
+        </div>
+      </div>
+      <div v-else>
+        <el-empty description="暂无数据" />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="calculateDialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import {
   addLbUserCoupon,
+  calculateMonthlyAmount,
   deleteLbUserCoupon,
   exportLbUserCoupon,
   getLbUserCouponList,
@@ -238,6 +267,9 @@ export default {
       statDateRange: [],
       statResult: [],
       statTotal: null,
+      calculateDialogVisible: false,
+      calculateLoading: false,
+      calculateResult: null,
       queryParams: {
         current: 1,
         size: 10,
@@ -573,6 +605,42 @@ export default {
       const minutes = String(date.getMinutes()).padStart(2, '0')
       const seconds = String(date.getSeconds()).padStart(2, '0')
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+    handleCalculateMonthly(row) {
+      if (!row.userId) {
+        this.$message.error('缺少用户ID，无法计算')
+        return
+      }
+      this.calculateLoading = true
+      this.calculateResult = null
+      this.calculateDialogVisible = true
+      calculateMonthlyAmount({
+        userId: row.userId,
+        userNickname: row.userNickname,
+        startDate: row.couponDate
+      })
+        .then((res) => {
+          if (res && (res.success === true || res.code === 200 || res.code === 20000)) {
+            this.calculateResult = res.data || res
+          } else {
+            this.calculateResult = {
+              success: false,
+              message: (res && (res.message || res.msg)) || '计算失败'
+            }
+          }
+        })
+        .catch(() => {
+          this.calculateResult = {
+            success: false,
+            message: '计算失败'
+          }
+        })
+        .finally(() => {
+          this.calculateLoading = false
+        })
+    },
+    resetCalculateForm() {
+      this.calculateResult = null
     }
   }
 }
diff --git a/src/views/lb-business/fan-manage/index.vue b/src/views/lb-business/fan-manage/index.vue
index 8e99b03..18fb75c 100644
--- a/src/views/lb-business/fan-manage/index.vue
+++ b/src/views/lb-business/fan-manage/index.vue
@@ -1,103 +1,194 @@
 <template>
   <div class="app-container">
-    <el-card class="filter-container" shadow="never">
-      <el-form :model="queryParams" :inline="true" label-width="90px">
-        <el-form-item label="昵称">
-          <el-input v-model="queryParams.nickname" clearable placeholder="请输入昵称" style="width: 160px" />
-        </el-form-item>
-        <el-form-item label="手机号">
-          <el-input v-model="queryParams.mobile" clearable placeholder="请输入手机号" style="width: 160px" />
-        </el-form-item>
-        <el-form-item label="分享次数">
-          <el-input-number
-            v-model="queryParams.shareNumMin"
-            :min="0"
-            :controls="false"
-            placeholder="最小"
-            style="width: 100px"
+    <el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
+      <el-tab-pane label="粉丝列表" name="list">
+        <el-card class="filter-container" shadow="never">
+          <el-form :model="queryParams" :inline="true" label-width="90px">
+            <el-form-item label="昵称">
+              <el-input v-model="queryParams.nickname" clearable placeholder="请输入昵称" style="width: 160px" />
+            </el-form-item>
+            <el-form-item label="手机号">
+              <el-input v-model="queryParams.mobile" clearable placeholder="请输入手机号" style="width: 160px" />
+            </el-form-item>
+            <el-form-item label="分享次数">
+              <el-input-number
+                v-model="queryParams.shareNumMin"
+                :min="0"
+                :controls="false"
+                placeholder="最小"
+                style="width: 100px"
+              />
+              <span class="range-separator">-</span>
+              <el-input-number
+                v-model="queryParams.shareNumMax"
+                :min="0"
+                :controls="false"
+                placeholder="最大"
+                style="width: 100px"
+              />
+            </el-form-item>
+            <el-form-item label="创建时间">
+              <el-date-picker
+                v-model="createdAtRange"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始"
+                end-placeholder="结束"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :default-time="['00:00:00', '23:59:59']"
+                style="width: 360px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+              <el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="action-container" shadow="never">
+          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+          <el-button
+            type="success"
+            icon="el-icon-search"
+            :loading="discoverLoading"
+            style="margin-left: 12px"
+            @click="openDiscoverFanDialog"
+          >
+            发现粉丝
+          </el-button>
+        </el-card>
+
+        <el-card class="table-container" shadow="never">
+          <el-table v-loading="loading" :data="list" style="width: 100%">
+            <el-table-column label="头像" width="72" align="center">
+              <template slot-scope="scope">
+                <el-avatar v-if="scope.row.avatar" :size="40" :src="scope.row.avatar" />
+                <el-avatar v-else :size="40" icon="el-icon-user-solid" />
+              </template>
+            </el-table-column>
+            <el-table-column label="粉丝ID" prop="id" min-width="100" show-overflow-tooltip />
+            <el-table-column label="昵称" prop="nickname" min-width="120" show-overflow-tooltip />
+            <el-table-column label="手机号" prop="mobile" min-width="120" show-overflow-tooltip />
+            <el-table-column label="分享次数" prop="shareNum" width="100" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.shareNum == null ? '-' : scope.row.shareNum }}
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" prop="createdAt" min-width="160">
+              <template slot-scope="scope">
+                {{ formatDateTime(scope.row.createdAt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="140">
+              <template slot-scope="scope">
+                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+                <el-button type="text" style="color:#F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination
+            :current-page="queryParams.current"
+            :page-size="queryParams.size"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
           />
-          <span class="range-separator">-</span>
-          <el-input-number
-            v-model="queryParams.shareNumMax"
-            :min="0"
-            :controls="false"
-            placeholder="最大"
-            style="width: 100px"
-          />
-        </el-form-item>
-        <el-form-item label="创建时间">
-          <el-date-picker
-            v-model="createdAtRange"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始"
-            end-placeholder="结束"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :default-time="['00:00:00', '23:59:59']"
-            style="width: 360px"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
-          <el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+        </el-card>
+      </el-tab-pane>
 
-    <el-card class="action-container" shadow="never">
-      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
-      <el-button
-        type="success"
-        icon="el-icon-search"
-        :loading="discoverLoading"
-        style="margin-left: 12px"
-        @click="openDiscoverFanDialog"
-      >
-        发现粉丝
-      </el-button>
-    </el-card>
+      <el-tab-pane label="粉丝树形" name="tree">
+        <el-card class="filter-container" shadow="never">
+          <el-form :model="treeQueryParams" :inline="true" label-width="90px">
+            <el-form-item label="搜索">
+              <el-input
+                v-model="treeQueryParams.searchText"
+                clearable
+                placeholder="请输入昵称或手机号搜索"
+                style="width: 260px"
+                @keyup.enter.native="handleTreeQuery"
+              />
+            </el-form-item>
+            <el-form-item label="父亲手机号">
+              <el-input
+                v-model="treeQueryParams.parentMobile"
+                clearable
+                placeholder="为空时查询所有根节点"
+                style="width: 160px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" @click="handleTreeQuery">查询</el-button>
+              <el-button icon="el-icon-delete" @click="resetTreeQuery">清空</el-button>
+              <el-button type="success" icon="el-icon-refresh" @click="openRecursiveFetchDialog">递归发现粉丝</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
 
-    <el-card class="table-container" shadow="never">
-      <el-table v-loading="loading" :data="list" style="width: 100%">
-        <el-table-column label="头像" width="72" align="center">
-          <template slot-scope="scope">
-            <el-avatar v-if="scope.row.avatar" :size="40" :src="scope.row.avatar" />
-            <el-avatar v-else :size="40" icon="el-icon-user-solid" />
-          </template>
-        </el-table-column>
-        <el-table-column label="粉丝ID" prop="id" min-width="100" show-overflow-tooltip />
-        <el-table-column label="昵称" prop="nickname" min-width="120" show-overflow-tooltip />
-        <el-table-column label="手机号" prop="mobile" min-width="120" show-overflow-tooltip />
-        <el-table-column label="分享次数" prop="shareNum" width="100" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.shareNum == null ? '-' : scope.row.shareNum }}
-          </template>
-        </el-table-column>
-        <el-table-column label="创建时间" prop="createdAt" min-width="160">
-          <template slot-scope="scope">
-            {{ formatDateTime(scope.row.createdAt) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" fixed="right" width="140">
-          <template slot-scope="scope">
-            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button type="text" style="color:#F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+        <el-card class="tree-container" shadow="never">
+          <el-tree
+            ref="fanTree"
+            :data="treeData"
+            :props="treeProps"
+            :filter-node-method="filterTreeNode"
+            :loading="treeLoading"
+            node-key="mobile"
+            default-expand-all
+            class="fan-tree"
+          >
+            <span slot-scope="{ node, data }" class="fan-tree-node">
+              <div class="fan-card">
+                <div class="fan-row">
+                  <el-tooltip effect="dark" content="点击复制ID" placement="top">
+                    <span class="fan-id" @click="copyToClipboard(String(data.id))">
+                      {{ data.id || '-' }}
+                    </span>
+                  </el-tooltip>
+                  <span class="fan-separator">|</span>
+                  <el-tooltip effect="dark" content="点击复制昵称" placement="top">
+                    <span class="fan-nickname" @click="copyToClipboard(data.nickname || '')">
+                      {{ data.nickname || '-' }}
+                    </span>
+                  </el-tooltip>
+                  <span class="fan-separator">|</span>
+                  <el-tooltip effect="dark" content="点击复制手机号" placement="top">
+                    <span class="fan-mobile" @click="copyToClipboard(data.mobile || '')">
+                      {{ data.mobile || '-' }}
+                    </span>
+                  </el-tooltip>
+                  <span class="fan-separator">|</span>
+                  <el-tooltip effect="dark" content="点击复制创建时间" placement="top">
+                    <span class="fan-detail" @click="copyToClipboard(data.createdAt || '')">
+                      {{ data.createdAt ? formatDateTime(data.createdAt) : '-' }}
+                    </span>
+                  </el-tooltip>
+                  <span class="fan-separator">|</span>
+                  <el-tooltip effect="dark" content="点击复制自购奖金" placement="top">
+                    <span class="fan-detail" @click="copyToClipboard(String(data.selfBonus))">
+                      {{ data.selfBonus != null ? data.selfBonus : '-' }}
+                    </span>
+                  </el-tooltip>
+                  <span class="fan-separator">|</span>
+                  <el-tooltip effect="dark" content="点击复制分享奖金" placement="top">
+                    <span class="fan-detail" @click="copyToClipboard(String(data.shareBonus))">
+                      {{ data.shareBonus != null ? data.shareBonus : '-' }}
+                    </span>
+                  </el-tooltip>
+                  <span v-if="data.shareNum != null && data.shareNum > 0" class="share-tag">
+                    {{ data.shareNum }}次
+                  </span>
+                </div>
+              </div>
+            </span>
+          </el-tree>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
 
-      <el-pagination
-        :current-page="queryParams.current"
-        :page-size="queryParams.size"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </el-card>
-
-    <el-dialog title="发现粉丝" :visible.sync="discoverDialogVisible" width="560px" @close="resetDiscoverForm">
+    <el-dialog title="递归发现粉丝" :visible.sync="discoverDialogVisible" width="560px" @close="resetDiscoverForm">
       <el-form ref="discoverFormRef" :model="discoverForm" :rules="discoverFormRules" label-width="100px">
         <el-form-item label="租户ID">
           <el-input :value="discoverTenantIdDisplay" disabled placeholder="未获取到租户ID" />
@@ -117,6 +208,18 @@
             placeholder="选填，未填默认 123456"
           />
         </el-form-item>
+        <el-form-item label="最大递归深度">
+          <el-input-number
+            v-model="discoverForm.maxDepth"
+            :min="0"
+            :controls-position="right"
+            style="width: 100%"
+            placeholder="0 或不传时不限深度"
+          />
+        </el-form-item>
+        <el-form-item label="跳过已存在粉丝">
+          <el-switch v-model="discoverForm.skipExisting" active-text="是" inactive-text="否" />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="discoverDialogVisible = false">取消</el-button>
@@ -163,8 +266,9 @@
 import {
   addLbFanManagement,
   deleteLbFanManagement,
+  getFanTree,
   getLbFanManagementList,
-  simulateLbFanLogin,
+  recursiveFetchFans,
   updateLbFanManagement
 } from '@/api/lb-fan-management'
 import { getBusinessHeaders } from '@/utils/business-headers'
@@ -173,13 +277,16 @@ export default {
   name: 'LbFanManage',
   data() {
     return {
+      activeTab: 'list',
       loading: false,
       submitLoading: false,
       discoverLoading: false,
       discoverDialogVisible: false,
       discoverForm: {
         mobileListText: '',
-        password: ''
+        password: '',
+        maxDepth: null,
+        skipExisting: true
       },
       discoverFormRules: {
         mobileListText: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
@@ -209,6 +316,16 @@ export default {
       formRules: {
         nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
         mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
+      },
+      treeLoading: false,
+      treeData: [],
+      treeQueryParams: {
+        searchText: '',
+        parentMobile: ''
+      },
+      treeProps: {
+        children: 'children',
+        label: 'nickname'
       }
     }
   },
@@ -217,10 +334,79 @@ export default {
       return this.getTenantIdFromBusinessHeaders()
     }
   },
+  watch: {
+    'treeQueryParams.searchText': function(val) {
+      this.$refs.fanTree && this.$refs.fanTree.filter(val)
+    }
+  },
   created() {
     this.fetchList()
   },
   methods: {
+    handleTabChange(tabName) {
+      if (tabName === 'tree') {
+        this.fetchTreeData()
+      }
+    },
+    fetchTreeData() {
+      const tenantId = this.getTenantIdFromBusinessHeaders()
+      if (!tenantId) {
+        this.$message.error('未获取到租户ID，请先登录或配置业务请求头中的租户')
+        return
+      }
+      const params = { tenantId }
+      const parentMobile = (this.treeQueryParams.parentMobile || '').trim()
+      if (parentMobile) {
+        params.parentMobile = parentMobile
+      }
+      this.treeLoading = true
+      getFanTree(params)
+        .then((res) => {
+          if (res && (res.code === 20000 || res.code === 200 || res.success === true)) {
+            this.treeData = Array.isArray(res.data) ? res.data : []
+          } else {
+            this.treeData = []
+          }
+        })
+        .catch(() => {
+          this.treeData = []
+        })
+        .finally(() => {
+          this.treeLoading = false
+        })
+    },
+    handleTreeQuery() {
+      this.fetchTreeData()
+    },
+    resetTreeQuery() {
+      this.treeQueryParams = {
+        searchText: '',
+        parentMobile: ''
+      }
+      this.fetchTreeData()
+    },
+    filterTreeNode(value, data) {
+      if (!value) return true
+      const text = (data.id || '') + (data.nickname || '') + (data.mobile || '')
+      return text.indexOf(value) !== -1
+    },
+    copyToClipboard(text) {
+      if (!text) return
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.left = '-9999px'
+      document.body.appendChild(textarea)
+      textarea.select()
+      try {
+        document.execCommand('copy')
+        this.$message.success('复制成功')
+      } catch (err) {
+        this.$message.error('复制失败')
+      } finally {
+        document.body.removeChild(textarea)
+      }
+    },
     getTenantIdFromBusinessHeaders() {
       const headers = getBusinessHeaders()
       const value = headers && headers['X-Tenant-Id']
@@ -295,10 +481,15 @@ export default {
         this.$refs.discoverFormRef && this.$refs.discoverFormRef.clearValidate()
       })
     },
+    openRecursiveFetchDialog() {
+      this.discoverDialogVisible = true
+    },
     resetDiscoverForm() {
       this.discoverForm = {
         mobileListText: '',
-        password: ''
+        password: '',
+        maxDepth: null,
+        skipExisting: true
       }
       this.$refs.discoverFormRef && this.$refs.discoverFormRef.resetFields()
     },
@@ -327,17 +518,19 @@ export default {
         const payload = { tenantId, mobiles }
         const password = (this.discoverForm.password || '').trim()
         if (password) payload.password = password
+        if (this.discoverForm.maxDepth != null) payload.maxDepth = this.discoverForm.maxDepth
+        if (this.discoverForm.skipExisting != null) payload.skipExisting = this.discoverForm.skipExisting
         this.discoverLoading = true
-        simulateLbFanLogin(payload)
+        recursiveFetchFans(payload)
           .then((res) => {
             const isSuccess = res && (res.success === true || res.code === 200 || res.code === 20000)
             if (!isSuccess) {
-              this.$message.error((res && (res.message || res.msg)) || '发现粉丝失败')
+              this.$message.error((res && (res.message || res.msg)) || '递归发现粉丝失败')
               return
             }
-            this.$message.success((res && res.message) || '发现粉丝完成')
+            this.$message.success((res && res.message) || '递归发现粉丝完成')
             this.discoverDialogVisible = false
-            this.fetchList()
+            this.fetchTreeData()
           })
           .finally(() => {
             this.discoverLoading = false
@@ -480,5 +673,111 @@ export default {
     text-align: center;
     color: #909399;
   }
+
+  .tree-container {
+    .fan-tree {
+      li {
+        margin-bottom: 8px;
+
+        &::before,
+        &::after {
+          border-color: #e4e7ed;
+        }
+      }
+    }
+
+    .fan-tree-node {
+      display: block;
+    }
+
+    .fan-card {
+      padding: 10px 16px;
+      background: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #e4e7ed;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: #f5f7fa;
+        border-color: #409eff;
+        box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
+      }
+    }
+
+    .fan-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .fan-id {
+      font-size: 13px;
+      font-weight: 500;
+      color: #409eff;
+      cursor: pointer;
+      transition: color 0.3s ease;
+      font-family: 'Monaco', 'Menlo', monospace;
+
+      &:hover {
+        color: #66b1ff;
+      }
+    }
+
+    .fan-nickname {
+      font-size: 15px;
+      font-weight: 600;
+      color: #303133;
+      cursor: pointer;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+
+    .fan-mobile {
+      font-size: 14px;
+      color: #606266;
+      cursor: pointer;
+      transition: color 0.3s ease;
+      font-family: 'Monaco', 'Menlo', monospace;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+
+    .fan-separator {
+      color: #dcdfe6;
+      font-size: 14px;
+    }
+
+    .share-tag {
+      display: inline-flex;
+      align-items: center;
+      font-size: 12px;
+      padding: 2px 8px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
+      border-radius: 12px;
+      font-weight: 500;
+      margin-left: auto;
+    }
+
+    .fan-detail {
+      font-size: 13px;
+      color: #606266;
+      cursor: pointer;
+      transition: color 0.3s ease;
+      font-family: 'Monaco', 'Menlo', monospace;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
 }
 </style>