ele-admin-plus 1.1.4-beta.2 → 1.1.4-beta.3

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

@@ -125,7 +125,7 @@
   // 主题
   &.is-dark {
     background: elVar('color-primary');
-    border: none;
+    border-color: elVar('color-primary');
 
     & > .ele-alert-icon {
       color: eleVar('alert-dark', 'title-color');
@@ -151,14 +151,17 @@
 
     &.is-success {
       background: elVar('color-success');
+      border-color: elVar('color-success');
     }
 
     &.is-warning {
       background: elVar('color-warning');
+      border-color: elVar('color-warning');
     }
 
     &.is-error {
       background: elVar('color-error');
+      border-color: elVar('color-error');
     }
   }
 }

package/es/ele-app/style/css-var.scss

@@ -53,6 +53,11 @@
     @include set-ele-var('message-box', $var);
   }
 
+  // Notification
+  .el-notification {
+    @include set-ele-var('notification', $var);
+  }
+
   // Radio
   .el-radio {
     @include set-ele-var('radio', $var);
@@ -85,3 +90,50 @@
     @include set-ele-var('timepicker', $var);
   }
 }
+
+// 美化滚动条样式
+@mixin scrollbar-style() {
+  ::-webkit-scrollbar {
+    width: eleVar('scrollbar', 'size');
+    height: eleVar('scrollbar', 'size');
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: eleVar('scrollbar', 'padding') solid transparent;
+    border-radius: eleVar('scrollbar', 'radius');
+    background-color: eleVar('scrollbar', 'color');
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: eleVar('scrollbar', 'hover-color');
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    background: eleVar('scrollbar', 'bg');
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  // 火狐浏览器
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
+  }
+}
+
+@mixin set-scrollbar-style($selector) {
+  @if $selector == '' {
+    @include scrollbar-style();
+  } @else if $selector == 'pc' {
+    @media (hover: hover) and (pointer: fine) {
+      @include scrollbar-style();
+    }
+  } @else if $selector != 'never' {
+    #{$selector} {
+      @include scrollbar-style();
+    }
+  }
+}

package/es/ele-app/style/overwrite.scss

@@ -392,6 +392,66 @@ body .el-overlay.is-message-box > .el-overlay-message-box {
   }
 }
 
+/* Notification */
+body .el-notification {
+  width: eleVar('notification', 'width');
+  max-width: calc(100vw - 48px);
+  padding: eleVar('notification', 'padding');
+  border: eleVar('notification', 'border');
+  border-radius: eleVar('notification', 'radius');
+  box-shadow: eleVar('notification', 'shadow');
+
+  .el-notification__icon {
+    width: eleVar('notification', 'icon-size');
+    height: eleVar('notification', 'icon-size');
+    font-size: eleVar('notification', 'icon-size');
+    margin: eleVar('notification', 'icon-margin');
+  }
+}
+
+.el-notification .el-notification__icon.el-notification--info {
+  color: elVar('color-primary');
+}
+
+.el-notification .el-notification__group {
+  margin: 0;
+
+  .el-notification__closeBtn {
+    top: 0;
+    right: 0;
+    width: eleVar('notification', 'close-size');
+    height: eleVar('notification', 'close-size');
+    line-height: eleVar('notification', 'close-size');
+    color: eleVar('notification', 'close-color');
+    font-size: eleVar('notification', 'close-font-size');
+    margin: eleVar('notification', 'close-margin');
+    border-radius: eleVar('notification', 'close-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+
+    &:hover {
+      color: eleVar('notification', 'close-hover-color');
+      background: eleVar('notification', 'close-hover-bg');
+    }
+  }
+
+  .el-notification__title {
+    color: eleVar('notification', 'title-color');
+    font-size: eleVar('notification', 'title-size');
+    font-weight: eleVar('notification', 'title-font-weight');
+    line-height: eleVar('notification', 'title-line-height');
+    padding: eleVar('notification', 'title-padding');
+    box-sizing: border-box;
+  }
+
+  .el-notification__content {
+    color: eleVar('notification', 'color');
+    font-size: eleVar('notification', 'size');
+    margin-top: eleVar('notification', 'body-margin');
+    line-height: inherit;
+    text-align: left;
+  }
+}
+
 /* Radio */
 body .el-radio {
   .el-radio__label {

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

@@ -6,32 +6,4 @@
   @include set-scrollbar-var($ele);
 }
 
-::-webkit-scrollbar {
-  width: eleVar('scrollbar', 'size');
-  height: eleVar('scrollbar', 'size');
-}
-
-::-webkit-scrollbar-thumb {
-  border: eleVar('scrollbar', 'padding') solid transparent;
-  border-radius: eleVar('scrollbar', 'radius');
-  background-color: eleVar('scrollbar', 'color');
-  background-clip: padding-box;
-
-  &:hover {
-    background-color: eleVar('scrollbar', 'hover-color');
-  }
-}
-
-::-webkit-scrollbar-track {
-  background: eleVar('scrollbar', 'bg');
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-// 火狐浏览器
-* {
-  scrollbar-width: thin;
-  scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
-}
+@include set-scrollbar-style($scrollbar-selector);

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

@@ -40,19 +40,22 @@
 }
 
 /* 打印状态 */
+html.ele-printing,
 html.ele-printing > body {
-  color: #000;
-  background: #fff;
+  color: #000 !important;
+  background: #fff !important;
+  height: auto !important;
+  overflow: visible !important;
+}
 
-  & > * {
-    display: none !important;
-  }
+html.ele-printing > body > * {
+  display: none !important;
+}
 
-  #ele-printer-container {
-    display: block !important;
+html.ele-printing #ele-printer-container {
+  display: block !important;
 
-    * {
-      pointer-events: none !important;
-    }
+  * {
+    pointer-events: none !important;
   }
 }

package/es/ele-pro-layout/index.js

@@ -107,7 +107,7 @@ const _sfc_main = defineComponent({
       if (props.fixedBody) {
         return ".ele-admin-layout.ele-admin-fixed-body>.ele-admin-main>.ele-admin-body>.ele-admin-content";
       }
-      return void 0;
+      return "body";
     });
     const sidebarCollapse = computed(() => {
       return mobile.value || mixSidebar.value ? false : props.collapse;

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

@@ -8,12 +8,12 @@
     position: fixed !important;
     left: 0 !important;
     width: eleVar('sidebar', 'width') !important;
-    height: calc(100vh - #{eleVar('header', 'height')}) !important;
     z-index: calc(eleVar('layout', 'mask-index') + 1) !important;
   }
 
   .ele-admin-sidebar {
     top: eleVar('header', 'height') !important;
+    height: calc(100vh - #{eleVar('header', 'height')}) !important;
   }
 
   .ele-admin-logo > img + h1 {

package/es/style/themes/default.scss

@@ -5,6 +5,9 @@
 // 过渡动画
 $ele-transition: 0.2s !default;
 
+// 美化滚动条样式选择器
+$scrollbar-selector: '' !default;
+
 // 样式变量
 $ele: () !default;
 $ele: map.deep-merge(
@@ -838,6 +841,31 @@ $ele: map.deep-merge(
       'footer-border': none,
       'mobile-space': 16px
     ),
+    'notification': (
+      // 通知
+      'width': 360px,
+      'border': none,
+      'padding': 20px,
+      'radius': elVar('border-radius', 'base'),
+      'shadow': elVar('box-shadow', 'light'),
+      'color': elVar('text-color', 'regular'),
+      'size': elVar('font-size', 'base'),
+      'icon-size': 26px,
+      'icon-margin': -2px 12px 0 0,
+      'title-color': elVar('text-color', 'primary'),
+      'title-size': elVar('font-size', 'medium'),
+      'title-font-weight': normal,
+      'title-line-height': 22px,
+      'title-padding': 0 22px 0 0,
+      'body-margin': 8px,
+      'close-size': 22px,
+      'close-margin': 20px 24px 0 0,
+      'close-radius': elVar('border-radius', 'small'),
+      'close-font-size': 18px,
+      'close-color': elVar('text-color', 'secondary'),
+      'close-hover-color': elVar('text-color', 'primary'),
+      'close-hover-bg': transparent
+    ),
     'radio': (
       // 单选框
       'color': elVar('text-color', 'regular'),

package/es/style/themes/rounded.scss

@@ -216,6 +216,10 @@ $ele-rounded: map.deep-merge(
       'header-font-weight': bold,
       'icon-hover-bg': elVar('fill-color', 'light')
     ),
+    'notification': (
+      'radius': $radius-large,
+      'close-hover-bg': elVar('fill-color', 'light')
+    ),
     'descriptions': (
       'radius': $radius-large
     ),

package/lib/ele-alert/style/index.scss

@@ -125,7 +125,7 @@
   // 主题
   &.is-dark {
     background: elVar('color-primary');
-    border: none;
+    border-color: elVar('color-primary');
 
     & > .ele-alert-icon {
       color: eleVar('alert-dark', 'title-color');
@@ -151,14 +151,17 @@
 
     &.is-success {
       background: elVar('color-success');
+      border-color: elVar('color-success');
     }
 
     &.is-warning {
       background: elVar('color-warning');
+      border-color: elVar('color-warning');
     }
 
     &.is-error {
       background: elVar('color-error');
+      border-color: elVar('color-error');
     }
   }
 }

package/lib/ele-app/style/css-var.scss

@@ -53,6 +53,11 @@
     @include set-ele-var('message-box', $var);
   }
 
+  // Notification
+  .el-notification {
+    @include set-ele-var('notification', $var);
+  }
+
   // Radio
   .el-radio {
     @include set-ele-var('radio', $var);
@@ -85,3 +90,50 @@
     @include set-ele-var('timepicker', $var);
   }
 }
+
+// 美化滚动条样式
+@mixin scrollbar-style() {
+  ::-webkit-scrollbar {
+    width: eleVar('scrollbar', 'size');
+    height: eleVar('scrollbar', 'size');
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: eleVar('scrollbar', 'padding') solid transparent;
+    border-radius: eleVar('scrollbar', 'radius');
+    background-color: eleVar('scrollbar', 'color');
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: eleVar('scrollbar', 'hover-color');
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    background: eleVar('scrollbar', 'bg');
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  // 火狐浏览器
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
+  }
+}
+
+@mixin set-scrollbar-style($selector) {
+  @if $selector == '' {
+    @include scrollbar-style();
+  } @else if $selector == 'pc' {
+    @media (hover: hover) and (pointer: fine) {
+      @include scrollbar-style();
+    }
+  } @else if $selector != 'never' {
+    #{$selector} {
+      @include scrollbar-style();
+    }
+  }
+}

package/lib/ele-app/style/overwrite.scss

@@ -392,6 +392,66 @@ body .el-overlay.is-message-box > .el-overlay-message-box {
   }
 }
 
+/* Notification */
+body .el-notification {
+  width: eleVar('notification', 'width');
+  max-width: calc(100vw - 48px);
+  padding: eleVar('notification', 'padding');
+  border: eleVar('notification', 'border');
+  border-radius: eleVar('notification', 'radius');
+  box-shadow: eleVar('notification', 'shadow');
+
+  .el-notification__icon {
+    width: eleVar('notification', 'icon-size');
+    height: eleVar('notification', 'icon-size');
+    font-size: eleVar('notification', 'icon-size');
+    margin: eleVar('notification', 'icon-margin');
+  }
+}
+
+.el-notification .el-notification__icon.el-notification--info {
+  color: elVar('color-primary');
+}
+
+.el-notification .el-notification__group {
+  margin: 0;
+
+  .el-notification__closeBtn {
+    top: 0;
+    right: 0;
+    width: eleVar('notification', 'close-size');
+    height: eleVar('notification', 'close-size');
+    line-height: eleVar('notification', 'close-size');
+    color: eleVar('notification', 'close-color');
+    font-size: eleVar('notification', 'close-font-size');
+    margin: eleVar('notification', 'close-margin');
+    border-radius: eleVar('notification', 'close-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+
+    &:hover {
+      color: eleVar('notification', 'close-hover-color');
+      background: eleVar('notification', 'close-hover-bg');
+    }
+  }
+
+  .el-notification__title {
+    color: eleVar('notification', 'title-color');
+    font-size: eleVar('notification', 'title-size');
+    font-weight: eleVar('notification', 'title-font-weight');
+    line-height: eleVar('notification', 'title-line-height');
+    padding: eleVar('notification', 'title-padding');
+    box-sizing: border-box;
+  }
+
+  .el-notification__content {
+    color: eleVar('notification', 'color');
+    font-size: eleVar('notification', 'size');
+    margin-top: eleVar('notification', 'body-margin');
+    line-height: inherit;
+    text-align: left;
+  }
+}
+
 /* Radio */
 body .el-radio {
   .el-radio__label {

package/lib/ele-app/style/scrollbar.scss

@@ -6,32 +6,4 @@
   @include set-scrollbar-var($ele);
 }
 
-::-webkit-scrollbar {
-  width: eleVar('scrollbar', 'size');
-  height: eleVar('scrollbar', 'size');
-}
-
-::-webkit-scrollbar-thumb {
-  border: eleVar('scrollbar', 'padding') solid transparent;
-  border-radius: eleVar('scrollbar', 'radius');
-  background-color: eleVar('scrollbar', 'color');
-  background-clip: padding-box;
-
-  &:hover {
-    background-color: eleVar('scrollbar', 'hover-color');
-  }
-}
-
-::-webkit-scrollbar-track {
-  background: eleVar('scrollbar', 'bg');
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-// 火狐浏览器
-* {
-  scrollbar-width: thin;
-  scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
-}
+@include set-scrollbar-style($scrollbar-selector);

package/lib/ele-printer/style/index.scss

@@ -40,19 +40,22 @@
 }
 
 /* 打印状态 */
+html.ele-printing,
 html.ele-printing > body {
-  color: #000;
-  background: #fff;
+  color: #000 !important;
+  background: #fff !important;
+  height: auto !important;
+  overflow: visible !important;
+}
 
-  & > * {
-    display: none !important;
-  }
+html.ele-printing > body > * {
+  display: none !important;
+}
 
-  #ele-printer-container {
-    display: block !important;
+html.ele-printing #ele-printer-container {
+  display: block !important;
 
-    * {
-      pointer-events: none !important;
-    }
+  * {
+    pointer-events: none !important;
   }
 }

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

@@ -108,7 +108,7 @@ const _sfc_main = vue.defineComponent({
       if (props2.fixedBody) {
         return ".ele-admin-layout.ele-admin-fixed-body>.ele-admin-main>.ele-admin-body>.ele-admin-content";
       }
-      return void 0;
+      return "body";
     });
     const sidebarCollapse = vue.computed(() => {
       return mobile.value || mixSidebar.value ? false : props2.collapse;

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

@@ -8,12 +8,12 @@
     position: fixed !important;
     left: 0 !important;
     width: eleVar('sidebar', 'width') !important;
-    height: calc(100vh - #{eleVar('header', 'height')}) !important;
     z-index: calc(eleVar('layout', 'mask-index') + 1) !important;
   }
 
   .ele-admin-sidebar {
     top: eleVar('header', 'height') !important;
+    height: calc(100vh - #{eleVar('header', 'height')}) !important;
   }
 
   .ele-admin-logo > img + h1 {

package/lib/style/themes/default.scss

@@ -5,6 +5,9 @@
 // 过渡动画
 $ele-transition: 0.2s !default;
 
+// 美化滚动条样式选择器
+$scrollbar-selector: '' !default;
+
 // 样式变量
 $ele: () !default;
 $ele: map.deep-merge(
@@ -838,6 +841,31 @@ $ele: map.deep-merge(
       'footer-border': none,
       'mobile-space': 16px
     ),
+    'notification': (
+      // 通知
+      'width': 360px,
+      'border': none,
+      'padding': 20px,
+      'radius': elVar('border-radius', 'base'),
+      'shadow': elVar('box-shadow', 'light'),
+      'color': elVar('text-color', 'regular'),
+      'size': elVar('font-size', 'base'),
+      'icon-size': 26px,
+      'icon-margin': -2px 12px 0 0,
+      'title-color': elVar('text-color', 'primary'),
+      'title-size': elVar('font-size', 'medium'),
+      'title-font-weight': normal,
+      'title-line-height': 22px,
+      'title-padding': 0 22px 0 0,
+      'body-margin': 8px,
+      'close-size': 22px,
+      'close-margin': 20px 24px 0 0,
+      'close-radius': elVar('border-radius', 'small'),
+      'close-font-size': 18px,
+      'close-color': elVar('text-color', 'secondary'),
+      'close-hover-color': elVar('text-color', 'primary'),
+      'close-hover-bg': transparent
+    ),
     'radio': (
       // 单选框
       'color': elVar('text-color', 'regular'),

package/lib/style/themes/rounded.scss

@@ -216,6 +216,10 @@ $ele-rounded: map.deep-merge(
       'header-font-weight': bold,
       'icon-hover-bg': elVar('fill-color', 'light')
     ),
+    'notification': (
+      'radius': $radius-large,
+      'close-hover-bg': elVar('fill-color', 'light')
+    ),
     'descriptions': (
       'radius': $radius-large
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ele-admin-plus",
-  "version": "1.1.4-beta.2",
+  "version": "1.1.4-beta.3",
   "description": "EleAdminPlus Library",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -42,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/compiler-sfc": "^3.3.4",
     "axios": "^1.5.0",
     "bytemd": "^1.21.0",