ele-admin-plus 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -1,14 +1,14 @@
-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 { defineComponent, ref, computed, watch, unref, provide, 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 { useLicense, LAYOUT_KEY } from "../ele-config-provider/receiver";
 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 ProTabs from "./components/pro-tabs";
+import ProIframe from "./components/pro-iframe";
+import { getHomePath, getRouteMatched, disableTransition, useWindowListener, getMatchedLevels, getRouteTab, getMixActive, getActiveChilds, findTabByPath, findMenuByPath } from "./util";
 import { proLayoutProps, proLayoutEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleProLayout",
@@ -17,14 +17,15 @@ const _sfc_main = defineComponent({
     ProHeader,
     ProSidebar,
     ProSidebox,
-    ProTabBar
+    ProTabs,
+    ProIframe
   },
   props: proLayoutProps,
   emits: proLayoutEmits,
   setup(props, { emit }) {
-    const { currentRoute } = useRouter();
+    const state = { timer: null };
     const { authenticated } = useLicense();
-    const timers = { transition: null, resize: null };
+    const { currentRoute } = useRouter();
     const contentRef = ref(null);
     const levelData = ref([]);
     const tabData = ref([]);
@@ -41,8 +42,7 @@ const _sfc_main = defineComponent({
     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 mobile = ref(false);
     const topLayout = computed(() => props.layout === "top");
     const mixLayout = computed(() => props.layout === "mix");
     const mixSidebar = computed(() => props.sidebarLayout === "mix");
@@ -98,14 +98,14 @@ const _sfc_main = defineComponent({
       return mobile.value || mixSidebar.value ? false : props.collapse;
     });
     const sidebarTheme = computed(() => {
-      if (!(mixSidebar.value && !mobile.value) && props.sidebarStyle === "dark") {
-        return "dark";
-      }
-      return "light";
+      const side = !(mixSidebar.value && !mobile.value);
+      return side && props.sidebarStyle === "dark" ? "dark" : "light";
     });
-    const updateCollapse = (value) => {
-      const collapse = typeof value === "boolean" ? value : !props.collapse;
-      emit("update:collapse", collapse);
+    const updateCollapse = (val) => {
+      const collapse = typeof val === "boolean" ? val : !props.collapse;
+      if (val !== props.collapse) {
+        emit("update:collapse", collapse);
+      }
     };
     const updateMaximized = (value) => {
       const maximize = typeof value === "boolean" ? value : !props.maximized;
@@ -146,6 +146,7 @@ const _sfc_main = defineComponent({
     };
     const onRouteChange = (current) => {
       const { path, fullPath, meta } = current;
+      hideFooter.value = !!meta.hideFooter;
       const contentEl = getContentElem();
       if (props.autoScrollTop && contentEl) {
         contentEl.scrollTop = 0;
@@ -153,21 +154,8 @@ const _sfc_main = defineComponent({
       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;
-      }
+      hideSidebar.value = !!meta.hideSidebar;
+      hideSidebox.value = !!meta.hideSidebox;
       const { active, title, matched, activeOther } = getRouteMatched(
         path,
         fullPath,
@@ -186,7 +174,6 @@ const _sfc_main = defineComponent({
         tabData.value,
         homeMenuPath.value,
         props.fixedHome,
-        props.repeatableTabs,
         title
       );
       isHome.value = t.home;
@@ -325,28 +312,13 @@ const _sfc_main = defineComponent({
       });
     };
     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;
+      if (props.i18n && path) {
+        return props.i18n({
+          path,
+          menu: menu ?? findMenuByPath(path, menuData.value),
+          locale: props.locale
+        });
       }
-      nextTick(() => {
-        emit("bodySizeChange", { mobile: mobile.value });
-      });
     };
     watch(
       () => props.menus,
@@ -406,12 +378,6 @@ const _sfc_main = defineComponent({
       },
       { immediate: true }
     );
-    watch(
-      () => props.responsive,
-      () => {
-        mobile.value = isMobile(props.responsive);
-      }
-    );
     watch(
       [
         () => props.layout,
@@ -421,30 +387,13 @@ const _sfc_main = defineComponent({
         () => props.fixedBody,
         () => props.maximized,
         () => props.logoInHeader,
+        sidebar,
+        sidebox,
         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();
+        state.timer && clearTimeout(state.timer);
+        state.timer = disableTransition();
       }
     );
     watch(
@@ -454,28 +403,32 @@ const _sfc_main = defineComponent({
       },
       { immediate: true }
     );
-    useWindowListener({
-      onResize: () => {
-        const m = isMobile(props.responsive);
-        if (m) {
-          if (!mobile.value && !props.collapse) {
-            updateCollapse(true);
+    useWindowListener(
+      {
+        onEscKeydown: (e) => {
+          if (props.compressOnEsc && props.maximized) {
+            e.stopPropagation();
+            updateMaximized(false);
+          }
+        },
+        onMobileChange: (isMobile) => {
+          if (mobile.value !== isMobile) {
+            mobile.value = isMobile;
+            updateCollapse(mobile.value);
           }
-        } else if (mobile.value && props.collapse) {
-          updateCollapse(false);
+        },
+        onBodySizeChange: () => {
+          var _a;
+          emit("bodySizeChange", {
+            mobile: mobile.value,
+            width: (_a = getContentElem()) == null ? void 0 : _a.clientWidth
+          });
         }
-        mobile.value = m;
-        emit("bodySizeChange", { mobile: mobile.value, window: true });
       },
-      onEscKeydown: (e) => {
-        if (props.compressOnEsc && props.maximized) {
-          e.stopPropagation();
-          updateMaximized(false);
-        }
-      }
-    });
+      props
+    );
     const layoutProvide = computed(() => {
-      return {
+      const state2 = {
         mobile: mobile.value,
         collapse: props.collapse,
         compact: props.compact,
@@ -485,8 +438,10 @@ const _sfc_main = defineComponent({
         expanded: props.expanded,
         tabBar: props.tabBar,
         sidebar: sidebar.value,
+        keepAlive: props.tabBar && props.keepAlive,
         responsive: props.responsive
       };
+      return state2;
     });
     provide(LAYOUT_KEY, layoutProvide);
     return {
@@ -504,7 +459,6 @@ const _sfc_main = defineComponent({
       hideFooter,
       homeMenuPath,
       isHome,
-      isTablePage,
       sidebox,
       sidebar,
       layoutClass,
@@ -540,7 +494,8 @@ 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_ProTabs = resolveComponent("ProTabs");
+  const _component_ProIframe = resolveComponent("ProIframe");
   const _component_ElBacktop = resolveComponent("ElBacktop");
   return _ctx.authenticated ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -621,7 +576,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         })
       ]), 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, {
+        _ctx.tabBar ? (openBlock(), createBlock(_component_ProTabs, {
           key: 0,
           tabs: _ctx.tabData,
           active: _ctx.tabActive,
@@ -646,8 +601,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           })
         ]), 1032, ["tabs", "active", "tabStyle", "fixedHome", "homePath", "isHome", "tabContextMenu", "tabSortable", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3, [
+          _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),
           renderSlot(_ctx.$slots, "default"),
-          !_ctx.hideFooter ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : createCommentVNode("", true)
+          !_ctx.hideFooter ? renderSlot(_ctx.$slots, "footer", { key: 1 }) : createCommentVNode("", true)
         ], 512)
       ])
     ]),

package/es/ele-pro-layout/props.d.ts

@@ -95,10 +95,6 @@ export declare const proLayoutProps: {
         type: StringConstructor;
         default: string;
     };
-    hideFooters: PropType<string[]>;
-    hideSidebars: PropType<string[]>;
-    hideSideboxs: PropType<string[]>;
-    repeatableTabs: PropType<string[]>;
     locale: StringConstructor;
     i18n: PropType<MenuI18n>;
     sidebarOpeneds: PropType<string[]>;
@@ -133,6 +129,12 @@ export declare const proLayoutProps: {
         default: string;
     };
     tooltipEffect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    keepAlive: BooleanConstructor;
+    transitionName: StringConstructor;
+    transitionDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     responsive: {
         type: BooleanConstructor;
         default: boolean;

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

@@ -121,14 +121,6 @@ const proLayoutProps = {
     type: String,
     default: "/redirect"
   },
-  // 不显示页脚的路由
-  hideFooters: Array,
-  // 不显示侧栏的路由
-  hideSidebars: Array,
-  // 不显示双侧栏的路由
-  hideSideboxs: Array,
-  // 同路由不同参数可重复打开页签的路由地址
-  repeatableTabs: Array,
   // 国际化语言
   locale: String,
   // 菜单标题国际化方法
@@ -176,6 +168,15 @@ const proLayoutProps = {
   },
   // 菜单 tooltip 主题
   tooltipEffect: String,
+  // 是否支持内链缓存
+  keepAlive: Boolean,
+  // 内链切换动画
+  transitionName: String,
+  // 内链进入动画延迟时间
+  transitionDelay: {
+    type: Number,
+    default: 250
+  },
   // 是否开启响应式
   responsive: {
     type: Boolean,

package/es/ele-pro-layout/style/collapse.scss

@@ -2,65 +2,83 @@
 
 /* 折叠侧栏 */
 .ele-admin-collapse {
-  .ele-admin-logo > img + div {
+  .ele-admin-logo > img + h1 {
     display: none;
   }
 
-  &:not(.ele-admin-mix-sidebar) {
-    .ele-admin-logo,
-    .ele-admin-sidebar {
-      width: eleVar('sidebar', 'collapse-width');
+  &:not(.ele-admin-mix-sidebar) .ele-admin-logo {
+    width: eleVar('sidebar', 'collapse-width');
+  }
+
+  .ele-admin-sidebar {
+    width: eleVar('sidebar', 'collapse-width');
+
+    & + .ele-admin-body {
+      width: calc(100% - #{eleVar('sidebar', 'collapse-width')});
     }
   }
 
-  &.ele-admin-mix-sidebar .ele-admin-sidebox {
-    box-shadow: eleVar('sidebar', 'shadow');
+  &.ele-admin-mix-sidebar {
+    .ele-admin-sidebox {
+      box-shadow: eleVar('sidebar', 'shadow');
+    }
 
-    & + .ele-admin-sidebar {
+    .ele-admin-sidebar {
       width: 0;
+
+      & + .ele-admin-body {
+        width: calc(100% - #{eleVar('sidebox', 'width')});
+      }
     }
   }
 }
 
 /* 折叠一级侧栏 */
 .ele-admin-compact.ele-admin-mix-sidebar {
-  .ele-admin-logo {
-    width: eleVar('sidebar', 'collapse-width');
-  }
+  $collapseW: eleVar('sidebar', 'collapse-width');
+  $sidebarW: eleVar('sidebar', 'mix-width');
 
+  .ele-admin-logo,
   .ele-admin-sidebox {
-    width: eleVar('sidebar', 'collapse-width');
+    width: $collapseW;
+  }
+
+  .ele-admin-sidebar + .ele-admin-body {
+    width: calc(100% - #{$collapseW} - #{$sidebarW});
+  }
+
+  .ele-admin-sidebox + .ele-admin-body,
+  &.ele-admin-collapse .ele-admin-body {
+    width: calc(100% - #{$collapseW});
+  }
+
+  .ele-admin-sidebox > .ele-admin-menus {
+    padding: eleVar('sidebox', 'collapse-padding');
+
+    & > .el-menu > .el-menu-item,
+    & > .el-menu > .el-sub-menu > .el-sub-menu__title {
+      padding: eleVar('sidebox', 'collapse-item-padding') !important;
+      margin: calc(#{eleVar('sidebox', 'collapse-item-margin')} / 2) 0;
+
+      & > span {
+        display: none;
+      }
+    }
+
+    & > .el-menu > .el-menu-item:not(:last-child) {
+      margin-bottom: eleVar('sidebox', 'collapse-item-margin');
+    }
 
-    & > .ele-admin-menus {
-      padding: eleVar('sidebox', 'collapse-padding');
-
-      & > .el-menu {
-        & > .el-menu-item,
-        & > .el-sub-menu > .el-sub-menu__title {
-          padding: eleVar('sidebox', 'collapse-item-padding') !important;
-          margin: calc(#{eleVar('sidebox', 'collapse-item-margin')} / 2) 0;
-
-          & > span {
-            display: none;
-          }
-        }
-
-        & > .el-menu-item:not(:last-child) {
-          margin-bottom: eleVar('sidebox', 'collapse-item-margin');
-        }
-
-        & > .el-menu-item .el-badge,
-        & > .el-sub-menu > .el-sub-menu__title .el-badge {
-          .el-badge__content:not(.is-dot) {
-            padding: 0;
-            width: 8px;
-            height: 8px;
-            font-size: 0;
-            line-height: 0;
-            min-width: auto;
-            border-radius: 50%;
-          }
-        }
+    & > .el-menu > .el-menu-item .el-badge,
+    & > .el-menu > .el-sub-menu > .el-sub-menu__title .el-badge {
+      .el-badge__content:not(.is-dot) {
+        padding: 0;
+        width: 8px;
+        height: 8px;
+        font-size: 0;
+        line-height: 0;
+        min-width: auto;
+        border-radius: 50%;
       }
     }
   }

package/es/ele-pro-layout/style/css-var.scss

@@ -24,13 +24,15 @@
   .ele-admin-header,
   .ele-admin-sidebar,
   .ele-admin-sidebox,
+  .ele-admin-body,
   .ele-admin-mask {
     @include set-ele-var('sidebar', $var);
   }
 
   .ele-admin-header,
   .ele-admin-sidebox,
-  .ele-admin-sidebox-popup {
+  .ele-admin-sidebox-popup,
+  .ele-admin-body {
     @include set-ele-var('sidebox', $var);
   }
 }

package/es/ele-pro-layout/style/header.scss

@@ -9,7 +9,7 @@
   background: eleVar('header', 'bg');
   box-shadow: eleVar('header', 'shadow');
   transition: padding $ele-transition, box-shadow $ele-transition;
-  z-index: calc(#{eleVar('layout', 'index')} + 2);
+  z-index: calc(#{eleVar('layout', 'index')} + 3);
   flex-shrink: 0;
 
   // 图标
@@ -28,8 +28,13 @@
     align-items: center;
     justify-content: center;
 
-    & > img + div {
-      margin-left: 12px;
+    & > img + h1 {
+      margin: 0 0 0 10px;
+      font-weight: normal;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }
 

package/es/ele-pro-layout/style/layout-mobile.scss

@@ -14,7 +14,7 @@
     top: eleVar('header', 'height') !important;
   }
 
-  .ele-admin-logo > img + div {
+  .ele-admin-logo > img + h1 {
     display: block !important;
   }
 

package/es/ele-pro-layout/style/layout-style.scss

@@ -15,7 +15,7 @@
   &:not(.ele-admin-fixed-sidebar) {
     .ele-admin-sidebar,
     .ele-admin-sidebox {
-      z-index: calc(#{eleVar('layout', 'index')} + 1);
+      z-index: calc(#{eleVar('layout', 'index')} + 2);
     }
 
     &:not(.ele-admin-logo-auto):not(.ele-admin-dark-sidebar) {
@@ -97,7 +97,7 @@
 }
 
 /* 内容全屏 */
-.ele-admin-maximized {
+.ele-admin-maximized.ele-admin-layout {
   .ele-admin-header,
   .ele-admin-sidebar,
   .ele-admin-sidebox,
@@ -108,6 +108,11 @@
   &.ele-admin-fixed-header .ele-admin-tabs {
     top: 0;
   }
+
+  .ele-admin-sidebar + .ele-admin-body,
+  .ele-admin-sidebox + .ele-admin-body {
+    width: 100%;
+  }
 }
 
 /* 图标置于顶栏 */
@@ -121,7 +126,7 @@
       box-shadow: none;
       transition: none;
 
-      & > img + div {
+      & > img + h1 {
         display: inline;
       }
     }
@@ -134,6 +139,6 @@
 
   .ele-admin-sidebar,
   .ele-admin-sidebox {
-    z-index: calc(#{eleVar('layout', 'index')} + 1);
+    z-index: calc(#{eleVar('layout', 'index')} + 2);
   }
 }

package/es/ele-pro-layout/style/layout.scss

@@ -11,7 +11,13 @@
     display: flex;
   }
 
-  .ele-admin-body,
+  .ele-admin-body {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    transition: width $ele-transition;
+  }
+
   .ele-admin-content {
     flex: auto;
     display: flex;
@@ -54,3 +60,10 @@
   display: block;
   border: none;
 }
+
+.ele-admin-iframe-wrap {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  overflow: hidden;
+}

package/es/ele-pro-layout/style/sidebar.scss

@@ -4,7 +4,7 @@
 .ele-admin-sidebar {
   flex-shrink: 0;
   width: eleVar('sidebar', 'width');
-  z-index: calc(#{eleVar('layout', 'index')} + 3);
+  z-index: calc(#{eleVar('layout', 'index')} + 4);
   background: eleVar('sidebar', 'bg');
   box-shadow: eleVar('sidebar', 'shadow');
   transition: width $ele-transition, left $ele-transition;
@@ -31,13 +31,17 @@
       transition: none;
     }
   }
+
+  & + .ele-admin-body {
+    width: calc(100% - #{eleVar('sidebar', 'width')});
+  }
 }
 
 /* 双侧栏一级 */
 .ele-admin-sidebox {
   flex-shrink: 0;
   width: eleVar('sidebox', 'width');
-  z-index: calc(#{eleVar('layout', 'index')} + 3);
+  z-index: calc(#{eleVar('layout', 'index')} + 4);
   background: eleVar('sidebar', 'bg');
   box-shadow: -1px 0 0 eleVar('header', 'line-color') inset;
   transition: width $ele-transition;
@@ -159,10 +163,13 @@
 
 /* 双侧栏 */
 .ele-admin-mix-sidebar {
+  $sideboxW: eleVar('sidebox', 'width');
+  $sidebarW: eleVar('sidebar', 'mix-width');
+
   .ele-admin-logo {
-    width: eleVar('sidebox', 'width');
+    width: $sideboxW;
 
-    & > img + div {
+    & > img + h1 {
       display: none;
     }
   }
@@ -172,9 +179,17 @@
   }
 
   .ele-admin-sidebox + .ele-admin-sidebar {
-    width: eleVar('sidebar', 'mix-width');
-    z-index: calc(#{eleVar('layout', 'index')} + 1);
+    width: $sidebarW;
+    z-index: calc(#{eleVar('layout', 'index')} + 2);
     box-shadow: eleVar('sidebar', 'shadow');
     background: eleVar('sidebar', 'bg');
   }
+
+  .ele-admin-sidebar + .ele-admin-body {
+    width: calc(100% - #{$sideboxW} - #{$sidebarW});
+  }
+
+  .ele-admin-sidebox + .ele-admin-body {
+    width: calc(100% - #{$sideboxW});
+  }
 }