feat(layout): 🚀 add mixed layout mode

src/layouts/LayoutMixed/index.scss

@@ -0,0 +1,77 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-aside) {
+    width: auto;
+    background-color: var(--el-menu-bg-color);
+    border-right: 1px solid var(--el-aside-border-color);
+    .aside-box {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      transition: width 0.3s ease;
+      .el-scrollbar {
+        height: calc(100% - 55px);
+        .el-menu {
+          width: 100%;
+          overflow-x: hidden;
+          border-right: none;
+        }
+      }
+      .logo {
+        box-sizing: border-box;
+        height: 55px;
+        .logo-img {
+          width: 28px;
+          margin-right: 6px;
+          object-fit: contain;
+        }
+        .logo-text {
+          font-size: 21.5px;
+          font-weight: bold;
+          color: var(--el-aside-logo-text-color);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .el-header {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+    .tool-bar-lf,
+    .tool-bar-ri {
+      flex-shrink: 0;
+    }
+    .el-menu {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+      border-bottom: none;
+      .el-sub-menu__hide-arrow {
+        width: 65px;
+        height: 55px;
+      }
+      .el-menu-item.is-active {
+        color: #ffffff !important;
+      }
+      .is-active {
+        background-color: var(--el-color-primary) !important;
+        border-bottom-color: var(--el-color-primary) !important;
+        &::before {
+          width: 0;
+        }
+        .el-sub-menu__title {
+          color: #ffffff !important;
+          background-color: var(--el-color-primary) !important;
+          border-bottom-color: var(--el-color-primary) !important;
+        }
+      }
+    }
+  }
+}

src/layouts/LayoutMixed/index.vue

@@ -0,0 +1,101 @@
+<!-- 混合布局 -->
+<template>
+  <el-container class="layout">
+    <el-aside>
+      <div class="aside-box" :style="{ width: `${asideBoxWidth}px` }">
+        <div class="logo flx-center">
+          <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+          <span v-show="!isCollapse" class="logo-text">{{ title }}</span>
+        </div>
+        <el-scrollbar>
+          <el-menu
+            :router="false"
+            :default-active="activeMenu"
+            :collapse="isCollapse"
+            :unique-opened="accordion"
+            :collapse-transition="false"
+          >
+            <SubMenu :menu-list="subMenuList" />
+          </el-menu>
+        </el-scrollbar>
+      </div>
+    </el-aside>
+    <el-container>
+      <el-header>
+        <ToolBarLeft />
+        <el-menu mode="horizontal" :router="false" :default-active="activeHeaderMenu">
+          <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path" @click="changeSubMenu(item)">
+            <el-icon>
+              <component :is="item.meta.icon"></component>
+            </el-icon>
+            <template #title>
+              <span>{{ item.meta.title }}</span>
+            </template>
+          </el-menu-item>
+        </el-menu>
+        <ToolBarRight />
+      </el-header>
+      <Main />
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutVertical">
+import { ref, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+import Main from "@/layouts/components/Main/index.vue";
+import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
+import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
+
+const title = import.meta.env.VITE_GLOB_APP_TITLE;
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+const accordion = computed(() => globalStore.accordion);
+const isCollapse = computed(() => globalStore.isCollapse);
+const asideBoxWidth = computed(() => {
+  if (!subMenuList.value.length) return 0;
+  return isCollapse.value ? 65 : 210;
+});
+const menuList = computed(() => authStore.showMenuListGet);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+const subMenuList = ref<Menu.MenuOptions[]>([]);
+const activeHeaderMenu = ref("");
+const getActiveHeaderMenu = () => {
+  return authStore.authMenuList.find(menu => route.path.includes(menu.path))?.path || "";
+};
+
+watch(
+  () => [menuList, route],
+  () => {
+    // 当前菜单没有数据直接 return
+    if (!menuList.value.length) return;
+    activeHeaderMenu.value = getActiveHeaderMenu();
+    const menuItem = menuList.value.filter((item: Menu.MenuOptions) => {
+      return route.path === item.path || `/${route.path.split("/")[1]}` === item.path;
+    });
+    if (menuItem[0].children?.length) return (subMenuList.value = menuItem[0].children);
+    subMenuList.value = [];
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+
+// change SubMenu
+const changeSubMenu = (item: Menu.MenuOptions) => {
+  if (item.children?.length) return (subMenuList.value = item.children);
+  subMenuList.value = [];
+  router.push(item.path);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

src/layouts/components/Header/ToolBarLeft.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="tool-bar-lf">
     <CollapseIcon id="collapseIcon" />
-    <Breadcrumb v-show="globalStore.breadcrumb" id="breadcrumb" />
+    <Breadcrumb v-show="isShowBreadcrumb" id="breadcrumb" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useGlobalStore } from "@/stores/modules/global";
 import CollapseIcon from "./components/CollapseIcon.vue";
 import Breadcrumb from "./components/Breadcrumb.vue";
 const globalStore = useGlobalStore();
+const isShowBreadcrumb = computed(() => {
+  return globalStore.breadcrumb && globalStore.layout !== "mixed";
+});
 </script>
 
 <style scoped lang="scss">

src/layouts/components/Menu/SubMenu.vue

@@ -64,7 +64,8 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
 }
 .vertical,
 .classic,
-.transverse {
+.transverse,
+.mixed {
   .el-menu-item {
     &.is-active {
       &::before {

src/layouts/components/ThemeDrawer/index.scss

@@ -134,4 +134,25 @@
       width: 55%;
     }
   }
+  .layout-mixed {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .layout-light {
+      width: 20%;
+      height: 100%;
+    }
+    .layout-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 72%;
+      .layout-dark {
+        height: 20%;
+      }
+      .layout-content {
+        height: 67%;
+      }
+    }
+  }
 }

src/layouts/components/ThemeDrawer/index.vue

@@ -49,6 +49,18 @@
           </el-icon>
         </div>
       </el-tooltip>
+      <el-tooltip effect="dark" content="混合" placement="top" :show-after="200">
+        <div :class="['layout-item layout-mixed', { 'is-active': layout == 'mixed' }]" @click="setLayout('mixed')">
+          <div class="layout-light"></div>
+          <div class="layout-container">
+            <div class="layout-dark"></div>
+            <div class="layout-content"></div>
+          </div>
+          <el-icon v-if="layout == 'mixed'">
+            <CircleCheckFilled />
+          </el-icon>
+        </div>
+      </el-tooltip>
     </div>
     <div class="theme-item">
       <span>

src/layouts/index.vue

@@ -15,12 +15,14 @@ import LayoutVertical from "./LayoutVertical/index.vue";
 import LayoutClassic from "./LayoutClassic/index.vue";
 import LayoutTransverse from "./LayoutTransverse/index.vue";
 import LayoutColumns from "./LayoutColumns/index.vue";
+import LayoutMixed from "./LayoutMixed/index.vue";
 
 const LayoutComponents: Record<LayoutType, Component> = {
   vertical: LayoutVertical,
   classic: LayoutClassic,
   transverse: LayoutTransverse,
-  columns: LayoutColumns
+  columns: LayoutColumns,
+  mixed: LayoutMixed
 };
 
 const globalStore = useGlobalStore();

src/layouts/indexAsync.vue

@@ -24,7 +24,8 @@ const LayoutComponents: Record<LayoutType, Component> = {
   vertical: defineAsyncComponent(() => import("./LayoutVertical/index.vue")),
   classic: defineAsyncComponent(() => import("./LayoutClassic/index.vue")),
   transverse: defineAsyncComponent(() => import("./LayoutTransverse/index.vue")),
-  columns: defineAsyncComponent(() => import("./LayoutColumns/index.vue"))
+  columns: defineAsyncComponent(() => import("./LayoutColumns/index.vue")),
+  mixed: defineAsyncComponent(() => import("./LayoutMixed/index.vue"))
 };
 
 const globalStore = useGlobalStore();

src/stores/interface/index.ts

@@ -1,4 +1,4 @@
-export type LayoutType = "vertical" | "classic" | "transverse" | "columns";
+export type LayoutType = "vertical" | "classic" | "transverse" | "columns" | "mixed";
 
 export type AssemblySizeType = "large" | "default" | "small";