301 lines
9.1 KiB
JavaScript
301 lines
9.1 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogTitle,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogActions,
|
|||
|
|
Button,
|
|||
|
|
Box,
|
|||
|
|
Typography,
|
|||
|
|
CircularProgress,
|
|||
|
|
List,
|
|||
|
|
ListItem,
|
|||
|
|
ListItemText,
|
|||
|
|
ListItemSecondaryAction,
|
|||
|
|
IconButton,
|
|||
|
|
Alert,
|
|||
|
|
Paper,
|
|||
|
|
useTheme,
|
|||
|
|
Tooltip
|
|||
|
|
} from '@mui/material';
|
|||
|
|
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
|
|||
|
|
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
|
|||
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 项目迁移对话框组件
|
|||
|
|
* @param {Object} props - 组件属性
|
|||
|
|
* @param {boolean} props.open - 对话框是否打开
|
|||
|
|
* @param {Function} props.onClose - 关闭对话框的回调函数
|
|||
|
|
* @param {Array<string>} props.projectIds - 需要迁移的项目ID列表
|
|||
|
|
*/
|
|||
|
|
export default function MigrationDialog({ open, onClose, projectIds = [] }) {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const [migrating, setMigrating] = useState(false);
|
|||
|
|
const [success, setSuccess] = useState(false);
|
|||
|
|
const [error, setError] = useState(null);
|
|||
|
|
const [migratedCount, setMigratedCount] = useState(0);
|
|||
|
|
const [taskId, setTaskId] = useState(null);
|
|||
|
|
const [progress, setProgress] = useState(0);
|
|||
|
|
const [statusText, setStatusText] = useState('');
|
|||
|
|
const [processingIds, setProcessingIds] = useState([]);
|
|||
|
|
|
|||
|
|
// 打开项目目录
|
|||
|
|
const handleOpenDirectory = async projectId => {
|
|||
|
|
try {
|
|||
|
|
setProcessingIds(prev => [...prev, projectId]);
|
|||
|
|
|
|||
|
|
const response = await fetch('/api/projects/open-directory', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({ projectId })
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
throw new Error(data.error || t('migration.openDirectoryFailed'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 成功打开目录，不需要特别处理
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('打开目录错误:', err);
|
|||
|
|
setError(err.message);
|
|||
|
|
} finally {
|
|||
|
|
setProcessingIds(prev => prev.filter(id => id !== projectId));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 删除项目目录
|
|||
|
|
const handleDeleteDirectory = async projectId => {
|
|||
|
|
try {
|
|||
|
|
if (!window.confirm(t('migration.confirmDelete'))) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setProcessingIds(prev => [...prev, projectId]);
|
|||
|
|
|
|||
|
|
const response = await fetch('/api/projects/delete-directory', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({ projectId })
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
throw new Error(data.error || t('migration.deleteDirectoryFailed'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从列表中移除已删除的项目
|
|||
|
|
const updatedProjectIds = projectIds.filter(id => id !== projectId);
|
|||
|
|
// 这里我们不能直接修改 projectIds，因为它是从父组件传入的
|
|||
|
|
// 但我们可以通知用户界面刷新
|
|||
|
|
window.location.reload();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('删除目录错误:', err);
|
|||
|
|
setError(err.message);
|
|||
|
|
} finally {
|
|||
|
|
setProcessingIds(prev => prev.filter(id => id !== projectId));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理迁移操作
|
|||
|
|
const handleMigration = async () => {
|
|||
|
|
try {
|
|||
|
|
setMigrating(true);
|
|||
|
|
setError(null);
|
|||
|
|
setSuccess(false);
|
|||
|
|
setProgress(0);
|
|||
|
|
setStatusText(t('migration.starting'));
|
|||
|
|
|
|||
|
|
// 调用异步迁移接口启动迁移任务
|
|||
|
|
const response = await fetch('/api/projects/migrate', {
|
|||
|
|
method: 'POST'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error(t('migration.failed'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { success, taskId: newTaskId } = await response.json();
|
|||
|
|
|
|||
|
|
if (!success || !newTaskId) {
|
|||
|
|
throw new Error(t('migration.startFailed'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存任务ID
|
|||
|
|
setTaskId(newTaskId);
|
|||
|
|
setStatusText(t('migration.processing'));
|
|||
|
|
|
|||
|
|
// 开始轮询任务状态
|
|||
|
|
await pollMigrationStatus(newTaskId);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('迁移错误:', err);
|
|||
|
|
setError(err.message);
|
|||
|
|
setMigrating(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 轮询迁移任务状态
|
|||
|
|
const pollMigrationStatus = async id => {
|
|||
|
|
try {
|
|||
|
|
// 定义轮询间隔（毫秒）
|
|||
|
|
const pollInterval = 1000;
|
|||
|
|
|
|||
|
|
// 发送请求获取任务状态
|
|||
|
|
const response = await fetch(`/api/projects/migrate?taskId=${id}`);
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error(t('migration.statusFailed'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { success, task } = await response.json();
|
|||
|
|
|
|||
|
|
if (!success || !task) {
|
|||
|
|
throw new Error(t('migration.taskNotFound'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新进度
|
|||
|
|
setProgress(task.progress || 0);
|
|||
|
|
|
|||
|
|
// 根据任务状态更新UI
|
|||
|
|
if (task.status === 'completed') {
|
|||
|
|
// 任务完成
|
|||
|
|
setMigratedCount(task.completed);
|
|||
|
|
setSuccess(true);
|
|||
|
|
setMigrating(false);
|
|||
|
|
setStatusText(t('migration.completed'));
|
|||
|
|
|
|||
|
|
// 迁移成功后，延迟关闭对话框并刷新页面
|
|||
|
|
setTimeout(() => {
|
|||
|
|
onClose();
|
|||
|
|
window.location.reload();
|
|||
|
|
}, 2000);
|
|||
|
|
} else if (task.status === 'failed') {
|
|||
|
|
// 任务失败
|
|||
|
|
throw new Error(task.error || t('migration.failed'));
|
|||
|
|
} else {
|
|||
|
|
// 任务仍在进行中，继续轮询
|
|||
|
|
setTimeout(() => pollMigrationStatus(id), pollInterval);
|
|||
|
|
|
|||
|
|
// 更新状态文本
|
|||
|
|
if (task.total > 0) {
|
|||
|
|
setStatusText(
|
|||
|
|
t('migration.progressStatus', {
|
|||
|
|
completed: task.completed || 0,
|
|||
|
|
total: task.total
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('获取迁移状态错误:', err);
|
|||
|
|
setError(err.message);
|
|||
|
|
setMigrating(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={open} onClose={migrating ? undefined : onClose} maxWidth="sm" fullWidth>
|
|||
|
|
<DialogTitle
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
gap: 1.5
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<WarningAmberIcon color="warning" />
|
|||
|
|
<Typography variant="h6">{t('migration.title')}</Typography>
|
|||
|
|
</DialogTitle>
|
|||
|
|
|
|||
|
|
<DialogContent>
|
|||
|
|
{success ? (
|
|||
|
|
<Alert severity="success" sx={{ mb: 2 }}>
|
|||
|
|
{t('migration.success', { count: migratedCount })}
|
|||
|
|
</Alert>
|
|||
|
|
) : error ? (
|
|||
|
|
<Alert severity="error" sx={{ mb: 2 }}>
|
|||
|
|
{error}
|
|||
|
|
</Alert>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<Typography variant="body1" sx={{ mb: 2 }}>
|
|||
|
|
{t('migration.description')}
|
|||
|
|
</Typography>
|
|||
|
|
|
|||
|
|
{projectIds.length > 0 && (
|
|||
|
|
<Box sx={{ mt: 2, mb: 2 }}>
|
|||
|
|
<Typography variant="subtitle1" sx={{ mb: 1 }}>
|
|||
|
|
{t('migration.projectsList')}:
|
|||
|
|
</Typography>
|
|||
|
|
<Paper variant="outlined" sx={{ maxHeight: 180, overflow: 'auto' }}>
|
|||
|
|
<List dense>
|
|||
|
|
{projectIds.map(id => (
|
|||
|
|
<ListItem key={id}>
|
|||
|
|
<ListItemText primary={id} />
|
|||
|
|
<ListItemSecondaryAction>
|
|||
|
|
<Tooltip title={t('migration.openDirectory')}>
|
|||
|
|
<IconButton
|
|||
|
|
edge="end"
|
|||
|
|
aria-label="open"
|
|||
|
|
onClick={() => handleOpenDirectory(id)}
|
|||
|
|
disabled={processingIds.includes(id)}
|
|||
|
|
size="small"
|
|||
|
|
>
|
|||
|
|
<FolderOpenIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
<Tooltip title={t('migration.deleteDirectory')}>
|
|||
|
|
<IconButton
|
|||
|
|
edge="end"
|
|||
|
|
aria-label="delete"
|
|||
|
|
onClick={() => handleDeleteDirectory(id)}
|
|||
|
|
disabled={processingIds.includes(id)}
|
|||
|
|
size="small"
|
|||
|
|
sx={{ ml: 1, color: 'error.main' }}
|
|||
|
|
>
|
|||
|
|
<DeleteIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
</ListItemSecondaryAction>
|
|||
|
|
</ListItem>
|
|||
|
|
))}
|
|||
|
|
</List>
|
|||
|
|
</Paper>
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{migrating && (
|
|||
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', my: 3, gap: 1.5 }}>
|
|||
|
|
<CircularProgress variant={progress > 0 ? 'determinate' : 'indeterminate'} value={progress} />
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{statusText || t('migration.migrating')}
|
|||
|
|
</Typography>
|
|||
|
|
{progress > 0 && (
|
|||
|
|
<Typography variant="body2" color="text.secondary">
|
|||
|
|
{progress}%
|
|||
|
|
</Typography>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
</DialogContent>
|
|||
|
|
|
|||
|
|
<DialogActions>
|
|||
|
|
<Button onClick={onClose} disabled={migrating}>
|
|||
|
|
{t('common.cancel')}
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={handleMigration} variant="contained" color="primary" disabled={migrating || success}>
|
|||
|
|
{migrating ? t('migration.migrating') : t('migration.migrate')}
|
|||
|
|
</Button>
|
|||
|
|
</DialogActions>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|