410 lines
13 KiB
JavaScript
410 lines
13 KiB
JavaScript
|
'use client';
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import { useParams } from 'next/navigation';
|
|||
|
|
import {
|
|||
|
|
Box,
|
|||
|
|
Container,
|
|||
|
|
Grid,
|
|||
|
|
Paper,
|
|||
|
|
Chip,
|
|||
|
|
Typography,
|
|||
|
|
CircularProgress,
|
|||
|
|
Alert,
|
|||
|
|
Card,
|
|||
|
|
CardContent,
|
|||
|
|
Divider,
|
|||
|
|
Stack,
|
|||
|
|
RadioGroup,
|
|||
|
|
FormControlLabel,
|
|||
|
|
Radio,
|
|||
|
|
FormGroup,
|
|||
|
|
Checkbox as MuiCheckbox
|
|||
|
|
} from '@mui/material';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import { useTheme, alpha } from '@mui/material/styles';
|
|||
|
|
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 AccessTimeIcon from '@mui/icons-material/AccessTime';
|
|||
|
|
import TagIcon from '@mui/icons-material/Tag';
|
|||
|
|
import DescriptionIcon from '@mui/icons-material/Description';
|
|||
|
|
|
|||
|
|
import useEvalDatasetDetails from './useEvalDatasetDetails';
|
|||
|
|
import EvalDatasetHeader from '../components/EvalDatasetHeader';
|
|||
|
|
import EvalEditableField from '../components/EvalEditableField';
|
|||
|
|
import TagSelector from '@/components/datasets/TagSelector';
|
|||
|
|
|
|||
|
|
// 题型图标和颜色映射
|
|||
|
|
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 EvalDatasetDetailPage() {
|
|||
|
|
const { projectId, evalId } = useParams();
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const [availableTags, setAvailableTags] = useState([]);
|
|||
|
|
|
|||
|
|
const { data, loading, error, handleNavigate, handleSave, handleDelete } = useEvalDatasetDetails(projectId, evalId);
|
|||
|
|
|
|||
|
|
// 获取项目中已使用的标签
|
|||
|
|
useEffect(() => {
|
|||
|
|
const fetchAvailableTags = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`/api/projects/${projectId}/eval-datasets/tags`);
|
|||
|
|
if (response.ok) {
|
|||
|
|
const result = await response.json();
|
|||
|
|
setAvailableTags(result.tags || []);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取可用标签失败:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (projectId && !loading) {
|
|||
|
|
fetchAvailableTags();
|
|||
|
|
}
|
|||
|
|
}, [projectId, loading]);
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<Container maxWidth="xl" sx={{ mt: 4 }}>
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70vh' }}>
|
|||
|
|
<CircularProgress />
|
|||
|
|
</Box>
|
|||
|
|
</Container>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (error || !data) {
|
|||
|
|
return (
|
|||
|
|
<Container maxWidth="xl" sx={{ mt: 4 }}>
|
|||
|
|
<Alert severity="error">{error || t('eval.notFound')}</Alert>
|
|||
|
|
</Container>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const typeConfig = QUESTION_TYPE_CONFIG[data.questionType] || QUESTION_TYPE_CONFIG.short_answer;
|
|||
|
|
const TypeIcon = typeConfig.icon;
|
|||
|
|
|
|||
|
|
// 解析选项
|
|||
|
|
let options = [];
|
|||
|
|
try {
|
|||
|
|
options = data.options ? (typeof data.options === 'string' ? JSON.parse(data.options) : data.options) : [];
|
|||
|
|
} catch (e) {
|
|||
|
|
options = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染选项预览
|
|||
|
|
const renderOptionsPreview = value => {
|
|||
|
|
let opts = [];
|
|||
|
|
try {
|
|||
|
|
opts = value ? (typeof value === 'string' ? JSON.parse(value) : value) : [];
|
|||
|
|
} catch (e) {
|
|||
|
|
return <Typography color="error">Invalid JSON format</Typography>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!Array.isArray(opts) || opts.length === 0) {
|
|||
|
|
return <Typography color="text.secondary">{t('common.noData')}</Typography>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|||
|
|
{opts.map((option, index) => {
|
|||
|
|
const optionLabel = String.fromCharCode(65 + index);
|
|||
|
|
const isCorrect =
|
|||
|
|
data.questionType === 'multiple_choice'
|
|||
|
|
? (Array.isArray(data.correctAnswer)
|
|||
|
|
? data.correctAnswer
|
|||
|
|
: JSON.parse(data.correctAnswer || '[]')
|
|||
|
|
).includes(optionLabel)
|
|||
|
|
: data.correctAnswer === optionLabel;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
key={index}
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'baseline',
|
|||
|
|
gap: 1.5,
|
|||
|
|
p: 1.5,
|
|||
|
|
borderRadius: 2,
|
|||
|
|
bgcolor: isCorrect ? alpha(theme.palette.success.main, 0.08) : 'background.paper',
|
|||
|
|
border: '1px solid',
|
|||
|
|
borderColor: isCorrect ? alpha(theme.palette.success.main, 0.3) : 'divider'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography
|
|||
|
|
variant="subtitle2"
|
|||
|
|
sx={{
|
|||
|
|
fontWeight: 700,
|
|||
|
|
color: isCorrect ? 'success.main' : 'text.secondary',
|
|||
|
|
minWidth: 24
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{optionLabel}.
|
|||
|
|
</Typography>
|
|||
|
|
<Typography
|
|||
|
|
variant="body1"
|
|||
|
|
sx={{
|
|||
|
|
color: isCorrect ? 'success.dark' : 'text.primary'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{option}
|
|||
|
|
</Typography>
|
|||
|
|
{isCorrect && (
|
|||
|
|
<Chip
|
|||
|
|
label={t('eval.correct')}
|
|||
|
|
size="small"
|
|||
|
|
color="success"
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{ ml: 'auto', height: 20, fontSize: '0.75rem' }}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 渲染答案编辑组件
|
|||
|
|
const renderAnswerEditor = (currentValue, onChange) => {
|
|||
|
|
if (data.questionType === 'true_false') {
|
|||
|
|
return (
|
|||
|
|
<RadioGroup value={currentValue} onChange={e => onChange(e.target.value)} row>
|
|||
|
|
<FormControlLabel value="✅" control={<Radio />} label={t('eval.correct')} />
|
|||
|
|
<FormControlLabel value="❌" control={<Radio />} label={t('eval.wrong')} />
|
|||
|
|
</RadioGroup>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (data.questionType === 'single_choice') {
|
|||
|
|
return (
|
|||
|
|
<RadioGroup value={currentValue} onChange={e => onChange(e.target.value)}>
|
|||
|
|
{options.map((_, index) => {
|
|||
|
|
const label = String.fromCharCode(65 + index);
|
|||
|
|
return (
|
|||
|
|
<FormControlLabel key={label} value={label} control={<Radio />} label={`${label}. ${options[index]}`} />
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</RadioGroup>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (data.questionType === 'multiple_choice') {
|
|||
|
|
const selected = Array.isArray(currentValue) ? currentValue : JSON.parse(currentValue || '[]');
|
|||
|
|
const handleChange = label => {
|
|||
|
|
const newSelected = selected.includes(label) ? selected.filter(i => i !== label) : [...selected, label].sort();
|
|||
|
|
onChange(JSON.stringify(newSelected));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<FormGroup>
|
|||
|
|
{options.map((_, index) => {
|
|||
|
|
const label = String.fromCharCode(65 + index);
|
|||
|
|
return (
|
|||
|
|
<FormControlLabel
|
|||
|
|
key={label}
|
|||
|
|
control={<MuiCheckbox checked={selected.includes(label)} onChange={() => handleChange(label)} />}
|
|||
|
|
label={`${label}. ${options[index]}`}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</FormGroup>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null; // 简答题和开放题保持默认文本框
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Container maxWidth="xl" sx={{ mt: 4, mb: 6 }}>
|
|||
|
|
<EvalDatasetHeader projectId={projectId} onNavigate={handleNavigate} onDelete={handleDelete} />
|
|||
|
|
|
|||
|
|
<Grid container spacing={3} alignItems="flex-start">
|
|||
|
|
{/* 左侧主要内容 */}
|
|||
|
|
<Grid item xs={12} md={8}>
|
|||
|
|
<Paper sx={{ p: 4, borderRadius: 3 }}>
|
|||
|
|
{/* 题型标识 */}
|
|||
|
|
<Box sx={{ mb: 4, display: 'flex', alignItems: 'center', gap: 2 }}>
|
|||
|
|
<Chip
|
|||
|
|
icon={<TypeIcon sx={{ fontSize: '18px !important' }} />}
|
|||
|
|
label={t(`eval.questionTypes.${data.questionType}`)}
|
|||
|
|
color={typeConfig.color}
|
|||
|
|
sx={{
|
|||
|
|
fontWeight: 600,
|
|||
|
|
fontSize: '0.9rem',
|
|||
|
|
py: 0.5,
|
|||
|
|
height: 32
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Typography
|
|||
|
|
variant="caption"
|
|||
|
|
color="text.secondary"
|
|||
|
|
sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
|
|||
|
|
>
|
|||
|
|
<AccessTimeIcon sx={{ fontSize: 14 }} />
|
|||
|
|
{new Date(data.createAt).toLocaleString()}
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/* 问题 */}
|
|||
|
|
<EvalEditableField
|
|||
|
|
label={t('eval.question')}
|
|||
|
|
value={data.question}
|
|||
|
|
onSave={val => handleSave('question', val)}
|
|||
|
|
placeholder={t('eval.questionPlaceholder')}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 选项 (仅选择题) */}
|
|||
|
|
{(data.questionType === 'single_choice' || data.questionType === 'multiple_choice') && (
|
|||
|
|
<EvalEditableField
|
|||
|
|
label={t('eval.options')}
|
|||
|
|
value={typeof data.options === 'string' ? data.options : JSON.stringify(data.options, null, 2)}
|
|||
|
|
onSave={val => handleSave('options', val)}
|
|||
|
|
placeholder={'["Option A", "Option B", ...]'}
|
|||
|
|
renderPreview={() => renderOptionsPreview(data.options)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 答案 */}
|
|||
|
|
<EvalEditableField
|
|||
|
|
label={t('eval.answer')}
|
|||
|
|
value={data.correctAnswer}
|
|||
|
|
onSave={val => handleSave('correctAnswer', val)}
|
|||
|
|
placeholder={t('eval.answerPlaceholder')}
|
|||
|
|
renderEditor={(val, setVal) => renderAnswerEditor(val, setVal)}
|
|||
|
|
/>
|
|||
|
|
</Paper>
|
|||
|
|
</Grid>
|
|||
|
|
|
|||
|
|
{/* 右侧侧边栏 */}
|
|||
|
|
<Grid item xs={12} md={4}>
|
|||
|
|
<Stack spacing={3} sx={{ position: 'sticky', top: 24 }}>
|
|||
|
|
{/* 来源信息 */}
|
|||
|
|
<Card variant="outlined" sx={{ borderRadius: 2 }}>
|
|||
|
|
<CardContent>
|
|||
|
|
<Typography
|
|||
|
|
variant="subtitle2"
|
|||
|
|
color="text.secondary"
|
|||
|
|
gutterBottom
|
|||
|
|
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
|
|||
|
|
>
|
|||
|
|
<DescriptionIcon fontSize="small" />
|
|||
|
|
{t('eval.sourceChunk')}
|
|||
|
|
</Typography>
|
|||
|
|
{data.chunks ? (
|
|||
|
|
<>
|
|||
|
|
<Chip
|
|||
|
|
label={data.chunks.name || data.chunks.fileName}
|
|||
|
|
variant="outlined"
|
|||
|
|
size="small"
|
|||
|
|
sx={{ mb: 2, maxWidth: '100%' }}
|
|||
|
|
/>
|
|||
|
|
{data.chunks.content && (
|
|||
|
|
<Paper
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
p: 2,
|
|||
|
|
bgcolor: 'background.paper',
|
|||
|
|
maxHeight: 300,
|
|||
|
|
overflow: 'auto',
|
|||
|
|
fontSize: '0.875rem',
|
|||
|
|
color: 'text.secondary',
|
|||
|
|
borderRadius: 2,
|
|||
|
|
border: '1px dashed',
|
|||
|
|
borderColor: 'divider'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{data.chunks.content}
|
|||
|
|
</Paper>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<Typography variant="body2" color="text.disabled">
|
|||
|
|
{t('common.noData')}
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 标签和备注 */}
|
|||
|
|
<Card variant="outlined" sx={{ borderRadius: 2 }}>
|
|||
|
|
<CardContent>
|
|||
|
|
<Box sx={{ mb: 3 }}>
|
|||
|
|
<Typography
|
|||
|
|
variant="subtitle2"
|
|||
|
|
color="text.secondary"
|
|||
|
|
sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}
|
|||
|
|
>
|
|||
|
|
<TagIcon fontSize="small" />
|
|||
|
|
{t('eval.tags')}
|
|||
|
|
</Typography>
|
|||
|
|
<TagSelector
|
|||
|
|
value={
|
|||
|
|
data.tags
|
|||
|
|
? typeof data.tags === 'string'
|
|||
|
|
? data.tags
|
|||
|
|
.split(/[,，]/)
|
|||
|
|
.map(t => t.trim())
|
|||
|
|
.filter(Boolean)
|
|||
|
|
: []
|
|||
|
|
: []
|
|||
|
|
}
|
|||
|
|
onChange={newTags => handleSave('tags', newTags.join(', '))}
|
|||
|
|
availableTags={availableTags}
|
|||
|
|
placeholder={t('eval.tagsPlaceholder')}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Divider sx={{ my: 2 }} />
|
|||
|
|
|
|||
|
|
<Box>
|
|||
|
|
<EvalEditableField
|
|||
|
|
label={
|
|||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|||
|
|
<NotesIcon fontSize="small" />
|
|||
|
|
{t('eval.note')}
|
|||
|
|
</Box>
|
|||
|
|
}
|
|||
|
|
value={data.note}
|
|||
|
|
onSave={val => handleSave('note', val)}
|
|||
|
|
placeholder={t('eval.notePlaceholder')}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</Stack>
|
|||
|
|
</Grid>
|
|||
|
|
</Grid>
|
|||
|
|
</Container>
|
|||
|
|
);
|
|||
|
|
}
|