ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/es/style/themes/modern-dark.scss

@@ -0,0 +1,217 @@
+/** 现代主题暗黑(css-var 模式) */
+@use 'sass:map';
+@use 'ele-admin-plus/es/style/util.scss' as *;
+@use 'ele-admin-plus/es/style/themes/theme-util.scss' as *;
+$theme-modern-dark-selector: 'html.ele-theme-modern-dark' !default;
+
+$ele-modern-dark: () !default;
+$ele-modern-dark: map.deep-merge(
+  (
+    'card': (
+      'radius': 12px
+    ),
+    'modal': (
+      'radius': 12px
+    ),
+    'menu-dark-thumb': (
+      'color': rgba(255, 255, 255, 0.6),
+      'hover-color': #fff
+    )
+  ),
+  $ele-modern-dark
+);
+
+@include set-theme-var($theme-modern-dark-selector, $ele-modern-dark);
+
+#{$theme-modern-dark-selector} {
+  $layout-primary-bg: (
+    linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)) center / 102% 102%,
+    elVar('color-primary')
+  );
+  .ele-pro-layout {
+    padding: 8px;
+    background: $layout-primary-bg;
+    #{eleVarName('layout', 'bg')}: #1f1f1f;
+    #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
+    #{eleVarName('header', 'bg')}: eleVar('layout', 'bg');
+    #{eleVarName('header', 'height')}: 46px;
+    #{eleVarName('header', 'line-color')}: transparent;
+    #{eleVarName('header', 'ghost-bg')}: eleVar('layout', 'bg');
+    #{eleVarName('header', 'shadow')}: none;
+    #{eleVarName('header', 'primary-bg')}: (
+      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) center / 102% 102%,
+      elVar('color-primary', 'dark-2')
+    );
+    #{eleVarName('header', 'primary-shadow')}: none;
+    #{eleVarName('header', 'tool-radius')}: calc(
+      (#{eleVar('header', 'height')} - #{eleVar('header', 'tool-height')}) * 1.5
+    );
+    #{eleVarName('header', 'primary-active-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('sidebar', 'shadow')}: none;
+    #{eleVarName('sidebar', 'dark-bg')}: transparent;
+    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'mobile-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'mobile-dark-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'dark-shadow')}: none;
+    #{eleVarName('sidebar', 'collapse-width')}: 62px;
+    #{eleVarName('sidebox', 'width')}: 88px;
+
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
+      background: eleVar('layout', 'bg');
+      border-bottom-left-radius: 24px;
+      border-bottom-right-radius: 24px;
+    }
+
+    & > .ele-admin-main > .ele-admin-header {
+      border-top-left-radius: 24px;
+      border-top-right-radius: 24px;
+    }
+
+    & > .ele-admin-header {
+      margin-top: -8px;
+      backdrop-filter: blur(48px);
+      #{eleVarName('header', 'bg')}: elVar('color-primary');
+      #{eleVarName('header', 'dark-bg')}: elVar('color-primary');
+      #{eleVarName('header', 'dark-shadow')}: none;
+      #{eleVarName('header', 'primary-bg')}: $layout-primary-bg;
+      #{eleVarName('header', 'primary-shadow')}: none;
+      #{eleVarName('header', 'ghost-bg')}: elVar('color-primary');
+
+      & > .ele-admin-tabs {
+        #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
+        #{eleVarName('tab', 'simple-line-display')}: none;
+        #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
+      }
+
+      &:not(.is-ghost) > .ele-admin-tabs {
+        #{eleVarName('tab', 'button-hover-color')}: #fff;
+      }
+
+      &.is-dark > .ele-admin-tabs {
+        #{eleVarName('tab', 'simple-active-bg')}: elVar(
+          'color',
+          'primary',
+          'dark-2'
+        );
+        #{eleVarName('tab', 'button-active-bg')}: elVar(
+          'color',
+          'primary',
+          'dark-2'
+        );
+        #{eleVarName('tab', 'button-active-shadow')}: 0 0 0 0.8px
+          rgba(255, 255, 255, 0.6);
+      }
+    }
+
+    & > .ele-admin-header .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebar .ele-menu,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebar .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebox .ele-menu,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox .ele-menu {
+      #{eleVarName('menu', 'arrow-size')}: 13px;
+      #{eleVarName('menu', 'child-bg')}: transparent;
+      #{eleVarName('menu', 'dark-child-bg')}: transparent;
+      #{eleVarName('menu', 'item-radius')}: 12px;
+      #{eleVarName('menu', 'item-hover-bg')}: rgba(255, 255, 255, 0.1);
+      #{eleVarName('menu', 'item-focus-bg')}: rgba(255, 255, 255, 0.1);
+      #{eleVarName('menu', 'item-active-bg')}: #fff;
+      #{eleVarName('menu', 'item-active-color')}: eleVar('menu', 'item-color');
+      #{eleVarName('menu', 'dark-active-bg')}: #fff;
+      #{eleVarName('menu', 'colorful-dot-color')}: rgba(255, 255, 255, 0.6);
+      #{eleVarName('menu', 'colorful-dot-hover-color')}: #fff;
+      #{eleVarName('menu', 'colorful-dot-active-color')}: elVar(
+        'color-primary'
+      );
+      #{eleVarName('menu', 'colorful-dark-dot-color')}: rgba(
+        255,
+        255,
+        255,
+        0.6
+      );
+      #{eleVarName('menu', 'colorful-dark-dot-hover-color')}: #fff;
+      #{eleVarName('menu', 'colorful-dark-dot-active-color')}: elVar(
+        'color-primary'
+      );
+      #{eleVarName('menu', 'horizontal-dark-active-bg')}: #fff;
+
+      .el-menu-item.is-active,
+      .el-sub-menu.is-active > .el-sub-menu__title.el-tooltip__trigger {
+        #{elVarName('menu', 'active-color')}: elVar('color-primary');
+      }
+    }
+
+    & > .ele-admin-side,
+    & > .ele-admin-main > .ele-admin-side {
+      & > .ele-admin-sidebar,
+      & > .ele-admin-sidebox {
+        border: none;
+
+        .el-scrollbar__view > .ele-menu {
+          padding-right: 8px;
+        }
+      }
+
+      & > .ele-admin-sidebox {
+        backdrop-filter: blur(80px);
+
+        & + .ele-admin-sidebar {
+          #{eleVarName('sidebar', 'shadow')}: 0.8px 0 0 rgba(255, 255, 255, 0.2)
+            inset;
+          #{eleVarName('sidebar', 'dark-shadow')}: 0.8px 0 0
+            rgba(255, 255, 255, 0.2) inset;
+
+          .el-scrollbar__view > .ele-menu {
+            padding-left: 8px;
+          }
+        }
+      }
+    }
+
+    & > .ele-admin-main {
+      & > .ele-admin-body > .ele-admin-tabs {
+        #{eleVarName('tab', 'height')}: 38px;
+        #{eleVarName('tab', 'button-padding')}: 4px;
+        #{eleVarName('tab', 'button-space')}: 12px;
+      }
+
+      & > .ele-admin-side + .ele-admin-body > .ele-admin-tabs,
+      & > .ele-admin-body:first-child > .ele-admin-tabs,
+      & > .ele-admin-body > .ele-admin-wrapper:first-child {
+        border-top-left-radius: 24px;
+        border-top-right-radius: 24px;
+      }
+
+      & > .ele-admin-header + .ele-admin-body > .ele-admin-wrapper {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      & > .ele-admin-header.is-primary > .ele-admin-tabs {
+        #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
+      }
+    }
+
+    &.is-mobile > .ele-admin-side > .ele-admin-sidebox,
+    &.is-mobile > .ele-admin-side > .ele-admin-sidebar {
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+      #{eleVarName('sidebar', 'collapse-width')}: 70px;
+      #{eleVarName('sidebox', 'width')}: 96px;
+
+      .el-scrollbar__view > .ele-menu,
+      .el-scrollbar__view > .ele-menu {
+        padding-left: 8px;
+      }
+    }
+
+    &.is-mobile > .ele-admin-side > .ele-admin-sidebox + .ele-admin-sidebar {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  #nprogress {
+    #{elVarName('color-primary')}: #fff;
+  }
+}

package/es/style/themes/modern.scss

@@ -0,0 +1,210 @@
+/** 现代主题(css-var 模式) */
+@use 'sass:map';
+@use 'ele-admin-plus/es/style/util.scss' as *;
+@use 'ele-admin-plus/es/style/themes/theme-util.scss' as *;
+$theme-modern-selector: 'html.ele-theme-modern' !default;
+
+$ele-modern: () !default;
+$ele-modern: map.deep-merge(
+  (
+    'card': (
+      'radius': 12px
+    ),
+    'modal': (
+      'radius': 12px
+    ),
+    'menu-dark-thumb': (
+      'color': rgba(255, 255, 255, 0.6),
+      'hover-color': #fff
+    )
+  ),
+  $ele-modern
+);
+
+@include set-theme-var($theme-modern-selector, $ele-modern);
+
+#{$theme-modern-selector} {
+  .ele-pro-layout {
+    padding: 8px;
+    background: elVar('color-primary');
+    #{eleVarName('layout', 'bg')}: #f4f4fb;
+    #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
+    #{eleVarName('header', 'bg')}: eleVar('layout', 'bg');
+    #{eleVarName('header', 'height')}: 46px;
+    #{eleVarName('header', 'line-color')}: transparent;
+    #{eleVarName('header', 'ghost-bg')}: eleVar('layout', 'bg');
+    #{eleVarName('header', 'shadow')}: none;
+    #{eleVarName('header', 'primary-bg')}: elVar('color-primary', 'dark-2');
+    #{eleVarName('header', 'primary-shadow')}: none;
+    #{eleVarName('header', 'tool-radius')}: calc(
+      (#{eleVar('header', 'height')} - #{eleVar('header', 'tool-height')}) * 1.5
+    );
+    #{eleVarName('header', 'primary-active-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('sidebar', 'shadow')}: none;
+    #{eleVarName('sidebar', 'dark-bg')}: transparent;
+    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'mobile-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'mobile-dark-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'dark-shadow')}: none;
+    #{eleVarName('sidebar', 'collapse-width')}: 62px;
+    #{eleVarName('sidebox', 'width')}: 88px;
+
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
+      background: eleVar('layout', 'bg');
+      border-bottom-left-radius: 24px;
+      border-bottom-right-radius: 24px;
+    }
+
+    & > .ele-admin-main > .ele-admin-header {
+      border-top-left-radius: 24px;
+      border-top-right-radius: 24px;
+    }
+
+    & > .ele-admin-header {
+      margin-top: -8px;
+      backdrop-filter: blur(48px);
+      #{eleVarName('header', 'bg')}: elVar('color-primary');
+      #{eleVarName('header', 'dark-bg')}: elVar('color-primary');
+      #{eleVarName('header', 'dark-shadow')}: none;
+      #{eleVarName('header', 'primary-bg')}: elVar('color-primary');
+      #{eleVarName('header', 'primary-shadow')}: none;
+      #{eleVarName('header', 'ghost-bg')}: elVar('color-primary');
+
+      & > .ele-admin-tabs {
+        #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
+        #{eleVarName('tab', 'simple-line-display')}: none;
+        #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
+      }
+
+      &:not(.is-ghost) > .ele-admin-tabs {
+        #{eleVarName('tab', 'button-hover-color')}: #fff;
+      }
+
+      &.is-dark > .ele-admin-tabs {
+        #{eleVarName('tab', 'simple-active-bg')}: elVar(
+          'color',
+          'primary',
+          'dark-2'
+        );
+        #{eleVarName('tab', 'button-active-bg')}: elVar(
+          'color',
+          'primary',
+          'dark-2'
+        );
+        #{eleVarName('tab', 'button-active-shadow')}: 0 0 0 0.8px
+          rgba(255, 255, 255, 0.6);
+      }
+    }
+
+    & > .ele-admin-header .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebar .ele-menu,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebar .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebox .ele-menu,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox .ele-menu {
+      #{eleVarName('menu', 'arrow-size')}: 13px;
+      #{eleVarName('menu', 'child-bg')}: transparent;
+      #{eleVarName('menu', 'dark-child-bg')}: transparent;
+      #{eleVarName('menu', 'item-radius')}: 12px;
+      #{eleVarName('menu', 'item-hover-bg')}: rgba(255, 255, 255, 0.1);
+      #{eleVarName('menu', 'item-focus-bg')}: rgba(255, 255, 255, 0.1);
+      #{eleVarName('menu', 'item-active-bg')}: #fff;
+      #{eleVarName('menu', 'item-active-color')}: eleVar('menu', 'item-color');
+      #{eleVarName('menu', 'dark-active-bg')}: #fff;
+      #{eleVarName('menu', 'colorful-dot-color')}: rgba(255, 255, 255, 0.6);
+      #{eleVarName('menu', 'colorful-dot-hover-color')}: #fff;
+      #{eleVarName('menu', 'colorful-dot-active-color')}: elVar(
+        'color-primary'
+      );
+      #{eleVarName('menu', 'colorful-dark-dot-color')}: rgba(
+        255,
+        255,
+        255,
+        0.6
+      );
+      #{eleVarName('menu', 'colorful-dark-dot-hover-color')}: #fff;
+      #{eleVarName('menu', 'colorful-dark-dot-active-color')}: elVar(
+        'color-primary'
+      );
+      #{eleVarName('menu', 'horizontal-dark-active-bg')}: #fff;
+
+      .el-menu-item.is-active,
+      .el-sub-menu.is-active > .el-sub-menu__title.el-tooltip__trigger {
+        #{elVarName('menu', 'active-color')}: elVar('color-primary');
+      }
+    }
+
+    & > .ele-admin-side,
+    & > .ele-admin-main > .ele-admin-side {
+      & > .ele-admin-sidebar,
+      & > .ele-admin-sidebox {
+        border: none;
+
+        .el-scrollbar__view > .ele-menu {
+          padding-right: 8px;
+        }
+      }
+
+      & > .ele-admin-sidebox {
+        backdrop-filter: blur(80px);
+
+        & + .ele-admin-sidebar {
+          #{eleVarName('sidebar', 'shadow')}: 0.8px 0 0 rgba(255, 255, 255, 0.2)
+            inset;
+          #{eleVarName('sidebar', 'dark-shadow')}: 0.8px 0 0
+            rgba(255, 255, 255, 0.2) inset;
+
+          .el-scrollbar__view > .ele-menu {
+            padding-left: 8px;
+          }
+        }
+      }
+    }
+
+    & > .ele-admin-main {
+      & > .ele-admin-body > .ele-admin-tabs {
+        #{eleVarName('tab', 'height')}: 38px;
+        #{eleVarName('tab', 'button-padding')}: 4px;
+        #{eleVarName('tab', 'button-space')}: 12px;
+      }
+
+      & > .ele-admin-side + .ele-admin-body > .ele-admin-tabs,
+      & > .ele-admin-body:first-child > .ele-admin-tabs,
+      & > .ele-admin-body > .ele-admin-wrapper:first-child {
+        border-top-left-radius: 24px;
+        border-top-right-radius: 24px;
+      }
+
+      & > .ele-admin-header + .ele-admin-body > .ele-admin-wrapper {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      & > .ele-admin-header.is-primary > .ele-admin-tabs {
+        #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
+      }
+    }
+
+    &.is-mobile > .ele-admin-side > .ele-admin-sidebox,
+    &.is-mobile > .ele-admin-side > .ele-admin-sidebar {
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+      #{eleVarName('sidebar', 'collapse-width')}: 70px;
+      #{eleVarName('sidebox', 'width')}: 96px;
+
+      .el-scrollbar__view > .ele-menu,
+      .el-scrollbar__view > .ele-menu {
+        padding-left: 8px;
+      }
+    }
+
+    &.is-mobile > .ele-admin-side > .ele-admin-sidebox + .ele-admin-sidebar {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  #nprogress {
+    #{elVarName('color-primary')}: #fff;
+  }
+}

package/es/style/themes/rounded-css-var.scss

@@ -1,4 +1,4 @@
-/** 圆角主题 css 变量 */
+/** 圆角主题(css-var 模式) */
 @use './rounded.scss' as *;
 @use './theme-util.scss' as *;
 $rounded-selector: 'html.rounded' !default;

package/es/style/themes/rounded.scss

@@ -35,13 +35,13 @@ $ele-rounded: map.deep-merge(
       'header-font-weight': bold
     ),
     'dropdown': (
-      'padding': 6px 4px,
+      'padding': 4px,
       'item-margin': 2px,
       'item-padding': 0 12px,
       'item-radius': elVar('border-radius', 'small'),
-      'sm-padding': 3px 2px,
+      'sm-padding': 2px,
       'sm-item-padding': 0 10px,
-      'lg-padding': 8px 6px,
+      'lg-padding': 6px,
       'lg-item-padding': 0 14px
     ),
     'file': (
@@ -59,6 +59,7 @@ $ele-rounded: map.deep-merge(
     ),
     'menu': (
       'arrow-margin': 0 -8px 0 6px,
+      'padding': 2px 0,
       'item-padding': 6px,
       'item-radius': elVar('border-radius', 'base'),
       'item-hover-color': elVar('text-color', 'primary'),
@@ -131,7 +132,6 @@ $ele-rounded: map.deep-merge(
       'active-font-weight': bold
     ),
     'tab': (
-      //
       'close-size': 18px,
       'close-radius': elVar('border-radius', 'small'),
       'close-hover-color': elVar('text-color', 'primary'),
@@ -145,7 +145,7 @@ $ele-rounded: map.deep-merge(
       'simple-active-line': 0px,
       'simple-line-display': none,
       'simple-angle-size': 12px,
-      'simple-angle-display': block,
+      'simple-angle-display': flex,
       'simple-tool-hover-bg': transparent,
       'button-radius': $radius-large,
       'button-active-shadow': 0 0 4px 2px rgba(0, 0, 0, 0.04),
@@ -161,7 +161,7 @@ $ele-rounded: map.deep-merge(
       'sm-radius': elVar('border-radius', 'small')
     ),
     'table-filter': (
-      'padding': 6px 4px,
+      'padding': 4px,
       'item-margin': 2px,
       'item-padding': 0 12px,
       'item-radius': elVar('border-radius', 'small')
@@ -177,7 +177,7 @@ $ele-rounded: map.deep-merge(
       'radius': $radius-large
     ),
     'tree-select': (
-      'padding': 6px 4px
+      'padding': 4px
     ),
     'upload-list': (
       'file-tool-hover-color': elVar('text-color', 'primary'),
@@ -191,13 +191,13 @@ $ele-rounded: map.deep-merge(
       'title-border': none
     ),
     'select': (
-      'padding': 6px 4px,
+      'padding': 4px,
       'item-margin': 2px,
       'item-padding': 0 12px,
       'item-radius': elVar('border-radius', 'small')
     ),
     'autocomplete': (
-      'padding': 6px 4px,
+      'padding': 4px,
       'item-margin': 2px,
       'item-padding': 0 12px,
       'item-radius': elVar('border-radius', 'small')
@@ -246,7 +246,7 @@ $ele-rounded: map.deep-merge(
     'datepicker': (
       'cell-radius': elVar('border-radius', 'small'),
       'year-radius': elVar('border-radius', 'base'),
-      'sidebar-padding': 8px 6px,
+      'sidebar-padding': 6px,
       'shortcut-height': 28px,
       'shortcut-padding': 0 8px,
       'shortcut-margin': 4px,