ele-admin-plus 1.0.2 → 1.1.0

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

@@ -127,7 +127,9 @@ const proLayoutProps = {
   // 侧栏默认展开的菜单
   sidebarOpeneds: Array,
   // 是否支持页签右键菜单
-  tabContextMenu: Boolean,
+  tabContextMenu: [Boolean, Object],
+  // 右键菜单
+  tabContextMenus: [Array, Function],
   // 是否支持页签拖动排序
   tabSortable: Boolean,
   // 固定主体时切换路由自动滚到顶部

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

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 /* 折叠侧栏 */
 .ele-admin-collapse {
@@ -52,33 +53,31 @@
     width: calc(100% - #{$collapseW});
   }
 
-  .ele-admin-sidebox > .ele-admin-menus {
-    padding: eleVar('sidebox', 'collapse-padding');
+  .ele-admin-sidebox .ele-admin-menus > .el-scrollbar__wrap {
+    & > .el-scrollbar__view > .ele-menu {
+      $padding: eleVar('sidebox', 'collapse-padding');
+      #{eleVarName('menu', 'item-padding')}: #{$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;
+      & > .el-menu-item,
+      & > .el-sub-menu > .el-sub-menu__title {
+        padding: eleVar('sidebox', 'collapse-item-padding');
 
-      & > span {
-        display: none;
+        & > span {
+          display: none;
+        }
       }
-    }
-
-    & > .el-menu > .el-menu-item:not(:last-child) {
-      margin-bottom: eleVar('sidebox', 'collapse-item-margin');
-    }
 
-    & > .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%;
+      & > .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%;
+        }
       }
     }
   }

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

@@ -1,4 +1,4 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 @mixin set-layout-var($var) {
   .ele-admin-layout {
@@ -17,6 +17,10 @@
     @include set-ele-var('header-dark', $var);
   }
 
+  .ele-admin-header.is-primary {
+    @include set-ele-var('header-primary', $var);
+  }
+
   .ele-admin-logo {
     @include set-ele-var('logo', $var);
   }

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

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 /* 顶栏 */
 .ele-admin-header {
@@ -49,8 +50,10 @@
     overflow: hidden;
 
     & > .ele-menu {
-      #{elVarName('menu-item', 'height')}: eleVar('header', 'height');
-      #{elVarName('menu-item', 'lin-height')}: eleVar('header', 'height');
+      $menu-height: eleVar('header', 'menu-height');
+      #{eleVarName('menu-horizontal', 'height')}: #{$menu-height};
+      padding-top: 0;
+      padding-bottom: 0;
       background: none;
       border: none;
     }
@@ -69,16 +72,17 @@
 
 /* 操作按钮 */
 .ele-admin-tool {
-  height: 100%;
+  height: eleVar('header', 'tool-height');
   padding: 0 12px;
   display: flex;
   align-items: center;
+  border-radius: eleVar('header', 'tool-radius');
+  transition: color $ele-transition, background-color $ele-transition;
   box-sizing: border-box;
-  transition: color 0.2s, background-color 0.2s;
   cursor: pointer;
 
   &:hover {
-    background: eleVar('sidebar', 'tool-hover-bg');
+    background: eleVar('header', 'tool-hover-bg');
   }
 
   & > .el-dropdown {

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

@@ -1,6 +1,7 @@
 "use strict";
 require("element-plus/es/components/backtop/style/index");
 require("element-plus/es/components/icon/style/index");
+require("element-plus/es/components/scrollbar/style/index");
 require("../../ele-breadcrumb/style/index");
 require("../../ele-menus/style/index");
 require("../../ele-tab-wrap/style/index");

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

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 /* 移动端 */
 .ele-admin-mobile {
@@ -46,7 +47,7 @@
   }
 
   &.ele-admin-open-tab:not(.ele-admin-tab-card) .ele-admin-header {
-    box-shadow: 0 -1px 0 eleVar('header', 'line-color') inset !important;
+    box-shadow: 0 -0.8px 0 eleVar('header', 'line-color') inset !important;
 
     &.is-dark,
     &.is-primary {

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

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 /* 固定顶栏 */
 .ele-admin-fixed-header {
@@ -20,7 +21,7 @@
 
     &:not(.ele-admin-logo-auto):not(.ele-admin-dark-sidebar) {
       .ele-admin-logo {
-        box-shadow: 0 -1px 0 eleVar('header', 'line-color') inset;
+        box-shadow: 0 -0.8px 0 eleVar('header', 'line-color') inset;
       }
 
       &.ele-admin-tab-card .ele-admin-logo,

package/lib/ele-pro-layout/style/layout-theme.scss

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 /* 暗色顶栏 */
 .ele-admin-header.is-dark,
@@ -9,7 +10,7 @@
 
   // 操作按钮
   .ele-admin-tool:hover {
-    background: eleVar('sidebar', 'dark-tool-hover-bg');
+    background: eleVar('header', 'dark-tool-hover-bg');
   }
 
   // 面包屑
@@ -35,6 +36,13 @@
 /* 主色顶栏 */
 .ele-admin-header.is-primary {
   background: elVar('color-primary');
+
+  .ele-admin-menus > .ele-menu {
+    $hover-bg: eleVar('header-primary', 'hover-bg');
+    $active-bg: eleVar('header-primary', 'active-bg');
+    #{eleVarName('menu-horizontal', 'dark-hover-bg')}: #{$hover-bg};
+    #{eleVarName('menu-horizontal', 'dark-active-bg')}: #{$active-bg};
+  }
 }
 
 /* 暗色侧栏 */
@@ -61,14 +69,7 @@
     .ele-admin-sidebox {
       background: eleVar('sidebar', 'dark-bg');
 
-      & > .ele-admin-menus > .ele-menu {
-        & > .el-menu-item:not(.is-active),
-        & > .el-sub-menu:not(.is-active) > .el-sub-menu__title {
-          &:not(:active):hover {
-            background: eleVar('sidebar', 'dark-tool-hover-bg');
-          }
-        }
-
+      .ele-admin-menus > .el-scrollbar__wrap > .el-scrollbar__view > .ele-menu {
         & > .el-sub-menu.is-active > .el-sub-menu__title {
           background: eleVar('menu-dark', 'active-bg');
         }
@@ -81,7 +82,7 @@
     color: eleVar('menu-dark', 'active-color');
 
     &:hover {
-      background: eleVar('sidebar', 'dark-tool-hover-bg');
+      background: eleVar('header', 'dark-tool-hover-bg');
     }
   }
 }

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

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 .ele-admin-layout {
   display: flex;

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

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 /* 侧栏 */
 .ele-admin-sidebar {
@@ -12,23 +13,22 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-y: overlay;
 
   .ele-admin-menus {
-    flex: auto;
-    position: relative;
-    box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overflow-y: overlay;
-
-    & > .ele-menu {
-      width: auto;
-      border: none;
-      background: none;
-      transition: none;
+    flex: 1;
+
+    & > .el-scrollbar__wrap {
+      box-sizing: border-box;
+      position: relative;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      & > .el-scrollbar__view > .ele-menu {
+        width: 100%;
+        border: none;
+        background: none;
+        transition: none;
+      }
     }
   }
 
@@ -43,121 +43,104 @@
   width: eleVar('sidebox', 'width');
   z-index: calc(#{eleVar('layout', 'index')} + 4);
   background: eleVar('sidebar', 'bg');
-  box-shadow: -1px 0 0 eleVar('header', 'line-color') inset;
+  box-shadow: -0.8px 0 0 eleVar('header', 'line-color') inset;
   transition: width $ele-transition;
   box-sizing: border-box;
   position: relative;
   display: flex;
   flex-direction: column;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-y: overlay;
 
   .ele-admin-menus {
-    flex: auto;
-    position: relative;
-    box-sizing: border-box;
-    padding: eleVar('sidebox', 'padding');
-    transition: padding $ele-transition;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overflow-y: overlay;
-
-    & > .ele-menu {
-      width: auto;
-      border: none;
-      background: none;
-      transition: none;
-
-      & > .el-menu-item,
-      & > .el-sub-menu > .el-sub-menu__title {
-        height: auto;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        padding: eleVar('sidebox', 'item-padding') !important;
-        margin: calc(#{eleVar('sidebox', 'item-margin')} / 2) 0;
-        border-radius: eleVar('sidebox', 'item-radius');
-        transition: all 0.3s;
-
-        .el-icon:not(.el-sub-menu__icon-arrow) {
-          margin: 0;
-          font-size: eleVar('sidebox', 'icon-font-size');
-        }
-
-        & > span {
-          width: 100%;
+    flex: 1;
+
+    & > .el-scrollbar__wrap {
+      box-sizing: border-box;
+      position: relative;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      & > .el-scrollbar__view > .ele-menu {
+        width: 100%;
+        border: none;
+        background: none;
+        transition: padding $ele-transition;
+        #{eleVarName('menu', 'item-padding')}: eleVar('sidebox', 'padding');
+        #{eleVarName('menu', 'item-radius')}: eleVar('sidebox', 'item-radius');
+
+        & > .el-menu-item,
+        & > .el-sub-menu > .el-sub-menu__title {
           height: auto;
-          line-height: 1;
-          text-align: center;
-          font-size: eleVar('sidebox', 'font-size');
-          margin-top: eleVar('sidebox', 'title-margin');
-          display: block;
-          overflow: hidden;
-          white-space: nowrap;
-          word-break: break-all;
-          text-overflow: ellipsis;
-          visibility: visible;
-        }
-      }
-
-      & > .el-menu-item {
-        &:not(:last-child) {
-          margin-bottom: eleVar('sidebox', 'item-margin');
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          padding: eleVar('sidebox', 'item-padding');
+          transition: all $ele-transition;
+
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            margin: 0;
+            font-size: eleVar('sidebox', 'icon-font-size');
+          }
+
+          & > span {
+            width: 100%;
+            height: auto;
+            line-height: 1;
+            font-size: eleVar('sidebox', 'font-size');
+            margin-top: eleVar('sidebox', 'title-margin');
+            box-sizing: border-box;
+            text-align: center;
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            word-break: break-all;
+            text-overflow: ellipsis;
+            visibility: visible;
+          }
         }
 
-        &::after {
+        & > .el-menu-item::after {
           display: none;
         }
-      }
 
-      & > .el-menu-item:not(.is-active):not(.is-disabled),
-      & > .el-sub-menu:not(.is-active):not(.is-disabled) > .el-sub-menu__title {
-        &:not(:active):hover {
-          background: eleVar('sidebar', 'tool-hover-bg');
+        & > .el-sub-menu.is-active > .el-sub-menu__title {
+          background: eleVar('menu-item', 'active-bg');
+          transition: none;
         }
-      }
 
-      & > .el-sub-menu.is-active > .el-sub-menu__title {
-        background: eleVar('menu-item', 'active-bg');
-        transition: none;
-      }
+        & > .el-menu-item .el-badge,
+        & > .el-sub-menu > .el-sub-menu__title .el-badge {
+          position: absolute;
+          top: 2px;
+          right: 4px;
+          margin: 0;
 
-      & > .el-menu-item .el-badge,
-      & > .el-sub-menu > .el-sub-menu__title .el-badge {
-        position: absolute;
-        top: 2px;
-        right: 4px;
-
-        .el-badge__content:not(.is-dot) {
-          width: auto;
-          height: 18px;
-          line-height: 18px;
-          border-radius: 24px;
-          min-width: 20px;
-          font-size: 12px;
-          padding: 0 4px;
+          .el-badge__content:not(.is-dot) {
+            width: auto;
+            height: 18px;
+            line-height: 18px;
+            border-radius: 24px;
+            min-width: 20px;
+            font-size: 12px;
+            padding: 0 4px;
+          }
         }
       }
     }
   }
 }
 
-.ele-admin-sidebox-popup.el-menu--popup-container {
-  padding: 0 eleVar('sidebox', 'popup-margin');
-}
-
 /* 操作按钮 */
 .ele-sidebar-tool {
-  height: 40px;
-  transition: color 0.3s, background-color 0.3s;
+  height: eleVar('sidebar', 'tool-height');
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: eleVar('header', 'tool-radius');
+  transition: color $ele-transition, background-color $ele-transition;
   cursor: pointer;
 
   &:hover {
-    background: eleVar('sidebar', 'tool-hover-bg');
+    background: eleVar('header', 'tool-hover-bg');
   }
 }
 
@@ -175,7 +158,7 @@
   }
 
   &:not(.ele-admin-collapse) .ele-admin-logo {
-    box-shadow: -1px 0 0 eleVar('header', 'line-color') inset;
+    box-shadow: -0.8px 0 0 eleVar('header', 'line-color') inset;
   }
 
   .ele-admin-sidebox + .ele-admin-sidebar {
@@ -193,3 +176,38 @@
     width: calc(100% - #{$sideboxW});
   }
 }
+
+/* 滚动条样式优化 */
+.ele-admin-sidebar > .ele-admin-menus,
+.ele-admin-sidebox > .ele-admin-menus {
+  $size: eleVar('menu-thumb', 'size');
+  $padding: eleVar('menu-thumb', 'padding');
+  $hover-color: eleVar('menu-thumb', 'hover-color');
+  #{elVarName('scrollbar', 'opacity')}: 1;
+  #{elVarName('scrollbar', 'hover-opacity')}: 1;
+  #{elVarName('scrollbar', 'bg-color')}: eleVar('menu-thumb', 'color');
+  #{elVarName('scrollbar', 'hover-bg-color')}: #{$hover-color};
+
+  & > .el-scrollbar__bar.is-vertical {
+    width: calc(#{$size} - #{$padding} * 2);
+    border-radius: eleVar('menu-thumb', 'radius');
+    right: $padding;
+    z-index: 9;
+  }
+
+  & > .el-scrollbar__bar.is-horizontal {
+    height: calc(#{$size} - #{$padding} * 2);
+    border-radius: eleVar('menu-thumb', 'radius');
+    bottom: $padding;
+    z-index: 9;
+  }
+}
+
+.ele-admin-dark-sidebar:not(.ele-admin-mix-sidebar) .ele-admin-sidebar,
+.ele-admin-dark-sidebar .ele-admin-sidebox {
+  & > .ele-admin-menus {
+    $dark-hover-color: eleVar('menu-dark-thumb', 'hover-color');
+    #{elVarName('scrollbar', 'bg-color')}: eleVar('menu-dark-thumb', 'color');
+    #{elVarName('scrollbar', 'hover-bg-color')}: #{$dark-hover-color};
+  }
+}

package/lib/ele-pro-layout/style/tabs.scss

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 /* 页签栏 */
 .ele-admin-tabs {
@@ -20,7 +21,7 @@
 /* 顶栏阴影改分割线 */
 .ele-admin-open-tab:not(.ele-admin-tab-card) {
   .ele-admin-header:not(.is-dark, .is-primary) {
-    box-shadow: 0 -1px 0 eleVar('header', 'line-color') inset;
+    box-shadow: 0 -0.8px 0 eleVar('header', 'line-color') inset;
   }
 }
 

package/lib/ele-pro-layout/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { RouteMeta, RouteLocationMatched } from 'vue-router';
-import type { MenuProps, BreadcrumbProps } from 'element-plus';
+import type { ElMenuProps, ElBreadcrumbProps } from '../../ele-app/types';
 import type { MenuItem as MenuItemProps } from '../../ele-menus/types';
 import type TabTitle from "../../ele-tabs/components/tab-title";
 import type EleTabs from "../../ele-tabs/index";
@@ -195,15 +195,15 @@ export interface CurrentRoute {
 /**
  * 菜单 tooltip 主题
  */
-export type TooltipEffect = MenuProps['popperEffect'];
+export type TooltipEffect = ElMenuProps['popperEffect'];
 /**
  * 顶栏子菜单触发方式
  */
-export type MenuTrigger = MenuProps['menuTrigger'];
+export type MenuTrigger = ElMenuProps['menuTrigger'];
 /**
  * 面包屑导航分隔符
  */
-export type BreadcrumbSeparator = BreadcrumbProps['separatorIcon'];
+export type BreadcrumbSeparator = ElBreadcrumbProps['separatorIcon'];
 /**
  * 内链数据
  */
@@ -214,7 +214,10 @@ export interface IframeItem {
     src: string;
 }
 /**
- * 组件实例
+ * 标签页标题组件实例
  */
 export type TabTitleInstance = InstanceType<typeof TabTitle> | null;
+/**
+ * 标签页组件实例
+ */
 export type EleTabsInstance = InstanceType<typeof EleTabs> | null;

package/lib/ele-pro-layout/util.d.ts

@@ -81,13 +81,15 @@ export declare function useWindowListener(option: WindowListenerOption, props: P
 /**
  * 菜单滚动到选中位置
  */
-export declare function useMenuScroll(func: () => HTMLDivElement | null): {
+export declare function useMenuScroll(getEl: () => HTMLDivElement | null): {
     scrollIntoView: () => void;
 };
 /**
  * 禁用过渡动画
  */
-export declare function disableTransition(): number;
+export declare function useDisableTransition(): {
+    disableTransition: () => void;
+};
 /**
  * 菜单数据转换
  * @param menus 菜单数据

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

@@ -203,11 +203,11 @@ function useWindowListener(option, props) {
     }, 600);
   });
 }
-function useMenuScroll(func) {
+function useMenuScroll(getEl) {
   const state = { timer: null };
   const scrollIntoView = () => {
     state.timer && clearTimeout(state.timer);
-    const menuEl = func();
+    const menuEl = getEl();
     if (menuEl) {
       const el = menuEl.querySelector(".el-menu-item.is-active");
       if (el) {
@@ -217,21 +217,32 @@ function useMenuScroll(func) {
           } else {
             el.scrollIntoView({ behavior: "smooth", block: "center" });
           }
-        }, 380);
+        }, 420);
       }
     }
   };
+  vue.onMounted(() => {
+    scrollIntoView();
+  });
   vue.onBeforeUnmount(() => {
     state.timer && clearTimeout(state.timer);
   });
   return { scrollIntoView };
 }
-function disableTransition() {
+function useDisableTransition() {
+  const state = { timer: null };
   const classes = "ele-transition-disabled";
-  document.body.classList.add(classes);
-  return setTimeout(() => {
-    document.body.classList.remove(classes);
-  }, 100);
+  const disableTransition = () => {
+    state.timer && clearTimeout(state.timer);
+    document.body.classList.add(classes);
+    state.timer = setTimeout(() => {
+      document.body.classList.remove(classes);
+    }, 100);
+  };
+  vue.onBeforeUnmount(() => {
+    state.timer && clearTimeout(state.timer);
+  });
+  return { disableTransition };
 }
 function getMenuItems(menus) {
   return core.mapTree(menus, (m) => {
@@ -251,7 +262,6 @@ function getMenuItems(menus) {
     return item;
   });
 }
-exports.disableTransition = disableTransition;
 exports.findMenuByPath = findMenuByPath;
 exports.findTabByPath = findTabByPath;
 exports.getActiveChilds = getActiveChilds;
@@ -264,5 +274,6 @@ exports.getMixActive = getMixActive;
 exports.getRouteMatched = getRouteMatched;
 exports.getRouteTab = getRouteTab;
 exports.isHomeRoute = isHomeRoute;
+exports.useDisableTransition = useDisableTransition;
 exports.useMenuScroll = useMenuScroll;
 exports.useWindowListener = useWindowListener;