From a47e941f0a517098dff427c645b9b1de3514a3ff Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Tue, 25 Aug 2026 23:18:58 +0800
Subject: [PATCH] feat(usage): streamline records table controls and layout

- remove the redundant usage page header
- compact the navigation and collector status toolbar
- move the horizontal scrollbar above the table
- move pagination and page size controls above the table
- improve column visibility labels and responsive styles
- adjust the Vite chunk size warning limit
---
 src/pages/UsageRecordsPage.tsx | 96 +++++++++++++++-------------------
 src/styles.css                 | 45 ++++------------
 2 files changed, 52 insertions(+), 89 deletions(-)

diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx
index b7699d9..a41f292 100644
--- a/src/pages/UsageRecordsPage.tsx
+++ b/src/pages/UsageRecordsPage.tsx
@@ -1412,12 +1412,52 @@ function EventsView({
           <span className="usage-events-count-badge">
             {t('usage.events.total', { count: compactNumber(events.total) })}
           </span>
-          <span className="usage-events-page-indicator">
-            {t('usage.events.page', { page: events.page, total: events.totalPages })}
+          <span className="usage-pagination-summary">
+            {t('usage.events.rangeSummary', {
+              start: startRecordNum,
+              end: endRecordNum,
+              total: compactNumber(events.total),
+            })}
           </span>
         </div>
 
         <div className="usage-events-summary-right">
+          <select
+            className="usage-page-size-select"
+            value={pageSize}
+            onChange={(e) => onPageSizeChange(Number(e.currentTarget.value))}
+            aria-label={t('usage.events.pageSize', { size: pageSize })}
+          >
+            <option value="20">{t('usage.events.pageSize', { size: 20 })}</option>
+            <option value="50">{t('usage.events.pageSize', { size: 50 })}</option>
+            <option value="100">{t('usage.events.pageSize', { size: 100 })}</option>
+            <option value="200">{t('usage.events.pageSize', { size: 200 })}</option>
+          </select>
+
+          <div className="usage-pagination-right usage-pagination-top">
+            <button
+              type="button"
+              className="usage-page-nav-btn"
+              disabled={events.page <= 1}
+              onClick={() => onPage(events.page - 1)}
+            >
+              <ChevronLeft size={14} />
+              <span>{t('usage.previous')}</span>
+            </button>
+            <span className="usage-pagination-info">
+              {events.page} / {events.totalPages}
+            </span>
+            <button
+              type="button"
+              className="usage-page-nav-btn"
+              disabled={events.page >= events.totalPages}
+              onClick={() => onPage(events.page + 1)}
+            >
+              <span>{t('usage.next')}</span>
+              <ChevronRight size={14} />
+            </button>
+          </div>
+
           <button
             type="button"
             className="usage-col-settings-btn"
@@ -1497,58 +1537,6 @@ function EventsView({
         <UsageEmpty />
       )}
 
-      <div className="usage-pagination">
-        <div className="usage-pagination-left">
-          <span className="usage-pagination-summary">
-            {t('usage.events.rangeSummary', {
-              start: startRecordNum,
-              end: endRecordNum,
-              total: compactNumber(events.total),
-            })}
-          </span>
-
-          <label style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-            <select
-              className="usage-page-size-select"
-              value={pageSize}
-              onChange={(e) => onPageSizeChange(Number(e.currentTarget.value))}
-              aria-label={t('usage.events.pageSize', { size: pageSize })}
-            >
-              <option value="20">{t('usage.events.pageSize', { size: 20 })}</option>
-              <option value="50">{t('usage.events.pageSize', { size: 50 })}</option>
-              <option value="100">{t('usage.events.pageSize', { size: 100 })}</option>
-              <option value="200">{t('usage.events.pageSize', { size: 200 })}</option>
-            </select>
-          </label>
-        </div>
-
-        <div className="usage-pagination-right">
-          <button
-            type="button"
-            className="usage-page-nav-btn"
-            disabled={events.page <= 1}
-            onClick={() => onPage(events.page - 1)}
-          >
-            <ChevronLeft size={14} />
-            <span>{t('usage.previous')}</span>
-          </button>
-
-          <span className="usage-pagination-info">
-            {events.page} / {events.totalPages}
-          </span>
-
-          <button
-            type="button"
-            className="usage-page-nav-btn"
-            disabled={events.page >= events.totalPages}
-            onClick={() => onPage(events.page + 1)}
-          >
-            <span>{t('usage.next')}</span>
-            <ChevronRight size={14} />
-          </button>
-        </div>
-      </div>
-
       {columnSettingsOpen ? (
         <div
           className="config-dialog-backdrop"
diff --git a/src/styles.css b/src/styles.css
index 3ba9213..6535841 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7288,12 +7288,7 @@ textarea:focus-visible {
   display: flex;
   align-items: center;
   gap: 8px;
-}
-
-.usage-events-page-indicator {
-  font-variant-numeric: tabular-nums;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
+  flex-wrap: wrap;
 }
 
 .usage-col-hint {
@@ -7703,28 +7698,6 @@ body.table-col-resizing * {
   font-size: 11px;
 }
 
-/* Enhanced Pagination */
-.usage-pagination {
-  display: flex;
-  min-height: 50px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px 16px;
-  border-top: 1px solid var(--theme-e3e1db);
-  background: var(--theme-fffdf8);
-  color: var(--theme-8a847c);
-  font-size: var(--font-size-caption);
-  flex-wrap: wrap;
-}
-
-.usage-pagination-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
 .usage-pagination-summary {
   font-size: var(--font-size-caption);
   color: var(--theme-7a746c);
@@ -7732,6 +7705,7 @@ body.table-col-resizing * {
 }
 
 .usage-page-size-select {
+  height: 30px;
   padding: 4px 8px;
   border: 1px solid var(--theme-e3e1db);
   border-radius: 5px;
@@ -7752,6 +7726,11 @@ body.table-col-resizing * {
   gap: 6px;
 }
 
+.usage-pagination-top {
+  padding-right: 8px;
+  border-right: 1px solid var(--theme-e3e1db);
+}
+
 .usage-page-nav-btn {
   display: inline-flex;
   align-items: center;
@@ -7807,13 +7786,9 @@ body.table-col-resizing * {
     flex: 1;
   }
 
-  .usage-pagination {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .usage-pagination-right {
-    justify-content: space-between;
+  .usage-events-summary-right {
+    width: 100%;
+    justify-content: flex-end;
   }
 }