261 lines
8.3 KiB
JavaScript
261 lines
8.3 KiB
JavaScript
'use client';
|
|
|
|
import {
|
|
Box,
|
|
IconButton,
|
|
ToggleButton,
|
|
Tooltip,
|
|
Divider,
|
|
Autocomplete,
|
|
TextField,
|
|
Menu,
|
|
MenuItem
|
|
} from '@mui/material';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import ViewModuleIcon from '@mui/icons-material/ViewModule';
|
|
import ViewListIcon from '@mui/icons-material/ViewList';
|
|
import DeleteIcon from '@mui/icons-material/DeleteOutline'; // 使用 Outline 版本更精致
|
|
import CheckCircleIcon from '@mui/icons-material/CheckCircleOutline'; // 统一使用 Outline 风格图标
|
|
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
|
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
import CheckBoxIcon from '@mui/icons-material/CheckBoxOutlineBlank'; // 或者 CheckBox
|
|
import ShortTextIcon from '@mui/icons-material/ShortText';
|
|
import NotesIcon from '@mui/icons-material/Notes';
|
|
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
|
import StorageIcon from '@mui/icons-material/Storage';
|
|
import FileDownloadIcon from '@mui/icons-material/FileDownload';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useTheme, alpha } from '@mui/material/styles';
|
|
import { useState } from 'react';
|
|
|
|
import {
|
|
ToolbarContainer,
|
|
FilterGroup,
|
|
FilterButton,
|
|
SearchWrapper,
|
|
StyledInputBase,
|
|
ActionGroup,
|
|
ActionButton,
|
|
DeleteActionButton,
|
|
StyledToggleButtonGroup
|
|
} from './EvalToolbar.styles';
|
|
|
|
const STATS_CONFIG = [
|
|
{ key: 'true_false', icon: CheckCircleIcon, color: 'success' },
|
|
{ key: 'single_choice', icon: RadioButtonCheckedIcon, color: 'primary' },
|
|
{ key: 'multiple_choice', icon: CheckBoxIcon, color: 'secondary' },
|
|
{ key: 'short_answer', icon: ShortTextIcon, color: 'warning' },
|
|
{ key: 'open_ended', icon: NotesIcon, color: 'info' }
|
|
];
|
|
|
|
export default function EvalToolbar({
|
|
keyword,
|
|
onKeywordChange,
|
|
viewMode,
|
|
onViewModeChange,
|
|
selectedCount,
|
|
onDeleteSelected,
|
|
stats,
|
|
questionType,
|
|
onTypeChange,
|
|
tags,
|
|
onTagsChange,
|
|
onImport,
|
|
onBuiltinImport,
|
|
onExport
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
|
|
const [importAnchorEl, setImportAnchorEl] = useState(null);
|
|
|
|
const handleImportClick = event => {
|
|
setImportAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleImportClose = () => {
|
|
setImportAnchorEl(null);
|
|
};
|
|
|
|
const handleCustomImport = () => {
|
|
handleImportClose();
|
|
onImport?.();
|
|
};
|
|
|
|
const handleBuiltinImport = () => {
|
|
handleImportClose();
|
|
onBuiltinImport?.();
|
|
};
|
|
|
|
const tagOptions = stats?.byTag
|
|
? Object.keys(stats.byTag).map(tag => ({
|
|
label: tag,
|
|
count: stats.byTag[tag]
|
|
}))
|
|
: [];
|
|
|
|
return (
|
|
<ToolbarContainer elevation={0} variant="outlined">
|
|
{/* 顶部：题型统计筛选 */}
|
|
<FilterGroup>
|
|
{stats &&
|
|
STATS_CONFIG.map(({ key, icon: Icon, color }) => {
|
|
const count = stats.byType?.[key] || 0;
|
|
const isActive = questionType === key;
|
|
|
|
return (
|
|
<FilterButton
|
|
key={key}
|
|
startIcon={<Icon sx={{ fontSize: 18 }} />}
|
|
active={isActive}
|
|
colorType={color}
|
|
onClick={() => onTypeChange(isActive ? '' : key)}
|
|
>
|
|
{t(`eval.questionTypes.${key}`)}
|
|
<Box component="span" sx={{ ml: 0.8, opacity: 0.9, fontSize: '0.8em' }}>
|
|
({count})
|
|
</Box>
|
|
</FilterButton>
|
|
);
|
|
})}
|
|
</FilterGroup>
|
|
|
|
<Divider sx={{ opacity: 0.6 }} />
|
|
|
|
{/* 底部：筛选和操作 */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 2,
|
|
flexWrap: 'wrap'
|
|
}}
|
|
>
|
|
{/* 左侧：筛选器组 */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1, minWidth: 300 }}>
|
|
{/* 搜索框 */}
|
|
<SearchWrapper>
|
|
<IconButton sx={{ p: '8px' }} aria-label="search" disabled>
|
|
<SearchIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
|
|
</IconButton>
|
|
<StyledInputBase
|
|
placeholder={t('eval.searchPlaceholder', '搜索题目内容...')}
|
|
value={keyword}
|
|
onChange={e => onKeywordChange(e.target.value)}
|
|
/>
|
|
</SearchWrapper>
|
|
|
|
{/* 标签筛选 */}
|
|
<Autocomplete
|
|
multiple
|
|
size="small"
|
|
options={tagOptions}
|
|
getOptionLabel={option => `${option.label} (${option.count})`}
|
|
value={tagOptions.filter(o => tags.includes(o.label))}
|
|
onChange={(e, newValue) => onTagsChange(newValue.map(v => v.label))}
|
|
renderInput={params => (
|
|
<TextField
|
|
{...params}
|
|
placeholder={tags.length === 0 ? t('eval.tags', '标签') : ''}
|
|
size="small"
|
|
sx={{
|
|
width: 280,
|
|
'& .MuiOutlinedInput-root': {
|
|
borderRadius: 1.5,
|
|
backgroundColor: 'background.paper',
|
|
minHeight: 42,
|
|
fieldset: {
|
|
borderColor: theme.palette.divider
|
|
},
|
|
'&:hover fieldset': {
|
|
borderColor: theme.palette.text.secondary
|
|
},
|
|
'&.Mui-focused fieldset': {
|
|
borderColor: theme.palette.primary.main,
|
|
borderWidth: 1,
|
|
boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.1)}`
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
sx={{
|
|
'& .MuiAutocomplete-tag': {
|
|
height: 24,
|
|
borderRadius: 1
|
|
}
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 右侧：操作按钮组 */}
|
|
<ActionGroup>
|
|
{/* 导入按钮下拉菜单 */}
|
|
<ActionButton
|
|
variant="outlined"
|
|
startIcon={<UploadFileIcon />}
|
|
endIcon={<KeyboardArrowDownIcon />}
|
|
onClick={handleImportClick}
|
|
>
|
|
{t('common.import', '导入')}
|
|
</ActionButton>
|
|
<Menu
|
|
anchorEl={importAnchorEl}
|
|
open={Boolean(importAnchorEl)}
|
|
onClose={handleImportClose}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right'
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right'
|
|
}}
|
|
>
|
|
<MenuItem onClick={handleCustomImport} disableRipple>
|
|
<UploadFileIcon fontSize="small" sx={{ mr: 1.5, color: 'text.secondary' }} />
|
|
{t('evalDatasets.import.custom', '导入自定义数据集')}
|
|
</MenuItem>
|
|
<MenuItem onClick={handleBuiltinImport} disableRipple>
|
|
<StorageIcon fontSize="small" sx={{ mr: 1.5, color: 'text.secondary' }} />
|
|
{t('evalDatasets.import.builtin', '导入内置数据集')}
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
{/* 导出按钮 */}
|
|
<ActionButton variant="outlined" startIcon={<FileDownloadIcon />} onClick={onExport}>
|
|
{t('common.export', '导出')}
|
|
</ActionButton>
|
|
|
|
{selectedCount > 0 && (
|
|
<DeleteActionButton variant="soft" startIcon={<DeleteIcon />} onClick={onDeleteSelected}>
|
|
{t('eval.deleteSelectedCount', `删除选中 (${selectedCount})`, { count: selectedCount })}
|
|
</DeleteActionButton>
|
|
)}
|
|
|
|
<Divider orientation="vertical" flexItem sx={{ height: 24, alignSelf: 'center', mx: 0.5 }} />
|
|
|
|
<StyledToggleButtonGroup
|
|
value={viewMode}
|
|
exclusive
|
|
onChange={(e, value) => value && onViewModeChange(value)}
|
|
size="small"
|
|
>
|
|
<ToggleButton value="card" aria-label="card view">
|
|
<Tooltip title={t('eval.cardView', '卡片视图')}>
|
|
<ViewModuleIcon fontSize="small" />
|
|
</Tooltip>
|
|
</ToggleButton>
|
|
<ToggleButton value="list" aria-label="list view">
|
|
<Tooltip title={t('eval.listView', '列表视图')}>
|
|
<ViewListIcon fontSize="small" />
|
|
</Tooltip>
|
|
</ToggleButton>
|
|
</StyledToggleButtonGroup>
|
|
</ActionGroup>
|
|
</Box>
|
|
</ToolbarContainer>
|
|
);
|
|
}
|