ele-admin-plus 1.0.0-beta.1

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

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