401 lines
13 KiB
JavaScript
401 lines
13 KiB
JavaScript
'use client';
|
||
|
||
import { Box, Typography, Checkbox, Button, Select, MenuItem, Tooltip, Menu, IconButton, Badge } from '@mui/material';
|
||
import QuizIcon from '@mui/icons-material/Quiz';
|
||
import DownloadIcon from '@mui/icons-material/Download';
|
||
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
|
||
import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
|
||
import AssessmentIcon from '@mui/icons-material/Assessment';
|
||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||
import EditIcon from '@mui/icons-material/Edit';
|
||
import DeleteIcon from '@mui/icons-material/Delete';
|
||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||
import axios from 'axios';
|
||
import { toast } from 'sonner';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { useState } from 'react';
|
||
import ChunkFilterDialog from './ChunkFilterDialog';
|
||
|
||
export default function ChunkListHeader({
|
||
projectId,
|
||
totalChunks,
|
||
selectedChunks,
|
||
onSelectAll,
|
||
onBatchGenerateQuestions,
|
||
onBatchEditChunks,
|
||
onBatchDeleteChunks,
|
||
questionFilter,
|
||
setQuestionFilter,
|
||
chunks = [], // 添加chunks参数，用于导出文本块
|
||
selectedModel = {},
|
||
onFilterChange = null,
|
||
activeFilterCount = 0
|
||
}) {
|
||
const { t, i18n } = useTranslation();
|
||
|
||
// 添加更多菜单的状态和锚点
|
||
const [moreMenuAnchorEl, setMoreMenuAnchorEl] = useState(null);
|
||
const isMoreMenuOpen = Boolean(moreMenuAnchorEl);
|
||
|
||
// 添加筛选对话框状态
|
||
const [filterDialogOpen, setFilterDialogOpen] = useState(false);
|
||
|
||
// 自动任务菜单状态
|
||
const [autoTasksMenuAnchorEl, setAutoTasksMenuAnchorEl] = useState(null);
|
||
const isAutoTasksMenuOpen = Boolean(autoTasksMenuAnchorEl);
|
||
|
||
const handleAutoTasksClick = event => {
|
||
setAutoTasksMenuAnchorEl(event.currentTarget);
|
||
};
|
||
|
||
const handleAutoTasksClose = () => {
|
||
setAutoTasksMenuAnchorEl(null);
|
||
};
|
||
|
||
// 打开更多菜单
|
||
const handleMoreMenuClick = event => {
|
||
setMoreMenuAnchorEl(event.currentTarget);
|
||
};
|
||
|
||
// 关闭更多菜单
|
||
const handleMoreMenuClose = () => {
|
||
setMoreMenuAnchorEl(null);
|
||
};
|
||
|
||
// 处理批量编辑，关闭菜单并调用原有函数
|
||
const handleBatchEdit = () => {
|
||
handleMoreMenuClose();
|
||
onBatchEditChunks();
|
||
};
|
||
|
||
// 处理批量删除，关闭菜单并调用原有函数
|
||
const handleBatchDelete = () => {
|
||
handleMoreMenuClose();
|
||
onBatchDeleteChunks();
|
||
};
|
||
|
||
// 处理导出文本块，关闭菜单并调用原有函数
|
||
const handleExport = () => {
|
||
handleMoreMenuClose();
|
||
handleExportChunks();
|
||
};
|
||
|
||
// 创建自动提取问题任务
|
||
const handleCreateAutoQuestionTask = async () => {
|
||
if (!projectId || !selectedModel?.id) {
|
||
toast.error(t('textSplit.selectModelFirst', { defaultValue: '请先选择模型' }));
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 调用创建任务接口
|
||
const response = await axios.post(`/api/projects/${projectId}/tasks`, {
|
||
taskType: 'question-generation',
|
||
modelInfo: selectedModel,
|
||
language: i18n.language,
|
||
detail: '批量生成问题任务'
|
||
});
|
||
|
||
if (response.data?.code === 0) {
|
||
toast.success(t('tasks.createSuccess', { defaultValue: '后台任务已创建，系统将自动处理未生成问题的文本块' }));
|
||
} else {
|
||
toast.error(t('tasks.createFailed', { defaultValue: '创建任务失败' }) + ': ' + response.data?.message);
|
||
}
|
||
} catch (error) {
|
||
console.error('创建自动提取问题任务失败:', error);
|
||
toast.error(t('tasks.createFailed', { defaultValue: '创建任务失败' }) + ': ' + error.message);
|
||
}
|
||
};
|
||
|
||
// 创建自动数据清洗任务
|
||
const handleCreateAutoDataCleaningTask = async () => {
|
||
if (!projectId || !selectedModel?.id) {
|
||
toast.error(t('textSplit.selectModelFirst', { defaultValue: '请先选择模型' }));
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 调用创建任务接口
|
||
const response = await axios.post(`/api/projects/${projectId}/tasks`, {
|
||
taskType: 'data-cleaning',
|
||
modelInfo: selectedModel,
|
||
language: i18n.language,
|
||
detail: '批量数据清洗任务'
|
||
});
|
||
|
||
if (response.data?.code === 0) {
|
||
toast.success(
|
||
t('tasks.createSuccess', { defaultValue: '后台任务已创建，系统将自动处理所有文本块进行数据清洗' })
|
||
);
|
||
} else {
|
||
toast.error(t('tasks.createFailed', { defaultValue: '创建任务失败' }) + ': ' + response.data?.message);
|
||
}
|
||
} catch (error) {
|
||
console.error('创建自动数据清洗任务失败:', error);
|
||
toast.error(t('tasks.createFailed', { defaultValue: '创建任务失败' }) + ': ' + error.message);
|
||
}
|
||
};
|
||
|
||
// 创建自动生成评估数据集任务
|
||
const handleCreateAutoEvalGenerationTask = async () => {
|
||
if (!projectId || !selectedModel?.id) {
|
||
toast.error(t('textSplit.selectModelFirst', { defaultValue: '请先选择模型' }));
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 调用创建任务接口
|
||
const response = await axios.post(`/api/projects/${projectId}/tasks`, {
|
||
taskType: 'eval-generation',
|
||
modelInfo: selectedModel,
|
||
language: i18n.language,
|
||
detail: '批量生成评估数据集任务'
|
||
});
|
||
|
||
if (response.data?.code === 0) {
|
||
toast.success(
|
||
t('tasks.createSuccess', {
|
||
defaultValue: '后台任务已创建，系统将自动为所有未生成评估题目的文本块生成评估数据集'
|
||
})
|
||
);
|
||
} else {
|
||
toast.error(t('tasks.createFailed', { defaultValue: '创建任务失败' }) + ': ' + response.data?.message);
|
||
}
|
||
} catch (error) {
|
||
console.error('创建自动生成评估数据集任务失败:', error);
|
||
toast.error(t('tasks.createFailed', { defaultValue: '创建任务失败' }) + ': ' + error.message);
|
||
}
|
||
};
|
||
|
||
// 导出文本块为JSON文件的函数
|
||
const handleExportChunks = () => {
|
||
if (!chunks || chunks.length === 0) return;
|
||
|
||
// 创建要导出的数据对象
|
||
const exportData = chunks.map(chunk => ({
|
||
name: chunk.name,
|
||
projectId: chunk.projectId,
|
||
fileName: chunk.fileName,
|
||
content: chunk.content,
|
||
summary: chunk.summary,
|
||
size: chunk.size
|
||
}));
|
||
|
||
// 将数据转换为JSON字符串
|
||
const jsonString = JSON.stringify(exportData, null, 2);
|
||
|
||
// 创建Blob对象
|
||
const blob = new Blob([jsonString], { type: 'application/json' });
|
||
|
||
// 创建下载链接
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `text-chunks-export-${new Date().toISOString().split('T')[0]}.json`;
|
||
|
||
// 触发下载
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
|
||
// 清理
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: { xs: 'column', md: 'row' },
|
||
justifyContent: 'space-between',
|
||
alignItems: { xs: 'flex-start', md: 'center' },
|
||
gap: 2,
|
||
mb: 3
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||
<Checkbox
|
||
checked={selectedChunks.length === totalChunks}
|
||
indeterminate={selectedChunks.length > 0 && selectedChunks.length < totalChunks}
|
||
onChange={onSelectAll}
|
||
/>
|
||
<Typography variant="body1">{t('textSplit.selectedCount', { count: selectedChunks.length })}</Typography>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: { xs: 'column', sm: 'row' },
|
||
alignItems: { xs: 'flex-start', sm: 'center' },
|
||
flexWrap: 'wrap',
|
||
gap: 1.5,
|
||
width: { xs: '100%', md: 'auto' }
|
||
}}
|
||
>
|
||
{/* 更多筛选按钮 */}
|
||
<Tooltip title={t('datasets.moreFilters', { defaultValue: '更多筛选' })}>
|
||
<Badge badgeContent={activeFilterCount} color="error" overlap="circular">
|
||
<Button
|
||
variant="outlined"
|
||
startIcon={<FilterListIcon />}
|
||
onClick={() => setFilterDialogOpen(true)}
|
||
size="small"
|
||
sx={{ borderRadius: 1 }}
|
||
>
|
||
{t('datasets.moreFilters', { defaultValue: '更多筛选' })}
|
||
</Button>
|
||
</Badge>
|
||
</Tooltip>
|
||
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
gap: 1.5,
|
||
mt: { xs: 1, sm: 0 },
|
||
width: { xs: '100%', sm: 'auto' }
|
||
}}
|
||
>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
startIcon={<QuizIcon />}
|
||
disabled={selectedChunks.length === 0}
|
||
onClick={onBatchGenerateQuestions}
|
||
size="medium"
|
||
sx={{ minWidth: { xs: '48%', sm: 'auto' } }}
|
||
>
|
||
{t('textSplit.batchGenerateQuestions')}
|
||
</Button>
|
||
|
||
{/* 自动任务下拉菜单 */}
|
||
<Button
|
||
variant="outlined"
|
||
color="secondary"
|
||
startIcon={<AutoFixHighIcon />}
|
||
endIcon={<KeyboardArrowDownIcon />}
|
||
onClick={handleAutoTasksClick}
|
||
disabled={!projectId || !selectedModel?.id}
|
||
size="medium"
|
||
sx={{ minWidth: { xs: '48%', sm: 'auto' } }}
|
||
>
|
||
{t('textSplit.autoTasks', { defaultValue: '自动任务' })}
|
||
</Button>
|
||
|
||
<Menu
|
||
anchorEl={autoTasksMenuAnchorEl}
|
||
open={isAutoTasksMenuOpen}
|
||
onClose={handleAutoTasksClose}
|
||
anchorOrigin={{
|
||
vertical: 'bottom',
|
||
horizontal: 'right'
|
||
}}
|
||
transformOrigin={{
|
||
vertical: 'top',
|
||
horizontal: 'right'
|
||
}}
|
||
>
|
||
<Tooltip
|
||
title={t('textSplit.autoGenerateQuestionsTip', {
|
||
defaultValue: '创建后台批量处理任务：自动查询待生成问题的文本块并提取问题'
|
||
})}
|
||
placement="left"
|
||
>
|
||
<MenuItem
|
||
onClick={() => {
|
||
handleCreateAutoQuestionTask();
|
||
handleAutoTasksClose();
|
||
}}
|
||
>
|
||
<QuizIcon fontSize="small" sx={{ mr: 1, color: 'secondary.main' }} />
|
||
{t('textSplit.autoGenerateQuestions')}
|
||
</MenuItem>
|
||
</Tooltip>
|
||
|
||
<Tooltip
|
||
title={t('textSplit.autoEvalGenerationTip', {
|
||
defaultValue: '创建后台批量处理任务：自动为所有未生成评估题目的文本块生成评估数据集'
|
||
})}
|
||
placement="left"
|
||
>
|
||
<MenuItem
|
||
onClick={() => {
|
||
handleCreateAutoEvalGenerationTask();
|
||
handleAutoTasksClose();
|
||
}}
|
||
>
|
||
<AssessmentIcon fontSize="small" sx={{ mr: 1, color: 'secondary.main' }} />
|
||
{t('textSplit.autoEvalGeneration', { defaultValue: '自动生成评估集' })}
|
||
</MenuItem>
|
||
</Tooltip>
|
||
|
||
<Tooltip
|
||
title={t('textSplit.autoDataCleaningTip', {
|
||
defaultValue: '创建后台批量处理任务：自动对所有文本块进行数据清洗'
|
||
})}
|
||
placement="left"
|
||
>
|
||
<MenuItem
|
||
onClick={() => {
|
||
handleCreateAutoDataCleaningTask();
|
||
handleAutoTasksClose();
|
||
}}
|
||
>
|
||
<CleaningServicesIcon fontSize="small" sx={{ mr: 1, color: 'success.main' }} />
|
||
{t('textSplit.autoDataCleaning', { defaultValue: '自动数据清洗' })}
|
||
</MenuItem>
|
||
</Tooltip>
|
||
</Menu>
|
||
|
||
{/* 更多菜单按钮 */}
|
||
<Tooltip title={t('common.more', { defaultValue: '更多操作' })}>
|
||
<IconButton
|
||
onClick={handleMoreMenuClick}
|
||
color="primary"
|
||
size="medium"
|
||
sx={{
|
||
border: '1px solid',
|
||
borderColor: 'divider'
|
||
}}
|
||
>
|
||
<MoreVertIcon />
|
||
</IconButton>
|
||
</Tooltip>
|
||
|
||
{/* 更多操作下拉菜单 */}
|
||
<Menu
|
||
anchorEl={moreMenuAnchorEl}
|
||
open={isMoreMenuOpen}
|
||
onClose={handleMoreMenuClose}
|
||
anchorOrigin={{
|
||
vertical: 'bottom',
|
||
horizontal: 'right'
|
||
}}
|
||
transformOrigin={{
|
||
vertical: 'top',
|
||
horizontal: 'right'
|
||
}}
|
||
>
|
||
<MenuItem onClick={handleBatchEdit} disabled={selectedChunks.length === 0}>
|
||
<EditIcon fontSize="small" sx={{ mr: 1 }} />
|
||
{t('batchEdit.batchEdit', { defaultValue: '批量编辑' })}
|
||
</MenuItem>
|
||
<MenuItem onClick={handleBatchDelete} disabled={selectedChunks.length === 0}>
|
||
<DeleteIcon fontSize="small" sx={{ mr: 1, color: 'error.main' }} />
|
||
{t('textSplit.batchDeleteChunks', { defaultValue: '批量删除' })}
|
||
</MenuItem>
|
||
<MenuItem onClick={handleExport} disabled={chunks.length === 0}>
|
||
<DownloadIcon fontSize="small" sx={{ mr: 1 }} />
|
||
{t('textSplit.exportChunks', { defaultValue: '导出文本块' })}
|
||
</MenuItem>
|
||
</Menu>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* 筛选对话框 */}
|
||
<ChunkFilterDialog open={filterDialogOpen} onClose={() => setFilterDialogOpen(false)} onApply={onFilterChange} />
|
||
</Box>
|
||
);
|
||
}
|