1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
| import * as React from 'react';
| import { ReactElement, ReactNode } from 'react';
| import {
| Box,
| List,
| MenuItem,
| ListItemIcon,
| Typography,
| Collapse,
| Tooltip,
| } from '@mui/material';
| import { useTranslate, useSidebarState } from 'react-admin';
| import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
| import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
| const SubMenu = (props) => {
| const { handleToggle, isOpen, name, icon, children, dense, isSelected = false } = props;
| const translate = useTranslate();
| const [sidebarIsOpen] = useSidebarState();
|
| const header = (
| <MenuItem
| dense={dense}
| onClick={handleToggle}
| sx={{
| display: 'flex',
| alignItems: 'center',
| justifyContent: 'space-between',
| backgroundColor: isSelected ? 'rgba(25, 118, 210, 0.08) !important' : 'transparent',
| color: isSelected ? '#1976d2 !important' : 'text.secondary',
| '&:hover': {
| backgroundColor: isSelected ? 'rgba(25, 118, 210, 0.12) !important' : 'rgba(0, 0, 0, 0.04)',
| },
| borderLeft: 'none',
| borderRadius: '4px',
| margin: '2px 6px',
| width: 'calc(100% - 16px)',
| transition: 'all 0.2s ease-in-out',
| boxSizing: 'border-box',
| minHeight: '40px',
| padding: '8px 12px',
|
| // 确保内容区域完全左对齐
| '& .MuiMenuItem-root': {
| justifyContent: 'flex-start',
| }
| }}
| >
| <Box sx={{
| display: 'flex',
| alignItems: 'center',
| flex: 1,
| justifyContent: 'flex-start',
| minWidth: 0,
| // 确保图标和文字紧密对齐
| gap: '8px',
| }}>
| <ListItemIcon sx={{
| minWidth: '32px !important', // 稍微减小图标区域宽度
| color: isSelected ? '#1976d2 !important' : 'text.secondary',
| display: 'flex',
| alignItems: 'center',
| justifyContent: 'flex-start',
| margin: 0, // 移除margin
| flexShrink: 0,
| }}>
| {icon}
| </ListItemIcon>
| {sidebarIsOpen && (
| <Typography
| variant="inherit"
| sx={{
| color: isSelected ? '#1976d2 !important' : 'text.secondary',
| fontWeight: isSelected ? 600 : 400,
| flex: 1,
| minWidth: 0,
| overflow: 'hidden',
| textOverflow: 'ellipsis',
| whiteSpace: 'nowrap',
| textAlign: 'left',
| lineHeight: '1.5',
| }}
| >
| {translate(name)}
| </Typography>
| )}
| </Box>
|
| {/* 箭头图标 */}
| {sidebarIsOpen && (
| <Box sx={{
| display: 'flex',
| alignItems: 'center',
| minWidth: '20px',
| justifyContent: 'flex-end',
| flexShrink: 0,
| marginLeft: '8px',
| }}>
| {isOpen ?
| <KeyboardArrowDownIcon fontSize="small" sx={{color: isSelected ? '#1976d2 !important' : 'text.secondary'}} /> :
| <KeyboardArrowRightIcon fontSize="small" sx={{color: isSelected ? '#1976d2 !important' : 'text.secondary'}} />
| }
| </Box>
| )}
| </MenuItem>
| );
|
| return (
| <Box sx={{ width: '100%' }}>
| {sidebarIsOpen || isOpen ? (
| header
| ) : (
| <Tooltip title={translate(name)} placement="right">
| {header}
| </Tooltip>
| )}
| <Collapse in={isOpen} timeout="auto" unmountOnExit>
| <List
| dense={dense}
| component="div"
| disablePadding
| sx={{
| paddingLeft: 2,
| '& .MuiMenuItem-root': {
| paddingLeft: 3,
| },
| }}
| >
| {children}
| </List>
| </Collapse>
| </Box>
| );
| };
|
| export default SubMenu;
|
|
