wx44wx/dify-batch-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten results table layout and compact trace controls

Browse Source 
Made-with: Cursor
This commit is contained in:
Xin Wang
2026-04-18 14:14:12 +08:00
parent 5822b8b407
commit cb27580711
1 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/App.tsx
View File

@@ -753,81 +753,75 @@ export default function App() {
<Table> <Table>
<TableHeader className="bg-[#f8fafc] sticky top-0 z-20"> <TableHeader className="bg-[#f8fafc] sticky top-0 z-20">
<TableRow className="hover:bg-transparent border-b border-[#e2e8f0]"> <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-14 h-12 px-3 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>
{appMode === 'chat' && ( {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 => ( {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 && ( {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> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{flatResults.map((row, idx) => { {flatResults.map((row, idx) => {
const trace: NodeTraceStep[] | undefined = row.result?.trace; const trace: NodeTraceStep[] | undefined = row.result?.trace;
const hasTrace = (trace?.length ?? 0) > 0; 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 ( return (
<TableRow key={idx} className="hover:bg-slate-50/50 border-b border-[#f1f5f9] transition-colors"> <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-3 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.iteration).padStart(2, '0')}</TableCell>
{appMode === 'chat' && ( {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 || '-'} {row.query || '-'}
</TableCell> </TableCell>
)} )}
{inputs.map(input => ( {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] || '-')} {String(row.inputs[input.name] || '-')}
</TableCell> </TableCell>
))} ))}
<TableCell className="px-6 py-4"> <TableCell className="px-4 py-4">
{row.isError ? ( {row.isError ? (
<div className="flex items-center gap-1.5 text-red-500 font-bold text-[9px] uppercase tracking-tight"> <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" /> <div className="h-1 w-1 rounded-full bg-red-500" />
失败 (Failed) 失败
</div> </div>
) : ( ) : (
<div className="flex items-center gap-1.5 text-[#10b981] font-bold text-[9px] uppercase tracking-tight"> <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]" /> <div className="h-1 w-1 rounded-full bg-[#10b981]" />
成功 (Success) 成功
</div> </div>
)} )}
</TableCell> </TableCell>
{showTrace && ( {showTrace && (
<TableCell className="px-6 py-4 align-middle"> <TableCell className="px-4 py-4 align-middle">
{hasTrace ? ( {hasTrace ? (
<button <button
type="button" type="button"
onClick={() => setTraceDialogResult(row.result)} 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 text-[#0f172a]" />
<Activity className="h-3 w-3" /> <span className="text-[10px] font-bold text-[#0f172a]">{trace!.length} 步</span>
{trace!.length} 步 <ChevronRight className="h-3 w-3 text-slate-300 group-hover:translate-x-0.5 transition-transform" />
<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>
</button> </button>
) : ( ) : (
<span className="text-[10px] text-slate-300">—</span> <span className="text-[10px] text-slate-300">—</span>
)} )}
</TableCell> </TableCell>
)} )}
<TableCell className="px-6 py-4 align-top"> <TableCell className="px-4 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)]"> <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} {row.output}
</div> </div>
</TableCell> </TableCell>