feat(ui): restructure config snapshot detail view to match overview layout

This commit is contained in:
sinohqb 2026-08-20 20:02:17 +08:00
parent 68bf1876af
commit 09a808c0c5

View File

@ -141,41 +141,92 @@ export default function ConfigSnapshots({ evalId, onBack }: ConfigSnapshotsProps
</Tag>
</div>
<Card size="small" title="配置信息" style={{ marginBottom: 16 }}>
<Descriptions column={1} size="small">
<Descriptions.Item label="评估目标">{selectedSnapshot.goal || '—'}</Descriptions.Item>
<Descriptions.Item label="考察意图">{selectedSnapshot.intent || '—'}</Descriptions.Item>
<Descriptions.Item label="角色描述">
<span style={{ whiteSpace: 'pre-wrap' }}>{selectedSnapshot.role_description || '—'}</span>
</Descriptions.Item>
<Descriptions.Item label="时间窗口">{selectedSnapshot.time_window_hours} </Descriptions.Item>
<Descriptions.Item label="种子集">
{Object.keys(selectedSnapshot.seeds ?? {}).length === 0
? '—'
: (
<pre style={{
margin: 0, fontSize: 12, background: colors.bgSubtle,
padding: 8, borderRadius: 6, overflowX: 'auto',
}}
>
{JSON.stringify(selectedSnapshot.seeds, null, 2)}
</pre>
)}
</Descriptions.Item>
</Descriptions>
<Card size="small" title="基本信息" style={{ marginBottom: 16 }}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 32px', padding: '4px 0' }}>
<div style={{ display: 'flex', gap: 8, fontSize: 13, alignItems: 'center' }}>
<span style={{ color: colors.textSecondary, fontSize: 12, width: 60, textAlign: 'right', flexShrink: 0 }}></span>
<span>{formatDateTime(selectedSnapshot.created_at)}</span>
</div>
<div style={{ display: 'flex', gap: 8, fontSize: 13, alignItems: 'center' }}>
<span style={{ color: colors.textSecondary, fontSize: 12, width: 60, textAlign: 'right', flexShrink: 0 }}></span>
<span>{selectedSnapshot.created_by || '—'}</span>
</div>
<div style={{ display: 'flex', gap: 8, fontSize: 13, alignItems: 'center' }}>
<span style={{ color: colors.textSecondary, fontSize: 12, width: 60, textAlign: 'right', flexShrink: 0 }}></span>
<span>{selectedSnapshot.time_window_hours} </span>
</div>
</div>
</Card>
<Card size="small" title="用户输入" style={{ marginBottom: 16 }}>
<div style={{ display: 'grid', gridTemplateColumns: '2fr 3fr', gap: 16 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<div>
<div style={{ fontSize: 12, color: colors.textSecondary, marginBottom: 4 }}></div>
<div style={{
fontSize: 13, lineHeight: 1.6, padding: '8px 12px', background: colors.bgSubtle,
borderRadius: 6, whiteSpace: 'pre-wrap',
}}>
{selectedSnapshot.goal || '—'}
</div>
</div>
<div>
<div style={{ fontSize: 12, color: colors.textSecondary, marginBottom: 4 }}></div>
<div style={{
fontSize: 13, lineHeight: 1.6, padding: '8px 12px', background: colors.bgSubtle,
borderRadius: 6, whiteSpace: 'pre-wrap',
}}>
{selectedSnapshot.intent || '—'}
</div>
</div>
<div>
<div style={{ fontSize: 12, color: colors.textSecondary, marginBottom: 4 }}></div>
<div style={{
fontSize: 13, lineHeight: 1.6, padding: '8px 12px', background: colors.bgSubtle,
borderRadius: 6, whiteSpace: 'pre-wrap',
}}>
{selectedSnapshot.role_description || '—'}
</div>
</div>
</div>
<div>
<div style={{ fontSize: 12, color: colors.textSecondary, marginBottom: 4 }}></div>
{Object.keys(selectedSnapshot.seeds ?? {}).length === 0 ? (
<div style={{
fontSize: 13, padding: '8px 12px', background: colors.bgSubtle, borderRadius: 6,
}}></div>
) : (
<pre style={{
margin: 0, fontSize: 12, lineHeight: 1.6, background: colors.bgSubtle,
padding: '12px 16px', borderRadius: 6, overflowX: 'auto',
height: 340, overflowY: 'auto',
}}>
{JSON.stringify(selectedSnapshot.seeds, null, 2)}
</pre>
)}
</div>
</div>
</Card>
{selectedSnapshot.plan && (
<Card size="small" title="粗计划">
<Card size="small" title="粗计划" style={{ marginBottom: 16 }}>
<pre style={{
margin: 0, fontSize: 12, background: colors.bgSubtle,
padding: 8, borderRadius: 6, overflowX: 'auto',
}}
>
margin: 0, fontSize: 12, lineHeight: 1.6, background: colors.bgSubtle,
padding: '12px 16px', borderRadius: 6, overflowX: 'auto',
}}>
{JSON.stringify(selectedSnapshot.plan, null, 2)}
</pre>
</Card>
)}
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
fontSize: 12, color: colors.textMuted, padding: '4px 0 8px',
}}>
<span style={{ height: 1, width: 80, background: colors.border }} />
<span style={{ height: 1, width: 80, background: colors.border }} />
</div>
</div>
)
}