From fb68f9ebce3348368b0822f319f56f76d0418410 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Thu, 20 Aug 2026 19:29:30 +0800
Subject: [PATCH] feat(ui): add grade labels and icons to dimension scores for
 better intuitiveness

---
 .../intelligent_eval/EvalReport.tsx           | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/web/src/components/intelligent_eval/EvalReport.tsx b/frontend/web/src/components/intelligent_eval/EvalReport.tsx
index aea5cd3..9060e6f 100644
--- a/frontend/web/src/components/intelligent_eval/EvalReport.tsx
+++ b/frontend/web/src/components/intelligent_eval/EvalReport.tsx
@@ -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>
         )