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

修复首页指标区不规整和留白问题

Browse Source 
变更项：

1. 将首页 Hero 区指标恢复为 6 张基础卡片，避免左侧用户信息卡被异常拉高。

2. 将新增用户数、群渗透率、群健康分拆分为独立一行展示，解决中间空位与视觉不规整。

3. 补充 metric-extended-row 的响应式样式，确保桌面与移动端布局一致。
This commit is contained in:
liuwei
2026-04-15 17:23:54 +08:00
parent d472b1523b
commit 26c534540d
1 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,29 +92,39 @@
</el-col>
<el-col :span="8">
<el-card class="metric-card metric-card--soft" shadow="hover">
<div class="metric-label">新增用户数</div>
<div class="metric-value">{% raw %}{{ newUsers }}{% endraw %}</div>
<div class="metric-footnote">统计周期内首次触发用户</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="metric-card" shadow="hover">
<div class="metric-label">群渗透率</div>
<div class="metric-value">{% raw %}{{ avgGroupPenetration.toFixed(2) }}{% endraw %}%</div>
<div class="metric-footnote">活跃群触发人数占成员比例（均值）</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="metric-card metric-card--soft" shadow="hover">
<div class="metric-label">群健康分</div>
<div class="metric-value">{% raw %}{{ groupHealthScore.toFixed(2) }}{% endraw %}</div>
<div class="metric-footnote">综合成功率与响应时延评分</div>
<div class="metric-label">系统运行时间</div>
<div class="metric-value">{% raw %}{{ formattedUptime }}{% endraw %}</div>
<div class="metric-footnote">当前实例持续在线时长</div>
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row :gutter="16" class="metric-extended-row">
<el-col :span="8">
<el-card class="metric-card metric-card--soft" shadow="hover">
<div class="metric-label">新增用户数</div>
<div class="metric-value">{% raw %}{{ newUsers }}{% endraw %}</div>
<div class="metric-footnote">统计周期内首次触发用户</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="metric-card" shadow="hover">
<div class="metric-label">群渗透率</div>
<div class="metric-value">{% raw %}{{ avgGroupPenetration.toFixed(2) }}{% endraw %}%</div>
<div class="metric-footnote">活跃群触发人数占成员比例（均值）</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="metric-card metric-card--soft" shadow="hover">
<div class="metric-label">群健康分</div>
<div class="metric-value">{% raw %}{{ groupHealthScore.toFixed(2) }}{% endraw %}</div>
<div class="metric-footnote">综合成功率与响应时延评分</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="16" class="stats-highlight-row">
<el-col :span="8">
<el-card class="insight-card" shadow="hover">
@@ -806,6 +816,7 @@
}
.hero-row,
.metric-extended-row,
.stats-highlight-row,
.chart-row {
margin-bottom: 16px;
@@ -930,6 +941,10 @@
display: flex;
}
.metric-extended-row > .el-col {
display: flex;
}
.metric-card {
min-height: 106px;
width: 100%;
@@ -1094,6 +1109,7 @@
@media (max-width: 1200px) {
.hero-row > .el-col,
.metric-extended-row > .el-col,
.stats-highlight-row > .el-col,
.chart-row > .el-col {
width: 100% !important;
@@ -1111,6 +1127,7 @@
}
.hero-row,
.metric-extended-row,
.stats-highlight-row,
.chart-row {
margin-bottom: 12px;
@@ -1219,6 +1236,7 @@
}
.hero-row,
.metric-extended-row,
.stats-highlight-row,
.chart-row {
margin-bottom: 10px;