Fix usage records table layout

This commit is contained in:
fawney19
2026-05-06 16:20:09 +08:00
parent 33ed7c0737
commit 77c0474947

View File

@@ -295,17 +295,17 @@
</div> </div>
<!-- 桌面端表格视图 --> <!-- 桌面端表格视图 -->
<Table class="hidden md:table table-fixed w-full"> <Table :class="['hidden md:table table-fixed w-full', isAdmin ? 'min-w-[1120px]' : 'min-w-[960px]']">
<colgroup v-if="isAdmin"> <colgroup v-if="isAdmin">
<col class="w-[8%]"> <col class="w-[8%]">
<col class="w-[12%]"> <col class="w-[12%]">
<col class="w-[20%]"> <col class="w-[16%]">
<col class="w-[23%]"> <col class="w-[16%]">
<col class="w-[12%]"> <col class="w-[17%]">
<col class="w-[5%]">
<col class="w-[9%]">
<col class="w-[5%]">
<col class="w-[6%]"> <col class="w-[6%]">
<col class="w-[10%]">
<col class="w-[6%]">
<col class="w-[9%]">
</colgroup> </colgroup>
<colgroup v-else> <colgroup v-else>
<col class="w-[9%]"> <col class="w-[9%]">
@@ -348,7 +348,7 @@
密钥 密钥
</TableHead> </TableHead>
<SortableTableHead <SortableTableHead
class="h-12 font-semibold w-[20%]" class="h-12 font-semibold w-[16%]"
column-key="model" column-key="model"
:sortable="false" :sortable="false"
:filter-active="filterModel !== '__all__'" :filter-active="filterModel !== '__all__'"
@@ -367,7 +367,7 @@
</SortableTableHead> </SortableTableHead>
<SortableTableHead <SortableTableHead
v-if="isAdmin" v-if="isAdmin"
class="h-12 font-semibold w-[23%]" class="h-12 font-semibold w-[16%]"
column-key="provider" column-key="provider"
:sortable="false" :sortable="false"
:filter-active="filterProvider !== '__all__'" :filter-active="filterProvider !== '__all__'"
@@ -385,7 +385,7 @@
</template> </template>
</SortableTableHead> </SortableTableHead>
<SortableTableHead <SortableTableHead
class="h-12 font-semibold w-[12%]" class="h-12 font-semibold w-[17%]"
column-key="api_format" column-key="api_format"
:sortable="false" :sortable="false"
:filter-active="filterApiFormat !== '__all__'" :filter-active="filterApiFormat !== '__all__'"
@@ -403,7 +403,7 @@
</template> </template>
</SortableTableHead> </SortableTableHead>
<SortableTableHead <SortableTableHead
class="h-12 font-semibold w-[5%] text-center" class="h-12 font-semibold w-[6%] text-center"
column-key="status" column-key="status"
:sortable="false" :sortable="false"
align="center" align="center"
@@ -421,13 +421,13 @@
/> />
</template> </template>
</SortableTableHead> </SortableTableHead>
<TableHead class="h-12 font-semibold w-[9%] text-center"> <TableHead class="h-12 font-semibold w-[10%] text-center">
Tokens Tokens
</TableHead> </TableHead>
<TableHead class="h-12 font-semibold w-[5%] text-right"> <TableHead class="h-12 font-semibold w-[6%] text-right">
费用 费用
</TableHead> </TableHead>
<TableHead class="h-12 font-semibold w-[6%] text-right"> <TableHead class="h-12 font-semibold w-[9%] text-right">
<div class="flex flex-col items-end text-xs gap-0.5"> <div class="flex flex-col items-end text-xs gap-0.5">
<span>首字</span> <span>首字</span>
<span class="text-muted-foreground font-normal">总耗时</span> <span class="text-muted-foreground font-normal">总耗时</span>
@@ -497,7 +497,7 @@
</div> </div>
</TableCell> </TableCell>
<TableCell <TableCell
class="font-medium py-4 w-[20%]" class="font-medium py-4 w-[16%]"
:title="getModelTooltip(record)" :title="getModelTooltip(record)"
> >
<div <div
@@ -528,7 +528,7 @@
</TableCell> </TableCell>
<TableCell <TableCell
v-if="isAdmin" v-if="isAdmin"
class="py-4 w-[23%]" class="py-4 w-[16%]"
> >
<div class="flex min-w-0 items-center gap-1"> <div class="flex min-w-0 items-center gap-1">
<div class="flex min-w-0 flex-col text-xs gap-0.5"> <div class="flex min-w-0 flex-col text-xs gap-0.5">
@@ -584,7 +584,7 @@
</div> </div>
</TableCell> </TableCell>
<TableCell <TableCell
class="py-4 w-[12%]" class="py-4 w-[17%]"
:title="getApiFormatTooltip(record)" :title="getApiFormatTooltip(record)"
> >
<!-- 有格式转换或同族格式差异两行显示 --> <!-- 有格式转换或同族格式差异两行显示 -->
@@ -619,7 +619,7 @@
class="text-muted-foreground text-xs" class="text-muted-foreground text-xs"
>-</span> >-</span>
</TableCell> </TableCell>
<TableCell class="text-center py-4 w-[5%]"> <TableCell class="text-center py-4 w-[6%]">
<!-- 优先显示请求状态 --> <!-- 优先显示请求状态 -->
<Badge <Badge
v-if="getDisplayStatus(record) === 'pending'" v-if="getDisplayStatus(record) === 'pending'"
@@ -670,7 +670,7 @@
{{ getStreamModeLabel(record) }} {{ getStreamModeLabel(record) }}
</Badge> </Badge>
</TableCell> </TableCell>
<TableCell class="py-4 w-[9%]"> <TableCell class="py-4 w-[10%]">
<div class="grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] gap-x-1 text-xs leading-tight tabular-nums"> <div class="grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] gap-x-1 text-xs leading-tight tabular-nums">
<span class="justify-self-end whitespace-nowrap text-right"> <span class="justify-self-end whitespace-nowrap text-right">
{{ formatTokens(getRecordEffectiveInputTokens(record)) }} {{ formatTokens(getRecordEffectiveInputTokens(record)) }}
@@ -704,7 +704,7 @@
</span> </span>
</div> </div>
</TableCell> </TableCell>
<TableCell class="text-right py-4 w-[5%]"> <TableCell class="text-right py-4 w-[6%]">
<div class="flex flex-col items-end text-xs gap-0.5"> <div class="flex flex-col items-end text-xs gap-0.5">
<span class="text-primary font-medium">{{ formatCurrency(record.cost || 0) }}</span> <span class="text-primary font-medium">{{ formatCurrency(record.cost || 0) }}</span>
<span <span
@@ -715,7 +715,7 @@
</span> </span>
</div> </div>
</TableCell> </TableCell>
<TableCell class="text-right py-4 w-[6%]"> <TableCell class="text-right py-4 w-[9%]">
<!-- pending 状态只显示增长的总时间 --> <!-- pending 状态只显示增长的总时间 -->
<div <div
v-if="getDisplayStatus(record) === 'pending'" v-if="getDisplayStatus(record) === 'pending'"