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/MyMenu.jsx | 166 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 131 insertions(+), 35 deletions(-)
diff --git a/rsf-admin/src/layout/MyMenu.jsx b/rsf-admin/src/layout/MyMenu.jsx
index f671891..9e6b379 100644
--- a/rsf-admin/src/layout/MyMenu.jsx
+++ b/rsf-admin/src/layout/MyMenu.jsx
@@ -59,45 +59,106 @@
if (IconComponent) {
return <IconComponent />;
} else {
- return <KeyboardArrowDownIcon />
+ return <KeyboardArrowDownIcon />;
}
};
- const generateMenu = (permissions) => {
- return permissions.map((node) => {
- if (node.children) {
- return (
- <SubMenu
- key={node.id}
- handleToggle={() => handleToggle(node.route)}
- isOpen={state[node.route]}
- name={node.name}
- dense={dense}
- icon={getIcon(node.icon)}
- >
- {generateMenu(node.children)}
- </SubMenu>
- );
- } else {
- if (node.component) {
- return (
- <MenuItemLink
- key={node.id}
- to={node.component} // correspond to Resource.name
- state={{ _scrollToTop: true }}
- // primaryText={translate(`resources.orders.name`, {
- // smart_count: 2,
- // })}
- primaryText={node.name}
- leftIcon={getIcon(node.icon)}
- dense={dense}
- // sx={{ '& .RaMenuItemLink-icon': { visibility: 'hidden' } }}
- />
- );
- }
+ // 妫�鏌ヨ彍鍗曟槸鍚﹁閫変腑
+ const isSelected = (component) => {
+ if (!component) return false;
+ const currentPath = location.pathname.replace("/", "");
+ return currentPath === component;
+ };
+
+ // 妫�鏌ョ埗绾ц彍鍗曟槸鍚︽湁瀛愯彍鍗曡閫変腑
+ const hasSelectedChild = (node) => {
+ if (!node.children) return false;
+ return node.children.some(child => {
+ if (child.children) {
+ return hasSelectedChild(child);
}
+ return isSelected(child.component);
});
};
+
+ // 鍦� MyMenu 缁勪欢鐨� generateMenu 鍑芥暟涓紝纭繚 MenuItemLink 涔熷乏瀵归綈
+ const generateMenu = (permissions) => {
+ return permissions.map((node) => {
+ if (node.children) {
+ const selected = isSelected(node.component) || hasSelectedChild(node);
+ return (
+ <SubMenu
+ key={node.id}
+ handleToggle={() => handleToggle(node.route)}
+ isOpen={state[node.route]}
+ name={node.name}
+ dense={dense}
+ icon={getIcon(node.icon)}
+ isSelected={selected}
+ >
+ {generateMenu(node.children)}
+ </SubMenu>
+ );
+ } else {
+ if (node.component) {
+ const selected = isSelected(node.component);
+ // 鍦� generateMenu 鍑芥暟涓殑 MenuItemLink 閮ㄥ垎
+ return (
+ <MenuItemLink
+ key={node.id}
+ to={node.component}
+ state={{ _scrollToTop: true }}
+ primaryText={translate(node.name)}
+ leftIcon={getIcon(node.icon)}
+ dense={dense}
+ sx={{
+ backgroundColor: selected ? 'rgba(25, 118, 210, 0.08) !important' : 'transparent',
+ color: selected ? '#1976d2 !important' : 'text.secondary',
+ '&:hover': {
+ backgroundColor: selected ? 'rgba(25, 118, 210, 0.12) !important' : 'rgba(0, 0, 0, 0.04)',
+ },
+ borderLeft: 'none',
+ borderRadius: '4px',
+ margin: '2px 8px',
+ width: 'calc(100% - 16px)',
+ transition: 'all 0.2s ease-in-out',
+
+ // 缂╁皬鏁翠綋闂磋窛
+ padding: '6px 8px', // 鍑忓皯鍐呰竟璺�
+ minHeight: '36px', // 绋嶅井鍑忓皬楂樺害
+
+ '& .RaMenuItemLink-icon': {
+ color: selected ? '#1976d2 !important' : 'text.secondary',
+ minWidth: '32px !important', // 缂╁皬鍥炬爣鍖哄煙瀹藉害
+ marginRight: '4px', // 缂╁皬鍥炬爣鍜屾枃瀛楅棿璺�
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center', // 鍥炬爣灞呬腑鏄剧ず
+ },
+
+ fontWeight: selected ? 600 : 400,
+
+ // 纭繚鏂囧瓧鍐呭宸﹀榻�
+ '& .MuiListItemText-root': {
+ margin: 0,
+ '& .MuiTypography-root': {
+ textAlign: 'left',
+ justifyContent: 'flex-start',
+ fontSize: '0.875rem', // 绋嶅井鍑忓皬瀛椾綋澶у皬
+ lineHeight: '1.3',
+ }
+ },
+ }}
+ />
+ );
+ }
+ }
+ });
+ };
+
+ // 妫�鏌ュ浐瀹氳彍鍗曟槸鍚﹂�変腑
+ const isDashboardSelected = location.pathname === '/dashboard';
+ const isSettingsSelected = location.pathname === '/settings';
return isPending ? (
<div>Waiting for permissions...</div>
@@ -112,19 +173,54 @@
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
+ // 鑿滃崟瀹瑰櫒鏍峰紡
+ '& .MuiMenuItem-root': {
+ boxSizing: 'border-box',
+ }
}}
>
<Menu.Item
to="/dashboard"
primaryText="menu.dashboard"
leftIcon={<DashboardIcon />}
+ sx={{
+ backgroundColor: isDashboardSelected ? 'rgba(25, 118, 210, 0.08) !important' : 'transparent',
+ color: isDashboardSelected ? '#1976d2 !important' : 'text.secondary',
+ '&:hover': {
+ backgroundColor: isDashboardSelected ? 'rgba(25, 118, 210, 0.12) !important' : 'rgba(0, 0, 0, 0.04)',
+ },
+ borderLeft: isDashboardSelected ? '3px solid #1976d2' : '3px solid transparent',
+ borderRadius: '0 4px 4px 0',
+ margin: '1px 0',
+ width: '100%',
+ transition: 'all 0.2s ease-in-out',
+ '& .MuiListItemIcon-root': {
+ color: isDashboardSelected ? '#1976d2 !important' : 'text.secondary',
+ minWidth: 40,
+ }
+ }}
/>
{permissions && generateMenu(permissions)}
- {/* <Menu.ResourceItems /> */}
<Menu.Item
to="/settings"
primaryText="menu.settings"
leftIcon={<PersonIcon />}
+ sx={{
+ backgroundColor: isSettingsSelected ? 'rgba(25, 118, 210, 0.08) !important' : 'transparent',
+ color: isSettingsSelected ? '#1976d2 !important' : 'text.secondary',
+ '&:hover': {
+ backgroundColor: isSettingsSelected ? 'rgba(25, 118, 210, 0.12) !important' : 'rgba(0, 0, 0, 0.04)',
+ },
+ borderLeft: isSettingsSelected ? '3px solid #1976d2' : '3px solid transparent',
+ borderRadius: '0 4px 4px 0',
+ margin: '1px 0',
+ width: '100%',
+ transition: 'all 0.2s ease-in-out',
+ '& .MuiListItemIcon-root': {
+ color: isSettingsSelected ? '#1976d2 !important' : 'text.secondary',
+ minWidth: 40,
+ }
+ }}
/>
</Box>
);
@@ -173,4 +269,4 @@
}
return [];
-};
+};
\ No newline at end of file
--
Gitblit v1.9.1