From 24bee1a669c3f01f4c3ce7c6f4f4e2e37fe3dfe2 Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期六, 10 一月 2026 08:34:40 +0800
Subject: [PATCH] #application-dev
---
rsf-admin/src/layout/MyMenu.jsx | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 106 insertions(+), 7 deletions(-)
diff --git a/rsf-admin/src/layout/MyMenu.jsx b/rsf-admin/src/layout/MyMenu.jsx
index 370630a..f42ce06 100644
--- a/rsf-admin/src/layout/MyMenu.jsx
+++ b/rsf-admin/src/layout/MyMenu.jsx
@@ -58,12 +58,34 @@
const IconComponent = getIconComponent(iconStr);
if (IconComponent) {
return <IconComponent />;
+ } else {
+ return <KeyboardArrowDownIcon />;
}
};
+ // 妫�鏌ヨ彍鍗曟槸鍚﹁閫変腑
+ 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}
@@ -72,29 +94,71 @@
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} // correspond to Resource.name
+ to={node.component}
state={{ _scrollToTop: true }}
- // primaryText={translate(`resources.orders.name`, {
- // smart_count: 2,
- // })}
- primaryText={node.name}
+ 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>
@@ -109,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>
);
@@ -170,4 +269,4 @@
}
return [];
-};
+};
\ No newline at end of file
--
Gitblit v1.9.1