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

后台UI优化：统计区间并入二级标题栏

Browse Source 
将统计区间控件从内容区移至二级导航栏

控件与二级菜单同排显示，节省正文纵向空间

保持 timeRange 与 loadData 交互不变
This commit is contained in:
liuwei
2026-04-16 16:52:51 +08:00
parent 3b633b1b1d
commit d8bfdd54e3
1 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
admin/dashboard/templates/base.html
View File

@@ -272,6 +272,13 @@
padding-bottom: 2px;
}
.subnav-right {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.sub-nav-link {
min-height: 36px;
padding: 0 14px;
@@ -634,26 +641,20 @@
flex-wrap: wrap;
}
.time-range-float {
position: sticky;
top: 8px;
z-index: 80;
margin-left: auto;
margin-bottom: 10px;
width: fit-content;
.time-range-inline {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
padding: 6px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.88);
background: rgba(255,255,255,0.82);
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.time-range-float .el-select .el-input__inner {
.time-range-inline .el-select .el-input__inner {
height: 32px !important;
border-radius: 999px !important;
padding-left: 12px !important;
@@ -662,7 +663,7 @@
font-size: 12px !important;
}
.time-range-float .el-button {
.time-range-inline .el-button {
min-height: 32px !important;
padding: 0 10px !important;
border-radius: 999px !important;
@@ -753,32 +754,33 @@
<h2>{% raw %}{{ activeGroupMeta.label }}{% endraw %}</h2>
<p>{% raw %}{{ activeGroupMeta.description }}{% endraw %}</p>
</div>
<nav class="sub-nav" aria-label="二级导航">
<button
v-for="item in currentSubNav"
:key="item.path"
class="sub-nav-link"
:class="{ 'is-active': isPathActive(item.path) }"
@click="go(item.path)">
{% raw %}{{ item.label }}{% endraw %}
</button>
</nav>
<div class="subnav-right">
<div v-if="showTimeRangeSelector" class="time-range-inline">
<el-select v-model="timeRange" size="mini" @change="loadData">
<el-option label="最近7天" value="7"></el-option>
<el-option label="最近30天" value="30"></el-option>
<el-option label="最近90天" value="90"></el-option>
</el-select>
<el-button size="mini" type="primary" plain @click="loadData">
<i class="el-icon-refresh"></i>
</el-button>
</div>
<nav class="sub-nav" aria-label="二级导航">
<button
v-for="item in currentSubNav"
:key="item.path"
class="sub-nav-link"
:class="{ 'is-active': isPathActive(item.path) }"
@click="go(item.path)">
{% raw %}{{ item.label }}{% endraw %}
</button>
</nav>
</div>
</section>
<div class="layout-shell">
<main class="content">
<div class="content-inner">
<div v-if="showTimeRangeSelector" class="time-range-float">
<el-select v-model="timeRange" size="mini" @change="loadData">
<el-option label="最近7天" value="7"></el-option>
<el-option label="最近30天" value="30"></el-option>
<el-option label="最近90天" value="90"></el-option>
</el-select>
<el-button size="mini" type="primary" plain @click="loadData">
<i class="el-icon-refresh"></i>
</el-button>
</div>
{% block content %}{% endblock %}
</div>
</main>