Charles7c/token-list-share
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统一筛选栏控件高度，消除请求列与左侧数值列的间距空洞

Browse Source 
- period-switch / date-field / refresh 统一为 40px 高，变窄的 padding 配合固定高度，与 tab 组齐平
- 输入输出列定宽 118px、请求列定宽 112px，避免与 Token 列平分剩余宽度导致数字右对齐后左侧留白过大
This commit is contained in:
Charles7c
2026-09-15 16:05:03 +08:00
parent 59d5523146
commit 10945762c5
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -677,7 +677,7 @@ useAutoRefresh(load, { isLoading: () => loading.value })
<col class="col-share hide-sm" /> <col class="col-share hide-sm" />
<col class="col-num" /> <col class="col-num" />
<col class="col-share hide-sm" /> <col class="col-share hide-sm" />
<col class="col-num hide-sm" /> <col class="col-io hide-sm" />
<col class="col-requests" /> <col class="col-requests" />
<col class="col-time hide-sm" /> <col class="col-time hide-sm" />
<col class="col-time hide-sm" /> <col class="col-time hide-sm" />

24
src/style.css
View File

@@ -143,13 +143,14 @@ h1 {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 10px; border-radius: 10px;
gap: 2px; gap: 2px;
height: 40px;
} }
.period-switch button { .period-switch button {
border: 0; border: 0;
background: transparent; background: transparent;
color: var(--muted); color: var(--muted);
padding: 7px 18px; padding: 0 18px;
border-radius: 7px; border-radius: 7px;
min-width: 56px; min-width: 56px;
font-size: 14px; font-size: 14px;
@@ -173,9 +174,11 @@ h1 {
background: #fff; background: #fff;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 10px; border-radius: 10px;
padding: 7px 10px; padding: 0 12px;
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
height: 40px;
box-sizing: border-box;
} }
.date-field input { .date-field input {
@@ -189,12 +192,15 @@ h1 {
.refresh { .refresh {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center;
border: 1px solid var(--line); border: 1px solid var(--line);
background: #fff; background: #fff;
color: var(--text); color: var(--text);
border-radius: 10px; border-radius: 10px;
padding: 8px 14px; padding: 0 14px;
font-size: 14px; font-size: 14px;
height: 40px;
box-sizing: border-box;
transition: border-color 0.15s ease, color 0.15s ease; transition: border-color 0.15s ease, color 0.15s ease;
} }
@@ -504,10 +510,16 @@ table.rank > tbody > tr.user-row > td.share-col {
justify-content: flex-start; justify-content: flex-start;
} }
/* 请求列与 Token / 输入输出同为数值列，交给 auto 平分剩余空间， /* 请求列定宽：千分位整数（如 123,456,789）内容约占 9 位。
避免固定宽度截断大数（近30天请求数可达百万级千分位） */ 固定宽度避免与 Token/输入输出列平分剩余空间，消除数字右对齐造成的空旷间距。
空间让给左侧 Token 列（auto 吸收剩余） */
table.rank .col-requests { table.rank .col-requests {
width: auto; width: 112px;
}
/* 输入/输出列定宽：数值带单位（万/亿）较紧凑，固定宽度同样防止平分撑宽 */
table.rank .col-io {
width: 118px;
} }
/* 时间列定宽：精准时间形如「MM-DD HH:MM」（10 字符），不需要很大 */ /* 时间列定宽：精准时间形如「MM-DD HH:MM」（10 字符），不需要很大 */