From 56ca28233a84c5aa3ca93cae266b2d008ea348e1 Mon Sep 17 00:00:00 2001
From: lbq <1065079612@qq.com>
Date: 星期三, 24 十二月 2025 09:54:13 +0800
Subject: [PATCH] Web页面优化
---
rsf-admin/src/layout/SubMenu.jsx | 120 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 91 insertions(+), 29 deletions(-)
diff --git a/rsf-admin/src/layout/SubMenu.jsx b/rsf-admin/src/layout/SubMenu.jsx
index a0e937e..7296516 100644
--- a/rsf-admin/src/layout/SubMenu.jsx
+++ b/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),
- // },
- // // 鏄剧ず浜岀骇鑿滃崟鐨刬con
- // '& .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;
\ No newline at end of file
--
Gitblit v1.9.1