feat: 完成页面的基本布局

Author: Ohh-889

src/features/tab/tabHooks.ts

@@ -154,7 +154,7 @@ export function useTabActions() {
 
       const initTabs = _initTabs();
 
-      if (initTabs.length > 0 && !isTabInTabs(tab.id, initTabs)) {
+      if (!initTabs || initTabs.length === 0 || (initTabs.length > 0 && !isTabInTabs(tab.id, initTabs))) {
         dispatch(addTab(tab));
       }
     } else if (!isTabInTabs(tab.id, tabs)) {

src/layouts/base-layout/BaseLayout.tsx

@@ -1,44 +1,131 @@
-import { AdminLayout } from '@sa/materials';
-
-import './index.scss';
+import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
+import type { LayoutMode } from '@sa/materials';
+import { configResponsive } from 'ahooks';
 import { Suspense } from 'react';
 
+import './index.scss';
 import {
   LAYOUT_MODE_HORIZONTAL,
   LAYOUT_MODE_HORIZONTAL_MIX,
   LAYOUT_MODE_VERTICAL,
   LAYOUT_MODE_VERTICAL_MIX
 } from '@/constants/common';
-import { MenuProvider } from '@/features/menu';
+import { MenuProvider, useMixMenuContext } from '@/features/menu';
 import GlobalTab from '@/features/tab/GlobalTab';
-import { getThemeSettings } from '@/features/theme';
-import { getSiderCollapse } from '@/layouts/appStore';
+import { getThemeSettings, setLayoutMode } from '@/features/theme';
 
+import { getFullContent, getMixSiderFixed, getSiderCollapse, setIsMobile, setSiderCollapse } from '../appStore';
 import GlobalContent from '../modules/GlobalContent';
+import GlobalFooter from '../modules/GlobalFooter';
 import GlobalSider from '../modules/GlobalSider';
 import GlobalHeader from '../modules/global-header/GlobalHeader';
 import GlobalMenu from '../modules/global-menu';
 import ThemeDrawer from '../modules/theme-drawer';
 
+configResponsive({ sm: 640 });
+
 const BaseLayout = () => {
+  const dispatch = useAppDispatch();
+
   const themeSettings = useAppSelector(getThemeSettings);
 
   const siderCollapse = useAppSelector(getSiderCollapse);
 
+  const fullContent = useAppSelector(getFullContent);
+
+  const responsive = useResponsive();
+
+  const mixSiderFixed = useAppSelector(getMixSiderFixed);
+
+  const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = useMixMenuContext();
+
   const siderVisible = themeSettings.layout.mode !== LAYOUT_MODE_HORIZONTAL;
 
   const isVerticalMix = themeSettings.layout.mode === LAYOUT_MODE_VERTICAL_MIX;
 
   const isHorizontalMix = themeSettings.layout.mode === LAYOUT_MODE_HORIZONTAL_MIX;
 
+  const layoutMode = themeSettings.layout.mode.includes(LAYOUT_MODE_VERTICAL)
+    ? LAYOUT_MODE_VERTICAL
+    : LAYOUT_MODE_HORIZONTAL;
+
+  const isMobile = !responsive.sm;
+
+  function getSiderWidth() {
+    const { reverseHorizontalMix } = themeSettings.layout;
+
+    const { mixChildMenuWidth, mixWidth, width } = themeSettings.sider;
+
+    if (isHorizontalMix && reverseHorizontalMix) {
+      return isActiveFirstLevelMenuHasChildren ? width : 0;
+    }
+
+    let w = isVerticalMix || isHorizontalMix ? mixWidth : width;
+
+    if (isVerticalMix && mixSiderFixed && childLevelMenus.length) {
+      w += mixChildMenuWidth;
+    }
+
+    return w;
+  }
+
+  const siderWidth = getSiderWidth();
+
+  function getSiderCollapsedWidth() {
+    const { reverseHorizontalMix } = themeSettings.layout;
+    const { collapsedWidth, mixChildMenuWidth, mixCollapsedWidth } = themeSettings.sider;
+
+    if (isHorizontalMix && reverseHorizontalMix) {
+      return isActiveFirstLevelMenuHasChildren ? collapsedWidth : 0;
+    }
+
+    let w = isVerticalMix || isHorizontalMix ? mixCollapsedWidth : collapsedWidth;
+
+    if (isVerticalMix && mixSiderFixed && childLevelMenus.length) {
+      w += mixChildMenuWidth;
+    }
+
+    return w;
+  }
+  const siderCollapsedWidth = getSiderCollapsedWidth();
+
+  function updateSiderCollapse() {
+    dispatch(setSiderCollapse(true));
+  }
+
+  useLayoutEffect(() => {
+    dispatch(setIsMobile(isMobile));
+    if (isMobile) {
+      dispatch(setLayoutMode('vertical'));
+    }
+  }, [isMobile, dispatch]);
+
   return (
     <MenuProvider>
       <AdminLayout
+        fixedFooter={themeSettings.footer.fixed}
+        fixedTop={themeSettings.fixedHeaderAndTab}
+        Footer={<GlobalFooter />}
+        footerHeight={themeSettings.footer.height}
+        footerVisible={themeSettings.footer.visible}
+        fullContent={fullContent}
+        headerHeight={themeSettings.header.height}
+        isMobile={isMobile}
+        mode={layoutMode as LayoutMode}
+        rightFooter={themeSettings.footer.right}
+        scrollElId={LAYOUT_SCROLL_EL_ID}
         scrollMode={themeSettings.layout.scrollMode}
         siderCollapse={siderCollapse}
+        siderCollapsedWidth={siderCollapsedWidth}
+        siderVisible={siderVisible}
+        siderWidth={siderWidth}
         Tab={<GlobalTab />}
+        tabHeight={themeSettings.tab.height}
+        tabVisible={themeSettings.tab.visible}
+        updateSiderCollapse={updateSiderCollapse}
         Header={
           <GlobalHeader
+            isMobile={isMobile}
             mode={themeSettings.layout.mode}
             reverse={themeSettings.layout.reverseHorizontalMix}
             siderWidth={themeSettings.sider.width}

src/layouts/modules/GlobalFooter.tsx

@@ -0,0 +1,17 @@
+import DarkModeContainer from '@/components/DarkModeContainer';
+
+const GlobalFooter = () => {
+  return (
+    <DarkModeContainer className="h-full flex-center">
+      <a
+        href="https://github.com/honghuangdc/soybean-admin/blob/main/LICENSE"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Copyright MIT © 2021 Soybean
+      </a>
+    </DarkModeContainer>
+  );
+};
+
+export default GlobalFooter;

src/layouts/modules/global-header/GlobalHeader.tsx

@@ -65,7 +65,7 @@ const GlobalHeader: FC<Props> = memo(({ isMobile, mode, reverse, siderWidth }) =
         className="h-full flex-y-center flex-1-hidden"
         id={GLOBAL_HEADER_MENU_ID}
       >
-        <GlobalBreadcrumb className="ml-12px" />
+        {!isMobile && !showMenu && <GlobalBreadcrumb className="ml-12px" />}
       </div>
 
       <div className="h-full flex-y-center justify-end">

src/layouts/modules/global-menu/modules/ReversedHorizontalMix.tsx

@@ -4,6 +4,7 @@ import Vertical from './Vertical';
 const ReversedHorizontalMix = () => {
   return [
     <Vertical key="vertical" />,
+
     <Horizontal
       key="ReversedHorizontalMix "
       mode="3"