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