统一筛选栏控件高度,消除请求列与左侧数值列的间距空洞
- period-switch / date-field / refresh 统一为 40px 高,变窄的 padding 配合固定高度,与 tab 组齐平 - 输入输出列定宽 118px、请求列定宽 112px,避免与 Token 列平分剩余宽度导致数字右对齐后左侧留白过大
This commit is contained in:
@@ -677,7 +677,7 @@ useAutoRefresh(load, { isLoading: () => loading.value })
|
||||
<col class="col-share hide-sm" />
|
||||
<col class="col-num" />
|
||||
<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-time hide-sm" />
|
||||
<col class="col-time hide-sm" />
|
||||
|
||||
@@ -143,13 +143,14 @@ h1 {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
gap: 2px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.period-switch button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
padding: 7px 18px;
|
||||
padding: 0 18px;
|
||||
border-radius: 7px;
|
||||
min-width: 56px;
|
||||
font-size: 14px;
|
||||
@@ -173,9 +174,11 @@ h1 {
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 7px 10px;
|
||||
padding: 0 12px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.date-field input {
|
||||
@@ -189,12 +192,15 @@ h1 {
|
||||
.refresh {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
border-radius: 10px;
|
||||
padding: 8px 14px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 请求列与 Token / 输入输出同为数值列,交给 auto 平分剩余空间,
|
||||
避免固定宽度截断大数(近30天请求数可达百万级千分位) */
|
||||
/* 请求列定宽:千分位整数(如 123,456,789)内容约占 9 位。
|
||||
固定宽度避免与 Token/输入输出列平分剩余空间,消除数字右对齐造成的空旷间距。
|
||||
空间让给左侧 Token 列(auto 吸收剩余) */
|
||||
table.rank .col-requests {
|
||||
width: auto;
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
/* 输入/输出列定宽:数值带单位(万/亿)较紧凑,固定宽度同样防止平分撑宽 */
|
||||
table.rank .col-io {
|
||||
width: 118px;
|
||||
}
|
||||
|
||||
/* 时间列定宽:精准时间形如「MM-DD HH:MM」(10 字符),不需要很大 */
|
||||
|
||||
Reference in New Issue
Block a user