113 lines
3.6 KiB
JavaScript
113 lines
3.6 KiB
JavaScript
|
'use client';
|
|||
|
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Box, IconButton, Tooltip } from '@mui/material';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
|
|||
|
|
import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
|
|||
|
|
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
|||
|
|
import GitHubIcon from '@mui/icons-material/GitHub';
|
|||
|
|
import BarChartIcon from '@mui/icons-material/BarChart';
|
|||
|
|
import LanguageSwitcher from '../LanguageSwitcher';
|
|||
|
|
import UpdateChecker from '../UpdateChecker';
|
|||
|
|
import TaskIcon from '../TaskIcon';
|
|||
|
|
import ModelSelect from '../ModelSelect';
|
|||
|
|
import * as styles from './styles';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* ActionButtons 组件
|
|||
|
|
* 右侧操作区按钮：语言切换、主题切换、文档、GitHub、更新检查
|
|||
|
|
*/
|
|||
|
|
export default function ActionButtons({
|
|||
|
|
theme,
|
|||
|
|
resolvedTheme,
|
|||
|
|
toggleTheme,
|
|||
|
|
isProjectDetail,
|
|||
|
|
currentProject,
|
|||
|
|
onActionAreaEnter
|
|||
|
|
}) {
|
|||
|
|
const { t, i18n } = useTranslation();
|
|||
|
|
const isZhLanguage = String(i18n.language || '')
|
|||
|
|
.toLowerCase()
|
|||
|
|
.startsWith('zh');
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box sx={styles.actionAreaStyles} onMouseEnter={onActionAreaEnter}>
|
|||
|
|
{isProjectDetail && <ModelSelect projectId={currentProject} />}
|
|||
|
|
{isProjectDetail && <TaskIcon theme={theme} projectId={currentProject} />}
|
|||
|
|
|
|||
|
|
{/* Monitoring Dashboard - Only visible on Home page */}
|
|||
|
|
{!isProjectDetail && (
|
|||
|
|
<Tooltip title={t('monitoring.title', 'Resource Monitoring')}>
|
|||
|
|
<IconButton component="a" href="/monitoring" size="medium" sx={styles.getIconButtonStyles(theme)}>
|
|||
|
|
<BarChartIcon />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Language Switcher - Always visible */}
|
|||
|
|
<LanguageSwitcher />
|
|||
|
|
|
|||
|
|
{/* Theme Toggle - Always visible */}
|
|||
|
|
<Tooltip
|
|||
|
|
title={
|
|||
|
|
resolvedTheme === 'dark'
|
|||
|
|
? t('theme.switchToLight', 'Switch to light mode')
|
|||
|
|
: t('theme.switchToDark', 'Switch to dark mode')
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<IconButton
|
|||
|
|
onClick={toggleTheme}
|
|||
|
|
size="medium"
|
|||
|
|
aria-label={
|
|||
|
|
resolvedTheme === 'dark'
|
|||
|
|
? t('theme.switchToLight', 'Switch to light mode')
|
|||
|
|
: t('theme.switchToDark', 'Switch to dark mode')
|
|||
|
|
}
|
|||
|
|
sx={styles.getIconButtonStyles(theme)}
|
|||
|
|
>
|
|||
|
|
{resolvedTheme === 'dark' ? (
|
|||
|
|
<LightModeOutlinedIcon fontSize="small" />
|
|||
|
|
) : (
|
|||
|
|
<DarkModeOutlinedIcon fontSize="small" />
|
|||
|
|
)}
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
|
|||
|
|
{/* Documentation - Hide below xl */}
|
|||
|
|
<Tooltip title={t('documentation')}>
|
|||
|
|
<IconButton
|
|||
|
|
component="a"
|
|||
|
|
href={isZhLanguage ? 'https://docs.easy-dataset.com/' : 'https://docs.easy-dataset.com/ed/en'}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
size="medium"
|
|||
|
|
sx={styles.getIconButtonStyles(theme)}
|
|||
|
|
>
|
|||
|
|
<HelpOutlineIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
|
|||
|
|
{/* GitHub - Hide at larger tablet screens and below */}
|
|||
|
|
<Tooltip title={t('common.visitGitHub', 'View on GitHub')}>
|
|||
|
|
<IconButton
|
|||
|
|
component="a"
|
|||
|
|
href="https://github.com/ConardLi/easy-dataset"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
size="medium"
|
|||
|
|
aria-label={t('common.visitGitHub', 'Open GitHub repository')}
|
|||
|
|
sx={styles.getIconButtonStyles(theme)}
|
|||
|
|
>
|
|||
|
|
<GitHubIcon fontSize="small" />
|
|||
|
|
</IconButton>
|
|||
|
|
</Tooltip>
|
|||
|
|
|
|||
|
|
{/* Update Checker - Hide below xl */}
|
|||
|
|
<Box sx={{ display: { xs: 'none', xl: 'flex' } }}>
|
|||
|
|
<UpdateChecker />
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|