n20-common-lib 3.0.36 → 3.0.38

package/src/assets/css/filter.scss

@@ -82,7 +82,7 @@
     color: var(--color-primary);
   }
 
-  /deep/.el-form-item__content {
+  ::v-deep .el-form-item__content {
     margin-left: 0;
   }
 }

package/src/assets/css/layout-aside.scss

@@ -1,7 +1,6 @@
 $--hover-bg-color: #303d59;
 
 .layout-aside {
-
   .el-menu-item,
   .el-submenu__title {
     height: $--aside-height;
@@ -52,11 +51,6 @@ $--hover-bg-color: #303d59;
   }
 }
 
-// .layout-aside > .el-menu-item,
-// .layout-aside > .el-submenu > .el-submenu__title {
-//   padding-left: 16px !important;
-// }
-
 .open-collapsed-btn {
   box-sizing: border-box;
   position: sticky;
@@ -138,7 +132,7 @@ $--hover-bg-color: #303d59;
   border-top-right-radius: 4px;
 }
 
-.el-menu--collapse>.el-menu-item [class^='el-icon-'],
-.el-menu--collapse>.el-submenu>.el-submenu__title [class^='el-icon-'] {
+.el-menu--collapse > .el-menu-item [class^='el-icon-'],
+.el-menu--collapse > .el-submenu > .el-submenu__title [class^='el-icon-'] {
   width: 18px;
-}
+}

package/src/assets/css/layout-content.scss

@@ -16,5 +16,6 @@
     padding: 8px;
     height: var(--client-height);
     overflow: auto;
+    
   }
 }

package/src/assets/css/layout.scss

@@ -1,5 +1,5 @@
 // layout
-$--aside-width: 190px;
+$--aside-width: 200px;
 $--aside-height: 40px;
 $--aside-collapse-width: 50px;
 $--header-height: 48px;
@@ -106,8 +106,8 @@ body {
 
 @import './layout-content.scss';
 
-.workplace-card>[data-version],
-.workplace-card>[data-version]>div,
-.workplace-card>[data-version]>div>div {
+.workplace-card > [data-version],
+.workplace-card > [data-version] > div,
+.workplace-card > [data-version] > div > div {
   height: 100%;
-}
+}

package/src/{components/PageHeader/style.scss → assets/css/page-header.scss}

@@ -1,8 +1,14 @@
 .n20-page-header {
   display: flex;
+  justify-content: space-between;
   line-height: 20px;
-  padding-bottom: 2px;
+  padding: 12px 16px;
+
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  &__wappr {
+    display: flex;
+    flex-wrap: wrap;
+  }
 
   .page-header__left {
     display: flex;
@@ -32,14 +38,23 @@
   }
 
   .page-header__title {
+    color: var(--text-2, #4e5969);
+    /* 14/CN-Regular */
+    font-family: 'PingFang SC';
     font-size: 14px;
-    line-height: 20px;
-    color: #3d4a57;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; /* 157.143% */
   }
 
   .page-header__content {
-    font-size: 14px;
-    line-height: 20px;
-    color: #3d4a57;
+    color: var(--text-1, #1d2129);
+
+    /* 16/CN-Medium */
+    font-family: 'PingFang SC';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px; /* 150% */
   }
-}
+}

package/src/assets/css/page.scss

@@ -0,0 +1,12 @@
+.n20-page-content.is_padding {
+  padding: 16px 16px 0 16px;
+}
+
+.n20-page-content__footer {
+  padding: 8px 16px;
+  border-top: 1px solid var(--border-2, #e5e6eb);
+}
+
+.n20-page-content__footer.n20-page-content__footer--max__padding {
+  padding: 16px;
+}

package/src/assets/css/pagination.scss

@@ -1,8 +1,8 @@
 .n20-pagination-1 {
   display: inline-block;
-  padding-right: 5px;
+  // padding-right: 5px;
 
-  >* {
+  > * {
     vertical-align: middle;
   }
 
@@ -14,7 +14,7 @@
   .btn-next {
     padding-left: 6px;
     padding-right: 6px;
-    border: 1px solid $--border-color-base;
+    // border: 1px solid $--border-color-base;
 
     &:not([disabled]):hover {
       border-color: $--color-primary;
@@ -25,27 +25,87 @@
     margin-left: 6px;
   }
 
+  .el-pagination span:not([class*='suffix']) {
+    color: $--color-text-primary;
+    font-size: 14px;
+    min-width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; /* 157.143% */
+    vertical-align: middle;
+  }
+
+  .el-pagination .el-select .el-input {
+    margin: 0;
+  }
   .el-pagination {
-    padding: 1px 5px;
+    padding: 0;
+    button {
+      min-width: 32px;
+      height: 32px;
+    }
+    .el-pager {
+      padding: 4px 0;
+    }
+    .el-pager .more::before {
+      line-height: 24px;
+    }
+    .el-pager li {
+      min-width: 24px;
+      height: 24px;
+      font-family: 'Open Sans';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 22px; /* 157.143% */
+    }
+    .el-pagination__sizes {
+      height: 32px !important;
+      margin: 0;
+      .el-input--mini .el-input__inner {
+        height: 32px;
+        line-height: 32px;
+        border-radius: 4px;
+        border: 1px solid var(--border-2, #e5e6eb);
+        background: var(--bg-2, #fff);
+      }
+    }
+    .el-pagination__jump {
+      height: 32px !important;
+      margin-left: 8px;
+      .el-input--small .el-input__inner {
+        height: 32px;
+        line-height: 32px;
+        border-radius: 4px;
+        border: 1px solid var(--border-2, #e5e6eb);
+        background: var(--bg-2, #fff);
+      }
+    }
   }
 }
 
 .n20-pagination-jumper-1 {
-  width: 36px;
+  width: 32px;
   text-align: center;
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: 8px;
 
   &.is-without-controls {
     .el-input__inner {
-      height: 26px;
+      height: 32px;
       text-align: center;
-      line-height: 26px;
-      padding-left: 4px;
-      padding-right: 4px;
-      border-radius: 2px;
+      line-height: 32px;
+      border-radius: 4px;
     }
   }
+  .el-input--mini .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+    border: 1px solid var(--border-2, #e5e6eb);
+    background: var(--bg-2, #fff);
+  }
 }
 
 .n20-pagination-sizes-1 {
@@ -55,7 +115,7 @@
     box-shadow: none;
   }
 
-  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
     border-color: $--color-primary;
   }
 }
@@ -68,8 +128,6 @@
     .el-input__inner {
       height: 26px;
       line-height: 26px;
-      padding-left: 4px;
-      padding-right: 4px;
       border-radius: 2px;
     }
   }
@@ -84,7 +142,7 @@
 .n20-pagination {
   display: inline-block;
 
-  >* {
+  > * {
     vertical-align: middle;
   }
 
@@ -160,4 +218,4 @@
     padding-right: 12px;
     text-align: center;
   }
-}
+}

package/src/assets/css/rootvar.scss

@@ -102,6 +102,7 @@ $--color-FFBF00: #ffbf00;
   --line-height-18: 18px;
   --line-height-22: 22px;
   --line-height-24: 24px;
+  --line-height-26: 26px;
   --line-height-28: 28px;
   --line-height-32: 32px;
 

package/src/assets/css/secondary-tab.scss

@@ -1,53 +1,70 @@
-.n20-secondary-tab {
-  .el-tabs__header {
-    margin-bottom: 0;
-  }
-  .el-tabs__nav-wrap::after {
-    display: none;
-  }
-  .el-tabs__item {
-    font-weight: 400;
-    height: 27px;
-    line-height: 26px;
-    padding: 0 10px;
-    &.is-active {
+.n20-secondary-tab__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid $--border-color-base;
+  .n20-secondary-tab {
+    .el-tabs__header {
+      margin-bottom: 0;
+    }
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+    .el-tabs__item {
+      font-weight: 400;
+      // height: 27px;
+      font-family: 'PingFang SC';
+      font-size: 14px;
+      font-style: normal;
       font-weight: 500;
-      &::after {
-        content: '';
-        height: 2px;
-        background-color: $--color-primary;
-        display: block;
-        margin-top: -1px;
+      line-height: 26px;
+      padding: 9px 16px;
+
+      &.is-active {
+        font-weight: 500;
+        &::after {
+          content: '';
+          height: 2px;
+          background-color: $--color-primary;
+          display: block;
+          margin-top: 3px;
+        }
       }
-    }
-    &.is-disabled {
-      cursor: no-drop;
-      &::after {
-        background-color: $--color-text-placeholder;
+      &.is-disabled {
+        cursor: no-drop;
+        &::after {
+          background-color: $--color-text-placeholder;
+        }
+      }
+      &.is-top:nth-child(2) {
+        padding-left: 16px;
+      }
+      &.is-top:last-child {
+        padding-right: 16px;
       }
     }
-  }
 
-  .el-tabs__item-badge {
-    width: 6px;
-    height: 6px;
-    background: $--color-danger;
-    position: absolute;
-    right: 6px;
-    top: 2px;
-    border-radius: 3px;
-  }
-  .el-tabs__item.is-top:last-child {
     .el-tabs__item-badge {
-      right: -4px;
+      width: 6px;
+      height: 6px;
+      background: $--color-danger;
+      position: absolute;
+      right: 6px;
+      top: 2px;
+      border-radius: 3px;
+    }
+    .el-tabs__item.is-top:last-child {
+      .el-tabs__item-badge {
+        right: -4px;
+      }
+    }
+    .el-tabs__active-bar {
+      display: none;
     }
-  }
-  .el-tabs__active-bar {
-    display: none;
-  }
 
-  .el-tabs__nav-prev,
-  .el-tabs__nav-next {
-    line-height: 28px;
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      line-height: 28px;
+    }
   }
 }

package/src/assets/css/table.scss

@@ -50,6 +50,15 @@
   }
 }
 
+.el-table thead {
+  color: #333;
+  font-family: 'PingFang SC';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px; /* 157.143% */
+}
+
 /* 骨架屏样式 - 仅覆盖内容区域，表头正常显示 */
 .table-pro-skeleton {
   position: absolute;
@@ -201,22 +210,55 @@
       line-height: 12px;
     }
   }
-
+  .n20-table-pro__row-checked {
+    background-color: #e8f7ff !important;
+  }
   .vxe-header--column.is--padding.fixed-column__static {
-    padding: 0 6px;
+    font-weight: 400 !important;
     .vxe-cell {
-      padding: 0;
+      padding: 0 !important;
     }
+    .vxe-cell--wrapper.vxe-header-cell--wrapper {
+      justify-content: space-around;
+      .vxe-cell--title {
+        width: 100%;
+        .v3-custom-fixed-header__wrapper {
+          > * {
+            position: relative;
+            &::after {
+              content: '';
+              position: absolute;
+              right: -75%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              width: 1px;
+              height: 12px;
+              background: var(--border-2, #e5e6eb);
+            }
+            &:last-child::after {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+    .vxe-cell--col-resizable:before {
+      background-color: transparent;
+    }
+
     i {
       display: inline-block;
       font-size: 16px;
-      color: #505968;
+      color: #4e5969;
       cursor: pointer;
-      margin-left: 10px;
     }
   }
 }
 
+.vxe-table--render-default.size--small .vxe-body--column.is--padding .vxe-cell {
+  padding: 8px 6px !important;
+}
+
 /* 悬浮按钮组样式 */
 .table-hover-btns {
   position: absolute;
@@ -247,7 +289,7 @@
 /* 过渡动画 */
 .hover-btns-fade-enter-active,
 .hover-btns-fade-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
+  // transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
 .hover-btns-fade-enter,
@@ -264,7 +306,7 @@
 
 .vxe-table.vxe-table--render-default.border--none,
 .vxe-table.vxe-table--render-default.border--inner .vxe-cell--col-resizable:before {
-  background-color: transparent;
+  // background-color: transparent;
 }
 
 .vxe-table .vxe-cell--sort {
@@ -289,7 +331,13 @@
 }
 
 .vxe-header--row {
-  color: #333;
+  color: var(--text-1, #1d2129);
+  /* 14/CN-Medium */
+  font-family: 'PingFang SC';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px; /* 157.143% */
   background-color: #f5f5f5;
 }
 
@@ -325,11 +373,8 @@
 .vxe-header--row th,
 th.vxe-header--column {
   position: relative;
-  font-weight: $--font-weight-primary;
 }
 
-
-
 .vxe-table--tooltip-wrapper {
   z-index: 9999 !important;
 }
@@ -339,8 +384,13 @@ th.vxe-header--column {
 }
 
 .n20-table-pro.vxe-table--render-default {
-  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif !important;
-  color: #333;
+  color: var(--text-1, #1d2129);
+  /* 14/CN-Regular */
+  font-family: 'PingFang SC';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 157.143% */
 }
 
 .vxe-table-custom-wrap.vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell,
@@ -363,18 +413,114 @@ th.vxe-header--column {
 //   }
 // }
 
-@import '../../components/TableSetSize/style.scss';
+.el-table div.hidden-columns {
+  visibility: initial;
+  position: initial;
+  height: 0;
+  width: 0;
 
-.el-table-set-size-item {
-  .icon-mini {
-    background-image: url('../../components/TableSetSize/small.png');
+  > * {
+    visibility: hidden;
   }
+  > .el-table-set-size {
+    visibility: initial;
+  }
+}
+.el-table-set-size {
+  box-sizing: border-box;
+  width: 6px;
+  height: 40px;
+  border-radius: 4px 0 0 4px;
+  background: var(--primary-6, #007aff);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  overflow: hidden;
+  transition: all 0.3s;
+  cursor: pointer;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: $--color-primary;
+    opacity: 0.7;
+  }
+
+  &:hover {
+    width: 112px;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 36px;
+    // height: 34px;
+    border-radius: 4px;
+    color: $--color-white;
+    z-index: 1;
+    cursor: pointer;
+    position: relative;
+
+    /* 右侧垂直分割线 */
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 12px;
+      background: var(--fill-7, rgba(0, 0, 0, 0.12));
+    }
 
-  .icon-mini {
-    background-image: url('../../components/TableSetSize/mini.png');
+    // &:hover {
+    //   background: $--color-primary;
+    // }
+    // &.active {
+    //   background: $--color-primary-hover;
+    // }
+
+    .icon-small,
+    .icon-mini {
+      display: block;
+      width: 16px;
+      height: 16px;
+      margin: 4px auto 0;
+    }
+    .icon-small {
+      background-size: 100% 100%;
+    }
+    .icon-mini {
+      background-size: 100% 100%;
+    }
+    .text-small,
+    .text-mini {
+      margin-top: 3px;
+      line-height: 12px;
+      font-size: 12px;
+      text-align: center;
+      transform: scale(0.667);
+      transform-origin: 50% 0;
+    }
   }
 }
 
+// .el-table-set-size-item {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   .icon-mini {
+//     background-image: url('../../components/TableSetSize/small.png');
+//   }
+
+//   .icon-mini {
+//     background-image: url('../../components/TableSetSize/mini.png');
+//   }
+// }
+
 .el-table th.el-table__cell > .cell {
   overflow: hidden;
   text-overflow: ellipsis;