vist_go_uniApp/packageUser/pages/team/index.vue

<template>
	<view class="team-container">
		<!-- 团队数据概览 -->
		<view class="team-overview">
			<view class="overview-card">
				<view class="card-header">
					<text class="card-title">团队总览</text>
				</view>
				<view class="stats-grid">
					<view class="stat-item primary">
						<view class="stat-icon">
							<u-icon name="account" size="36" color="#8B5CF6"></u-icon>
						</view>
						<view class="stat-content">
							<text class="stat-value">{{teamData.level1Count}}</text>
							<text class="stat-label">直属下级</text>
						</view>
					</view>
					<view class="stat-item secondary">
						<view class="stat-icon">
							<u-icon name="account-fill" size="36" color="#6366F1"></u-icon>
						</view>
						<view class="stat-content">
							<text class="stat-value">{{teamData.level2Count}}</text>
							<text class="stat-label">间接下级</text>
						</view>
					</view>
					<view class="stat-item success">
						<view class="stat-icon">
							<u-icon name="shopping-cart" size="36" color="#10B981"></u-icon>
						</view>
						<view class="stat-content">
							<text class="stat-value">{{teamData.totalBuyCount}}</text>
							<text class="stat-label">总购买数</text>
						</view>
					</view>
					<view class="stat-item warning">
						<view class="stat-icon">
							<u-icon name="rmb-circle" size="36" color="#F59E0B"></u-icon>
						</view>
						<view class="stat-content">
							<text class="stat-value">¥{{teamData.totalAmount}}</text>
							<text class="stat-label">总金额</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 团队成员列表 -->
		<view class="team-list">
			<view class="list-header">
				<view class="header-left">
					<text class="header-title">我的团队</text>
				</view>
				<view class="header-right">
					<view class="count-display">
						<text class="total-count">共{{teamData.totalCount}}人</text>
						<view class="level-indicators">
							<view class="level-indicator" v-if="teamData.level1Count > 0">
								<view class="indicator-dot level-1"></view>
								<text>{{teamData.level1Count}}人(1级)</text>
							</view>
							<view class="level-indicator" v-if="teamData.level2Count > 0">
								<view class="indicator-dot level-2"></view>
								<text>{{teamData.level2Count}}人(2级)</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 树形结构展示 -->
			<view class="team-tree">
				<!-- 根节点（我） -->
				<view class="tree-node root-node" :data-level="0">
					<view class="node-content" @click="toggleNode('root')">
						<view class="node-info">
							<view class="avatar-wrapper">
								<image class="avatar" :src="'/static/images/avatar.png'" mode="aspectFill"></image>
								<view class="avatar-tag root-tag">我</view>
							</view>
							<view class="info">
								<text class="name">我的账号</text>
								<text class="level">{{getLevelText(user.level || 0)}}</text>
								<!-- 个人购买统计 -->
								<view class="personal-stats"
									v-if="personalStats.productCount > 0 || personalStats.totalAmount > 0">
									<text class="stat">购买{{personalStats.productCount}}件</text>
									<text class="stat">金额¥{{personalStats.totalAmount}}</text>
								</view>
								<view class="team-summary" v-if="teamData.totalCount > 0">
									<text class="summary-text">团队{{teamData.totalCount}}人</text>
								</view>
							</view>
						</view>
						<view class="node-actions">
							<view class="expand-info" v-if="teamData.level1Count > 0">
								<text class="member-preview">{{teamData.level1Count}}个直属</text>
							</view>
							<view class="btn-order1" @click.stop="viewOrders(user.id)">
								<text>我的订单</text>
							</view>
							<view class="expand-icon" :class="{ 'expanded': expandedNodes.root }">
								<u-icon :name="expandedNodes.root ? 'arrow-up' : 'arrow-down'" size="28"
									:color="expandedNodes.root ? '#8B5CF6' : '#64748b'"></u-icon>
							</view>
						</view>
					</view>

					<!-- 子节点 -->
					<view class="children level-1-children" v-if="expandedNodes.root && teamData.members.length > 0">
						<view class="tree-node level-1-node" v-for="(member, index) in teamData.members"
							:key="member.id" :data-level="1">
							<view class="node-content" @click="toggleNode(member.id)">
								<view class="node-info">
									<view class="avatar-wrapper">
										<image class="avatar" :src="member.avatar || '/static/images/avatar.png'"
											mode="aspectFill"></image>
										<view class="level-badge level-1">L1</view>
									</view>
									<view class="info">
										<text class="name">{{member.account}}</text>
										<text class="level">{{getLevelText(member.level)}}</text>
										<view class="member-stats">
											<text class="stat">购买{{member.buyCount || 0}}件</text>
											<text class="stat">金额¥{{formatAmount(member.amount)}}</text>
										</view>
										<view class="team-summary" v-if="member.hasChildren">
											<text class="summary-text">有下级团队</text>
										</view>
									</view>
								</view>
								<view class="node-actions">
									<view class="action-buttons">
										<view class="btn-order" @click.stop="viewOrders(member.id)">
											<u-icon name="list" size="22" color="#8B5CF6"></u-icon>
											<text>订单</text>
										</view>
										<!-- <view class="member-preview" v-if="member.hasChildren">
											<view class="preview-indicator">
												<u-icon name="arrow-right" size="16" color="#6366F1"></u-icon>
											</view>
											<text class="preview-label">有下级</text>
										</view> -->
									</view>
									<view class="expand-icon" v-if="member.hasChildren"
										:class="{ 'expanded': expandedNodes[member.id] }">
										<u-icon :name="expandedNodes[member.id] ? 'arrow-up' : 'arrow-down'" size="26"
											:color="expandedNodes[member.id] ? '#8B5CF6' : '#64748b'"></u-icon>
									</view>
								</view>
							</view>

							<!-- 孙节点 -->
							<view class="children level-2-children"
								v-if="expandedNodes[member.id] && member.children && member.children.length > 0">
								<view class="tree-node level-2-node" v-for="(child, childIndex) in member.children"
									:key="child.id" :data-level="2">
									<view class="node-content">
										<view class="node-info">
											<view class="avatar-wrapper">
												<image class="avatar" :src="child.avatar || '/static/images/avatar.png'"
													mode="aspectFill"></image>
												<view class="level-badge level-2">L2</view>
											</view>
											<view class="info">
												<text class="name">{{child.account}}</text>
												<text class="level">{{getLevelText(child.level)}}</text>
												<view class="member-stats">
													<text class="stat">购买{{child.buyCount || 0}}件</text>
													<text class="stat">金额¥{{formatAmount(child.amount)}}</text>
												</view>
											</view>
										</view>
										<view class="node-actions">
											<view class="action-buttons">
												<view class="btn-order" @click.stop="viewOrders(child.id)">
													<u-icon name="list" size="20" color="#8B5CF6"></u-icon>
													<text>订单</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="teamData.members.length === 0" class="empty-state">
					<view class="empty-content">
						<view class="flex-items-plus">
							<image src="@/static/images/empty.png" class="empty"></image>
						</view>
						<text class="empty-title">暂无团队成员</text>
						<text class="empty-desc">您还没有团队成员，快去邀请朋友加入吧！</text>
						<view class="empty-actions">
							<view class="action-button primary" @click="inviteFriends">
								<u-icon name="plus" size="24" color="#fff"></u-icon>
								<text>邀请好友</text>
							</view>
							<view class="action-button secondary" @click="refreshData">
								<u-icon name="reload" size="24" color="#8B5CF6"></u-icon>
								<text>刷新数据</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMemberlazyList,
		memberDetail,
		teamStatistics,
		countPaidProducts
	} from '@/config/api';

	export default {
		data() {
			return {
				expandedNodes: {
					root: true // 默认展开根节点
				},
				user: {},
				personalStats: {
					productCount: 0,
					totalAmount: '0.00'
				},
				teamData: {
					level1Count: 0,
					level2Count: 0,
					totalBuyCount: 0,
					totalAmount: '0.00',
					totalCount: 0,
					members: []
				}
			}
		},
		onLoad() {
			this.getMember()
			this.getTeamStatistics()
			this.getPersonalStats()
		},
		methods: {
			getMember() {
				memberDetail().then((res) => {
					this.user = res.data
					this.getTeamData()
				})
			},

			async getPersonalStats() {
				try {
					const response = await countPaidProducts()
					if (response.success && response.data) {
						const data = response.data
						this.personalStats.productCount = parseInt(data.productCount) || 0
						this.personalStats.totalAmount = parseFloat(data.totalAmount || 0).toFixed(2)
					}
				} catch (error) {
					console.error('获取个人购买统计数据失败:', error)
				}
			},

			async getTeamStatistics() {
				try {
					const response = await teamStatistics()
					if (response.success && response.data) {
						const data = response.data
						this.teamData.totalCount = parseInt(data.totalTeamMembers) || 0
						this.teamData.level1Count = parseInt(data.directSubordinates) || 0
						this.teamData.level2Count = parseInt(data.secondLevelSubordinates) || 0
						this.teamData.totalBuyCount = parseInt(data.totalPurchaseCount) || 0

						const amount = data.totalOrderAmount
						if (amount !== null && amount !== undefined && amount !== '') {
							this.teamData.totalAmount = parseFloat(amount).toFixed(2)
						} else {
							this.teamData.totalAmount = '0.00'
						}
					}
				} catch (error) {
					console.error('获取团队统计数据失败:', error)
				}
			},

			async getTeamData() {
				try {
					const response = await getMemberlazyList({
						id: this.user.id
					})

					if (response.success && response.data) {
						// 后端已经返回树形结构，直接使用
						this.teamData.members = response.data;

						// 更新统计数据
						this.updateTeamStats();

						// 默认展开所有有子节点的成员
						this.expandAllNodes();
					}
				} catch (error) {
					console.error('获取团队数据失败:', error)
					uni.showToast({
						title: '获取团队数据失败',
						icon: 'none'
					})
				}
			},

			buildTreeStructure(flatData) {
				if (!flatData || flatData.length === 0) return [];

				console.log('开始构建树形结构，原始数据:', flatData);
				console.log('当前用户ID:', this.user.id);

				// 数据预处理
				const processedData = flatData.map(member => ({
					...member,
					buyCount: member.buyCount || 0,
					amount: member.amount || 0,
					hasChildren: member.hasChildren || false,
					children: []
				}));

				console.log('预处理后的数据:', processedData);

				// 创建ID映射
				const memberMap = {};
				processedData.forEach(member => {
					memberMap[member.id] = member;
				});

				console.log('成员ID映射:', memberMap);

				// 构建树形结构
				const treeData = [];
				const level1Members = [];
				const level2Members = [];

				processedData.forEach(member => {
					console.log(
						`处理成员: ${member.account}, ID: ${member.id}, parentId: ${member.parentId}, hasChildren: ${member.hasChildren}`
					);

					// 判断是否为一级成员（直接下级）
					if (!member.parentId || member.parentId === this.user.id) {
						level1Members.push(member);
						treeData.push(member);
						console.log(`添加一级成员: ${member.account}`);
					} else {
						// 二级成员，添加到父级的children中
						level2Members.push(member);
						const parent = memberMap[member.parentId];
						if (parent) {
							if (!parent.children) {
								parent.children = [];
							}
							parent.children.push(member);
							parent.hasChildren = true;
							console.log(`将二级成员 ${member.account} 添加到父级 ${parent.account} 的children中`);
						} else {
							console.log(`警告: 找不到父级成员 ${member.parentId}，无法添加二级成员 ${member.account}`);
						}
					}
				});

				console.log('一级成员数量:', level1Members.length);
				console.log('二级成员数量:', level2Members.length);
				console.log('构建的树形结构:', treeData);

				return treeData;
			},

			updateTeamStats() {
				let level1Count = 0;
				let level2Count = 0;
				let totalBuyCount = 0;
				let totalAmount = 0;

				this.teamData.members.forEach(member => {
					level1Count++;
					totalBuyCount += parseInt(member.buyCount) || 0;
					totalAmount += parseFloat(member.amount) || 0;

					if (member.children && member.children.length > 0) {
						level2Count += member.children.length;
						member.children.forEach(child => {
							totalBuyCount += parseInt(child.buyCount) || 0;
							totalAmount += parseFloat(child.amount) || 0;
						});
					}
				});

				// 更新统计数据
				this.teamData.level1Count = level1Count;
				this.teamData.level2Count = level2Count;
				this.teamData.totalCount = level1Count + level2Count;
				this.teamData.totalBuyCount = totalBuyCount;
				this.teamData.totalAmount = totalAmount.toFixed(2);
			},

			toggleNode(nodeId) {
				const isExpanding = !this.expandedNodes[nodeId];

				this.$set(this.expandedNodes, nodeId, isExpanding);

				if (nodeId === 'root') return;

				const member = this.findMemberById(nodeId);
				if (!member) return;

				if (isExpanding && member.children && member.children.length > 0) {
					uni.showToast({
						title: `展开${member.children.length}个下级`,
						icon: 'success',
						duration: 1000
					});
				}
			},

			findMemberById(id) {
				const searchInMembers = (members) => {
					for (const member of members) {
						if (member.id === id) return member;
						if (member.children && member.children.length > 0) {
							const found = searchInMembers(member.children);
							if (found) return found;
						}
					}
					return null;
				};
				return searchInMembers(this.teamData.members);
			},

			getLevelText(level) {
				const levelMap = {
					0: '普通会员',
					1: 'S级会员',
					2: 'SS级会员',
					3: 'SSS级会员'
				}
				return levelMap[level] || '普通会员'
			},

			formatAmount(amount) {
				const numAmount = parseFloat(amount) || 0
				return numAmount.toFixed(2)
			},

			viewOrders(memberId) {
				uni.navigateTo({
					url: `/packageOrder/pages/list/record?memberId=${memberId}`
				})
			},

			inviteFriends() {
				this.$route('/packageUser/pages/share/index')
			},

			// 默认展开所有有子节点的成员
			expandAllNodes() {
				this.teamData.members.forEach(member => {
					if (member.hasChildren && member.children && member.children.length > 0) {
						this.$set(this.expandedNodes, member.id, true);
					}
				});
			},

			refreshData() {
				uni.showLoading({
					title: '刷新中...'
				});

				this.teamData = {
					level1Count: 0,
					level2Count: 0,
					totalBuyCount: 0,
					totalAmount: '0.00',
					totalCount: 0,
					members: []
				};

				Promise.all([
					this.getTeamStatistics(),
					this.getTeamData(),
					this.getPersonalStats()
				]).finally(() => {
					uni.hideLoading();
					uni.showToast({
						title: '刷新完成',
						icon: 'success'
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team-container {
		min-height: 100vh;
		background: #f8fafc;
		padding: 20rpx;

		.team-overview {
			margin-bottom: 20rpx;

			.overview-card {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;
				box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
				border: 1rpx solid #e5e7eb;

				.card-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #f3f4f6;

					.card-title {
						font-size: 36rpx;
						font-weight: 600;
						color: #111827;
					}
				}

				.stats-grid {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 20rpx;

					.stat-item {
						display: flex;
						align-items: center;
						padding: 24rpx;
						border-radius: 16rpx;
						transition: all 0.3s ease;

						&.primary {
							background: #f8fafc;
							border: 1rpx solid #e2e8f0;
						}

						&.secondary {
							background: #f1f5f9;
							border: 1rpx solid #d1d5db;
						}

						&.success {
							background: #f0fdf4;
							border: 1rpx solid #bbf7d0;
						}

						&.warning {
							background: #fefce8;
							border: 1rpx solid #fde047;
						}

						.stat-icon {
							margin-right: 16rpx;
							padding: 12rpx;
							background: #ffffff;
							border-radius: 12rpx;
							box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
						}

						.stat-content {
							flex: 1;

							.stat-value {
								font-size: 32rpx;
								font-weight: 600;
								color: #111827;
								margin-bottom: 4rpx;
								display: block;
							}

							.stat-label {
								font-size: 24rpx;
								color: #6b7280;
							}
						}
					}
				}
			}
		}

		.team-list {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
			border: 1rpx solid #e5e7eb;

			.list-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 0 0 30rpx;
				border-bottom: 1rpx solid #f3f4f6;
				margin-bottom: 30rpx;

				.header-left {
					.header-title {
						font-size: 36rpx;
						font-weight: 600;
						color: #111827;
					}
				}

				.header-right {
					text-align: right;

					.count-display {
						.total-count {
							font-size: 28rpx;
							color: #111827;
							font-weight: 600;
							margin-bottom: 8rpx;
							display: block;
						}

						.level-indicators {
							display: flex;
							flex-direction: column;
							gap: 6rpx;

							.level-indicator {
								display: flex;
								align-items: center;
								gap: 8rpx;
								font-size: 22rpx;
								color: #6b7280;

								.indicator-dot {
									width: 8rpx;
									height: 8rpx;
									border-radius: 50%;

									&.level-1 {
										background: #3b82f6;
									}

									&.level-2 {
										background: #6b7280;
									}
								}
							}
						}
					}
				}
			}

			.team-tree {
				padding: 20rpx;

				.tree-node {
					position: relative;
					margin-bottom: 16rpx;

					&[data-level="0"] {
						z-index: 10;
					}

					&[data-level="1"] {
						margin-left: 40rpx;
						z-index: 9;
					}

					&[data-level="2"] {
						margin-left: 80rpx;
						z-index: 8;
					}

					&.root-node {
						margin-left: 0;

						.node-content {
							background: #f8fafc;
							border-radius: 16rpx;
							padding: 30rpx;
							box-shadow: 0 2rpx 12rpx rgba(59, 130, 246, 0.08);
							transition: all 0.3s ease;
							border: 1rpx solid #e2e8f0;
							position: relative;
							overflow: hidden;

							&:active {
								transform: scale(0.98);
							}
						}
					}

					.personal-stats {
						display: flex;
						flex-wrap: nowrap;
						gap: 8rpx;
						margin-top: 8rpx;
						margin-bottom: 8rpx;

						.stat {
							font-size: 20rpx;
							color: #6b7280;
							background: #f9fafb;
							padding: 4rpx 10rpx;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							gap: 4rpx;
							white-space: nowrap;
							border: 1rpx solid #e5e7eb;

							&::before {
								content: '';
								width: 4rpx;
								height: 4rpx;
								background: #3b82f6;
								border-radius: 50%;
								flex-shrink: 0;
							}
						}
					}

					.node-content {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						background: #fff;
						border-radius: 16rpx;
						padding: 20rpx;
						border: 1rpx solid #e5e7eb;
						transition: all 0.3s ease;
						position: relative;
						overflow: hidden;
						box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);

						&:active {
							transform: scale(0.98);
						}

						.node-info {
							display: flex;
							align-items: flex-start;
							flex: 1;
							min-width: 0;

							.avatar-wrapper {
								position: relative;
								margin-right: 16rpx;
								flex-shrink: 0;

								.avatar {
									width: 64rpx;
									height: 64rpx;
									border-radius: 50%;
									background-color: #f9fafb;
									border: 1rpx solid #e5e7eb;
								}

								.avatar-tag,
								.root-tag {
									position: absolute;
									bottom: -4rpx;
									right: -4rpx;
									background: #3b82f6;
									color: #fff;
									font-size: 18rpx;
									padding: 2rpx 8rpx;
									border-radius: 8rpx;
									border: 1rpx solid #fff;
									font-weight: 600;
								}

								.level-badge {
									position: absolute;
									top: -8rpx;
									left: -8rpx;
									font-size: 16rpx;
									padding: 2rpx 6rpx;
									border-radius: 6rpx;
									color: #fff;
									font-weight: bold;
									border: 1rpx solid #fff;

									&.level-1 {
										background: #3b82f6;
									}

									&.level-2 {
										background: #6b7280;
									}
								}
							}

							.info {
								flex: 1;
								min-width: 0;

								.name {
									font-size: 28rpx;
									color: #111827;
									font-weight: 600;
									margin-bottom: 6rpx;
									width: 100%;
									display: block;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									max-width: 300rpx;
								}

								.level {
									font-size: 22rpx;
									color: #6b7280;
									margin-bottom: 8rpx;
									display: flex;
									align-items: center;
									gap: 6rpx;

									&::before {
										content: '';
										width: 6rpx;
										height: 6rpx;
										background: #3b82f6;
										border-radius: 50%;
										flex-shrink: 0;
									}
								}

								.member-stats {
									display: flex;
									white-space: nowrap;
									flex-wrap: nowrap;
									gap: 8rpx;
									margin-bottom: 8rpx;

									.stat {
										white-space: nowrap;
										flex-wrap: nowrap;
										font-size: 20rpx;
										color: #6b7280;
										background: #f9fafb;
										padding: 4rpx 10rpx;
										border-radius: 8rpx;
										display: flex;
										align-items: center;
										gap: 4rpx;
										white-space: nowrap;
										border: 1rpx solid #e5e7eb;

										&::before {
											content: '';
											width: 4rpx;
											height: 4rpx;
											background: #3b82f6;
											border-radius: 50%;
											flex-shrink: 0;
										}
									}
								}

								.team-summary {
									display: flex;
									gap: 12rpx;

									.summary-text {
										font-size: 20rpx;
										color: #6b7280;
										background: rgba(107, 114, 128, 0.1);
										padding: 4rpx 10rpx;
										border-radius: 8rpx;
										border: 1rpx solid rgba(107, 114, 128, 0.2);
										font-weight: 500;
									}
								}
							}
						}

						.node-actions {
							display: flex;
							align-items: center;
							gap: 12rpx;
							flex-shrink: 0;

							.action-buttons {
								display: flex;
								align-items: center;
								gap: 10rpx;

								.btn-order {
									display: flex;
									align-items: center;
									gap: 4rpx;
									background: rgba(59, 130, 246, 0.1);
									padding: 8rpx 12rpx;
									border-radius: 8rpx;
									transition: all 0.2s ease;
									border: 1rpx solid rgba(59, 130, 246, 0.2);

									&:active {
										transform: scale(0.95);
										background: rgba(59, 130, 246, 0.15);
									}

									text {
										font-size: 20rpx;
										color: #3b82f6;
										font-weight: 500;
									}
								}

								.member-preview {
									display: flex;
									flex-direction: column;
									align-items: center;
									text-align: center;

									.preview-label {
										font-size: 18rpx;
										color: #6b7280;
									}
								}
							}

							.expand-icon {
								background: rgba(107, 114, 128, 0.1);
								padding: 8rpx;
								border-radius: 8rpx;
								transition: all 0.3s ease;

								&.expanded {
									background: rgba(59, 130, 246, 0.1);
									transform: rotate(180deg);
								}
							}
						}
					}

					.children {
						margin-top: 12rpx;
						position: relative;

						&.level-1-children {
							padding-left: 20rpx;
							border-left: 2rpx solid rgba(59, 130, 246, 0.2);
						}

						&.level-2-children {
							border-left: 2rpx solid rgba(107, 114, 128, 0.2);
						}

						&::before {
							content: '';
							position: absolute;
							left: -5rpx;
							top: 0;
							width: 8rpx;
							height: 8rpx;
							border-radius: 50%;
							background: rgba(59, 130, 246, 0.4);
						}

						.level-2-children::before {
							background: rgba(107, 114, 128, 0.4);
						}
					}

					&.level-1-node .node-content {
						background: #f8fafc;
						border: 1rpx solid rgba(59, 130, 246, 0.15);

						.avatar-wrapper .avatar {
							width: 60rpx;
							height: 60rpx;
						}

						.info .name {
							font-size: 26rpx;
						}
					}

					&.level-2-node .node-content {
						background: #f1f5f9;
						border: 1rpx solid rgba(107, 114, 128, 0.15);

						.avatar-wrapper .avatar {
							width: 56rpx;
							height: 56rpx;
						}

						.info .name {
							font-size: 24rpx;
						}

						.member-stats .stat {
							font-size: 18rpx;
						}
					}
				}
			}
		}

		.empty-state {
			padding: 80rpx 40rpx;

			.empty-content {
				text-align: center;

				.empty-title {
					font-size: 32rpx;
					color: #111827;
					font-weight: 600;
					margin-bottom: 16rpx;
					display: block;
				}

				.empty-desc {
					font-size: 26rpx;
					color: #6b7280;
					margin-bottom: 40rpx;
					display: block;
					line-height: 1.5;
				}

				.empty-actions {
					display: flex;
					justify-content: center;
					gap: 20rpx;

					.action-button {
						display: flex;
						align-items: center;
						gap: 8rpx;
						padding: 16rpx 24rpx;
						border-radius: 12rpx;
						transition: all 0.3s ease;

						&.primary {
							background: #3b82f6;
							color: #fff;
							box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.2);

							&:active {
								transform: scale(0.95);
								box-shadow: 0 1rpx 4rpx rgba(59, 130, 246, 0.2);
							}

							text {
								color: #fff;
								font-size: 24rpx;
								font-weight: 600;
							}
						}

						&.secondary {
							background: rgba(59, 130, 246, 0.1);
							border: 1rpx solid rgba(59, 130, 246, 0.2);

							&:active {
								transform: scale(0.95);
								background: rgba(59, 130, 246, 0.15);
							}

							text {
								color: #3b82f6;
								font-size: 24rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
		}

		.flex-items-plus {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.empty {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.btn-order1 {
		display: flex;
		align-items: center;
		gap: 4rpx;
		background: rgba(59, 130, 246, 0.1);
		padding: 8rpx 12rpx;
		border-radius: 8rpx;
		transition: all 0.2s ease;
		border: 1rpx solid rgba(59, 130, 246, 0.2);

		&:active {
			transform: scale(0.95);
			background: rgba(59, 130, 246, 0.15);
		}

		text {
			font-size: 20rpx;
			color: #3b82f6;
			font-weight: 500;
		}
	}
</style>