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:
parent
f0bf4d8c5d
commit
fff386c000
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue