fix(usage): reorder cache columns and prevent header text wrapping

- Swap cache read and cache write columns order
- Add whitespace-nowrap to all table headers to prevent text wrapping
- Improves table readability and layout consistency
This commit is contained in:
YoVinchen
2025-12-07 14:36:57 +08:00
parent 663acf49e8
commit fdb36ead45
+20 -14
View File
@@ -193,30 +193,36 @@ export function RequestLogTable() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>{t("usage.time", "时间")}</TableHead> <TableHead className="whitespace-nowrap">
<TableHead>{t("usage.provider", "供应商")}</TableHead> {t("usage.time", "时间")}
<TableHead className="min-w-[280px]"> </TableHead>
<TableHead className="whitespace-nowrap">
{t("usage.provider", "供应商")}
</TableHead>
<TableHead className="min-w-[280px] whitespace-nowrap">
{t("usage.billingModel", "计费模型")} {t("usage.billingModel", "计费模型")}
</TableHead> </TableHead>
<TableHead className="text-right"> <TableHead className="text-right whitespace-nowrap">
{t("usage.inputTokens", "输入")} {t("usage.inputTokens", "输入")}
</TableHead> </TableHead>
<TableHead className="text-right"> <TableHead className="text-right whitespace-nowrap">
{t("usage.outputTokens", "输出")} {t("usage.outputTokens", "输出")}
</TableHead> </TableHead>
<TableHead className="text-right min-w-[90px]"> <TableHead className="text-right min-w-[90px] whitespace-nowrap">
{t("usage.cacheCreationTokens", "缓存写入")}
</TableHead>
<TableHead className="text-right min-w-[90px]">
{t("usage.cacheReadTokens", "缓存读取")} {t("usage.cacheReadTokens", "缓存读取")}
</TableHead> </TableHead>
<TableHead className="text-right"> <TableHead className="text-right min-w-[90px] whitespace-nowrap">
{t("usage.cacheCreationTokens", "缓存写入")}
</TableHead>
<TableHead className="text-right whitespace-nowrap">
{t("usage.totalCost", "成本")} {t("usage.totalCost", "成本")}
</TableHead> </TableHead>
<TableHead className="text-center min-w-[140px]"> <TableHead className="text-center min-w-[140px] whitespace-nowrap">
{t("usage.timingInfo", "用时/首字")} {t("usage.timingInfo", "用时/首字")}
</TableHead> </TableHead>
<TableHead>{t("usage.status", "状态")}</TableHead> <TableHead className="whitespace-nowrap">
{t("usage.status", "状态")}
</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -252,10 +258,10 @@ export function RequestLogTable() {
{log.outputTokens.toLocaleString()} {log.outputTokens.toLocaleString()}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
{log.cacheCreationTokens.toLocaleString()} {log.cacheReadTokens.toLocaleString()}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
{log.cacheReadTokens.toLocaleString()} {log.cacheCreationTokens.toLocaleString()}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
${parseFloat(log.totalCostUsd).toFixed(6)} ${parseFloat(log.totalCostUsd).toFixed(6)}