refactor: refactor layout

src/layouts/default/sider/LayoutSideBar.tsx

@@ -1,77 +0,0 @@
-import './index.less';
-
-import { computed, defineComponent, ref, unref } from 'vue';
-
-import { Layout } from 'ant-design-vue';
-import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
-
-import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
-
-export default defineComponent({
-  name: 'LayoutSideBar',
-  setup() {
-    const dragBarRef = ref<Nullable<HTMLDivElement>>(null);
-    const sideRef = ref<Nullable<HTMLDivElement>>(null);
-
-    const { getCollapsed, getMenuWidth, getSplit, getTheme } = useMenuSetting();
-
-    const { getTriggerAttr, getTriggerSlot } = useTrigger();
-
-    const { renderDragLine } = useDragLine(sideRef, dragBarRef);
-
-    const {
-      getCollapsedWidth,
-      onBreakpointChange,
-      onCollapseChange,
-      onSiderClick,
-    } = useSiderEvent();
-
-    const getMode = computed(() => {
-      return unref(getSplit) ? MenuModeEnum.INLINE : null;
-    });
-
-    const getSplitType = computed(() => {
-      return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
-    });
-
-    function renderDefault() {
-      return (
-        <>
-          <LayoutMenu
-            theme={unref(getTheme)}
-            menuMode={unref(getMode)}
-            splitType={unref(getSplitType)}
-          />
-          {renderDragLine()}
-        </>
-      );
-    }
-
-    return () => {
-      return (
-        <Layout.Sider
-          ref={sideRef}
-          class="layout-sidebar"
-          breakpoint="md"
-          collapsible
-          width={unref(getMenuWidth)}
-          collapsed={unref(getCollapsed)}
-          collapsedWidth={unref(getCollapsedWidth)}
-          theme={unref(getTheme)}
-          onClick={onSiderClick}
-          onCollapse={onCollapseChange}
-          onBreakpoint={onBreakpointChange}
-          {...unref(getTriggerAttr)}
-        >
-          {{
-            ...unref(getTriggerSlot),
-            default: () => renderDefault(),
-          }}
-        </Layout.Sider>
-      );
-    };
-  },
-});

src/layouts/default/sider/index.less

@@ -1,7 +1,14 @@
 @import (reference) '../../../design/index.less';
 
 .layout-sidebar {
-  background-size: 100% 100%;
+  overflow: hidden;
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
 
   &.ant-layout-sider-dark {
     background: @sider-dark-bg-color;
@@ -9,6 +16,7 @@
 
   &:not(.ant-layout-sider-dark) {
     border-right: 1px solid @border-color-light;
+    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
   }
 
   .ant-layout-sider-zero-width-trigger {

src/layouts/default/sider/index.tsx

@@ -0,0 +1,150 @@
+import './index.less';
+
+import { computed, defineComponent, ref, unref, watch, nextTick } from 'vue';
+
+import { Layout } from 'ant-design-vue';
+import LayoutMenu from '../menu';
+
+import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
+import { useLayoutContext } from '../useLayoutContext';
+
+export default defineComponent({
+  name: 'LayoutSideBar',
+  setup() {
+    const topRef = ref(0);
+    const dragBarRef = ref<ElRef>(null);
+    const sideRef = ref<ElRef>(null);
+
+    const {
+      getCollapsed,
+      getMenuWidth,
+      getSplit,
+      getMenuTheme,
+      getRealWidth,
+      getMenuHidden,
+      getMenuFixed,
+    } = useMenuSetting();
+
+    const { getShowFullHeaderRef, getUnFixedAndFull } = useHeaderSetting();
+
+    const injectValue = useLayoutContext();
+
+    const { getTriggerAttr, getTriggerSlot } = useTrigger();
+
+    const { renderDragLine } = useDragLine(sideRef, dragBarRef);
+
+    const {
+      getCollapsedWidth,
+      onBreakpointChange,
+      onCollapseChange,
+      onSiderClick,
+    } = useSiderEvent();
+
+    const getMode = computed(() => {
+      return unref(getSplit) ? MenuModeEnum.INLINE : null;
+    });
+
+    const getSplitType = computed(() => {
+      return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+    });
+
+    const showClassSideBarRef = computed(() => {
+      return unref(getSplit) ? unref(getMenuHidden) : true;
+    });
+
+    const getSiderClass = computed(() => {
+      return {
+        'layout-sidebar': true,
+        fixed: unref(getMenuFixed),
+        hidden: !unref(showClassSideBarRef),
+      };
+    });
+
+    const getSiderStyle = computed(() => {
+      const top = `${unref(topRef)}px`;
+      if (!unref(getMenuFixed)) {
+        return { top };
+      }
+      return {
+        top,
+        height: `calc(100% - ${top})`,
+      };
+    });
+
+    watch(
+      () => getShowFullHeaderRef.value,
+      () => {
+        topRef.value = 0;
+        if (unref(getUnFixedAndFull)) return;
+        nextTick(() => {
+          const fullHeaderEl = unref(injectValue.fullHeaderRef)?.$el;
+          if (!fullHeaderEl) return;
+          topRef.value = fullHeaderEl.offsetHeight;
+        });
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    const getHiddenDomStyle = computed(() => {
+      const width = `${unref(getRealWidth)}px`;
+      return {
+        width: width,
+        overflow: 'hidden',
+        flex: `0 0 ${width}`,
+        'max-width': width,
+        'min-width': width,
+        transition: 'all 0.2s',
+      };
+    });
+
+    function renderDefault() {
+      return (
+        <>
+          <LayoutMenu
+            theme={unref(getMenuTheme)}
+            menuMode={unref(getMode)}
+            splitType={unref(getSplitType)}
+          />
+          {renderDragLine()}
+        </>
+      );
+    }
+
+    return () => {
+      return (
+        <>
+          {unref(getMenuFixed) && (
+            <div style={unref(getHiddenDomStyle)} class={{ hidden: !unref(showClassSideBarRef) }} />
+          )}
+
+          <Layout.Sider
+            ref={sideRef}
+            breakpoint="md"
+            collapsible
+            class={unref(getSiderClass)}
+            style={unref(getSiderStyle)}
+            width={unref(getMenuWidth)}
+            collapsed={unref(getCollapsed)}
+            collapsedWidth={unref(getCollapsedWidth)}
+            theme={unref(getMenuTheme)}
+            onClick={onSiderClick}
+            onCollapse={onCollapseChange}
+            onBreakpoint={onBreakpointChange}
+            {...unref(getTriggerAttr)}
+          >
+            {{
+              ...unref(getTriggerSlot),
+              default: () => renderDefault(),
+            }}
+          </Layout.Sider>
+        </>
+      );
+    };
+  },
+});

src/layouts/default/sider/useLayoutSider.tsx

@@ -16,7 +16,7 @@ export function useSiderEvent() {
   const brokenRef = ref(false);
   const collapseRef = ref(true);
 
-  const { setMenuSetting, getCollapsed, getMiniWidthNumber, getShow } = useMenuSetting();
+  const { setMenuSetting, getCollapsed, getMiniWidthNumber, getShowMenu } = useMenuSetting();
 
   const getCollapsedWidth = computed(() => {
     return unref(brokenRef) ? 0 : unref(getMiniWidthNumber);
@@ -38,7 +38,7 @@ export function useSiderEvent() {
 
   function onSiderClick(e: ChangeEvent) {
     if (!e || !e.target || e.target.className !== 'basic-menu__content') return;
-    if (!unref(getCollapsed) || !unref(getShow)) return;
+    if (!unref(getCollapsed) || !unref(getShowMenu)) return;
     setMenuSetting({ collapsed: false });
   }
   return { getCollapsedWidth, onCollapseChange, onBreakpointChange, onSiderClick };