solahqb/AgentEvalTool
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(ui): add grade labels and icons to dimension scores for better intuitiveness

Browse Source
This commit is contained in:
sinohqb 2026-08-20 19:29:30 +08:00
parent de80e85658
commit fb68f9ebce
1 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/web/src/components/intelligent_eval/EvalReport.tsx
View File

@ -3,7 +3,7 @@ import {
Button, Card, Col, Collapse, Empty, Row, Space, Spin, Tag, message,
} from 'antd'
import {
BulbOutlined, DownloadOutlined, MessageOutlined, StarOutlined, WarningOutlined,
BulbOutlined, CheckCircleOutlined, CloseCircleOutlined, DownloadOutlined, MessageOutlined, StarOutlined, WarningOutlined,
} from '@ant-design/icons'
import ChatBubble from '../ChatBubble'
import SectionHeader from '../SectionHeader'
@ -104,33 +104,40 @@ function SessionMessages({ evalId, sessionId, verdict }: {
}
function DimensionScoresCards({ dimScores }: { dimScores: [string, number][] }) {
const getScoreColor = (score: number) => {
if (score >= 0.8) return statusColors.completed
if (score >= 0.6) return colors.warning
return statusColors.failed
const getScoreMeta = (score: number) => {
if (score >= 0.8) return { color: statusColors.completed, label: '优秀', icon: <CheckCircleOutlined /> }
if (score >= 0.6) return { color: colors.warning, label: '良好', icon: <WarningOutlined /> }
return { color: statusColors.failed, label: '待改进', icon: <CloseCircleOutlined /> }
}
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{dimScores.map(([dimension, score]) => {
const pct = Math.round(score * 100)
const color = getScoreColor(score)
const meta = getScoreMeta(score)
return (
<div key={dimension}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
<div key={dimension} style={{ padding: '12px 16px', background: colors.bgSubtle, borderRadius: 8 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
<div style={{ fontSize: 13, fontWeight: 500 }}>{dimension}</div>
<div style={{ fontSize: 15, fontWeight: 700, color }}>{pct}</div>
<Tag color={meta.color} icon={meta.icon} style={{ margin: 0, fontSize: 12 }}>
{meta.label}
</Tag>
</div>
<div style={{ height: 8, background: colors.bgSubtle, borderRadius: 4, overflow: 'hidden' }}>
<div
style={{
width: `${pct}%`,
height: '100%',
background: color,
borderRadius: 4,
transition: 'width 0.3s',
}}
/>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ flex: 1, height: 8, background: colors.bgContainer, borderRadius: 4, overflow: 'hidden' }}>
<div
style={{
width: `${pct}%`,
height: '100%',
background: meta.color,
borderRadius: 4,
transition: 'width 0.3s',
}}
/>
</div>
<div style={{ fontSize: 18, fontWeight: 700, color: meta.color, minWidth: 40, textAlign: 'right' }}>
{pct}
</div>
</div>
</div>
)