feat(admin-dashboard): add mini trend chart for 7d paid sum

This commit is contained in:
萝卜
2026-03-16 10:17:13 +08:00
parent e0b1a707fb
commit 3c4612b339
4 changed files with 110 additions and 0 deletions

View File

@@ -308,6 +308,52 @@
}
/* 可复用KPI 卡片栅格(参考 Ant Design Pro Analysis第一行 4 个等宽卡片) */
/* 可复用:迷你图表(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */
.adm-mini-chart{
margin-top:10px;
height:86px;
width:100%;
display:flex;
align-items:flex-end;
gap:8px;
padding:10px 10px;
border:1px solid var(--adm-border-color, #e5e7eb);
border-radius:var(--adm-radius, 12px);
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
box-shadow:var(--adm-shadow-sm);
}
.adm-mini-chart.is-empty{
align-items:center;
justify-content:center;
color:var(--adm-text-muted, #94a3b8);
font-size:12px;
}
.adm-mini-chart-bar{
flex:1;
min-width:0;
height:10px;
border-radius:10px 10px 4px 4px;
border:1px solid var(--adm-primary-border-35, rgba(22, 119, 255, .35));
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
position:relative;
overflow:hidden;
}
.adm-mini-chart-bar::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(22, 119, 255, .22), rgba(22, 119, 255, .04));
}
.adm-mini-chart-bar:hover{
border-color:var(--adm-primary-border-45, rgba(22, 119, 255, .45));
background:var(--adm-primary-tint-06, rgba(22, 119, 255, .06));
}
.kpi-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));