From e909d9917a672f2a3cf9d117302e5e97c868947e Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Tue, 17 Feb 2026 22:14:40 +0800
Subject: [PATCH] fix: normalize traffic range buttons layout in settings

---
 frontend/app.html | 56 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index 5e6c064..a323c7d 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -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>