#tabsBar

zhou zhou

3 天以前 901af450e3d1fa740d183cf16b0283255dff084f

#tabsBar

 rsf-admin/src/layout/MyMenu.jsx

@@ -84,75 +84,75 @@
  // 在 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',
                                }
                            },
                        }}
                    />
                );
            }
      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',
                  }
                },
              }}
            />
          );
        }
      }
    });
  };


 rsf-admin/src/layout/index.jsx

@@ -31,7 +31,8 @@
      <Box sx={{
        position: 'fixed',
        top: 48,
        left: sidebarWidth,
        // left: 0,
        left: sidebarWidth + 5,
        right: 0,
        zIndex: 1100,
        transition: (theme) =>

 rsf-admin/src/page/components/PageDrawer.jsx

@@ -29,10 +29,16 @@
            open={!!drawerVal}
            anchor="right"
            onClose={handleClose}
            sx={{ zIndex: 100 }}
            sx={{
                zIndex: 100,
                '& .MuiDrawer-paper': {
                    top: '86px', // AppBar(50px) + TabsBar(36px)
                    height: 'calc(100% - 86px)',
                }
            }}
        >
            {!!drawerVal && (
                <Box pt={5} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }}>
                <Box pt={2} width={{ xs: '100vW', sm: width }} mt={{ xs: 2, sm: 1 }}>
                    <Stack direction="row" p={2}>
                        <Typography variant="h6" flex="1">
                            {title}