ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,669 @@
+"use strict";
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const licenseUtil = require("../utils/license-util");
+const keys = require("../ele-config-provider/keys");
+const ProHeader = require("./components/pro-header");
+const ProSidebar = require("./components/pro-sidebar");
+const ProSidebox = require("./components/pro-sidebox");
+const ProTabBar = require("./components/pro-tab-bar");
+const util = require("./util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleProLayout",
+  components: {
+    ElBacktop: elementPlus.ElBacktop,
+    ProHeader,
+    ProSidebar,
+    ProSidebox,
+    ProTabBar
+  },
+  props: props.proLayoutProps,
+  emits: props.proLayoutEmits,
+  setup(props2, { emit }) {
+    const { currentRoute } = vueRouter.useRouter();
+    const { authenticated } = licenseUtil.useLicense();
+    const timers = { transition: null, resize: null };
+    const contentRef = vue.ref(null);
+    const levelData = vue.ref([]);
+    const tabData = vue.ref([]);
+    const tabActive = vue.ref(util.getHomePath(props2.homePath));
+    const menuData = vue.ref([]);
+    const headerData = vue.ref([]);
+    const headerActive = vue.ref();
+    const sidebarData = vue.ref([]);
+    const sidebarActive = vue.ref();
+    const sideboxData = vue.ref([]);
+    const sideboxActive = vue.ref();
+    const hideSidebar = vue.ref(false);
+    const hideSidebox = vue.ref(false);
+    const hideFooter = vue.ref(false);
+    const homeMenuPath = vue.ref(util.getHomePath(props2.homePath));
+    const isHome = vue.ref(false);
+    const mobile = vue.ref(util.isMobile(props2.responsive));
+    const isTablePage = vue.ref(false);
+    const topLayout = vue.computed(() => props2.layout === "top");
+    const mixLayout = vue.computed(() => props2.layout === "mix");
+    const mixSidebar = vue.computed(() => props2.sidebarLayout === "mix");
+    const sidebox = vue.computed(() => {
+      return !hideSidebox.value && sideboxData.value.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      });
+    });
+    const sidebar = vue.computed(() => {
+      return !hideSidebox.value && !hideSidebar.value && sidebarData.value.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      });
+    });
+    const layoutClass = vue.computed(() => {
+      const hasSide = sidebox.value || sidebar.value;
+      const fixedSide = props2.fixedSidebar && !props2.fixedBody && hasSide;
+      const logoAuto = props2.logoInHeader || topLayout.value || !hasSide;
+      return [
+        "ele-admin-layout",
+        // 折叠侧栏
+        { "ele-admin-collapse": props2.collapse },
+        // 双侧栏折叠一级
+        { "ele-admin-compact": props2.compact && sidebox.value },
+        // 双侧栏
+        { "ele-admin-mix-sidebar": mixSidebar.value && sidebox.value },
+        // 固定顶栏
+        { "ele-admin-fixed-header": props2.fixedHeader && !props2.fixedBody },
+        // 固定侧栏
+        { "ele-admin-fixed-sidebar": fixedSide },
+        // 固定主体
+        { "ele-admin-fixed-body": props2.fixedBody },
+        // 暗色侧栏
+        { "ele-admin-dark-sidebar": props2.sidebarStyle === "dark" },
+        // 图标置于顶栏
+        { "ele-admin-logo-auto": logoAuto && !mobile.value },
+        // 开启页签栏
+        { "ele-admin-open-tab": props2.tabBar },
+        // 卡片风格页签
+        { "ele-admin-tab-card": props2.tabStyle === "button" },
+        // 主体定宽
+        { "ele-admin-limited": !props2.fluid },
+        // 内容区域全屏
+        { "ele-admin-maximized": props2.maximized },
+        // 内容区域全屏不显示页签栏
+        { "ele-admin-expanded": props2.maximized && props2.expanded },
+        // 开启响应式
+        { "ele-admin-mobile": mobile.value }
+      ];
+    });
+    const sidebarCollapse = vue.computed(() => {
+      return mobile.value || mixSidebar.value ? false : props2.collapse;
+    });
+    const sidebarTheme = vue.computed(() => {
+      if (!(mixSidebar.value && !mobile.value) && props2.sidebarStyle === "dark") {
+        return "dark";
+      }
+      return "light";
+    });
+    const updateCollapse = (value) => {
+      const collapse = typeof value === "boolean" ? value : !props2.collapse;
+      emit("update:collapse", collapse);
+    };
+    const updateMaximized = (value) => {
+      const maximize = typeof value === "boolean" ? value : !props2.maximized;
+      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;
+      const contentEl = getContentElem();
+      if (props2.autoScrollTop && contentEl) {
+        contentEl.scrollTop = 0;
+      }
+      if (props2.redirectPath && path.startsWith(props2.redirectPath)) {
+        return;
+      }
+      if (util.includes(props2.hideFooters, path)) {
+        hideFooter.value = true;
+      } else {
+        hideFooter.value = !!meta.hideFooter;
+      }
+      if (util.includes(props2.hideSidebars, path)) {
+        hideSidebar.value = true;
+      } else {
+        hideSidebar.value = !!meta.hideSidebar;
+      }
+      if (util.includes(props2.hideSideboxs, path)) {
+        hideSidebox.value = true;
+      } else {
+        hideSidebox.value = !!meta.hideSidebox;
+      }
+      const { active, title, matched, activeOther } = util.getRouteMatched(
+        path,
+        fullPath,
+        meta,
+        menuData.value
+      );
+      levelData.value = util.getMatchedLevels(
+        matched,
+        activeOther,
+        current,
+        menuData.value,
+        tabData.value
+      );
+      const t = util.getRouteTab(
+        current,
+        tabData.value,
+        homeMenuPath.value,
+        props2.fixedHome,
+        props2.repeatableTabs,
+        title
+      );
+      isHome.value = t.home;
+      tabActive.value = t.key;
+      tabAdd(t);
+      updateMenuActive(active, matched);
+      if (mixLayout.value || mixSidebar.value) {
+        splitMenuData();
+      }
+      if (props2.responsive && mobile.value) {
+        updateCollapse(true);
+      }
+    };
+    const updateMenuActive = (active, matched) => {
+      const { active1, active2 } = util.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;
+      }
+      sidebarActive.value = active;
+    };
+    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
+          };
+        });
+        const childMenus = util.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: props2.collapse ? d.children : void 0,
+              tempChildren: d.children
+            };
+          });
+          sidebarData.value = util.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: props2.collapse ? d.children : void 0,
+              tempChildren: d.children
+            };
+          });
+          sidebarData.value = util.getActiveChilds(
+            menuData.value,
+            sideboxActive.value
+          );
+        } else {
+          sideboxData.value = [];
+          sidebarData.value = menuData.value;
+        }
+      }
+    };
+    const updateMenuData = () => {
+      let temp;
+      menuData.value = core.mapTree(props2.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 = util.getHomePath((temp == null ? void 0 : temp.path) ?? props2.homePath);
+    };
+    const updateTabData = () => {
+      if (!props2.tabs) {
+        tabData.value = [];
+        return;
+      }
+      tabData.value = props2.tabs.map((item) => {
+        const title = routeI18n(item.path) || item.title;
+        return { ...item, title };
+      });
+    };
+    const updateLevelData = () => {
+      levelData.value = levelData.value.map((item) => {
+        const t = util.findTabByPath(item.path, tabData.value);
+        const title = (t == null ? void 0 : t.title) || routeI18n(item.path) || item.title;
+        return { ...item, title };
+      });
+    };
+    const routeI18n = (path, menu) => {
+      if (!props2.i18n || !path) {
+        return;
+      }
+      return props2.i18n({
+        path,
+        menu: menu ?? util.findMenuByPath(path, menuData.value),
+        locale: props2.locale
+      });
+    };
+    const emitBodySizeChange = (delay) => {
+      if (timers.resize) {
+        clearTimeout(timers.resize);
+      }
+      if (delay != null) {
+        timers.resize = setTimeout(() => {
+          emit("bodySizeChange", { mobile: mobile.value });
+        }, delay);
+        return;
+      }
+      vue.nextTick(() => {
+        emit("bodySizeChange", { mobile: mobile.value });
+      });
+    };
+    vue.watch(
+      () => props2.menus,
+      () => {
+        updateMenuData();
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props2.tabs,
+      () => {
+        updateTabData();
+        updateLevelData();
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props2.layout,
+      () => {
+        const { path, fullPath, meta } = vue.unref(currentRoute);
+        const { active, matched } = util.getRouteMatched(
+          path,
+          fullPath,
+          meta,
+          menuData.value
+        );
+        updateMenuActive(active, matched);
+        splitMenuData();
+      }
+    );
+    vue.watch([() => props2.sidebarLayout, mobile], () => {
+      splitMenuData();
+    });
+    vue.watch(
+      () => props2.collapse,
+      () => {
+        if (!mixSidebar.value) {
+          return;
+        }
+        if (props2.collapse) {
+          sideboxData.value = sideboxData.value.map((d) => {
+            return { ...d, children: d.tempChildren };
+          });
+          return;
+        }
+        sideboxData.value = sideboxData.value.map((d) => {
+          return { ...d, children: void 0 };
+        });
+      }
+    );
+    vue.watch(
+      () => props2.locale,
+      () => {
+        updateMenuData();
+        updateTabData();
+        updateLevelData();
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props2.responsive,
+      () => {
+        mobile.value = util.isMobile(props2.responsive);
+      }
+    );
+    vue.watch(
+      [
+        () => props2.layout,
+        () => props2.sidebarLayout,
+        () => props2.fixedHeader,
+        () => props2.fixedSidebar,
+        () => props2.fixedBody,
+        () => props2.maximized,
+        () => props2.logoInHeader,
+        mobile
+      ],
+      () => {
+        if (timers.transition) {
+          clearTimeout(timers.transition);
+        }
+        timers.transition = util.disableTransition();
+      }
+    );
+    vue.watch(
+      [() => props2.collapse, () => props2.compact, () => props2.maximized],
+      () => {
+        emitBodySizeChange(600);
+      }
+    );
+    vue.watch(
+      [
+        () => props2.layout,
+        () => props2.sidebarLayout,
+        () => props2.tabBar,
+        () => props2.fluid
+      ],
+      () => {
+        emitBodySizeChange();
+      }
+    );
+    vue.watch(
+      currentRoute,
+      (route) => {
+        onRouteChange(vue.unref(route));
+      },
+      { immediate: true }
+    );
+    util.useWindowListener({
+      onResize: () => {
+        const m = util.isMobile(props2.responsive);
+        if (m) {
+          if (!mobile.value && !props2.collapse) {
+            updateCollapse(true);
+          }
+        } else if (mobile.value && props2.collapse) {
+          updateCollapse(false);
+        }
+        mobile.value = m;
+        emit("bodySizeChange", { mobile: mobile.value, window: true });
+      },
+      onEscKeydown: (e) => {
+        if (props2.compressOnEsc && props2.maximized) {
+          e.stopPropagation();
+          updateMaximized(false);
+        }
+      }
+    });
+    const layoutProvide = vue.computed(() => {
+      return {
+        mobile: mobile.value,
+        collapse: props2.collapse,
+        compact: props2.compact,
+        topLayout: topLayout.value,
+        mixSidebar: mixSidebar.value,
+        maximized: props2.maximized,
+        expanded: props2.expanded,
+        tabBar: props2.tabBar,
+        sidebar: sidebar.value,
+        responsive: props2.responsive
+      };
+    });
+    vue.provide(keys.LAYOUT_KEY, layoutProvide);
+    return {
+      authenticated,
+      contentRef,
+      levelData,
+      tabData,
+      tabActive,
+      headerData,
+      headerActive,
+      sidebarData,
+      sidebarActive,
+      sideboxData,
+      sideboxActive,
+      hideFooter,
+      homeMenuPath,
+      isHome,
+      isTablePage,
+      sidebox,
+      sidebar,
+      layoutClass,
+      sidebarCollapse,
+      sidebarTheme,
+      updateCollapse,
+      onTabClick,
+      onTabRemove,
+      onTabContextMenu,
+      onTabSortChange,
+      onLogoClick,
+      onSideMenuOpen,
+      onSideMenuClose,
+      onHeadMenuOpen,
+      onHeadMenuClose
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-admin-main" };
+const _hoisted_2 = { class: "ele-admin-body" };
+const _hoisted_3 = {
+  ref: "contentRef",
+  class: "ele-admin-content"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ProHeader = vue.resolveComponent("ProHeader");
+  const _component_ProSidebox = vue.resolveComponent("ProSidebox");
+  const _component_ProSidebar = vue.resolveComponent("ProSidebar");
+  const _component_ProTabBar = vue.resolveComponent("ProTabBar");
+  const _component_ElBacktop = vue.resolveComponent("ElBacktop");
+  return _ctx.authenticated ? (vue.openBlock(), vue.createElementBlock("div", {
+    key: 0,
+    class: vue.normalizeClass(_ctx.layoutClass)
+  }, [
+    vue.createVNode(_component_ProHeader, {
+      menus: _ctx.headerData,
+      headerStyle: _ctx.headerStyle,
+      active: _ctx.headerActive,
+      ellipsis: _ctx.ellipsis,
+      menuTrigger: _ctx.menuTrigger,
+      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,
+      onLogoClick: _ctx.onLogoClick,
+      onOpen: _ctx.onHeadMenuOpen,
+      onClsoe: _ctx.onHeadMenuClose
+    }, vue.createSlots({ _: 2 }, [
+      vue.renderList(Object.keys(_ctx.$slots), (name) => {
+        return {
+          name,
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ])
+        };
+      })
+    ]), 1032, ["menus", "headerStyle", "active", "ellipsis", "menuTrigger", "collapse", "sidebar", "titleSlot", "iconSlot", "levels", "breadcrumb", "breadcrumbSeparator", "homePath", "isHome", "onLogoClick", "onOpen", "onClsoe"]),
+    vue.createElementVNode("div", _hoisted_1, [
+      _ctx.sidebox ? (vue.openBlock(), vue.createBlock(_component_ProSidebox, {
+        key: 0,
+        menus: _ctx.sideboxData,
+        sidebarStyle: _ctx.sidebarStyle,
+        colorfulIcon: _ctx.colorfulIcon,
+        active: _ctx.collapse ? _ctx.sidebarActive : _ctx.sideboxActive,
+        compact: _ctx.compact,
+        collapse: _ctx.collapse,
+        popperEffect: _ctx.tooltipEffect,
+        titleSlot: _ctx.sideboxTitleSlot,
+        iconSlot: _ctx.sideboxIconSlot
+      }, vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "compact", "collapse", "popperEffect", "titleSlot", "iconSlot"])) : vue.createCommentVNode("", true),
+      _ctx.sidebar ? (vue.openBlock(), vue.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,
+        titleSlot: _ctx.sidebarTitleSlot,
+        iconSlot: _ctx.sidebarIconSlot,
+        onOpen: _ctx.onSideMenuOpen,
+        onClsoe: _ctx.onSideMenuClose
+      }, vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "collapse", "uniqueOpened", "defaultOpeneds", "popperEffect", "titleSlot", "iconSlot", "onOpen", "onClsoe"])) : vue.createCommentVNode("", true),
+      vue.createElementVNode("div", _hoisted_2, [
+        _ctx.tabBar ? (vue.openBlock(), vue.createBlock(_component_ProTabBar, {
+          key: 0,
+          tabs: _ctx.tabData,
+          active: _ctx.tabActive,
+          tabStyle: _ctx.tabStyle,
+          fixedHome: _ctx.fixedHome,
+          homePath: _ctx.homeMenuPath,
+          isHome: _ctx.isHome,
+          tabContextMenu: _ctx.tabContextMenu,
+          tabSortable: _ctx.tabSortable,
+          onTabClick: _ctx.onTabClick,
+          onTabRemove: _ctx.onTabRemove,
+          onTabContextMenu: _ctx.onTabContextMenu,
+          onTabSortChange: _ctx.onTabSortChange
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["tabs", "active", "tabStyle", "fixedHome", "homePath", "isHome", "tabContextMenu", "tabSortable", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "default"),
+          !_ctx.hideFooter ? vue.renderSlot(_ctx.$slots, "footer", { key: 0 }) : vue.createCommentVNode("", true)
+        ], 512)
+      ])
+    ]),
+    vue.createElementVNode("div", {
+      class: "ele-admin-mask",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.updateCollapse && _ctx.updateCollapse(...args))
+    }),
+    _ctx.backTop ? (vue.openBlock(), vue.createBlock(_component_ElBacktop, {
+      key: 0,
+      right: _ctx.backTopRight,
+      bottom: _ctx.backTopBottom,
+      visibilityHeight: _ctx.backTopVisibilityHeight,
+      target: _ctx.fixedBody ? ".ele-admin-layout .ele-admin-content" : void 0
+    }, null, 8, ["right", "bottom", "visibilityHeight", "target"])) : vue.createCommentVNode("", true)
+  ], 2)) : vue.createCommentVNode("", true);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;