#application-dev

zhou zhou

2026-01-10 24bee1a669c3f01f4c3ce7c6f4f4e2e37fe3dfe2

 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 [];
};
};