diff --git a/src/App.vue b/src/App.vue index 520ed8b..a99b67d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -694,7 +694,7 @@ useAutoRefresh(load, { isLoading: () => loading.value }) Token {{ sortMark('total_tokens') }} Token 占比 - 输入/输出 + 输入/输出 请求 {{ sortMark('requests') }} @@ -742,7 +742,7 @@ useAutoRefresh(load, { isLoading: () => loading.value }) {{ formatPercent(user.share) }} - + {{ formatTokens(user.input_tokens) }} / {{ formatTokens(user.output_tokens) }} {{ formatCount(user.requests) }} diff --git a/src/style.css b/src/style.css index e23bde3..557caf2 100644 --- a/src/style.css +++ b/src/style.css @@ -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 类后丢了 nowrap,fixed 布局下被压折行。 */ +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 字符),不需要很大 */