feat(intelligent-eval): align detail/report drawer layouts with other modules
详情抽屉改两列布局(左静态上下文/右动态流程),会话进度加 Progress; 报告抽屉顶部加统计概览行与维度得分柱状图,移除总结卡内重复的分数展示。
This commit is contained in:
parent
22cc437e2d
commit
01f451c155
@ -1,6 +1,6 @@
|
|||||||
import { useCallback, useEffect, useState } from 'react'
|
import { useCallback, useEffect, useState } from 'react'
|
||||||
import {
|
import {
|
||||||
Alert, Button, Card, Descriptions, Empty, Input, Modal, Popconfirm, Space, Spin, Tag, message,
|
Alert, Button, Card, Col, Descriptions, Empty, Input, Modal, Popconfirm, Progress, Row, Space, Spin, Tag, message,
|
||||||
} from 'antd'
|
} from 'antd'
|
||||||
import { FileTextOutlined, StopOutlined } from '@ant-design/icons'
|
import { FileTextOutlined, StopOutlined } from '@ant-design/icons'
|
||||||
import { intelligentEvalsApi, type IntelligentEval, type IntelligentEvalSession } from '../../api'
|
import { intelligentEvalsApi, type IntelligentEval, type IntelligentEvalSession } from '../../api'
|
||||||
@ -125,8 +125,10 @@ export default function EvalDetail({ ev, targetName, onOpenReport, onChanged }:
|
|||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={9}>
|
||||||
<Card size="small" title="基本信息" style={sectionCard}>
|
<Card size="small" title="基本信息" style={sectionCard}>
|
||||||
<Descriptions column={3} size="small">
|
<Descriptions column={1} size="small">
|
||||||
<Descriptions.Item label="评测对象">{targetName}</Descriptions.Item>
|
<Descriptions.Item label="评测对象">{targetName}</Descriptions.Item>
|
||||||
<Descriptions.Item label="时间窗口">{ev.time_window_hours} 小时</Descriptions.Item>
|
<Descriptions.Item label="时间窗口">{ev.time_window_hours} 小时</Descriptions.Item>
|
||||||
<Descriptions.Item label="创建时间">{formatDateTime(ev.created_at)}</Descriptions.Item>
|
<Descriptions.Item label="创建时间">{formatDateTime(ev.created_at)}</Descriptions.Item>
|
||||||
@ -158,7 +160,9 @@ export default function EvalDetail({ ev, targetName, onOpenReport, onChanged }:
|
|||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
</Descriptions>
|
</Descriptions>
|
||||||
</Card>
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={15}>
|
||||||
{ev.status === 'planning' && (
|
{ev.status === 'planning' && (
|
||||||
ev.plan_feedback ? (
|
ev.plan_feedback ? (
|
||||||
<Alert
|
<Alert
|
||||||
@ -195,7 +199,18 @@ export default function EvalDetail({ ev, targetName, onOpenReport, onChanged }:
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{showSessions && (
|
{showSessions && (
|
||||||
<Card size="small" title={`会话进度(${ev.completed_sessions}/${ev.session_count})`} style={sectionCard}>
|
<Card
|
||||||
|
size="small"
|
||||||
|
title={`会话进度(${ev.completed_sessions}/${ev.session_count})`}
|
||||||
|
style={sectionCard}
|
||||||
|
extra={(
|
||||||
|
<Progress
|
||||||
|
percent={ev.session_count ? Math.round((ev.completed_sessions / ev.session_count) * 100) : 0}
|
||||||
|
size="small"
|
||||||
|
style={{ width: 140 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
>
|
||||||
{sessions === null && <Spin size="small" />}
|
{sessions === null && <Spin size="small" />}
|
||||||
{sessions !== null && sessions.length === 0 && (
|
{sessions !== null && sessions.length === 0 && (
|
||||||
<div style={{ fontSize: 13, color: colors.textSecondary }}>
|
<div style={{ fontSize: 13, color: colors.textSecondary }}>
|
||||||
@ -230,6 +245,8 @@ export default function EvalDetail({ ev, targetName, onOpenReport, onChanged }:
|
|||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
title="打回计划"
|
title="打回计划"
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import {
|
import {
|
||||||
Button, Card, Collapse, Empty, Space, Spin, Statistic, Tag, message,
|
Button, Card, Col, Collapse, Empty, Row, Space, Spin, Statistic, Tag, message,
|
||||||
} from 'antd'
|
} from 'antd'
|
||||||
import { ArrowLeftOutlined, DownloadOutlined } from '@ant-design/icons'
|
import { ArrowLeftOutlined, DownloadOutlined } from '@ant-design/icons'
|
||||||
|
import { Bar } from '@ant-design/charts'
|
||||||
import ChatBubble from '../ChatBubble'
|
import ChatBubble from '../ChatBubble'
|
||||||
import {
|
import {
|
||||||
intelligentEvalsApi,
|
intelligentEvalsApi,
|
||||||
@ -143,6 +144,23 @@ export default function EvalReport({ ev, onBack }: EvalReportProps) {
|
|||||||
const findings = [...(report?.findings ?? [])]
|
const findings = [...(report?.findings ?? [])]
|
||||||
.sort((a, b) => severityOf(a.severity).order - severityOf(b.severity).order)
|
.sort((a, b) => severityOf(a.severity).order - severityOf(b.severity).order)
|
||||||
const scores = Object.entries(report?.scores ?? {})
|
const scores = Object.entries(report?.scores ?? {})
|
||||||
|
const overall = scores.length > 0
|
||||||
|
? (scores.reduce((sum, [, v]) => sum + Number(v), 0) / scores.length).toFixed(1)
|
||||||
|
: null
|
||||||
|
const sevCounts = findings.reduce((acc, f) => {
|
||||||
|
acc[f.severity] = (acc[f.severity] ?? 0) + 1
|
||||||
|
return acc
|
||||||
|
}, {} as Record<string, number>)
|
||||||
|
|
||||||
|
const scoreData = scores.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,
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ height: '100%', overflowY: 'auto', padding: '0 16px 16px' }}>
|
<div style={{ height: '100%', overflowY: 'auto', padding: '0 16px 16px' }}>
|
||||||
@ -167,17 +185,36 @@ export default function EvalReport({ ev, onBack }: EvalReportProps) {
|
|||||||
|
|
||||||
{report && (
|
{report && (
|
||||||
<>
|
<>
|
||||||
|
<Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card size="small"><Statistic title="综合评分" value={overall ?? '—'} /></Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card size="small">
|
||||||
|
<Statistic title="问题发现" value={findings.length} />
|
||||||
|
<div style={{ fontSize: 12, color: colors.textMuted }}>
|
||||||
|
高 {sevCounts.high ?? 0} · 中 {sevCounts.medium ?? 0} · 低 {sevCounts.low ?? 0}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card size="small"><Statistic title="亮点" value={report.highlights.length} /></Card>
|
||||||
|
</Col>
|
||||||
|
<Col span={6}>
|
||||||
|
<Card size="small"><Statistic title="会话数" value={ev.session_count} /></Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{scoreData.length > 0 && (
|
||||||
|
<Card size="small" title="维度得分" style={sectionCard}>
|
||||||
|
<Bar {...scoreConfig} />
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
<Card size="small" title="总结" style={sectionCard}>
|
<Card size="small" title="总结" style={sectionCard}>
|
||||||
<div style={{ whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.8 }}>
|
<div style={{ whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.8 }}>
|
||||||
{report.summary}
|
{report.summary}
|
||||||
</div>
|
</div>
|
||||||
{scores.length > 0 && (
|
|
||||||
<div style={{ display: 'flex', gap: 32, marginTop: 12, flexWrap: 'wrap' }}>
|
|
||||||
{scores.map(([dimension, score]) => (
|
|
||||||
<Statistic key={dimension} title={dimension} value={score} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card size="small" title={`问题发现(${findings.length})`} style={sectionCard}>
|
<Card size="small" title={`问题发现(${findings.length})`} style={sectionCard}>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user