修复排行榜输入/输出列折行与数值列间距失衡

- 输入/输出列补回 nowrap 并居中(去掉 .right 类后丢了 nowrap 被压折行),定宽 132px
- Token / 请求 / 输入输出列全部定宽,剩余空间按比例摊到各列,
  不再由单列 auto 独吞宽度造成数字右对齐后左侧大片空白
This commit is contained in:
2026-09-15 16:21:02 +08:00
parent 10945762c5
commit db75b7954a
2 changed files with 16 additions and 7 deletions

View File

@@ -694,7 +694,7 @@ useAutoRefresh(load, { isLoading: () => loading.value })
Token {{ sortMark('total_tokens') }}
</th>
<th class="right hide-sm share-col">Token 占比</th>
<th class="hide-sm" title="输入 / 输出 Token悬停查看缓存">输入/输出</th>
<th class="hide-sm io-col" title="输入 / 输出 Token悬停查看缓存">输入/输出</th>
<th class="sortable right" :class="{ active: sortBy === 'requests' }" @click="setSort('requests')">
请求 {{ sortMark('requests') }}
</th>
@@ -742,7 +742,7 @@ useAutoRefresh(load, { isLoading: () => loading.value })
<span class="num">{{ formatPercent(user.share) }}</span>
</div>
</td>
<td class="num hide-sm" :title="ioTitle(user)">
<td class="num hide-sm io-col" :title="ioTitle(user)">
{{ formatTokens(user.input_tokens) }}<span class="io-sep"> / </span>{{ formatTokens(user.output_tokens) }}
</td>
<td class="right num">{{ formatCount(user.requests) }}</td>

View File

@@ -346,7 +346,8 @@ table.rank .col-user {
}
table.rank .col-num {
width: auto;
/* Token 列:定宽。若留 auto 会独吞剩余空间,数字右对齐后左侧出现大片空白 */
width: 112px;
}
table.rank .col-share {
@@ -511,15 +512,23 @@ table.rank > tbody > tr.user-row > td.share-col {
}
/* 请求列定宽:千分位整数(如 123,456,789内容约占 9 位。
固定宽度避免与 Token/输入输出列平分剩余空间,消除数字右对齐造成的空旷间距。
空间让给左侧 Token 列auto 吸收剩余) */
数值列全部定宽,剩余空间按比例摊到各列,
避免单列 auto 独吞宽度造成数字右对齐后左侧大片空白 */
table.rank .col-requests {
width: 112px;
width: 100px;
}
/* 输入/输出列定宽:数值带单位(万/亿)较紧凑,固定宽度同样防止平分撑宽 */
table.rank .col-io {
width: 118px;
width: 132px;
}
/* 输入/输出单元格:居中 + 禁止折行「119 万 / 9.14 万」不能拆成两行)。
此前该列去掉 .right 类后丢了 nowrapfixed 布局下被压折行。 */
table.rank > thead > tr > th.io-col,
table.rank > tbody > tr.user-row > td.io-col {
white-space: nowrap;
text-align: center;
}
/* 时间列定宽精准时间形如「MM-DD HH:MM」10 字符),不需要很大 */