amis-ui 6.0.0 → 6.2.0

package/scss/components/_menu.scss

@@ -107,7 +107,7 @@
     top: 0;
     left: 0;
     bottom: 0;
-    border-right: 3px solid $themeColor;
+    border-right: px2rem(3px) solid $themeColor;
     transform: scaleY(1);
     opacity: 1;
     transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
@@ -192,7 +192,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--colors-neutral-text-2);
+    color: inherit;
     font-size: inherit;
     flex: 1;
     cursor: inherit;
@@ -205,10 +205,10 @@
   }
 
   &-item-divider {
-    border-bottom: 1px solid #e6e6e8;
+    border-bottom: px2rem(1px) solid #e6e6e8;
 
     &-dark {
-      border-bottom: 1px solid #3a3e47;
+      border-bottom: px2rem(1px) solid #3a3e47;
     }
   }
 
@@ -327,7 +327,7 @@
   }
 
   &-vertical.#{$ns}Nav-Menu-sub {
-    min-width: 160px;
+    min-width: px2rem(160px);
   }
 
   &-item,
@@ -419,8 +419,8 @@
   }
 
   & > &-item-divider {
-    height: 1px;
-    margin: 0 16px 4px 16px;
+    height: px2rem(1px);
+    margin: 0 px2rem(16px) px2rem(4px) px2rem(16px);
     overflow: hidden;
     padding: 0;
     background-color: #ebebeb;
@@ -433,12 +433,14 @@
       background-color: var(--Layout-light-backgroundColor);
       line-height: var(--Nav-Item-height);
       cursor: pointer;
-      border-radius: 2px;
-      max-height: 400px;
+      border: var(--Form-select-outer-borderWidth) solid
+        var(--Form-select-outer-borderColor);
+      border-radius: px2rem(2px);
+      max-height: px2rem(400px);
       overflow-y: auto;
-      box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
-        0 1px 10px 0 rgba(21, 26, 38, 0.05),
-        0 2px 4px -1px rgba(21, 26, 38, 0.04);
+      box-shadow: 0 px2rem(4px) px2rem(5px) 0 rgba(21, 26, 38, 0.06),
+        0 px2rem(1px) px2rem(10px) 0 rgba(21, 26, 38, 0.05),
+        0 px2rem(2px) px2rem(4px) px2rem(-1px) rgba(21, 26, 38, 0.04);
 
       // 横向收纳模式且有子菜单项的情况下 会显示2个展开箭头
       // 用css隐藏1个 自适应收纳的情况下 判断不出是子菜单项还是收纳项
@@ -499,7 +501,7 @@
       &:after {
         content: ' ';
         width: 100%;
-        height: 2px;
+        height: px2rem(2px);
         background: var(--Menu-light-fontColor-onHover);
         position: absolute;
         left: 0;
@@ -614,6 +616,7 @@
       svg {
         transition: transform 0.3s;
         transform: rotate(90deg);
+        color: var(--colors-neutral-text-2);
       }
     }
 
@@ -643,7 +646,7 @@
 
     .#{$ns}Nav-Menu-item-group-list {
       .#{$ns}Nav-Menu-item-divider {
-        height: 1px;
+        height: px2rem(1px);
         width: 60%;
         margin: 0 auto;
       }
@@ -694,10 +697,11 @@
   font-size: var(--Layout-tooltip-fontSize);
   color: var(--Layout-light-fontColor);
   background: var(--Layout-light-backgroundColor);
-  border: none;
+  border: var(--common-popover-border);
   border-radius: var(--Tooltip--attr-borderRadius);
-  box-shadow: 0px 4px 6px 0px rgb(8 14 26 / 6%),
-    0px 1px 10px 0px rgb(8 14 26 / 5%), 0px 2px 4px -1px rgb(8 14 26 / 4%);
+  box-shadow: 0 px2rem(4px) px2rem(6px) 0 rgb(8 14 26 / 6%),
+    0 px2rem(1px) px2rem(10px) 0 rgb(8 14 26 / 5%),
+    0 px2rem(2px) px2rem(4px) px2rem(-1px) rgb(8 14 26 / 4%);
 
   .#{$ns}Tooltip-arrow {
     &:before {

package/scss/components/_modal.scss

@@ -191,7 +191,6 @@
 @include media-breakpoint-up(sm) {
   .#{$ns}Modal-content:not(.#{$ns}Modal-content-custom) {
     max-width: var(--dialog-size-normal-width);
-    border-width: var(--dialog-default-border-width);
   }
 
   .#{$ns}Modal--sm .#{$ns}Modal-content {

package/scss/components/_nav.scss

@@ -4,7 +4,8 @@
   background-color: var(--Layout-light-backgroundColor);
   font-size: var(--Nav-item-fontSize);
   line-height: var(--Nav-Item-height);
-  min-height: 10px;
+  min-height: px2rem(10px);
+  color: var(--colors-neutral-text-2);
 
   &-horizontal {
     line-height: var(--Nav-Item-height--horizontal);
@@ -13,7 +14,7 @@
   .#{$ns}Nav-dropIndicator {
     position: absolute;
     background: var(--Nav-item-onActive-color);
-    height: 2px;
+    height: px2rem(2px);
   }
 
   &--searchable {

package/scss/components/_pagination.scss

@@ -21,7 +21,7 @@
       line-height: var(--Pagination-height);
       padding: var(--Pagination-padding);
       text-align: center;
-      color: #666666;
+      color: var(--Pagination-light-color);
       border-radius: 0;
       margin-left: 0;
       font-size: var(--Pagination-fontSize);
@@ -116,6 +116,8 @@
       border: var(--borderWidth) solid var(--borderColor);
       border-radius: var(--borderRadius) 0 0 var(--borderRadius);
       padding: var(--Pagination-padding);
+      background-color: var(--colors-neutral-fill-11);
+      color: var(--Pagination-light-color);
       margin-left: px2rem(8px);
       text-align: center;
 
@@ -137,11 +139,11 @@
       border-left: none;
       border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
       font-size: var(--fontSizeSm);
+      margin-left: -1px;
       &:hover {
         color: var(--primary);
         border-color: var(--primary);
         border-left: var(--borderWidth) solid var(--primary);
-        margin-left: -1px;
       }
     }
   }
@@ -161,6 +163,8 @@
       border: var(--borderWidth) solid var(--borderColor);
       border-radius: var(--borderRadius);
       padding: var(--Pagination-padding);
+      background-color: var(--colors-neutral-fill-11);
+      color: var(--Pagination-light-color);
       margin-right: px2rem(8px);
       text-align: center;
 
@@ -195,7 +199,7 @@
         transition: all 0.2s;
       }
       > span {
-        opacity: 1;  
+        opacity: 1;
         transition: all 0.2s;
       }
     }
@@ -208,18 +212,17 @@
       transition: all 0.2s;
     }
     > span {
-      opacity: 0;  
+      opacity: 0;
       transition: all 0.2s;
     }
   }
 }
 
 .#{$ns}Pagination-wrap {
-  line-height: px2rem(30px);
-
   .#{$ns}Pagination-item {
     &.#{$ns}Pagination-perpage {
       margin-left: px2rem(8px);
+      vertical-align: baseline;
     }
     &:nth-child(1) {
       margin-left: 0;
@@ -264,8 +267,8 @@
 
   .#{$ns}Pagination-item {
     margin-left: px2rem(4px);
-  
-    > li {  
+
+    > li {
       > a,
       > span {
         min-width: var(--Pagination-minWidth-sm);
@@ -274,8 +277,9 @@
         padding: var(--Pagination-padding-sm);
       }
     }
-  
-    .#{$ns}Pagination-inputGroup, .#{$ns}Pagination-simplego {
+
+    .#{$ns}Pagination-inputGroup,
+    .#{$ns}Pagination-simplego {
       height: var(--Pagination-height-sm);
       &-input {
         min-width: px2rem(40px);

package/scss/components/_pdf_viewer.scss

@@ -0,0 +1,45 @@
+.#{$ns}PdfViewer {
+  position: relative;
+  height: 100%;
+  min-height: 500px;
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+  &-Content {
+    width: max-content;
+    max-width: 100%;
+    &.is-loaded {
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
+    }
+  }
+
+  &-Loading {
+    text-align: center;
+  }
+
+  &-Tool {
+    position: absolute;
+    z-index: 10;
+    padding: 5px 15px;
+    bottom: 60px;
+    background-color: #444444;
+    border-radius: 10px;
+    color: #fff;
+    text-align: center;
+    user-select: none;
+    .gap {
+      margin: 0 4px;
+    }
+    .icon {
+      cursor: pointer;
+      width: 20px;
+      margin: 0 10px;
+      &:hover {
+        color: var(--colors-brand-5);
+      }
+    }
+    .page-input {
+      width: 40px;
+    }
+  }
+}

package/scss/components/_popover.scss

@@ -21,7 +21,7 @@
   word-wrap: normal;
   font-size: var(--fontSizeBase);
   box-shadow: var(--boxShadow);
-  border: var(--borderWidth) solid var(--borderColor);
+  border: var(--common-popover-border);
   border-radius: var(--borderRadius);
 
   & > * {

package/scss/components/_print.scss

@@ -0,0 +1,13 @@
+@media print {
+  .pe-no-print {
+    display: none !important;
+  }
+
+  .pe-preserve-ancestor {
+    display: block !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+}

package/scss/components/_quick-edit.scss

@@ -1,21 +1,18 @@
 .#{$ns}Field-quickEditBtn {
-  color: var(--QuickEdit-iconColor);
   margin-left: var(--gap-xs);
-  display: inline-block;
+  height: auto;
+  padding: 0;
   vertical-align: text-bottom;
-  cursor: pointer;
-  opacity: 0.6;
-  font-size: 0;
 
-  &:hover {
-    color: var(--QuickEdit-onHover-iconColor);
-    opacity: 1;
+  .fa {
+    font-size: var(--QuickEdit-iconSize);
   }
 
   > svg {
     width: var(--QuickEdit-iconSize);
     height: var(--QuickEdit-iconSize);
-    top: 0;
+    color: currentColor;
+    fill: currentColor;
   }
 }
 

package/scss/components/_search-box.scss

@@ -15,7 +15,6 @@
   transition: all var(--animation-duration) ease-in-out;
   border: var(--Form-input-borderWidth) solid transparent;
   border-radius: var(--Form-input-borderRadius);
-  overflow: hidden;
 
   &:hover {
     background: var(--Form-input-onHover-bg);
@@ -25,6 +24,7 @@
     background: var(--Form-input-bg);
     border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
     width: var(--SearchBox-width);
+    position: relative;
     > input {
       flex-grow: 1;
     }
@@ -59,7 +59,7 @@
     cursor: pointer;
     color: var(--SearchBox-search-icon-color);
     svg {
-      top: 1px;
+      top: px2rem(2px);
     }
 
     &:hover {
@@ -121,11 +121,15 @@
   }
 
   &--enhance.is-active &-searchBtn {
-    height: 100%;
     color: var(--SearchBox-enhonce-icon-color);
     background: var(--SearchBox-hover-color);
+    position: absolute;
+    top: px2rem(-1px);
+    bottom: px2rem(-1px);
+    right: px2rem(-1px);
+    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
     svg {
-      top: 0;
+      top: px2rem(2px);
     }
 
     &:hover {

package/scss/components/_spinner.scss

@@ -105,6 +105,12 @@
     }
   }
 
+  .#{$ns}Spinner-icon--darkBg {
+    svg.icon path {
+      fill: var(--loading-dark-bg-color);
+    }
+  }
+
   .#{$ns}Spinner-tip {
     margin: px2rem(12px) 0 0 0;
     word-break: keep-all;

package/scss/components/_steps.scss

@@ -8,7 +8,7 @@
     overflow: hidden;
     padding: 0 px2rem(8px);
     height: auto;
-    line-height: px2rem(32px);
+    line-height: px2rem(22px);
     &-container {
       position: relative;
       &Icon {
@@ -16,7 +16,7 @@
         display: inline-flex;
         align-items: center;
         padding-right: var(--steps-base-icon-paddingRight);
-        height: px2rem(32px);
+        height: px2rem(24px);
         .#{$ns}StepsItem-icon {
           display: inline-flex;
           align-items: center;
@@ -43,7 +43,7 @@
             font-weight: var(--steps-base-fontWeight);
             padding-right: var(--steps-base-title-paddingRight);
             position: relative;
-            display: inline-block;
+            display: inline-flex;
             > span {
               display: inline-block;
             }
@@ -51,11 +51,11 @@
               content: '';
               position: absolute;
               right: 0;
-              top: px2rem(16px);
+              top: px2rem(11px);
               height: 1px;
               left: 100%;
               width: 9999px;
-              padding-right: px2rem(10px);
+              padding-right: var(--steps-base-title-paddingRight);
               background-color: var(--Steps-line-bg);
             }
           }
@@ -80,7 +80,8 @@
             max-width: px2rem(140px);
             white-space: nowrap;
             position: relative;
-            bottom: px2rem(20px);
+            line-height: px2rem(20px);
+            // bottom: px2rem(20px);
             > span {
               color: var(--Steps-description-title-color);
               font-size: var(--Steps-description-title-fontsize);
@@ -112,10 +113,10 @@
           &:after {
             content: '';
             position: absolute;
-            left: 50%;
+            left: 36%;
             transform: translateX(-50%);
             right: 0;
-            top: px2rem(36px);
+            top: px2rem(28px);
             height: 9999px;
             width: 1px;
             background-color: var(--Steps-line-bg);
@@ -208,7 +209,7 @@
           content: '';
           position: absolute;
           display: inline-block;
-          top: px2rem(16px);
+          top: px2rem(12px);
           height: 1px;
           left: px2rem(130px);
           width: calc(100% - 55px);
@@ -216,6 +217,7 @@
         }
         &Icon {
           margin-left: px2rem(90px);
+          left: px2rem(12px);
         }
         &Wrapper {
           width: px2rem(200px);
@@ -223,7 +225,7 @@
             text-align: center;
             .#{$ns}StepsItem-title {
               padding: 0 px2rem(10px);
-              bottom: px2rem(9px);
+              flex-direction: column;
               width: 100%;
               > span {
                 display: block;
@@ -235,7 +237,6 @@
                 padding: 0 px2rem(10px);
                 position: relative;
                 left: px2rem(10px);
-                bottom: px2rem(12px);
               }
             }
             .#{$ns}StepsItem-title:after {
@@ -245,7 +246,6 @@
               min-width: px2rem(200px);
               word-break: break-all;
               padding: 0 px2rem(20px);
-              bottom: px2rem(44px);
             }
             .#{$ns}StepsItem-title.is-success {
               &:after {
@@ -280,7 +280,7 @@
           width: calc(100% - 20px);
         }
         &ProgressDot {
-          margin-top: px2rem(13px);
+          margin-top: px2rem(9px);
           margin-bottom: px2rem(5px);
           width: var(--steps-dot-icon-size);
           height: var(--steps-dot-icon-size);
@@ -340,21 +340,18 @@
     .#{$ns}StepsItem-icon {
       background-color: var(--Steps-status-error);
       color: var(--steps-status-error-color);
-      border: 1px solid var(--Steps-status-error);
     }
   }
   .#{$ns}StepsItem.is-finish {
     .#{$ns}StepsItem-icon {
       background-color: var(--Steps-status-success);
       color: var(--steps-status-finish-color);
-      border: 1px solid var(--Steps-status-success);
     }
   }
   .#{$ns}StepsItem.is-process {
     .#{$ns}StepsItem-icon {
       background-color: var(--steps-status-process-bg-color);
       color: var(--steps-status-process-color);
-      border: 1px solid var(--steps-status-process-bg-color);
     }
   }
 

package/scss/components/_table.scss

@@ -800,6 +800,11 @@
         }
       }
     }
+
+    .#{$ns}SearchBox {
+      margin-left: var(--gap-xs);
+      margin-top: var(--gap-xs);
+    }
   }
 
   &-itemActions-wrap {

package/scss/components/_tooltip.scss

@@ -12,6 +12,7 @@
   word-wrap: break-word;
   background: var(--Tooltip-bg);
   box-shadow: var(--Tooltip-boxShadow);
+  border: var(--common-popover-border);
 
   &-arrow {
     position: absolute;
@@ -178,7 +179,7 @@
 
   &--dark {
     background: var(--Tooltip-bg--dark);
-    border: none;
+    border: var(--common-popover-border);
     box-shadow: var(--Tooltip-boxShadow--dark);
 
     .#{$ns}Tooltip-title {

package/scss/components/_wrapper.scss

@@ -1,5 +1,9 @@
 .#{$ns}Wrapper,
 .#{$ns}Container {
+  /* 添加默认的min-width和min-height可避免容器子元素异常溢出 */
+  min-width: 0;
+  min-height: 0;
+  
   &--xs {
     padding: var(--gap-xs);
   }

package/scss/components/form/_checks.scss

@@ -271,7 +271,7 @@
         &:before {
           width: var(--Checkbox--full-inner-size);
           height: calc(var(--Checkbox--full-inner-size) / 2);
-          border-color: var(--Checkbox-gb);
+          border-color: #fff;
         }
       }
 

package/scss/components/form/_date-range.scss

@@ -258,7 +258,7 @@
 
 .#{$ns}DateRangePicker-popover {
   border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
 }
 

package/scss/components/form/_date.scss

@@ -201,7 +201,7 @@
 .#{$ns}DatePicker-popover {
   margin: px2rem(2px) 0 0;
   border: var(--Form-select-outer-borderWidth) solid
-    var(--Form-input-onFocused-borderColor);
+    var(--Form-select-outer-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
 }
 
@@ -719,7 +719,7 @@ td.rdtQuarter {
   > span {
     display: inline-block;
     color: var(--inputDate-other-color);
-    background: var(--inputDate-other-bg-color);
+    // background: var(--inputDate-other-bg-color);
     border-radius: var(--inputDate-other-top-left-border-radius)
       var(--inputDate-other-top-right-border-radius)
       var(--inputDate-other-bottom-right-border-radius)
@@ -760,7 +760,7 @@ td.rdtQuarter {
   }
 }
 
-.rdtPicker .rdtActive.rdtBetween.rdtStartDay {
+.rdtPicker .rdtActive.rdtBetween.rdtStart {
   background: linear-gradient(
     to right,
     transparent 0%,
@@ -770,6 +770,16 @@ td.rdtQuarter {
   );
 }
 
+.rdtPicker .rdtActive.rdtBetween.rdtEnd {
+  background: linear-gradient(
+    to right,
+    var(--Calendar-cell-onBetween-bg) 0%,
+    var(--Calendar-cell-onBetween-bg) 50%,
+    transparent 51%,
+    transparent 100%
+  );
+}
+
 .rdt .rdtPicker td.is-disabled {
   cursor: not-allowed !important;
   background: var(--Calendar-cell-onDisabled-bg);
@@ -785,16 +795,6 @@ td.rdtQuarter {
   }
 }
 
-.rdtPicker .rdtActive.rdtBetween.rdtEndDay {
-  background: linear-gradient(
-    to right,
-    var(--Calendar-cell-onBetween-bg) 0%,
-    var(--Calendar-cell-onBetween-bg) 50%,
-    transparent 51%,
-    transparent 100%
-  );
-}
-
 .#{$ns}DateCalendar {
   display: inline-block;
   border-width: var(--DatePicker-borderWidth);

package/scss/components/form/_editor.scss

@@ -82,7 +82,6 @@
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
-    background: var(--Modal-header-bg);
     box-sizing: border-box;
   }
 

package/scss/components/form/_excel.scss

@@ -24,10 +24,10 @@
     padding: var(--gap-md);
     border-width: 2px;
     border-radius: 2px;
-    border-color: #eeeeee;
+    border-color: var(--colors-neutral-line-8);
     border-style: dashed;
-    background-color: #fafafa;
-    color: #bdbdbd;
+    background-color: var(--colors-neutral-fill-10);
+    color: var(--colors-neutral-text-6);
     outline: none;
     transition: border 0.24s ease-in-out;
   }

package/scss/components/form/_form.scss

@@ -413,7 +413,7 @@
 .#{$ns}Form--debug {
   padding: var(--gap-sm);
   margin-bottom: var(--gap-sm);
-  background-color: rgb(250, 250, 250);
+  background-color: var(--colors-neutral-fill-11);
   border-radius: var(--borderRadius);
   position: relative;
   word-wrap: break-word;
@@ -809,12 +809,6 @@
     margin-bottom: 0;
   }
 
-  .#{$ns}Form-item:nth-last-of-type(1) {
-    &::after {
-      display: none;
-    }
-  }
-
   .#{$ns}Form-item.is-placeholder::after {
     display: none;
   }