140 lines
4.6 KiB
JavaScript
140 lines
4.6 KiB
JavaScript
'use client';
|
||
|
||
import React from 'react';
|
||
import { Box, Tabs, Tab } from '@mui/material';
|
||
import { useTranslation } from 'react-i18next';
|
||
import Link from 'next/link';
|
||
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 AssessmentOutlinedIcon from '@mui/icons-material/AssessmentOutlined';
|
||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
||
import * as styles from './styles';
|
||
|
||
/**
|
||
* NavigationTabs 组件
|
||
* 桌面端导航 Tabs，包含数据源、数据蒸馏、问题管理、数据集管理、更多等 Tab
|
||
*/
|
||
export default function NavigationTabs({
|
||
theme,
|
||
pathname,
|
||
currentProject,
|
||
handleMenuOpen,
|
||
handleMenuClose,
|
||
onNavigateStart
|
||
}) {
|
||
const { t } = useTranslation();
|
||
|
||
// 计算当前 Tab 值
|
||
const getCurrentTabValue = () => {
|
||
if (pathname.includes('/settings') || pathname.includes('/playground') || pathname.includes('/datasets-sq')) {
|
||
return 'more';
|
||
}
|
||
if (pathname.includes('/eval-datasets') || pathname.includes('/eval-tasks')) {
|
||
return 'eval';
|
||
}
|
||
if (pathname.includes('/datasets') || pathname.includes('/multi-turn') || pathname.includes('/image-datasets')) {
|
||
return 'datasets';
|
||
}
|
||
if (pathname.includes('/text-split') || pathname.includes('/images')) {
|
||
return 'source';
|
||
}
|
||
return pathname;
|
||
};
|
||
|
||
return (
|
||
<Box sx={styles.navContainerStyles}>
|
||
<Tabs
|
||
value={getCurrentTabValue()}
|
||
textColor="inherit"
|
||
indicatorColor="secondary"
|
||
variant="scrollable"
|
||
scrollButtons="auto"
|
||
allowScrollButtonsMobile
|
||
sx={styles.getTabsStyles(theme)}
|
||
>
|
||
<Tab
|
||
icon={<DescriptionOutlinedIcon fontSize="small" />}
|
||
iconPosition="start"
|
||
label={
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
|
||
{t('common.dataSource')}
|
||
<ArrowDropDownIcon fontSize="small" sx={{ ml: 0.25 }} />
|
||
</Box>
|
||
}
|
||
value="source"
|
||
onMouseEnter={e => handleMenuOpen(e, 'source')}
|
||
sx={styles.tabIconWrapperStyles}
|
||
/>
|
||
<Tab
|
||
icon={<TokenOutlinedIcon fontSize="small" />}
|
||
iconPosition="start"
|
||
label={t('distill.title')}
|
||
value={`/projects/${currentProject}/distill`}
|
||
component={Link}
|
||
href={`/projects/${currentProject}/distill`}
|
||
onClick={() => {
|
||
onNavigateStart?.();
|
||
handleMenuClose();
|
||
}}
|
||
sx={styles.tabIconWrapperStyles}
|
||
/>
|
||
<Tab
|
||
icon={<QuestionAnswerOutlinedIcon fontSize="small" />}
|
||
iconPosition="start"
|
||
label={t('questions.title')}
|
||
value={`/projects/${currentProject}/questions`}
|
||
component={Link}
|
||
href={`/projects/${currentProject}/questions`}
|
||
onClick={() => {
|
||
onNavigateStart?.();
|
||
handleMenuClose();
|
||
}}
|
||
sx={styles.tabIconWrapperStyles}
|
||
/>
|
||
<Tab
|
||
icon={<DatasetOutlinedIcon fontSize="small" />}
|
||
iconPosition="start"
|
||
label={
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
|
||
{t('datasets.management')}
|
||
<ArrowDropDownIcon fontSize="small" sx={{ ml: 0.25 }} />
|
||
</Box>
|
||
}
|
||
value="datasets"
|
||
onMouseEnter={e => handleMenuOpen(e, 'dataset')}
|
||
sx={styles.tabIconWrapperStyles}
|
||
/>
|
||
<Tab
|
||
icon={<AssessmentOutlinedIcon fontSize="small" />}
|
||
iconPosition="start"
|
||
label={
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
|
||
{t('eval.title')}
|
||
<ArrowDropDownIcon fontSize="small" sx={{ ml: 0.25 }} />
|
||
</Box>
|
||
}
|
||
value="eval"
|
||
onMouseEnter={e => handleMenuOpen(e, 'eval')}
|
||
sx={styles.tabIconWrapperStyles}
|
||
/>
|
||
<Tab
|
||
icon={<MoreVertIcon fontSize="small" />}
|
||
iconPosition="start"
|
||
label={
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
|
||
{t('common.more')}
|
||
<ArrowDropDownIcon fontSize="small" sx={{ ml: 0.25 }} />
|
||
</Box>
|
||
}
|
||
onMouseEnter={e => handleMenuOpen(e, 'more')}
|
||
value="more"
|
||
sx={styles.tabIconWrapperStyles}
|
||
/>
|
||
</Tabs>
|
||
</Box>
|
||
);
|
||
}
|