linxianzhuang/saasshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

49
public/css/admin-components.css
View File

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

7
public/js/admin.js
View File

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