361 lines
11 KiB
JavaScript
361 lines
11 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Paper, Grid } from '@mui/material';
|
||
import { useTheme } from '@mui/material/styles';
|
||
import { useAtomValue } from 'jotai/index';
|
||
import { selectedModelInfoAtom } from '@/lib/store';
|
||
import UploadArea from './components/UploadArea';
|
||
import FileList from './components/FileList';
|
||
import DeleteConfirmDialog from './components/DeleteConfirmDialog';
|
||
import PdfProcessingDialog from './components/PdfProcessingDialog';
|
||
import DomainTreeActionDialog from './components/DomainTreeActionDialog';
|
||
import FileLoadingProgress from './components/FileLoadingProgress';
|
||
import { fileApi, taskApi } from '@/lib/api';
|
||
import { getContent, checkMaxSize, checkInvalidFiles, getvalidFiles } from '@/lib/file/file-process';
|
||
import { toast } from 'sonner';
|
||
|
||
export default function FileUploader({
|
||
projectId,
|
||
onUploadSuccess,
|
||
onFileDeleted,
|
||
sendToPages,
|
||
setPdfStrategy,
|
||
pdfStrategy,
|
||
selectedViosnModel,
|
||
setSelectedViosnModel,
|
||
setPageLoading,
|
||
taskFileProcessing,
|
||
fileTask
|
||
}) {
|
||
const theme = useTheme();
|
||
const { t } = useTranslation();
|
||
const [files, setFiles] = useState([]);
|
||
const [pdfFiles, setPdfFiles] = useState([]);
|
||
const [uploadedFiles, setUploadedFiles] = useState({});
|
||
const selectedModelInfo = useAtomValue(selectedModelInfoAtom);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
|
||
const [pdfProcessConfirmOpen, setpdfProcessConfirmOpen] = useState(false);
|
||
const [fileToDelete, setFileToDelete] = useState({});
|
||
const [domainTreeActionOpen, setDomainTreeActionOpen] = useState(false);
|
||
const [domainTreeAction, setDomainTreeAction] = useState('');
|
||
const [isFirstUpload, setIsFirstUpload] = useState(false);
|
||
const [pendingAction, setPendingAction] = useState(null);
|
||
const [taskSettings, setTaskSettings] = useState(null);
|
||
const [visionModels, setVisionModels] = useState([]);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [pageSize] = useState(10);
|
||
const [searchFileName, setSearchFileName] = useState('');
|
||
|
||
useEffect(() => {
|
||
fetchUploadedFiles();
|
||
}, [currentPage, searchFileName]);
|
||
|
||
/**
|
||
* 处理 PDF 处理方式选择
|
||
*/
|
||
const handleRadioChange = event => {
|
||
const modelId = event.target.selectedVision;
|
||
setPdfStrategy(event.target.value);
|
||
|
||
if (event.target.value === 'mineru') {
|
||
toast.success(t('textSplit.mineruSelected'));
|
||
} else if (event.target.value === 'mineru-local') {
|
||
toast.success(t('textSplit.mineruLocalSelected'));
|
||
} else if (event.target.value === 'vision') {
|
||
const model = visionModels.find(item => item.id === modelId);
|
||
toast.success(
|
||
t('textSplit.customVisionModelSelected', {
|
||
name: model.modelName,
|
||
provider: model.projectName
|
||
})
|
||
);
|
||
} else {
|
||
toast.success(t('textSplit.defaultSelected'));
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 获取上传的文件列表
|
||
* @param {*} page
|
||
* @param {*} size
|
||
* @param {*} fileName
|
||
*/
|
||
const fetchUploadedFiles = async (page = currentPage, size = pageSize, fileName = searchFileName) => {
|
||
try {
|
||
setLoading(true);
|
||
const data = await fileApi.getFiles({ projectId, page, size, fileName, t });
|
||
setUploadedFiles(data);
|
||
|
||
setIsFirstUpload(data.total === 0);
|
||
|
||
const taskData = await taskApi.getProjectTasks(projectId);
|
||
setTaskSettings(taskData);
|
||
|
||
//使用Jotai会出现数据获取的延迟，导致这里模型获取不到，改用localStorage获取模型信息
|
||
const model = JSON.parse(localStorage.getItem('modelConfigList'));
|
||
|
||
//过滤出视觉模型
|
||
const visionItems = model.filter(item => item.type === 'vision');
|
||
|
||
//先默认选择第一个配置的视觉模型
|
||
if (visionItems.length > 0) {
|
||
setSelectedViosnModel(visionItems[0].id);
|
||
}
|
||
|
||
setVisionModels(visionItems);
|
||
} catch (error) {
|
||
toast.error(error.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理文件选择
|
||
*/
|
||
const handleFileSelect = event => {
|
||
const selectedFiles = Array.from(event.target.files);
|
||
|
||
checkMaxSize(selectedFiles);
|
||
checkInvalidFiles(selectedFiles);
|
||
|
||
const validFiles = getvalidFiles(selectedFiles);
|
||
|
||
if (validFiles.length > 0) {
|
||
setFiles(prev => [...prev, ...validFiles]);
|
||
}
|
||
const hasPdfFiles = selectedFiles.filter(file => file.name.endsWith('.pdf'));
|
||
if (hasPdfFiles.length > 0) {
|
||
setpdfProcessConfirmOpen(true);
|
||
setPdfFiles(hasPdfFiles);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 从待上传文件列表中移除文件
|
||
*/
|
||
const removeFile = index => {
|
||
const fileToRemove = files[index];
|
||
setFiles(prev => prev.filter((_, i) => i !== index));
|
||
if (fileToRemove && fileToRemove.name.toLowerCase().endsWith('.pdf')) {
|
||
setPdfFiles(prevPdfFiles => prevPdfFiles.filter(pdfFile => pdfFile.name !== fileToRemove.name));
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 上传文件
|
||
*/
|
||
const uploadFiles = async () => {
|
||
if (files.length === 0) return;
|
||
|
||
// 如果是第一次上传，直接走默认逻辑
|
||
if (isFirstUpload) {
|
||
handleStartUpload('rebuild');
|
||
return;
|
||
}
|
||
|
||
// 否则打开领域树操作选择对话框
|
||
setDomainTreeAction('upload');
|
||
setPendingAction({ type: 'upload' });
|
||
setDomainTreeActionOpen(true);
|
||
};
|
||
|
||
/**
|
||
* 处理领域树操作选择
|
||
*/
|
||
const handleDomainTreeAction = action => {
|
||
setDomainTreeActionOpen(false);
|
||
|
||
// 执行挂起的操作
|
||
if (pendingAction && pendingAction.type === 'upload') {
|
||
handleStartUpload(action);
|
||
} else if (pendingAction && pendingAction.type === 'delete') {
|
||
handleDeleteFile(action);
|
||
}
|
||
|
||
// 清除挂起的操作
|
||
setPendingAction(null);
|
||
};
|
||
|
||
/**
|
||
* 开始上传文件
|
||
*/
|
||
const handleStartUpload = async domainTreeActionType => {
|
||
setUploading(true);
|
||
try {
|
||
const uploadedFileInfos = [];
|
||
for (const file of files) {
|
||
const { fileContent, fileName } = await getContent(file);
|
||
const data = await fileApi.uploadFile({ file, projectId, fileContent, fileName, t });
|
||
uploadedFileInfos.push({ fileName: data.fileName, fileId: data.fileId });
|
||
}
|
||
toast.success(t('textSplit.uploadSuccess', { count: files.length }));
|
||
setFiles([]);
|
||
setCurrentPage(1);
|
||
await fetchUploadedFiles();
|
||
if (onUploadSuccess) {
|
||
await onUploadSuccess(uploadedFileInfos, pdfFiles, domainTreeActionType);
|
||
}
|
||
} catch (err) {
|
||
toast.error(err.message || t('textSplit.uploadFailed'));
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
};
|
||
|
||
// 打开删除确认对话框
|
||
const openDeleteConfirm = (fileId, fileName) => {
|
||
setFileToDelete({ fileId, fileName });
|
||
setDeleteConfirmOpen(true);
|
||
};
|
||
|
||
// 关闭删除确认对话框
|
||
const closeDeleteConfirm = () => {
|
||
setDeleteConfirmOpen(false);
|
||
setFileToDelete(null);
|
||
};
|
||
|
||
// 删除文件前确认领域树操作
|
||
const confirmDeleteFile = () => {
|
||
setDeleteConfirmOpen(false);
|
||
|
||
// 如果没有其他文件了（删除后会变为空），直接删除
|
||
if (uploadedFiles.total <= 1) {
|
||
handleDeleteFile('keep');
|
||
return;
|
||
}
|
||
|
||
// 否则打开领域树操作选择对话框
|
||
setDomainTreeAction('delete');
|
||
setPendingAction({ type: 'delete' });
|
||
setDomainTreeActionOpen(true);
|
||
};
|
||
|
||
// 处理删除文件
|
||
const handleDeleteFile = async domainTreeActionType => {
|
||
if (!fileToDelete) return;
|
||
|
||
try {
|
||
setLoading(true);
|
||
closeDeleteConfirm();
|
||
|
||
await fileApi.deleteFile({
|
||
fileToDelete,
|
||
projectId,
|
||
domainTreeActionType,
|
||
modelInfo: selectedModelInfo || {},
|
||
t
|
||
});
|
||
await fetchUploadedFiles();
|
||
|
||
if (onFileDeleted) {
|
||
const filesLength = uploadedFiles.total;
|
||
onFileDeleted(fileToDelete, filesLength);
|
||
}
|
||
|
||
if (uploadedFiles.data && uploadedFiles.data.length <= 1 && currentPage > 1) {
|
||
setCurrentPage(1);
|
||
}
|
||
|
||
toast.success(t('textSplit.deleteSuccess', { fileName: fileToDelete.fileName }));
|
||
} catch (error) {
|
||
console.error('Error deleting file:', error);
|
||
toast.error(error.message);
|
||
} finally {
|
||
setLoading(false);
|
||
setFileToDelete(null);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Paper
|
||
elevation={0}
|
||
sx={{
|
||
p: 3,
|
||
mb: 3,
|
||
border: `1px solid ${theme.palette.divider}`,
|
||
borderRadius: 2
|
||
}}
|
||
>
|
||
{taskFileProcessing ? (
|
||
<FileLoadingProgress fileTask={fileTask} />
|
||
) : (
|
||
<>
|
||
<Grid container spacing={3}>
|
||
{/* 左侧：上传文件区域 */}
|
||
<Grid item xs={10} md={5} sx={{ maxWidth: '100%', width: '100%' }}>
|
||
<UploadArea
|
||
theme={theme}
|
||
files={files}
|
||
uploading={uploading}
|
||
uploadedFiles={uploadedFiles}
|
||
onFileSelect={handleFileSelect}
|
||
onRemoveFile={removeFile}
|
||
onUpload={uploadFiles}
|
||
selectedModel={selectedModelInfo}
|
||
/>
|
||
</Grid>
|
||
|
||
{/* 右侧：已上传文件列表 */}
|
||
<Grid item xs={14} md={7} sx={{ maxWidth: '100%', width: '100%' }}>
|
||
<FileList
|
||
theme={theme}
|
||
files={uploadedFiles}
|
||
loading={loading}
|
||
setPageLoading={setPageLoading}
|
||
sendToFileUploader={array => sendToPages(array)}
|
||
onDeleteFile={openDeleteConfirm}
|
||
projectId={projectId}
|
||
currentPage={currentPage}
|
||
onPageChange={(page, fileName) => {
|
||
if (fileName !== undefined) {
|
||
// 搜索时更新搜索关键词和页码
|
||
setSearchFileName(fileName);
|
||
setCurrentPage(page);
|
||
} else {
|
||
// 翻页时只更新页码
|
||
setCurrentPage(page);
|
||
}
|
||
}}
|
||
onRefresh={fetchUploadedFiles} // 传递刷新函数
|
||
/>
|
||
</Grid>
|
||
</Grid>
|
||
|
||
<DeleteConfirmDialog
|
||
open={deleteConfirmOpen}
|
||
fileName={fileToDelete?.fileName}
|
||
onClose={closeDeleteConfirm}
|
||
onConfirm={confirmDeleteFile}
|
||
/>
|
||
|
||
{/* 领域树操作选择对话框 */}
|
||
<DomainTreeActionDialog
|
||
open={domainTreeActionOpen}
|
||
onClose={() => setDomainTreeActionOpen(false)}
|
||
onConfirm={handleDomainTreeAction}
|
||
isFirstUpload={isFirstUpload}
|
||
action={domainTreeAction}
|
||
/>
|
||
{/* 检测到pdf的处理框 */}
|
||
<PdfProcessingDialog
|
||
open={pdfProcessConfirmOpen}
|
||
onClose={() => setpdfProcessConfirmOpen(false)}
|
||
onRadioChange={handleRadioChange}
|
||
value={pdfStrategy}
|
||
projectId={projectId}
|
||
taskSettings={taskSettings}
|
||
visionModels={visionModels}
|
||
selectedViosnModel={selectedViosnModel}
|
||
setSelectedViosnModel={setSelectedViosnModel}
|
||
/>
|
||
</>
|
||
)}
|
||
</Paper>
|
||
);
|
||
}
|