eoss-ui 0.5.81-beta8 → 0.5.82

package/packages/theme-chalk/src/base.scss

@@ -1,6 +1,43 @@
 @import './common/var.scss';
 @import './mixins/mixins.scss';
 @import 'icon.scss';
+a,
+blockquote,
+body,
+button,
+caption,
+dd,
+div,
+dl,
+dt,
+fieldset,
+figure,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+html,
+i,
+input,
+label,
+legend,
+li,
+menu,
+ol,
+p,
+pre,
+span,
+table,
+td,
+textarea,
+th,
+ul {
+  font-family: $--font-family;
+}
 html {
   overflow: hidden;
 }
@@ -60,6 +97,7 @@ $end: -51;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  word-wrap: break-word;
   // .cell, span{
   //   text-overflow: ellipsis;
   //   white-space: nowrap;
@@ -77,6 +115,7 @@ $end: -51;
     -webkit-box-orient: vertical;
     line-clamp: $i;
     -webkit-line-clamp: $i;
+    word-wrap: break-word;
   }
 }
 .es-float-right {

package/packages/theme-chalk/src/button-group.scss

@@ -2,7 +2,8 @@
 .es-button-group {
   display: flex;
   & > .el-dropdown {
-    & > .el-button {
+    margin-left: 10px;
+    & > .el-button:not(.el-button--text) {
       border-color: $--border-color-base;
     }
   }
@@ -11,7 +12,10 @@
 .el-button-group {
   & > .el-button:not(.el-button--text) + .es-button:not(.el-button--text),
   & > .es-button:not(.el-button--text) + .el-button:not(.el-button--text),
-  & > .es-button:not(.el-button--text) + .es-button:not(.el-button--text) {
+  & > .es-button:not(.el-button--text) + .es-button:not(.el-button--text),
+  & > .es-button:not(.el-button--text) + .es-selector,
+  & > .es-button:not(.el-button--text) + .es-upload,
+  & > .es-button:not(.el-button--text) + .el-dropdown {
     margin-left: 0;
   }
   & > .es-selector {
@@ -30,6 +34,7 @@
       }
     }
     &:not(:first-child):not(:last-child) {
+      margin-left: 10px;
       & > .el-button {
         border-radius: 0;
         &.el-button--danger,
@@ -60,6 +65,10 @@
         margin-right: -1px;
       }
     }
+    & + .el-button--text,
+    & + .el-dropdown {
+      margin-left: 10px;
+    }
   }
   & > .es-upload {
     float: left;
@@ -79,6 +88,7 @@
       }
     }
     &:not(:first-child):not(:last-child) {
+      margin-left: 10px;
       & > .el-upload--handle > .el-upload {
         & > .el-button {
           border-radius: 0;
@@ -115,6 +125,10 @@
         }
       }
     }
+    & + .el-button--text,
+    & + .el-dropdown {
+      margin-left: 10px;
+    }
   }
 }
 .es-dropdown-padding {

package/packages/theme-chalk/src/common/var.scss

@@ -262,6 +262,10 @@ $--type--index: (
   info: 6
 );
 
+/* font
+-------------------------- */
+$--font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+  'Microsoft YaHei' !default;
 // 文字默认颜色
 $--font-color-title: rgba(0, 0, 0, 0.85) !default;
 $--font-color-primary: rgba(0, 0, 0, 0.75) !default;
@@ -566,10 +570,11 @@ $--select-option-disabled-color: $--color-text-placeholder !default;
 $--select-option-disabled-background: $--color-white !default;
 /// height||Other|4
 $--select-option-height: 34px !default;
+$--select-option-hover-color: $--color-text-regular !default;
 $--select-option-hover-background: $--background-color-base !default;
 /// color||Color|0
-$--select-option-selected-font-color: $--color-primary !default;
-$--select-option-selected-hover: $--background-color-base !default;
+$--select-option-selected-color: $--color-primary !default;
+$--select-option-selected-background: $--background-color-base !default;
 
 $--select-group-color: $--color-info !default;
 $--select-group-height: 30px !default;

package/packages/theme-chalk/src/data-table.scss

@@ -1,8 +1,23 @@
 @import './common/var.scss';
 .es-data-table {
   position: relative;
-  .es-toolbar + .es-data-table-content {
-    padding: 16px;
+  .es-toolbar {
+    &.es-table-toolbar-plus {
+      padding: 16px 16px 8px 16px;
+      border-color: transparent;
+      .es-advanced-filter.es-absolute {
+        top: 55px;
+        .es-form {
+          border: 0;
+        }
+      }
+    }
+    & + .es-data-table-content {
+      padding: 16px;
+      &.es-table-plus {
+        padding-top: 0;
+      }
+    }
   }
 }
 .es-data-table-content {
@@ -61,7 +76,7 @@
         display: flex;
       }
       &.el-tooltip {
-        line-height: 28px;
+        line-height: 22px;
       }
     }
     .el-form-item {
@@ -127,7 +142,7 @@
   .es-table-page {
     height: 46px;
     border: $--table-border;
-    padding: 8px 12px;
+    padding: 8px 24px;
     background-color: $--table-page-background-color;
     &.es-loading-page {
       line-height: 30px;
@@ -150,15 +165,6 @@
         }
       }
     }
-    // .el-table__fixed-right {
-    //   &:not(.el-table-box-shadow) {
-    //     thead {
-    //       th:last-child {
-    //         border-left: $--table-border;
-    //       }
-    //     }
-    //   }
-    // }
     .is-scrolling-right ~ .el-table__fixed-right {
       &:not(.el-table-box-shadow) {
         thead {
@@ -186,16 +192,6 @@
     .el-table__body-wrapper {
       .el-table__body {
         position: relative;
-        // &::after {
-        //   content: '';
-        //   display: block;
-        //   height: 1px;
-        //   background-color: $--table-border-color;
-        //   position: absolute;
-        //   left: 0;
-        //   right: 0;
-        //   bottom: -1px;
-        // }
       }
     }
   }
@@ -207,6 +203,47 @@
       }
     }
   }
+  &.es-table-plus {
+    background-color: #fff;
+    padding-top: 0;
+    .el-table__header {
+      thead {
+        color: #6e7c98;
+      }
+      th {
+        background-color: #fff;
+        border-color: #cdd9e4;
+        &:not(.gutter) {
+          border-right-color: transparent;
+        }
+      }
+    }
+    .es-table {
+      border-color: transparent;
+      &::before {
+        background-color: #cdd9e4;
+      }
+      td {
+        border-color: #cdd9e4;
+      }
+      .cell {
+        min-height: 35px;
+      }
+    }
+    .es-table-page {
+      height: 48px;
+      border-top-color: #cdd9e4;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      padding: 10px 24px;
+      background-color: #fff;
+      .el-pagination__total,
+      .el-select__caret {
+        color: #6e7c98;
+      }
+    }
+  }
 }
 .el-table--border::after,
 .el-table--group::after,

package/packages/theme-chalk/src/form.scss

@@ -1,4 +1,44 @@
 @import './common/var.scss';
+.es-input__inner {
+  display: block;
+  flex: 1;
+  height: 40px;
+  line-height: 38px;
+  padding: 0 10px;
+  border: $--input-border;
+  border-radius: $--input-border-radius;
+  color: $--input-font-color;
+  &.es-disabled-tips {
+    color: rgba(0, 0, 0, 0.25);
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-color: rgba(0, 0, 0, 0.12);
+  }
+}
+div.es-input__inner {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.es-textarea__inner {
+  min-height: 40px;
+  padding: 5px 15px;
+  line-height: 1.5;
+  color: $--input-font-color;
+  border: $--input-border;
+  border-radius: $--input-border-radius;
+  word-wrap: break-word;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+}
+.es-input {
+  display: block;
+  line-height: 40px;
+}
+.es-textarea {
+  min-height: 40px;
+}
 .es-form {
   background-color: #ffffff;
   .es-form-content {
@@ -72,46 +112,6 @@
       border: 0;
     }
   }
-  .es-input__inner {
-    display: block;
-    flex: 1;
-    height: 40px;
-    line-height: 38px;
-    padding: 0 10px;
-    border: $--input-border;
-    border-radius: $--input-border-radius;
-    color: $--input-font-color;
-    &.es-disabled-tips {
-      color: rgba(0, 0, 0, 0.25);
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.04);
-      border-color: rgba(0, 0, 0, 0.12);
-    }
-  }
-  div.es-input__inner {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .es-textarea__inner {
-    min-height: 40px;
-    padding: 5px 15px;
-    line-height: 1.5;
-    color: $--input-font-color;
-    border: $--input-border;
-    border-radius: $--input-border-radius;
-    word-wrap: break-word;
-    word-break: break-all;
-    display: flex;
-    align-items: center;
-  }
-  .es-input {
-    display: block;
-    line-height: 40px;
-  }
-  .es-textarea {
-    min-height: 40px;
-  }
   .el-form-item__content {
     line-height: normal;
     .el-upload {
@@ -164,6 +164,8 @@
     .es-collapse-item {
       border-top: 0;
       .el-collapse-item__header {
+        height: 45px;
+        line-height: 45px;
         padding-left: 14px;
         font-size: 16px;
         font-weight: bold;

package/packages/theme-chalk/src/main.scss

@@ -146,6 +146,17 @@
       flex: 1;
       position: relative;
       overflow: hidden;
+      &.es-body-wrapper {
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
     }
 
     .es-body-main {

package/packages/theme-chalk/src/pagination.scss

@@ -1,4 +1,5 @@
 .es-pagination {
+  text-align: center;
   .el-select {
     .el-input {
       width: 56px;
@@ -19,4 +20,10 @@
   .el-input__suffix {
     line-height: 26px;
   }
+  &.es-pagination-complete {
+    text-align: right;
+    .el-pagination__total {
+      float: left;
+    }
+  }
 }

package/packages/theme-chalk/src/simplicity.scss

@@ -1,5 +1,21 @@
 @import './common/var.scss';
 @import './base.scss';
+@keyframes open-submenu {
+  0% {
+    padding-left: 0;
+  }
+  100% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+}
+@keyframes close-submenu {
+  0% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+  100% {
+    padding-left: 48px;
+  }
+}
 .es-simplicity-side {
   width: $--main-simplicity-side-width;
   height: 100%;
@@ -13,6 +29,7 @@
   }
   .es-simplicity-logo {
     width: $--main-simplicity-side-width - 24px;
+    margin: 0 auto;
   }
   .es-simplicity-org-name {
     font-weight: 500;
@@ -32,6 +49,7 @@
     overflow: hidden;
     margin: 0 auto;
     cursor: pointer;
+    position: relative;
   }
   .es-simplicity-side-Application {
     flex: 1;
@@ -70,7 +88,8 @@
     .es-icon_image {
       opacity: 0.3;
     }
-    &.is-active {
+    &.is-active,
+    &:hover {
       color: #fff;
       .el-badge {
         padding: 8px 0;
@@ -81,6 +100,19 @@
         opacity: 1;
       }
     }
+    .el-icon-circle-close {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 2px;
+      display: none;
+    }
+    &:hover {
+      .el-icon-circle-close {
+        display: block;
+        z-index: 999;
+      }
+    }
   }
   .el-badge {
     width: 100%;
@@ -100,6 +132,7 @@
   width: 100%;
   border-radius: 50%;
   vertical-align: top;
+  background: transparent;
 }
 .es-simplicity-main {
   height: 100%;
@@ -109,7 +142,6 @@
   .es-simplicity-apps,
   .es-simplicity-message,
   .es-simplicity-message-modal,
-  .es-simplicity-subMenus,
   .es-simplicity-apps-modal,
   .es-simplicity-public-drawer {
     position: absolute;
@@ -137,8 +169,10 @@
   }
   .es-simplicity-subMenus {
     width: auto;
+    height: 100%;
     overflow: visible;
     right: auto;
+    position: absolute;
     .el-drawer {
       box-shadow: none;
       overflow: visible;
@@ -413,9 +447,6 @@
     width: 220px;
     height: 100%;
     position: relative;
-    & + .es-simplicity-menus-box {
-      border-left: 1px solid #dfebf6;
-    }
     .es-simplicity-menus-title {
       font-weight: bold;
       line-height: 30px;
@@ -435,36 +466,69 @@
         cursor: pointer;
       }
     }
-    .el-scrollbar {
+    .es-simplicity-menus-scrollbar {
       position: absolute;
       top: 45px;
       right: 0;
       bottom: 0;
       left: 0;
-      .el-scrollbar__view {
-        padding: 8px 12px;
+    }
+  }
+  .es-simplicity-menus-view {
+    border-left: 1px solid #dfebf6;
+    display: flex;
+    .es-simplicity-menus-box + .es-simplicity-menus-box {
+      border-left: 1px solid #dfebf6;
+    }
+  }
+  &.es-simplicity-menus-plus {
+    .es-simplicity-menus-box {
+      .es-simplicity-menus-title {
+        padding: 13px 7px 13px 14px;
       }
-      &.is-fold {
-        .el-scrollbar__view {
-          padding: 4px;
-        }
+      .es-simplicity-menus-scrollbar {
+        top: 57px;
       }
     }
   }
 }
+.es-simplicity-menus-lists {
+  padding: 8px 0;
+  &.is-fold {
+    padding: 4px 0;
+  }
+}
 .es-simplicity-menus-item {
   height: 48px;
   display: flex;
   align-items: center;
-  padding: 8px 12px;
+  padding: 8px 24px;
   position: relative;
   cursor: pointer;
   overflow: hidden;
-  border-radius: 6px;
   color: #15224c;
   &.is-fold {
     height: 40px;
-    padding: 4px 8px;
+    padding: 4px 12px;
+    .es-simplicity_apps-icon {
+      margin-right: 0;
+    }
+    .es-simplicity-menus-tips {
+      top: 0;
+      right: 0;
+      color: #ff0000;
+      font-size: 12px;
+    }
+    &:hover {
+      &::before {
+        inset: 0 4px;
+      }
+    }
+    &.is-active {
+      &::before {
+        inset: 0 4px;
+      }
+    }
   }
   .es-simplicity_apps-icon {
     height: 24px;
@@ -472,6 +536,7 @@
     border-radius: 3px;
     margin-right: 12px;
     color: $--color-primary;
+    z-index: 1;
   }
   .es-simplicity-menus-tips {
     font-size: 14px;
@@ -490,26 +555,31 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-  }
-  &.is-fold {
-    .es-simplicity_apps-icon {
-      margin-right: 0;
-    }
-    .es-simplicity-menus-tips {
-      top: 0;
-      right: 0;
-      color: #ff0000;
-      font-size: 12px;
-    }
+    position: relative;
   }
   &:hover {
     color: $--color-primary;
-    background-color: $--color-primary-light-2;
-    color: $--color-primary;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0 12px;
+      background-color: $--color-primary-light-2;
+      border-radius: 6px;
+      z-index: 0;
+    }
   }
   &.is-active {
-    background-color: $--color-primary-light-1;
     color: $--color-primary;
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0 12px;
+      background-color: $--color-primary-light-2;
+      border-radius: 6px;
+      z-index: 0;
+    }
   }
 }
 .es-simplicity-iframe {
@@ -562,11 +632,11 @@
   }
   &.is-open {
     & > .el-tabs__content {
-      padding-left: $--main-simplicity-menu-width;
+      animation: open-submenu 0.3s 1ms forwards;
     }
     &.is-fold {
       & > .el-tabs__content {
-        padding-left: 48px;
+        animation: close-submenu 0.1s 0ms forwards;
       }
     }
   }
@@ -675,17 +745,10 @@
   color: #6e7c98;
   z-index: 9999;
 }
-.es-simplicity-menus-sub {
-  max-height: calc(100% - 10px);
-  .es-simplicity-menus-item {
-    .es-simplicity_apps-icon {
-      line-height: 16px;
-    }
-  }
-}
 .es-simplicity-message {
   .el-drawer__body {
     @extend .es-flex-vertical;
+    padding: 20px;
   }
   .es-simplicity-message-header {
     padding-bottom: 20px;
@@ -761,7 +824,7 @@
   width: 420px;
   padding: 80px 24px 54px 24px;
   position: absolute;
-  left: 4px;
+  right: 4px;
   bottom: 4px;
   z-index: 9999;
   background-color: #f5fbff;
@@ -805,3 +868,8 @@
     bottom: 0;
   }
 }
+.el-popover.es-simplicity-menus-hide {
+  display: none !important;
+  opacity: 0;
+  z-index: -999;
+}