363 lines
12 KiB
JavaScript
363 lines
12 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useRef, useEffect } from 'react';
|
|||
|
|
import { Box, Typography, Chip, Paper, Button } from '@mui/material';
|
|||
|
|
import CheckIcon from '@mui/icons-material/Check';
|
|||
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|||
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|||
|
|
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
|||
|
|
import AccessTimeIcon from '@mui/icons-material/AccessTime';
|
|||
|
|
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
|
|||
|
|
import ReactMarkdown from 'react-markdown';
|
|||
|
|
import { detailStyles } from '../detailStyles';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import 'github-markdown-css/github-markdown-light.css';
|
|||
|
|
|
|||
|
|
// 答题状态常量
|
|||
|
|
const EVAL_STATUS = {
|
|||
|
|
SUCCESS: 0,
|
|||
|
|
FORMAT_ERROR: 1,
|
|||
|
|
API_ERROR: 2
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 状态标签配置
|
|||
|
|
const STATUS_CONFIG = {
|
|||
|
|
[EVAL_STATUS.SUCCESS]: { label: 'evalTasks.statusSuccess', color: 'success' },
|
|||
|
|
[EVAL_STATUS.FORMAT_ERROR]: { label: 'evalTasks.statusFormatError', color: 'warning' },
|
|||
|
|
[EVAL_STATUS.API_ERROR]: { label: 'evalTasks.statusApiError', color: 'error' }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default function QuestionCard({ result, index, task }) {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
const {
|
|||
|
|
evalDataset,
|
|||
|
|
modelAnswer,
|
|||
|
|
isCorrect,
|
|||
|
|
score,
|
|||
|
|
judgeResponse,
|
|||
|
|
duration = 0,
|
|||
|
|
status = 0,
|
|||
|
|
errorMessage = ''
|
|||
|
|
} = result;
|
|||
|
|
const { question, questionType, options, correctAnswer } = evalDataset;
|
|||
|
|
|
|||
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|||
|
|
const [shouldShowExpand, setShouldShowExpand] = useState(false);
|
|||
|
|
const contentRef = useRef(null);
|
|||
|
|
|
|||
|
|
const [isCorrectExpanded, setIsCorrectExpanded] = useState(false);
|
|||
|
|
const [shouldShowCorrectExpand, setShouldShowCorrectExpand] = useState(false);
|
|||
|
|
const correctContentRef = useRef(null);
|
|||
|
|
|
|||
|
|
// 检查内容是否超过高度限制
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (contentRef.current) {
|
|||
|
|
const hasOverflow = contentRef.current.scrollHeight > 200;
|
|||
|
|
setShouldShowExpand(hasOverflow);
|
|||
|
|
}
|
|||
|
|
}, [modelAnswer]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (correctContentRef.current) {
|
|||
|
|
const hasOverflow = correctContentRef.current.scrollHeight > 200;
|
|||
|
|
setShouldShowCorrectExpand(hasOverflow);
|
|||
|
|
}
|
|||
|
|
}, [correctAnswer]);
|
|||
|
|
|
|||
|
|
// 解析选项
|
|||
|
|
let parsedOptions = [];
|
|||
|
|
if (questionType === 'single_choice' || questionType === 'multiple_choice') {
|
|||
|
|
try {
|
|||
|
|
parsedOptions = JSON.parse(options);
|
|||
|
|
} catch (e) {
|
|||
|
|
parsedOptions = options ? [options] : [];
|
|||
|
|
}
|
|||
|
|
} else if (questionType === 'true_false') {
|
|||
|
|
parsedOptions = ['True', 'False'];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化答案显示
|
|||
|
|
const formatAnswer = ans => {
|
|||
|
|
if (!ans) return '-';
|
|||
|
|
return String(ans);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 判断选项状态
|
|||
|
|
const getOptionStatus = (optionText, idx) => {
|
|||
|
|
const letter = String.fromCharCode(65 + idx);
|
|||
|
|
const normModelAns = String(modelAnswer).trim();
|
|||
|
|
const normCorrectAns = String(correctAnswer).trim();
|
|||
|
|
|
|||
|
|
let isSelected = false;
|
|||
|
|
let isCorrectOption = false;
|
|||
|
|
|
|||
|
|
if (questionType === 'true_false') {
|
|||
|
|
// 判断题：A 对应 ✅/True，B 对应 ❌/False
|
|||
|
|
const isTrueOption = idx === 0;
|
|||
|
|
const isFalseOption = idx === 1;
|
|||
|
|
|
|||
|
|
isSelected =
|
|||
|
|
(isTrueOption && (normModelAns === '✅' || normModelAns.toUpperCase() === 'TRUE')) ||
|
|||
|
|
(isFalseOption && (normModelAns === '❌' || normModelAns.toUpperCase() === 'FALSE'));
|
|||
|
|
|
|||
|
|
isCorrectOption =
|
|||
|
|
(isTrueOption && (normCorrectAns === '✅' || normCorrectAns.toUpperCase() === 'TRUE')) ||
|
|||
|
|
(isFalseOption && (normCorrectAns === '❌' || normCorrectAns.toUpperCase() === 'FALSE'));
|
|||
|
|
} else {
|
|||
|
|
// 选择题逻辑
|
|||
|
|
const normModelAnsUpper = normModelAns.toUpperCase();
|
|||
|
|
const normCorrectAnsUpper = normCorrectAns.toUpperCase();
|
|||
|
|
const normOptionText = String(optionText).toUpperCase();
|
|||
|
|
|
|||
|
|
isSelected = normModelAnsUpper.includes(letter) || normModelAnsUpper.includes(normOptionText);
|
|||
|
|
isCorrectOption = normCorrectAnsUpper.includes(letter) || normCorrectAnsUpper.includes(normOptionText);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return { isSelected, isCorrectOption };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 解析 AI 点评内容
|
|||
|
|
const getJudgeDisplayContent = content => {
|
|||
|
|
if (!content) return '';
|
|||
|
|
try {
|
|||
|
|
// 尝试从 markdown 代码块中提取 JSON
|
|||
|
|
const jsonMatch = content.match(/\{[\s\S]*?\}/);
|
|||
|
|
if (jsonMatch) {
|
|||
|
|
const parsed = JSON.parse(jsonMatch[0]);
|
|||
|
|
if (parsed.reason) return parsed.reason;
|
|||
|
|
}
|
|||
|
|
// 尝试直接解析
|
|||
|
|
const parsed = JSON.parse(content);
|
|||
|
|
if (parsed.reason) return parsed.reason;
|
|||
|
|
} catch (e) {
|
|||
|
|
// 解析失败，返回原内容
|
|||
|
|
}
|
|||
|
|
return content;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box sx={detailStyles.questionCard(isCorrect)}>
|
|||
|
|
{/* 判卷标记 (红勾/红叉) - 绝对定位 */}
|
|||
|
|
<Box sx={detailStyles.markIcon(isCorrect)}>
|
|||
|
|
{isCorrect ? <CheckIcon fontSize="inherit" /> : <CloseIcon fontSize="inherit" />}
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 题号与类型标签 */}
|
|||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2, gap: 1.5, flexWrap: 'wrap' }}>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
...detailStyles.questionIndex,
|
|||
|
|
position: 'relative', // 改为相对定位
|
|||
|
|
top: 'auto',
|
|||
|
|
left: 'auto',
|
|||
|
|
flexShrink: 0
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{index + 1}
|
|||
|
|
</Box>
|
|||
|
|
<Chip
|
|||
|
|
label={t(`eval.questionTypes.${questionType}`)}
|
|||
|
|
size="small"
|
|||
|
|
variant="outlined"
|
|||
|
|
color="primary"
|
|||
|
|
sx={{ borderRadius: 1 }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 答题耗时 */}
|
|||
|
|
{duration > 0 && (
|
|||
|
|
<Chip
|
|||
|
|
icon={<AccessTimeIcon sx={{ fontSize: 14 }} />}
|
|||
|
|
label={duration >= 1000 ? `${(duration / 1000).toFixed(1)}s` : `${duration}ms`}
|
|||
|
|
size="small"
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{ height: 24, '& .MuiChip-label': { px: 0.75, fontSize: '0.75rem' } }}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 答题状态 */}
|
|||
|
|
{status !== EVAL_STATUS.SUCCESS && (
|
|||
|
|
<Chip
|
|||
|
|
icon={<ErrorOutlineIcon sx={{ fontSize: 14 }} />}
|
|||
|
|
label={t(
|
|||
|
|
STATUS_CONFIG[status]?.label || 'evalTasks.statusUnknown',
|
|||
|
|
status === EVAL_STATUS.FORMAT_ERROR ? t('evalTasks.statusFormatError') : t('evalTasks.statusApiError')
|
|||
|
|
)}
|
|||
|
|
size="small"
|
|||
|
|
color={STATUS_CONFIG[status]?.color || 'default'}
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{ height: 24, '& .MuiChip-label': { px: 0.75, fontSize: '0.75rem' } }}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 题目内容 */}
|
|||
|
|
<Box>
|
|||
|
|
<Typography sx={detailStyles.questionContent}>{question}</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 选项区域 (仅选择题/判断题) */}
|
|||
|
|
{parsedOptions.length > 0 && (
|
|||
|
|
<Box sx={detailStyles.optionsContainer}>
|
|||
|
|
{parsedOptions.map((opt, idx) => {
|
|||
|
|
const letter = String.fromCharCode(65 + idx);
|
|||
|
|
const { isSelected, isCorrectOption } = getOptionStatus(opt, idx);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box key={idx} sx={detailStyles.optionItem(isSelected, isCorrectOption)}>
|
|||
|
|
<Typography sx={{ fontWeight: 600, minWidth: 24 }}>{letter}.</Typography>
|
|||
|
|
<Typography>{opt}</Typography>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 答案对比区域 */}
|
|||
|
|
<Box sx={detailStyles.answerSection}>
|
|||
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
|
|||
|
|
{t('evalTasks.modelAnswer')}
|
|||
|
|
</Typography>
|
|||
|
|
|
|||
|
|
<Box ref={contentRef} sx={detailStyles.markdownContainer(isExpanded)}>
|
|||
|
|
{questionType === 'open_ended' || questionType === 'short_answer' ? (
|
|||
|
|
<div className="markdown-body">
|
|||
|
|
<ReactMarkdown>{modelAnswer || ''}</ReactMarkdown>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<Typography
|
|||
|
|
variant="body1"
|
|||
|
|
sx={{
|
|||
|
|
color: isCorrect ? 'success.main' : 'error.main',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
fontFamily: 'monospace',
|
|||
|
|
whiteSpace: 'pre-wrap'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{formatAnswer(modelAnswer)}
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 展开/收起 遮罩和按钮 */}
|
|||
|
|
{shouldShowExpand && !isExpanded && (
|
|||
|
|
<Box sx={detailStyles.expandMask}>
|
|||
|
|
<Button
|
|||
|
|
size="small"
|
|||
|
|
onClick={() => setIsExpanded(true)}
|
|||
|
|
startIcon={<ExpandMoreIcon />}
|
|||
|
|
sx={detailStyles.expandButton}
|
|||
|
|
>
|
|||
|
|
{t('common.expand', '展开全部')}
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{isExpanded && shouldShowExpand && (
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 1 }}>
|
|||
|
|
<Button
|
|||
|
|
size="small"
|
|||
|
|
onClick={() => setIsExpanded(false)}
|
|||
|
|
startIcon={<ExpandLessIcon />}
|
|||
|
|
sx={{ fontSize: '0.75rem', textTransform: 'none' }}
|
|||
|
|
>
|
|||
|
|
{t('common.collapse', '收起内容')}
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Box sx={{ mt: 2 }}>
|
|||
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
|
|||
|
|
{t('evalTasks.correctAnswer')}
|
|||
|
|
</Typography>
|
|||
|
|
<Box ref={correctContentRef} sx={detailStyles.markdownContainer(isCorrectExpanded)}>
|
|||
|
|
{questionType === 'open_ended' || questionType === 'short_answer' ? (
|
|||
|
|
<div className="markdown-body">
|
|||
|
|
<ReactMarkdown>{correctAnswer || ''}</ReactMarkdown>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<Typography
|
|||
|
|
variant="body1"
|
|||
|
|
sx={{ fontFamily: 'monospace', color: 'text.primary', whiteSpace: 'pre-wrap' }}
|
|||
|
|
>
|
|||
|
|
{formatAnswer(correctAnswer)}
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 展开/收起 遮罩和按钮 */}
|
|||
|
|
{shouldShowCorrectExpand && !isCorrectExpanded && (
|
|||
|
|
<Box sx={detailStyles.expandMask}>
|
|||
|
|
<Button
|
|||
|
|
size="small"
|
|||
|
|
onClick={() => setIsCorrectExpanded(true)}
|
|||
|
|
startIcon={<ExpandMoreIcon />}
|
|||
|
|
sx={detailStyles.expandButton}
|
|||
|
|
>
|
|||
|
|
{t('common.expand', '展开全部')}
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{isCorrectExpanded && shouldShowCorrectExpand && (
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 1 }}>
|
|||
|
|
<Button
|
|||
|
|
size="small"
|
|||
|
|
onClick={() => setIsCorrectExpanded(false)}
|
|||
|
|
startIcon={<ExpandLessIcon />}
|
|||
|
|
sx={{ fontSize: '0.75rem', textTransform: 'none' }}
|
|||
|
|
>
|
|||
|
|
{t('common.collapse', '收起内容')}
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 错误信息显示 */}
|
|||
|
|
{errorMessage && (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
mt: 1.5,
|
|||
|
|
p: 1.5,
|
|||
|
|
bgcolor: 'error.lighter',
|
|||
|
|
borderRadius: 1,
|
|||
|
|
border: '1px solid',
|
|||
|
|
borderColor: 'error.light'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant="body2" color="error.main" sx={{ fontSize: '0.8rem' }}>
|
|||
|
|
{errorMessage}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 教师点评 (气泡样式) */}
|
|||
|
|
{judgeResponse && (
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|||
|
|
<Box sx={detailStyles.judgeComment}>
|
|||
|
|
<Typography sx={detailStyles.judgeLabel}>{t('evalTasks.judgeComment')}</Typography>
|
|||
|
|
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
|
|||
|
|
{getJudgeDisplayContent(judgeResponse)}
|
|||
|
|
</Typography>
|
|||
|
|
{/* 得分显示（如果是主观题） */}
|
|||
|
|
{(questionType === 'short_answer' || questionType === 'open_ended') && (
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
mt: 1,
|
|||
|
|
textAlign: 'right',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
fontSize: '1.2rem',
|
|||
|
|
borderTop: '1px dashed #d32f2f',
|
|||
|
|
pt: 0.5
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{(score * 100).toFixed(0)} {t('evalTasks.scoreUnit')}
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|