336 lines
11 KiB
JavaScript
336 lines
11 KiB
JavaScript
'use client';
|
||
|
||
import { Card, CardContent, Box, Typography, Chip, Checkbox, IconButton, Tooltip, Divider } from '@mui/material';
|
||
import DeleteIcon from '@mui/icons-material/Delete';
|
||
import EditIcon from '@mui/icons-material/Edit';
|
||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
|
||
import CheckBoxIcon from '@mui/icons-material/CheckBox';
|
||
import ShortTextIcon from '@mui/icons-material/ShortText';
|
||
import NotesIcon from '@mui/icons-material/Notes';
|
||
import CheckIcon from '@mui/icons-material/Check';
|
||
import CloseIcon from '@mui/icons-material/Close';
|
||
import { useTheme, alpha } from '@mui/material/styles';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { useRouter } from 'next/navigation';
|
||
|
||
// 题型图标和颜色映射
|
||
const QUESTION_TYPE_CONFIG = {
|
||
true_false: {
|
||
icon: CheckCircleIcon,
|
||
color: 'success',
|
||
bgColor: 'success.light'
|
||
},
|
||
single_choice: {
|
||
icon: RadioButtonCheckedIcon,
|
||
color: 'primary',
|
||
bgColor: 'primary.light'
|
||
},
|
||
multiple_choice: {
|
||
icon: CheckBoxIcon,
|
||
color: 'secondary',
|
||
bgColor: 'secondary.light'
|
||
},
|
||
short_answer: {
|
||
icon: ShortTextIcon,
|
||
color: 'warning',
|
||
bgColor: 'warning.light'
|
||
},
|
||
open_ended: {
|
||
icon: NotesIcon,
|
||
color: 'info',
|
||
bgColor: 'info.light'
|
||
}
|
||
};
|
||
|
||
export default function EvalDatasetCard({ item, selected, onSelect, onEdit, onDelete, projectId }) {
|
||
const theme = useTheme();
|
||
const { t } = useTranslation();
|
||
const router = useRouter();
|
||
|
||
const typeConfig = QUESTION_TYPE_CONFIG[item.questionType] || QUESTION_TYPE_CONFIG.short_answer;
|
||
const TypeIcon = typeConfig.icon;
|
||
|
||
// 解析选项
|
||
const options = item.options
|
||
? typeof item.options === 'string'
|
||
? JSON.parse(item.options || '[]')
|
||
: item.options
|
||
: [];
|
||
|
||
// 解析答案
|
||
const correctAnswer = item.correctAnswer;
|
||
|
||
const handleCardClick = e => {
|
||
// 如果点击的是复选框或按钮，不跳转
|
||
if (e.target.closest('.MuiCheckbox-root') || e.target.closest('.MuiIconButton-root')) {
|
||
return;
|
||
}
|
||
router.push(`/projects/${projectId}/eval-datasets/${item.id}`);
|
||
};
|
||
|
||
return (
|
||
<Card
|
||
variant="outlined"
|
||
onClick={handleCardClick}
|
||
sx={{
|
||
height: 'fit-content',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
transition: 'all 0.2s ease-in-out',
|
||
borderColor: selected ? theme.palette.primary.main : theme.palette.divider,
|
||
bgcolor: selected ? alpha(theme.palette.primary.main, 0.04) : 'background.paper',
|
||
borderRadius: 2,
|
||
position: 'relative',
|
||
cursor: 'pointer',
|
||
'&:hover': {
|
||
borderColor: theme.palette.primary.main,
|
||
transform: 'translateY(-4px)',
|
||
boxShadow: `0 8px 24px ${alpha(theme.palette.common.black, 0.08)}`
|
||
}
|
||
}}
|
||
>
|
||
<CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column', p: 2.5 }}>
|
||
{/* 头部：题型标签和操作 */}
|
||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 2 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||
<Checkbox
|
||
size="small"
|
||
checked={selected}
|
||
onChange={e => {
|
||
e.stopPropagation();
|
||
onSelect(item.id);
|
||
}}
|
||
sx={{ p: 0.5, ml: -0.5 }}
|
||
/>
|
||
<Chip
|
||
icon={<TypeIcon sx={{ fontSize: '16px !important' }} />}
|
||
label={t(`eval.questionTypes.${item.questionType}`)}
|
||
size="small"
|
||
color={typeConfig.color}
|
||
variant="outlined"
|
||
sx={{
|
||
fontWeight: 600,
|
||
borderWidth: '1.5px',
|
||
bgcolor: alpha(theme.palette[typeConfig.color].main, 0.05)
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||
<Tooltip title={t('common.edit')}>
|
||
<IconButton
|
||
size="small"
|
||
onClick={e => {
|
||
e.stopPropagation();
|
||
onEdit(item);
|
||
}}
|
||
sx={{
|
||
color: 'text.secondary',
|
||
'&:hover': { color: 'primary.main', bgcolor: alpha(theme.palette.primary.main, 0.1) }
|
||
}}
|
||
>
|
||
<EditIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
<Tooltip title={t('common.delete')}>
|
||
<IconButton
|
||
size="small"
|
||
onClick={e => {
|
||
e.stopPropagation();
|
||
onDelete(item.id);
|
||
}}
|
||
sx={{
|
||
color: 'text.secondary',
|
||
'&:hover': { color: 'error.main', bgcolor: alpha(theme.palette.error.main, 0.1) }
|
||
}}
|
||
>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* 问题内容 */}
|
||
<Box sx={{ mb: 2 }}>
|
||
<Typography
|
||
variant="body1"
|
||
sx={{
|
||
fontWeight: 600,
|
||
lineHeight: 1.6,
|
||
color:
|
||
item.questionType === 'true_false'
|
||
? correctAnswer === '✅'
|
||
? 'success.main'
|
||
: 'error.main'
|
||
: 'text.primary',
|
||
display: 'inline'
|
||
}}
|
||
>
|
||
{item.questionType === 'true_false' && correctAnswer} {item.question}
|
||
</Typography>
|
||
</Box>
|
||
|
||
{/* 选项列表（仅单选/多选显示） */}
|
||
{(item.questionType === 'single_choice' || item.questionType === 'multiple_choice') && options.length > 0 && (
|
||
<Box sx={{ mb: 2, flex: 1 }}>
|
||
{(item.questionType === 'multiple_choice' ? options : options.slice(0, 4)).map((option, index) => {
|
||
const optionLabel = String.fromCharCode(65 + index); // A, B, C, D
|
||
// 解析多选题答案，支持多种格式：数组、JSON字符串、逗号分隔字符串
|
||
const parseMultipleAnswers = answer => {
|
||
if (Array.isArray(answer)) return answer;
|
||
if (!answer) return [];
|
||
// 尝试解析 JSON 数组
|
||
if (answer.startsWith('[')) {
|
||
try {
|
||
return JSON.parse(answer);
|
||
} catch (e) {
|
||
return [];
|
||
}
|
||
}
|
||
// 逗号分隔字符串格式，如 "A,B,D"
|
||
return answer.split(',').map(s => s.trim());
|
||
};
|
||
const isCorrect =
|
||
item.questionType === 'multiple_choice'
|
||
? parseMultipleAnswers(correctAnswer).includes(optionLabel)
|
||
: correctAnswer === optionLabel;
|
||
|
||
return (
|
||
<Box
|
||
key={index}
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'baseline',
|
||
gap: 1,
|
||
mb: 0.5,
|
||
p: '4px 8px',
|
||
borderRadius: 1,
|
||
bgcolor: isCorrect ? alpha(theme.palette.success.main, 0.08) : 'transparent',
|
||
border: '1px solid',
|
||
borderColor: isCorrect ? alpha(theme.palette.success.main, 0.3) : 'transparent'
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="caption"
|
||
sx={{
|
||
fontWeight: 700,
|
||
color: isCorrect ? 'success.main' : 'text.secondary',
|
||
minWidth: 16
|
||
}}
|
||
>
|
||
{optionLabel}.
|
||
</Typography>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
color: isCorrect ? 'success.dark' : 'text.secondary',
|
||
fontSize: '0.875rem',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{option}
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
})}
|
||
{item.questionType === 'single_choice' && options.length > 4 && (
|
||
<Typography variant="caption" color="text.disabled" sx={{ pl: 1, mt: 0.5, display: 'block' }}>
|
||
... +{options.length - 4} {t('eval.moreOptions')}
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
)}
|
||
|
||
{/* 非选择题且非判断题答案 */}
|
||
{item.questionType !== 'single_choice' &&
|
||
item.questionType !== 'multiple_choice' &&
|
||
item.questionType !== 'true_false' &&
|
||
correctAnswer && (
|
||
<Box
|
||
sx={{
|
||
p: 1.5,
|
||
borderRadius: 2,
|
||
bgcolor: 'background.paper',
|
||
border: '1px dashed',
|
||
borderColor: 'divider',
|
||
mb: 2,
|
||
flex: 1
|
||
}}
|
||
>
|
||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>
|
||
{t('eval.answer')}:
|
||
</Typography>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
color: 'text.secondary',
|
||
display: '-webkit-box',
|
||
WebkitLineClamp: 4,
|
||
WebkitBoxOrient: 'vertical',
|
||
overflow: 'hidden'
|
||
}}
|
||
>
|
||
{correctAnswer}
|
||
</Typography>
|
||
</Box>
|
||
)}
|
||
|
||
<Divider sx={{ my: 1.5, opacity: 0.6 }} />
|
||
|
||
{/* 底部元信息 */}
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
|
||
{item.chunks ? (
|
||
<Tooltip title={item.chunks.name || item.chunks.fileName}>
|
||
<Chip
|
||
label={item.chunks.name || item.chunks.fileName}
|
||
size="small"
|
||
variant="outlined"
|
||
sx={{
|
||
fontSize: 11,
|
||
height: 22,
|
||
maxWidth: 140,
|
||
borderColor: 'divider',
|
||
color: 'text.secondary'
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
) : (
|
||
<Box />
|
||
)}
|
||
|
||
{item.tags && (
|
||
<Tooltip title={item.tags}>
|
||
<Box sx={{ display: 'flex', gap: 0.5, overflow: 'hidden', maxWidth: 120 }}>
|
||
{item.tags
|
||
.split(/[,，]/)
|
||
.slice(0, 2)
|
||
.map((tag, index) => (
|
||
<Chip
|
||
key={index}
|
||
label={tag}
|
||
size="small"
|
||
sx={{
|
||
fontSize: 11,
|
||
height: 22,
|
||
bgcolor: alpha(theme.palette.info.main, 0.08),
|
||
color: 'info.dark',
|
||
maxWidth: 80
|
||
}}
|
||
/>
|
||
))}
|
||
{item.tags.split(/[,，]/).length > 2 && (
|
||
<Typography variant="caption" color="text.secondary" sx={{ fontSize: 11, alignSelf: 'center' }}>
|
||
+{item.tags.split(/[,，]/).length - 2}
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
</Tooltip>
|
||
)}
|
||
</Box>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|