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>
|
||
);
|
||
}
|