450 lines
14 KiB
JavaScript
450 lines
14 KiB
JavaScript
'use client';
|
||
|
||
import { useRouter } from 'next/navigation';
|
||
import { useState, useEffect } from 'react';
|
||
import {
|
||
Box,
|
||
Typography,
|
||
IconButton,
|
||
Chip,
|
||
Checkbox,
|
||
Tooltip,
|
||
Card,
|
||
CardContent,
|
||
CardActions,
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
Button,
|
||
TextField,
|
||
CircularProgress
|
||
} from '@mui/material';
|
||
import DeleteIcon from '@mui/icons-material/Delete';
|
||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||
import QuizIcon from '@mui/icons-material/Quiz';
|
||
import EditIcon from '@mui/icons-material/Edit';
|
||
import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
|
||
import AssignmentIcon from '@mui/icons-material/Assignment';
|
||
import { useTheme } from '@mui/material/styles';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
// 编辑文本块对话框组件
|
||
const EditChunkDialog = ({ open, chunk, onClose, onSave }) => {
|
||
const [content, setContent] = useState(chunk?.content || '');
|
||
const { t } = useTranslation();
|
||
|
||
// 当文本块变化时更新内容
|
||
useEffect(() => {
|
||
if (chunk?.content) {
|
||
setContent(chunk.content);
|
||
}
|
||
}, [chunk]);
|
||
|
||
const handleSave = () => {
|
||
onSave(content);
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
||
<DialogTitle>{t('textSplit.editChunk', { chunkId: chunk?.name })}</DialogTitle>
|
||
<DialogContent dividers>
|
||
<TextField
|
||
fullWidth
|
||
multiline
|
||
rows={15}
|
||
value={content}
|
||
onChange={e => setContent(e.target.value)}
|
||
variant="outlined"
|
||
sx={{ mt: 1 }}
|
||
/>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button onClick={onClose}>{t('common.cancel')}</Button>
|
||
<Button onClick={handleSave} variant="contained" color="primary">
|
||
{t('common.save')}
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
export default function ChunkCard({
|
||
chunk,
|
||
selected,
|
||
onSelect,
|
||
onView,
|
||
onDelete,
|
||
onGenerateQuestions,
|
||
onDataCleaning,
|
||
onEdit,
|
||
onGenerateEvalQuestions, // 新增：生成测评题目的回调
|
||
projectId,
|
||
selectedModel // 添加selectedModel参数
|
||
}) {
|
||
const theme = useTheme();
|
||
const { t } = useTranslation();
|
||
const router = useRouter();
|
||
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
||
const [chunkForEdit, setChunkForEdit] = useState(null);
|
||
const [generatingQuestions, setGeneratingQuestions] = useState(false);
|
||
const [generatingEval, setGeneratingEval] = useState(false);
|
||
|
||
// 获取文本预览
|
||
const getTextPreview = (content, maxLength = 150) => {
|
||
if (!content) return '';
|
||
return content.length > maxLength ? `${content.substring(0, maxLength)}...` : content;
|
||
};
|
||
|
||
// 检查是否有已生成的问题
|
||
const hasQuestions = chunk.questions && chunk.questions.length > 0;
|
||
|
||
// 处理编辑按钮点击
|
||
const handleEditClick = async () => {
|
||
try {
|
||
// 显示加载状态
|
||
console.log('正在获取文本块完整内容...');
|
||
console.log('projectId:', projectId, 'chunkId:', chunk.id);
|
||
|
||
// 先获取完整的文本块内容，使用从外部传入的 projectId
|
||
const response = await fetch(`/api/projects/${projectId}/chunks/${encodeURIComponent(chunk.id)}`);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(t('textSplit.fetchChunkFailed'));
|
||
}
|
||
|
||
const data = await response.json();
|
||
console.log('获取文本块完整内容成功:', data);
|
||
|
||
// 先设置完整数据，再打开对话框（与 ChunkList.js 中的实现一致）
|
||
setChunkForEdit(data);
|
||
setEditDialogOpen(true);
|
||
} catch (error) {
|
||
console.error(t('textSplit.fetchChunkError'), error);
|
||
// 如果出错，使用原始预览数据
|
||
alert(t('textSplit.fetchChunkError'));
|
||
}
|
||
};
|
||
|
||
// 处理保存编辑内容
|
||
const handleSaveEdit = newContent => {
|
||
if (onEdit) {
|
||
onEdit(chunk.id, newContent);
|
||
}
|
||
};
|
||
|
||
// 处理生成单个问题 - 后台执行，不阻塞UI
|
||
const handleGenerateQuestionsClick = async () => {
|
||
setGeneratingQuestions(true);
|
||
try {
|
||
await onGenerateQuestions([chunk.id]);
|
||
} finally {
|
||
// Always release loading state, even when generation fails.
|
||
setTimeout(() => {
|
||
setGeneratingQuestions(false);
|
||
}, 500);
|
||
}
|
||
};
|
||
|
||
// 处理生成测评题目
|
||
const handleGenerateEvalQuestionsClick = async () => {
|
||
if (!onGenerateEvalQuestions) return;
|
||
|
||
setGeneratingEval(true);
|
||
try {
|
||
await onGenerateEvalQuestions(chunk.id);
|
||
} finally {
|
||
// 延迟关闭加载状态
|
||
setTimeout(() => {
|
||
setGeneratingEval(false);
|
||
}, 500);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Card
|
||
variant="outlined"
|
||
sx={{
|
||
mb: 1,
|
||
position: 'relative',
|
||
transition: 'all 0.2s ease-in-out',
|
||
borderColor: selected ? theme.palette.primary.main : theme.palette.divider,
|
||
bgcolor: selected ? `${theme.palette.primary.main}10` : 'transparent',
|
||
borderRadius: 2,
|
||
'&:hover': {
|
||
borderColor: theme.palette.primary.main,
|
||
transform: 'translateY(-2px)',
|
||
boxShadow: `0 4px 12px ${theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'}`
|
||
}
|
||
}}
|
||
>
|
||
<CardContent sx={{ pt: 2.5, px: 2.5, pb: '16px !important' }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
|
||
<Checkbox
|
||
checked={selected}
|
||
onChange={onSelect}
|
||
sx={{
|
||
mr: 1,
|
||
'&.Mui-checked': {
|
||
color: theme.palette.primary.main
|
||
}
|
||
}}
|
||
/>
|
||
<Box sx={{ flexGrow: 1 }}>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
mb: 1.5,
|
||
flexWrap: 'wrap',
|
||
gap: 1
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="subtitle1"
|
||
fontWeight="600"
|
||
sx={{
|
||
color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.dark
|
||
}}
|
||
>
|
||
{chunk.name}
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||
<Chip
|
||
label={`${chunk.fileName || t('textSplit.unknownFile')}`}
|
||
size="small"
|
||
color="primary"
|
||
variant="outlined"
|
||
sx={{
|
||
borderRadius: 1,
|
||
fontWeight: 500,
|
||
'& .MuiChip-label': { px: 1 }
|
||
}}
|
||
/>
|
||
<Chip
|
||
label={`${chunk.size || 0} ${t('textSplit.characters')}`}
|
||
size="small"
|
||
color="secondary"
|
||
variant="outlined"
|
||
sx={{
|
||
borderRadius: 1,
|
||
fontWeight: 500,
|
||
'& .MuiChip-label': { px: 1 }
|
||
}}
|
||
/>
|
||
{chunk.Questions.length > 0 && (
|
||
<Tooltip
|
||
title={
|
||
<Box sx={{ p: 1 }} style={{ maxHeight: '200px', overflow: 'auto' }}>
|
||
{chunk.Questions.map((q, index) => (
|
||
<Typography key={index} variant="body2" sx={{ mb: 0.5 }}>
|
||
{index + 1}. {q.question}
|
||
</Typography>
|
||
))}
|
||
</Box>
|
||
}
|
||
arrow
|
||
placement="top"
|
||
>
|
||
<Chip
|
||
label={`${t('textSplit.generatedQuestions', { count: chunk.Questions.length })}`}
|
||
size="small"
|
||
color="success"
|
||
variant="outlined"
|
||
sx={{
|
||
borderRadius: 1,
|
||
fontWeight: 500,
|
||
'& .MuiChip-label': { px: 1 }
|
||
}}
|
||
onClick={() => {
|
||
if (!projectId) return;
|
||
router.push(`/projects/${projectId}/questions`);
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
)}
|
||
{chunk.EvalDatasets && chunk.EvalDatasets.length > 0 && (
|
||
<Chip
|
||
label={`${t('textSplit.generatedEvalQuestions', { count: chunk.EvalDatasets.length })}`}
|
||
size="small"
|
||
color="secondary"
|
||
variant="outlined"
|
||
sx={{
|
||
borderRadius: 1,
|
||
fontWeight: 500,
|
||
'& .MuiChip-label': { px: 1 }
|
||
}}
|
||
onClick={() => {
|
||
if (!projectId) return;
|
||
router.push(`/projects/${projectId}/eval-datasets`);
|
||
}}
|
||
/>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography
|
||
variant="body2"
|
||
color="textSecondary"
|
||
sx={{
|
||
mb: 1,
|
||
lineHeight: 1.6,
|
||
opacity: 0.85
|
||
}}
|
||
>
|
||
{getTextPreview(chunk.content)}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</CardContent>
|
||
|
||
<CardActions
|
||
sx={{
|
||
justifyContent: 'flex-end',
|
||
px: 2.5,
|
||
pb: 2,
|
||
gap: 1,
|
||
'& .MuiIconButton-root': {
|
||
transition: 'all 0.2s',
|
||
'&:hover': {
|
||
transform: 'scale(1.1)'
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
<Tooltip title={t('datasets.viewDetails')}>
|
||
<IconButton
|
||
size="small"
|
||
color="primary"
|
||
onClick={onView}
|
||
sx={{
|
||
bgcolor: theme.palette.mode === 'dark' ? 'rgba(144, 202, 249, 0.08)' : 'rgba(33, 150, 243, 0.08)'
|
||
}}
|
||
>
|
||
<VisibilityIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
|
||
<Tooltip
|
||
title={
|
||
selectedModel?.id
|
||
? t('textSplit.generateQuestions')
|
||
: t('textSplit.selectModelFirst', { defaultValue: '请先在右上角选择模型' })
|
||
}
|
||
>
|
||
<span>
|
||
<IconButton
|
||
size="small"
|
||
color="info"
|
||
onClick={handleGenerateQuestionsClick}
|
||
disabled={!selectedModel?.id || generatingQuestions}
|
||
sx={{
|
||
bgcolor: theme.palette.mode === 'dark' ? 'rgba(41, 182, 246, 0.08)' : 'rgba(2, 136, 209, 0.08)',
|
||
'&.Mui-disabled': {
|
||
opacity: 0.6,
|
||
pointerEvents: 'auto' // 允许鼠标悬停显示tooltip
|
||
}
|
||
}}
|
||
>
|
||
{generatingQuestions ? <CircularProgress size={20} color="inherit" /> : <QuizIcon fontSize="small" />}
|
||
</IconButton>
|
||
</span>
|
||
</Tooltip>
|
||
|
||
<Tooltip
|
||
title={
|
||
selectedModel?.id
|
||
? t('textSplit.generateEvalQuestions', { defaultValue: '生成测试集' })
|
||
: t('textSplit.selectModelFirst', { defaultValue: '请先在右上角选择模型' })
|
||
}
|
||
>
|
||
<span>
|
||
<IconButton
|
||
size="small"
|
||
color="secondary"
|
||
onClick={handleGenerateEvalQuestionsClick}
|
||
disabled={!selectedModel?.id || generatingEval}
|
||
sx={{
|
||
bgcolor: theme.palette.mode === 'dark' ? 'rgba(156, 39, 176, 0.08)' : 'rgba(123, 31, 162, 0.08)',
|
||
'&.Mui-disabled': {
|
||
opacity: 0.6,
|
||
pointerEvents: 'auto'
|
||
}
|
||
}}
|
||
>
|
||
{generatingEval ? <CircularProgress size={20} color="inherit" /> : <AssignmentIcon fontSize="small" />}
|
||
</IconButton>
|
||
</span>
|
||
</Tooltip>
|
||
|
||
<Tooltip
|
||
title={
|
||
selectedModel?.id
|
||
? t('textSplit.dataCleaning', { defaultValue: '数据清洗' })
|
||
: t('textSplit.selectModelFirst', { defaultValue: '请先在右上角选择模型' })
|
||
}
|
||
>
|
||
<span>
|
||
<IconButton
|
||
size="small"
|
||
color="success"
|
||
onClick={onDataCleaning}
|
||
disabled={!selectedModel?.id}
|
||
sx={{
|
||
bgcolor: theme.palette.mode === 'dark' ? 'rgba(76, 175, 80, 0.08)' : 'rgba(46, 125, 50, 0.08)',
|
||
'&.Mui-disabled': {
|
||
opacity: 0.6,
|
||
pointerEvents: 'auto' // 允许鼠标悬停显示tooltip
|
||
}
|
||
}}
|
||
>
|
||
<CleaningServicesIcon fontSize="small" />
|
||
</IconButton>
|
||
</span>
|
||
</Tooltip>
|
||
|
||
<Tooltip title={t('textSplit.editChunk', { chunkId: chunk.name })}>
|
||
<IconButton
|
||
size="small"
|
||
color="warning"
|
||
onClick={handleEditClick}
|
||
sx={{
|
||
bgcolor: theme.palette.mode === 'dark' ? 'rgba(255, 152, 0, 0.08)' : 'rgba(237, 108, 2, 0.08)'
|
||
}}
|
||
>
|
||
<EditIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
|
||
<Tooltip title={t('common.delete')}>
|
||
<IconButton
|
||
size="small"
|
||
color="error"
|
||
onClick={onDelete}
|
||
sx={{
|
||
bgcolor: theme.palette.mode === 'dark' ? 'rgba(244, 67, 54, 0.08)' : 'rgba(211, 47, 47, 0.08)'
|
||
}}
|
||
>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</CardActions>
|
||
</Card>
|
||
|
||
{/* 编辑文本块对话框 */}
|
||
<EditChunkDialog
|
||
open={editDialogOpen}
|
||
chunk={chunkForEdit || chunk}
|
||
onClose={() => {
|
||
setEditDialogOpen(false);
|
||
setChunkForEdit(null);
|
||
}}
|
||
onSave={handleSaveEdit}
|
||
/>
|
||
</>
|
||
);
|
||
}
|