amis 1.5.6-beta.5 → 1.6.0

package/scss/components/form/_form.scss

@@ -406,3 +406,171 @@
 .#{$ns}Form-column-10 > .#{$ns}Form-item {
   width: 10%;
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Form {
+    .#{$ns}Form-item {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+      padding: var(--Form-item-gap) 0;
+      position: relative;
+
+      &::after {
+        position: absolute;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+        transform: scaleY(0.5);
+      }
+
+      .#{$ns}InputGroup-addOn,
+      .#{$ns}TextControl-addOn {
+        border: none;
+      }
+
+      > .#{$ns}Form-label {
+        flex: 0 0 28%;
+        max-width: 28%;
+        min-height: 1px;
+        text-align: left;
+        padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
+        overflow-wrap: break-word;
+        margin-right: 0;
+        margin-bottom: 0;
+        font-size: var(--fontSizeLg);
+      }
+
+      .#{$ns}Form-description {
+        font-size: var(--fontSizeBase);
+      }
+
+      .#{$ns}TextControl-input {
+        font-size: var(--fontSizeLg);
+
+        input {
+          height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+        }
+      }
+
+      .#{$ns}Form-value,
+      .#{$ns}Form-control {
+        flex: 1;
+        flex-wrap: wrap;
+        font-size: var(--fontSizeLg);
+
+        &.is-disabled > .#{$ns}TextControl-input {
+          background: transparent;
+        }
+      }
+
+      .#{$ns}Form-hint,
+      .#{$ns}Form-remark,
+      .#{$ns}Form-static,
+      .#{$ns}Form-group--hor .#{$ns}Form-item,
+      .#{$ns}SwitchControl,
+      .#{$ns}CheckboxControl,
+      .#{$ns}RadiosControl,
+      .#{$ns}CheckboxesControl {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      .#{$ns}Form-group--horizontal .#{$ns}TextControl-input input {
+        height: var(--Form-input-height);
+      }
+
+      .#{$ns}Form-hint {
+        font-size: var(--fontSizeBase);
+        margin-left: 0;
+        color: var(--text--muted-color);
+      }
+
+      .#{$ns}TextControl-placeholder {
+        top: 0;
+      }
+
+      .#{$ns}Form-static {
+        min-height: 0;
+      }
+
+      .#{$ns}Form-description,
+      .#{$ns}Form-feedback {
+        font-size: var(--fontSizeBase);
+      }
+
+      .#{$ns}InputGroup {
+        .#{$ns}Select,
+        .#{$ns}InputGroup-btn .#{$ns}Button {
+          border: none;
+        }
+
+        > .#{$ns}TextControl-input input {
+          height: var(--Form-input-height);
+        }
+      }
+
+      .#{$ns}ColorPicker {
+        padding: 0;
+        border: none;
+
+        .#{$ns}ColorPicker-arrow {
+          display: none;
+        }
+      }
+
+      .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button {
+        margin-bottom: var(--gap-xs);
+      }
+
+      .#{$ns}TextareaControl > textarea,
+      .#{$ns}Form-control > .#{$ns}TextControl-input,
+      .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
+        border: none;
+        padding: 0 var(--Form-input-paddingX) 0 0;
+        box-shadow: none;
+
+        &:hover,
+        &:focus,
+        &.active {
+          border: none;
+          outline: none;
+          outline-style: none;
+        }
+      }
+
+      .#{$ns}Form-control > .#{$ns}TextControl-input--multiple {
+        padding: 0;
+        min-height: 0;
+      }
+    }
+
+    .#{$ns}Form-groupColumn {
+      margin-bottom: 0;
+    }
+
+    .#{$ns}Divider {
+      display: none;
+    }
+
+    .#{$ns}Tabs-pane {
+      padding: 0;
+    }
+
+    > .#{$ns}Form-item {
+      &:last-child::after,
+      &:last-of-type::after {
+        display: none;
+      }
+    }
+
+    .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item {
+      padding-bottom: var(--Form-input-paddingX);
+    }
+  }
+}

package/scss/components/form/_nested-select.scss

@@ -87,4 +87,7 @@
       }
     }
   }
+  &-popup {
+    height: px2rem(460px);
+  }
 }

package/scss/components/form/_rating.scss

@@ -1,31 +1,70 @@
 .#{$ns}Rating {
+  display: flex;
   position: relative;
-  overflow: hidden;
-  display: block;
-  float: left;
-  font-size: px2rem(24px);
-  color: var(--dark);
-  cursor: pointer;
-
-  &.is-active {
-    color: var(--Rating-onActive-color);
-  }
+  align-items: center;
+  justify-content: flex-start;
+  flex-flow: row wrap;
 
-  &.is-disabled {
-    cursor: not-allowed;
-    pointer-events: none;
+  & > ul {
+    display: flex;
+    padding: unset;
+    margin: unset;
+    align-items: center;
+    justify-content: flex-start;
+    flex-flow: row wrap;
   }
 
-  &-half:before {
-    position: absolute;
+  &-star {
+    position: relative;
+    margin-right: var(--Rating-star-margin);
     overflow: hidden;
     display: block;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 50%;
-    content: attr(data-forhalf);
-    color: var(--Rating-onActive-color);
+    font-size: var(--Rating-star-size);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    color: var(--Rating-inactive-color);
+
+    &-half > svg.icon,
+    & > svg.icon {
+      display: block;
+      width: px2rem(24px);
+      height: px2rem(24px);
+      top: 0;
+    }
+  
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &-half {
+      position: absolute;
+      overflow: hidden;
+      display: block;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 50%;
+    }
+  }
+
+  &-text {
+    font-size: var(--fontSizeSm);
+    color: var(--text-color);
+    font-weight: var(--fontWeightNormal);
+
+    &--left {
+      margin-right: var(--Rating-star-margin);
+    }
+
+    &--right {
+      margin-left: var(--Rating-star-margin);
+    }
   }
 }
 

package/scss/components/form/_result-list.scss

@@ -40,6 +40,7 @@
     height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
+    align-items: center;
     padding: calc(
         (
             var(--Form-input-height) - var(--Form-input-lineHeight) *
@@ -54,6 +55,7 @@
     }
 
     > .#{$ns}Selections-dragbar {
+      top: 0;
       width: var(--gap-lg);
       position: relative;
       left: calc(var(--gap-xs) * -1);

package/scss/components/form/_select.scss

@@ -2,6 +2,7 @@
   display: inline-flex;
   vertical-align: middle;
   text-align: left;
+  align-items: center;
   outline: none;
   position: relative;
   font-size: var(--Form-input-fontSize);
@@ -148,10 +149,27 @@
     }
   }
 
-  &.is-opened &-arrow > svg {
+  &.is-opened:not(.is-mobile) &-arrow > svg {
     transform: rotate(180deg);
   }
 
+  &.is-mobile {
+    min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+    border: none;
+    padding: 0;
+    font-size: var(--fontSizeLg);
+
+    .#{$ns}Select-valueWrap {
+      text-align: right;
+      padding-right: 4px;
+    }
+    .#{$ns}Select-arrow {
+      > svg {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
   &-menu {
     max-height: px2rem(300px);
     overflow: auto;
@@ -159,6 +177,13 @@
     .#{$ns}Checkbox--sm > i {
       margin-top: px2rem(-3px);
     }
+    &.is-mobile {
+      width: 100%;
+      text-align: center;
+      .#{$ns}Select-option {
+        line-height: px2rem(36px);
+      }
+    }
   }
   &--longlist {
     overflow: hidden;
@@ -282,8 +307,8 @@
     }
   }
 
-  &.is-focused,
-  &.is-opened {
+  &.is-focused:not(.is-mobile),
+  &.is-opened:not(.is-mobile) {
     border-color: var(--Form-input-onFocused-borderColor);
     color: var(--Form-select-onFocused-color);
   }
@@ -314,6 +339,10 @@
       fill: var(--Form-input-onHover-iconColor);
     }
   }
+
+  &-popup {
+    height: px2rem(320px);
+  }
 }
 
 .#{$ns}Select-popover {

package/scss/components/form/_selection.scss

@@ -1,7 +1,7 @@
 .#{$ns}Selection {
   > .#{$ns}Checkbox {
     display: block;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(
@@ -57,7 +57,7 @@
 
   &-item {
     display: flex;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(
@@ -193,7 +193,7 @@
   &-itemInner {
     display: flex;
     align-items: center;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(
@@ -251,6 +251,7 @@
 .#{$ns}ChainedSelection {
   display: flex;
   flex-direction: row;
+  min-height: 100%;
 
   &-col {
     flex-grow: 1;
@@ -269,7 +270,7 @@
 
   &-item {
     display: flex;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(

package/scss/components/form/_transfer.scss

@@ -235,6 +235,9 @@
   display: flex;
   flex-direction: column;
 
+  &.is-mobile {
+     width: 100%;
+  }
   & > .#{$ns}Transfer-selection {
     flex-grow: 1;
     max-height: 100%;

package/scss/components/form/_tree-select.scss

@@ -17,7 +17,7 @@
   }
 
   &-popup {
-    height: 80vh;
+    height: px2rem(400px);
   }
 }
 

package/scss/themes/_antd-variables.scss

@@ -166,4 +166,46 @@ $link-color: $info;
   --Table-onChecked-borderColor: var(--Table-borderColor);
 
   --Switch-bgColor: #bfbfbf;
+
+  // timeline
+  --TimelineItem--axle-flex: 0 0 #{px2rem(24px)};
+  --TimelineItem--left-line-width: #{px2rem(2px)};
+  --TimelineItem--left-line-left: #{px2rem(13px)};
+  --TimelineItem--left-line-top: #{px2rem(20px)};
+  --TimelineItem--round-width: #{px2rem(8px)};
+  --TimelineItem--round-height: #{px2rem(8px)};
+  --TimelineItem--round-left: #{px2rem(10px)};
+  --TimelineItem--round-top: #{px2rem(8px)};
+  --TimelineItem--icon-width: #{px2rem(16px)};
+  --TimelineItem--icon-height: #{px2rem(16px)};
+  --TimelineItem--icon-left: #{px2rem(6px)};
+  --TimelineItem--content-padding-bottom: #{px2rem(16px)};
+  --TimelineItem--content-margin-left: #{px2rem(8px)};
+  --TimelineItem--content-time-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--content-title-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--detail-button-margin-bottom: #{px2rem(8px)};
+  --TimelineItem-detail-arrow-width: #{px2rem(16px)};
+  --TimelineItem-detail-visible-padding: #{px2rem(10px)};
+  --TimelineItem-detail-visible-max-width: #{px2rem(300px)};
+  --Timeline-alternate-margin-left: #{px2rem(24px)};
+
+  --TimelineItem--icon-radius: 50%;
+  --TimelineItem--round-radius: 50%;
+  --TimelineItem--content-radius: #{px2rem(2px)};
+
+  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0 rgba(0 0 0 / 10%);
+
+  --TimelineItem--font-size: #{px2rem(12px)};
+
+  --TimelineItem--text-primary-color: #151a26;
+  --TimelineItem--text-secondary-color: #83868c;
+  --TimelineItem--detail-button-color: var(--primary);
+  --TimelineItem--line-bg: #e6e6e8;
+  --TimelineItem--content-bg: #f2f2f4;
+  --TimelineItem-round-bg: #dadbdd;
+
+  --Timeline--success-bg: var(--success);
+  --Timeline--info-bg: var(--info);
+  --Timeline--warning-bg: var(--warning);
+  --Timeline--danger-bg: var(--danger);
 }

package/scss/themes/_common.scss

@@ -82,6 +82,7 @@
 @import '../components/form/checks';
 @import '../components/form/selection';
 @import '../components/form/city';
+@import '../components/city-area';
 @import '../components/form/switch';
 @import '../components/form/number';
 @import '../components/form/select';
@@ -112,6 +113,7 @@
 @import '../components/form/rating';
 @import '../components/form/transfer';
 @import '../components/form/nested-select';
+@import '../components/cascader';
 @import '../components/form/icon-picker';
 @import '../components/form/form';
 @import '../components/anchor-nav';
@@ -119,5 +121,6 @@
 @import '../components/link';
 @import '../components/mapping';
 @import '../components/formula';
+@import '../components/timeline';
 
 @import '../utilities';

package/scss/themes/_cxd-variables.scss

@@ -318,7 +318,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Button--primary-onActive-color: #{$G11};
 
   --Button--light-border: var(--light);
-  --Button--light-color: var(--button-color);
+  --Button--light-color: var(--text-color);
 
   --Button-onDisabled-borderColor: #{$G9};
   --Button-onDisabled-opacity: 0.65;
@@ -364,7 +364,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Table-onHover-bg: #f5f5f5;
   --Table-onHover-bg-rgb: 245, 251, 255;
   --Table-onHover-borderColor: #eceff8;
-  --Table-onChecked-bg: transparent;
+  --Table-onChecked-bg: #f0faff;
   --Table-onChecked-borderColor: #eceff8;
   --Table-onChecked-color: #333;
   --Table-onChecked-onHover-bg: #f5f5f5;
@@ -610,4 +610,53 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Tree-itemHeight: #{px2rem(32px)};
 
   --Progress-borderRadius: #{$R7};
+
+  --Rating-inactive-color: #{$G9};
+
+  // timeline
+  --TimelineItem--axle-flex: 0 0 #{px2rem(24px)};
+  --TimelineItem--left-line-width: #{px2rem(2px)};
+  --TimelineItem--left-line-left: #{px2rem(13px)};
+  --TimelineItem--left-line-top: #{px2rem(20px)};
+  --TimelineItem--round-width: #{px2rem(8px)};
+  --TimelineItem--round-height: #{px2rem(8px)};
+  --TimelineItem--round-left: #{px2rem(10px)};
+  --TimelineItem--round-top: #{px2rem(8px)};
+  --TimelineItem--icon-width: #{px2rem(16px)};
+  --TimelineItem--icon-height: #{px2rem(16px)};
+  --TimelineItem--icon-left: #{px2rem(6px)};
+  --TimelineItem--content-padding-bottom: #{px2rem(16px)};
+  --TimelineItem--content-margin-left: #{px2rem(8px)};
+  --TimelineItem--content-time-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--content-title-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--detail-button-margin-bottom: #{px2rem(8px)};
+  --TimelineItem-detail-arrow-width: #{px2rem(16px)};
+  --TimelineItem-detail-visible-padding: #{px2rem(10px)};
+  --TimelineItem-detail-visible-max-width: #{px2rem(300px)};
+  --Timeline-alternate-margin-left: #{px2rem(24px)};
+
+  --TimelineItem--icon-radius: #{$R8};
+  --TimelineItem--round-radius: #{$R8};
+  --TimelineItem--content-radius: #{$R2};
+
+  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0
+    rgba(0 0 0 / 10%);
+
+  --TimelineItem--font-size: #{$T2};
+
+  --TimelineItem--text-primary-color: #{$text-color};
+  --TimelineItem--text-secondary-color: #{$G5};
+  --TimelineItem--detail-button-color: var(--primary);
+  --TimelineItem--line-bg: #{$G9};
+  --TimelineItem--content-bg: #{$G10};
+  --TimelineItem-round-bg: #{$G8};
+
+  --Timeline--success-bg: var(--success);
+  --Timeline--info-bg: var(--info);
+  --Timeline--warning-bg: var(--warning);
+  --Timeline--danger-bg: var(--danger);
+
+  // Formula
+  --Formula-header-bgColor: #{$G10};
+  --Formula-funcItem-bgColor-onActive: #{$light};
 }

package/scss/themes/_dark-variables.scss

@@ -57,6 +57,7 @@ $link-color: $info;
   --DatePicker-bg: var(--background);
   --DatePicker-header-select-borderColor: var(--background);
   --DropDown-menu-bg: var(--background);
+  --Drawer-header-bg: var(--background);
   --Fieldset-legend-bgColor: var(--background);
   --Form-input-addOnBg: var(--Form-input-bg);
   --Form-input-bg: #3c3c3c;

package/scss/themes/cxd.scss

@@ -96,18 +96,6 @@
   }
 }
 
-.#{$ns}DropDown {
-  .#{$ns}DropDown-menu {
-    border: none;
-    > li {
-      color: #{$G2};
-    }
-    > li.is-disabled {
-      color: #{$G6};
-    }
-  }
-}
-
 .#{$ns}Toast {
   .#{$ns}Toast-icon {
     margin-right: #{px2rem(8px)};