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