417 lines
14 KiB
JavaScript
417 lines
14 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogTitle,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogActions,
|
|||
|
|
Button,
|
|||
|
|
Box,
|
|||
|
|
Typography,
|
|||
|
|
List,
|
|||
|
|
ListItem,
|
|||
|
|
ListItemText,
|
|||
|
|
IconButton,
|
|||
|
|
CircularProgress,
|
|||
|
|
Alert,
|
|||
|
|
TextField,
|
|||
|
|
Tabs,
|
|||
|
|
Tab,
|
|||
|
|
Paper,
|
|||
|
|
Chip,
|
|||
|
|
Card
|
|||
|
|
} from '@mui/material';
|
|||
|
|
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
|
|||
|
|
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
|||
|
|
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
|||
|
|
import FolderZipIcon from '@mui/icons-material/FolderZip';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import { toast } from 'sonner';
|
|||
|
|
import axios from 'axios';
|
|||
|
|
|
|||
|
|
export default function ImportDialog({ open, projectId, onClose, onSuccess }) {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
const [mode, setMode] = useState(0); // 0: 目录导入, 1: PDF 导入, 2: 压缩包导入
|
|||
|
|
const [directories, setDirectories] = useState([]);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [inputPath, setInputPath] = useState('');
|
|||
|
|
const [selectedPdf, setSelectedPdf] = useState(null);
|
|||
|
|
const [selectedZip, setSelectedZip] = useState(null);
|
|||
|
|
|
|||
|
|
const handleAddDirectory = () => {
|
|||
|
|
if (inputPath.trim() && !directories.includes(inputPath.trim())) {
|
|||
|
|
setDirectories([...directories, inputPath.trim()]);
|
|||
|
|
setInputPath('');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleRemoveDirectory = index => {
|
|||
|
|
setDirectories(directories.filter((_, i) => i !== index));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleImport = async () => {
|
|||
|
|
if (directories.length === 0) {
|
|||
|
|
toast.error(t('images.selectAtLeastOne'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const response = await axios.post(`/api/projects/${projectId}/images`, {
|
|||
|
|
directories
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
toast.success(t('images.importSuccess', { count: response.data.count }));
|
|||
|
|
setDirectories([]);
|
|||
|
|
onSuccess?.();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to import images:', error);
|
|||
|
|
toast.error(error.response?.data?.error || t('images.importFailed'));
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePdfSelect = event => {
|
|||
|
|
const file = event.target.files?.[0];
|
|||
|
|
if (file && file.type === 'application/pdf') {
|
|||
|
|
setSelectedPdf(file);
|
|||
|
|
} else {
|
|||
|
|
toast.error(t('images.invalidPdfFile', { defaultValue: '请选择有效的 PDF 文件' }));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePdfImport = async () => {
|
|||
|
|
if (!selectedPdf) {
|
|||
|
|
toast.error(t('images.selectPdfFile', { defaultValue: '请选择 PDF 文件' }));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', selectedPdf);
|
|||
|
|
|
|||
|
|
// 调用 PDF 转换 API
|
|||
|
|
const response = await axios.post(`/api/projects/${projectId}/images/pdf-convert`, formData, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'multipart/form-data'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
toast.success(
|
|||
|
|
t('images.pdfImportSuccess', {
|
|||
|
|
defaultValue: `成功从 PDF "${response.data.pdfName}" 导入 ${response.data.count} 张图片`,
|
|||
|
|
count: response.data.count,
|
|||
|
|
name: response.data.pdfName
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
setSelectedPdf(null);
|
|||
|
|
onSuccess?.();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to import PDF:', error);
|
|||
|
|
toast.error(error.response?.data?.error || t('images.pdfImportFailed', { defaultValue: 'PDF 导入失败' }));
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleZipSelect = event => {
|
|||
|
|
const file = event.target.files?.[0];
|
|||
|
|
if (file && file.name.toLowerCase().endsWith('.zip')) {
|
|||
|
|
setSelectedZip(file);
|
|||
|
|
} else {
|
|||
|
|
toast.error(t('images.invalidZipFile', { defaultValue: '请选择有效的 ZIP 文件' }));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleZipImport = async () => {
|
|||
|
|
if (!selectedZip) {
|
|||
|
|
toast.error(t('images.selectZipFile', { defaultValue: '请选择 ZIP 文件' }));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', selectedZip);
|
|||
|
|
|
|||
|
|
// 调用压缩包导入 API
|
|||
|
|
const response = await axios.post(`/api/projects/${projectId}/images/zip-import`, formData, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'multipart/form-data'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
toast.success(
|
|||
|
|
t('images.zipImportSuccess', {
|
|||
|
|
defaultValue: `成功从压缩包 "${response.data.zipName}" 导入 ${response.data.count} 张图片`,
|
|||
|
|
count: response.data.count,
|
|||
|
|
name: response.data.zipName
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
setSelectedZip(null);
|
|||
|
|
onSuccess?.();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to import ZIP:', error);
|
|||
|
|
toast.error(error.response?.data?.error || t('images.zipImportFailed', { defaultValue: '压缩包导入失败' }));
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClose = () => {
|
|||
|
|
if (!loading) {
|
|||
|
|
setDirectories([]);
|
|||
|
|
setSelectedPdf(null);
|
|||
|
|
setSelectedZip(null);
|
|||
|
|
setMode(0);
|
|||
|
|
onClose();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
|
|||
|
|
<DialogTitle>{t('images.importImages')}</DialogTitle>
|
|||
|
|
<DialogContent sx={{ pt: 2 }}>
|
|||
|
|
<Tabs
|
|||
|
|
value={mode}
|
|||
|
|
onChange={(e, newValue) => setMode(newValue)}
|
|||
|
|
sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
|
|||
|
|
>
|
|||
|
|
<Tab
|
|||
|
|
label={t('images.importFromDirectory', { defaultValue: '从目录导入' })}
|
|||
|
|
icon={<FolderOpenIcon />}
|
|||
|
|
iconPosition="start"
|
|||
|
|
/>
|
|||
|
|
<Tab
|
|||
|
|
label={t('images.importFromPdf', { defaultValue: '从 PDF 导入' })}
|
|||
|
|
icon={<PictureAsPdfIcon />}
|
|||
|
|
iconPosition="start"
|
|||
|
|
/>
|
|||
|
|
<Tab
|
|||
|
|
label={t('images.importFromZip', { defaultValue: '从压缩包导入' })}
|
|||
|
|
icon={<FolderZipIcon />}
|
|||
|
|
iconPosition="start"
|
|||
|
|
/>
|
|||
|
|
</Tabs>
|
|||
|
|
|
|||
|
|
{mode === 0 ? (
|
|||
|
|
<>
|
|||
|
|
<Alert severity="info" sx={{ mb: 2 }}>
|
|||
|
|
{t('images.importTip')}
|
|||
|
|
</Alert>
|
|||
|
|
|
|||
|
|
<Box sx={{ display: 'flex', gap: 1.5, mb: 3 }}>
|
|||
|
|
<TextField
|
|||
|
|
fullWidth
|
|||
|
|
size="small"
|
|||
|
|
label={t('images.directoryPath')}
|
|||
|
|
placeholder={t('images.enterDirectoryPath')}
|
|||
|
|
value={inputPath}
|
|||
|
|
onChange={e => setInputPath(e.target.value)}
|
|||
|
|
onKeyPress={e => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
handleAddDirectory();
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
disabled={loading}
|
|||
|
|
sx={{
|
|||
|
|
'& .MuiOutlinedInput-root': {
|
|||
|
|
borderRadius: 2
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
variant="contained"
|
|||
|
|
startIcon={<FolderOpenIcon />}
|
|||
|
|
onClick={handleAddDirectory}
|
|||
|
|
disabled={loading || !inputPath.trim()}
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: 2,
|
|||
|
|
px: 2.5,
|
|||
|
|
fontWeight: 600,
|
|||
|
|
textTransform: 'none',
|
|||
|
|
whiteSpace: 'nowrap',
|
|||
|
|
boxShadow: 1,
|
|||
|
|
transition: 'all 0.2s',
|
|||
|
|
'&:hover:not(:disabled)': {
|
|||
|
|
boxShadow: 2,
|
|||
|
|
transform: 'translateY(-1px)'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{t('images.addDirectory', { defaultValue: '添加目录' })}
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{directories.length > 0 && (
|
|||
|
|
<Card
|
|||
|
|
sx={{
|
|||
|
|
p: 2.5,
|
|||
|
|
bgcolor: 'background.paper',
|
|||
|
|
border: '1px solid',
|
|||
|
|
borderColor: 'divider',
|
|||
|
|
borderRadius: 2
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
|||
|
|
<FolderOpenIcon sx={{ mr: 1, color: 'primary.main' }} />
|
|||
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
|
|||
|
|
{t('images.selectedDirectories')} ({directories.length})
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
|||
|
|
{directories.map((dir, index) => (
|
|||
|
|
<Chip
|
|||
|
|
key={index}
|
|||
|
|
label={dir}
|
|||
|
|
onDelete={() => handleRemoveDirectory(index)}
|
|||
|
|
disabled={loading}
|
|||
|
|
icon={<FolderOpenIcon />}
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: 1.5,
|
|||
|
|
fontWeight: 500,
|
|||
|
|
maxWidth: '100%',
|
|||
|
|
'& .MuiChip-label': {
|
|||
|
|
overflow: 'hidden',
|
|||
|
|
textOverflow: 'ellipsis',
|
|||
|
|
whiteSpace: 'nowrap'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
) : mode === 1 ? (
|
|||
|
|
<>
|
|||
|
|
<Alert severity="info" sx={{ mb: 2 }}>
|
|||
|
|
{t('images.pdfImportTip', { defaultValue: '选择 PDF 文件，系统会自动将其转换为图片并导入' })}
|
|||
|
|
</Alert>
|
|||
|
|
|
|||
|
|
<Paper
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
p: 4,
|
|||
|
|
textAlign: 'center',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
bgcolor: 'background.default',
|
|||
|
|
border: '2px dashed',
|
|||
|
|
borderColor: selectedPdf ? 'primary.main' : 'divider',
|
|||
|
|
transition: 'all 0.3s',
|
|||
|
|
'&:hover': {
|
|||
|
|
bgcolor: 'action.hover',
|
|||
|
|
borderColor: 'primary.main'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
onClick={() => document.getElementById('pdf-file-input').click()}
|
|||
|
|
>
|
|||
|
|
<input
|
|||
|
|
id="pdf-file-input"
|
|||
|
|
type="file"
|
|||
|
|
accept=".pdf,application/pdf"
|
|||
|
|
style={{ display: 'none' }}
|
|||
|
|
onChange={handlePdfSelect}
|
|||
|
|
disabled={loading}
|
|||
|
|
/>
|
|||
|
|
<UploadFileIcon sx={{ fontSize: 64, color: selectedPdf ? 'primary.main' : 'text.secondary', mb: 2 }} />
|
|||
|
|
<Typography variant="h6" gutterBottom>
|
|||
|
|
{selectedPdf ? selectedPdf.name : t('images.clickToSelectPdf', { defaultValue: '点击选择 PDF 文件' })}
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{t('images.supportedFormat', { defaultValue: '支持格式：PDF' })}
|
|||
|
|
</Typography>
|
|||
|
|
{selectedPdf && (
|
|||
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
|
|||
|
|
{t('images.fileSize', { defaultValue: '文件大小' })}: {(selectedPdf.size / 1024 / 1024).toFixed(2)} MB
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</Paper>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<Alert severity="info" sx={{ mb: 2 }}>
|
|||
|
|
{t('images.zipImportTip', { defaultValue: '选择 ZIP 压缩包文件，系统会自动解压并导入其中的图片' })}
|
|||
|
|
</Alert>
|
|||
|
|
|
|||
|
|
<Paper
|
|||
|
|
variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
p: 4,
|
|||
|
|
textAlign: 'center',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
bgcolor: 'background.default',
|
|||
|
|
border: '2px dashed',
|
|||
|
|
borderColor: selectedZip ? 'primary.main' : 'divider',
|
|||
|
|
transition: 'all 0.3s',
|
|||
|
|
'&:hover': {
|
|||
|
|
bgcolor: 'action.hover',
|
|||
|
|
borderColor: 'primary.main'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
onClick={() => document.getElementById('zip-file-input').click()}
|
|||
|
|
>
|
|||
|
|
<input
|
|||
|
|
id="zip-file-input"
|
|||
|
|
type="file"
|
|||
|
|
accept=".zip,application/zip,application/x-zip-compressed"
|
|||
|
|
style={{ display: 'none' }}
|
|||
|
|
onChange={handleZipSelect}
|
|||
|
|
disabled={loading}
|
|||
|
|
/>
|
|||
|
|
<FolderZipIcon sx={{ fontSize: 64, color: selectedZip ? 'primary.main' : 'text.secondary', mb: 2 }} />
|
|||
|
|
<Typography variant="h6" gutterBottom>
|
|||
|
|
{selectedZip ? selectedZip.name : t('images.clickToSelectZip', { defaultValue: '点击选择 ZIP 文件' })}
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{t('images.supportedZipFormat', { defaultValue: '支持格式：ZIP' })}
|
|||
|
|
</Typography>
|
|||
|
|
{selectedZip && (
|
|||
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
|
|||
|
|
{t('images.fileSize', { defaultValue: '文件大小' })}: {(selectedZip.size / 1024 / 1024).toFixed(2)} MB
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</Paper>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</DialogContent>
|
|||
|
|
<DialogActions>
|
|||
|
|
<Button onClick={handleClose} disabled={loading}>
|
|||
|
|
{t('common.cancel')}
|
|||
|
|
</Button>
|
|||
|
|
{mode === 0 ? (
|
|||
|
|
<Button
|
|||
|
|
onClick={handleImport}
|
|||
|
|
variant="contained"
|
|||
|
|
disabled={loading || directories.length === 0}
|
|||
|
|
startIcon={loading ? <CircularProgress size={20} /> : null}
|
|||
|
|
>
|
|||
|
|
{t('images.startImport')}
|
|||
|
|
</Button>
|
|||
|
|
) : mode === 1 ? (
|
|||
|
|
<Button
|
|||
|
|
onClick={handlePdfImport}
|
|||
|
|
variant="contained"
|
|||
|
|
disabled={loading || !selectedPdf}
|
|||
|
|
startIcon={loading ? <CircularProgress size={20} /> : null}
|
|||
|
|
>
|
|||
|
|
{t('images.convertAndImport', { defaultValue: '转换并导入' })}
|
|||
|
|
</Button>
|
|||
|
|
) : (
|
|||
|
|
<Button
|
|||
|
|
onClick={handleZipImport}
|
|||
|
|
variant="contained"
|
|||
|
|
disabled={loading || !selectedZip}
|
|||
|
|
startIcon={loading ? <CircularProgress size={20} /> : null}
|
|||
|
|
>
|
|||
|
|
{t('images.extractAndImport', { defaultValue: '解压并导入' })}
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</DialogActions>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|