liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): unify global UI theme across all admin templates

Browse Source
This commit is contained in:
liuwei
2026-04-15 17:00:15 +08:00
parent ee5c1ebadc
commit cb8adc40ce
19 changed files with 808 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
admin/dashboard/templates/index.html
View File

@@ -372,7 +372,7 @@
labels: ['已使用', '可用'],
datasets: [{
data: [usageValue, 100 - usageValue],
backgroundColor: [color, 'rgba(226, 232, 240, 0.85)'],
backgroundColor: [color, 'rgba(214, 226, 219, 0.86)'],
borderWidth: 0
}]
},
@@ -485,8 +485,8 @@
datasets: [{
label: '调用次数',
data: data,
backgroundColor: 'rgba(99, 102, 241, 0.72)',
borderColor: 'rgba(79, 70, 229, 1)',
backgroundColor: 'rgba(15, 118, 110, 0.74)',
borderColor: 'rgba(11, 94, 87, 1)',
borderRadius: 10,
borderWidth: 0
}]
@@ -501,7 +501,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -535,8 +535,8 @@
datasets: [{
label: '成功率(%)',
data: data,
backgroundColor: 'rgba(16, 185, 129, 0.74)',
borderColor: 'rgba(5, 150, 105, 1)',
backgroundColor: 'rgba(234, 88, 12, 0.64)',
borderColor: 'rgba(194, 65, 12, 1)',
borderRadius: 10,
borderWidth: 0
}]
@@ -552,7 +552,7 @@
beginAtZero: true,
max: 100,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -589,8 +589,8 @@
label: '总调用',
data: totalData,
fill: false,
backgroundColor: 'rgba(79, 70, 229, 0.2)',
borderColor: 'rgba(79, 70, 229, 1)',
backgroundColor: 'rgba(15, 118, 110, 0.18)',
borderColor: 'rgba(15, 118, 110, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -599,8 +599,8 @@
label: '成功调用',
data: successData,
fill: false,
backgroundColor: 'rgba(16, 185, 129, 0.2)',
borderColor: 'rgba(16, 185, 129, 1)',
backgroundColor: 'rgba(14, 165, 233, 0.16)',
borderColor: 'rgba(14, 165, 233, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -609,8 +609,8 @@
label: '失败调用',
data: errorData,
fill: false,
backgroundColor: 'rgba(239, 68, 68, 0.2)',
borderColor: 'rgba(239, 68, 68, 1)',
backgroundColor: 'rgba(234, 88, 12, 0.20)',
borderColor: 'rgba(234, 88, 12, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -628,7 +628,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -698,8 +698,8 @@
label: '消息数量',
data: this.hourlyMessageTrendData.counts,
fill: true,
backgroundColor: 'rgba(59, 130, 246, 0.10)',
borderColor: 'rgba(59, 130, 246, 1)',
backgroundColor: 'rgba(15, 118, 110, 0.12)',
borderColor: 'rgba(15, 118, 110, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -712,7 +712,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -745,7 +745,7 @@
{% block styles %}
<style>
.dashboard-title {
margin-bottom: 18px;
margin-bottom: 20px;
}
.dashboard-page .el-row {
@@ -770,19 +770,26 @@
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(148, 163, 184, 0.18);
color: #475569;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(96, 118, 109, 0.22);
color: #3f5148;
font-size: 13px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
box-shadow: 0 8px 24px rgba(21, 33, 27, 0.08);
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
background: #159467;
box-shadow: 0 0 0 4px rgba(21, 148, 103, 0.16);
animation: pulseDot 1.8s ease infinite;
}
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(21, 148, 103, 0.28); }
70% { box-shadow: 0 0 0 8px rgba(21, 148, 103, 0.00); }
100% { box-shadow: 0 0 0 0 rgba(21, 148, 103, 0.00); }
}
.hero-row,
@@ -792,18 +799,38 @@
}
.hero-card {
min-height: 228px;
min-height: 236px;
}
.hero-card--profile {
background: linear-gradient(145deg, rgba(79,70,229,0.94), rgba(59,130,246,0.82)) !important;
color: #fff !important;
position: relative;
overflow: hidden;
border: none !important;
box-shadow: 0 24px 48px rgba(79, 70, 229, 0.18) !important;
color: #fff !important;
background:
radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.28), transparent 44%),
radial-gradient(circle at 84% 78%, rgba(251, 146, 60, 0.22), transparent 42%),
linear-gradient(140deg, #0b5e57, #0f766e 52%, #0f766e 100%) !important;
box-shadow: 0 26px 54px rgba(15, 118, 110, 0.24) !important;
}
.hero-card--profile::after {
content: "";
position: absolute;
right: -56px;
top: -64px;
width: 190px;
height: 190px;
border-radius: 46px;
transform: rotate(24deg);
border: 1px solid rgba(255, 255, 255, 0.20);
background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02));
}
.hero-card--profile .el-card__body {
padding: 22px !important;
position: relative;
z-index: 1;
}
.hero-profile {
@@ -827,6 +854,7 @@
padding: 3px;
border-radius: 24px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.26);
}
.hero-avatar {
@@ -844,22 +872,22 @@
.hero-eyebrow {
font-size: 12px;
letter-spacing: 0.08em;
letter-spacing: 0.09em;
text-transform: uppercase;
opacity: 0.8;
opacity: 0.84;
margin-bottom: 8px;
}
.hero-profile-copy h2 {
font-size: 24px;
font-size: 25px;
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.hero-profile-copy p {
color: rgba(255,255,255,0.80);
line-height: 1.6;
color: rgba(255,255,255,0.82);
line-height: 1.58;
font-size: 14px;
}
@@ -872,7 +900,8 @@
.meta-item {
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,0.14);
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
@@ -897,7 +926,13 @@
}
.metric-card {
min-height: 106px;
min-height: 108px;
transition: transform .2s ease, box-shadow .2s ease;
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(21, 33, 27, 0.12) !important;
}
.metric-card .el-card__body {
@@ -905,37 +940,39 @@
}
.metric-card--primary {
background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
background: linear-gradient(160deg, rgba(15,118,110,0.14), rgba(255,255,255,0.96)) !important;
border-color: rgba(15,118,110,0.26) !important;
}
.metric-card--soft {
background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important;
background: linear-gradient(160deg, rgba(234,88,12,0.10), rgba(255,255,255,0.96)) !important;
border-color: rgba(234,88,12,0.22) !important;
}
.metric-label {
font-size: 13px;
color: #64748b;
color: #4f6258;
margin-bottom: 14px;
}
.metric-value {
font-size: 30px;
font-size: 31px;
line-height: 1;
font-weight: 700;
color: #0f172a;
color: #15211b;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.metric-unit {
font-size: 14px;
color: #64748b;
color: #5d7267;
margin-left: 6px;
}
.metric-footnote {
font-size: 12px;
color: #94a3b8;
color: #74897f;
}
.insight-card .el-card__body {
@@ -954,14 +991,14 @@
.chart-card-header h3 {
font-size: 17px;
font-weight: 700;
color: #0f172a;
color: #15211b;
margin-bottom: 4px;
}
.section-heading p,
.chart-card-header p {
font-size: 13px;
color: #64748b;
color: #5f7368;
}
.chart-card-header--split {
@@ -976,17 +1013,26 @@
}
.chart-card--large {
min-height: 390px;
min-height: 396px;
}
.chart-container {
position: relative;
background: linear-gradient(180deg, rgba(248,250,252,0.72), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.12);
background: linear-gradient(180deg, rgba(247, 251, 248, 0.90), rgba(255, 255, 255, 0.98));
border: 1px solid rgba(101, 121, 113, 0.18);
border-radius: 18px;
padding: 14px;
}
.chart-container::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(125deg, rgba(255,255,255,0.36), transparent 34%);
}
.chart-container--large {
height: 300px;
}
@@ -1008,11 +1054,12 @@
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(79,70,229,0.10);
color: #4f46e5;
background: linear-gradient(135deg, rgba(15,118,110,0.18), rgba(20,184,166,0.10));
color: #0b5e57;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
border: 1px solid rgba(15,118,110,0.22);
}
.rank-copy {
@@ -1022,7 +1069,7 @@
.rank-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
color: #15211b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1031,7 +1078,7 @@
.rank-subtitle {
margin-top: 4px;
font-size: 12px;
color: #94a3b8;
color: #74897f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1044,7 +1091,7 @@
min-height: 180px;
flex-direction: column;
gap: 8px;
color: rgba(255,255,255,0.85);
color: rgba(255,255,255,0.90);
}
.hero-empty i {
@@ -1201,5 +1248,13 @@
height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.live-dot,
.metric-card {
animation: none !important;
transition: none !important;
}
}
</style>
{% endblock %}