ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.2

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

@@ -0,0 +1,192 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 顶栏 */
+.ele-admin-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: eleVar('header', 'height');
+  line-height: eleVar('header', 'height');
+  background: eleVar('header', 'bg');
+  box-shadow: eleVar('header', 'shadow');
+  z-index: calc(#{eleVar('layout', 'index')} + 2);
+  transition: all $transition-base;
+
+  /* 顶栏面包屑导航 */
+  .ele-admin-breadcrumb {
+    $tool-padding: eleVar('header', 'tool-padding');
+    margin-left: calc(#{eleVar('header', 'tools-padding')} + #{$tool-padding});
+    flex-shrink: 0;
+  }
+
+  /* 顶栏菜单 */
+  .ele-admin-menus {
+    flex: 1;
+    overflow: hidden;
+
+    & > .ele-menu {
+      $menu-height: eleVar('header', 'menu-height');
+      #{eleVarName('menu-horizontal', 'height')}: #{$menu-height};
+      padding-top: 0;
+      padding-bottom: 0;
+      background: none;
+      border: none;
+    }
+  }
+
+  /* 顶栏页签栏 */
+  & > .ele-admin-tabs {
+    flex: 1;
+    overflow: hidden;
+    line-height: normal;
+
+    &.ele-tab-wrap {
+      padding-right: 0;
+      background: none;
+      box-shadow: none;
+    }
+
+    & + .ele-admin-tools {
+      padding-left: 0;
+    }
+
+    &.is-simple,
+    &.is-indicator {
+      align-self: flex-end;
+    }
+  }
+
+  & > .ele-admin-tabs.ele-tab-wrap.is-simple,
+  & > .ele-admin-tabs.ele-tab-wrap.is-indicator,
+  & > .ele-tab-wrap .ele-tabs.is-simple,
+  & > .ele-tab-wrap .ele-tabs.is-indicator {
+    $height: eleVar('header', 'height');
+    $tool-height: eleVar('header', 'tool-height');
+    $tab-height: calc(#{$height} - (#{$height} - #{$tool-height}) / 2);
+    #{eleVarName('tab', 'height')}: #{$tab-height};
+  }
+
+  /* 顶栏与页签栏分割线 */
+  &.show-divider {
+    box-shadow: 0 -0.8px 0 eleVar('header', 'line-color') inset;
+  }
+
+  /* 模糊透明顶栏 */
+  &.is-ghost {
+    background: eleVar('header', 'ghost-bg');
+    backdrop-filter: eleVar('header', 'ghost-filter');
+  }
+
+  /* 固定顶栏 */
+  &.is-fixed {
+    position: sticky;
+    top: 0;
+  }
+}
+
+/* 顶栏操作按钮容器 */
+.ele-admin-tools {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 eleVar('header', 'tools-padding');
+  box-sizing: border-box;
+  height: 100%;
+
+  & + .ele-admin-breadcrumb {
+    margin-left: 0;
+  }
+
+  & + .ele-admin-tabs {
+    &.ele-tab-wrap,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: 0;
+    }
+  }
+
+  & + .is-simple,
+  & + .is-indicator {
+    &.is-fixed-home,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: eleVar('tab', 'simple-angle-size');
+    }
+  }
+
+  & + .is-button {
+    &.is-fixed-home,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: eleVar('tab', 'button-space');
+    }
+  }
+}
+
+/* 暗色顶栏 */
+.ele-admin-header.is-dark,
+.ele-admin-header.is-primary {
+  color: eleVar('header', 'dark-color');
+  background: eleVar('header', 'dark-bg');
+  box-shadow: eleVar('header', 'dark-shadow');
+
+  /* 暗色顶栏面包屑 */
+  .ele-breadcrumb .el-breadcrumb__item {
+    .el-breadcrumb__inner,
+    .el-breadcrumb__separator {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .el-breadcrumb__inner.is-link:hover,
+    &:last-child .el-breadcrumb__inner {
+      color: eleVar('header', 'dark-color');
+    }
+  }
+
+  /* 暗色顶栏页签栏 */
+  & > .ele-admin-tabs.ele-tab-wrap,
+  & > .ele-admin-tabs .ele-tabs {
+    $color: eleVar('header', 'dark-color');
+    $hover-bg: eleVar('header', 'dark-tool-hover-bg');
+    #{eleVarName('tab', 'color')}: #{$color};
+    #{eleVarName('tab', 'hover-color')}: #{$color};
+    #{eleVarName('tab', 'close-color')}: #{$color};
+    #{eleVarName('tab', 'close-hover-color')}: #{$color};
+    #{eleVarName('tab', 'close-hover-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'tool-color')}: #{$color};
+    #{eleVarName('tab', 'tool-hover-color')}: #{$color};
+    #{eleVarName('tab', 'simple-hover-color')}: #{$color};
+    #{eleVarName('tab', 'simple-hover-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'simple-active-bg')}: #{elVar('bg-color', 'overlay')};
+    #{eleVarName('tab', 'simple-active-line')}: 0px;
+    #{eleVarName('tab', 'simple-tool-hover-bg')}: transparent;
+    #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
+    #{eleVarName('tab', 'indicator-dot-hover-color')}: rgba(255, 255, 255, 0.6);
+    #{eleVarName('tab', 'button-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'button-hover-bg')}: rgba(255, 255, 255, 0.2);
+    #{eleVarName('tab', 'button-hover-color')}: #{$color};
+  }
+}
+
+.ele-admin-header.is-dark > .ele-admin-tabs.ele-tab-wrap,
+.ele-admin-header.is-dark > .ele-admin-tabs .ele-tabs {
+  $color: eleVar('header', 'dark-color');
+  $hover-bg: eleVar('header', 'dark-tool-hover-bg');
+  #{eleVarName('tab', 'active-close-color')}: #{$color};
+  #{eleVarName('tab', 'active-close-hover-color')}: #{$color};
+  #{eleVarName('tab', 'active-close-hover-bg')}: #{$hover-bg};
+  #{eleVarName('tab', 'simple-active-color')}: #{$color};
+  #{eleVarName('tab', 'simple-active-bg')}: #{elVar('color-primary')};
+  #{eleVarName('tab', 'indicator-dot-active-color')}: #{$color};
+  #{eleVarName('tab', 'button-active-color')}: #{$color};
+  #{eleVarName('tab', 'button-active-bg')}: #{elVar('color-primary')};
+}
+
+/* 主色顶栏 */
+.ele-admin-header.is-primary {
+  background: elVar('color-primary');
+
+  /* 主色顶栏菜单 */
+  .ele-admin-menus > .ele-menu {
+    $active-bg: eleVar('header', 'primary-active-bg');
+    #{eleVarName('menu-horizontal', 'dark-active-bg')}: #{$active-bg};
+  }
+}

package/lib/ele-admin-layout/style/index.cjs

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

package/lib/ele-admin-layout/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-admin-layout/style/index.scss

@@ -0,0 +1,302 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+@use './tabs.scss';
+@use './header.scss';
+@use './sidebar.scss';
+
+@include set-layout-var($ele);
+
+.ele-admin-layout {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: eleVar('layout', 'bg');
+  box-sizing: border-box;
+  position: relative;
+  min-height: 100%;
+
+  & > .ele-admin-header {
+    z-index: calc(#{eleVar('layout', 'index')} + 4);
+  }
+}
+
+.ele-admin-main,
+.ele-admin-body,
+.ele-admin-wrapper,
+.ele-admin-content {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.ele-admin-layout.is-row-direction,
+.ele-admin-main.is-row-direction {
+  flex-direction: row;
+}
+
+.ele-admin-wrapper {
+  position: relative;
+
+  & > .ele-backtop {
+    z-index: calc(#{eleVar('layout', 'index')} + 1);
+  }
+}
+
+/* 主体宽度 */
+.ele-admin-layout.is-row-direction > .ele-admin-main,
+.ele-admin-main.is-row-direction > .ele-admin-body {
+  flex: 0 1 auto;
+  transition: width $transition-base;
+  width: 100%;
+}
+
+.ele-admin-layout > .ele-admin-side + .ele-admin-main,
+.ele-admin-main > .ele-admin-side + .ele-admin-body {
+  width: calc(100% - #{eleVar('sidebar', 'width')});
+}
+
+.ele-admin-side.is-collapse + .ele-admin-main,
+.ele-admin-side.is-collapse + .ele-admin-body {
+  width: calc(100% - #{eleVar('sidebar', 'collapse-width')});
+}
+
+.ele-admin-side.is-mix + .ele-admin-main,
+.ele-admin-side.is-mix + .ele-admin-body {
+  $box-width: eleVar('sidebox', 'width');
+  width: calc(100% - #{eleVar('sidebar', 'mix-width')} - #{$box-width});
+}
+
+.ele-admin-side.is-mix.is-collapse + .ele-admin-main,
+.ele-admin-side.is-mix.is-collapse + .ele-admin-body {
+  width: calc(100% - #{eleVar('sidebox', 'width')});
+}
+
+.ele-admin-side.is-compact + .ele-admin-main,
+.ele-admin-side.is-compact + .ele-admin-body {
+  $box-width: eleVar('sidebar', 'collapse-width');
+  width: calc(100% - #{eleVar('sidebar', 'mix-width')} - #{$box-width});
+}
+
+.ele-admin-side.is-compact.is-collapse + .ele-admin-main,
+.ele-admin-side.is-compact.is-collapse + .ele-admin-body {
+  width: calc(100% - #{eleVar('sidebar', 'collapse-width')});
+}
+
+.ele-admin-side.is-box + .ele-admin-main,
+.ele-admin-side.is-box + .ele-admin-body {
+  width: calc(100% - #{eleVar('sidebox', 'width')});
+}
+
+.ele-admin-side.is-box.is-compact + .ele-admin-main,
+.ele-admin-side.is-box.is-compact + .ele-admin-body {
+  width: calc(100% - #{eleVar('sidebar', 'collapse-width')});
+}
+
+.ele-admin-layout.is-row-direction.is-mobile > .ele-admin-main,
+.ele-admin-layout.is-row-direction.is-fixed-body > .ele-admin-main,
+.ele-admin-layout.is-fixed-body > .ele-admin-main > .ele-admin-body,
+.ele-admin-layout.is-row-direction.is-maximized > .ele-admin-main,
+.ele-admin-layout.is-maximized > .ele-admin-main > .ele-admin-body {
+  width: 100%;
+}
+
+.ele-admin-layout {
+  /* 固定主体 */
+  &.is-fixed-body,
+  &.is-fixed-body > .ele-admin-main,
+  &.is-fixed-body > .ele-admin-main > .ele-admin-body,
+  &.is-fixed-body > .ele-admin-main > .ele-admin-side,
+  &.is-fixed-body > .ele-admin-side {
+    height: 100%;
+  }
+
+  &.is-fixed-body > .ele-admin-main,
+  &.is-fixed-body > .ele-admin-main > .ele-admin-body,
+  &.is-fixed-body > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
+    overflow: auto;
+  }
+
+  &.is-fixed-body > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
+    & > .ele-admin-content {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    & > .ele-backtop {
+      z-index: eleVar('layout', 'index');
+    }
+  }
+
+  /* 内容全屏 */
+  &.is-maximized > .ele-admin-header,
+  &.is-maximized > .ele-admin-main > .ele-admin-header,
+  &.is-maximized > .ele-admin-main > .ele-admin-side,
+  &.is-maximized > .ele-admin-side,
+  &.is-expanded > .ele-admin-main > .ele-admin-body > .ele-admin-tabs {
+    display: none;
+  }
+
+  /* 移动端风格 */
+  &.is-mobile > .ele-admin-side {
+    width: 0;
+  }
+
+  &.is-collapse > .ele-admin-side {
+    & > .ele-admin-sidebar,
+    & > .ele-admin-sidebox {
+      visibility: hidden;
+    }
+
+    & > .ele-admin-sidebar {
+      transform: translateX(-100%);
+    }
+
+    & > .ele-admin-sidebar.is-mix,
+    & > .ele-admin-sidebox {
+      $mix-width: eleVar('sidebar', 'mix-width');
+      $box-width: eleVar('sidebox', 'width');
+      transform: translateX(calc(#{$box-width} * -1 - #{$mix-width}));
+    }
+  }
+
+  &.is-collapse > .ele-admin-mask,
+  &:not(.is-mobile) > .ele-admin-mask {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  /* 禁用过渡效果 */
+  &.is-transition-disabled {
+    & > .ele-admin-header,
+    & > .ele-admin-main > .ele-admin-header,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebar,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox,
+    & > .ele-admin-side > .ele-admin-sidebar,
+    & > .ele-admin-side > .ele-admin-sidebox,
+    & > .ele-admin-main,
+    & > .ele-admin-main > .ele-admin-body {
+      transition: none !important;
+    }
+  }
+}
+
+/* logo */
+.ele-admin-logo,
+.ele-admin-logo-title {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: eleVar('logo', 'color');
+  font-size: eleVar('logo', 'size');
+  font-family: eleVar('logo', 'family');
+  height: eleVar('header', 'height');
+  position: relative;
+  overflow: hidden;
+
+  h1 {
+    margin: 0;
+    font-weight: 600;
+    font-size: inherit;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.ele-admin-logo > img + h1 {
+  margin-left: 8px;
+}
+
+.ele-admin-sidebar.is-collapse > .ele-admin-logo > img + h1 {
+  display: none;
+}
+
+.ele-admin-header > .ele-admin-logo {
+  $tool-padding: eleVar('header', 'tool-padding');
+  margin-left: calc(#{eleVar('header', 'tools-padding')} + #{$tool-padding});
+}
+
+.ele-admin-header.is-dark > .ele-admin-logo,
+.ele-admin-header.is-primary > .ele-admin-logo,
+.ele-admin-sidebar.is-dark > .ele-admin-logo,
+.ele-admin-sidebar.is-dark > .ele-admin-logo-title,
+.ele-admin-sidebox.is-dark > .ele-admin-logo {
+  color: eleVar('logo', 'dark-color');
+}
+
+/* 操作按钮 */
+.ele-admin-tool {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: eleVar('header', 'tool-height');
+  padding: 0 eleVar('header', 'tool-padding');
+  border-radius: eleVar('header', 'tool-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    background: eleVar('header', 'tool-hover-bg');
+  }
+
+  & > .el-dropdown {
+    color: inherit;
+    cursor: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    align-items: center;
+    height: 100%;
+  }
+}
+
+.ele-admin-header.is-dark .ele-admin-tool:hover,
+.ele-admin-header.is-primary .ele-admin-tool:hover,
+.ele-admin-sidebar.is-dark .ele-admin-tool:hover,
+.ele-admin-sidebox.is-dark .ele-admin-tool:hover {
+  background: eleVar('header', 'dark-tool-hover-bg');
+}
+
+.ele-admin-sidebar .ele-admin-tool,
+.ele-admin-sidebox .ele-admin-tool {
+  height: eleVar('sidebar', 'tool-height');
+  padding: 0;
+}
+
+.ele-admin-sidebar.is-dark .ele-admin-tool,
+.ele-admin-sidebox.is-dark .ele-admin-tool {
+  color: eleVar('header', 'dark-color');
+}
+
+/* 模态框容器 */
+.ele-admin-modals {
+  flex-shrink: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: eleVar('layout', 'index');
+}
+
+/* 遮罩 */
+.ele-admin-mask {
+  flex-shrink: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: calc(#{eleVar('layout', 'index')} + 2);
+  background: elVar('overlay-color', 'lighter');
+  transition: all $transition-base;
+}

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

@@ -0,0 +1,185 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 侧栏容器 */
+.ele-admin-side {
+  flex-shrink: 0;
+  display: flex;
+  box-sizing: border-box;
+  z-index: calc(#{eleVar('layout', 'index')} + 3);
+  position: relative;
+}
+
+/* 侧栏 */
+.ele-admin-sidebar {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: eleVar('sidebar', 'width');
+  background: eleVar('sidebar', 'bg');
+  box-shadow: eleVar('sidebar', 'shadow');
+  z-index: calc(#{eleVar('layout', 'index')} + 3);
+  transition: all $transition-base;
+  box-sizing: border-box;
+  position: relative;
+
+  /* 侧栏菜单 */
+  .ele-admin-menus {
+    flex: 1;
+    overflow: hidden;
+
+    & > .el-scrollbar__wrap {
+      position: relative;
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      & > .el-scrollbar__view > .ele-menu {
+        width: 100%;
+        border: none;
+        background: none;
+        transition: none;
+      }
+    }
+  }
+
+  /* 暗色侧栏 */
+  &.is-dark {
+    background: eleVar('sidebar', 'dark-bg');
+    box-shadow: eleVar('sidebar', 'dark-shadow');
+  }
+
+  /* 双侧栏 */
+  &.is-mix {
+    width: eleVar('sidebar', 'mix-width');
+    z-index: calc(#{eleVar('layout', 'index')} + 2);
+
+    &.is-dark {
+      border-left: 1px solid #000;
+    }
+  }
+
+  /* 模糊透明侧栏 */
+  &.is-ghost {
+    background: eleVar('sidebar', 'ghost-bg');
+  }
+
+  /* 折叠侧栏 */
+  &.is-collapse {
+    &:not(.is-mix) {
+      width: eleVar('sidebar', 'collapse-width');
+    }
+
+    &.is-mix {
+      margin-left: calc(#{eleVar('sidebar', 'mix-width')} * -1);
+      visibility: hidden;
+    }
+  }
+}
+
+/* 双侧栏一级 */
+.ele-admin-sidebox {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: eleVar('sidebox', 'width');
+  background: eleVar('sidebar', 'bg');
+  box-shadow: eleVar('sidebar', 'shadow');
+  z-index: calc(#{eleVar('layout', 'index')} + 3);
+  transition: all $transition-base;
+  box-sizing: border-box;
+  position: relative;
+
+  /* 双侧栏一级菜单 */
+  .ele-admin-menus {
+    flex: 1;
+    overflow: hidden;
+
+    & > .el-scrollbar__wrap {
+      position: relative;
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      & > .el-scrollbar__view > .ele-menu {
+        border: none;
+        background: none;
+      }
+    }
+  }
+
+  /* 暗色双侧栏一级 */
+  &.is-dark {
+    background: eleVar('sidebar', 'dark-bg');
+    box-shadow: eleVar('sidebar', 'dark-shadow');
+  }
+
+  /* 模糊透明双侧栏一级 */
+  &.is-ghost {
+    background: eleVar('sidebar', 'ghost-bg');
+  }
+
+  /* 与侧栏分割线 */
+  &.show-divider {
+    box-shadow: -0.8px 0 0 eleVar('header', 'line-color') inset;
+
+    &.is-dark {
+      box-shadow: none;
+    }
+  }
+
+  /* 折叠双侧栏一级 */
+  &.is-compact {
+    width: eleVar('sidebar', 'collapse-width');
+  }
+}
+
+/* 固定侧栏 */
+.ele-admin-side.is-fixed {
+  position: sticky;
+  left: 0;
+  top: 0;
+}
+
+.ele-admin-side.show-placeholder {
+  margin-top: calc(eleVar('header', 'height') * -1);
+
+  & > .ele-admin-sidebar,
+  & > .ele-admin-sidebox {
+    padding-top: eleVar('header', 'height');
+  }
+}
+
+/* 侧栏菜单滚动条 */
+.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-sidebar.is-dark > .ele-admin-menus,
+.ele-admin-sidebox.is-dark > .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};
+}