Web页面优化

lbq

16 小时以前 56ca28233a84c5aa3ca93cae266b2d008ea348e1

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