83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { Container, Box, CircularProgress, Alert } from '@mui/material';
|
|||
|
|
import { useParams } from 'next/navigation';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import useImageDatasetDetails from '../hooks/useImageDatasetDetails';
|
|||
|
|
import ImageDatasetHeader from '../components/ImageDatasetHeader';
|
|||
|
|
import DatasetContent from '../components/DatasetContent';
|
|||
|
|
import DatasetSidebar from '../components/DatasetSidebar';
|
|||
|
|
|
|||
|
|
export default function ImageDatasetDetailPage() {
|
|||
|
|
const { projectId, datasetId } = useParams();
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
currentDataset,
|
|||
|
|
loading,
|
|||
|
|
confirming,
|
|||
|
|
unconfirming,
|
|||
|
|
datasetsAllCount,
|
|||
|
|
datasetsConfirmCount,
|
|||
|
|
updateDataset,
|
|||
|
|
handleNavigate,
|
|||
|
|
handleConfirm,
|
|||
|
|
handleUnconfirm,
|
|||
|
|
handleDelete
|
|||
|
|
} = useImageDatasetDetails(projectId, datasetId);
|
|||
|
|
|
|||
|
|
// 加载状态
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<Container maxWidth="xl" sx={{ mt: 4 }}>
|
|||
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '70vh' }}>
|
|||
|
|
<CircularProgress />
|
|||
|
|
</Box>
|
|||
|
|
</Container>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 无数据状态
|
|||
|
|
if (!currentDataset) {
|
|||
|
|
return (
|
|||
|
|
<Container maxWidth="xl" sx={{ mt: 4 }}>
|
|||
|
|
<Alert severity="error">{t('imageDatasets.notFound', '数据集不存在')}</Alert>
|
|||
|
|
</Container>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
|
|||
|
|
{/* 顶部导航栏 */}
|
|||
|
|
<ImageDatasetHeader
|
|||
|
|
projectId={projectId}
|
|||
|
|
datasetsAllCount={datasetsAllCount}
|
|||
|
|
datasetsConfirmCount={datasetsConfirmCount}
|
|||
|
|
confirming={confirming}
|
|||
|
|
unconfirming={unconfirming}
|
|||
|
|
currentDataset={currentDataset}
|
|||
|
|
onNavigate={handleNavigate}
|
|||
|
|
onConfirm={handleConfirm}
|
|||
|
|
onUnconfirm={handleUnconfirm}
|
|||
|
|
onDelete={handleDelete}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 主要布局：左右分栏 */}
|
|||
|
|
<Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
|
|||
|
|
{/* 左侧主要内容区域 */}
|
|||
|
|
<DatasetContent
|
|||
|
|
dataset={currentDataset}
|
|||
|
|
projectId={projectId}
|
|||
|
|
onAnswerChange={async newAnswer => {
|
|||
|
|
// 直接传递答案字符串，DatasetContent 已经处理了格式转换
|
|||
|
|
await updateDataset({ answer: newAnswer });
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 右侧固定侧边栏 */}
|
|||
|
|
<DatasetSidebar dataset={currentDataset} projectId={projectId} onUpdate={updateDataset} />
|
|||
|
|
</Box>
|
|||
|
|
</Container>
|
|||
|
|
);
|
|||
|
|
}
|