feat(admin-web): 优化引荐关系树展示

- "认种"改名为"本人认种"
- 直推下级默认收起状态
- 有直推下级时在当前用户节点下方显示"+"按钮
- 点击"+"展开显示直推下级,按钮变为"-"
- 点击"-"收起直推下级

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
hailin 2026-01-07 22:14:39 -08:00
parent f0bf4d8c5d
commit fff386c000
2 changed files with 40 additions and 6 deletions

View File

@ -139,6 +139,7 @@ export default function UserDetailPage() {
const [treeRootUser, setTreeRootUser] = useState<string>(accountSequence);
const [plantingPage, setPlantingPage] = useState(1);
const [walletPage, setWalletPage] = useState(1);
const [showDirectReferrals, setShowDirectReferrals] = useState(false); // 默认收起直推下级
// 获取用户完整信息
const { data: userDetail, isLoading: detailLoading, error: detailError } = useUserFullDetail(accountSequence);
@ -356,7 +357,7 @@ export default function UserDetailPage() {
{ancestor.nickname || '未设置'}
</span>
<span className={styles.referralTree__nodeAdoptions}>
: {formatNumber(ancestor.personalAdoptions)}
: {formatNumber(ancestor.personalAdoptions)}
</span>
</button>
{index < referralTree.ancestors.length - 1 && (
@ -386,16 +387,25 @@ export default function UserDetailPage() {
{referralTree.currentUser.nickname || '未设置'}
</span>
<span className={styles.referralTree__nodeAdoptions}>
: {formatNumber(referralTree.currentUser.personalAdoptions)}
: {formatNumber(referralTree.currentUser.personalAdoptions)}
</span>
<span className={styles.referralTree__nodeCount}>
: {formatNumber(referralTree.currentUser.directReferralCount)}
</span>
</div>
{/* 展开/收起直推下级按钮 */}
{referralTree.directReferrals.length > 0 && (
<button
className={styles.referralTree__toggleButton}
onClick={() => setShowDirectReferrals(!showDirectReferrals)}
>
{showDirectReferrals ? '' : '+'}
</button>
)}
</div>
{/* 引荐用户 */}
{referralTree.directReferrals.length > 0 && (
{/* 引荐用户 - 默认收起,点击展开 */}
{referralTree.directReferrals.length > 0 && showDirectReferrals && (
<div className={styles.referralTree__directReferrals}>
<div className={styles.referralTree__connector}></div>
<div className={styles.referralTree__label}>
@ -413,7 +423,7 @@ export default function UserDetailPage() {
{referral.nickname || '未设置'}
</span>
<span className={styles.referralTree__nodeAdoptions}>
: {formatNumber(referral.personalAdoptions)}
: {formatNumber(referral.personalAdoptions)}
</span>
{referral.directReferralCount > 0 && (
<span className={styles.referralTree__nodeCount}>

View File

@ -345,7 +345,31 @@
}
.referralTree__current {
@include flex-center;
@include flex-column;
align-items: center;
}
.referralTree__toggleButton {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-top: $spacing-sm;
background-color: $primary-color;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
font-weight: bold;
line-height: 1;
@include transition-fast;
&:hover {
background-color: darken($primary-color, 10%);
transform: scale(1.1);
}
}
.referralTree__node {