ele-admin-plus 1.3.0-beta.3 → 1.3.0-beta.4

package/lib/ele-admin-layout/index.cjs

@@ -8,34 +8,44 @@ const EleBacktop = require("../ele-backtop/index");
 const LayoutSkeleton = require("./components/layout-skeleton");
 const LayoutTabs = require("./components/layout-tabs");
 const props = require("./props");
-const tabSlots = ["tabTitle", "tabExtra", "tabHome"];
-const ownSlots = [
-  "logo",
-  "logoTitle",
-  "left",
-  "right",
-  "center",
-  "breadcrumb",
-  "top",
-  "bottom",
-  "boxTop",
-  "boxBottom",
-  "body",
-  ...tabSlots
-];
-const _sfc_main = vue.defineComponent({
-  name: "EleAdminLayout",
-  components: {
-    ElScrollbar: elementPlus.ElScrollbar,
-    EleMenus,
-    EleBreadcrumb,
-    EleBacktop,
-    LayoutSkeleton,
-    LayoutTabs
-  },
+const _hoisted_1 = ["src"];
+const _hoisted_2 = {
+  key: 1,
+  class: "ele-admin-tools"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "ele-admin-breadcrumb"
+};
+const _hoisted_4 = {
+  key: 5,
+  class: "ele-admin-tools"
+};
+const _hoisted_5 = ["src"];
+const _hoisted_6 = ["src"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleAdminLayout" },
+  __name: "index",
   props: props.adminLayoutProps,
   emits: props.adminLayoutEmits,
-  setup(props$1, { emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const tabSlots = ["tabTitle", "tabExtra", "tabHome"];
+    const ownSlots = [
+      "logo",
+      "logoTitle",
+      "left",
+      "right",
+      "center",
+      "breadcrumb",
+      "top",
+      "bottom",
+      "boxTop",
+      "boxBottom",
+      "body",
+      ...tabSlots
+    ];
+    const props$1 = __props;
+    const emit = __emit;
     const [startDisableTransitionTimer] = hook.useTimer(100);
     const [startSidebarMenuTimer, stopSidebarMenuTimer] = hook.useTimer(420);
     const [startSideboxMenuTimer, stopSideboxMenuTimer] = hook.useTimer(420);
@@ -57,9 +67,7 @@ const _sfc_main = vue.defineComponent({
     );
     const isTopLayout = vue.computed(() => props$1.layout === "top");
     const isSideLayout = vue.computed(() => props$1.layout === "side");
-    const isBoxSidebar = vue.computed(
-      () => props$1.sidebarLayout === "box"
-    );
+    const isBoxSidebar = vue.computed(() => props$1.sidebarLayout === "box");
     const isMixSidebar = vue.computed(
       () => !isTopLayout.value && (props$1.sidebarLayout === "mix" || isBoxSidebar.value)
     );
@@ -71,16 +79,12 @@ const _sfc_main = vue.defineComponent({
       () => isTopLayout.value || props$1.layout === "mix"
     );
     const showHeaderTabs = vue.computed(() => props$1.tabBar === "header");
-    const isDarkHeader = vue.computed(
-      () => props$1.headerStyle === "dark"
-    );
+    const isDarkHeader = vue.computed(() => props$1.headerStyle === "dark");
     const isPrimaryHeader = vue.computed(
       () => props$1.headerStyle === "primary"
     );
     const isButtonTab = vue.computed(() => props$1.tabStyle === "button");
-    const isDarkSidebar = vue.computed(
-      () => props$1.sidebarStyle === "dark"
-    );
+    const isDarkSidebar = vue.computed(() => props$1.sidebarStyle === "dark");
     const isDarkMixSidebar = vue.computed(
       () => isMixSidebar.value && !isHeaderLogo.value && isDarkSidebar.value && (isDarkHeader.value || isPrimaryHeader.value)
     );
@@ -125,7 +129,7 @@ const _sfc_main = vue.defineComponent({
       });
     };
     const updateCollapse = (value) => {
-      const collapse = typeof value === "boolean" ? value : !props$1.collapse;
+      const collapse = !props$1.collapse;
       if (collapse !== props$1.collapse) {
         emit("update:collapse", collapse);
       }
@@ -133,11 +137,11 @@ const _sfc_main = vue.defineComponent({
     const handleLogoClick = (e) => {
       emit("logoClick", e);
     };
-    const handleHeadMenuOpen = (index2, indexPath) => {
-      emit("headMenuOpen", index2, indexPath);
+    const handleHeadMenuOpen = (index, indexPath) => {
+      emit("headMenuOpen", index, indexPath);
     };
-    const handleHeadMenuClose = (index2, indexPath) => {
-      emit("headMenuClose", index2, indexPath);
+    const handleHeadMenuClose = (index, indexPath) => {
+      emit("headMenuClose", index, indexPath);
     };
     const handleHeadMenuItemClick = (item, e) => {
       emit("headMenuItemClick", item, e);
@@ -178,11 +182,11 @@ const _sfc_main = vue.defineComponent({
     const handleBoxMouseLeave = (e) => {
       emit("boxMouseleave", e);
     };
-    const handleSideMenuOpen = (index2, indexPath) => {
-      emit("sideMenuOpen", index2, indexPath);
+    const handleSideMenuOpen = (index, indexPath) => {
+      emit("sideMenuOpen", index, indexPath);
     };
-    const handleSideMenuClose = (index2, indexPath) => {
-      emit("sideMenuClose", index2, indexPath);
+    const handleSideMenuClose = (index, indexPath) => {
+      emit("sideMenuClose", index, indexPath);
     };
     const handleSideMenuItemClick = (item, e) => {
       emit("sideMenuItemClick", item, e);
@@ -265,428 +269,356 @@ const _sfc_main = vue.defineComponent({
         emit("contentMounted", contentEl, modalsEl);
       }
     });
-    return {
-      ownSlots,
-      tabSlots,
+    __expose({
       sidebarMenuRef,
       sideboxMenuRef,
-      contentRef,
-      modalsRef,
-      isDisableTransition,
-      layoutHeight,
-      isFixedHeader,
-      isFixedSidebar,
-      isTopLayout,
-      isSideLayout,
-      isBoxSidebar,
-      isMixSidebar,
-      isMobile,
-      isHeaderLogo,
-      showHeaderMenus,
-      showHeaderTabs,
-      isDarkHeader,
-      isPrimaryHeader,
-      isButtonTab,
-      isDarkSidebar,
-      isDarkMixSidebar,
-      isGhostHeader,
-      isGhostSidebar,
-      isCollapseSidebar,
-      isCollapseMobile,
-      getContentEl,
-      getModalsEl,
-      updateCollapse,
-      handleLogoClick,
-      handleHeadMenuOpen,
-      handleHeadMenuClose,
-      handleHeadMenuItemClick,
-      handleHeadMenuItemMouseenter,
-      handleHeadMenuItemMouseleave,
-      handleHeadMouseenter,
-      handleHeadMouseleave,
-      handleBoxMenuItemClick,
-      handleBoxMenuItemMouseenter,
-      handleBoxMenuItemMouseleave,
-      handleBoxMouseEnter,
-      handleBoxMouseLeave,
-      handleSideMenuOpen,
-      handleSideMenuClose,
-      handleSideMenuItemClick,
-      handleSideMouseEnter,
-      handleSideMouseLeave,
-      handleTabClick,
-      handleTabRemove,
-      handleTabContextMenu,
-      handleTabSortChange
-    };
-  }
-});
-const _export_sfc = (sfc, props2) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props2) {
-    target[key] = val;
-  }
-  return target;
-};
-const _hoisted_1 = ["src"];
-const _hoisted_2 = {
-  key: 1,
-  class: "ele-admin-tools"
-};
-const _hoisted_3 = {
-  key: 2,
-  class: "ele-admin-breadcrumb"
-};
-const _hoisted_4 = {
-  key: 5,
-  class: "ele-admin-tools"
-};
-const _hoisted_5 = ["src"];
-const _hoisted_6 = ["src"];
-const _hoisted_7 = {
-  ref: "modalsRef",
-  class: "ele-admin-modals"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_EleBreadcrumb = vue.resolveComponent("EleBreadcrumb");
-  const _component_EleMenus = vue.resolveComponent("EleMenus");
-  const _component_LayoutTabs = vue.resolveComponent("LayoutTabs");
-  const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
-  const _component_EleBacktop = vue.resolveComponent("EleBacktop");
-  const _component_LayoutSkeleton = vue.resolveComponent("LayoutSkeleton");
-  return vue.openBlock(), vue.createBlock(_component_LayoutSkeleton, {
-    isHeaderLogo: _ctx.isHeaderLogo,
-    class: vue.normalizeClass([
-      { "is-fixed-body": _ctx.fixedBody },
-      { "is-transition-disabled": _ctx.isDisableTransition },
-      { "is-maximized": _ctx.maximized },
-      { "is-expanded": _ctx.maximized === "expanded" },
-      { "is-mobile": _ctx.isMobile },
-      { "is-collapse": _ctx.isCollapseMobile }
-    ]),
-    style: vue.normalizeStyle({
-      minHeight: _ctx.layoutHeight,
-      height: _ctx.fixedBody ? _ctx.layoutHeight : void 0
-    })
-  }, {
-    head: vue.withCtx(() => [
-      !_ctx.isSideLayout ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        class: vue.normalizeClass([
-          "ele-admin-header",
-          { "is-dark": _ctx.isDarkHeader },
-          { "is-primary": _ctx.isPrimaryHeader },
-          { "is-ghost": _ctx.isGhostHeader },
-          { "show-divider": _ctx.tabBar && !_ctx.showHeaderTabs && !_ctx.isButtonTab },
-          { "is-fixed": _ctx.isFixedHeader }
-        ]),
-        style: vue.normalizeStyle(_ctx.headerCustomStyle),
-        onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.handleHeadMouseenter && _ctx.handleHeadMouseenter(...args)),
-        onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.handleHeadMouseleave && _ctx.handleHeadMouseleave(...args))
-      }, [
-        _ctx.isHeaderLogo && (_ctx.logoSrc || _ctx.logoTitle || _ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: "ele-admin-logo",
-          style: vue.normalizeStyle(_ctx.logoStyle)
-        }, [
-          _ctx.logoSrc || _ctx.$slots.logo ? vue.renderSlot(_ctx.$slots, "logo", { key: 0 }, () => [
-            vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_1)
-          ]) : vue.createCommentVNode("", true),
-          _ctx.logoTitle || _ctx.$slots.logoTitle ? vue.renderSlot(_ctx.$slots, "logoTitle", { key: 1 }, () => [
-            vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
-          ]) : vue.createCommentVNode("", true)
-        ], 4)) : vue.createCommentVNode("", true),
-        _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-          vue.renderSlot(_ctx.$slots, "left")
-        ])) : vue.createCommentVNode("", true),
-        _ctx.breadcrumb ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-          vue.renderSlot(_ctx.$slots, "breadcrumb", {}, () => [
-            _ctx.levels && _ctx.levels.length ? (vue.openBlock(), vue.createBlock(_component_EleBreadcrumb, vue.mergeProps({ key: 0 }, _ctx.breadcrumb === true ? {} : _ctx.breadcrumb, { items: _ctx.levels }), null, 16, ["items"])) : vue.createCommentVNode("", true)
-          ])
-        ])) : vue.createCommentVNode("", true),
-        vue.renderSlot(_ctx.$slots, "center"),
-        !_ctx.showHeaderTabs || _ctx.showHeaderMenus ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 3,
-          class: "ele-admin-menus",
-          style: vue.normalizeStyle(_ctx.headerMenusStyle)
-        }, [
-          _ctx.showHeaderMenus && _ctx.headerMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
-            key: 0,
-            mode: "horizontal",
-            theme: _ctx.isDarkHeader || _ctx.isPrimaryHeader ? "dark" : "light",
-            popupTheme: _ctx.isDarkHeader ? "dark" : "light",
-            defaultActive: _ctx.headerActive
-          }, _ctx.headerMenuProps || {}, {
-            items: _ctx.headerMenus,
-            onOpen: _ctx.handleHeadMenuOpen,
-            onClose: _ctx.handleHeadMenuClose,
-            onItemClick: _ctx.handleHeadMenuItemClick,
-            onItemMouseenter: _ctx.handleHeadMenuItemMouseenter,
-            onItemMouseleave: _ctx.handleHeadMenuItemMouseleave
-          }), vue.createSlots({ _: 2 }, [
-            _ctx.headerIconSlot && !_ctx.ownSlots.includes(_ctx.headerIconSlot) && _ctx.$slots[_ctx.headerIconSlot] ? {
-              name: "icon",
-              fn: vue.withCtx((slotProps) => [
-                vue.renderSlot(_ctx.$slots, _ctx.headerIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-              ]),
-              key: "0"
-            } : void 0,
-            _ctx.headerTitleSlot && !_ctx.ownSlots.includes(_ctx.headerTitleSlot) && _ctx.$slots[_ctx.headerTitleSlot] ? {
-              name: "title",
-              fn: vue.withCtx((slotProps) => [
-                vue.renderSlot(_ctx.$slots, _ctx.headerTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1040, ["theme", "popupTheme", "defaultActive", "items", "onOpen", "onClose", "onItemClick", "onItemMouseenter", "onItemMouseleave"])) : vue.createCommentVNode("", true)
-        ], 4)) : vue.createCommentVNode("", true),
-        _ctx.showHeaderTabs ? (vue.openBlock(), vue.createBlock(_component_LayoutTabs, {
-          key: 4,
-          tabs: _ctx.tabs,
-          active: _ctx.tabActive,
-          fixedHome: _ctx.fixedHome,
-          homePath: _ctx.homePath,
-          isHome: _ctx.isHome,
-          tabStyle: _ctx.tabStyle,
-          tabContextMenu: _ctx.tabContextMenu,
-          tabContextMenus: _ctx.tabContextMenus,
-          tabSortable: _ctx.tabSortable,
-          class: vue.normalizeClass([{ "is-fixed-home": _ctx.fixedHome }]),
-          style: vue.normalizeStyle(_ctx.tabsCustomStyle),
-          onTabClick: _ctx.handleTabClick,
-          onTabRemove: _ctx.handleTabRemove,
-          onTabContextMenu: _ctx.handleTabContextMenu,
-          onTabSortChange: _ctx.handleTabSortChange
-        }, vue.createSlots({ _: 2 }, [
-          vue.renderList(Object.keys(_ctx.$slots).filter(
-            (k) => _ctx.tabSlots.includes(k)
-          ), (name) => {
-            return {
-              name,
-              fn: vue.withCtx((slotProps) => [
-                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-              ])
-            };
-          })
-        ]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true),
-        _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-          vue.renderSlot(_ctx.$slots, "right")
-        ])) : vue.createCommentVNode("", true)
-      ], 38)) : vue.createCommentVNode("", true)
-    ]),
-    side: vue.withCtx(() => [
-      !_ctx.isTopLayout ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
+      getContentEl
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(LayoutSkeleton, {
+        isHeaderLogo: isHeaderLogo.value,
         class: vue.normalizeClass([
-          "ele-admin-side",
-          { "is-fixed": _ctx.isFixedSidebar },
-          { "show-placeholder": _ctx.isFixedSidebar && _ctx.isHeaderLogo },
-          { "is-collapse": !_ctx.isMobile && !_ctx.isBoxSidebar && _ctx.isCollapseSidebar },
-          { "is-mix": !_ctx.isMobile && !_ctx.isBoxSidebar && _ctx.isMixSidebar },
-          { "is-compact": !_ctx.isMobile && _ctx.compact },
-          { "is-box": !_ctx.isMobile && _ctx.isBoxSidebar }
+          { "is-fixed-body": _ctx.fixedBody },
+          { "is-transition-disabled": isDisableTransition.value },
+          { "is-maximized": _ctx.maximized },
+          { "is-expanded": _ctx.maximized === "expanded" },
+          { "is-mobile": isMobile.value },
+          { "is-collapse": isCollapseMobile.value }
         ]),
-        style: vue.normalizeStyle({ height: _ctx.isFixedSidebar ? _ctx.layoutHeight : void 0 })
-      }, [
-        _ctx.isMixSidebar ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass([
-            "ele-admin-sidebox",
-            { "is-dark": _ctx.isDarkSidebar },
-            { "is-ghost": _ctx.isGhostSidebar },
-            { "show-divider": !_ctx.isCollapseSidebar && !_ctx.isBoxSidebar },
-            { "is-compact": _ctx.compact }
-          ]),
-          style: vue.normalizeStyle(_ctx.sideboxCustomStyle),
-          onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleBoxMouseEnter && _ctx.handleBoxMouseEnter(...args)),
-          onMouseleave: _cache[3] || (_cache[3] = (...args) => _ctx.handleBoxMouseLeave && _ctx.handleBoxMouseLeave(...args))
-        }, [
-          !_ctx.isHeaderLogo && (_ctx.logoSrc || _ctx.$slots.logo) ? (vue.openBlock(), vue.createElementBlock("div", {
+        style: vue.normalizeStyle({
+          minHeight: layoutHeight.value,
+          height: _ctx.fixedBody ? layoutHeight.value : void 0
+        })
+      }, {
+        head: vue.withCtx(() => [
+          !isSideLayout.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: "ele-admin-logo",
-            style: vue.normalizeStyle(_ctx.logoStyle)
-          }, [
-            vue.renderSlot(_ctx.$slots, "logo", {}, () => [
-              vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_5)
-            ])
-          ], 4)) : vue.createCommentVNode("", true),
-          vue.renderSlot(_ctx.$slots, "boxTop"),
-          vue.createVNode(_component_ElScrollbar, {
-            class: "ele-admin-menus",
-            style: vue.normalizeStyle(_ctx.sideboxMenusStyle)
-          }, {
-            default: vue.withCtx(() => [
-              _ctx.sideboxMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
-                key: 0,
-                ref: "sideboxMenuRef",
-                mode: "compact",
-                uniqueOpened: true,
-                collapseTransition: false,
-                theme: _ctx.sidebarStyle,
-                defaultActive: _ctx.sideboxActive,
-                collapse: _ctx.compact
-              }, _ctx.sideboxMenuProps || {}, {
-                items: _ctx.sideboxMenus,
-                onItemClick: _ctx.handleBoxMenuItemClick,
-                onItemMouseenter: _ctx.handleBoxMenuItemMouseenter,
-                onItemMouseleave: _ctx.handleBoxMenuItemMouseleave
-              }), vue.createSlots({ _: 2 }, [
-                _ctx.sideboxIconSlot && !_ctx.ownSlots.includes(_ctx.sideboxIconSlot) && _ctx.$slots[_ctx.sideboxIconSlot] ? {
-                  name: "icon",
-                  fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, _ctx.sideboxIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-                  ]),
-                  key: "0"
-                } : void 0,
-                _ctx.sideboxTitleSlot && !_ctx.ownSlots.includes(_ctx.sideboxTitleSlot) && _ctx.$slots[_ctx.sideboxTitleSlot] ? {
-                  name: "title",
-                  fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, _ctx.sideboxTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-                  ]),
-                  key: "1"
-                } : void 0
-              ]), 1040, ["theme", "defaultActive", "collapse", "items", "onItemClick", "onItemMouseenter", "onItemMouseleave"])) : vue.createCommentVNode("", true)
+            class: vue.normalizeClass([
+              "ele-admin-header",
+              { "is-dark": isDarkHeader.value },
+              { "is-primary": isPrimaryHeader.value },
+              { "is-ghost": isGhostHeader.value },
+              { "show-divider": _ctx.tabBar && !showHeaderTabs.value && !isButtonTab.value },
+              { "is-fixed": isFixedHeader.value }
             ]),
-            _: 3
-          }, 8, ["style"]),
-          vue.renderSlot(_ctx.$slots, "boxBottom")
-        ], 38)) : vue.createCommentVNode("", true),
-        !_ctx.isBoxSidebar ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: vue.normalizeClass([
-            "ele-admin-sidebar",
-            { "is-dark": _ctx.isMixSidebar ? _ctx.isDarkMixSidebar : _ctx.isDarkSidebar },
-            { "is-ghost": _ctx.isGhostSidebar },
-            { "is-mix": _ctx.isMixSidebar },
-            { "is-collapse": _ctx.isCollapseSidebar }
-          ]),
-          style: vue.normalizeStyle(_ctx.sidebarCustomStyle),
-          onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleSideMouseEnter && _ctx.handleSideMouseEnter(...args)),
-          onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleSideMouseLeave && _ctx.handleSideMouseLeave(...args))
-        }, [
-          _ctx.isMixSidebar ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            !_ctx.isHeaderLogo && (_ctx.logoTitle || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
+            style: vue.normalizeStyle(_ctx.headerCustomStyle),
+            onMouseenter: handleHeadMouseenter,
+            onMouseleave: handleHeadMouseleave
+          }, [
+            isHeaderLogo.value && (_ctx.logoSrc || _ctx.logoTitle || _ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: "ele-admin-logo-title",
-              style: vue.normalizeStyle(_ctx.logoTitleStyle)
+              class: "ele-admin-logo",
+              style: vue.normalizeStyle(_ctx.logoStyle),
+              onClick: handleLogoClick
             }, [
-              vue.renderSlot(_ctx.$slots, "logoTitle", {}, () => [
+              _ctx.logoSrc || _ctx.$slots.logo ? vue.renderSlot(_ctx.$slots, "logo", { key: 0 }, () => [
+                vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_1)
+              ]) : vue.createCommentVNode("", true),
+              _ctx.logoTitle || _ctx.$slots.logoTitle ? vue.renderSlot(_ctx.$slots, "logoTitle", { key: 1 }, () => [
                 vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
+              ]) : vue.createCommentVNode("", true)
+            ], 4)) : vue.createCommentVNode("", true),
+            _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "left")
+            ])) : vue.createCommentVNode("", true),
+            _ctx.breadcrumb ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+              vue.renderSlot(_ctx.$slots, "breadcrumb", {}, () => [
+                _ctx.levels && _ctx.levels.length ? (vue.openBlock(), vue.createBlock(EleBreadcrumb, vue.mergeProps({ key: 0 }, _ctx.breadcrumb === true ? {} : _ctx.breadcrumb, { items: _ctx.levels }), null, 16, ["items"])) : vue.createCommentVNode("", true)
               ])
-            ], 4)) : vue.createCommentVNode("", true)
-          ], 64)) : !_ctx.isHeaderLogo && (_ctx.logoSrc || _ctx.logoTitle || _ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
-            class: "ele-admin-logo",
-            style: vue.normalizeStyle(_ctx.logoStyle)
-          }, [
-            _ctx.logoSrc || _ctx.$slots.logo ? vue.renderSlot(_ctx.$slots, "logo", { key: 0 }, () => [
-              vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_6)
-            ]) : vue.createCommentVNode("", true),
-            _ctx.logoTitle || _ctx.$slots.logoTitle ? vue.renderSlot(_ctx.$slots, "logoTitle", { key: 1 }, () => [
-              vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
-            ]) : vue.createCommentVNode("", true)
-          ], 4)) : vue.createCommentVNode("", true),
-          vue.renderSlot(_ctx.$slots, "top"),
-          vue.createVNode(_component_ElScrollbar, {
-            class: "ele-admin-menus",
-            style: vue.normalizeStyle(_ctx.sidebarMenusStyle)
-          }, {
-            default: vue.withCtx(() => [
-              _ctx.sidebarMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
+            ])) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "center"),
+            !showHeaderTabs.value || showHeaderMenus.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 3,
+              class: "ele-admin-menus",
+              style: vue.normalizeStyle(_ctx.headerMenusStyle)
+            }, [
+              showHeaderMenus.value && _ctx.headerMenus ? (vue.openBlock(), vue.createBlock(EleMenus, vue.mergeProps({
                 key: 0,
-                ref: "sidebarMenuRef",
-                uniqueOpened: true,
-                collapseTransition: false,
-                theme: _ctx.isMixSidebar && !_ctx.isDarkMixSidebar ? void 0 : _ctx.sidebarStyle,
-                defaultActive: _ctx.sidebarActive,
-                collapse: _ctx.isMixSidebar ? false : _ctx.isCollapseSidebar
-              }, _ctx.sidebarMenuProps || {}, {
-                items: _ctx.sidebarMenus,
-                onOpen: _ctx.handleSideMenuOpen,
-                onClose: _ctx.handleSideMenuClose,
-                onItemClick: _ctx.handleSideMenuItemClick
+                mode: "horizontal",
+                theme: isDarkHeader.value || isPrimaryHeader.value ? "dark" : "light",
+                popupTheme: isDarkHeader.value ? "dark" : "light",
+                defaultActive: _ctx.headerActive
+              }, _ctx.headerMenuProps || {}, {
+                items: _ctx.headerMenus,
+                onOpen: handleHeadMenuOpen,
+                onClose: handleHeadMenuClose,
+                onItemClick: handleHeadMenuItemClick,
+                onItemMouseenter: handleHeadMenuItemMouseenter,
+                onItemMouseleave: handleHeadMenuItemMouseleave
               }), vue.createSlots({ _: 2 }, [
-                _ctx.sidebarIconSlot && !_ctx.ownSlots.includes(_ctx.sidebarIconSlot) && _ctx.$slots[_ctx.sidebarIconSlot] ? {
+                _ctx.headerIconSlot && !ownSlots.includes(_ctx.headerIconSlot) && _ctx.$slots[_ctx.headerIconSlot] ? {
                   name: "icon",
                   fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, _ctx.sidebarIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                    vue.renderSlot(_ctx.$slots, _ctx.headerIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
                   ]),
                   key: "0"
                 } : void 0,
-                _ctx.sidebarTitleSlot && !_ctx.ownSlots.includes(_ctx.sidebarTitleSlot) && _ctx.$slots[_ctx.sidebarTitleSlot] ? {
+                _ctx.headerTitleSlot && !ownSlots.includes(_ctx.headerTitleSlot) && _ctx.$slots[_ctx.headerTitleSlot] ? {
                   name: "title",
                   fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, _ctx.sidebarTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                    vue.renderSlot(_ctx.$slots, _ctx.headerTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
                   ]),
                   key: "1"
                 } : void 0
-              ]), 1040, ["theme", "defaultActive", "collapse", "items", "onOpen", "onClose", "onItemClick"])) : vue.createCommentVNode("", true)
+              ]), 1040, ["theme", "popupTheme", "defaultActive", "items"])) : vue.createCommentVNode("", true)
+            ], 4)) : vue.createCommentVNode("", true),
+            showHeaderTabs.value ? (vue.openBlock(), vue.createBlock(LayoutTabs, {
+              key: 4,
+              tabs: _ctx.tabs,
+              active: _ctx.tabActive,
+              fixedHome: _ctx.fixedHome,
+              homePath: _ctx.homePath,
+              isHome: _ctx.isHome,
+              tabStyle: _ctx.tabStyle,
+              tabContextMenu: _ctx.tabContextMenu,
+              tabContextMenus: _ctx.tabContextMenus,
+              tabSortable: _ctx.tabSortable,
+              class: vue.normalizeClass([{ "is-fixed-home": _ctx.fixedHome }]),
+              style: vue.normalizeStyle(_ctx.tabsCustomStyle),
+              onTabClick: handleTabClick,
+              onTabRemove: handleTabRemove,
+              onTabContextMenu: handleTabContextMenu,
+              onTabSortChange: handleTabSortChange
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(_ctx.$slots).filter(
+                (k) => tabSlots.includes(k)
+              ), (name) => {
+                return {
+                  name,
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style"])) : vue.createCommentVNode("", true),
+            _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              vue.renderSlot(_ctx.$slots, "right")
+            ])) : vue.createCommentVNode("", true)
+          ], 38)) : vue.createCommentVNode("", true)
+        ]),
+        side: vue.withCtx(() => [
+          !isTopLayout.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass([
+              "ele-admin-side",
+              { "is-fixed": isFixedSidebar.value },
+              { "show-placeholder": isFixedSidebar.value && isHeaderLogo.value },
+              { "is-collapse": !isMobile.value && !isBoxSidebar.value && isCollapseSidebar.value },
+              { "is-mix": !isMobile.value && !isBoxSidebar.value && isMixSidebar.value },
+              { "is-compact": !isMobile.value && _ctx.compact },
+              { "is-box": !isMobile.value && isBoxSidebar.value }
             ]),
-            _: 3
-          }, 8, ["style"]),
-          vue.renderSlot(_ctx.$slots, "bottom")
-        ], 38)) : vue.createCommentVNode("", true)
-      ], 6)) : vue.createCommentVNode("", true)
-    ]),
-    tabs: vue.withCtx(() => [
-      _ctx.tabBar && !_ctx.showHeaderTabs ? (vue.openBlock(), vue.createBlock(_component_LayoutTabs, {
-        key: 0,
-        tabs: _ctx.tabs,
-        active: _ctx.tabActive,
-        fixedHome: _ctx.fixedHome,
-        homePath: _ctx.homePath,
-        isHome: _ctx.isHome,
-        tabStyle: _ctx.tabStyle,
-        tabContextMenu: _ctx.tabContextMenu,
-        tabContextMenus: _ctx.tabContextMenus,
-        tabSortable: _ctx.tabSortable,
-        class: vue.normalizeClass([
-          { "is-fixed-home": _ctx.fixedHome },
-          { "is-fixed": _ctx.isFixedHeader },
-          { "is-fixed-top": _ctx.isFixedHeader && (_ctx.isSideLayout || _ctx.maximized) }
+            style: vue.normalizeStyle({ height: isFixedSidebar.value ? layoutHeight.value : void 0 })
+          }, [
+            isMixSidebar.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass([
+                "ele-admin-sidebox",
+                { "is-dark": isDarkSidebar.value },
+                { "is-ghost": isGhostSidebar.value },
+                { "show-divider": !isCollapseSidebar.value && !isBoxSidebar.value },
+                { "is-compact": _ctx.compact }
+              ]),
+              style: vue.normalizeStyle(_ctx.sideboxCustomStyle),
+              onMouseenter: handleBoxMouseEnter,
+              onMouseleave: handleBoxMouseLeave
+            }, [
+              !isHeaderLogo.value && (_ctx.logoSrc || _ctx.$slots.logo) ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "ele-admin-logo",
+                style: vue.normalizeStyle(_ctx.logoStyle),
+                onClick: handleLogoClick
+              }, [
+                vue.renderSlot(_ctx.$slots, "logo", {}, () => [
+                  vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_5)
+                ])
+              ], 4)) : vue.createCommentVNode("", true),
+              vue.renderSlot(_ctx.$slots, "boxTop"),
+              vue.createVNode(vue.unref(elementPlus.ElScrollbar), {
+                class: "ele-admin-menus",
+                style: vue.normalizeStyle(_ctx.sideboxMenusStyle)
+              }, {
+                default: vue.withCtx(() => [
+                  _ctx.sideboxMenus ? (vue.openBlock(), vue.createBlock(EleMenus, vue.mergeProps({
+                    key: 0,
+                    ref_key: "sideboxMenuRef",
+                    ref: sideboxMenuRef,
+                    mode: "compact",
+                    uniqueOpened: true,
+                    collapseTransition: false,
+                    theme: _ctx.sidebarStyle,
+                    defaultActive: _ctx.sideboxActive,
+                    collapse: _ctx.compact
+                  }, _ctx.sideboxMenuProps || {}, {
+                    items: _ctx.sideboxMenus,
+                    onItemClick: handleBoxMenuItemClick,
+                    onItemMouseenter: handleBoxMenuItemMouseenter,
+                    onItemMouseleave: handleBoxMenuItemMouseleave
+                  }), vue.createSlots({ _: 2 }, [
+                    _ctx.sideboxIconSlot && !ownSlots.includes(_ctx.sideboxIconSlot) && _ctx.$slots[_ctx.sideboxIconSlot] ? {
+                      name: "icon",
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, _ctx.sideboxIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    _ctx.sideboxTitleSlot && !ownSlots.includes(_ctx.sideboxTitleSlot) && _ctx.$slots[_ctx.sideboxTitleSlot] ? {
+                      name: "title",
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, _ctx.sideboxTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ]),
+                      key: "1"
+                    } : void 0
+                  ]), 1040, ["theme", "defaultActive", "collapse", "items"])) : vue.createCommentVNode("", true)
+                ]),
+                _: 3
+              }, 8, ["style"]),
+              vue.renderSlot(_ctx.$slots, "boxBottom")
+            ], 38)) : vue.createCommentVNode("", true),
+            !isBoxSidebar.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 1,
+              class: vue.normalizeClass([
+                "ele-admin-sidebar",
+                { "is-dark": isMixSidebar.value ? isDarkMixSidebar.value : isDarkSidebar.value },
+                { "is-ghost": isGhostSidebar.value },
+                { "is-mix": isMixSidebar.value },
+                { "is-collapse": isCollapseSidebar.value }
+              ]),
+              style: vue.normalizeStyle(_ctx.sidebarCustomStyle),
+              onMouseenter: handleSideMouseEnter,
+              onMouseleave: handleSideMouseLeave
+            }, [
+              isMixSidebar.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                !isHeaderLogo.value && (_ctx.logoTitle || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  class: "ele-admin-logo-title",
+                  style: vue.normalizeStyle(_ctx.logoTitleStyle)
+                }, [
+                  vue.renderSlot(_ctx.$slots, "logoTitle", {}, () => [
+                    vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
+                  ])
+                ], 4)) : vue.createCommentVNode("", true)
+              ], 64)) : !isHeaderLogo.value && (_ctx.logoSrc || _ctx.logoTitle || _ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: "ele-admin-logo",
+                style: vue.normalizeStyle(_ctx.logoStyle),
+                onClick: handleLogoClick
+              }, [
+                _ctx.logoSrc || _ctx.$slots.logo ? vue.renderSlot(_ctx.$slots, "logo", { key: 0 }, () => [
+                  vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_6)
+                ]) : vue.createCommentVNode("", true),
+                _ctx.logoTitle || _ctx.$slots.logoTitle ? vue.renderSlot(_ctx.$slots, "logoTitle", { key: 1 }, () => [
+                  vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
+                ]) : vue.createCommentVNode("", true)
+              ], 4)) : vue.createCommentVNode("", true),
+              vue.renderSlot(_ctx.$slots, "top"),
+              vue.createVNode(vue.unref(elementPlus.ElScrollbar), {
+                class: "ele-admin-menus",
+                style: vue.normalizeStyle(_ctx.sidebarMenusStyle)
+              }, {
+                default: vue.withCtx(() => [
+                  _ctx.sidebarMenus ? (vue.openBlock(), vue.createBlock(EleMenus, vue.mergeProps({
+                    key: 0,
+                    ref_key: "sidebarMenuRef",
+                    ref: sidebarMenuRef,
+                    uniqueOpened: true,
+                    collapseTransition: false,
+                    theme: isMixSidebar.value && !isDarkMixSidebar.value ? void 0 : _ctx.sidebarStyle,
+                    defaultActive: _ctx.sidebarActive,
+                    collapse: isMixSidebar.value ? false : isCollapseSidebar.value
+                  }, _ctx.sidebarMenuProps || {}, {
+                    items: _ctx.sidebarMenus,
+                    onOpen: handleSideMenuOpen,
+                    onClose: handleSideMenuClose,
+                    onItemClick: handleSideMenuItemClick
+                  }), vue.createSlots({ _: 2 }, [
+                    _ctx.sidebarIconSlot && !ownSlots.includes(_ctx.sidebarIconSlot) && _ctx.$slots[_ctx.sidebarIconSlot] ? {
+                      name: "icon",
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, _ctx.sidebarIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    _ctx.sidebarTitleSlot && !ownSlots.includes(_ctx.sidebarTitleSlot) && _ctx.$slots[_ctx.sidebarTitleSlot] ? {
+                      name: "title",
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, _ctx.sidebarTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ]),
+                      key: "1"
+                    } : void 0
+                  ]), 1040, ["theme", "defaultActive", "collapse", "items"])) : vue.createCommentVNode("", true)
+                ]),
+                _: 3
+              }, 8, ["style"]),
+              vue.renderSlot(_ctx.$slots, "bottom")
+            ], 38)) : vue.createCommentVNode("", true)
+          ], 6)) : vue.createCommentVNode("", true)
         ]),
-        style: vue.normalizeStyle(_ctx.tabsCustomStyle),
-        onTabClick: _ctx.handleTabClick,
-        onTabRemove: _ctx.handleTabRemove,
-        onTabContextMenu: _ctx.handleTabContextMenu,
-        onTabSortChange: _ctx.handleTabSortChange
-      }, vue.createSlots({ _: 2 }, [
-        vue.renderList(Object.keys(_ctx.$slots).filter(
-          (k) => _ctx.tabSlots.includes(k)
-        ), (name) => {
-          return {
-            name,
-            fn: vue.withCtx((slotProps) => [
-              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-            ])
-          };
-        })
-      ]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true)
-    ]),
-    body: vue.withCtx(() => [
-      vue.createElementVNode("div", {
-        ref: "contentRef",
-        class: "ele-admin-content",
-        style: vue.normalizeStyle(_ctx.contentCustomStyle)
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 4),
-      vue.renderSlot(_ctx.$slots, "body"),
-      _ctx.backTop ? (vue.openBlock(), vue.createBlock(_component_EleBacktop, vue.mergeProps({
-        key: 0,
-        target: _ctx.fixedBody && _ctx.contentRef ? _ctx.contentRef : void 0,
-        style: _ctx.fixedBody ? { position: "absolute" } : void 0
-      }, _ctx.backTop === true ? {} : _ctx.backTop), null, 16, ["target", "style"])) : vue.createCommentVNode("", true),
-      vue.createElementVNode("div", _hoisted_7, null, 512)
-    ]),
-    default: vue.withCtx(() => [
-      vue.createElementVNode("div", {
-        class: "ele-admin-mask",
-        onClick: _cache[6] || (_cache[6] = ($event) => _ctx.updateCollapse())
-      })
-    ]),
-    _: 3
-  }, 8, ["isHeaderLogo", "class", "style"]);
-}
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-module.exports = index;
+        tabs: vue.withCtx(() => [
+          _ctx.tabBar && !showHeaderTabs.value ? (vue.openBlock(), vue.createBlock(LayoutTabs, {
+            key: 0,
+            tabs: _ctx.tabs,
+            active: _ctx.tabActive,
+            fixedHome: _ctx.fixedHome,
+            homePath: _ctx.homePath,
+            isHome: _ctx.isHome,
+            tabStyle: _ctx.tabStyle,
+            tabContextMenu: _ctx.tabContextMenu,
+            tabContextMenus: _ctx.tabContextMenus,
+            tabSortable: _ctx.tabSortable,
+            class: vue.normalizeClass([
+              { "is-fixed-home": _ctx.fixedHome },
+              { "is-fixed": isFixedHeader.value },
+              { "is-fixed-top": isFixedHeader.value && (isSideLayout.value || _ctx.maximized) }
+            ]),
+            style: vue.normalizeStyle(_ctx.tabsCustomStyle),
+            onTabClick: handleTabClick,
+            onTabRemove: handleTabRemove,
+            onTabContextMenu: handleTabContextMenu,
+            onTabSortChange: handleTabSortChange
+          }, vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots).filter(
+              (k) => tabSlots.includes(k)
+            ), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style"])) : vue.createCommentVNode("", true)
+        ]),
+        body: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            ref_key: "contentRef",
+            ref: contentRef,
+            class: "ele-admin-content",
+            style: vue.normalizeStyle(_ctx.contentCustomStyle)
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4),
+          vue.renderSlot(_ctx.$slots, "body"),
+          _ctx.backTop ? (vue.openBlock(), vue.createBlock(EleBacktop, vue.mergeProps({
+            key: 0,
+            target: _ctx.fixedBody && contentRef.value ? contentRef.value : void 0,
+            style: _ctx.fixedBody ? { position: "absolute" } : void 0
+          }, _ctx.backTop === true ? {} : _ctx.backTop), null, 16, ["target", "style"])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            ref_key: "modalsRef",
+            ref: modalsRef,
+            class: "ele-admin-modals"
+          }, null, 512)
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: "ele-admin-mask",
+            onClick: _cache[0] || (_cache[0] = ($event) => updateCollapse())
+          })
+        ]),
+        _: 3
+      }, 8, ["isHeaderLogo", "class", "style"]);
+    };
+  }
+});
+module.exports = _sfc_main;