feat(layout): add mix sidebar mode

2025-08-27 14:47:28 +08:00 · 2020-12-21 23:38:16 +08:00
parent 2e79c9f37a
commit e6db0d39b9
64 changed files with 1520 additions and 1087 deletions
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -48,7 +48,7 @@
        if (currentRoute.value.name === REDIRECT_NAME) {
          return;
        }
-        const matched = currentRoute.value.matched;
+        const matched = currentRoute.value?.matched;
        if (!matched || matched.length === 0) return;

        let breadcrumbList = filter(toRaw(matched), (item) => {
@@ -102,7 +102,7 @@
        color: @breadcrumb-item-normal-color;

        a {
-          color: @text-color-base;
+          color: rgba(0, 0, 0, 0.65);

          &:hover {
            color: @primary-color;
--- a/src/layouts/default/header/index.vue
+++ b/src/layouts/default/header/index.vue
@@ -10,7 +10,9 @@
        :style="getLogoWidth"
      />
      <LayoutTrigger
-        v-if="(getShowContent && getShowHeaderTrigger && !getSplit) || getIsMobile"
+        v-if="
+          (getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
+        "
        :theme="getHeaderTheme"
        :sider="false"
      />
@@ -110,6 +112,7 @@
        getSplit,
        getIsMixMode,
        getMenuWidth,
+        getIsMixSidebar,
      } = useMenuSetting();
      const { getShowLocale } = useLocaleSetting();
      const { getUseErrorHandle } = useRootSetting();
@@ -173,6 +176,7 @@
        getUseLockPage,
        getUseErrorHandle,
        getLogoWidth,
+        getIsMixSidebar,
      };
    },
  });
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -2,7 +2,7 @@
  <Layout :class="prefixCls">
    <LayoutFeatures />
    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
-    <Layout>
+    <Layout class="ant-layout-has-sider">
      <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
      <Layout :class="`${prefixCls}__main`">
        <LayoutMultipleHeader />
@@ -53,13 +53,14 @@

      const { getShowFullHeaderRef } = useHeaderSetting();

-      const { getShowSidebar } = useMenuSetting();
+      const { getShowSidebar, getIsMixSidebar } = useMenuSetting();

      return {
        getShowFullHeaderRef,
        getShowSidebar,
        prefixCls,
        getIsMobile,
+        getIsMixSidebar,
      };
    },
  });
--- a/src/layouts/default/menu/index.tsx
+++ b/src/layouts/default/menu/index.tsx
@@ -43,7 +43,6 @@ export default defineComponent({
    const {
      getMenuMode,
      getMenuType,
-      getCollapsedShowTitle,
      getMenuTheme,
      getCollapsed,
      getAccordion,
@@ -132,12 +131,10 @@ export default defineComponent({
          isHorizontal={props.isHorizontal}
          type={unref(getMenuType)}
          mode={unref(getComputedMenuMode)}
-          collapsedShowTitle={unref(getCollapsedShowTitle)}
          theme={unref(getComputedMenuTheme)}
          items={unref(menusRef)}
          accordion={unref(getAccordion)}
          onMenuClick={handleMenuClick}
-          showLogo={unref(getIsShowLogo)}
        />
      );
    }
--- a/src/layouts/default/setting/SettingDrawer.tsx
+++ b/src/layouts/default/setting/SettingDrawer.tsx
@@ -61,7 +61,6 @@ export default defineComponent({
      getShowMenu,
      getMenuType,
      getTrigger,
-      getCollapsedShowTitle,
      getMenuFixed,
      getCollapsed,
      getCanDrag,
@@ -71,6 +70,8 @@ export default defineComponent({
      getMenuBgColor,
      getIsTopMenu,
      getSplit,
+      getIsMixSidebar,
+      getCloseMixSidebarOnChange,
    } = useMenuSetting();

    const {
@@ -106,6 +107,13 @@ export default defineComponent({
            def={unref(getSplit)}
            disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
          />
+
+          <SwitchItem
+            title={t('layout.setting.closeMixSidebarOnChange')}
+            event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
+            def={unref(getCloseMixSidebarOnChange)}
+            disabled={!unref(getIsMixSidebar)}
+          />
        </>
      );
    }
@@ -166,14 +174,9 @@ export default defineComponent({
            title={t('layout.setting.menuCollapse')}
            event={HandlerEnum.MENU_COLLAPSED}
            def={unref(getCollapsed)}
-            disabled={!unref(getShowMenuRef)}
-          />
-          <SwitchItem
-            title={t('layout.setting.collapseMenuDisplayName')}
-            event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
-            def={unref(getCollapsedShowTitle)}
-            disabled={!unref(getShowMenuRef) || !unref(getCollapsed)}
+            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
          />
+
          <SwitchItem
            title={t('layout.setting.fixedHeader')}
            event={HandlerEnum.HEADER_FIXED}
@@ -184,7 +187,7 @@ export default defineComponent({
            title={t('layout.setting.fixedSideBar')}
            event={HandlerEnum.MENU_FIXED}
            def={unref(getMenuFixed)}
-            disabled={!unref(getShowMenuRef)}
+            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
          />
          <SelectItem
            title={t('layout.setting.topMenuLayout')}
@@ -192,7 +195,10 @@ export default defineComponent({
            def={unref(getTopMenuAlign)}
            options={topMenuAlignOptions}
            disabled={
-              !unref(getShowHeader) || unref(getSplit) || (!unref(getIsTopMenu) && !unref(getSplit))
+              !unref(getShowHeader) ||
+              unref(getSplit) ||
+              (!unref(getIsTopMenu) && !unref(getSplit)) ||
+              unref(getIsMixSidebar)
            }
          />
          <SelectItem
@@ -200,7 +206,7 @@ export default defineComponent({
            event={HandlerEnum.MENU_TRIGGER}
            def={triggerDef}
            options={triggerOptions}
-            disabled={!unref(getShowMenuRef)}
+            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
          />
          <SelectItem
            title={t('layout.setting.contentMode')}
@@ -282,7 +288,12 @@ export default defineComponent({
            event={HandlerEnum.HEADER_SHOW}
            def={unref(getShowHeader)}
          />
-          <SwitchItem title="Logo" event={HandlerEnum.SHOW_LOGO} def={unref(getShowLogo)} />
+          <SwitchItem
+            title="Logo"
+            event={HandlerEnum.SHOW_LOGO}
+            def={unref(getShowLogo)}
+            disabled={unref(getIsMixSidebar)}
+          />
          <SwitchItem
            title={t('layout.setting.footer')}
            event={HandlerEnum.SHOW_FOOTER}
--- a/src/layouts/default/setting/components/TypePicker.vue
+++ b/src/layouts/default/setting/components/TypePicker.vue
@@ -6,12 +6,13 @@
          @click="handler(item)"
          :class="[
            `${prefixCls}__item`,
+            `${prefixCls}__item--${item.type}`,
            {
              [`${prefixCls}__item--active`]: def === item.type,
            },
          ]"
        >
-          <img :src="item.src" />
+          <div class="mix-sidebar" />
        </div>
      </Tooltip>
    </template>
@@ -58,33 +59,118 @@

    &__item {
      position: relative;
-      width: 70px;
-      height: 50px;
-      margin: 0 20px 20px 0;
+      width: 56px;
+      height: 48px;
+      margin-right: 16px;
+      overflow: hidden;
      cursor: pointer;
-      border-radius: 6px;
+      background-color: #f0f2f5;
+      border-radius: 4px;
+      box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);

+      &::before,
      &::after {
        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 0;
-        height: 0;
        content: '';
-        opacity: 0;
-        transition: all 0.3s;
      }

+      &--sidebar {
+        &::before {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 33%;
+          height: 100%;
+          background-color: #273352;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #fff;
+        }
+      }
+
+      &--mix {
+        &::before {
+          top: 0;
+          left: 0;
+          width: 33%;
+          height: 100%;
+          background-color: #fff;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 100%;
+          height: 25%;
+          background-color: #273352;
+        }
+      }
+
+      &--top-menu {
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #273352;
+        }
+      }
+
+      &--mix-sidebar {
+        &::before {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 25%;
+          height: 100%;
+          background-color: #273352;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #fff;
+        }
+
+        .mix-sidebar {
+          position: absolute;
+          left: 25%;
+          width: 15%;
+          height: 100%;
+          background-color: #fff;
+        }
+      }
+
+      // &::after {
+      //   position: absolute;
+      //   top: 50%;
+      //   left: 50%;
+      //   width: 0;
+      //   height: 0;
+      //   content: '';
+      //   opacity: 0;
+      //   transition: all 0.3s;
+      // }
+
      &:hover,
      &--active {
+        padding: 12px;
+        border: 2px solid @primary-color;
+
+        &::before,
        &::after {
-          top: -8px;
-          left: -4px;
-          width: 80px;
-          height: 64px;
-          border: 2px solid @primary-color;
-          border-radius: 6px;
-          opacity: 1;
+          border-radius: 0;
        }
      }
    }
--- a/src/layouts/default/setting/enum.ts
+++ b/src/layouts/default/setting/enum.ts
@@ -1,9 +1,6 @@
 import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { MenuModeEnum, MenuTypeEnum, TopMenuAlignEnum, TriggerEnum } from '/@/enums/menuEnum';

-import mixImg from '/@/assets/images/layout/menu-mix.svg';
-import sidebarImg from '/@/assets/images/layout/menu-sidebar.svg';
-import menuTopImg from '/@/assets/images/layout/menu-top.svg';
 import { useI18n } from '/@/hooks/web/useI18n';

 const { t } = useI18n();
@@ -22,6 +19,7 @@ export enum HandlerEnum {
  MENU_THEME,
  MENU_SPLIT,
  MENU_FIXED,
+  MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE,

  // header
  HEADER_SHOW,
@@ -116,19 +114,21 @@ export const menuTypeList = [
    title: t('layout.setting.menuTypeSidebar'),
    mode: MenuModeEnum.INLINE,
    type: MenuTypeEnum.SIDEBAR,
-    src: sidebarImg,
  },
  {
    title: t('layout.setting.menuTypeMix'),
    mode: MenuModeEnum.INLINE,
    type: MenuTypeEnum.MIX,
-    src: mixImg,
  },

  {
    title: t('layout.setting.menuTypeTopMenu'),
    mode: MenuModeEnum.HORIZONTAL,
    type: MenuTypeEnum.TOP_MENU,
-    src: menuTopImg,
+  },
+  {
+    title: t('layout.setting.menuTypeMixSidebar'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX_SIDEBAR,
  },
 ];
--- a/src/layouts/default/setting/handler.ts
+++ b/src/layouts/default/setting/handler.ts
@@ -48,9 +48,6 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
    case HandlerEnum.MENU_WIDTH:
      return { menuSetting: { menuWidth: value } };

-    case HandlerEnum.MENU_COLLAPSED_SHOW_TITLE:
-      return { menuSetting: { collapsedShowTitle: value } };
-
    case HandlerEnum.MENU_SHOW_SIDEBAR:
      return { menuSetting: { show: value } };

@@ -60,6 +57,8 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf

    case HandlerEnum.MENU_SPLIT:
      return { menuSetting: { split: value } };
+    case HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
+      return { menuSetting: { closeMixSidebarOnChange: value } };

    case HandlerEnum.MENU_FIXED:
      return { menuSetting: { fixed: value } };
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -128,5 +128,55 @@
  });
 </script>
 <style lang="less">
-  @import './index.less';
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-layout-sideBar';
+
+  .@{prefix-cls} {
+    z-index: @layout-sider-fixed-z-index;
+
+    &--fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100%;
+    }
+
+    &--mix {
+      top: @header-height;
+      height: calc(100% - @header-height);
+    }
+
+    &.ant-layout-sider-dark {
+      background: @sider-dark-bg-color;
+
+      .ant-layout-sider-trigger {
+        color: darken(@white, 25%);
+        background: @trigger-dark-bg-color;
+
+        &:hover {
+          color: @white;
+          background: @trigger-dark-hover-bg-color;
+        }
+      }
+    }
+
+    &:not(.ant-layout-sider-dark) {
+      // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+      .ant-layout-sider-trigger {
+        color: @text-color-base;
+        border-top: 1px solid @border-color-light;
+      }
+    }
+
+    .ant-layout-sider-zero-width-trigger {
+      top: 40%;
+      z-index: 10;
+    }
+
+    & .ant-layout-sider-trigger {
+      height: 36px;
+      line-height: 36px;
+    }
+  }
 </style>
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -0,0 +1,408 @@
+<template>
+  <div :class="`${prefixCls}-dom`" />
+
+  <div
+    v-click-outside="handleClickOutside"
+    :class="[
+      prefixCls,
+      getMenuTheme,
+      {
+        open: openMenu,
+      },
+    ]"
+  >
+    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
+    <ScrollContainer>
+      <ul :class="`${prefixCls}-module`">
+        <li
+          :class="[
+            `${prefixCls}-module__item `,
+            {
+              [`${prefixCls}-module__item--active`]: item.path === activePath,
+            },
+          ]"
+          v-for="item in menuModules"
+          :key="item.path"
+          @click="hanldeModuleClick(item.path)"
+        >
+          <MenuTag :item="item" :showTitle="false" :isHorizontal="false" />
+          <g-icon
+            :class="`${prefixCls}-module__icon`"
+            :size="22"
+            :icon="item.meta && item.meta.icon"
+          />
+          <p :class="`${prefixCls}-module__name`">{{ t(item.name) }}</p>
+        </li>
+      </ul>
+    </ScrollContainer>
+
+    <div :class="`${prefixCls}-menu-list`" ref="sideRef" :style="getMenuStyle">
+      <div
+        :class="[
+          `${prefixCls}-menu-list__title`,
+          {
+            show: openMenu,
+          },
+        ]"
+      >
+        <span class="text"> {{ title }}</span>
+      </div>
+      <ScrollContainer :class="`${prefixCls}-menu-list__content`">
+        <BasicMenu
+          :isHorizontal="false"
+          mode="inline"
+          :items="chilrenMenus"
+          :theme="getMenuTheme"
+          @menuClick="handleMenuClick"
+        />
+      </ScrollContainer>
+      <div
+        v-show="getShowDragBar && openMenu"
+        :class="`${prefixCls}-drag-bar`"
+        ref="dragBarRef"
+      ></div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, ref, computed, CSSProperties, unref } from 'vue';
+  import type { Menu } from '/@/router/types';
+  import type { RouteLocationNormalized } from 'vue-router';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { ScrollContainer } from '/@/components/Container';
+  import { AppLogo } from '/@/components/Application';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { BasicMenu, MenuTag } from '/@/components/Menu';
+  import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDragLine } from './useLayoutSider';
+
+  import clickOutside from '/@/directives/clickOutside';
+  import { useGlobSetting } from '/@/hooks/setting';
+
+  export default defineComponent({
+    name: 'LayoutMixSider',
+    components: {
+      ScrollContainer,
+      AppLogo,
+      BasicMenu,
+      MenuTag,
+    },
+    directives: {
+      clickOutside,
+    },
+    setup() {
+      let menuModules = ref<Menu[]>([]);
+      const activePath = ref('');
+      const chilrenMenus = ref<Menu[]>([]);
+      const openMenu = ref(false);
+      const dragBarRef = ref<ElRef>(null);
+      const sideRef = ref<ElRef>(null);
+      const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
+
+      const { prefixCls } = useDesign('layout-mix-sider');
+      const go = useGo();
+      const { t } = useI18n();
+      const {
+        getMenuWidth,
+        getCanDrag,
+        getCloseMixSidebarOnChange,
+        getMenuTheme,
+        getMixSidebarTheme,
+      } = useMenuSetting();
+      const { title } = useGlobSetting();
+
+      useDragLine(sideRef, dragBarRef, true);
+
+      const getMenuStyle = computed(
+        (): CSSProperties => {
+          return {
+            width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
+          };
+        }
+      );
+
+      const getShowDragBar = computed(() => unref(getCanDrag));
+
+      onMounted(async () => {
+        menuModules.value = await getShallowMenus();
+      });
+
+      listenerLastChangeTab((route) => {
+        currentRoute.value = route;
+        setActive();
+        if (unref(getCloseMixSidebarOnChange)) {
+          openMenu.value = false;
+        }
+      });
+
+      async function hanldeModuleClick(path: string) {
+        const children = await getChildrenMenus(path);
+
+        if (unref(activePath) === path) {
+          openMenu.value = !unref(openMenu);
+          if (!unref(openMenu)) {
+            setActive();
+          }
+        } else {
+          openMenu.value = true;
+          activePath.value = path;
+        }
+
+        if (!children || children.length === 0) {
+          go(path);
+          chilrenMenus.value = [];
+          openMenu.value = false;
+          return;
+        }
+        chilrenMenus.value = children;
+      }
+
+      async function setActive() {
+        const path = currentRoute.value?.path;
+        if (!path) return;
+        const parentPath = await getCurrentParentPath(path);
+        activePath.value = parentPath;
+        // hanldeModuleClick(parentPath);
+      }
+
+      function handleMenuClick(path: string) {
+        go(path);
+      }
+
+      function handleClickOutside() {
+        openMenu.value = false;
+        setActive();
+      }
+
+      return {
+        t,
+        prefixCls,
+        menuModules,
+        hanldeModuleClick,
+        activePath,
+        chilrenMenus,
+        getShowDragBar,
+        handleMenuClick,
+        getMenuStyle,
+        handleClickOutside,
+        sideRef,
+        dragBarRef,
+        title,
+        openMenu,
+        getMenuTheme,
+        getMixSidebarTheme,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-layout-mix-sider';
+  @tag-prefix-cls: ~'@{namespace}-basic-menu-item-tag';
+  @width: 80px;
+  .@{prefix-cls} {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: @layout-mix-sider-fixed-z-index;
+    width: @width;
+    height: 100%;
+    max-width: @width;
+    min-width: @width;
+    overflow: hidden;
+    background: @sider-dark-bg-color;
+    transition: all 0.2s ease 0s;
+    flex: 0 0 @width;
+    .@{tag-prefix-cls} {
+      position: absolute;
+      top: 6px;
+      right: 2px;
+    }
+
+    &-dom {
+      width: @width;
+      height: 100%;
+      max-width: @width;
+      min-width: @width;
+      overflow: hidden;
+      transition: all 0.2s ease 0s;
+      flex: 0 0 @width;
+    }
+
+    &-logo {
+      display: flex;
+      height: @header-height;
+      padding-left: 0 !important;
+      justify-content: center;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+      }
+    }
+
+    &.light {
+      .@{prefix-cls}-logo {
+        border-bottom: 1px solid rgb(238, 238, 238);
+      }
+
+      &.open {
+        > .scroll-container {
+          border-right: 1px solid rgb(238, 238, 238);
+        }
+      }
+
+      .@{prefix-cls}-module {
+        &__item {
+          font-weight: normal;
+          color: rgba(0, 0, 0, 0.65);
+
+          &--active {
+            color: @primary-color;
+            background: unset;
+          }
+        }
+      }
+    }
+
+    &.dark {
+      &.open {
+        .@{prefix-cls}-logo {
+          border-bottom: 1px solid rgb(114 114 114);
+        }
+
+        > .scroll-container {
+          border-right: 1px solid rgb(114 114 114);
+        }
+      }
+      .@{prefix-cls}-menu-list {
+        background: @sider-dark-bg-color;
+
+        &__title {
+          color: @white;
+          border-bottom: none;
+          border-bottom: 1px solid rgb(114 114 114);
+        }
+      }
+    }
+
+    &-module {
+      position: relative;
+      height: calc(100% - @header-height) !important;
+      padding-top: 1px;
+
+      &__item {
+        position: relative;
+        padding: 12px 0;
+        color: rgba(255, 255, 255, 0.65);
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+          color: @white;
+        }
+        // &:hover,
+        &--active {
+          font-weight: 700;
+          color: @white;
+          background: @sider-dark-darken-bg-color;
+
+          &::before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: @primary-color;
+            content: '';
+          }
+        }
+      }
+
+      &__icon {
+        margin-bottom: 8px;
+        font-size: 24px;
+      }
+
+      &__name {
+        margin-bottom: 0;
+        font-size: 12px;
+      }
+    }
+
+    &-menu-list {
+      position: fixed;
+      top: 0;
+      left: 80px;
+      width: 0;
+      width: 200px;
+      height: calc(100%);
+      background: #fff;
+      transition: width 0.2s;
+      .@{tag-prefix-cls} {
+        position: absolute;
+        top: 10px;
+        right: 30px;
+      }
+
+      &__title {
+        display: flex;
+        height: @header-height;
+        margin-left: -6px;
+        font-size: 18px;
+        color: @primary-color;
+        border-bottom: 1px solid rgb(238, 238, 238);
+        opacity: 0;
+        transition: unset;
+        // justify-content: center;
+        align-items: center;
+        justify-content: start;
+
+        &.show {
+          opacity: 1;
+          transition: all 0.5s ease;
+        }
+      }
+
+      &__content {
+        height: calc(100% - @header-height) !important;
+
+        .scrollbar__wrap {
+          height: 100%;
+          overflow-x: hidden;
+        }
+
+        .scrollbar__bar.is-horizontal {
+          display: none;
+        }
+
+        .ant-menu {
+          height: 100%;
+        }
+
+        .ant-menu-inline,
+        .ant-menu-vertical,
+        .ant-menu-vertical-left {
+          border-right: 1px solid transparent;
+        }
+      }
+    }
+
+    &-drag-bar {
+      position: absolute;
+      top: 0;
+      right: -3px;
+      width: 3px;
+      height: 100%;
+      cursor: ew-resize;
+      background: #f8f8f9;
+      border-top: none;
+      border-bottom: none;
+      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
+    }
+  }
+</style>
--- a/src/layouts/default/sider/index.less
+++ b/src/layouts/default/sider/index.less
@@ -1,51 +0,0 @@
-@import (reference) '../../../design/index.less';
-@prefix-cls: ~'@{namespace}-layout-sideBar';
-
-.@{prefix-cls} {
-  z-index: @layout-sider-fixed-z-index;
-
-  &--fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-  }
-
-  &--mix {
-    top: @header-height;
-    height: calc(100% - @header-height);
-  }
-
-  &.ant-layout-sider-dark {
-    background: @sider-dark-bg-color;
-
-    .ant-layout-sider-trigger {
-      color: darken(@white, 25%);
-      background: @trigger-dark-bg-color;
-
-      &:hover {
-        color: @white;
-        background: @trigger-dark-hover-bg-color;
-      }
-    }
-  }
-
-  &:not(.ant-layout-sider-dark) {
-    // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
-
-    .ant-layout-sider-trigger {
-      color: @text-color-base;
-      border-top: 1px solid @border-color-light;
-    }
-  }
-
-  .ant-layout-sider-zero-width-trigger {
-    top: 40%;
-    z-index: 10;
-  }
-
-  & .ant-layout-sider-trigger {
-    height: 36px;
-    line-height: 36px;
-  }
-}
--- a/src/layouts/default/sider/index.vue
+++ b/src/layouts/default/sider/index.vue
@@ -10,6 +10,7 @@
  >
    <Sider />
  </Drawer>
+  <MixSider v-else-if="getIsMixSidebar" />
  <Sider v-else />
 </template>
 <script lang="ts">
@@ -17,16 +18,17 @@

  import Sider from './LayoutSider.vue';
  import { Drawer } from 'ant-design-vue';
+  import MixSider from './MixSider.vue';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  export default defineComponent({
    name: 'SiderWrapper',
-    components: { Sider, Drawer },
+    components: { Sider, Drawer, MixSider },
    setup() {
      const { prefixCls } = useDesign('layout-sider-wrapper');
      const { getIsMobile } = useAppInject();
-      const { setMenuSetting, getCollapsed, getMenuWidth } = useMenuSetting();
+      const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();

      function handleClose() {
        setMenuSetting({
@@ -34,7 +36,7 @@
        });
      }

-      return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth };
+      return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
    },
  });
 </script>
--- a/src/layouts/default/sider/useLayoutSider.ts
+++ b/src/layouts/default/sider/useLayoutSider.ts
@@ -71,21 +71,30 @@ export function useTrigger(getIsMobile: Ref<boolean>) {
 * @param siderRef
 * @param dragBarRef
 */
-export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
+export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>, mix = false) {
  const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting();

  onMounted(() => {
    nextTick(() => {
-      const [exec] = useDebounce(changeWrapWidth, 20);
+      const [exec] = useDebounce(changeWrapWidth, 80);
      exec();
    });
  });

+  function getEl(elRef: Ref<ElRef | ComponentRef>): any {
+    const el = unref(elRef);
+    if (!el) return null;
+    if (Reflect.has(el, '$el')) {
+      return (unref(elRef) as ComponentRef)?.$el;
+    }
+    return unref(elRef);
+  }
+
  function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
    document.onmousemove = function (innerE) {
      let iT = (ele as any).left + (innerE.clientX - clientX);
      innerE = innerE || window.event;
-      const maxT = 600;
+      const maxT = 800;
      const minT = unref(getMiniWidthNumber);
      iT < 0 && (iT = 0);
      iT > maxT && (iT = maxT);
@@ -97,31 +106,36 @@ export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {

  // Drag and drop in the menu area-release the mouse
  function removeMouseup(ele: any) {
-    const wrap = unref(siderRef).$el;
+    const wrap = getEl(siderRef);
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
+      wrap.style.transition = 'width 0.2s';
      const width = parseInt(wrap.style.width);
-      const miniWidth = unref(getMiniWidthNumber);

-      if (!unref(getCollapsed)) {
-        width > miniWidth + 20
-          ? setMenuSetting({ menuWidth: width })
-          : setMenuSetting({ collapsed: true });
+      if (!mix) {
+        const miniWidth = unref(getMiniWidthNumber);
+        if (!unref(getCollapsed)) {
+          width > miniWidth + 20
+            ? setMenuSetting({ menuWidth: width })
+            : setMenuSetting({ collapsed: true });
+        } else {
+          width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width });
+        }
      } else {
-        width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width });
+        setMenuSetting({ menuWidth: width });
      }
+
      ele.releaseCapture?.();
    };
  }

  function changeWrapWidth() {
-    const ele = unref(dragBarRef)?.$el;
-    if (!ele) {
-      return;
-    }
-    const side = unref(siderRef);
-    const wrap = (side || {}).$el;
+    const ele = getEl(dragBarRef);
+    if (!ele) return;
+    const wrap = getEl(siderRef);
+    if (!wrap) return;
+
    ele.onmousedown = (e: any) => {
      wrap.style.transition = 'unset';
      const clientX = e?.clientX;