@douyinfe/semi-foundation 2.22.3 → 2.23.0-alpha.2

package/cascader/cascader.scss

@@ -408,6 +408,21 @@ $module: #{$prefix}-cascader;
             &-empty {
                 margin-right: $spacing-cascader_empty_icon-marginRight;
             }
+
+            &-left {
+                margin-left: $spacing-cascader_option-icon-marginLeft;
+            }
+        }
+
+        &-spin-icon {
+            width: $width-cascader-icon;
+            height: $width-cascader-icon;
+            line-height: 0;
+
+            & svg {
+                width: $width-cascader-icon;
+                height: $width-cascader-icon;
+            }
         }
 
         &-label {

package/cascader/variables.scss

@@ -51,6 +51,7 @@ $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级
 $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 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色

package/checkbox/variables.scss

@@ -52,7 +52,7 @@ $spacing-checkbox_extra-marginTop: $spacing-extra-tight; // extra 副标题顶
 $spacing-checkbox_cardType-paddingX: $spacing-base; // 卡片类型复选框的水平内间距
 $spacing-checkbox_cardType-paddingY: $spacing-base-tight; // 卡片类型复选框的垂直内间距
 $spacing-checkbox_cardType_inner-marginRight: $spacing-tight; // 卡片类型复选框 inner 的右外边距
-$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片类型复选框的垂直向下外边距
+$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片样式复选框的下间距
 
 $color-checkbox_extra-text-default: var(--semi-color-text-2); // extra 副标题文字颜色
 

package/form/form.scss

@@ -88,9 +88,7 @@ $rating: #{$prefix}-rating;
     }
 
     &-field-label {
-        // padding-left: $spacing-base;
         box-sizing: border-box;
-        padding-right: $spacing-form_label-paddingRight;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
@@ -146,6 +144,7 @@ $rating: #{$prefix}-rating;
         @include font-size-regular;
         display: flex;
         align-items: center;
+        // TODO help text margin token?
         margin-top: $spacing-form_message-marginTop;
         .#{$prefix}-icon-alert_triangle {
             color: $color-form_alertIcon-icon-default;
@@ -204,8 +203,8 @@ $rating: #{$prefix}-rating;
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;
-            margin-top: $spacing-form_label_small-paddingTop;
-            margin-bottom: $spacing-form_label_small-paddingTop;
+            margin-top: $spacing-form_switch_rating_marginY;
+            margin-bottom: $spacing-form_switch_rating_marginY;
         }
     }
 

package/form/interface.ts

@@ -9,24 +9,28 @@ export type FieldValidateTriggerType = BasicTriggerType | Array<BasicTriggerType
 
 export type CommonFieldError = boolean | string | Array<any> | undefined | unknown;
 
-export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+export type BasicFieldError = Array<any>;
+
+export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any>, Values extends object = any> extends DefaultAdapter<P, S> {
     cloneDeep: (val: any, ...rest: any[]) => any;
     notifySubmit: (values: any) => void;
-    notifySubmitFail: (errors: Record<string, any>, values: any) => void;
+    notifySubmitFail: (errors: Record<keyof Values, BasicFieldError>, values: Partial<Values>) => void;
     forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
     notifyReset: () => void;
-    getInitValues: () => Record<string, any>;
+    getInitValues: () => Partial<Values>;
     getFormProps: (keys: undefined | string | Array<string>) => any;
     getAllErrorDOM: () => NodeList;
     getFieldDOM: (field: string) => Node;
     initFormId: () => void
 }
 
+export type AllErrors<T> = T extends Record<string, any> ? { [K in keyof T]?: string } : Record<string, any>;
+
 export interface FormState<T extends Record<string, any> = any> {
     values?: T extends Record<string, any> ? T : Record<string, any>;
-    errors?: T extends Record<string, any> ? { [K in keyof T]?: string } : Record<string, any>;
+    errors?: AllErrors<T>;
     touched?: T extends Record<string, any> ? { [K in keyof T]?: boolean } : Record<string, any>
 }
 export interface setValuesConfig {

package/form/rtl.scss

@@ -33,7 +33,6 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
-            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {

package/form/variables.scss

@@ -1,45 +1,48 @@
-$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 水平布局表单标题顶部内边距
-$spacing-form_label_small-paddingTop: ($height-control-default - 24px) * 0.5; // 水平布局 小尺寸表单标题顶部内边距
-
-$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单标题右侧内边距
+// form field
+$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单项右侧内边距
 $spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距
-
-$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单顶部内边距
-$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单底部内边距
-
+$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 表单项顶部内边距（垂直布局）
+$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 表单项底部内边距（垂直布局）
 $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距
 $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
-$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
-$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
-$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
 
-$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距
-$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距
-$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距
-$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距
-$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距
-$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距
-$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 垂直布局表单标题顶部内边距
-$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 垂直布局表单标题底部内边距
-$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 居中
-$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单额外信息辅助文字底部外边距 - 居中
-$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 底部
-$spacing-form_statusIcon-marginRight: $spacing-extra-tight;  // 表单校验图标右侧外边距
+// form label
+$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
+$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
+$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
+$spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
+$spacing-form_label_posLeft-marginBottom: 0; // 表单项左侧标签底部外边距
+$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 表单项顶部标签顶部边距
+$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 表单项顶部标签底部边距
+$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距
+$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单项标签 图标/可选标记 底部外边距 - 居中
+$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距 - 底部
+
+// form switch rating需要额外margin以对齐高度 32px
+$spacing-form_switch_rating_marginY: ($height-control-default - 24px) * 0.5; // Switch / Rating 表单项顶部内边距（水平布局）
 
-$spacing-form_message-marginTop: $spacing-extra-tight; // 表单校验信息顶部外边距
+$color-form_requiredMark_disabled-text-default: var(--semi-color-danger);  // 禁用表单项必填标记颜色
+$color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标签文字颜色
+$font-form_label-fontWeight: $font-weight-bold; // 表单项标签字重
 
-$font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
+$color-form_label-text-default: var(--semi-color-text-0); // 表单项标签文字颜色
+$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单项标签可选标记颜色
+$color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单项标签图标颜色
+$color-form_requiredMark-text-default: var(--semi-color-danger); // 必填标记颜色
 $font-form_requiredMark-fontWeight: $font-weight-bold; // 表单必填标识字重
 
-$color-form_label-text-default: var(--semi-color-text-0); // 表单标题文字颜色
-$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单可选标记文字颜色
-$color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单额外信息辅助文字颜色
+// form errormessage
+$color-form_message_error-text-default: var(--semi-color-danger); // 错误提示颜色
+$color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告图标颜色
+$spacing-form_statusIcon-marginRight: $spacing-extra-tight;  // 表单校验状态图标右侧外边距
+$spacing-form_message-marginTop: $spacing-extra-tight; // 表单错误信息、辅助文字顶部外边距
 
-$color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色
-$color-form_requiredMark-text-default: var(--semi-color-danger); // 必填标记颜色
-$color-form_requiredMark_disabled-text-default: var(--semi-color-danger);  // 禁用表单项必填标记颜色
-$color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告表单项图标颜色
-$color-form_message_error-text-default: var(--semi-color-danger); // 错误表单项图标颜色
+// form section
 $color-form_section-text-default: var(--semi-color-text-0); // 表单分组标题文字颜色
-$color-form_section-border-default: var(--semi-color-border); // 表单分组描边颜色
-$width-form_section-border: $border-thickness-control; // 表单分组描边宽度
+$color-form_section-border-default: var(--semi-color-border); // 表单分组标题底部描边颜色
+$width-form_section-border: $border-thickness-control; // 表单分组标题底部描边宽度
+$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
+$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
+$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+

package/image/imageFoundation.ts

@@ -50,7 +50,7 @@ export default class ImageFoundation<P = Record<string, any>, S = Record<string,
         if (isObject(preview)) {
             const { onVisibleChange } = preview as any;
             onVisibleChange && onVisibleChange(newVisible);
-            if (!("visible" in this.getProps())) {
+            if (!("visible" in preview)) {
                 this.setState({
                     previewVisible: newVisible,
                 } as any);

package/image/previewFooterFoundation.ts

@@ -20,9 +20,9 @@ export default class PreviewFooterFoundation<P = Record<string, any>, S = Record
     handleValueChange = (value: number): void => {
         const { onZoomIn, onZoomOut, zoom } = this.getProps();
         if (value > zoom) {
-            onZoomIn(value / 100);
+            onZoomIn(Number((value / 100).toFixed(2)));
         } else {
-            onZoomOut(value / 100);
+            onZoomOut(Number((value / 100).toFixed(2)));
         }
         this._adapter.setStartMouseOffset(value);
     };

package/image/previewImageFoundation.ts

@@ -257,7 +257,6 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             }
             if (canDragVertical) {
                 newY = newY > 0 ? 0 : newY < extremeTop ? extremeTop : newY;
-
             }
             const _offset = {
                 x: newX,

package/image/previewInnerFoundation.ts

@@ -4,7 +4,7 @@ import { getPreloadImagArr, downloadImage, isTargetEmit } from "./utils";
 
 export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
-    notifyChange: (index: number) => void;
+    notifyChange: (index: number, direction: string) => void;
     notifyZoom: (zoom: number, increase: boolean) => void;
     notifyClose: () => void;
     notifyVisibleChange: (visible: boolean) => void;
@@ -119,7 +119,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
                 currentIndex: newIndex,
             } as any);
         }
-        this._adapter.notifyChange(newIndex);
+        this._adapter.notifyChange(newIndex, direction);
         this.setState({
             direction,
             rotation: 0,

package/lib/cjs/cascader/cascader.css

@@ -337,6 +337,18 @@
 .semi-cascader-option-lists .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-icon-empty {
   margin-right: 8px;
 }
+.semi-cascader-option-lists .semi-cascader-option-icon-left {
+  margin-left: 8px;
+}
+.semi-cascader-option-lists .semi-cascader-option-spin-icon {
+  width: 16px;
+  height: 16px;
+  line-height: 0;
+}
+.semi-cascader-option-lists .semi-cascader-option-spin-icon svg {
+  width: 16px;
+  height: 16px;
+}
 .semi-cascader-option-lists .semi-cascader-option-label {
   display: flex;
   align-items: center;

package/lib/cjs/cascader/cascader.scss

@@ -408,6 +408,21 @@ $module: #{$prefix}-cascader;
             &-empty {
                 margin-right: $spacing-cascader_empty_icon-marginRight;
             }
+
+            &-left {
+                margin-left: $spacing-cascader_option-icon-marginLeft;
+            }
+        }
+
+        &-spin-icon {
+            width: $width-cascader-icon;
+            height: $width-cascader-icon;
+            line-height: 0;
+
+            & svg {
+                width: $width-cascader-icon;
+                height: $width-cascader-icon;
+            }
         }
 
         &-label {

package/lib/cjs/cascader/variables.scss

@@ -51,6 +51,7 @@ $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级
 $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 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色

package/lib/cjs/checkbox/variables.scss

@@ -52,7 +52,7 @@ $spacing-checkbox_extra-marginTop: $spacing-extra-tight; // extra 副标题顶
 $spacing-checkbox_cardType-paddingX: $spacing-base; // 卡片类型复选框的水平内间距
 $spacing-checkbox_cardType-paddingY: $spacing-base-tight; // 卡片类型复选框的垂直内间距
 $spacing-checkbox_cardType_inner-marginRight: $spacing-tight; // 卡片类型复选框 inner 的右外边距
-$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片类型复选框的垂直向下外边距
+$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片样式复选框的下间距
 
 $color-checkbox_extra-text-default: var(--semi-color-text-2); // extra 副标题文字颜色
 

package/lib/cjs/form/form.css

@@ -45,7 +45,6 @@
 }
 .semi-form-field-label {
   box-sizing: border-box;
-  padding-right: 16px;
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
@@ -232,7 +231,6 @@
 .semi-rtl .semi-form-field-label,
 .semi-portal-rtl .semi-form-field-label {
   padding-right: 0;
-  padding-left: 16px;
 }
 .semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra,
 .semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra {

package/lib/cjs/form/form.scss

@@ -88,9 +88,7 @@ $rating: #{$prefix}-rating;
     }
 
     &-field-label {
-        // padding-left: $spacing-base;
         box-sizing: border-box;
-        padding-right: $spacing-form_label-paddingRight;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
@@ -146,6 +144,7 @@ $rating: #{$prefix}-rating;
         @include font-size-regular;
         display: flex;
         align-items: center;
+        // TODO help text margin token?
         margin-top: $spacing-form_message-marginTop;
         .#{$prefix}-icon-alert_triangle {
             color: $color-form_alertIcon-icon-default;
@@ -204,8 +203,8 @@ $rating: #{$prefix}-rating;
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;
-            margin-top: $spacing-form_label_small-paddingTop;
-            margin-bottom: $spacing-form_label_small-paddingTop;
+            margin-top: $spacing-form_switch_rating_marginY;
+            margin-bottom: $spacing-form_switch_rating_marginY;
         }
     }
 

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

@@ -3,25 +3,27 @@ import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
 export declare type BasicTriggerType = 'blur' | 'change' | 'custom' | 'mount';
 export declare type FieldValidateTriggerType = BasicTriggerType | Array<BasicTriggerType>;
 export declare type CommonFieldError = boolean | string | Array<any> | undefined | unknown;
-export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+export declare type BasicFieldError = Array<any>;
+export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any>, Values extends object = any> extends DefaultAdapter<P, S> {
     cloneDeep: (val: any, ...rest: any[]) => any;
     notifySubmit: (values: any) => void;
-    notifySubmitFail: (errors: Record<string, any>, values: any) => void;
+    notifySubmitFail: (errors: Record<keyof Values, BasicFieldError>, values: Partial<Values>) => void;
     forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
     notifyReset: () => void;
-    getInitValues: () => Record<string, any>;
+    getInitValues: () => Partial<Values>;
     getFormProps: (keys: undefined | string | Array<string>) => any;
     getAllErrorDOM: () => NodeList;
     getFieldDOM: (field: string) => Node;
     initFormId: () => void;
 }
+export declare type AllErrors<T> = T extends Record<string, any> ? {
+    [K in keyof T]?: string;
+} : Record<string, any>;
 export interface FormState<T extends Record<string, any> = any> {
     values?: T extends Record<string, any> ? T : Record<string, any>;
-    errors?: T extends Record<string, any> ? {
-        [K in keyof T]?: string;
-    } : Record<string, any>;
+    errors?: AllErrors<T>;
     touched?: T extends Record<string, any> ? {
         [K in keyof T]?: boolean;
     } : Record<string, any>;

package/lib/cjs/form/rtl.scss

@@ -33,7 +33,6 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
-            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {

package/lib/cjs/form/variables.scss

@@ -1,45 +1,48 @@
-$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 水平布局表单标题顶部内边距
-$spacing-form_label_small-paddingTop: ($height-control-default - 24px) * 0.5; // 水平布局 小尺寸表单标题顶部内边距
-
-$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单标题右侧内边距
+// form field
+$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单项右侧内边距
 $spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距
-
-$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单顶部内边距
-$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单底部内边距
-
+$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 表单项顶部内边距（垂直布局）
+$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 表单项底部内边距（垂直布局）
 $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距
 $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
-$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
-$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
-$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
 
-$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距
-$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距
-$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距
-$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距
-$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距
-$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距
-$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 垂直布局表单标题顶部内边距
-$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 垂直布局表单标题底部内边距
-$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 居中
-$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单额外信息辅助文字底部外边距 - 居中
-$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 底部
-$spacing-form_statusIcon-marginRight: $spacing-extra-tight;  // 表单校验图标右侧外边距
+// form label
+$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
+$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
+$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
+$spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
+$spacing-form_label_posLeft-marginBottom: 0; // 表单项左侧标签底部外边距
+$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 表单项顶部标签顶部边距
+$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 表单项顶部标签底部边距
+$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距
+$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单项标签 图标/可选标记 底部外边距 - 居中
+$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距 - 底部
+
+// form switch rating需要额外margin以对齐高度 32px
+$spacing-form_switch_rating_marginY: ($height-control-default - 24px) * 0.5; // Switch / Rating 表单项顶部内边距（水平布局）
 
-$spacing-form_message-marginTop: $spacing-extra-tight; // 表单校验信息顶部外边距
+$color-form_requiredMark_disabled-text-default: var(--semi-color-danger);  // 禁用表单项必填标记颜色
+$color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标签文字颜色
+$font-form_label-fontWeight: $font-weight-bold; // 表单项标签字重
 
-$font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
+$color-form_label-text-default: var(--semi-color-text-0); // 表单项标签文字颜色
+$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单项标签可选标记颜色
+$color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单项标签图标颜色
+$color-form_requiredMark-text-default: var(--semi-color-danger); // 必填标记颜色
 $font-form_requiredMark-fontWeight: $font-weight-bold; // 表单必填标识字重
 
-$color-form_label-text-default: var(--semi-color-text-0); // 表单标题文字颜色
-$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单可选标记文字颜色
-$color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单额外信息辅助文字颜色
+// form errormessage
+$color-form_message_error-text-default: var(--semi-color-danger); // 错误提示颜色
+$color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告图标颜色
+$spacing-form_statusIcon-marginRight: $spacing-extra-tight;  // 表单校验状态图标右侧外边距
+$spacing-form_message-marginTop: $spacing-extra-tight; // 表单错误信息、辅助文字顶部外边距
 
-$color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色
-$color-form_requiredMark-text-default: var(--semi-color-danger); // 必填标记颜色
-$color-form_requiredMark_disabled-text-default: var(--semi-color-danger);  // 禁用表单项必填标记颜色
-$color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告表单项图标颜色
-$color-form_message_error-text-default: var(--semi-color-danger); // 错误表单项图标颜色
+// form section
 $color-form_section-text-default: var(--semi-color-text-0); // 表单分组标题文字颜色
-$color-form_section-border-default: var(--semi-color-border); // 表单分组描边颜色
-$width-form_section-border: $border-thickness-control; // 表单分组描边宽度
+$color-form_section-border-default: var(--semi-color-border); // 表单分组标题底部描边颜色
+$width-form_section-border: $border-thickness-control; // 表单分组标题底部描边宽度
+$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
+$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
+$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+

package/lib/cjs/image/imageFoundation.js

@@ -71,7 +71,7 @@ class ImageFoundation extends _foundation.default {
         } = preview;
         onVisibleChange && onVisibleChange(newVisible);
 
-        if (!("visible" in this.getProps())) {
+        if (!("visible" in preview)) {
           this.setState({
             previewVisible: newVisible
           });

package/lib/cjs/image/previewFooterFoundation.js

@@ -39,9 +39,9 @@ class PreviewFooterFoundation extends _foundation.default {
       } = this.getProps();
 
       if (value > zoom) {
-        onZoomIn(value / 100);
+        onZoomIn(Number((value / 100).toFixed(2)));
       } else {
-        onZoomOut(value / 100);
+        onZoomOut(Number((value / 100).toFixed(2)));
       }
 
       this._adapter.setStartMouseOffset(value);

package/lib/cjs/image/previewInnerFoundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
-    notifyChange: (index: number) => void;
+    notifyChange: (index: number, direction: string) => void;
     notifyZoom: (zoom: number, increase: boolean) => void;
     notifyClose: () => void;
     notifyVisibleChange: (visible: boolean) => void;

package/lib/cjs/image/previewInnerFoundation.js

@@ -133,7 +133,7 @@ class PreviewInnerFoundation extends _foundation.default {
         });
       }
 
-      this._adapter.notifyChange(newIndex);
+      this._adapter.notifyChange(newIndex, direction);
 
       this.setState({
         direction,

package/lib/cjs/navigation/navigation.css

@@ -87,6 +87,12 @@
   align-items: center;
   justify-content: flex-start;
 }
+.semi-navigation-item-has-link {
+  padding: 0;
+}
+.semi-navigation-item-has-link .semi-navigation-item-link {
+  padding: 8px 12px;
+}
 .semi-navigation-item-sub {
   padding: 0;
 }

package/lib/cjs/navigation/navigation.scss

@@ -113,6 +113,15 @@ $module: #{$prefix}-navigation;
         justify-content: flex-start;
     }
 
+    // when item has link, add the padding to link instead of item
+    &-item-has-link {
+        padding: 0;
+
+        .#{$module}-item-link {
+            padding: $spacing-navigation_item-paddingY $spacing-navigation_item-paddingX;
+        }
+    }
+
     &-item-sub {
         padding: $spacing-navigation_item_sub-padding;
     }

package/lib/cjs/table/constants.d.ts

@@ -73,5 +73,6 @@ declare const numbers: {
     readonly DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: number;
     readonly DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT: number;
     readonly DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT: number;
+    readonly DEFAULT_EMPTYSLOT_HEIGHT: 52;
 };
 export { cssClasses, strings, numbers };

package/lib/cjs/table/constants.js

@@ -66,7 +66,8 @@ const DEFAULT_CELL_MIDDLE_PADDING_TOP = 12;
 const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
 const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
 const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
-const DEFAULT_CELL_LINE_HEIGHT = 20; // normal size
+const DEFAULT_CELL_LINE_HEIGHT = 20;
+const DEFAULT_EMPTYSLOT_HEIGHT = 52; // normal size
 
 const DEFAULT_VIRTUALIZED_ROW_HEIGHT = DEFAULT_CELL_LINE_HEIGHT + DEFAULT_CELL_BORDER_WITH_BOTTOM + DEFAULT_CELL_BORDER_WITH_TOP + DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM;
 const DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT = DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM + DEFAULT_CELL_BORDER_WITH_BOTTOM; // middle  size
@@ -102,6 +103,7 @@ const numbers = {
   DEFAULT_VIRTUALIZED_ROW_MIDDLE_MIN_HEIGHT,
   DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
   DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
-  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT
+  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
+  DEFAULT_EMPTYSLOT_HEIGHT
 };
 exports.numbers = numbers;

package/lib/cjs/table/table.css

@@ -394,7 +394,8 @@
   border-right: 1px solid var(--semi-color-border);
 }
 .semi-table-placeholder {
-  position: relative;
+  position: sticky;
+  left: 0px;
   z-index: 1;
   padding: 16px 12px;
   color: var(--semi-color-text-2);

package/lib/cjs/table/table.scss

@@ -481,7 +481,8 @@ $module: #{$prefix}-table;
     }
 
     &-placeholder {
-        position: relative;
+        position: sticky;
+        left: 0px;
         z-index: 1;
         padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
         color: $color-table_placeholder-text-default;