237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: normalize traffic range buttons layout in settings

Browse Source
This commit is contained in:
yuyx
2026-02-17 22:14:40 +08:00
parent 6242622f1a
commit e909d9917a
1 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/app.html
View File

@@ -596,6 +596,25 @@
background: rgba(255, 255, 255, 0.15);
border-color: var(--glass-border-hover);
}
.download-traffic-range-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.download-traffic-range-btn {
padding: 5px 10px;
font-size: 12px;
white-space: nowrap;
width: auto !important;
min-width: 0;
}
.download-traffic-range-btn-active {
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
color: #fff;
border-color: transparent;
box-shadow: 0 4px 14px var(--glow);
}
.btn-icon {
background: none;
border: none;
@@ -949,6 +968,19 @@
flex: 1;
max-width: calc(50% - 5px);
}
.download-traffic-range-actions {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.download-traffic-range-btn {
width: 100% !important;
padding: 7px 6px;
}
.download-traffic-range-refresh {
grid-column: 1 / -1;
}
.file-list table {
font-size: 13px;
}
@@ -2643,36 +2675,32 @@
<div style="font-size: 13px; color: var(--text-secondary);">
管理员设置的下载流量限制会在这里实时展示，单位自动按 B/KB/MB/GB/TB 切换
</div>
<div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
<div class="download-traffic-range-actions">
<button
class="btn btn-secondary"
style="padding: 5px 10px; font-size: 12px;"
:class="{ 'btn-primary': downloadTrafficReport.days === 7 }"
class="btn btn-secondary download-traffic-range-btn"
:class="{ 'download-traffic-range-btn-active': downloadTrafficReport.days === 7 }"
@click="setDownloadTrafficReportDays(7)">
近7天
</button>
<button
class="btn btn-secondary"
style="padding: 5px 10px; font-size: 12px;"
:class="{ 'btn-primary': downloadTrafficReport.days === 30 }"
class="btn btn-secondary download-traffic-range-btn"
:class="{ 'download-traffic-range-btn-active': downloadTrafficReport.days === 30 }"
@click="setDownloadTrafficReportDays(30)">
近30天
</button>
<button
class="btn btn-secondary"
style="padding: 5px 10px; font-size: 12px;"
:class="{ 'btn-primary': downloadTrafficReport.days === 90 }"
class="btn btn-secondary download-traffic-range-btn"
:class="{ 'download-traffic-range-btn-active': downloadTrafficReport.days === 90 }"
@click="setDownloadTrafficReportDays(90)">
近90天
</button>
<button
class="btn btn-secondary"
style="padding: 5px 10px; font-size: 12px;"
:class="{ 'btn-primary': downloadTrafficReport.days === 180 }"
class="btn btn-secondary download-traffic-range-btn"
:class="{ 'download-traffic-range-btn-active': downloadTrafficReport.days === 180 }"
@click="setDownloadTrafficReportDays(180)">
近180天
</button>
<button class="btn btn-secondary" style="padding: 5px 10px; font-size: 12px;" @click="loadDownloadTrafficReport(downloadTrafficReport.days)" :disabled="downloadTrafficReport.loading">
<button class="btn btn-secondary download-traffic-range-btn download-traffic-range-refresh" @click="loadDownloadTrafficReport(downloadTrafficReport.days)" :disabled="downloadTrafficReport.loading">
<i :class="downloadTrafficReport.loading ? 'fas fa-sync-alt fa-spin' : 'fas fa-sync-alt'"></i>
{{ downloadTrafficReport.loading ? '加载中...' : '刷新' }}
</button>