fix(admin-web): 仪表板预种统计改为方块卡片样式

- 预种待合并/已合并从深色条形卡片改为与认种统计一致的 StatCard
- 统计网格从 4 列调整为 3 列(3+3 布局更工整)
- 骨架屏占位从 4 个调整为 6 个

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
hailin 2026-03-02 05:24:00 -08:00
parent 19753a8639
commit 1bfeece109
2 changed files with 16 additions and 32 deletions

View File

@ -8,7 +8,7 @@
&__stats { &__stats {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr);
gap: $spacing-lg; gap: $spacing-lg;
@include respond-below(xl) { @include respond-below(xl) {

View File

@ -137,6 +137,20 @@ export default function DashboardPage() {
change: { value: 0, trend: 'up' as const }, change: { value: 0, trend: 'up' as const },
color: '#8b5cf6', color: '#8b5cf6',
}, },
{
title: '预种待合并',
value: prePlantingStats?.pendingMergePortions ?? 0,
suffix: '份',
change: { value: 0, trend: 'up' as const },
color: '#ef4444',
},
{
title: '预种已合并',
value: prePlantingStats?.totalTreesMerged ?? 0,
suffix: '棵',
change: { value: 0, trend: 'up' as const },
color: '#06b6d4',
},
] : []; ] : [];
const headerActions = ( const headerActions = (
@ -165,7 +179,7 @@ export default function DashboardPage() {
{statsLoading ? ( {statsLoading ? (
// 加载状态显示骨架屏 // 加载状态显示骨架屏
<> <>
{[1, 2, 3, 4].map((i) => ( {[1, 2, 3, 4, 5, 6].map((i) => (
<StatCardSkeleton key={i} /> <StatCardSkeleton key={i} />
))} ))}
</> </>
@ -226,36 +240,6 @@ export default function DashboardPage() {
</div> </div>
</div> </div>
{/* 预种统计区域 */}
<div className={styles.dashboard__walletBalance}>
<div className={styles.dashboard__walletCard}>
<div className={styles.dashboard__walletLabel}></div>
<div className={styles.dashboard__walletValue}>
{prePlantingStatsLoading ? (
<span className={styles.dashboard__walletLoading}>...</span>
) : (
<span className={styles.dashboard__walletAmount}>
{(prePlantingStats?.pendingMergePortions ?? 0).toLocaleString()}
<span style={{ fontSize: '0.5em', marginLeft: 4, opacity: 0.7 }}></span>
</span>
)}
</div>
</div>
<div className={styles.dashboard__walletCard}>
<div className={styles.dashboard__walletLabel}></div>
<div className={styles.dashboard__walletValue}>
{prePlantingStatsLoading ? (
<span className={styles.dashboard__walletLoading}>...</span>
) : (
<span className={styles.dashboard__walletAmount}>
{(prePlantingStats?.totalTreesMerged ?? 0).toLocaleString()}
<span style={{ fontSize: '0.5em', marginLeft: 4, opacity: 0.7 }}></span>
</span>
)}
</div>
</div>
</div>
{/* 图表区 - [2026-01-06] 使用 planting-service 数据 */} {/* 图表区 - [2026-01-06] 使用 planting-service 数据 */}
<div className={styles.dashboard__charts}> <div className={styles.dashboard__charts}>
<div className={styles.dashboard__mainChart}> <div className={styles.dashboard__mainChart}>