316 lines
11 KiB
JavaScript
316 lines
11 KiB
JavaScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Menu, MenuItem, ListItemIcon, ListItemText, Divider } from '@mui/material';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Link from 'next/link';
|
|
import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
|
|
import ImageIcon from '@mui/icons-material/Image';
|
|
import DatasetOutlinedIcon from '@mui/icons-material/DatasetOutlined';
|
|
import ChatIcon from '@mui/icons-material/Chat';
|
|
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
|
import ScienceOutlinedIcon from '@mui/icons-material/ScienceOutlined';
|
|
import StorageIcon from '@mui/icons-material/Storage';
|
|
import AssessmentOutlinedIcon from '@mui/icons-material/AssessmentOutlined';
|
|
import PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay';
|
|
import VisibilityIcon from '@mui/icons-material/Visibility';
|
|
import * as styles from './styles';
|
|
|
|
/**
|
|
* DesktopMenus 缂備礁瀚▎?
|
|
* 婵℃鐭傚鎵博椤栨稑浜鹃柛瀣矎瑜板秹宕￠弴顏嗙闁告牕鎳庨幆鍫ュ极閻楀牆绁︽繝褎鍔戦埀顑跨劍閺嗙喖骞戦鈧▔锔剧不閿涘嫭鍊為柕鍡曠劍濞叉寧寰勫顐ょ憦濞戞搩浜ｈぐ宥夊础?
|
|
*/
|
|
export default function DesktopMenus({
|
|
theme,
|
|
menuState,
|
|
isMenuOpen,
|
|
handleMenuClose,
|
|
currentProject,
|
|
onNavigateStart
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
{/* 闁轰胶澧楀畵浣糕攦閹邦垰缍呴柛?*/}
|
|
<Menu
|
|
anchorEl={menuState.anchorEl}
|
|
open={isMenuOpen('source')}
|
|
onClose={handleMenuClose}
|
|
hideBackdrop
|
|
disableScrollLock
|
|
sx={{ pointerEvents: 'none' }}
|
|
aria-label={t('common.dataSource', 'Data source menu')}
|
|
PaperProps={{
|
|
elevation: 8,
|
|
sx: {
|
|
...styles.getMenuPaperStyles(theme),
|
|
pointerEvents: 'auto'
|
|
},
|
|
onMouseLeave: handleMenuClose
|
|
}}
|
|
transformOrigin={{ horizontal: 'center', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
|
|
MenuListProps={{
|
|
dense: false,
|
|
onMouseLeave: handleMenuClose,
|
|
sx: styles.menuListStyles,
|
|
role: 'menu'
|
|
}}
|
|
transitionDuration={200}
|
|
>
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/text-split`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
role="menuitem"
|
|
sx={styles.getMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<DescriptionOutlinedIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('textSplit.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
<Divider sx={{ my: 0.75, mx: 1.5 }} />
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/images`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
role="menuitem"
|
|
sx={styles.getMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.listItemIconStyles}>
|
|
<ImageIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('images.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
{/* 闁轰胶澧楀畵渚€姊块崱娆樺悁闁荤偛妫滆ぐ宥夊础?*/}
|
|
<Menu
|
|
anchorEl={menuState.anchorEl}
|
|
open={isMenuOpen('dataset')}
|
|
onClose={handleMenuClose}
|
|
hideBackdrop
|
|
disableScrollLock
|
|
sx={{ pointerEvents: 'none' }}
|
|
PaperProps={{
|
|
elevation: 8,
|
|
sx: {
|
|
...styles.getSimpleMenuPaperStyles(theme),
|
|
pointerEvents: 'auto'
|
|
},
|
|
onMouseLeave: handleMenuClose
|
|
}}
|
|
transformOrigin={{ horizontal: 'center', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
|
|
MenuListProps={{
|
|
dense: true,
|
|
onMouseLeave: handleMenuClose,
|
|
sx: styles.simpleMenuListStyles
|
|
}}
|
|
>
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/datasets`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<DatasetOutlinedIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('datasets.singleTurn', '单轮问答数据集')}
|
|
primaryTypographyProps={styles.smallListItemTextStyles}
|
|
/>
|
|
</MenuItem>
|
|
<Divider sx={{ my: 0.5, mx: 1 }} />
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/multi-turn`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<ChatIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('datasets.multiTurn', '多轮对话数据集')}
|
|
primaryTypographyProps={styles.smallListItemTextStyles}
|
|
/>
|
|
</MenuItem>
|
|
<Divider sx={{ my: 0.5, mx: 1 }} />
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/image-datasets`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<ImageIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={t('datasets.imageQA', '图片问答数据集')}
|
|
primaryTypographyProps={styles.smallListItemTextStyles}
|
|
/>
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
{/* 閻犲洤瀚崣濠囨嚕濠婂啫绀?*/}
|
|
<Menu
|
|
anchorEl={menuState.anchorEl}
|
|
open={isMenuOpen('eval')}
|
|
onClose={handleMenuClose}
|
|
hideBackdrop
|
|
disableScrollLock
|
|
sx={{ pointerEvents: 'none' }}
|
|
PaperProps={{
|
|
elevation: 8,
|
|
sx: {
|
|
...styles.getSimpleMenuPaperStyles(theme),
|
|
pointerEvents: 'auto'
|
|
},
|
|
onMouseLeave: handleMenuClose
|
|
}}
|
|
transformOrigin={{ horizontal: 'center', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
|
|
MenuListProps={{
|
|
dense: true,
|
|
onMouseLeave: handleMenuClose,
|
|
sx: styles.simpleMenuListStyles
|
|
}}
|
|
>
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/eval-datasets`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<AssessmentOutlinedIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('eval.datasets')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
<Divider sx={{ my: 0.5, mx: 1 }} />
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/eval-tasks`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<PlaylistPlayIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('eval.tasks')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
<Divider sx={{ my: 0.5, mx: 1 }} />
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/blind-test-tasks`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<VisibilityIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('blindTest.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
{/* 闁哄洦娼欓ˇ鍧楁嚕濠婂啫绀?*/}
|
|
<Menu
|
|
anchorEl={menuState.anchorEl}
|
|
open={isMenuOpen('more')}
|
|
onClose={handleMenuClose}
|
|
hideBackdrop
|
|
disableScrollLock
|
|
sx={{ pointerEvents: 'none' }}
|
|
PaperProps={{
|
|
elevation: 8,
|
|
sx: {
|
|
...styles.getSimpleMenuPaperStyles(theme),
|
|
pointerEvents: 'auto'
|
|
},
|
|
onMouseLeave: handleMenuClose
|
|
}}
|
|
transformOrigin={{ horizontal: 'center', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
|
|
MenuListProps={{
|
|
dense: true,
|
|
onMouseLeave: handleMenuClose,
|
|
sx: styles.simpleMenuListStyles
|
|
}}
|
|
>
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/settings`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<SettingsOutlinedIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('settings.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
<Divider sx={{ my: 0.5, mx: 1 }} />
|
|
<MenuItem
|
|
component={Link}
|
|
href={`/projects/${currentProject}/playground`}
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<ScienceOutlinedIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('playground.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
<Divider sx={{ my: 0.5, mx: 1 }} />
|
|
<MenuItem
|
|
component={Link}
|
|
href="/dataset-square"
|
|
onClick={() => {
|
|
onNavigateStart?.();
|
|
handleMenuClose();
|
|
}}
|
|
sx={styles.getSimpleMenuItemStyles(theme)}
|
|
>
|
|
<ListItemIcon sx={styles.smallListItemIconStyles}>
|
|
<StorageIcon fontSize="small" sx={styles.getPrimaryIconColorStyles(theme)} />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t('datasetSquare.title')} primaryTypographyProps={styles.smallListItemTextStyles} />
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
);
|
|
}
|