refactor(admin-dashboard): unify mini chart styles and show names
This commit is contained in:
@@ -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{
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|||||||
@@ -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),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user