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

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

@@ -3,12 +3,12 @@ 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 receiver = require("../ele-config-provider/receiver");
 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 ProTabs = require("./components/pro-tabs");
+const ProIframe = require("./components/pro-iframe");
 const util = require("./util");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
@@ -18,14 +18,15 @@ const _sfc_main = vue.defineComponent({
     ProHeader,
     ProSidebar,
     ProSidebox,
-    ProTabBar
+    ProTabs,
+    ProIframe
   },
   props: props.proLayoutProps,
   emits: props.proLayoutEmits,
   setup(props2, { emit }) {
+    const state = { timer: null };
+    const { authenticated } = receiver.useLicense();
     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([]);
@@ -42,8 +43,7 @@ const _sfc_main = vue.defineComponent({
     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 mobile = vue.ref(false);
     const topLayout = vue.computed(() => props2.layout === "top");
     const mixLayout = vue.computed(() => props2.layout === "mix");
     const mixSidebar = vue.computed(() => props2.sidebarLayout === "mix");
@@ -99,14 +99,14 @@ const _sfc_main = vue.defineComponent({
       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 side = !(mixSidebar.value && !mobile.value);
+      return side && props2.sidebarStyle === "dark" ? "dark" : "light";
     });
-    const updateCollapse = (value) => {
-      const collapse = typeof value === "boolean" ? value : !props2.collapse;
-      emit("update:collapse", collapse);
+    const updateCollapse = (val) => {
+      const collapse = typeof val === "boolean" ? val : !props2.collapse;
+      if (val !== props2.collapse) {
+        emit("update:collapse", collapse);
+      }
     };
     const updateMaximized = (value) => {
       const maximize = typeof value === "boolean" ? value : !props2.maximized;
@@ -147,6 +147,7 @@ const _sfc_main = vue.defineComponent({
     };
     const onRouteChange = (current) => {
       const { path, fullPath, meta } = current;
+      hideFooter.value = !!meta.hideFooter;
       const contentEl = getContentElem();
       if (props2.autoScrollTop && contentEl) {
         contentEl.scrollTop = 0;
@@ -154,21 +155,8 @@ const _sfc_main = vue.defineComponent({
       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;
-      }
+      hideSidebar.value = !!meta.hideSidebar;
+      hideSidebox.value = !!meta.hideSidebox;
       const { active, title, matched, activeOther } = util.getRouteMatched(
         path,
         fullPath,
@@ -187,7 +175,6 @@ const _sfc_main = vue.defineComponent({
         tabData.value,
         homeMenuPath.value,
         props2.fixedHome,
-        props2.repeatableTabs,
         title
       );
       isHome.value = t.home;
@@ -326,28 +313,13 @@ const _sfc_main = vue.defineComponent({
       });
     };
     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;
+      if (props2.i18n && path) {
+        return props2.i18n({
+          path,
+          menu: menu ?? util.findMenuByPath(path, menuData.value),
+          locale: props2.locale
+        });
       }
-      vue.nextTick(() => {
-        emit("bodySizeChange", { mobile: mobile.value });
-      });
     };
     vue.watch(
       () => props2.menus,
@@ -407,12 +379,6 @@ const _sfc_main = vue.defineComponent({
       },
       { immediate: true }
     );
-    vue.watch(
-      () => props2.responsive,
-      () => {
-        mobile.value = util.isMobile(props2.responsive);
-      }
-    );
     vue.watch(
       [
         () => props2.layout,
@@ -422,30 +388,13 @@ const _sfc_main = vue.defineComponent({
         () => props2.fixedBody,
         () => props2.maximized,
         () => props2.logoInHeader,
+        sidebar,
+        sidebox,
         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();
+        state.timer && clearTimeout(state.timer);
+        state.timer = util.disableTransition();
       }
     );
     vue.watch(
@@ -455,28 +404,32 @@ const _sfc_main = vue.defineComponent({
       },
       { immediate: true }
     );
-    util.useWindowListener({
-      onResize: () => {
-        const m = util.isMobile(props2.responsive);
-        if (m) {
-          if (!mobile.value && !props2.collapse) {
-            updateCollapse(true);
+    util.useWindowListener(
+      {
+        onEscKeydown: (e) => {
+          if (props2.compressOnEsc && props2.maximized) {
+            e.stopPropagation();
+            updateMaximized(false);
+          }
+        },
+        onMobileChange: (isMobile) => {
+          if (mobile.value !== isMobile) {
+            mobile.value = isMobile;
+            updateCollapse(mobile.value);
           }
-        } else if (mobile.value && props2.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 (props2.compressOnEsc && props2.maximized) {
-          e.stopPropagation();
-          updateMaximized(false);
-        }
-      }
-    });
+      props2
+    );
     const layoutProvide = vue.computed(() => {
-      return {
+      const state2 = {
         mobile: mobile.value,
         collapse: props2.collapse,
         compact: props2.compact,
@@ -486,10 +439,12 @@ const _sfc_main = vue.defineComponent({
         expanded: props2.expanded,
         tabBar: props2.tabBar,
         sidebar: sidebar.value,
+        keepAlive: props2.tabBar && props2.keepAlive,
         responsive: props2.responsive
       };
+      return state2;
     });
-    vue.provide(keys.LAYOUT_KEY, layoutProvide);
+    vue.provide(receiver.LAYOUT_KEY, layoutProvide);
     return {
       authenticated,
       contentRef,
@@ -505,7 +460,6 @@ const _sfc_main = vue.defineComponent({
       hideFooter,
       homeMenuPath,
       isHome,
-      isTablePage,
       sidebox,
       sidebar,
       layoutClass,
@@ -541,7 +495,8 @@ 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_ProTabs = vue.resolveComponent("ProTabs");
+  const _component_ProIframe = vue.resolveComponent("ProIframe");
   const _component_ElBacktop = vue.resolveComponent("ElBacktop");
   return _ctx.authenticated ? (vue.openBlock(), vue.createElementBlock("div", {
     key: 0,
@@ -622,7 +577,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         })
       ]), 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, {
+        _ctx.tabBar ? (vue.openBlock(), vue.createBlock(_component_ProTabs, {
           key: 0,
           tabs: _ctx.tabData,
           active: _ctx.tabActive,
@@ -647,8 +602,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           })
         ]), 1032, ["tabs", "active", "tabStyle", "fixedHome", "homePath", "isHome", "tabContextMenu", "tabSortable", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_3, [
+          _ctx.tabBar && _ctx.keepAlive ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default"),
-          !_ctx.hideFooter ? vue.renderSlot(_ctx.$slots, "footer", { key: 0 }) : vue.createCommentVNode("", true)
+          !_ctx.hideFooter ? vue.renderSlot(_ctx.$slots, "footer", { key: 1 }) : vue.createCommentVNode("", true)
         ], 512)
       ])
     ]),

package/lib/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/lib/ele-pro-layout/props.js

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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});
+  }
 }