ele-admin-plus 1.0.0-beta.1

package/es/ele-menus/style/index.scss

@@ -0,0 +1,541 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+@use './scrollbar.scss';
+
+@include set-menus-var($ele);
+
+.ele-menu {
+  &.el-menu,
+  & > .el-menu--popup {
+    #{elVarName('menu', 'hover-bg-color')}: none;
+    #{elVarName('menu', 'base-level-padding')}: 16px;
+    #{elVarName('menu', 'level-padding')}: 16px;
+    #{elVarName('menu', 'bg-color')}: elVar('bg-color', 'overlay');
+  }
+
+  // item
+  .el-menu-item,
+  .el-sub-menu__title,
+  .el-menu-item-group__title {
+    #{elVarName('menu-icon-width')}: 0px;
+    position: relative;
+
+    .el-icon:not(.el-sub-menu__icon-arrow) {
+      width: auto !important;
+      font-size: eleVar('menu', 'icon-size');
+      margin: 0 eleVar('menu', 'icon-margin') 0 0;
+    }
+
+    & > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+  }
+
+  // arrow
+  .el-sub-menu__title .el-sub-menu__icon-arrow {
+    order: 4;
+    width: auto;
+    position: static;
+    font-size: eleVar('menu', 'arrow-size');
+    margin: 0 0 0 eleVar('menu', 'icon-margin');
+
+    & > svg.arrow-down path {
+      transition: d 0.2s;
+    }
+  }
+
+  .el-sub-menu.is-opened > .el-sub-menu__title {
+    .el-sub-menu__icon-arrow > svg.arrow-down path {
+      #{'d'}: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425');
+    }
+  }
+
+  // disabled
+  .el-menu-item.is-disabled,
+  .el-sub-menu.is-disabled .el-menu-item,
+  .el-sub-menu.is-disabled .el-sub-menu__title {
+    opacity: 0.46;
+  }
+
+  // 水平菜单
+  &.el-menu--horizontal:not(.el-menu--popup-container) {
+    .el-sub-menu__title:hover {
+      background: none;
+    }
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title {
+      height: elVar('menu', 'item-height');
+      padding: 0 eleVar('menu-horizontal', 'item-padding');
+      margin: 0 eleVar('menu-horizontal', 'item-margin');
+      border-bottom: none;
+
+      &::after {
+        content: '';
+        height: 2px;
+        width: 100%;
+        background: transparent;
+        transition: background-color elVar('transition-duration');
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    & > .el-menu-item.is-active::after,
+    & > .el-sub-menu.is-active > .el-sub-menu__title::after,
+    & > .el-menu-item:not(.is-disabled):hover::after,
+    & > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:hover::after {
+      background: elVar('menu', 'active-color');
+    }
+
+    & > .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
+      margin-right: -2px;
+    }
+  }
+
+  // 垂直菜单
+  &.el-menu--vertical .el-sub-menu > .el-menu {
+    background: eleVar('menu', 'child-bg');
+    box-sizing: border-box;
+  }
+
+  // 垂直菜单和气泡菜单
+  &.el-menu--vertical,
+  & > .el-menu--popup {
+    .el-menu-item,
+    .el-sub-menu__title,
+    .el-menu-item-group__title {
+      margin: calc(#{eleVar('menu-item', 'margin')} / 2) 0;
+
+      & > span {
+        flex: 1;
+      }
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      min-width: auto;
+      height: eleVar('menu-item', 'height');
+      line-height: eleVar('menu-item', 'line-height');
+    }
+
+    .el-menu-item:not(.is-disabled),
+    .el-sub-menu:not(.is-disabled) > .el-sub-menu__title {
+      &:hover {
+        color: elVar('menu', 'hover-text-color');
+      }
+
+      &:active {
+        background: eleVar('menu-item', 'active-bg');
+      }
+    }
+
+    .el-menu-item {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: eleVar('menu-item', 'active-line');
+        background: elVar('menu', 'active-color');
+        transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: scaleY(0.0001);
+        opacity: 0;
+      }
+
+      &.is-active {
+        background: eleVar('menu-item', 'active-bg');
+
+        &::after {
+          opacity: 1;
+          transform: scaleY(1);
+          transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+        }
+      }
+    }
+
+    .el-sub-menu {
+      padding-bottom: 0.02px;
+
+      &.is-active > .el-sub-menu__title {
+        color: elVar('menu', 'active-color');
+      }
+    }
+
+    .el-sub-menu__title .el-sub-menu__icon-arrow {
+      margin-right: -4px;
+    }
+  }
+
+  & > .el-menu--popup,
+  & > .el-menu--popup .el-menu,
+  &.el-menu--vertical .el-menu,
+  &.el-menu--vertical:not(.el-menu--popup-container),
+  & > .el-menu--popup .el-menu-item-group > ul,
+  &.el-menu--vertical .el-menu-item-group > ul {
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      padding-bottom: 0.02px;
+    }
+
+    & > .el-menu-item:not(:last-child) {
+      margin-bottom: eleVar('menu-item', 'margin');
+    }
+  }
+
+  // 气泡菜单
+  & > .el-menu--popup {
+    padding: 0;
+    max-height: calc(100vh - 10px);
+    min-width: eleVar('menu-popup', 'min-width');
+    box-shadow: eleVar('menu-popup', 'shadow');
+    overflow-y: auto;
+    overflow-y: overlay;
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      padding: 0 eleVar('menu-popup', 'item-padding');
+    }
+
+    .el-menu-item::after {
+      display: none;
+    }
+
+    .el-sub-menu > .el-popper {
+      position: fixed !important;
+    }
+  }
+
+  &.el-popper,
+  &.el-menu--popup-container {
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  // 分组菜单
+  .el-menu-item-group__title {
+    display: flex;
+    align-items: center;
+    color: eleVar('menu-group', 'color');
+    font-size: eleVar('menu-group', 'size');
+    font-weight: eleVar('menu-group', 'weight');
+    padding-top: eleVar('menu-group', 'padding-top');
+    padding-bottom: eleVar('menu-group', 'padding-bottom');
+    padding-right: eleVar('menu-group', 'padding-right');
+    box-sizing: border-box;
+    line-height: 1;
+
+    .el-icon:not(.el-sub-menu__icon-arrow) {
+      font-size: eleVar('menu-group', 'icon-size');
+    }
+  }
+
+  // 徽章
+  .el-menu-item .el-badge,
+  .el-sub-menu__title .el-badge,
+  .el-menu-item-group__title .el-badge {
+    order: 3;
+    flex-shrink: 0;
+    line-height: 1;
+    font-weight: normal;
+    margin-left: eleVar('menu', 'icon-margin');
+    font-size: 0;
+
+    .el-badge__content {
+      box-sizing: border-box;
+      vertical-align: middle;
+      display: inline-block;
+      text-align: center;
+    }
+
+    .el-badge__content:not(.is-dot) {
+      min-width: elVar('badge', 'size');
+      line-height: elVar('badge', 'size');
+    }
+  }
+
+  // 折叠
+  &.el-menu--collapse {
+    width: eleVar('menu', 'collapse-width');
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      padding: 0;
+      justify-content: center;
+
+      .el-icon:not(.el-sub-menu__icon-arrow) {
+        margin: 0;
+        font-size: eleVar('menu', 'collapse-icon-size');
+      }
+    }
+
+    & > .el-menu-item > .el-menu-tooltip__trigger,
+    & > .el-menu-item-group > ul > .el-menu-item > .el-menu-tooltip__trigger {
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      position: static;
+    }
+
+    & > .el-sub-menu > .el-sub-menu__title > span,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title > span {
+      display: none;
+      flex: initial;
+    }
+
+    & > .el-menu-item:not(.is-disabled):hover,
+    & > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:hover,
+    &.el-menu > .el-menu-item:not(.is-active):active,
+    &.el-menu > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:active,
+    & > .el-sub-menu.is-active > .el-sub-menu__title {
+      background: eleVar('menu-item', 'active-bg');
+    }
+
+    & > .el-menu-item-group {
+      & > .el-menu-item-group__title {
+        padding-left: 0;
+        padding-right: 0;
+        justify-content: center;
+        text-align: center;
+
+        & > span {
+          flex: initial;
+        }
+
+        .el-icon:not(.is-collapse-show) {
+          display: none;
+        }
+      }
+
+      & > ul > .el-menu-item:not(.is-disabled):hover,
+      & > ul > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:hover,
+      & > ul > .el-menu-item:not(.is-active):active,
+      & > ul > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:active,
+      & > ul > .el-sub-menu.is-active > .el-sub-menu__title {
+        background: eleVar('menu-item', 'active-bg');
+      }
+    }
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title {
+      .el-badge {
+        position: absolute;
+        top: 8px;
+        right: 14px;
+      }
+    }
+
+    & > .el-menu-item,
+    & > .el-sub-menu > .el-sub-menu__title,
+    & > .el-menu-item-group > .el-menu-item-group__title,
+    & > .el-menu-item-group > ul > .el-menu-item,
+    & > .el-menu-item-group > ul > .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-group > .el-menu-item-group__title .el-badge {
+      margin-left: 4px;
+    }
+  }
+
+  // 彩色图标
+  &.ele-menu-colorful {
+    &.el-menu > li,
+    &.el-menu > li.el-menu-item-group > ul > li {
+      &.el-menu-item,
+      &.el-sub-menu > .el-sub-menu__title {
+        .el-icon:not(.el-sub-menu__icon-arrow) {
+          color: eleVar('menu-colorful', 'icon-color');
+          background: eleVar('menu-colorful', 'color-1');
+          width: eleVar('menu-colorful', 'icon-width') !important;
+          height: eleVar('menu-colorful', 'icon-width') !important;
+          line-height: calc(#{eleVar('menu-colorful', 'icon-width')} + 4px);
+          font-size: eleVar('menu-colorful', 'icon-size');
+          vertical-align: -0.05em;
+          border-radius: 50%;
+          text-align: center;
+        }
+      }
+
+      &:nth-child(even) {
+        &.el-menu-item,
+        &.el-sub-menu > .el-sub-menu__title {
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            background: eleVar('menu-colorful', 'color-2');
+          }
+        }
+      }
+
+      &:nth-child(3) {
+        &.el-menu-item,
+        &.el-sub-menu > .el-sub-menu__title {
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            background: eleVar('menu-colorful', 'color-3');
+          }
+        }
+      }
+
+      &:nth-child(4) {
+        &.el-menu-item,
+        &.el-sub-menu > .el-sub-menu__title {
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            background: eleVar('menu-colorful', 'color-4');
+          }
+        }
+      }
+
+      &:nth-child(5) {
+        &.el-menu-item,
+        &.el-sub-menu > .el-sub-menu__title {
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            background: eleVar('menu-colorful', 'color-5');
+          }
+        }
+      }
+
+      &:nth-child(6) {
+        &.el-menu-item,
+        &.el-sub-menu > .el-sub-menu__title {
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            background: eleVar('menu-colorful', 'color-6');
+          }
+        }
+      }
+
+      &:nth-child(7) {
+        &.el-menu-item,
+        &.el-sub-menu > .el-sub-menu__title {
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            background: eleVar('menu-colorful', 'color-7');
+          }
+        }
+      }
+
+      &:nth-child(8) {
+        &.el-menu-item,
+        &.el-sub-menu > .el-sub-menu__title {
+          .el-icon:not(.el-sub-menu__icon-arrow) {
+            background: eleVar('menu-colorful', 'color-8');
+          }
+        }
+      }
+    }
+
+    // 子级去掉图标增加小圆点
+    &.el-menu > li.el-sub-menu > .el-menu,
+    &.el-menu > li.el-menu-item-group > ul > li.el-sub-menu > .el-menu,
+    & > .el-menu.el-menu--popup {
+      .el-menu-item .el-icon:not(.el-sub-menu__icon-arrow),
+      .el-sub-menu__title .el-icon:not(.el-sub-menu__icon-arrow),
+      .el-menu-item-group__title .el-icon:not(.el-sub-menu__icon-arrow) {
+        display: none;
+      }
+
+      .el-menu-item::before,
+      .el-sub-menu__title::before {
+        content: '';
+        width: eleVar('menu-colorful', 'dot-size');
+        height: eleVar('menu-colorful', 'dot-size');
+        margin: eleVar('menu-colorful', 'dot-margin');
+        background: eleVar('menu-colorful', 'dot-color');
+        transition: background-color 0.3s;
+        border-radius: 50%;
+      }
+
+      .el-menu-item:not(.is-disabled):hover::before,
+      .el-menu-item.is-active::before,
+      .el-sub-menu:not(.is-disabled) .el-sub-menu__title:hover::before,
+      .el-sub-menu.is-active .el-sub-menu__title::before {
+        background: eleVar('menu-colorful', 'dot-hover-color');
+      }
+    }
+
+    .el-menu-item-group__title .el-icon:not(.el-sub-menu__icon-arrow) {
+      display: none;
+    }
+  }
+
+  // 暗黑主题
+  &.ele-menu-dark {
+    border: none;
+
+    &.el-menu,
+    & > .el-menu--popup {
+      $color: eleVar('menu-dark', 'active-color');
+      #{elVarName('menu', 'bg-color')}: eleVar('menu-dark', 'bg');
+      #{elVarName('menu', 'text-color')}: eleVar('menu-dark', 'color');
+      #{elVarName('menu', 'hover-text-color')}: #{$color};
+      #{elVarName('menu', 'active-color')}: #{$color};
+      #{eleVarName('menu-item', 'active-bg')}: eleVar('menu-dark', 'active-bg');
+      #{eleVarName('menu', 'child-bg')}: eleVar('menu-dark', 'child-bg');
+    }
+
+    .el-menu-item:not(.is-active):active,
+    .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:active {
+      background: none;
+    }
+
+    &.el-menu--vertical .el-menu-item::after {
+      display: none;
+    }
+
+    .el-menu-item-group__title {
+      color: eleVar('menu-group', 'dark-color');
+    }
+
+    & > .el-menu--popup {
+      box-shadow: eleVar('menu-popup', 'dark-shadow');
+    }
+
+    &.ele-menu-colorful {
+      $color: eleVar('menu-colorful', 'dark-dot-color');
+      $hover-color: eleVar('menu-colorful', 'dark-dot-hover-color');
+      #{eleVarName('menu-colorful', 'dot-color')}: #{$color};
+      #{eleVarName('menu-colorful', 'dot-hover-color')}: #{$hover-color};
+    }
+  }
+}
+
+// 超链接
+.el-menu-item .ele-menu-link {
+  color: inherit;
+  position: static;
+  text-decoration: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+  }
+}
+
+// 兼容横向菜单溢出的菜单
+.el-menu--popup-container > .el-menu--popup {
+  max-height: calc(100vh - 10px);
+  overflow-y: auto;
+  overflow-y: overlay;
+}

package/es/ele-menus/style/scrollbar.scss

@@ -0,0 +1,68 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-menu.el-menu--vertical,
+.ele-menu > .el-menu--popup,
+.ele-admin-sidebar,
+.ele-admin-sidebar > .ele-admin-menus,
+.ele-admin-sidebox,
+.ele-admin-sidebox > .ele-admin-menus {
+  scrollbar-width: thin;
+  scrollbar-color: eleVar('menu-scrollbar', 'color') transparent;
+
+  &::-webkit-scrollbar {
+    width: eleVar('menu-scrollbar', 'size');
+    height: eleVar('menu-scrollbar', 'size');
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: eleVar('menu-scrollbar', 'radius');
+    border: eleVar('menu-scrollbar', 'padding') solid transparent;
+    background-color: eleVar('menu-scrollbar', 'color');
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: eleVar('menu-scrollbar', 'hover-color');
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: eleVar('menu-scrollbar', 'bg');
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+/* 鼠标进入才显示滚动条 */
+@media (hover: hover) and (pointer: fine) {
+  .ele-menu.el-menu--vertical,
+  .ele-menu > .el-menu--popup,
+  .ele-admin-sidebar,
+  .ele-admin-sidebar > .ele-admin-menus,
+  .ele-admin-sidebox,
+  .ele-admin-sidebox > .ele-admin-menus {
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    &:hover::-webkit-scrollbar {
+      width: eleVar('menu-scrollbar', 'size');
+      height: eleVar('menu-scrollbar', 'size');
+    }
+  }
+}
+
+/* 暗色风格 */
+.ele-menu.el-menu--vertical.ele-menu-dark,
+.ele-menu.ele-menu-dark > .el-menu--popup,
+.ele-admin-dark-sidebar:not(.ele-admin-mix-sidebar) .ele-admin-sidebar,
+.ele-admin-dark-sidebar .ele-admin-sidebox {
+  $bg: eleVar('menu-dark-scrollbar', 'bg');
+  $color: eleVar('menu-dark-scrollbar', 'color');
+  $hover-color: eleVar('menu-dark-scrollbar', 'hover-color');
+  #{eleVarName('menu-scrollbar', 'bg')}: #{$bg};
+  #{eleVarName('menu-scrollbar', 'color')}: #{$color};
+  #{eleVarName('menu-scrollbar', 'hover-color')}: #{$hover-color};
+}

package/es/ele-menus/types/index.d.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties, Component } from 'vue';
+import type { MenuItemProps, SubMenuProps, MenuItemGroupProps, IconProps, BadgeProps } from 'element-plus';
+/**
+ * 菜单数据
+ */
+export interface MenuItem extends Partial<MenuItemProps>, Omit<Partial<SubMenuProps>, 'index'>, Partial<MenuItemGroupProps> {
+    /** 唯一标识 */
+    key?: string | number;
+    /** 标题 */
+    title?: string;
+    /** 图标 */
+    icon?: string | Component;
+    /** 图标属性 */
+    iconProps?: MenuIconProps;
+    /** 图标样式 */
+    iconStyle?: CSSProperties;
+    /** 菜单链接地址 */
+    path?: string;
+    /** 是否展示为分组菜单 */
+    group?: boolean;
+    /** 徽章 */
+    badge?: MenuBadgeProps;
+    /** 子级数据 */
+    children?: MenuItem[];
+    /** 附加数据 */
+    meta?: Record<keyof any, any>;
+}
+/**
+ * 主题
+ */
+export type MenuTheme = 'light' | 'dark';
+/**
+ * 弹出菜单主题
+ */
+export type PopupMenuTheme = 'auto' | MenuTheme;
+/**
+ * 弹出菜单是否彩色图标
+ */
+export type PopupColorful = 'auto' | boolean;
+/**
+ * 菜单图标属性
+ */
+export interface MenuIconProps extends Partial<IconProps> {
+    /** 样式 */
+    style?: CSSProperties;
+    /** 类名 */
+    class?: string;
+}
+/**
+ * 菜单徽章属性
+ */
+export interface MenuBadgeProps extends Partial<BadgeProps> {
+    /** 样式 */
+    style?: CSSProperties;
+    /** 类名 */
+    class?: string;
+}