fix: 右侧面板布局和间距修复

- TraceViewer: 移除底部重复的 Token/Provider 摘要(与TokenUsage重复)
- TraceViewer: height:100% → flexShrink+maxHeight 避免撑破布局
- TokenUsage: StatCard/SummaryRow 增加内边距和间距
This commit is contained in:
thzxx
2026-06-27 22:05:52 +08:00
parent f99c65ee28
commit 8f687f77a6
3 changed files with 8 additions and 22 deletions
+3 -3
View File
@@ -64,17 +64,17 @@ export function TokenUsage(): React.JSX.Element {
function StatCard({ label, value, color }: { label: string; value: string; color: string }) {
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 1, borderRadius: 1.5, bgcolor: 'action.hover' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, px: 1.5, py: 1.25, borderRadius: 1.5, bgcolor: 'action.hover' }}>
<Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: color, flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 11 }}>{label}</Typography>
<Typography variant="caption" sx={{ ml: 'auto', fontFamily: 'monospace', fontWeight: 600, color: 'text.primary', fontSize: 12 }}>{value}</Typography>
<Typography variant="caption" sx={{ ml: 'auto', pl: 1, fontFamily: 'monospace', fontWeight: 600, color: 'text.primary', fontSize: 12 }}>{value}</Typography>
</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.25 }}>
<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>