From 8dd593e74777f1c87fa2fc7e011adf65e2987ed7 Mon Sep 17 00:00:00 2001
From: thzxx <thzxx@gitee.com>
Date: Sat, 27 Jun 2026 22:38:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20TokenUsage=20=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E6=B1=87=E6=80=BB=E6=94=B9=E7=94=A8=20MUI=20Table=EF=BC=8C?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E4=B8=8E=E5=80=BC=E8=87=AA=E7=84=B6=E5=88=86?=
 =?UTF-8?q?=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/trace/TokenUsage.tsx | 42 ++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/trace/TokenUsage.tsx b/src/components/trace/TokenUsage.tsx
index 5919e91..840a4b9 100644
--- a/src/components/trace/TokenUsage.tsx
+++ b/src/components/trace/TokenUsage.tsx
@@ -5,7 +5,7 @@
  * 固定在详情面板中部，高度由内容自然决定。
  */
 
-import { Box, Typography, Stack } from '@mui/material';
+import { Box, Typography, Stack, Table, TableBody, TableRow, TableCell } from '@mui/material';
 import { Zap } from 'lucide-react';
 import { useAgentStore } from '@renderer/stores/agent-store';
 import { formatTokens } from '@renderer/lib/formatters';
@@ -46,12 +46,31 @@ export function TokenUsage(): React.JSX.Element {
       </Box>
 
       {/* 底部汇总 */}
-      <Stack spacing={0.5}>
-        <SummaryRow label="总计" value={tokenUsage.totalTokens > 0 ? formatTokens(tokenUsage.totalTokens) : '-'} highlight />
-        <SummaryRow label="上下文" value={tokenUsage.totalTokens > 0 ? `${usagePercent.toFixed(1)}%` : '-'}
-          color={usagePercent > 80 ? 'error.main' : usagePercent > 60 ? 'warning.main' : undefined} />
-        <SummaryRow label="迭代" value={`${currentIteration} / ${maxIterations}`} />
-      </Stack>
+      <Table size="small" sx={{ '& .MuiTableCell-root': { border: 0, py: 0.5, px: 0.5 } }}>
+        <TableBody>
+          <TableRow>
+            <TableCell sx={{ color: 'text.secondary', fontSize: 11, width: '40%' }}>总计</TableCell>
+            <TableCell sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'text.primary', fontSize: 12, textAlign: 'right' }}>
+              {tokenUsage.totalTokens > 0 ? formatTokens(tokenUsage.totalTokens) : '-'}
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell sx={{ color: 'text.secondary', fontSize: 11 }}>上下文</TableCell>
+            <TableCell sx={{
+              fontFamily: 'monospace', fontSize: 11, textAlign: 'right',
+              color: usagePercent > 80 ? 'error.main' : usagePercent > 60 ? 'warning.main' : 'text.secondary',
+            }}>
+              {tokenUsage.totalTokens > 0 ? `${usagePercent.toFixed(1)}%` : '-'}
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell sx={{ color: 'text.secondary', fontSize: 11 }}>迭代</TableCell>
+            <TableCell sx={{ fontFamily: 'monospace', fontSize: 11, color: 'text.secondary', textAlign: 'right' }}>
+              {currentIteration} / {maxIterations}
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
     </Box>
   );
 }
@@ -65,12 +84,3 @@ function StatCard({ label, value, color }: { label: string; value: string; color
     </Box>
   );
 }
-
-function SummaryRow({ label, value, highlight, color }: { label: string; value: string; highlight?: boolean; color?: string }) {
-  return (
-    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ py: 0.5, px: 0.5 }}>
-      <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>{label}</Typography>
-      <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: highlight ? 600 : 400, color: color ?? (highlight ? 'text.primary' : 'text.secondary'), fontSize: highlight ? 12 : 11 }}>{value}</Typography>
-    </Stack>
-  );
-}