Tighten results table layout and compact trace controls
Made-with: Cursor
This commit is contained in:
Xin Wang
56
src/App.tsx
56
src/App.tsx
@@ -753,81 +753,75 @@ export default function App() {
|
||||
<Table>
|
||||
<TableHeader className="bg-[#f8fafc] sticky top-0 z-20">
|
||||
<TableRow className="hover:bg-transparent border-b border-[#e2e8f0]">
|
||||
<TableHead className="w-16 h-12 px-6 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">序号</TableHead>
|
||||
<TableHead className="w-16 h-12 px-6 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">迭代</TableHead>
|
||||
<TableHead className="w-14 h-12 px-3 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">序号</TableHead>
|
||||
<TableHead className="w-14 h-12 px-3 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">迭代</TableHead>
|
||||
{appMode === 'chat' && (
|
||||
<TableHead className="min-w-[200px] h-12 px-6 font-bold text-[10px] text-[#0f172a] uppercase tracking-wider">用户提问 (Query)</TableHead>
|
||||
<TableHead className="min-w-[140px] max-w-[220px] h-12 px-4 font-bold text-[10px] text-[#0f172a] uppercase tracking-wider">用户提问</TableHead>
|
||||
)}
|
||||
{inputs.map(input => (
|
||||
<TableHead key={input.name} className="h-12 px-6 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">{input.label}</TableHead>
|
||||
<TableHead key={input.name} className="min-w-[90px] max-w-[160px] h-12 px-4 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider truncate">{input.label}</TableHead>
|
||||
))}
|
||||
<TableHead className="w-32 h-12 px-6 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">状态</TableHead>
|
||||
<TableHead className="w-24 h-12 px-4 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">状态</TableHead>
|
||||
{showTrace && (
|
||||
<TableHead className="w-[180px] h-12 px-6 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">执行追踪</TableHead>
|
||||
<TableHead className="w-[96px] h-12 px-4 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">追踪</TableHead>
|
||||
)}
|
||||
<TableHead className="w-[420px] h-12 px-6 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">响应内容 (Response Payload)</TableHead>
|
||||
<TableHead className="w-[320px] h-12 px-4 font-bold text-[10px] text-[#94a3b8] uppercase tracking-wider">响应内容</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{flatResults.map((row, idx) => {
|
||||
const trace: NodeTraceStep[] | undefined = row.result?.trace;
|
||||
const hasTrace = (trace?.length ?? 0) > 0;
|
||||
const traceTooltipParts: string[] = [];
|
||||
if (row.result?.elapsedTime != null) traceTooltipParts.push(`耗时 ${row.result.elapsedTime.toFixed(2)}s`);
|
||||
if (row.result?.totalTokens != null) traceTooltipParts.push(`Tokens ${row.result.totalTokens}`);
|
||||
return (
|
||||
<TableRow key={idx} className="hover:bg-slate-50/50 border-b border-[#f1f5f9] transition-colors">
|
||||
<TableCell className="px-6 py-4 font-mono text-[10px] font-bold text-[#94a3b8]">{String(row.caseIndex).padStart(2, '0')}</TableCell>
|
||||
<TableCell className="px-6 py-4 font-mono text-[10px] font-bold text-[#94a3b8]">{String(row.iteration).padStart(2, '0')}</TableCell>
|
||||
<TableCell className="px-3 py-4 font-mono text-[10px] font-bold text-[#94a3b8]">{String(row.caseIndex).padStart(2, '0')}</TableCell>
|
||||
<TableCell className="px-3 py-4 font-mono text-[10px] font-bold text-[#94a3b8]">{String(row.iteration).padStart(2, '0')}</TableCell>
|
||||
{appMode === 'chat' && (
|
||||
<TableCell className="px-6 py-4 text-xs font-medium text-[#0f172a] max-w-[200px] truncate">
|
||||
<TableCell className="px-4 py-4 text-xs font-medium text-[#0f172a] max-w-[220px] truncate" title={row.query || ''}>
|
||||
{row.query || '-'}
|
||||
</TableCell>
|
||||
)}
|
||||
{inputs.map(input => (
|
||||
<TableCell key={input.name} className="px-6 py-4 text-xs text-[#64748b] max-w-[150px] truncate">
|
||||
<TableCell key={input.name} className="px-4 py-4 text-xs text-[#64748b] max-w-[160px] truncate" title={String(row.inputs[input.name] ?? '')}>
|
||||
{String(row.inputs[input.name] || '-')}
|
||||
</TableCell>
|
||||
))}
|
||||
<TableCell className="px-6 py-4">
|
||||
<TableCell className="px-4 py-4">
|
||||
{row.isError ? (
|
||||
<div className="flex items-center gap-1.5 text-red-500 font-bold text-[9px] uppercase tracking-tight">
|
||||
<div className="h-1 w-1 rounded-full bg-red-500" />
|
||||
失败 (Failed)
|
||||
失败
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-[#10b981] font-bold text-[9px] uppercase tracking-tight">
|
||||
<div className="h-1 w-1 rounded-full bg-[#10b981]" />
|
||||
成功 (Success)
|
||||
成功
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
{showTrace && (
|
||||
<TableCell className="px-6 py-4 align-middle">
|
||||
<TableCell className="px-4 py-4 align-middle">
|
||||
{hasTrace ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTraceDialogResult(row.result)}
|
||||
className="group flex flex-col items-start gap-1 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-left transition-all hover:border-slate-300 hover:shadow-sm active:scale-[0.98]"
|
||||
title={traceTooltipParts.length ? `${trace!.length} 步 · ${traceTooltipParts.join(' · ')}` : `${trace!.length} 步`}
|
||||
className="group inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-1 text-left transition-all hover:border-slate-300 hover:shadow-sm active:scale-[0.98]"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 text-[10px] font-bold text-[#0f172a]">
|
||||
<Activity className="h-3 w-3" />
|
||||
{trace!.length} 步
|
||||
<ChevronRight className="h-3 w-3 text-slate-300 group-hover:translate-x-0.5 transition-transform" />
|
||||
</span>
|
||||
<span className="flex items-center gap-2 font-mono text-[9px] text-[#94a3b8]">
|
||||
{row.result?.elapsedTime != null && (
|
||||
<span className="flex items-center gap-0.5"><Clock className="h-2.5 w-2.5" />{row.result.elapsedTime.toFixed(2)}s</span>
|
||||
)}
|
||||
{row.result?.totalTokens != null && (
|
||||
<span className="flex items-center gap-0.5"><Coins className="h-2.5 w-2.5" />{row.result.totalTokens}</span>
|
||||
)}
|
||||
</span>
|
||||
<Activity className="h-3 w-3 text-[#0f172a]" />
|
||||
<span className="text-[10px] font-bold text-[#0f172a]">{trace!.length} 步</span>
|
||||
<ChevronRight className="h-3 w-3 text-slate-300 group-hover:translate-x-0.5 transition-transform" />
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-[10px] text-slate-300">—</span>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell className="px-6 py-4 align-top">
|
||||
<div className="w-[420px] max-w-[420px] max-h-40 overflow-auto whitespace-pre-wrap break-all font-mono text-[10px] leading-relaxed bg-slate-50 p-3 rounded-xl border border-slate-100 text-[#334155] shadow-[inset_0_1px_2px_rgba(0,0,0,0.02)]">
|
||||
<TableCell className="px-4 py-4 align-top">
|
||||
<div className="w-[300px] max-w-[300px] max-h-40 overflow-auto whitespace-pre-wrap break-all font-mono text-[10px] leading-relaxed bg-slate-50 p-3 rounded-xl border border-slate-100 text-[#334155] shadow-[inset_0_1px_2px_rgba(0,0,0,0.02)]">
|
||||
{row.output}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
Reference in New Issue
Block a user