refactor(admin-dashboard): unify mini chart styles and show names

This commit is contained in:
萝卜
2026-03-16 10:35:48 +08:00
parent 0b04a71be5
commit e744890cc9
3 changed files with 24 additions and 40 deletions

View File

@@ -309,14 +309,12 @@
/* 可复用KPI 卡片栅格(参考 Ant Design Pro Analysis第一行 4 个等宽卡片) */ /* 可复用KPI 卡片栅格(参考 Ant Design Pro Analysis第一行 4 个等宽卡片) */
/* 可复用:迷你图表(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */ /* 可复用:迷你图表/排行/占比(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */
.adm-mini-chart{ .adm-mini-chart,
.adm-mini-rank,
.adm-mini-share{
margin-top:10px; margin-top:10px;
height:86px;
width:100%; width:100%;
display:flex;
align-items:flex-end;
gap:8px;
padding:10px 10px; padding:10px 10px;
border:1px solid var(--adm-border-color, #e5e7eb); border:1px solid var(--adm-border-color, #e5e7eb);
border-radius:var(--adm-radius, 12px); border-radius:var(--adm-radius, 12px);
@@ -324,13 +322,22 @@
box-shadow:var(--adm-shadow-sm); box-shadow:var(--adm-shadow-sm);
} }
.adm-mini-chart.is-empty{ .adm-mini-chart.is-empty,
.adm-mini-rank.is-empty,
.adm-mini-share.is-empty{
align-items:center; align-items:center;
justify-content:center; justify-content:center;
color:var(--adm-text-muted, #94a3b8); color:var(--adm-text-muted, #94a3b8);
font-size:12px; font-size:12px;
} }
.adm-mini-chart{
height:86px;
display:flex;
align-items:flex-end;
gap:8px;
}
.adm-mini-chart-bar{ .adm-mini-chart-bar{
flex:1; flex:1;
min-width:0; min-width:0;
@@ -356,23 +363,9 @@
/* 可复用:迷你排行(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */ /* 可复用:迷你排行(渐进增强:由 admin.js 渲染,页面无 JS 时为空但不影响表格) */
.adm-mini-rank{ .adm-mini-rank{
margin-top:10px;
width:100%;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap:8px; 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-rank.is-empty{
align-items:center;
justify-content:center;
color:var(--adm-text-muted, #94a3b8);
font-size:12px;
} }
.adm-mini-rank-row{ .adm-mini-rank-row{
@@ -417,23 +410,9 @@
/* 可复用迷你占比Top5渐进增强由 admin.js 渲染,页面无 JS 时为空但不影响表格) */ /* 可复用迷你占比Top5渐进增强由 admin.js 渲染,页面无 JS 时为空但不影响表格) */
.adm-mini-share{ .adm-mini-share{
margin-top:10px;
width:100%;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap:8px; 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-share.is-empty{
align-items:center;
justify-content:center;
color:var(--adm-text-muted, #94a3b8);
font-size:12px;
} }
.adm-mini-share-row{ .adm-mini-share-row{

View File

@@ -169,8 +169,8 @@
var name = document.createElement('div'); var name = document.createElement('div');
name.className = 'adm-mini-rank-name'; name.className = 'adm-mini-rank-name';
// 仅展示 #排名(站点名在表格里可看;后续可把真实名字也塞进 data-points var mname = (p && p.name) ? String(p.name) : ('#' + (idx + 1));
name.textContent = '#' + (idx + 1); name.textContent = mname;
var wrap = document.createElement('div'); var wrap = document.createElement('div');
wrap.className = 'adm-mini-rank-bar-wrap'; wrap.className = 'adm-mini-rank-bar-wrap';
@@ -232,7 +232,8 @@
var name = document.createElement('div'); var name = document.createElement('div');
name.className = 'adm-mini-share-name'; name.className = 'adm-mini-share-name';
name.textContent = '#' + (idx + 1); var pname = (p && p.name) ? String(p.name) : ('#' + (idx + 1));
name.textContent = pname;
var wrap = document.createElement('div'); var wrap = document.createElement('div');
wrap.className = 'adm-mini-share-bar-wrap'; wrap.className = 'adm-mini-share-bar-wrap';

View File

@@ -148,8 +148,10 @@
// 用于前端渐进增强渲染迷你排行JS 读取 data-points // 用于前端渐进增强渲染迷你排行JS 读取 data-points
$rankPoints = []; $rankPoints = [];
foreach ($rankRows as $r) { foreach ($rankRows as $r) {
$mid = (int) ($r['merchant_id'] ?? 0);
$rankPoints[] = [ $rankPoints[] = [
'merchant_id' => (int) ($r['merchant_id'] ?? 0), 'merchant_id' => $mid,
'name' => (string) (($merchantIdToName[$mid] ?? '') ?: ('#' . $mid)),
'count' => (int) ($r['count'] ?? 0), 'count' => (int) ($r['count'] ?? 0),
'paid_sum' => (float) ($r['paid_sum'] ?? 0), 'paid_sum' => (float) ($r['paid_sum'] ?? 0),
]; ];
@@ -346,8 +348,10 @@
// 用于前端渐进增强渲染占比条形图JS 读取 data-points // 用于前端渐进增强渲染占比条形图JS 读取 data-points
$sharePoints = []; $sharePoints = [];
foreach ($shareRows as $r) { foreach ($shareRows as $r) {
$pid = (int) ($r['plan_id'] ?? 0);
$sharePoints[] = [ $sharePoints[] = [
'plan_id' => (int) ($r['plan_id'] ?? 0), 'plan_id' => $pid,
'name' => (string) (($planIdToName[$pid] ?? '') ?: ('#' . $pid)),
'count' => (int) ($r['count'] ?? 0), 'count' => (int) ($r['count'] ?? 0),
]; ];
} }