@douyinfe/semi-foundation 2.66.1 → 2.67.0

package/autoComplete/constants.ts

@@ -3,9 +3,8 @@ import { BASE_CLASS_PREFIX, VALIDATE_STATUS } from '../base/constants';
 
 const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-autocomplete`,
-    PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autoComplete-option`,
-    PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autoComplete-group`,
-    
+    PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autocomplete-option`,
+    PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autocomplete-group`,
 };
 
 const strings = {

package/autoComplete/foundation.ts

@@ -29,6 +29,7 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     updateInputValue: (inputValue: string | number) => void;
     toggleListVisible: (isShow: boolean) => void;
     updateOptionList: (optionList: Array<StateOptionItem>) => void;
+    updateScrollTop: (index: number) => void;
     updateSelection: (selection: Map<any, any>) => void;
     notifySearch: (inputValue: string) => void;
     notifyChange: (value: string | number) => void;
@@ -387,6 +388,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
             index = nearestActiveOption;
         }
         this._adapter.updateFocusIndex(index);
+        this._adapter.updateScrollTop(index);
     }
 
     _handleArrowKeyDown(offset: number): void {

package/autoComplete/option.scss

@@ -1,4 +1,4 @@
-$module: #{$prefix}-autoComplete;
+$module: #{$prefix}-autocomplete;
 $filterable: #{$module}-filterable;
 
 .#{$module}-option {

package/cascader/cascader.scss

@@ -227,7 +227,6 @@ $module: #{$prefix}-cascader;
         justify-content: center;
         width: $width-cascader-icon;
         color: $color-cascader-icon-default;
-        margin-right: $spacing-cascader_clearBtn-marginRight;
     }
 
     &-clearbtn {

package/cascader/rtl.scss

@@ -5,12 +5,6 @@ $module: #{$prefix}-cascader;
     .#{$module} {
         direction: rtl;
 
-        &-arrow,
-        &-clearbtn {
-            margin-right: 0;
-            margin-left: $spacing-cascader_clearBtn-marginRight;
-        }
-
         &-inset-label {
             margin-right:  $spacing-cascader_label-marginRight;
             margin-left:  $spacing-cascader_label-marginRight;
@@ -79,12 +73,12 @@ $module: #{$prefix}-cascader;
         direction: rtl;
     }
 
-    .#{$module}-option-lists-rtl ul > li {
+    &.#{$module}-option-lists-rtl ul > li {
         padding-right: $spacing-cascader_option-paddingLeft;
         padding-left: auto;
     }
 
-    .#{$module}-option-lists-rtl .#{$module}-option-list {
+    &.#{$module}-option-lists-rtl .#{$module}-option-list {
         border-left: 0;
         border-right: $width-cascader_option_list-border solid $color-cascader_option_list-border-default;
 
@@ -93,7 +87,7 @@ $module: #{$prefix}-cascader;
         }
     }
 
-    .#{$module}-option-lists-rtl .#{$module}-option {
+    &.#{$module}-option-lists-rtl .#{$module}-option {
         &-icon {
             &-active,
             &-empty {
@@ -108,6 +102,8 @@ $module: #{$prefix}-cascader;
         }
 
         .#{$prefix}-icon-chevron_right {
+            margin-left: 0;
+            margin-right: $spacing-cascader_option_icon-marginLeft;
             transform: scaleX(-1);
         }
     }

package/cascader/variables.scss

@@ -53,7 +53,6 @@ $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时
 $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
 $spacing-cascader_selection_n-marginRight: $spacing-extra-tight; // 超出 maxTagCount 后，+n 的右外边距
-$spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按钮右侧外边距
 $spacing-cascader_option-icon-marginLeft: 8px; // 级联选择菜单项图标左侧外边距
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
@@ -93,7 +92,7 @@ $height-cascader_large: $height-control-large; // 级联选择触发器高度 -
 $width-cascader_hover-border: $width-cascader-border; // 级联选择触发器描边宽度 - 悬浮
 $width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
 $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
-$width-cascader-icon: 16px; // 级联选择图标尺寸
+$width-cascader-icon: 32px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸

package/chat/chat.scss

@@ -474,6 +474,10 @@ $module: #{$prefix}-chat;
         &-img {
             border-radius: $radius-chat_attachment_img;
             vertical-align: top;
+
+            img {
+                object-fit: cover;
+            }
         }
 
         a {

package/chat/variables.scss

@@ -11,7 +11,7 @@ $radius-chat_dropArea: 16px; // 拖拽上传区域圆角
 //color
 $color-chat_action_content-bg: var(--semi-color-bg-0); // 返回按钮/停止生成内容按钮背景颜色
 $color-chat_action_content-border: var(--semi-color-border); // 返回按钮/停止生成按钮描边颜色
-$color-chat_divider: var(--semi-color-text-2); // 分割线颜色
+$color-chat_divider: var(--semi-color-text-2); // 分割线文字颜色
 $color-chat_chatBox_title: var(--semi-color-text-0); //聊天框标题颜色
 $color-chat_chatBox_action_icon: var(--semi-color-text-2); // 聊天框操作区域按钮图标颜色
 $color-chat_chatBox_action_icon-hover: var(--semi-color-text-0); // 聊天框操作区域按钮图标hover颜色

package/checkbox/checkbox.scss

@@ -148,7 +148,7 @@ $module: #{$prefix}-checkbox;
             }
         }
 
-        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_enable {
             .#{$module}-inner-display {
                 background: $color-checkbox_cardType_inner-bg-hover;
             }
@@ -175,7 +175,7 @@ $module: #{$prefix}-checkbox;
             }
         }
 
-        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_enable {
             .#{$module}-inner-display {
                 background: $color-checkbox_cardType_inner-bg-active;
             }

package/form/foundation.ts

@@ -194,6 +194,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                         } else {
                             this.data.errors = result;
                             this._adapter.notifyChange(this.data);
+
                             this.injectErrorToField(result);
                             this._adapter.forceUpdate();
                             this._autoScroll(100);
@@ -212,6 +213,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                 this.data.errors = maybePromisedErrors;
                 this.injectErrorToField(maybePromisedErrors);
                 this._adapter.notifyChange(this.data);
+
                 this._adapter.forceUpdate();
                 this._autoScroll(100);
                 reject(maybePromisedErrors);
@@ -241,6 +243,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             Promise.all(promiseSet).then(() => {
                 // After the centralized verification is completed, trigger notify and forceUpdate once.
                 this._adapter.notifyChange(this.data);
+
                 this._adapter.forceUpdate();
                 const errors = this.getError();
                 if (this._isValid(targetFields)) {
@@ -493,12 +496,14 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         const notNotify = opts && opts.notNotify;
         const notUpdate = opts && opts.notUpdate;
         ObjectUtil.set(this.data.errors, field, error);
+
+        
         // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
-        // 集中validate时，引起的setError不需要触发notify，否则会过于频繁调用，有多少个field就调用了多少次
         if (!notNotify) {
             this._adapter.notifyChange(this.data);
         }
-
+        this._adapter.notifyErrorChange(this.data.errors, { [field]: error });
+        
         if (!notUpdate) {
             this._adapter.forceUpdate(callback);
         }

package/form/interface.ts

@@ -17,6 +17,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
+    notifyErrorChange: (errors: any, changedError: any) => void;
     notifyReset: () => void;
     getInitValues: () => Partial<Values>;
     getFormProps: (keys: undefined | string | Array<string>) => any;

package/input/input.scss

@@ -593,7 +593,6 @@ $module: #{$prefix}-input;
         align-content: center;
         flex-wrap: wrap;
 
-        // select与autocomplete的border-radius都是基于select
         .#{$prefix}-select,
         .#{$prefix}-tagInput,
         .#{$prefix}-cascader,
@@ -633,8 +632,8 @@ $module: #{$prefix}-input;
         .#{$prefix}-datepicker,
         .#{$prefix}-timepicker,
         .#{$prefix}-autocomplete {
-            border-radius: 0;
-
+            
+            .#{$module}-wrapper, 
             .#{$prefix}-datepicker-range-input {
                 border-radius: 0;
             }

package/lib/cjs/autoComplete/autoComplete.css

@@ -1,7 +1,7 @@
 /* shadow */
 /* sizing */
 /* spacing */
-.semi-autoComplete-option {
+.semi-autocomplete-option {
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -20,7 +20,7 @@
   box-sizing: border-box;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
-.semi-autoComplete-option-icon {
+.semi-autocomplete-option-icon {
   width: 12px;
   color: transparent;
   visibility: hidden;
@@ -29,51 +29,51 @@
   justify-content: center;
   align-content: center;
 }
-.semi-autoComplete-option-text {
+.semi-autocomplete-option-text {
   display: flex;
   flex-wrap: wrap;
   white-space: pre;
 }
-.semi-autoComplete-option-keyword {
+.semi-autocomplete-option-keyword {
   color: var(--semi-color-primary);
   background-color: inherit;
   font-weight: 600;
 }
-.semi-autoComplete-option:active {
+.semi-autocomplete-option:active {
   background-color: var(--semi-color-fill-1);
 }
-.semi-autoComplete-option-empty {
+.semi-autocomplete-option-empty {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   justify-content: center;
 }
-.semi-autoComplete-option-empty:hover {
+.semi-autocomplete-option-empty:hover {
   background-color: inherit;
 }
-.semi-autoComplete-option-empty:active {
+.semi-autocomplete-option-empty:active {
   background-color: inherit;
 }
-.semi-autoComplete-option-disabled {
+.semi-autocomplete-option-disabled {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-autoComplete-option-disabled:hover {
+.semi-autocomplete-option-disabled:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-autoComplete-option-selected {
+.semi-autocomplete-option-selected {
   font-weight: 600;
 }
-.semi-autoComplete-option-selected .semi-autoComplete-option-icon {
+.semi-autocomplete-option-selected .semi-autocomplete-option-icon {
   visibility: visible;
   color: var(--semi-color-text-2);
 }
-.semi-autoComplete-option-focused {
+.semi-autocomplete-option-focused {
   background-color: var(--semi-color-fill-0);
 }
-.semi-autoComplete-option:first-of-type {
+.semi-autocomplete-option:first-of-type {
   margin-top: 4px;
 }
-.semi-autoComplete-option:last-of-type {
+.semi-autocomplete-option:last-of-type {
   margin-bottom: 4px;
 }
 

package/lib/cjs/autoComplete/constants.js

@@ -8,8 +8,8 @@ var _constants = require("../tooltip/constants");
 var _constants2 = require("../base/constants");
 const cssClasses = exports.cssClasses = {
   PREFIX: `${_constants2.BASE_CLASS_PREFIX}-autocomplete`,
-  PREFIX_OPTION: `${_constants2.BASE_CLASS_PREFIX}-autoComplete-option`,
-  PREFIX_GROUP: `${_constants2.BASE_CLASS_PREFIX}-autoComplete-group`
+  PREFIX_OPTION: `${_constants2.BASE_CLASS_PREFIX}-autocomplete-option`,
+  PREFIX_GROUP: `${_constants2.BASE_CLASS_PREFIX}-autocomplete-group`
 };
 const strings = exports.strings = {
   SIZE: ['small', 'large', 'default'],

package/lib/cjs/autoComplete/foundation.d.ts

@@ -21,6 +21,7 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     updateInputValue: (inputValue: string | number) => void;
     toggleListVisible: (isShow: boolean) => void;
     updateOptionList: (optionList: Array<StateOptionItem>) => void;
+    updateScrollTop: (index: number) => void;
     updateSelection: (selection: Map<any, any>) => void;
     notifySearch: (inputValue: string) => void;
     notifyChange: (value: string | number) => void;

package/lib/cjs/autoComplete/foundation.js

@@ -356,6 +356,7 @@ class AutoCompleteFoundation extends _foundation.default {
       index = nearestActiveOption;
     }
     this._adapter.updateFocusIndex(index);
+    this._adapter.updateScrollTop(index);
   }
   _handleArrowKeyDown(offset) {
     const {

package/lib/cjs/autoComplete/option.scss

@@ -1,4 +1,4 @@
-$module: #{$prefix}-autoComplete;
+$module: #{$prefix}-autocomplete;
 $filterable: #{$module}-filterable;
 
 .#{$module}-option {

package/lib/cjs/cascader/cascader.css

@@ -182,9 +182,8 @@
   align-items: center;
   height: 100%;
   justify-content: center;
-  width: 16px;
+  width: 32px;
   color: var(--semi-color-text-2);
-  margin-right: 12px;
 }
 .semi-cascader-clearbtn:hover {
   color: var(--semi-color-primary-hover);
@@ -360,7 +359,7 @@
 .semi-cascader-option-lists .semi-cascader-option-icon {
   display: inline-flex;
   flex-shrink: 0;
-  width: 16px;
+  width: 32px;
   color: var(--semi-color-text-2);
 }
 .semi-cascader-option-lists .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-icon-empty {
@@ -370,13 +369,13 @@
   margin-left: 8px;
 }
 .semi-cascader-option-lists .semi-cascader-option-spin-icon {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
   line-height: 0;
 }
 .semi-cascader-option-lists .semi-cascader-option-spin-icon svg {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
 }
 .semi-cascader-option-lists .semi-cascader-option-label {
   display: flex;
@@ -442,12 +441,6 @@
 .semi-portal-rtl .semi-cascader {
   direction: rtl;
 }
-.semi-rtl .semi-cascader-arrow, .semi-rtl .semi-cascader-clearbtn,
-.semi-portal-rtl .semi-cascader-arrow,
-.semi-portal-rtl .semi-cascader-clearbtn {
-  margin-right: 0;
-  margin-left: 12px;
-}
 .semi-rtl .semi-cascader-inset-label,
 .semi-portal-rtl .semi-cascader-inset-label {
   margin-right: 12px;
@@ -500,25 +493,27 @@
 .semi-cascader-option-lists-rtl {
   direction: rtl;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl ul > li {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl ul > li {
   padding-right: 12px;
   padding-left: auto;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-list {
   border-left: 0;
   border-right: 1px solid var(--semi-color-fill-0);
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list:first-child {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-list:first-child {
   border-right: none;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-empty {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-icon-active, .semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-icon-empty {
   margin-right: 0;
   margin-left: 8px;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-flatten {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-flatten {
   padding-right: 0;
   padding-left: 64px;
 }
-.semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option .semi-icon-chevron_right {
+.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option .semi-icon-chevron_right {
+  margin-left: 0;
+  margin-right: 8px;
   transform: scaleX(-1);
 }

package/lib/cjs/cascader/cascader.scss

@@ -227,7 +227,6 @@ $module: #{$prefix}-cascader;
         justify-content: center;
         width: $width-cascader-icon;
         color: $color-cascader-icon-default;
-        margin-right: $spacing-cascader_clearBtn-marginRight;
     }
 
     &-clearbtn {

package/lib/cjs/cascader/rtl.scss

@@ -5,12 +5,6 @@ $module: #{$prefix}-cascader;
     .#{$module} {
         direction: rtl;
 
-        &-arrow,
-        &-clearbtn {
-            margin-right: 0;
-            margin-left: $spacing-cascader_clearBtn-marginRight;
-        }
-
         &-inset-label {
             margin-right:  $spacing-cascader_label-marginRight;
             margin-left:  $spacing-cascader_label-marginRight;
@@ -79,12 +73,12 @@ $module: #{$prefix}-cascader;
         direction: rtl;
     }
 
-    .#{$module}-option-lists-rtl ul > li {
+    &.#{$module}-option-lists-rtl ul > li {
         padding-right: $spacing-cascader_option-paddingLeft;
         padding-left: auto;
     }
 
-    .#{$module}-option-lists-rtl .#{$module}-option-list {
+    &.#{$module}-option-lists-rtl .#{$module}-option-list {
         border-left: 0;
         border-right: $width-cascader_option_list-border solid $color-cascader_option_list-border-default;
 
@@ -93,7 +87,7 @@ $module: #{$prefix}-cascader;
         }
     }
 
-    .#{$module}-option-lists-rtl .#{$module}-option {
+    &.#{$module}-option-lists-rtl .#{$module}-option {
         &-icon {
             &-active,
             &-empty {
@@ -108,6 +102,8 @@ $module: #{$prefix}-cascader;
         }
 
         .#{$prefix}-icon-chevron_right {
+            margin-left: 0;
+            margin-right: $spacing-cascader_option_icon-marginLeft;
             transform: scaleX(-1);
         }
     }

package/lib/cjs/cascader/variables.scss

@@ -53,7 +53,6 @@ $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时
 $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
 $spacing-cascader_selection_n-marginRight: $spacing-extra-tight; // 超出 maxTagCount 后，+n 的右外边距
-$spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按钮右侧外边距
 $spacing-cascader_option-icon-marginLeft: 8px; // 级联选择菜单项图标左侧外边距
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
@@ -93,7 +92,7 @@ $height-cascader_large: $height-control-large; // 级联选择触发器高度 -
 $width-cascader_hover-border: $width-cascader-border; // 级联选择触发器描边宽度 - 悬浮
 $width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
 $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
-$width-cascader-icon: 16px; // 级联选择图标尺寸
+$width-cascader-icon: 32px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸

package/lib/cjs/chat/chat.css

@@ -373,6 +373,9 @@
   border-radius: var(--semi-border-radius-medium);
   vertical-align: top;
 }
+.semi-chat-attachment-img img {
+  object-fit: cover;
+}
 .semi-chat-attachment a {
   text-decoration: none;
   color: inherit;

package/lib/cjs/chat/chat.scss

@@ -474,6 +474,10 @@ $module: #{$prefix}-chat;
         &-img {
             border-radius: $radius-chat_attachment_img;
             vertical-align: top;
+
+            img {
+                object-fit: cover;
+            }
         }
 
         a {

package/lib/cjs/chat/variables.scss

@@ -11,7 +11,7 @@ $radius-chat_dropArea: 16px; // 拖拽上传区域圆角
 //color
 $color-chat_action_content-bg: var(--semi-color-bg-0); // 返回按钮/停止生成内容按钮背景颜色
 $color-chat_action_content-border: var(--semi-color-border); // 返回按钮/停止生成按钮描边颜色
-$color-chat_divider: var(--semi-color-text-2); // 分割线颜色
+$color-chat_divider: var(--semi-color-text-2); // 分割线文字颜色
 $color-chat_chatBox_title: var(--semi-color-text-0); //聊天框标题颜色
 $color-chat_chatBox_action_icon: var(--semi-color-text-2); // 聊天框操作区域按钮图标颜色
 $color-chat_chatBox_action_icon-hover: var(--semi-color-text-0); // 聊天框操作区域按钮图标hover颜色

package/lib/cjs/checkbox/checkbox.css

@@ -105,7 +105,7 @@
   border-color: var(--semi-color-primary-hover);
   color: var(--semi-color-white);
 }
-.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display {
+.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
   background: var(--semi-color-white);
 }
 .semi-checkbox:active .semi-checkbox-inner-display {
@@ -122,7 +122,7 @@
   border-color: var(--semi-color-primary-active);
   color: var(--semi-color-white);
 }
-.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display {
+.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
   background: var(--semi-color-white);
 }
 .semi-checkbox-cardType {

package/lib/cjs/checkbox/checkbox.scss

@@ -148,7 +148,7 @@ $module: #{$prefix}-checkbox;
             }
         }
 
-        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_enable {
             .#{$module}-inner-display {
                 background: $color-checkbox_cardType_inner-bg-hover;
             }
@@ -175,7 +175,7 @@ $module: #{$prefix}-checkbox;
             }
         }
 
-        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_unDisabled {
+        &.#{$module}-cardType.#{$module}-unChecked.#{$module}-cardType_enable {
             .#{$module}-inner-display {
                 background: $color-checkbox_cardType_inner-bg-active;
             }

package/lib/cjs/form/foundation.js

@@ -461,10 +461,12 @@ class FormFoundation extends _foundation.default {
     const notUpdate = opts && opts.notUpdate;
     ObjectUtil.set(this.data.errors, field, error);
     // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
-    // 集中validate时，引起的setError不需要触发notify，否则会过于频繁调用，有多少个field就调用了多少次
     if (!notNotify) {
       this._adapter.notifyChange(this.data);
     }
+    this._adapter.notifyErrorChange(this.data.errors, {
+      [field]: error
+    });
     if (!notUpdate) {
       this._adapter.forceUpdate(callback);
     }

package/lib/cjs/form/interface.d.ts

@@ -11,6 +11,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
+    notifyErrorChange: (errors: any, changedError: any) => void;
     notifyReset: () => void;
     getInitValues: () => Partial<Values>;
     getFormProps: (keys: undefined | string | Array<string>) => any;

package/lib/cjs/input/input.css

@@ -491,15 +491,13 @@
 .semi-input-group .semi-select {
   overflow-y: visible;
 }
-.semi-input-group .semi-input-number,
-.semi-input-group .semi-datepicker,
-.semi-input-group .semi-timepicker,
-.semi-input-group .semi-autocomplete {
-  border-radius: 0;
-}
+.semi-input-group .semi-input-number .semi-input-wrapper,
 .semi-input-group .semi-input-number .semi-datepicker-range-input,
+.semi-input-group .semi-datepicker .semi-input-wrapper,
 .semi-input-group .semi-datepicker .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker .semi-input-wrapper,
 .semi-input-group .semi-timepicker .semi-datepicker-range-input,
+.semi-input-group .semi-autocomplete .semi-input-wrapper,
 .semi-input-group .semi-autocomplete .semi-datepicker-range-input {
   border-radius: 0;
 }

package/lib/cjs/input/input.scss

@@ -593,7 +593,6 @@ $module: #{$prefix}-input;
         align-content: center;
         flex-wrap: wrap;
 
-        // select与autocomplete的border-radius都是基于select
         .#{$prefix}-select,
         .#{$prefix}-tagInput,
         .#{$prefix}-cascader,
@@ -633,8 +632,8 @@ $module: #{$prefix}-input;
         .#{$prefix}-datepicker,
         .#{$prefix}-timepicker,
         .#{$prefix}-autocomplete {
-            border-radius: 0;
-
+            
+            .#{$module}-wrapper, 
             .#{$prefix}-datepicker-range-input {
                 border-radius: 0;
             }