ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.2

package/es/ele-pro-layout/index.js

@@ -1,359 +1,291 @@
-import { defineComponent, ref, shallowRef, computed, watch, unref, shallowReactive, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createBlock, createCommentVNode, createElementVNode } from "vue";
+import { defineComponent, ref, shallowRef, computed, watch, unref, shallowReactive, provide, nextTick, onMounted, resolveComponent, openBlock, createBlock, normalizeClass, createSlots, withCtx, createCommentVNode, renderSlot, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { useRouter } from "vue-router";
-import { ElBacktop } from "element-plus";
-import { mapTree, isExternalLink } from "../utils/core";
-import { LAYOUT_KEY } from "../ele-config-provider/receiver";
-import ReceiverView from "../ele-config-provider/components/receiver-view";
-import ProHeader from "./components/pro-header";
-import ProSidebar from "./components/pro-sidebar";
-import ProSidebox from "./components/pro-sidebox";
-import ProTabs from "./components/pro-tabs";
+import { HomeOutlined } from "../icons";
+import { useTimer, useMediaQuery, useWindowListener } from "../utils/hook";
+import { debounce, isExternalLink, mapTree } from "../utils/core";
 import ProIframe from "./components/pro-iframe";
-import { useDisableTransition, getHomePath, getRouteMatched, useWindowListener, getMatchedLevels, getRouteTab, getMixActive, getActiveChilds, findTabByPath, findMenuByPath } from "./util";
-import { proLayoutProps, proLayoutEmits } from "./props";
+import { getMenuItems, getRouteMatched, getActiveChilds, findTabByKey, getMatchedLevels, getRouteTab, findMenuByPath, findTabByPath } from "./util";
+import { proLayoutProps, proLayoutEmits, PRO_LAYOUT_KEY } from "./props";
+import EleAdminLayout from "../ele-admin-layout/index";
 const _sfc_main = defineComponent({
   name: "EleProLayout",
-  components: {
-    ElBacktop,
-    ReceiverView,
-    ProHeader,
-    ProSidebar,
-    ProSidebox,
-    ProTabs,
-    ProIframe
-  },
+  components: { EleAdminLayout, ProIframe },
   props: proLayoutProps,
   emits: proLayoutEmits,
   setup(props, { emit }) {
     const { currentRoute, push } = useRouter();
-    const { disableTransition } = useDisableTransition();
-    const state = {
-      headerData: [],
-      sideboxData: [],
-      sidebarData: [],
-      menuTimer: null,
-      isHover: false
-    };
-    const contentRef = ref(null);
-    const modalsRef = ref(null);
-    const levelData = shallowRef([]);
-    const tabData = shallowRef([]);
-    const tabActive = ref(getHomePath(props.homePath));
+    const [startTimer, stopTimer] = useTimer(() => props.menuHoverTimeout);
+    const state = { navData: [], sideData: [], boxData: [] };
+    const mobileQuery = "(max-width: 768px)";
+    const layoutRef = ref(null);
     const menuData = shallowRef([]);
-    const headerData = shallowRef([]);
-    const headerActive = ref();
-    const sidebarData = shallowRef([]);
-    const sidebarActive = ref();
-    const sideboxData = shallowRef([]);
-    const sideboxActive = ref();
+    const navData = shallowRef([]);
+    const navActive = ref();
+    const sideData = shallowRef([]);
+    const sideActive = ref();
+    const boxData = shallowRef([]);
+    const boxActive = ref();
+    const tabData = shallowRef([]);
+    const tabActive = ref();
+    const levelData = shallowRef([]);
+    const mobile = ref(false);
+    const homeMenuPath = ref();
+    const isHome = ref(false);
+    const hideHeader = ref(false);
     const hideSidebar = ref(false);
     const hideSidebox = ref(false);
+    const hideTabs = ref(false);
     const hideFooter = ref(false);
-    const homeMenuPath = ref(getHomePath(props.homePath));
-    const isHome = ref(false);
-    const mobile = ref(false);
-    const topLayout = computed(() => props.layout === "top");
-    const mixLayout = computed(() => props.layout === "mix");
-    const mixSidebar = computed(() => props.sidebarLayout === "mix");
-    const sidebox = computed(() => {
-      return !hideSidebox.value && sideboxData.value.some((d) => {
-        var _a;
-        return !((_a = d.meta) == null ? void 0 : _a.hide);
+    const computedNavigation = () => {
+      let nav = "default";
+      if (hideHeader.value) {
+        nav = "side";
+      } else if (hideSidebar.value && hideSidebox.value) {
+        nav = "top";
+      } else if (props.layout === "top" || props.layout === "mix") {
+        nav = props.layout;
+      }
+      if (mobile.value && (nav === "top" || nav === "mix")) {
+        nav = "default";
+      }
+      return nav;
+    };
+    const computedSideNavigation = () => {
+      if (!hideSidebox.value && hideSidebar.value) {
+        return "box";
+      }
+      return props.sidebarLayout === "mix" ? "mix" : "default";
+    };
+    const navigation = ref(computedNavigation());
+    const sideNavigation = ref(computedSideNavigation());
+    const layoutHeaders = computed(() => {
+      const navRoute = props.navTrigger !== "click" && props.navTrigger !== "hover";
+      return getMenuItems(navData.value, navRoute);
+    });
+    const layoutSidebars = computed(() => {
+      const menuRoute = props.itemTrigger !== "click" && props.itemTrigger !== "hover";
+      return getMenuItems(sideData.value, menuRoute);
+    });
+    const layoutSideboxs = computed(() => {
+      const boxRoute = props.boxTrigger !== "click" && props.boxTrigger !== "hover";
+      return getMenuItems(boxData.value, boxRoute);
+    });
+    const layoutTabs = computed(() => {
+      const data = props.fixedHome ? tabData.value.filter((t) => !t.home) : tabData.value;
+      const onlyOne = !props.fixedHome && data.length === 1;
+      return data.map((d) => {
+        return {
+          name: d.key,
+          label: d.title,
+          closable: onlyOne && d.home ? false : d.closable,
+          meta: d.meta
+        };
       });
     });
-    const sidebar = computed(() => {
-      return !hideSidebox.value && !hideSidebar.value && sidebarData.value.some((d) => {
-        var _a;
-        return !((_a = d.meta) == null ? void 0 : _a.hide);
+    const layoutLevels = computed(() => {
+      const data = [];
+      if (!isHome.value) {
+        const to = homeMenuPath.value;
+        const is = { transform: "scale(1.13)", transformOrigin: "8px -2px" };
+        data.push({ key: to, to, icon: HomeOutlined, iconStyle: is });
+      }
+      levelData.value.forEach((d) => {
+        data.push({ key: d.path, title: d.title });
       });
+      return data;
     });
-    const layoutClass = computed(() => {
-      const hasSide = sidebox.value || sidebar.value;
-      const fixedSide = props.fixedSidebar && !props.fixedBody && hasSide;
-      const logoAuto = props.logoInHeader || topLayout.value || !hasSide;
-      const hasMix = mixSidebar.value && sidebox.value;
-      return [
-        "ele-admin-layout",
-        // 折叠侧栏
-        { "ele-admin-collapse": props.collapse },
-        // 双侧栏折叠一级
-        { "ele-admin-compact": props.compact && sidebox.value },
-        // 双侧栏
-        { "ele-admin-mix-sidebar": hasMix },
-        // 双侧栏时侧栏空数据
-        { "ele-admin-none-sidebar": hasMix && !sidebar.value },
-        // 固定顶栏
-        { "ele-admin-fixed-header": props.fixedHeader && !props.fixedBody },
-        // 固定侧栏
-        { "ele-admin-fixed-sidebar": fixedSide },
-        // 固定主体
-        { "ele-admin-fixed-body": props.fixedBody },
-        // 暗色侧栏
-        { "ele-admin-dark-sidebar": props.sidebarStyle === "dark" },
-        // 图标置于顶栏
-        { "ele-admin-logo-auto": logoAuto && !mobile.value },
-        // 开启页签栏
-        { "ele-admin-open-tab": props.tabBar && props.tabBar !== "header" },
-        // 卡片风格页签
-        { "ele-admin-tab-card": props.tabStyle === "button" },
-        // 主体定宽
-        { "ele-admin-limited": !props.fluid },
-        // 内容区域全屏
-        { "ele-admin-maximized": props.maximized },
-        // 内容区域全屏不显示页签栏
-        { "ele-admin-expanded": props.maximized && props.expanded },
-        // 开启响应式
-        { "ele-admin-mobile": mobile.value }
-      ];
+    const routeLayout = computed(() => {
+      if (navigation.value !== "top" && navigation.value !== "side" && !layoutSidebars.value.length && !layoutSideboxs.value.length) {
+        return "top";
+      }
+      return navigation.value;
     });
-    const backTopSelector = computed(() => {
-      if (props.backTopTarget) {
-        return props.backTopTarget;
+    const routeSideType = computed(() => {
+      if (sideNavigation.value === "mix" && !layoutSidebars.value.length) {
+        return "box";
       }
-      if (props.fixedBody) {
-        return ".ele-admin-layout.ele-admin-fixed-body>.ele-admin-main>.ele-admin-body>.ele-admin-wrapper>.ele-admin-content";
+      return sideNavigation.value;
+    });
+    const isBoxSide = computed(() => routeSideType.value === "box");
+    const routeTabBar = computed(() => {
+      return hideTabs.value ? false : props.tabBar;
+    });
+    const routeMaximized = computed(() => {
+      const max = props.maximized;
+      if (hideHeader.value && hideSidebar.value && hideSidebox.value && !max) {
+        return true;
       }
-      return "body";
+      return max === true && props.expanded ? "expanded" : max;
     });
-    const sidebarCollapse = computed(() => {
-      return mobile.value || mixSidebar.value ? false : props.collapse;
+    const sidebar = computed(() => {
+      return routeLayout.value !== "top" && !isBoxSide.value || mobile.value;
     });
-    const sidebarTheme = computed(() => {
-      const side = !(mixSidebar.value && !mobile.value);
-      return side && props.sidebarStyle === "dark" ? "dark" : "light";
+    const breadcrumbProps = computed(() => {
+      if (!props.breadcrumb || props.breadcrumbSeparator == null) {
+        return props.breadcrumb;
+      }
+      if (props.breadcrumb === true) {
+        return { separator: props.breadcrumbSeparator };
+      }
+      return { separator: props.breadcrumbSeparator, ...props.breadcrumb };
     });
-    const updateCollapse = (val) => {
-      const collapse = typeof val === "boolean" ? val : !props.collapse;
-      if (val !== props.collapse) {
-        emit("update:collapse", collapse);
+    const backTopProps = computed(() => {
+      const backTop = props.backTop;
+      const r = props.backTopRight;
+      const b = props.backTopBottom;
+      const vh = props.backTopVisibilityHeight;
+      const t = props.backTopTarget;
+      if (!backTop || vh == null && r == null && b == null && t == null) {
+        return backTop;
       }
-    };
-    const updateMaximized = (value) => {
-      const maximize = value;
-      emit("update:maximized", maximize);
-    };
-    const tabAdd = (data) => {
-      emit("tabAdd", data);
-    };
-    const onTabClick = (option) => {
-      emit("tabClick", option);
-    };
-    const onTabRemove = (option) => {
-      emit("tabRemove", option);
-    };
-    const onTabContextMenu = (option) => {
-      emit("tabContextMenu", option);
-    };
-    const onTabSortChange = (data) => {
-      emit("tabSortChange", data);
-    };
-    const onLogoClick = () => {
-      emit("logoClick", isHome.value);
-    };
-    const onSideMenuOpen = (index2, indexPath) => {
-      emit("sideMenuOpen", index2, indexPath);
-    };
-    const onSideMenuClose = (index2, indexPath) => {
-      emit("sideMenuClose", index2, indexPath);
-    };
-    const onHeadMenuOpen = (index2, indexPath) => {
-      emit("headMenuOpen", index2, indexPath);
-    };
-    const onHeadMenuClose = (index2, indexPath) => {
-      emit("headMenuClose", index2, indexPath);
-    };
-    const getContentElem = () => {
-      return contentRef.value;
-    };
-    const onRouteChange = (current) => {
-      const { path, fullPath, meta } = current;
-      hideFooter.value = !!meta.hideFooter;
-      const contentEl = getContentElem();
-      if (props.autoScrollTop && contentEl) {
-        contentEl.scrollTop = 0;
+      const prop = backTop === true ? {} : { ...backTop };
+      if (vh != null && prop.visibilityHeight == null) {
+        prop.visibilityHeight = vh;
       }
-      if (props.redirectPath && path.startsWith(props.redirectPath)) {
-        return;
+      if (r != null && prop.right == null) {
+        prop.right = r;
       }
-      hideSidebar.value = !!meta.hideSidebar;
-      hideSidebox.value = !!meta.hideSidebox;
-      const { active, title, matched, activeOther } = getRouteMatched(
-        path,
-        fullPath,
-        meta,
-        menuData.value
-      );
-      levelData.value = getMatchedLevels(
-        matched,
-        activeOther,
-        current,
-        menuData.value,
-        tabData.value
-      );
-      const t = getRouteTab(
-        current,
-        tabData.value,
-        homeMenuPath.value,
-        title
-      );
-      isHome.value = t.home;
-      tabActive.value = t.key;
-      tabAdd(t);
-      updateMenuActive(active, matched);
-      if (mixLayout.value || mixSidebar.value) {
-        splitMenuData();
+      if (b != null && prop.bottom == null) {
+        prop.bottom = b;
       }
-      if (props.responsive && mobile.value) {
-        updateCollapse(true);
+      if (t != null && prop.target == null) {
+        prop.target = t;
       }
-    };
-    const updateMenuActive = (active, matched) => {
-      const { active1, active2 } = getMixActive(matched);
-      if (topLayout.value) {
-        headerActive.value = active;
-        sideboxActive.value = void 0;
-      } else if (mixLayout.value) {
-        headerActive.value = active1;
-        sideboxActive.value = active2;
-      } else {
-        headerActive.value = void 0;
-        sideboxActive.value = active1;
+      return prop;
+    });
+    const navMenuProps = computed(() => {
+      const mProps = props.headerMenuProps;
+      const e = props.ellipsis;
+      const ep = props.ellipsisProps;
+      const mt = props.menuTrigger;
+      const mtet = props.menuTextEllipsisTooltip;
+      if (e == null && ep == null && mt == null && mtet == null) {
+        return mProps;
       }
-      sidebarActive.value = active;
-      state.headerActive = headerActive.value;
-      state.sideboxActive = sideboxActive.value;
-      state.sidebarActive = sidebarActive.value;
-    };
-    const splitMenuData = () => {
-      var _a;
-      if (!((_a = menuData.value) == null ? void 0 : _a.length)) {
-        headerData.value = [];
-        sideboxData.value = [];
-        sidebarData.value = [];
-      } else if (mobile.value) {
-        headerData.value = [];
-        sideboxData.value = [];
-        sidebarData.value = menuData.value;
-      } else if (topLayout.value) {
-        headerData.value = menuData.value;
-        sideboxData.value = [];
-        sidebarData.value = [];
-      } else if (mixLayout.value) {
-        headerData.value = menuData.value.map((d) => {
-          return {
-            name: d.name,
-            path: d.path,
-            component: d.component,
-            redirect: d.redirect,
-            meta: d.meta,
-            tempChildren: d.children
-          };
-        });
-        const childMenus = getActiveChilds(
-          menuData.value,
-          headerActive.value
-        );
-        if (!childMenus.length) {
-          sideboxData.value = [];
-          sidebarData.value = [];
-        } else if (mixSidebar.value) {
-          sideboxData.value = childMenus.map((d) => {
-            return {
-              name: d.name,
-              path: d.path,
-              component: d.component,
-              redirect: d.redirect,
-              meta: d.meta,
-              children: props.collapse ? d.children : void 0,
-              tempChildren: d.children
-            };
-          });
-          sidebarData.value = getActiveChilds(
-            childMenus,
-            sideboxActive.value
-          );
-        } else {
-          sideboxData.value = [];
-          sidebarData.value = childMenus;
-        }
-      } else {
-        headerData.value = [];
-        if (mixSidebar.value) {
-          sideboxData.value = menuData.value.map((d) => {
-            return {
-              name: d.name,
-              path: d.path,
-              component: d.component,
-              redirect: d.redirect,
-              meta: d.meta,
-              children: props.collapse ? d.children : void 0,
-              tempChildren: d.children
-            };
-          });
-          sidebarData.value = getActiveChilds(
-            menuData.value,
-            sideboxActive.value
-          );
-        } else {
-          sideboxData.value = [];
-          sidebarData.value = menuData.value;
-        }
+      const prop = mProps == null ? {} : { ...mProps };
+      if (e != null && prop.ellipsis == null) {
+        prop.ellipsis = e;
+      }
+      if (ep != null && prop.ellipsisProps == null) {
+        prop.ellipsisProps = ep;
+      }
+      if (mt != null && prop.menuTrigger == null) {
+        prop.menuTrigger = mt;
+      }
+      if (mtet != null && prop.textEllipsisTooltip == null) {
+        prop.textEllipsisTooltip = mtet;
+      }
+      return prop;
+    });
+    const sideMenuProps = computed(() => {
+      const mProps = props.sidebarMenuProps;
+      const s = props.sidebarOpeneds;
+      const u = props.uniqueOpened;
+      const c = props.colorfulIcon;
+      const t = props.tooltipEffect;
+      const mtet = props.menuTextEllipsisTooltip;
+      if (s == null && u == null && c == null && t == null && mtet == null) {
+        return mProps;
+      }
+      const prop = mProps == null ? {} : { ...mProps };
+      if (s != null && prop.defaultOpeneds == null) {
+        prop.defaultOpeneds = s;
+      }
+      if (u != null && prop.uniqueOpened == null) {
+        prop.uniqueOpened = u;
+      }
+      if (c != null && prop.colorful == null) {
+        prop.colorful = c;
+      }
+      if (t != null && prop.popperEffect == null) {
+        prop.popperEffect = t;
+      }
+      if (mtet != null && prop.textEllipsisTooltip == null) {
+        prop.textEllipsisTooltip = mtet;
+      }
+      return prop;
+    });
+    const boxMenuProps = computed(() => {
+      const mProps = props.sideboxMenuProps;
+      const ci = props.colorfulIcon;
+      const te = props.tooltipEffect;
+      const mtet = props.menuTextEllipsisTooltip;
+      if (ci == null && te == null && mtet == null) {
+        return mProps;
+      }
+      const prop = mProps == null ? {} : { ...mProps };
+      if (ci != null && prop.popupColorful == null) {
+        prop.popupColorful = ci;
+      }
+      if (te != null && prop.popperEffect == null) {
+        prop.popperEffect = te;
+      }
+      if (mtet != null && prop.textEllipsisTooltip == null) {
+        prop.textEllipsisTooltip = mtet;
+      }
+      return prop;
+    });
+    const updateNavigation = () => {
+      const value = computedNavigation();
+      if (navigation.value !== value) {
+        navigation.value = value;
+        return true;
       }
-      state.headerData = headerData.value;
-      state.sideboxData = sideboxData.value;
-      state.sidebarData = sidebarData.value;
     };
-    const updateMenuData = () => {
-      let temp;
-      menuData.value = mapTree(props.menus, (item) => {
-        var _a, _b;
-        if (!temp && !((_a = item.children) == null ? void 0 : _a.length)) {
-          temp = item;
-        }
-        return {
-          ...item,
-          meta: {
-            ...item.meta,
-            title: routeI18n(item.path, item) || ((_b = item.meta) == null ? void 0 : _b.title)
-          }
-        };
-      });
-      splitMenuData();
-      homeMenuPath.value = getHomePath(props.homePath ?? (temp == null ? void 0 : temp.path));
+    const updateSideNavigation = () => {
+      const value = computedSideNavigation();
+      if (sideNavigation.value !== value) {
+        sideNavigation.value = value;
+        return true;
+      }
     };
-    const updateTabData = () => {
-      if (!props.tabs) {
-        tabData.value = [];
+    const resetMenuState = () => {
+      if (!state.isHover) {
         return;
       }
-      tabData.value = props.tabs.map((item) => {
-        const title = routeI18n(item.path) || item.title;
-        return { ...item, title };
+      startTimer(() => {
+        state.isHover = false;
+        const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+        if (navActive.value !== state.navActive) {
+          navActive.value = state.navActive;
+          if (isMixSide) {
+            boxData.value = state.boxData;
+          } else {
+            sideData.value = state.sideData;
+          }
+        }
+        if (isMixSide && boxActive.value !== state.boxActive) {
+          boxActive.value = state.boxActive;
+          sideData.value = state.sideData;
+        }
       });
     };
-    const updateLevelData = () => {
-      levelData.value = levelData.value.map((item) => {
-        const t = findTabByPath(item.path, tabData.value);
-        const title = (t == null ? void 0 : t.title) || routeI18n(item.path) || item.title;
-        return { ...item, title };
-      });
+    const updateCollapse = (collapse) => {
+      if (collapse !== props.collapse) {
+        emit("update:collapse", collapse);
+      }
     };
-    const routeI18n = (path, menu) => {
-      if (props.i18n && path) {
-        return props.i18n({
-          path,
-          menu: menu ?? findMenuByPath(path, menuData.value),
-          locale: props.locale
-        });
+    const updateMaximized = (maximized) => {
+      if (maximized !== props.maximized) {
+        emit("update:maximized", maximized);
       }
     };
-    const onNavItemClick = (item, e) => {
+    const handleLogoClick = (e) => {
+      emit("logoClick", isHome.value, e);
+    };
+    const handleHeadMenuOpen = (index2, indexPath) => {
+      emit("headMenuOpen", index2, indexPath);
+    };
+    const handleHeadMenuClose = (index2, indexPath) => {
+      emit("headMenuClose", index2, indexPath);
+    };
+    const handleHeadMenuItemClick = (item, e) => {
       const path = item.index;
       const trigger = props.navTrigger;
       if (!path || trigger !== "click" && trigger !== "hover") {
         return;
       }
-      if (isExternalLink(item.index)) {
+      if (isExternalLink(path)) {
         e.stopPropagation();
         if (props.beforeClick && props.beforeClick(item, e) === false) {
           return;
@@ -361,8 +293,8 @@ const _sfc_main = defineComponent({
         window.open(path);
         return;
       }
-      const temp = getActiveChilds(headerData.value, path, "tempChildren");
-      const isChild = !temp.some((d) => {
+      const childMenus = getActiveChilds(navData.value, path, "tempChildren");
+      const isChild = !childMenus.some((d) => {
         var _a;
         return !((_a = d.meta) == null ? void 0 : _a.hide);
       });
@@ -373,58 +305,54 @@ const _sfc_main = defineComponent({
       if (props.beforeClick && props.beforeClick(item, e) === false) {
         return;
       }
-      if (isChild) {
-        if (path !== unref(currentRoute).fullPath) {
-          push(path);
-        }
+      if (isChild && path !== unref(currentRoute).fullPath) {
+        push(path);
         return;
       }
-      if (headerActive.value !== path) {
-        headerActive.value = path;
-        if (!mixSidebar.value) {
-          sidebarData.value = temp;
+      e.stopPropagation();
+      if (navActive.value !== path) {
+        navActive.value = path;
+        const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+        const isCollapse = sideNavigation.value === "box" || props.collapse && !mobile.value;
+        if (!isMixSide) {
+          sideData.value = childMenus;
           return;
         }
-        sideboxData.value = temp.map((d) => {
+        boxData.value = childMenus.map((d) => {
           return {
             ...d,
-            children: props.collapse ? d.children : void 0,
+            children: isCollapse ? d.children : void 0,
             tempChildren: d.children
           };
         });
       }
     };
-    const onNavItemMouseenter = (item, e) => {
-      if (!mixLayout.value) {
+    const handleHeadMenuItemMouseenter = (item, e) => {
+      if (navigation.value !== "mix") {
         return;
       }
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
-      }
+      stopTimer();
       const path = item.index;
       const trigger = props.navTrigger;
-      if (trigger !== "hover" || !path || isExternalLink(path)) {
+      if (trigger !== "hover" || !path) {
         return;
       }
-      const temp = getActiveChilds(headerData.value, path, "tempChildren");
-      if (!temp.some((d) => {
-        var _a;
-        return !((_a = d.meta) == null ? void 0 : _a.hide);
-      })) {
+      if (!isExternalLink(path) && props.beforeClick && props.beforeClick(item, e) === false) {
         return;
       }
-      if (props.beforeClick && props.beforeClick(item, e) === false) {
-        return;
-      }
-      if (headerActive.value !== path) {
+      const temp = getActiveChilds(navData.value, path, "tempChildren");
+      if (navActive.value !== path) {
         state.isHover = true;
-        headerActive.value = path;
-        if (!mixSidebar.value) {
-          sidebarData.value = temp;
+        navActive.value = temp.some((d) => {
+          var _a;
+          return !((_a = d.meta) == null ? void 0 : _a.hide);
+        }) ? path : void 0;
+        const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+        if (!isMixSide) {
+          sideData.value = temp;
           return;
         }
-        sideboxData.value = temp.map((d) => {
+        boxData.value = temp.map((d) => {
           return {
             ...d,
             children: props.collapse ? d.children : void 0,
@@ -433,37 +361,13 @@ const _sfc_main = defineComponent({
         });
       }
     };
-    const onNavMouseEnter = () => {
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
-      }
+    const handleHeadMouseenter = () => {
+      stopTimer();
     };
-    const onNavMouseLeave = () => {
-      if (!state.isHover) {
-        return;
-      }
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
-      }
-      state.menuTimer = setTimeout(() => {
-        state.isHover = false;
-        if (headerActive.value !== state.headerActive) {
-          headerActive.value = state.headerActive;
-          if (mixSidebar.value) {
-            sideboxData.value = state.sideboxData;
-          } else {
-            sidebarData.value = state.sidebarData;
-          }
-        }
-        if (mixSidebar.value && sideboxActive.value !== state.sideboxActive) {
-          sideboxActive.value = state.sideboxActive;
-          sidebarData.value = state.sidebarData;
-        }
-      }, props.menuHoverTimeout);
+    const handleHeadMouseleave = () => {
+      resetMenuState();
     };
-    const onBoxItemClick = (item, e) => {
+    const handleBoxMenuItemClick = (item, e) => {
       const path = item.index;
       const trigger = props.boxTrigger;
       if (!path || trigger !== "click" && trigger !== "hover") {
@@ -486,8 +390,8 @@ const _sfc_main = defineComponent({
         }
         return;
       }
-      const temp = getActiveChilds(sideboxData.value, path, "tempChildren");
-      const isChild = !temp.some((d) => {
+      const childMenus = getActiveChilds(boxData.value, path, "tempChildren");
+      const isChild = !childMenus.some((d) => {
         var _a;
         return !((_a = d.meta) == null ? void 0 : _a.hide);
       });
@@ -498,77 +402,52 @@ const _sfc_main = defineComponent({
       if (props.beforeClick && props.beforeClick(item, e) === false) {
         return;
       }
-      if (isChild) {
-        if (path !== unref(currentRoute).fullPath) {
-          push(path);
-        }
+      if (isChild && path !== unref(currentRoute).fullPath) {
+        push(path);
         return;
       }
-      if (sideboxActive.value !== path) {
-        sideboxActive.value = path;
-        sidebarData.value = temp;
+      e.stopPropagation();
+      if (boxActive.value !== path) {
+        boxActive.value = path;
+        sideData.value = childMenus;
       }
     };
-    const onBoxItemMouseenter = (item, e) => {
+    const handleBoxMenuItemMouseenter = (item, e) => {
       if (props.collapse) {
         return;
       }
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
-      }
+      stopTimer();
       const path = item.index;
       const trigger = props.boxTrigger;
-      if (trigger !== "hover" || !path || isExternalLink(path)) {
+      if (trigger !== "hover" || !path) {
         return;
       }
-      const temp = getActiveChilds(sideboxData.value, path, "tempChildren");
-      if (!temp.some((d) => {
-        var _a;
-        return !((_a = d.meta) == null ? void 0 : _a.hide);
-      })) {
+      if (!isExternalLink(path) && props.beforeClick && props.beforeClick(item, e) === false) {
         return;
       }
-      if (props.beforeClick && props.beforeClick(item, e) === false) {
-        return;
-      }
-      if (sideboxActive.value !== path) {
+      const temp = getActiveChilds(boxData.value, path, "tempChildren");
+      if (boxActive.value !== path) {
         state.isHover = true;
-        sideboxActive.value = path;
-        sidebarData.value = temp;
+        boxActive.value = temp.some((d) => {
+          var _a;
+          return !((_a = d.meta) == null ? void 0 : _a.hide);
+        }) ? path : void 0;
+        sideData.value = temp;
       }
     };
-    const onBoxMouseEnter = () => {
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
-      }
+    const handleBoxMouseEnter = () => {
+      stopTimer();
     };
-    const onBoxMouseLeave = () => {
-      if (!state.isHover) {
-        return;
-      }
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
-      }
-      state.menuTimer = setTimeout(() => {
-        state.isHover = false;
-        if (headerActive.value !== state.headerActive) {
-          headerActive.value = state.headerActive;
-          if (mixSidebar.value) {
-            sideboxData.value = state.sideboxData;
-          } else {
-            sidebarData.value = state.sidebarData;
-          }
-        }
-        if (mixSidebar.value && sideboxActive.value !== state.sideboxActive) {
-          sideboxActive.value = state.sideboxActive;
-          sidebarData.value = state.sidebarData;
-        }
-      }, props.menuHoverTimeout);
+    const handleBoxMouseLeave = () => {
+      resetMenuState();
+    };
+    const handleSideMenuOpen = (index2, indexPath) => {
+      emit("sideMenuOpen", index2, indexPath);
+    };
+    const handleSideMenuClose = (index2, indexPath) => {
+      emit("sideMenuClose", index2, indexPath);
     };
-    const onMenuItemClick = (item, e) => {
+    const handleSideMenuItemClick = (item, e) => {
       const path = item.index;
       const trigger = props.itemTrigger;
       if (!path || trigger !== "click" && trigger !== "hover") {
@@ -582,40 +461,209 @@ const _sfc_main = defineComponent({
         window.open(path);
         return;
       }
-      sidebarActive.value = path;
+      sideActive.value = path;
       if (path !== unref(currentRoute).fullPath) {
         push(path);
       }
     };
-    const onSideMouseEnter = () => {
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
+    const handleSideMouseEnter = () => {
+      stopTimer();
+    };
+    const handleSideMouseLeave = () => {
+      resetMenuState();
+    };
+    const handleTabClick = (option) => {
+      const key = option.name;
+      const item = findTabByKey(key, props.tabs);
+      const opt = { key, item, active: tabActive.value };
+      emit("tabClick", opt);
+    };
+    const handleTabRemove = (key) => {
+      const item = findTabByKey(key, props.tabs);
+      const opt = { key, item, active: tabActive.value };
+      emit("tabRemove", opt);
+    };
+    const handleTabContextMenu = (option) => {
+      const opt = {
+        key: option.name,
+        item: findTabByKey(option.name, props.tabs),
+        active: tabActive.value,
+        command: option.command
+      };
+      emit("tabContextMenu", opt);
+    };
+    const handleTabSortChange = (data) => {
+      const result = data.map((d) => {
+        return findTabByKey(d.name, props.tabs);
+      });
+      if (props.fixedHome && props.tabs != null) {
+        const homeTab = props.tabs.find((t) => t.home);
+        if (homeTab) {
+          result.unshift(homeTab);
+        }
       }
+      emit("tabSortChange", result);
     };
-    const onSideMouseLeave = () => {
-      if (!state.isHover) {
+    const handleTabAdd = (data) => {
+      emit("tabAdd", data);
+    };
+    const getContentElem = () => {
+      if (!layoutRef.value) {
+        return null;
+      }
+      return layoutRef.value.getContentEl();
+    };
+    const onRouteChange = (route) => {
+      const { path, meta } = route;
+      hideFooter.value = !!meta.hideFooter;
+      const contentEl = getContentElem();
+      if (props.autoScrollTop && contentEl) {
+        contentEl.scrollTop = 0;
+      }
+      if (props.redirectPath && path.startsWith(props.redirectPath)) {
         return;
       }
-      if (state.menuTimer != null) {
-        clearTimeout(state.menuTimer);
-        state.menuTimer = null;
+      hideSidebar.value = !!meta.hideSidebar;
+      hideSidebox.value = props.sidebarLayout === "mix" ? !!meta.hideSidebox : true;
+      hideHeader.value = !!meta.hideHeader;
+      hideTabs.value = !!meta.hideTabs;
+      const navigationIsChanged = updateNavigation();
+      const sideNavigationIsChanged = updateSideNavigation();
+      const { active, title, matched, activeOther } = getRouteMatched(
+        route,
+        menuData.value
+      );
+      levelData.value = getMatchedLevels(
+        matched,
+        activeOther,
+        route,
+        menuData.value,
+        tabData.value
+      );
+      const t = getRouteTab(route, tabData.value, homeMenuPath.value, title);
+      isHome.value = t.home;
+      tabActive.value = t.key;
+      handleTabAdd(t);
+      if (!navigationIsChanged && !sideNavigationIsChanged) {
+        updateMenuActive(active, matched);
+        if (navigation.value === "mix" || sideNavigation.value === "mix" || sideNavigation.value === "box") {
+          splitMenuData();
+        }
+      }
+      if (mobile.value) {
+        updateCollapse(true);
       }
-      state.menuTimer = setTimeout(() => {
-        state.isHover = false;
-        if (headerActive.value !== state.headerActive) {
-          headerActive.value = state.headerActive;
-          if (mixSidebar.value) {
-            sideboxData.value = state.sideboxData;
-          } else {
-            sidebarData.value = state.sidebarData;
-          }
+    };
+    const updateMenuActive = (active, matched) => {
+      const [active1, active2] = (matched == null ? void 0 : matched.length) ? [matched[0].path, (matched[1] ?? matched[0]).path] : [];
+      if (navigation.value === "top") {
+        navActive.value = active;
+        boxActive.value = void 0;
+      } else if (navigation.value === "mix") {
+        navActive.value = active1;
+        boxActive.value = active2;
+      } else {
+        navActive.value = void 0;
+        boxActive.value = active1;
+      }
+      sideActive.value = active;
+      state.navActive = navActive.value;
+      state.boxActive = boxActive.value;
+      state.sideActive = sideActive.value;
+    };
+    const splitMenuData = () => {
+      var _a;
+      const isTopNav = navigation.value === "top";
+      const isMixNav = navigation.value === "mix";
+      const isMixSide = sideNavigation.value === "mix" || sideNavigation.value === "box";
+      const isCollapse = sideNavigation.value === "box" || props.collapse && !mobile.value;
+      if (!((_a = menuData.value) == null ? void 0 : _a.length)) {
+        navData.value = [];
+        boxData.value = [];
+        sideData.value = [];
+      } else if (isTopNav) {
+        navData.value = menuData.value;
+        boxData.value = [];
+        sideData.value = [];
+      } else if (isMixNav) {
+        navData.value = menuData.value.map((d) => {
+          return { ...d, children: void 0, tempChildren: d.children };
+        });
+        const childMenus = getActiveChilds(menuData.value, navActive.value);
+        if (!childMenus.length) {
+          boxData.value = [];
+          sideData.value = [];
+        } else if (isMixSide) {
+          boxData.value = childMenus.map((d) => {
+            return {
+              ...d,
+              children: isCollapse ? d.children : void 0,
+              tempChildren: d.children
+            };
+          });
+          sideData.value = getActiveChilds(childMenus, boxActive.value);
+        } else {
+          boxData.value = [];
+          sideData.value = childMenus;
+        }
+      } else {
+        navData.value = [];
+        if (isMixSide) {
+          boxData.value = menuData.value.map((d) => {
+            return {
+              ...d,
+              children: isCollapse ? d.children : void 0,
+              tempChildren: d.children
+            };
+          });
+          sideData.value = getActiveChilds(menuData.value, boxActive.value);
+        } else {
+          boxData.value = [];
+          sideData.value = menuData.value;
         }
-        if (mixSidebar.value && sideboxActive.value !== state.sideboxActive) {
-          sideboxActive.value = state.sideboxActive;
-          sidebarData.value = state.sidebarData;
+      }
+      state.navData = navData.value;
+      state.boxData = boxData.value;
+      state.sideData = sideData.value;
+    };
+    const updateMenuData = () => {
+      let home;
+      menuData.value = mapTree(props.menus, (item) => {
+        var _a, _b;
+        if (!home && !((_a = item.children) == null ? void 0 : _a.length)) {
+          home = item;
         }
-      }, props.menuHoverTimeout);
+        const title = routeI18n(item.path, item) || ((_b = item.meta) == null ? void 0 : _b.title);
+        return { ...item, meta: { ...item.meta, title } };
+      });
+      splitMenuData();
+      homeMenuPath.value = props.homePath || (home == null ? void 0 : home.path) || "/";
+    };
+    const updateTabData = () => {
+      if (!props.tabs) {
+        tabData.value = [];
+        return;
+      }
+      tabData.value = props.tabs.map((item) => {
+        var _a;
+        const m = findMenuByPath(item.path, menuData.value);
+        const title = ((_a = m == null ? void 0 : m.meta) == null ? void 0 : _a.title) || routeI18n(item.path) || item.title;
+        return { ...item, title };
+      });
+    };
+    const updateLevelData = () => {
+      levelData.value = levelData.value.map((item) => {
+        var _a;
+        const t = findTabByPath(item.path, tabData.value);
+        const m = findMenuByPath(item.path, menuData.value);
+        const title = (t == null ? void 0 : t.title) || ((_a = m == null ? void 0 : m.meta) == null ? void 0 : _a.title) || routeI18n(item.path);
+        return { ...item, title: title || item.title };
+      });
+    };
+    const routeI18n = (path, menu) => {
+      if (props.i18n && path) {
+        return props.i18n({ path, menu, locale: props.locale });
+      }
     };
     watch(
       () => props.menus,
@@ -632,40 +680,36 @@ const _sfc_main = defineComponent({
       },
       { deep: true }
     );
+    watch([() => props.layout, mobile], () => {
+      updateNavigation();
+    });
     watch(
-      () => props.layout,
+      () => props.sidebarLayout,
       () => {
-        const { path, fullPath, meta } = unref(currentRoute);
-        const { active, matched } = getRouteMatched(
-          path,
-          fullPath,
-          meta,
-          menuData.value
-        );
-        updateMenuActive(active, matched);
-        splitMenuData();
+        updateSideNavigation();
       }
     );
-    watch([() => props.sidebarLayout, mobile], () => {
+    watch([navigation, sideNavigation], () => {
+      const route = unref(currentRoute);
+      const { active, matched } = getRouteMatched(route, menuData.value);
+      updateMenuActive(active, matched);
       splitMenuData();
     });
     watch(
       () => props.collapse,
       () => {
-        if (!mixSidebar.value) {
-          return;
-        }
-        if (props.collapse) {
-          sideboxData.value = sideboxData.value.map((d) => {
-            return { ...d, children: d.tempChildren };
-          });
-          state.sideboxData = sideboxData.value;
-          return;
+        if (sideNavigation.value === "mix" && !mobile.value) {
+          if (props.collapse) {
+            boxData.value = boxData.value.map((d) => {
+              return { ...d, children: d.tempChildren };
+            });
+          } else {
+            boxData.value = boxData.value.map((d) => {
+              return { ...d, children: void 0 };
+            });
+          }
+          state.boxData = boxData.value;
         }
-        sideboxData.value = sideboxData.value.map((d) => {
-          return { ...d, children: void 0 };
-        });
-        state.sideboxData = sideboxData.value;
       }
     );
     watch(
@@ -677,23 +721,6 @@ const _sfc_main = defineComponent({
       },
       { immediate: true }
     );
-    watch(
-      [
-        () => props.layout,
-        () => props.sidebarLayout,
-        () => props.fixedHeader,
-        () => props.fixedSidebar,
-        () => props.fixedBody,
-        () => props.maximized,
-        () => props.logoInHeader,
-        sidebar,
-        sidebox,
-        mobile
-      ],
-      () => {
-        disableTransition();
-      }
-    );
     watch(
       currentRoute,
       (route) => {
@@ -701,90 +728,124 @@ const _sfc_main = defineComponent({
       },
       { immediate: true }
     );
+    const layoutProvide = shallowReactive({
+      keepAlive: props.tabBar && props.keepAlive,
+      responsive: props.responsive
+    });
+    provide(PRO_LAYOUT_KEY, layoutProvide);
     watch([() => props.tabBar, () => props.keepAlive], () => {
       layoutProvide.keepAlive = props.tabBar && props.keepAlive;
     });
+    const [media, startMedia, stopMedia] = useMediaQuery(mobileQuery, () => {
+      const isMobile = props.responsive ? media.matches : false;
+      if (mobile.value !== isMobile) {
+        mobile.value = isMobile;
+        updateCollapse(mobile.value);
+      }
+    });
     watch(
       () => props.responsive,
       () => {
         layoutProvide.responsive = props.responsive;
-      }
+        if (props.responsive) {
+          startMedia();
+        } else {
+          stopMedia();
+        }
+      },
+      { immediate: true }
     );
-    watch(modalsRef, () => {
-      layoutProvide.modalsEl = modalsRef.value;
-    });
-    const layoutProvide = shallowReactive({
-      keepAlive: props.tabBar && props.keepAlive,
-      responsive: props.responsive,
-      modalsEl: modalsRef.value
+    useWindowListener("keydown", (e) => {
+      if (e.keyCode === 27 && props.compressOnEsc && props.maximized) {
+        e.stopPropagation();
+        updateMaximized(false);
+      }
     });
-    provide(LAYOUT_KEY, layoutProvide);
-    useWindowListener(
-      {
-        onEscKeydown: (e) => {
-          if (props.compressOnEsc && props.maximized) {
-            e.stopPropagation();
-            updateMaximized(false);
-          }
-        },
-        onMobileChange: (isMobile) => {
-          if (mobile.value !== isMobile) {
-            mobile.value = isMobile;
-            updateCollapse(mobile.value);
-          }
-        },
-        onBodySizeChange: () => {
-          var _a;
-          emit("bodySizeChange", {
-            mobile: mobile.value,
-            width: (_a = getContentElem()) == null ? void 0 : _a.clientWidth
-          });
+    const handleResize = () => {
+      const el = getContentElem();
+      if (el) {
+        const width = el.clientWidth;
+        const height = el.clientHeight;
+        if (width !== state.contentWidth || height !== state.contentHeight) {
+          state.contentWidth = width;
+          state.contentHeight = height;
+          emit("bodySizeChange", { width, height, mobile: mobile.value });
         }
-      },
-      props
+      }
+    };
+    useWindowListener(debounce(() => handleResize(), 500));
+    const [startBodyResizeTimer] = useTimer(600);
+    watch([() => props.collapse, () => props.compact], () => {
+      startBodyResizeTimer(() => {
+        handleResize();
+      });
+    });
+    watch(
+      [
+        routeLayout,
+        routeSideType,
+        routeTabBar,
+        routeMaximized,
+        () => props.fluid
+      ],
+      () => {
+        nextTick(() => {
+          handleResize();
+        });
+      }
     );
+    onMounted(() => {
+      handleResize();
+    });
     return {
-      contentRef,
-      modalsRef,
-      levelData,
+      layoutRef,
+      navActive,
+      sideActive,
+      boxActive,
       tabData,
       tabActive,
-      headerData,
-      headerActive,
-      sidebarData,
-      sidebarActive,
-      sideboxData,
-      sideboxActive,
-      hideFooter,
+      levelData,
+      mobile,
       homeMenuPath,
       isHome,
-      sidebox,
+      hideFooter,
+      layoutHeaders,
+      layoutSidebars,
+      layoutSideboxs,
+      layoutTabs,
+      layoutLevels,
+      routeLayout,
+      routeSideType,
+      isBoxSide,
+      routeTabBar,
+      routeMaximized,
       sidebar,
-      layoutClass,
-      backTopSelector,
-      sidebarCollapse,
-      sidebarTheme,
+      breadcrumbProps,
+      backTopProps,
+      navMenuProps,
+      sideMenuProps,
+      boxMenuProps,
       updateCollapse,
-      onTabClick,
-      onTabRemove,
-      onTabContextMenu,
-      onTabSortChange,
-      onLogoClick,
-      onSideMenuOpen,
-      onSideMenuClose,
-      onHeadMenuOpen,
-      onHeadMenuClose,
-      onNavItemClick,
-      onNavItemMouseenter,
-      onNavMouseEnter,
-      onNavMouseLeave,
-      onBoxItemClick,
-      onBoxItemMouseenter,
-      onBoxMouseEnter,
-      onBoxMouseLeave,
-      onMenuItemClick,
-      onSideMouseEnter,
-      onSideMouseLeave
+      handleLogoClick,
+      handleHeadMenuOpen,
+      handleHeadMenuClose,
+      handleHeadMenuItemClick,
+      handleHeadMenuItemMouseenter,
+      handleHeadMouseenter,
+      handleHeadMouseleave,
+      handleBoxMenuItemClick,
+      handleBoxMenuItemMouseenter,
+      handleBoxMouseEnter,
+      handleBoxMouseLeave,
+      handleSideMenuOpen,
+      handleSideMenuClose,
+      handleSideMenuItemClick,
+      handleSideMouseEnter,
+      handleSideMouseLeave,
+      handleTabClick,
+      handleTabRemove,
+      handleTabContextMenu,
+      handleTabSortChange
     };
   }
 });
@@ -795,235 +856,170 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-admin-body" };
-const _hoisted_2 = { class: "ele-admin-wrapper" };
-const _hoisted_3 = {
-  ref: "contentRef",
-  class: "ele-admin-content"
-};
-const _hoisted_4 = {
-  ref: "modalsRef",
-  class: "ele-admin-modals"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ProHeader = resolveComponent("ProHeader");
-  const _component_ProSidebox = resolveComponent("ProSidebox");
-  const _component_ProSidebar = resolveComponent("ProSidebar");
-  const _component_ProTabs = resolveComponent("ProTabs");
   const _component_ProIframe = resolveComponent("ProIframe");
-  const _component_ElBacktop = resolveComponent("ElBacktop");
-  const _component_ReceiverView = resolveComponent("ReceiverView");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.layoutClass)
+  const _component_EleAdminLayout = resolveComponent("EleAdminLayout");
+  return openBlock(), createBlock(_component_EleAdminLayout, {
+    ref: "layoutRef",
+    height: _ctx.height,
+    headerMenus: _ctx.layoutHeaders,
+    headerActive: _ctx.navActive,
+    sidebarMenus: _ctx.layoutSidebars,
+    sidebarActive: _ctx.sideActive,
+    sideboxMenus: _ctx.layoutSideboxs,
+    sideboxActive: _ctx.isBoxSide || _ctx.collapse && !_ctx.mobile ? _ctx.sideActive : _ctx.boxActive,
+    tabs: _ctx.layoutTabs,
+    tabActive: _ctx.tabActive,
+    levels: _ctx.layoutLevels,
+    collapse: _ctx.collapse,
+    compact: _ctx.compact,
+    maximized: _ctx.routeMaximized,
+    tabBar: _ctx.routeTabBar,
+    breadcrumb: _ctx.breadcrumbProps,
+    backTop: _ctx.backTopProps,
+    headerMenuProps: _ctx.navMenuProps,
+    sidebarMenuProps: _ctx.sideMenuProps,
+    sideboxMenuProps: _ctx.boxMenuProps,
+    layout: _ctx.routeLayout,
+    sidebarLayout: _ctx.routeSideType,
+    headerStyle: _ctx.headerStyle,
+    sidebarStyle: _ctx.sidebarStyle,
+    tabStyle: _ctx.tabStyle,
+    fixedHeader: _ctx.fixedHeader,
+    fixedSidebar: _ctx.fixedSidebar,
+    fixedBody: _ctx.fixedBody,
+    logoInHeader: _ctx.logoInHeader,
+    fixedHome: _ctx.fixedHome,
+    homePath: _ctx.homeMenuPath,
+    isHome: _ctx.isHome,
+    tabContextMenu: _ctx.tabContextMenu,
+    tabContextMenus: _ctx.tabContextMenus,
+    tabSortable: _ctx.tabSortable,
+    headerTitleSlot: _ctx.headerTitleSlot,
+    headerIconSlot: _ctx.headerIconSlot,
+    sidebarTitleSlot: _ctx.sidebarTitleSlot,
+    sidebarIconSlot: _ctx.sidebarIconSlot,
+    sideboxTitleSlot: _ctx.sideboxTitleSlot,
+    sideboxIconSlot: _ctx.sideboxIconSlot,
+    headerCustomStyle: _ctx.headerCustomStyle,
+    sidebarCustomStyle: _ctx.sidebarCustomStyle,
+    sideboxCustomStyle: _ctx.sideboxCustomStyle,
+    tabsCustomStyle: _ctx.tabsCustomStyle,
+    contentCustomStyle: _ctx.contentCustomStyle,
+    mobile: _ctx.mobile,
+    class: normalizeClass(["ele-pro-layout", { "ele-admin-limited": !_ctx.fluid }]),
+    "onUpdate:collapse": _ctx.updateCollapse,
+    onLogoClick: _ctx.handleLogoClick,
+    onHeadMenuOpen: _ctx.handleHeadMenuOpen,
+    onHeadMenuClose: _ctx.handleHeadMenuClose,
+    onHeadMenuItemClick: _ctx.handleHeadMenuItemClick,
+    onHeadMenuItemMouseenter: _ctx.handleHeadMenuItemMouseenter,
+    onHeadMouseenter: _ctx.handleHeadMouseenter,
+    onHeadMouseleave: _ctx.handleHeadMouseleave,
+    onBoxMenuItemClick: _ctx.handleBoxMenuItemClick,
+    onBoxMenuItemMouseenter: _ctx.handleBoxMenuItemMouseenter,
+    onBoxMouseenter: _ctx.handleBoxMouseEnter,
+    onBoxMouseleave: _ctx.handleBoxMouseLeave,
+    onSideMenuOpen: _ctx.handleSideMenuOpen,
+    onSideMenuClose: _ctx.handleSideMenuClose,
+    onSideMenuItemClick: _ctx.handleSideMenuItemClick,
+    onSideMouseenter: _ctx.handleSideMouseEnter,
+    onSideMouseleave: _ctx.handleSideMouseLeave,
+    onTabClick: _ctx.handleTabClick,
+    onTabRemove: _ctx.handleTabRemove,
+    onTabContextMenu: _ctx.handleTabContextMenu,
+    onTabSortChange: _ctx.handleTabSortChange
+  }, createSlots({
+    body: withCtx(() => [
+      _ctx.tabBar && _ctx.keepAlive ? (openBlock(), createBlock(_component_ProIframe, {
+        key: 0,
+        keepAlive: _ctx.keepAlive,
+        transitionName: _ctx.transitionName,
+        transitionDelay: _ctx.transitionDelay,
+        tabData: _ctx.tabData,
+        tabActive: _ctx.tabActive
+      }, null, 8, ["keepAlive", "transitionName", "transitionDelay", "tabData", "tabActive"])) : createCommentVNode("", true)
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default"),
+      !_ctx.hideFooter ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : createCommentVNode("", true)
+    ]),
+    _: 2
   }, [
-    createVNode(_component_ProHeader, {
-      menus: _ctx.headerData,
-      headerStyle: _ctx.headerStyle,
-      active: _ctx.headerActive,
-      ellipsis: _ctx.ellipsis,
-      ellipsisProps: _ctx.ellipsisProps,
-      menuTrigger: _ctx.menuTrigger,
-      itemTrigger: _ctx.navTrigger,
-      collapse: _ctx.collapse,
-      sidebar: _ctx.sidebar,
-      titleSlot: _ctx.headerTitleSlot,
-      iconSlot: _ctx.headerIconSlot,
-      levels: _ctx.levelData,
-      breadcrumb: _ctx.breadcrumb,
-      breadcrumbSeparator: _ctx.breadcrumbSeparator,
-      homePath: _ctx.homeMenuPath,
-      isHome: _ctx.isHome,
-      menuTextEllipsisTooltip: _ctx.menuTextEllipsisTooltip,
-      tabs: _ctx.tabData,
-      tabActive: _ctx.tabActive,
-      fixedHome: _ctx.fixedHome,
-      tabStyle: _ctx.tabStyle,
-      tabContextMenu: _ctx.tabContextMenu,
-      tabContextMenus: _ctx.tabContextMenus,
-      tabSortable: _ctx.tabSortable,
-      tabBar: _ctx.tabBar,
-      onLogoClick: _ctx.onLogoClick,
-      onOpen: _ctx.onHeadMenuOpen,
-      onClsoe: _ctx.onHeadMenuClose,
-      onItemClick: _ctx.onNavItemClick,
-      onItemMouseenter: _ctx.onNavItemMouseenter,
-      onMouseEnter: _ctx.onNavMouseEnter,
-      onMouseLeave: _ctx.onNavMouseLeave,
-      onTabClick: _ctx.onTabClick,
-      onTabRemove: _ctx.onTabRemove,
-      onTabContextMenu: _ctx.onTabContextMenu,
-      onTabSortChange: _ctx.onTabSortChange
-    }, createSlots({ _: 2 }, [
-      renderList(Object.keys(_ctx.$slots).filter(
-        (k) => ![
-          "default",
-          "top",
-          "bottom",
-          "boxTop",
-          "boxBottom",
-          "footer"
-        ].includes(k)
-      ), (name) => {
-        return {
-          name,
-          fn: withCtx((slotProps) => [
-            renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-          ])
-        };
-      })
-    ]), 1032, ["menus", "headerStyle", "active", "ellipsis", "ellipsisProps", "menuTrigger", "itemTrigger", "collapse", "sidebar", "titleSlot", "iconSlot", "levels", "breadcrumb", "breadcrumbSeparator", "homePath", "isHome", "menuTextEllipsisTooltip", "tabs", "tabActive", "fixedHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "tabBar", "onLogoClick", "onOpen", "onClsoe", "onItemClick", "onItemMouseenter", "onMouseEnter", "onMouseLeave", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"]),
-    createVNode(_component_ReceiverView, {
-      class: "ele-admin-main",
-      wrapPosition: false
-    }, {
-      default: withCtx(() => [
-        _ctx.sidebox ? (openBlock(), createBlock(_component_ProSidebox, {
-          key: 0,
-          menus: _ctx.sideboxData,
-          sidebarStyle: _ctx.sidebarStyle,
-          colorfulIcon: _ctx.colorfulIcon,
-          active: _ctx.collapse ? _ctx.sidebarActive : _ctx.sideboxActive,
-          compact: _ctx.compact,
+    _ctx.$slots.logo ? {
+      name: "logo",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "logo", {
           collapse: _ctx.collapse,
-          popperEffect: _ctx.tooltipEffect,
-          itemTrigger: _ctx.boxTrigger,
-          titleSlot: _ctx.sideboxTitleSlot,
-          iconSlot: _ctx.sideboxIconSlot,
-          menuTextEllipsisTooltip: _ctx.menuTextEllipsisTooltip,
-          onItemClick: _ctx.onBoxItemClick,
-          onItemMouseenter: _ctx.onBoxItemMouseenter,
-          onMouseEnter: _ctx.onBoxMouseEnter,
-          onMouseLeave: _ctx.onBoxMouseLeave
-        }, createSlots({ _: 2 }, [
-          renderList(Object.keys(_ctx.$slots).filter(
-            (k) => ![
-              "default",
-              "logo",
-              "left",
-              "right",
-              "center",
-              "breadcrumb",
-              "top",
-              "bottom",
-              "footer",
-              "tabTitle",
-              "tabContext",
-              "tabExtra",
-              "tabHome"
-            ].includes(k)
-          ), (name) => {
-            return {
-              name,
-              fn: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-              ])
-            };
-          })
-        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "compact", "collapse", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "menuTextEllipsisTooltip", "onItemClick", "onItemMouseenter", "onMouseEnter", "onMouseLeave"])) : createCommentVNode("", true),
-        _ctx.sidebar ? (openBlock(), createBlock(_component_ProSidebar, {
-          key: 1,
-          menus: _ctx.sidebarData,
-          sidebarStyle: _ctx.sidebarTheme,
-          colorfulIcon: _ctx.colorfulIcon,
-          active: _ctx.sidebarActive,
-          collapse: _ctx.sidebarCollapse,
-          uniqueOpened: _ctx.uniqueOpened,
-          defaultOpeneds: _ctx.sidebarOpeneds,
-          popperEffect: _ctx.tooltipEffect,
-          itemTrigger: _ctx.itemTrigger,
-          titleSlot: _ctx.sidebarTitleSlot,
-          iconSlot: _ctx.sidebarIconSlot,
-          menuTextEllipsisTooltip: _ctx.menuTextEllipsisTooltip,
-          onOpen: _ctx.onSideMenuOpen,
-          onClsoe: _ctx.onSideMenuClose,
-          onItemClick: _ctx.onMenuItemClick,
-          onMouseEnter: _ctx.onSideMouseEnter,
-          onMouseLeave: _ctx.onSideMouseLeave
-        }, createSlots({ _: 2 }, [
-          renderList(Object.keys(_ctx.$slots).filter(
-            (k) => ![
-              "default",
-              "logo",
-              "left",
-              "right",
-              "center",
-              "breadcrumb",
-              "boxTop",
-              "boxBottom",
-              "footer",
-              "tabTitle",
-              "tabContext",
-              "tabExtra",
-              "tabHome"
-            ].includes(k)
-          ), (name) => {
-            return {
-              name,
-              fn: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-              ])
-            };
-          })
-        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "collapse", "uniqueOpened", "defaultOpeneds", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "menuTextEllipsisTooltip", "onOpen", "onClsoe", "onItemClick", "onMouseEnter", "onMouseLeave"])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_1, [
-          _ctx.tabBar && _ctx.tabBar !== "header" ? (openBlock(), createBlock(_component_ProTabs, {
-            key: 0,
-            tabs: _ctx.tabData,
-            active: _ctx.tabActive,
-            tabStyle: _ctx.tabStyle,
-            fixedHome: _ctx.fixedHome,
-            homePath: _ctx.homeMenuPath,
-            isHome: _ctx.isHome,
-            tabContextMenu: _ctx.tabContextMenu,
-            tabContextMenus: _ctx.tabContextMenus,
-            tabSortable: _ctx.tabSortable,
-            onTabClick: _ctx.onTabClick,
-            onTabRemove: _ctx.onTabRemove,
-            onTabContextMenu: _ctx.onTabContextMenu,
-            onTabSortChange: _ctx.onTabSortChange
-          }, createSlots({ _: 2 }, [
-            renderList(Object.keys(_ctx.$slots).filter(
-              (k) => ["tabTitle", "tabContext", "tabExtra", "tabHome"].includes(k)
-            ), (name) => {
-              return {
-                name,
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-                ])
-              };
-            })
-          ]), 1032, ["tabs", "active", "tabStyle", "fixedHome", "homePath", "isHome", "tabContextMenu", "tabContextMenus", "tabSortable", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2, [
-            createElementVNode("div", _hoisted_3, [
-              renderSlot(_ctx.$slots, "default"),
-              !_ctx.hideFooter ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : createCommentVNode("", true)
-            ], 512),
-            _ctx.tabBar && _ctx.keepAlive ? (openBlock(), createBlock(_component_ProIframe, {
-              key: 0,
-              keepAlive: _ctx.keepAlive,
-              transitionName: _ctx.transitionName,
-              transitionDelay: _ctx.transitionDelay,
-              tabData: _ctx.tabData,
-              tabActive: _ctx.tabActive
-            }, null, 8, ["keepAlive", "transitionName", "transitionDelay", "tabData", "tabActive"])) : createCommentVNode("", true),
-            _ctx.backTop ? (openBlock(), createBlock(_component_ElBacktop, {
-              key: _ctx.backTopSelector,
-              target: _ctx.backTopSelector,
-              visibilityHeight: _ctx.backTopVisibilityHeight,
-              bottom: _ctx.backTopBottom,
-              right: _ctx.backTopRight
-            }, null, 8, ["target", "visibilityHeight", "bottom", "right"])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_4, null, 512)
-          ])
-        ])
+          sidebar: _ctx.sidebar
+        })
+      ]),
+      key: "0"
+    } : void 0,
+    _ctx.$slots.logoTitle ? {
+      name: "logoTitle",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "logoTitle", {
+          collapse: _ctx.collapse,
+          sidebar: _ctx.sidebar
+        })
       ]),
-      _: 3
-    }),
-    createElementVNode("div", {
-      class: "ele-admin-mask",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.updateCollapse && _ctx.updateCollapse(...args))
+      key: "1"
+    } : void 0,
+    _ctx.$slots.breadcrumb ? {
+      name: "breadcrumb",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "breadcrumb", {
+          levels: _ctx.levelData,
+          isHome: _ctx.isHome,
+          homePath: _ctx.homeMenuPath,
+          sidebar: _ctx.sidebar
+        })
+      ]),
+      key: "2"
+    } : void 0,
+    _ctx.$slots.left ? {
+      name: "left",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "left", { sidebar: _ctx.sidebar })
+      ]),
+      key: "3"
+    } : void 0,
+    _ctx.$slots.center ? {
+      name: "center",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "center", { sidebar: _ctx.sidebar })
+      ]),
+      key: "4"
+    } : void 0,
+    _ctx.$slots.right ? {
+      name: "right",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "right", { sidebar: _ctx.sidebar })
+      ]),
+      key: "5"
+    } : void 0,
+    renderList(Object.keys(_ctx.$slots).filter(
+      (k) => ![
+        "default",
+        "logo",
+        "logoTitle",
+        "breadcrumb",
+        "left",
+        "center",
+        "right",
+        "footer",
+        "body"
+      ].includes(k)
+    ), (name) => {
+      return {
+        name,
+        fn: withCtx((slotProps) => [
+          renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+        ])
+      };
     })
-  ], 2);
+  ]), 1032, ["height", "headerMenus", "headerActive", "sidebarMenus", "sidebarActive", "sideboxMenus", "sideboxActive", "tabs", "tabActive", "levels", "collapse", "compact", "maximized", "tabBar", "breadcrumb", "backTop", "headerMenuProps", "sidebarMenuProps", "sideboxMenuProps", "layout", "sidebarLayout", "headerStyle", "sidebarStyle", "tabStyle", "fixedHeader", "fixedSidebar", "fixedBody", "logoInHeader", "fixedHome", "homePath", "isHome", "tabContextMenu", "tabContextMenus", "tabSortable", "headerTitleSlot", "headerIconSlot", "sidebarTitleSlot", "sidebarIconSlot", "sideboxTitleSlot", "sideboxIconSlot", "headerCustomStyle", "sidebarCustomStyle", "sideboxCustomStyle", "tabsCustomStyle", "contentCustomStyle", "mobile", "class", "onUpdate:collapse", "onLogoClick", "onHeadMenuOpen", "onHeadMenuClose", "onHeadMenuItemClick", "onHeadMenuItemMouseenter", "onHeadMouseenter", "onHeadMouseleave", "onBoxMenuItemClick", "onBoxMenuItemMouseenter", "onBoxMouseenter", "onBoxMouseleave", "onSideMenuOpen", "onSideMenuClose", "onSideMenuItemClick", "onSideMouseenter", "onSideMouseleave", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {