refactor: 更新 Header、LogoSection 和 Logo 组件以支持迷你模式，优化样式和布局

Author: MartialBE

web/src/layout/MainLayout/Header/index.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import { useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
@@ -12,6 +13,7 @@ import Profile from './Profile';
 import ThemeButton from 'ui-component/ThemeButton';
 import I18nButton from 'ui-component/i18nButton';
 import { NoticeButton } from 'ui-component/notice';
+import { drawerWidth, miniDrawerWidth } from 'store/constant';
 
 // ==============================|| MAIN NAVBAR / HEADER ||============================== //
 
@@ -20,20 +22,36 @@ const Header = ({ handleLeftDrawerToggle, toggleProfileDrawer }) => {
   const matchUpMd = useMediaQuery(theme.breakpoints.up('md'));
   const location = useLocation();
   const isConsoleRoute = location.pathname.startsWith('/panel');
+  const leftDrawerOpened = useSelector((state) => state.customization.opened);
 
   return (
     <>
       <Box
         sx={{
           display: 'flex',
           alignItems: 'center',
+          ...(matchUpMd && {
+            width: `${leftDrawerOpened ? drawerWidth : miniDrawerWidth}px`,
+            ml: leftDrawerOpened ? 0 : -3,
+            transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1)'
+          }),
           [theme.breakpoints.down('md')]: {
             width: 'auto'
           }
         }}
       >
-        <Box component="span" sx={{ display: { xs: 'none', md: 'block' }, mr: 1 }}>
-          <LogoSection />
+        <Box
+          component="span"
+          sx={{
+            display: { xs: 'none', md: 'flex' },
+            alignItems: 'center',
+            justifyContent: leftDrawerOpened ? 'flex-start' : 'center',
+            width: '100%',
+            overflow: 'visible',
+            transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)'
+          }}
+        >
+          <LogoSection isMini={!leftDrawerOpened} />
         </Box>
         {!matchUpMd && (
           <IconButton

web/src/layout/MainLayout/LogoSection/index.jsx

@@ -11,7 +11,7 @@ import { MENU_OPEN } from 'store/actions';
 
 // ==============================|| MAIN LOGO ||============================== //
 
-const LogoSection = () => {
+const LogoSection = ({ isMini = false }) => {
   const defaultId = useSelector((state) => state.customization.defaultId);
   const dispatch = useDispatch();
 
@@ -23,13 +23,15 @@ const LogoSection = () => {
       to={config.basename}
       sx={{
         transition: 'all 0.2s ease-in-out',
+        padding: isMini ? 0 : undefined,
+        minWidth: 0,
         '&:hover': {
           opacity: 0.9
         }
       }}
     >
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-        <Logo />
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Logo isMini={isMini} />
       </Box>
     </ButtonBase>
   );

web/src/ui-component/Logo.jsx

@@ -14,7 +14,7 @@ import { useTheme } from '@mui/material/styles';
 
 // ==============================|| LOGO SVG ||============================== //
 
-const Logo = () => {
+const Logo = ({ isMini = false }) => {
   const siteInfo = useSelector((state) => state.siteInfo);
   const theme = useTheme();
   const defaultLogo = theme.palette.mode === 'light' ? logoLight : logoDark;
@@ -25,7 +25,18 @@ const Logo = () => {
 
   const logoToDisplay = siteInfo.logo ? siteInfo.logo : defaultLogo;
 
-  return <img src={logoToDisplay} alt={siteInfo.system_name} height="50" />;
+  return (
+    <img
+      src={logoToDisplay}
+      alt={siteInfo.system_name}
+      style={{
+        height: isMini ? '28px' : '50px',
+        maxWidth: isMini ? '48px' : 'none',
+        objectFit: 'contain',
+        transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)'
+      }}
+    />
+  );
 };
 
 export default Logo;