Web页面优化

lbq

19 小时以前 56ca28233a84c5aa3ca93cae266b2d008ea348e1

 rsf-admin/src/layout/SubMenu.jsx

@@ -9,33 +9,104 @@
    Collapse,
    Tooltip,
} from '@mui/material';
import ExpandMore from '@mui/icons-material/ExpandMore';
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 } = 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' }}>
            <Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                <ListItemIcon sx={{ minWidth: 40, color: 'text.secondary', display: 'flex', alignItems: 'center' }}>
        <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>
                <Typography variant="inherit" color="textSecondary" sx={{ ml: 1, display: 'flex', alignItems: 'center' }}>
                    {translate(name)}
                </Typography>
                {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>
            <Box sx={{ display: 'flex', alignItems: 'center', minWidth: 24 }}>
                {isOpen ? <KeyboardArrowDownIcon fontSize="small" sx={{color: 'text.secondary'}} /> : <KeyboardArrowRightIcon fontSize="small" sx={{color: 'text.secondary'}} />}
            </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 (
        <div>
        <Box sx={{ width: '100%' }}>
            {sidebarIsOpen || isOpen ? (
                header
            ) : (
@@ -48,27 +119,18 @@
                    dense={dense}
                    component="div"
                    disablePadding
                    // sx={{
                    //     '& .MuiMenuItem-root': {
                    //         transition:
                    //             'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
                    //         paddingLeft: theme =>
                    //             sidebarIsOpen
                    //                 ? theme.spacing(4)
                    //                 : theme.spacing(2),
                    //     },
                    //     // 显示二级菜单的icon
                    //     '& .RaMenuItemLink-icon': {
                    //         visibility: 'visible !important',
                    //         minWidth: '24px'
                    //     }
                    // }}
                    sx={{
                        paddingLeft: 2,
                        '& .MuiMenuItem-root': {
                            paddingLeft: 3,
                        },
                    }}
                >
                    {children}
                </List>
            </Collapse>
        </div>
        </Box>
    );
};

export default SubMenu;
export default SubMenu;