Web页面优化

lbq

21 小时以前 56ca28233a84c5aa3ca93cae266b2d008ea348e1

 rsf-admin/src/layout/AppBar.jsx

@@ -1,8 +1,7 @@
import * as React from 'react';
import { AppBar, TitlePortal } from 'react-admin';
import { AppBar } from 'react-admin';
import { Box, useMediaQuery } from '@mui/material';

// https://www.base64-image.de/
import Logo from './Logo';
import { AppBarToolbar } from './AppBarToolbar';

@@ -10,14 +9,37 @@
    const isLargeEnough = useMediaQuery(theme =>
        theme.breakpoints.up('sm')
    );
    
    return (
        <AppBar
            color="secondary"
            toolbar={<AppBarToolbar />}
            sx={{
                // 隐藏最左侧的菜单按钮
                '& .RaAppBar-menuButton': {
                    display: 'none !important',
                },
                // 调整工具栏布局
                '& .RaAppBar-toolbar': {
                    paddingLeft: '4px !important', // 最小左边距
                    justifyContent: 'flex-start',
                    gap: 2, // 元素之间的间距
                }
            }}
        >
            <TitlePortal />
            {isLargeEnough && <Logo />}
            {isLargeEnough && <Box component="span" sx={{ flex: 1 }} />}
            {/* Logo 完全靠左 */}
            {isLargeEnough && (
                <Box sx={{ 
                    display: 'flex', 
                    alignItems: 'center',
                    minWidth: 'auto', // 不限制宽度
                }}>
                    <Logo />
                </Box>
            )}
            
            {/* 弹性空间将工具栏按钮推到右侧 */}
            <Box component="span" sx={{ flex: 1 }} />
        </AppBar>
    );
};