ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,139 @@
+@use '../../style/themes/default.scss' as *;
+
+/* 固定顶栏 */
+.ele-admin-fixed-header {
+  .ele-admin-header {
+    position: sticky;
+    top: 0;
+  }
+
+  .ele-admin-tabs {
+    position: sticky;
+    top: eleVar('header', 'height');
+  }
+
+  &:not(.ele-admin-fixed-sidebar) {
+    .ele-admin-sidebar,
+    .ele-admin-sidebox {
+      z-index: calc(#{eleVar('layout', 'index')} + 1);
+    }
+
+    &:not(.ele-admin-logo-auto):not(.ele-admin-dark-sidebar) {
+      .ele-admin-logo {
+        box-shadow: 0 -1px 0 eleVar('header', 'line-color') inset;
+      }
+
+      &.ele-admin-tab-card .ele-admin-logo,
+      &:not(.ele-admin-has-tab) .ele-admin-logo {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+/* 固定侧栏 */
+.ele-admin-fixed-sidebar {
+  .ele-admin-sidebox,
+  &:not(.ele-admin-mix-sidebar) .ele-admin-sidebar,
+  &.ele-admin-fixed-header.ele-admin-mix-sidebar .ele-admin-sidebar {
+    position: sticky;
+    top: eleVar('header', 'height');
+    height: calc(100vh - #{eleVar('header', 'height')});
+  }
+
+  &:not(.ele-admin-fixed-header) {
+    &:not(.ele-admin-logo-auto) {
+      .ele-admin-logo {
+        position: fixed;
+        top: 0;
+        left: 0;
+      }
+
+      &:not(.ele-admin-mix-sidebar) {
+        .ele-admin-header {
+          padding-left: eleVar('sidebar', 'width');
+        }
+
+        &.ele-admin-collapse .ele-admin-header {
+          padding-left: eleVar('sidebar', 'collapse-width');
+        }
+      }
+
+      &.ele-admin-mix-sidebar {
+        .ele-admin-header {
+          padding-left: eleVar('sidebox', 'width');
+        }
+
+        &.ele-admin-compact .ele-admin-header {
+          padding-left: eleVar('sidebar', 'collapse-width');
+        }
+      }
+    }
+
+    &.ele-admin-logo-auto .ele-admin-sidebox,
+    &.ele-admin-logo-auto:not(.ele-admin-mix-sidebar) .ele-admin-sidebar {
+      top: -1px;
+      height: eleVar('layout', 'height');
+    }
+  }
+}
+
+/* 固定主体 */
+.ele-admin-fixed-body {
+  height: eleVar('layout', 'height');
+
+  .ele-admin-main,
+  .ele-admin-body,
+  .ele-admin-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .ele-admin-body,
+  .ele-admin-sidebar,
+  .ele-admin-sidebox {
+    height: 100%;
+  }
+}
+
+/* 内容全屏 */
+.ele-admin-maximized {
+  .ele-admin-header,
+  .ele-admin-sidebar,
+  .ele-admin-sidebox,
+  &.ele-admin-expanded .ele-admin-tabs {
+    display: none;
+  }
+
+  &.ele-admin-fixed-header .ele-admin-tabs {
+    top: 0;
+  }
+}
+
+/* 图标置于顶栏 */
+.ele-admin-logo-auto {
+  .ele-admin-header {
+    .ele-admin-logo {
+      width: auto;
+      padding: 0 12px 0 24px;
+      color: eleVar('logo', 'color');
+      background: none;
+      box-shadow: none;
+      transition: none;
+
+      & > img + div {
+        display: inline;
+      }
+    }
+
+    &.is-dark .ele-admin-logo,
+    &.is-primary .ele-admin-logo {
+      color: eleVar('logo', 'dark-color');
+    }
+  }
+
+  .ele-admin-sidebar,
+  .ele-admin-sidebox {
+    z-index: calc(#{eleVar('layout', 'index')} + 1);
+  }
+}

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

@@ -0,0 +1,87 @@
+@use '../../style/themes/default.scss' as *;
+
+/* 暗色顶栏 */
+.ele-admin-header.is-dark,
+.ele-admin-header.is-primary {
+  color: eleVar('menu-dark', 'active-color');
+  background: eleVar('header-dark', 'bg');
+  box-shadow: eleVar('header-dark', 'shadow');
+
+  // 操作按钮
+  .ele-admin-tool:hover {
+    background: eleVar('sidebar', 'dark-tool-hover-bg');
+  }
+
+  // 面包屑
+  .ele-breadcrumb .el-breadcrumb__item {
+    .el-breadcrumb__inner {
+      color: eleVar('menu-dark', 'color');
+
+      &.is-link:hover {
+        color: eleVar('menu-dark', 'active-color');
+      }
+    }
+
+    &:last-child .el-breadcrumb__inner {
+      color: eleVar('menu-dark', 'active-color');
+    }
+
+    .el-breadcrumb__separator {
+      color: eleVar('menu-dark', 'color');
+    }
+  }
+}
+
+/* 主色顶栏 */
+.ele-admin-header.is-primary {
+  background: elVar('color-primary');
+}
+
+/* 暗色侧栏 */
+.ele-admin-dark-sidebar {
+  .ele-admin-logo {
+    color: eleVar('logo', 'dark-color');
+    background: eleVar('sidebar', 'dark-bg');
+    box-shadow: eleVar('logo', 'dark-shadow');
+  }
+
+  .ele-admin-sidebar {
+    background: eleVar('sidebar', 'dark-bg');
+    box-shadow: eleVar('sidebar', 'dark-shadow');
+  }
+
+  &.ele-admin-mix-sidebar {
+    &:not(.ele-admin-collapse) {
+      .ele-admin-logo,
+      .ele-admin-sidebox {
+        box-shadow: none;
+      }
+    }
+
+    .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');
+          }
+        }
+
+        & > .el-sub-menu.is-active > .el-sub-menu__title {
+          background: eleVar('menu-dark', 'active-bg');
+        }
+      }
+    }
+  }
+
+  .ele-admin-sidebox .ele-sidebar-tool,
+  &:not(.ele-admin-mix-sidebar) .ele-admin-sidebar .ele-sidebar-tool {
+    color: eleVar('menu-dark', 'active-color');
+
+    &:hover {
+      background: eleVar('sidebar', 'dark-tool-hover-bg');
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-admin-layout {
+  display: flex;
+  flex-direction: column;
+  background: eleVar('layout', 'bg');
+  min-height: eleVar('layout', 'height');
+
+  .ele-admin-main {
+    flex: auto;
+    display: flex;
+  }
+
+  .ele-admin-body,
+  .ele-admin-content {
+    flex: auto;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+/* 遮罩 */
+.ele-admin-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: eleVar('layout', 'mask-index');
+  transition: background-color $ele-transition, left $ele-transition;
+  visibility: hidden;
+}
+
+/* 禁用过渡效果 */
+.ele-transition-disabled {
+  .ele-admin-header,
+  .ele-admin-logo,
+  .ele-admin-sidebox,
+  .ele-admin-sidebar,
+  .ele-admin-body,
+  .ele-admin-tabs,
+  .ele-admin-content,
+  .ele-bottom-bar,
+  .ele-modal-inner {
+    transition: none !important;
+  }
+}
+
+/* iframe */
+.ele-admin-iframe {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: block;
+  border: none;
+}

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

@@ -0,0 +1,180 @@
+@use '../../style/themes/default.scss' as *;
+
+/* 侧栏 */
+.ele-admin-sidebar {
+  flex-shrink: 0;
+  width: eleVar('sidebar', 'width');
+  z-index: calc(#{eleVar('layout', 'index')} + 3);
+  background: eleVar('sidebar', 'bg');
+  box-shadow: eleVar('sidebar', 'shadow');
+  transition: width $ele-transition, left $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;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow-y: overlay;
+
+    & > .ele-menu {
+      width: auto;
+      border: none;
+      background: none;
+      transition: none;
+    }
+  }
+}
+
+/* 双侧栏一级 */
+.ele-admin-sidebox {
+  flex-shrink: 0;
+  width: eleVar('sidebox', 'width');
+  z-index: calc(#{eleVar('layout', 'index')} + 3);
+  background: eleVar('sidebar', 'bg');
+  box-shadow: -1px 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%;
+          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');
+        }
+
+        &::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-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;
+        }
+      }
+    }
+  }
+}
+
+.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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    background: eleVar('sidebar', 'tool-hover-bg');
+  }
+}
+
+/* 双侧栏 */
+.ele-admin-mix-sidebar {
+  .ele-admin-logo {
+    width: eleVar('sidebox', 'width');
+
+    & > img + div {
+      display: none;
+    }
+  }
+
+  &:not(.ele-admin-collapse) .ele-admin-logo {
+    box-shadow: -1px 0 0 eleVar('header', 'line-color') inset;
+  }
+
+  .ele-admin-sidebox + .ele-admin-sidebar {
+    width: eleVar('sidebar', 'mix-width');
+    z-index: calc(#{eleVar('layout', 'index')} + 1);
+    box-shadow: eleVar('sidebar', 'shadow');
+    background: eleVar('sidebar', 'bg');
+  }
+}

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

@@ -0,0 +1,64 @@
+@use '../../style/themes/default.scss' as *;
+
+/* 页签栏 */
+.ele-admin-tabs {
+  flex-shrink: 0;
+  background: eleVar('header', 'bg');
+  box-shadow: eleVar('header', 'shadow');
+  z-index: eleVar('layout', 'index');
+
+  &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+    padding-left: eleVar('page', 'padding');
+  }
+
+  // 固定主页页签
+  &.is-fixed-home {
+    padding-left: eleVar('page', 'padding');
+  }
+}
+
+/* 顶栏阴影改分割线 */
+.ele-admin-open-tab:not(.ele-admin-tab-card) {
+  $line: eleVar('header', 'line-color');
+
+  &:not(.ele-admin-logo-auto) {
+    .ele-admin-header {
+      box-shadow: eleVar('sidebar', 'width') -1px 0 $line inset;
+      transition: padding-left $ele-transition, box-shadow $ele-transition;
+    }
+
+    &.ele-admin-collapse .ele-admin-header {
+      box-shadow: eleVar('sidebar', 'collapse-width') -1px 0 $line inset;
+    }
+
+    &.ele-admin-mix-sidebar {
+      .ele-admin-header {
+        box-shadow: eleVar('sidebox', 'width') -1px 0 $line inset;
+      }
+
+      &.ele-admin-compact:not(.ele-admin-logo-auto) .ele-admin-header {
+        box-shadow: eleVar('sidebar', 'collapse-width') -1px 0 $line inset;
+      }
+    }
+  }
+
+  &.ele-admin-logo-auto .ele-admin-header {
+    box-shadow: 0 -1px 0 $line inset;
+  }
+}
+
+/* 按钮风格页签 */
+.ele-admin-tab-card .ele-admin-tabs {
+  $space: eleVar('tab-button', 'space');
+  padding: $space eleVar('page', 'padding') $space 0;
+  background: eleVar('layout', 'bg');
+  box-shadow: none;
+
+  &.is-fixed-home {
+    padding-left: eleVar('page', 'padding');
+
+    .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: $space;
+    }
+  }
+}