From de80e85658844b67d981ceb65a07c3936c75f505 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Thu, 20 Aug 2026 19:22:42 +0800
Subject: [PATCH] feat(ui): replace Bar chart with custom progress cards for
 dimension scores

---
 .../intelligent_eval/EvalReport.tsx           | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/frontend/web/src/components/intelligent_eval/EvalReport.tsx b/frontend/web/src/components/intelligent_eval/EvalReport.tsx
index 197a800..aea5cd3 100644
--- a/frontend/web/src/components/intelligent_eval/EvalReport.tsx
+++ b/frontend/web/src/components/intelligent_eval/EvalReport.tsx
@@ -5,7 +5,6 @@ import {
 import {
   BulbOutlined, DownloadOutlined, MessageOutlined, StarOutlined, WarningOutlined,
 } from '@ant-design/icons'
-import { Bar } from '@ant-design/charts'
 import ChatBubble from '../ChatBubble'
 import SectionHeader from '../SectionHeader'
 import {
@@ -104,6 +103,42 @@ 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
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {dimScores.map(([dimension, score]) => {
+        const pct = Math.round(score * 100)
+        const color = getScoreColor(score)
+        return (
+          <div key={dimension}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+              <div style={{ fontSize: 13, fontWeight: 500 }}>{dimension}</div>
+              <div style={{ fontSize: 15, fontWeight: 700, color }}>{pct}</div>
+            </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>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 interface EvalReportProps {
   ev: IntelligentEval
   /** 独立页内作为子视图 tab 使用时可不传（tab 切换代替返回）。 */
@@ -144,16 +179,6 @@ export default function EvalReport({ ev, onBack }: EvalReportProps) {
     return acc
   }, {} as Record<string, number>)
 
-  const scoreData = dimScores.map(([dimension, score]) => ({ dimension, score: Number(score) }))
-  const scoreConfig = {
-    data: scoreData,
-    xField: 'dimension',
-    yField: 'score',
-    coordinate: { transform: [{ type: 'transpose' }] },
-    height: Math.max(160, scoreData.length * 44),
-    color: colors.primary,
-  }
-
   const summaryCard: React.CSSProperties = {
     display: 'flex', alignItems: 'center', gap: 10,
     border: `1px solid ${colors.border}`,
@@ -238,9 +263,9 @@ export default function EvalReport({ ev, onBack }: EvalReportProps) {
             </Col>
           </Row>
 
-          {scoreData.length > 0 && (
+          {dimScores.length > 0 && (
             <Card size="small" title="维度得分" style={sectionCard}>
-              <Bar {...scoreConfig} />
+              <DimensionScoresCards dimScores={dimScores} />
             </Card>
           )}