first-update

easy-dataset-main/components/Navbar/DesktopMenus.js

@@ -0,0 +1,315 @@
+'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>
+    </>
+  );
+}