406 lines
16 KiB
JavaScript
406 lines
16 KiB
JavaScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {
|
|
Drawer,
|
|
Box,
|
|
Typography,
|
|
IconButton,
|
|
Tooltip,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Collapse
|
|
} from '@mui/material';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Link from 'next/link';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
|
|
import TokenOutlinedIcon from '@mui/icons-material/TokenOutlined';
|
|
import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined';
|
|
import DatasetOutlinedIcon from '@mui/icons-material/DatasetOutlined';
|
|
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
|
import ScienceOutlinedIcon from '@mui/icons-material/ScienceOutlined';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import ChatIcon from '@mui/icons-material/Chat';
|
|
import ImageIcon from '@mui/icons-material/Image';
|
|
import StorageIcon from '@mui/icons-material/Storage';
|
|
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
|
import GitHubIcon from '@mui/icons-material/GitHub';
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
|
import AssessmentOutlinedIcon from '@mui/icons-material/AssessmentOutlined';
|
|
import PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay';
|
|
import VisibilityIcon from '@mui/icons-material/Visibility';
|
|
import UpdateChecker from '../UpdateChecker';
|
|
import * as styles from './styles';
|
|
|
|
/**
|
|
* MobileDrawer 组件
|
|
* 移动端抽屉菜单，包含所有导航项
|
|
*/
|
|
export default function MobileDrawer({
|
|
theme,
|
|
drawerOpen,
|
|
toggleDrawer,
|
|
expandedMenu,
|
|
toggleMobileSubmenu,
|
|
currentProject,
|
|
onNavigateStart
|
|
}) {
|
|
const { t, i18n } = useTranslation();
|
|
const handleNavigateStart = () => {
|
|
onNavigateStart?.();
|
|
toggleDrawer();
|
|
};
|
|
|
|
return (
|
|
<Drawer
|
|
id="mobile-navigation-drawer"
|
|
anchor="left"
|
|
open={drawerOpen}
|
|
onClose={toggleDrawer}
|
|
PaperProps={{
|
|
role: 'navigation',
|
|
'aria-label': t('common.mobileNavigation', 'Mobile navigation menu'),
|
|
sx: styles.getDrawerPaperStyles(theme)
|
|
}}
|
|
ModalProps={{
|
|
keepMounted: true // Better mobile performance
|
|
}}
|
|
transitionDuration={300}
|
|
SlideProps={{
|
|
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
|
|
}}
|
|
>
|
|
{/* Drawer Header */}
|
|
<Box sx={styles.getDrawerHeaderStyles(theme)}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
|
<Box component="img" src="/imgs/logo.svg" alt="Easy Dataset Logo" sx={{ width: 32, height: 32 }} />
|
|
<Typography variant="h6" component="h2" sx={{ fontWeight: 700, fontSize: '1.15rem' }}>
|
|
{t('common.navigation', 'Navigation')}
|
|
</Typography>
|
|
</Box>
|
|
<Tooltip title={t('common.closeMenu', 'Close menu')}>
|
|
<IconButton
|
|
onClick={toggleDrawer}
|
|
aria-label={t('common.closeMenu', 'Close menu')}
|
|
size="medium"
|
|
sx={styles.getDrawerCloseButtonStyles(theme)}
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
|
|
{/* Drawer Menu List */}
|
|
<List sx={styles.drawerListStyles} role="menu">
|
|
{/* 数据源菜单 */}
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
onClick={() => toggleMobileSubmenu('source')}
|
|
aria-expanded={expandedMenu === 'source'}
|
|
aria-controls="source-submenu"
|
|
role="menuitem"
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<DescriptionOutlinedIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('common.dataSource')} primaryTypographyProps={styles.listItemTextStyles} />
|
|
{expandedMenu === 'source' ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<Collapse id="source-submenu" in={expandedMenu === 'source'} timeout="auto" unmountOnExit>
|
|
<List component="div" disablePadding role="menu" sx={styles.getDrawerSubmenuContainerStyles(theme)}>
|
|
<ListItemButton
|
|
role="menuitem"
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/text-split`}
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<DescriptionOutlinedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('textSplit.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
role="menuitem"
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/images`}
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<ImageIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('images.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</ListItemButton>
|
|
</List>
|
|
</Collapse>
|
|
|
|
{/* 数据蒸馏 */}
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
component={Link}
|
|
href={`/projects/${currentProject}/distill`}
|
|
onClick={toggleDrawer}
|
|
role="menuitem"
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<TokenOutlinedIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('distill.title')} primaryTypographyProps={styles.listItemTextStyles} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
{/* 问题管理 */}
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
component={Link}
|
|
href={`/projects/${currentProject}/questions`}
|
|
onClick={toggleDrawer}
|
|
role="menuitem"
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<QuestionAnswerOutlinedIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('questions.title')} primaryTypographyProps={styles.listItemTextStyles} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
{/* 数据集管理 */}
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
onClick={() => toggleMobileSubmenu('dataset')}
|
|
role="menuitem"
|
|
aria-expanded={expandedMenu === 'dataset'}
|
|
aria-controls="dataset-submenu"
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<DatasetOutlinedIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('datasets.management')} primaryTypographyProps={styles.listItemTextStyles} />
|
|
{expandedMenu === 'dataset' ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<Collapse in={expandedMenu === 'dataset'} timeout="auto" unmountOnExit id="dataset-submenu">
|
|
<List component="div" disablePadding sx={styles.getDrawerSubmenuContainerStyles(theme)}>
|
|
<ListItemButton
|
|
role="menuitem"
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/datasets`}
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<DatasetOutlinedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('datasets.singleTurn', '单轮问答数据集')}
|
|
primaryTypographyProps={styles.smallListItemTextStyles}
|
|
/>
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/multi-turn`}
|
|
onClick={handleNavigateStart}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<ChatIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('datasets.multiTurn', '多轮对话数据集')}
|
|
primaryTypographyProps={styles.smallListItemTextStyles}
|
|
/>
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/image-datasets`}
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<ImageIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('datasets.imageQA', '图片问答数据集')}
|
|
primaryTypographyProps={styles.smallListItemTextStyles}
|
|
/>
|
|
</ListItemButton>
|
|
</List>
|
|
</Collapse>
|
|
|
|
{/* 评估菜单 */}
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
onClick={() => toggleMobileSubmenu('eval')}
|
|
role="menuitem"
|
|
aria-expanded={expandedMenu === 'eval'}
|
|
aria-controls="eval-submenu"
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<AssessmentOutlinedIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('eval.title')} primaryTypographyProps={styles.listItemTextStyles} />
|
|
{expandedMenu === 'eval' ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<Collapse in={expandedMenu === 'eval'} timeout="auto" unmountOnExit id="eval-submenu">
|
|
<List component="div" disablePadding sx={styles.getDrawerSubmenuContainerStyles(theme)}>
|
|
<ListItemButton
|
|
role="menuitem"
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/eval-datasets`}
|
|
onClick={handleNavigateStart}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<AssessmentOutlinedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('eval.datasets')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
role="menuitem"
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/eval-tasks`}
|
|
onClick={handleNavigateStart}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<PlaylistPlayIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('eval.tasks')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
role="menuitem"
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/blind-test-tasks`}
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<VisibilityIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('blindTest.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</ListItemButton>
|
|
</List>
|
|
</Collapse>
|
|
|
|
{/* 更多菜单 */}
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
onClick={() => toggleMobileSubmenu('more')}
|
|
role="menuitem"
|
|
aria-expanded={expandedMenu === 'more'}
|
|
aria-controls="more-submenu"
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<MoreVertIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('common.more')} primaryTypographyProps={styles.listItemTextStyles} />
|
|
{expandedMenu === 'more' ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<Collapse in={expandedMenu === 'more'} timeout="auto" unmountOnExit id="more-submenu">
|
|
<List component="div" disablePadding sx={styles.getDrawerSubmenuContainerStyles(theme)}>
|
|
<ListItemButton
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/settings`}
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<SettingsOutlinedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('settings.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href={`/projects/${currentProject}/playground`}
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<ScienceOutlinedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('playground.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
sx={styles.getDrawerSubmenuItemStyles(theme)}
|
|
component={Link}
|
|
href="/dataset-square"
|
|
onClick={toggleDrawer}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<StorageIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('datasetSquare.title')}
|
|
primaryTypographyProps={styles.smallListItemTextStyles}
|
|
/>
|
|
</ListItemButton>
|
|
</List>
|
|
</Collapse>
|
|
|
|
{/* Utilities Section */}
|
|
<Box sx={styles.getDrawerUtilitiesStyles(theme)}>
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
component="a"
|
|
href={
|
|
i18n.language === 'zh-CN' ? 'https://docs.easy-dataset.com/' : 'https://docs.easy-dataset.com/ed/en'
|
|
}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={toggleDrawer}
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<HelpOutlineIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('common.documentation', 'Documentation')}
|
|
primaryTypographyProps={styles.listItemTextStyles}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
|
<ListItemButton
|
|
onClick={() => {
|
|
window.open('https://github.com/ConardLi/easy-dataset', '_blank');
|
|
toggleDrawer();
|
|
}}
|
|
sx={styles.getDrawerListItemButtonStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<GitHubIcon sx={styles.getIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('common.viewOnGitHub', 'View on GitHub')}
|
|
primaryTypographyProps={styles.listItemTextStyles}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
<ListItem disablePadding sx={{ mb: 1 }}>
|
|
<Box sx={{ px: 1, width: '100%' }}>
|
|
<UpdateChecker />
|
|
</Box>
|
|
</ListItem>
|
|
</Box>
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
}
|