Files
YG-Datasets/easy-dataset-main/components/datasets/DatasetHeader.js

98 lines
3.6 KiB
JavaScript

'use client';
import { Box, Button, Divider, Typography, IconButton, CircularProgress, Paper, Tooltip } from '@mui/material';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import DeleteIcon from '@mui/icons-material/Delete';
import UndoIcon from '@mui/icons-material/Undo';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/navigation';
/**
* 数据集详情页面的头部导航组件
*/
export default function DatasetHeader({
projectId,
datasetsAllCount,
datasetsConfirmCount,
confirming,
unconfirming,
currentDataset,
shortcutsEnabled,
setShortcutsEnabled,
onNavigate,
onConfirm,
onUnconfirm,
onDelete
}) {
const router = useRouter();
const { t } = useTranslation();
return (
<Paper sx={{ p: 2, mb: 3 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<Button startIcon={<NavigateBeforeIcon />} onClick={() => router.push(`/projects/${projectId}/datasets`)}>
{t('common.backToList')}
</Button>
<Divider orientation="vertical" flexItem />
<Typography variant="h6">{t('datasets.datasetDetail')}</Typography>
<Typography variant="body2" color="text.secondary">
{t('datasets.stats', {
total: datasetsAllCount,
confirmed: datasetsConfirmCount,
percentage: ((datasetsConfirmCount / datasetsAllCount) * 100).toFixed(2)
})}
</Typography>
</Box>
{/* 快捷键启用选项 - 已注释掉,保持原代码结构 */}
{/* <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<Typography variant="body1">{t('datasets.enableShortcuts')}</Typography>
<Tooltip title={t('datasets.shortcutsHelp')}>
<IconButton size="small" color="info">
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>?</Typography>
</IconButton>
</Tooltip>
<Button
variant={shortcutsEnabled ? 'contained' : 'outlined'}
onClick={() => setShortcutsEnabled((prev) => !prev)}
>
{shortcutsEnabled ? t('common.enabled') : t('common.disabled')}
</Button>
</Box> */}
<Box sx={{ display: 'flex', gap: 1 }}>
<IconButton onClick={() => onNavigate('prev')}>
<NavigateBeforeIcon />
</IconButton>
<IconButton onClick={() => onNavigate('next')}>
<NavigateNextIcon />
</IconButton>
<Divider orientation="vertical" flexItem />
{/* 确认/取消确认按钮 */}
{currentDataset.confirmed ? (
<Button
variant="outlined"
color="warning"
disabled={unconfirming}
onClick={onUnconfirm}
startIcon={unconfirming ? <CircularProgress size={16} /> : <UndoIcon />}
sx={{ mr: 1 }}
>
{unconfirming ? t('datasets.unconfirming') : t('datasets.unconfirm')}
</Button>
) : (
<Button variant="contained" color="primary" disabled={confirming} onClick={onConfirm} sx={{ mr: 1 }}>
{confirming ? <CircularProgress size={24} /> : t('datasets.confirmSave')}
</Button>
)}
<Button variant="outlined" color="error" startIcon={<DeleteIcon />} onClick={onDelete}>
{t('common.delete')}
</Button>
</Box>
</Box>
</Paper>
);
}