fix: align client dashboard metrics
This commit is contained in:
@@ -49,11 +49,7 @@ export function ClientHome() {
|
||||
|
||||
const account = dashboard?.accounts[0];
|
||||
const availableBalance = moneyUnitsToYuan((account?.balanceCents ?? 0) + (account?.creditCents ?? 0));
|
||||
const todaySpend = moneyUnitsToYuan(dashboard?.today.spendCents);
|
||||
const todayRefundCents = Math.max(0, dashboard?.today.returnedCents ?? 0);
|
||||
const todayRefund = moneyUnitsToYuan(todayRefundCents);
|
||||
const balanceBaseline = Math.max(availableBalance + todaySpend - todayRefund, availableBalance, 1);
|
||||
const balancePercent = Math.min(100, Math.round((availableBalance / balanceBaseline) * 100));
|
||||
const recentMessages = useMemo<RecentTaskRow[]>(() => (dashboard?.recentTasks ?? []).map((task) => ({
|
||||
id: String(task.id ?? task.taskNo),
|
||||
taskNo: String(task.taskNo ?? task.id),
|
||||
@@ -101,7 +97,7 @@ export function ClientHome() {
|
||||
<div className="dashboard-grid dashboard-grid--four">
|
||||
<div className="surface metric-card metric-card--featured">
|
||||
<span>可用发送额度</span>
|
||||
<strong className="client-amount-value"><MoneyText>¥{formatAmount(availableBalance)}</MoneyText></strong>
|
||||
<strong><MoneyText>¥{formatAmount(availableBalance)}</MoneyText></strong>
|
||||
<small>现金余额 <MoneyText>¥{formatCents(account?.balanceCents)}</MoneyText></small>
|
||||
</div>
|
||||
<div className="surface metric-card">
|
||||
@@ -111,12 +107,12 @@ export function ClientHome() {
|
||||
</div>
|
||||
<div className="surface metric-card">
|
||||
<span>今日消费金额</span>
|
||||
<strong className="client-amount-value"><MoneyText>¥{formatCents(dashboard?.today.spendCents)}</MoneyText></strong>
|
||||
<strong><MoneyText>¥{formatCents(dashboard?.today.spendCents)}</MoneyText></strong>
|
||||
<small>企业今日实际消费</small>
|
||||
</div>
|
||||
<div className="surface metric-card">
|
||||
<span>今日返还金额</span>
|
||||
<strong className="client-amount-value"><MoneyText>¥{formatCents(todayRefundCents)}</MoneyText></strong>
|
||||
<strong><MoneyText>¥{formatCents(todayRefundCents)}</MoneyText></strong>
|
||||
<small>异常回执与退费返还</small>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,16 +171,7 @@ export function ClientHome() {
|
||||
</div>
|
||||
<div>
|
||||
<span>最近充值</span>
|
||||
<strong className="client-amount-value client-amount-value--compact">{latestRecharge ? <MoneyText>¥{formatCents(latestRecharge.amountCents)}</MoneyText> : '暂无充值'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="progress-heading">
|
||||
<span>余额水位</span>
|
||||
<strong>{balancePercent}%</strong>
|
||||
</div>
|
||||
<div className="progress-track">
|
||||
<span style={{ width: `${balancePercent}%` }} />
|
||||
<strong>{latestRecharge ? <MoneyText>¥{formatCents(latestRecharge.amountCents)}</MoneyText> : '暂无充值'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -580,25 +580,6 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.client-amount-value {
|
||||
background: none !important;
|
||||
color: #111111 !important;
|
||||
font-family: Arial, "Microsoft YaHei", sans-serif !important;
|
||||
font-size: 38px !important;
|
||||
font-style: normal;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 0 !important;
|
||||
line-height: 1.2 !important;
|
||||
text-shadow: none !important;
|
||||
-webkit-background-clip: border-box !important;
|
||||
-webkit-text-fill-color: #111111 !important;
|
||||
}
|
||||
|
||||
.client-amount-value--compact {
|
||||
font-size: 28px !important;
|
||||
}
|
||||
|
||||
.client-billing-page .client-billing-amount {
|
||||
background: none;
|
||||
color: var(--color-text-strong);
|
||||
|
||||
Reference in New Issue
Block a user