okooooooo/EasyCLIProxyAPI
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(usage): streamline records table controls and layout

Browse Source 
- 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
This commit is contained in:
lzt404 committed 2026-08-26 01:56:46 +08:00
1 parent cbd2ae76af
commit a47e941f0a
2 files changed
+52 -89
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/UsageRecordsPage.tsx
+42 -54
View File
@@ -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"
src/styles.css
+10 -35
View File
@@ -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;
}
}