@douyinfe/semi-foundation 2.16.1 → 2.17.0-beta.0

package/collapse/collapse.scss

@@ -61,6 +61,14 @@ $module: #{$prefix}-collapse;
             background-color: $color-collapse_header-bg-active;
         }
 
+        &-disabled {
+            color: $color-collapse_header-text-disabled;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
     }
 
     &-content {

package/collapse/variables.scss

@@ -1,5 +1,6 @@
 $color-collapse_item-border-default: var(--semi-color-border); // 分割线颜色
 $color-collapse_header-text-default: var(--semi-color-text-0); // 标题文字颜色
+$color-collapse_header-text-disabled: var( --semi-color-disabled-text); // 标题文字颜色 禁用
 $color-collapse_header-icon-default: var(--semi-color-text-2); // 展开箭头图标颜色
 $color-collapse_header-bg-hover: var(--semi-color-fill-0); // 菜单项背景颜色 - 悬浮
 $color-collapse_header-bg-active: var(--semi-color-fill-1); // 菜单项背景颜色 - 按下

package/datePicker/constants.ts

@@ -47,6 +47,7 @@ const strings = {
     DEFAULT_SEPARATOR_RANGE: ' ~ ',
     SIZE_SET: ['small', 'default', 'large'],
     TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
+    PRESET_POSITION_SET: ['left', 'right', 'top', 'bottom'],
     DENSITY_SET: ['default', 'compact'],
     PANEL_TYPE_LEFT: 'left',
     PANEL_TYPE_RIGHT: 'right',

package/datePicker/datePicker.scss

@@ -74,6 +74,14 @@ $module: #{$prefix}-datepicker;
             }
         }
 
+        // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
+        &[x-preset-position=left][x-insetinput=false],
+        &[x-preset-position=right][x-insetinput=false] { 
+            .#{$module}-month {
+                height: $height-datepicker_month_max;
+            }
+        }
+
         // 年月选择返回主面板
         .#{$module}-yearmonth-header {
             background: $color-datepicker_header-bg-default;
@@ -138,7 +146,8 @@ $module: #{$prefix}-datepicker;
     // 年月选择器
 
     &-panel-yam {
-        max-width: $width-datepicker_monthPanel_max;
+        // add left or right preset panel to panel yam, max-width will be bigger
+        max-width: $width-datepicker_monthPanel_max + $width-datepicker_presetPanel_left_and_right;
 
         .#{$prefix}-scrolllist {
             box-shadow: none;
@@ -560,30 +569,188 @@ $module: #{$prefix}-datepicker;
     }
 
     // 预设
-
     &-quick-control {
         box-sizing: border-box;
-        border-top: $width-datepicker-border solid $color-datepicker_border-bg-default;
-        display: flex;
-        align-items: center;
         background-color: $color-datepicker_quick-bg-default;
-        padding: $spacing-datepicker_quick_control_padding;
-        border-radius: 0 0 $width-datepicker_quick_control-borderRadius $width-datepicker_quick_control-borderRadius;
-        flex-wrap: wrap;
 
-        &-item {
-            margin-right: $spacing-datepicker_quick_control_item-marginRight;
+        &-header {
+            padding: $spacing-datepicker_quick_control_header-paddingTop $spacing-datepicker_quick_control_content-paddingX 0;
+            font-weight: $font-datepicker_preset_header-fontWeight;
+        }
+
+        &-left {
+            border-right: $width-datepicker-border solid $color-datepicker_border-bg-default;
+        }
+
+        &-right {
+            border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
+        }
+
+        &-top {
+            border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
+        }
+
+        &-bottom {
+            border-top: $width-datepicker-border solid $color-datepicker_border-bg-default;
+        }
+
+        &-left-content-wrapper,
+        &-right-content-wrapper {
+            max-width: $width-datepicker_presetPanel_left_and_right;
+            margin-top: $spacing-datepicker_quick_control_content-marginTop;
+            overflow-y: auto;
+        }
+
+        &-top-content-wrapper,
+        &-bottom-content-wrapper {
+            overflow-y: auto;
+            max-height: $height-datepicker_presetPanel_top_and_bottom_max;
+        }
+
+        &-left-content,
+        &-right-content {
+            box-sizing: border-box;
+            display: grid;
+            align-content: flex-start;
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5 , $width-datepicker_presetPanel_left_and_right_two_col_button));
+            padding: 0 $spacing-datepicker_quick_control_content-paddingX $spacing-datepicker_quick_control_content-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+                &-ellipsis {
+                    // ellipsis text content, $spacing-datepicker_quick_control_item-margin（default 8px）space left and right
+                    width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+        &-top-content,
+        &-bottom-content {
+            display: grid;
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            // 5px = $width-datepicker_presetPanel_scroll_bar / 3
+            grid-template-columns: repeat(3, minmax($width-datepicker_presetPanel_top_and_bottom_three_col_button - 5px, $width-datepicker_presetPanel_top_and_bottom_three_col_button));
+            align-content: flex-start;
+            padding: $spacing-datepicker_quick_control_item-margin $spacing-datepicker_quick_control_top_and_bottom_content-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button;
+                &-ellipsis {
+                    width: $width-datepicker_presetPanel_top_and_bottom_three_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+        &-top-range-content,
+        &-bottom-range-content {
+            box-sizing: border-box;
+            display: grid;
+            align-content: flex-start;
+            // 3px = $width-datepicker_presetPanel_scroll_bar / 5
+            grid-template-columns: repeat(5, minmax($width-datepicker_presetPanel_top_and_bottom_five_col_button - 3px, $width-datepicker_presetPanel_top_and_bottom_five_col_button));
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            padding: $spacing-datepicker_quick_control_item-margin $spacing-datepicker_quick_control_top_and_bottom_content-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button;
+                &-ellipsis {
+                    width: $width-datepicker_presetPanel_top_and_bottom_five_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+        &-top-month-content,
+        &-bottom-month-content {
+            box-sizing: border-box;
+            display: grid;
+            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_top_and_bottom_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5, $width-datepicker_presetPanel_top_and_bottom_two_col_button));
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            align-content: flex-start;
+            padding: $spacing-datepicker_quick_control_item-margin $spacing-datepicker_quick_control_top_and_bottom_content-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button;
+                &-ellipsis {
+                    max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+
+        &-month {
+            max-width: $width-datepicker_monthPanel_max;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content + $height-datepicker_inset_input;
+                }
+            }
+
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content;
+            }
+        }
+
+        &-date {
+            max-width: $width-datepicker_monthPanel_max;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
+            }
         }
 
-        &-month,
-        &-date,
         &-dateTime {
             max-width: $width-datepicker_monthPanel_max;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
+            }
+        }
+
+        &-dateRange {
+            max-width: $width-datepicker_monthPanel_max * 2;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
+            }
         }
 
-        &-dateRange,
         &-dateTimeRange {
             max-width: $width-datepicker_monthPanel_max * 2;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
+            }
         }
     }
 
@@ -879,6 +1046,15 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_yam_panel_compact;
         }
 
+        // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
+        &[x-preset-position=left][x-insetinput=false],
+        &[x-preset-position=right][x-insetinput=false] { 
+
+            .#{$module}-month {
+                height: $height-datepicker_month_max_compact;
+            }
+        }
+
         .#{$module}-yearmonth-header {
             box-sizing: border-box;
             height: $height-datepicker_yam_panel_header_compact;
@@ -1112,17 +1288,159 @@ $module: #{$prefix}-datepicker;
     }
 
     .#{$module}-quick-control {
-        padding: $spacing-datepicker_compact-padding;
 
-        &-month,
-        &-date,
+        &-header {
+            padding: $spacing-datepicker_quick_control_header_compact-paddingTop $spacing-datepicker_quick_control_left_and_right_content_compact-paddingX 0;
+            font-weight: $font-datepicker_preset_header-fontWeight;
+        }
+
+        &-left-content-wrapper,
+        &-right-content-wrapper {
+            margin-top: $spacing-datepicker_quick_control_content_compact-marginTop;
+        }
+
+        &-left-content,
+        &-right-content {
+            box-sizing: border-box;
+            display: grid;
+            align-content: flex-start;
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5, $width-datepicker_presetPanel_left_and_right_two_col_button));
+            padding: 0 $spacing-datepicker_quick_control_left_and_right_content_compact-paddingX $spacing-datepicker_quick_control_left_and_right_content_compact-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+                &-ellipsis {
+                    width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
+                    font-size: $fontSize-datepicker_insetInput_compact-fontSize;
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+        &-top-content,
+        &-bottom-content {
+            box-sizing: border-box;
+            display: grid;
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            grid-template-columns: repeat(3, minmax($width-datepicker_presetPanel_top_and_bottom_three_col_button_compact - 5px, $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact));
+            align-content: flex-start;
+            padding: $spacing-datepicker_quick_control_item-margin $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact;
+                &-ellipsis {
+                    width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
+                    font-size: $fontSize-datepicker_insetInput_compact-fontSize;
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+        &-top-range-content,
+        &-bottom-range-content {
+            display: grid;
+            grid-template-columns: repeat(5, minmax($width-datepicker_presetPanel_top_and_bottom_five_col_button_compact - 3px, $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact));
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            align-content: flex-start;
+            padding: $spacing-datepicker_quick_control_item-margin $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact;
+                &-ellipsis {
+                    width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
+                    font-size: $fontSize-datepicker_insetInput_compact-fontSize;
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+        &-top-month-content,
+        &-bottom-month-content {
+            display: grid;
+            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_top_and_bottom_two_col_button_compact -  $width-datepicker_presetPanel_scroll_bar * 0.5, $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact));
+            grid-gap: $spacing-datepicker_quick_control_item-margin;
+            align-content: flex-start;
+            padding: $spacing-datepicker_quick_control_item-margin $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX;
+
+            &-item {
+                max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact;
+                &-ellipsis {
+                    max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
+                    font-size: $fontSize-datepicker_insetInput_compact-fontSize;
+                    color: $color-datepicker_quick_button-text-default;
+                }
+            }
+        }
+
+        &-month {
+            max-width: $width-datepicker_panel_compact;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact + $height-datepicker_inset_input_compact;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+            }
+        }
+
+        &-date {
+            max-width: $width-datepicker_panel_compact;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+            }
+        }
+
         &-dateTime {
             max-width: $width-datepicker_panel_compact;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+            }
+        }
+
+        &-dateRange {
+            max-width: $width-datepicker_panel_compact * 2;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+            }
         }
 
-        &-dateRange,
         &-dateTimeRange {
             max-width: $width-datepicker_panel_compact * 2;
+            &[x-insetinput=true] {
+                .#{$module}-quick-control-right-content-wrapper,
+                .#{$module}-quick-control-left-content-wrapper {
+                    max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+                }
+            }
+            .#{$module}-quick-control-right-content-wrapper,
+            .#{$module}-quick-control-left-content-wrapper {
+                max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
+            }
         }
     }
 

package/datePicker/foundation.ts

@@ -22,6 +22,7 @@ import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFrom
 export type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export type InputSize = ArrayElement<typeof strings.SIZE_SET>;
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
+export type PresetPosition = ArrayElement<typeof strings.PRESET_POSITION_SET>;
 
 export type BaseValueType = string | number | Date;
 export type DayStatusType = {
@@ -141,6 +142,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     position?: Position;
     prefixCls?: string;
     presets?: PresetsType;
+    presetPosition?: PresetPosition;
     showClear?: boolean;
     size?: InputSize;
     spacing?: number;

package/datePicker/monthsGridFoundation.ts

@@ -20,7 +20,7 @@ import { includes, isSet, isEqual, isFunction } from 'lodash';
 import { zonedTimeToUtc } from '../utils/date-fns-extra';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
-import { BaseValueType, ValueType } from './foundation';
+import { BaseValueType, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 
@@ -91,6 +91,9 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
     insetInput: boolean;
+    presetPosition?: PresetPosition;
+    renderQuickControls?: React.ReactNode;
+    renderDateInput?: React.ReactNode;
 }
 
 export interface MonthInfo {

package/datePicker/rtl.scss

@@ -66,13 +66,13 @@ $module: #{$prefix}-datepicker;
             }
         }
 
-        &-quick-control {
+        // &-quick-control {
 
-            &-item {
-                margin-left: 0;
-                margin-right: $spacing-datepicker_quick_control_item-marginRight;
-            }
-        }
+        //     &-item {
+        //         margin-left: 0;
+        //         margin-right: $spacing-datepicker_quick_control_item-marginRight;
+        //     }
+        // }
 
         &-navigation,
         &-yam {

package/datePicker/variables.scss

@@ -15,6 +15,9 @@ $height-datepicker_yamShowing_min: 378px; // 日期时间选择器菜单最小
 $width-datepicker_yamShowing_min: 284px; // 选择器菜单最小宽度
 $height-datepicker_dateType_yamShowing_min: 325px; // 日期选择器菜单最小高度
 $width-datepicker_panel_yam_scrolllist_li_min: 64px; // 年月、时间滚动菜单项最小高度
+$width-datepicker_presetPanel_left_and_right: 200px; // 左右方位快捷选择面板宽度
+$height-datepicker_presetPanel_top_and_bottom_max: 100px; // 上下方位快捷选择面板最大高度
+$width-datepicker_presetPanel_scroll_bar: 15px; // 快捷选择面板scrollbar宽度
 
 $width-datepicker-border: $border-thickness-control; // 年月选择 header 底部分割线宽度
 $width-datepicker_yam_header-borderRadius: var(--semi-border-radius-medium); // 年月选择 header 按钮圆角
@@ -29,8 +32,8 @@ $width-datepicker_insetInput_date_type_wrapper: 284px; // 日期类型内嵌输
 $width-datepicker_insetInput_date_range_type_wrapper: $width-datepicker_insetInput_date_type_wrapper * 2; // 范围选择内嵌输入框宽度
 $width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输入框宽度
 $height-datepicker_insetInput_separator: 32px;
-$height-datepicker_month_grid_yearType_insetInput: 312px;
-$height-datepicker_month_grid_timeType_insetInput: 314px;
+$height-datepicker_month_grid_yearType_insetInput: 317px;
+$height-datepicker_month_grid_timeType_insetInput: 317px;
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) / 2; // 日期格子水平外边距
@@ -49,8 +52,11 @@ $spacing-datepicker_month-padding: $spacing-base;
 $spacing-datepicker_switch_datetime-paddingTop: $spacing-base; // 日期时间切换顶部内边距
 $spacing-datepicker_switch_datetime-paddingBottom: $spacing-base; // 日期时间切换底部内边距
 $spacing-datepicker_switch_text-paddingLeft: $spacing-tight; // 日期时间切换左侧内边距
-$spacing-datepicker_quick_control_item-marginRight: $spacing-tight; // 快捷操作按钮右侧外边距
-$spacing-datepicker_quick_control_padding: $spacing-base; // 快捷操作内边距
+$spacing-datepicker_quick_control_header-paddingTop: 18px;  // 快捷面板标题，上内边距
+$spacing-datepicker_quick_control_top_and_bottom_content-paddingX: $spacing-base-loose; // 上下方位快捷操作面板, 左右内边距，默认20px
+$spacing-datepicker_quick_control_content-paddingX: 12px; // 快捷面板内容，左右内边距
+$spacing-datepicker_quick_control_content-marginTop: 14px; // 快捷面板内容，上边距
+$spacing-datepicker_quick_control_item-margin: $spacing-tight; // 快捷操作面板按钮间距
 $spacing-datepicker_range_input-paddingX: 8px;
 $spacing-datepicker_range_input-paddingY: 3px;
 $spacing-datepicker_range_input_inputWrapper_input-paddingY: 2px;
@@ -77,6 +83,7 @@ $color-datepicker_list-bg-default: var(--semi-color-bg-3); // 日期选择器滚
 $color-datepicker_border-bg-default: var(--semi-color-border); // 日期选择器描边颜色
 $color-datepicker_footer-bg-default: var(--semi-color-fill-0); // 日期选择器确认选择 footer 背景颜色
 $color-datepicker_quick-bg-default: transparent; // 日期选择器快捷操作背景颜色
+$color-datepicker_quick_button-text-default: var(--semi-color-primary); // 日期选择器快捷操作按钮文字颜色
 
 $color-datepicker_day-text-default: var(--semi-color-text-2); // 日期时间切换文字颜色 - 默认
 $color-datepicker_day-text-hover: var(--semi-color-fill-1); // 日期时间切换文字颜色 - 悬浮
@@ -138,6 +145,7 @@ $color-datepicker_insetInput_separator: var(--semi-color-text-3);
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;
+$font-datepicker_preset_header-fontWeight: 600;
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontSize: 14px;
 $font-datepicker_range_input_prefix_suffix_clearbtn-lineHeight: 20px;
 $font-datepicker_range_input_large-fontSize: 16px;
@@ -153,8 +161,8 @@ $width-datepicker_month_compact: $width-datepicker_day_compact * 7 + $spacing-da
 $width-datepicker_nav_compact: 24px;
 $width-datepicker_panel_compact: 216px;
 $height-datepicker_switch_compact: 32px;
-$height-datepicker_tpk_compact: 236px;
-$height-datepicker_yam_panel_compact: 284px;
+$height-datepicker_tpk_compact: 256px;
+$height-datepicker_yam_panel_compact: 256px;
 $height-datepicker_yam_li_compact: 32px;
 $height-datepicker_yam_panel_header_compact: 48px;
 $radius-datepicker_range_input_inputWrapper: var(--semi-border-radius-small);
@@ -193,9 +201,53 @@ $spacing-datepicker_insetInput_wrapper_compact-paddingY: 8px;
 $spacing-datepicker_insetInput_wrapper_compact-paddingX: 8px;
 $spacing-datepicker_insetInput_wrapper_compact-paddingBottom: 0;
 $spacing-datepicker_insetInput_wrapper_rangeType_compact-paddingTop: 0;
+$spacing-datepicker_quick_control_header_compact-paddingTop: 16px;  // compact, 快捷面板标题，上内边距
+$spacing-datepicker_quick_control_content_compact-marginTop: 12px; // compact, 快捷面板内容，上边距
+$spacing-datepicker_quick_control_left_and_right_content_compact-paddingX: 12px; // compact，左右方位，快捷面板内容，左右内边距
+$spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX: 10px; // compact，上下方位，快捷面板内容，左右内边距
 
 // Radius
 $radius-datepicker_range_input: var(--semi-border-radius-small);
 
 // Other
 $transition-datepicker_range_input: background-color .16s ease-in-out;
+
+// preset cacl
+$width-datepicker_presetPanel_left_and_right_content: $width-datepicker_presetPanel_left_and_right - $spacing-datepicker_quick_control_content-paddingX * 2; // 左右方位快捷选择面板，内容宽度
+$width-datepicker_presetPanel_top_and_bottom_content_date: $width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（284 - 40）px
+$width-datepicker_presetPanel_top_and_bottom_content_range: ($width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认528px
+$width-datepicker_presetPanel_top_and_bottom_content_month: 194px - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // month下，上下方位快捷选择内容面板宽度， 默认154px
+
+$height-datepicker_month_max: $width-datepicker_day * 7 + 1px; // 年月面板最大高度, 最多6 + 1行，再加上一个border宽度, 默认253px
+$height-datepicker_month_max_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-paddingTop + $spacing-datepicker_weeks_compact-padding + $spacing-datepicker_weekday_compact-paddingBottom; // 年月面板最大高度, 最多6 + 1行，再加上padding，默认220px
+$height-datepicker_date_panel: $height-datepicker_month_max + $spacing-datepicker_month-padding + $width-datepicker_nav + $spacing-datepicker_navigation-paddingY * 2; // date/dateRange，面板渲染最大高度，默认325px
+$height-datepicker_date_time_panel: $height-datepicker_date_panel + $height-datepicker_switch - 1px; // dateTime/dateTImeRange 面板渲染最大高度. 默认378px
+$height-datepicker_presetPanel_left_and_right_except_content: 20px + $spacing-datepicker_quick_control_header-paddingTop + $spacing-datepicker_quick_control_content-marginTop; // 除去content以外的高度，默认52px
+
+// compact
+$width-datepicker_presetPanel_top_and_bottom_content_date_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（216 - 20）px
+$width-datepicker_presetPanel_top_and_bottom_content_range_compact: ($width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认412px
+$width-datepicker_presetPanel_top_and_bottom_content_month_compact: 194px - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX  * 2; // month下，上下方位快捷选择内容面板宽度， 默认174px
+
+$height-datepicker_date_panel_compact: $height-datepicker_month_max_compact + $width-datepicker_nav_compact + $spacing-datepicker_nav_compact-padding; // compact，date/dateRange，面板渲染最大高度，默认256px
+$height-datepicker_date_time_panel_compact: $height-datepicker_date_panel_compact + $height-datepicker_switch_compact; // compact，dateTime/dateTImeRange，面板渲染最大高度，默认288px
+$height-datepicker_presetPanel_left_and_right_except_content_compact: 20px + $spacing-datepicker_quick_control_header_compact-paddingTop + $spacing-datepicker_quick_control_content_compact-marginTop; // compact，除去content以外的高度，默认48px
+
+$width-datepicker_presetPanel_left_and_right_two_col_button: ($width-datepicker_presetPanel_left_and_right_content - $spacing-datepicker_quick_control_item-margin) * 0.5; // 左右方位快捷选择面板，固定两列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_three_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_date - $spacing-datepicker_quick_control_item-margin * 2) / 3; // 上下方位快捷选择面板，固定三列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_five_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_range - $spacing-datepicker_quick_control_item-margin * 4) * 0.2; // 上下方位快捷选择面板，固定五列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_two_col_button:($width-datepicker_presetPanel_top_and_bottom_content_month - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
+
+// compact
+$width-datepicker_presetPanel_top_and_bottom_three_col_button_compact: ($width-datepicker_presetPanel_top_and_bottom_content_date_compact - $spacing-datepicker_quick_control_item-margin * 2) / 3; // 上下方位快捷选择面板，固定三列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_five_col_button_compact: ($width-datepicker_presetPanel_top_and_bottom_content_range_compact - $spacing-datepicker_quick_control_item-margin * 4) * 0.2; // 上下方位快捷选择面板，固定五列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_two_col_button_compact: ($width-datepicker_presetPanel_top_and_bottom_content_month_compact - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
+
+// insetinput
+$height-datepicker_inset_input: 32px + $spacing-datepicker_insetInput_wrapper-paddingY; // 默认尺寸，insetInput高度
+$height-datepicker_preset_panel_inset_input: $height-datepicker_month_max + $spacing-datepicker_month-padding + $width-datepicker_nav + $spacing-datepicker_navigation_insetInput-paddingY * 2 + $height-datepicker_inset_input; // inset_input下，非month面板渲染最大高度，默认361px
+
+
+// insetinput compact
+$height-datepicker_inset_input_compact: 28px + $spacing-datepicker_insetInput_wrapper_compact-paddingY; // compact，insetInput高度, 默认36px
+$height-datepicker_preset_panel_inset_input_compact: $height-datepicker_month_max_compact + $width-datepicker_nav_compact + $spacing-datepicker_insetInput_wrapper_compact-paddingY * 2 + $height-datepicker_inset_input_compact; // inset_input下，非month面板渲染最大高度，默认296px

package/datePicker/yearAndMonthFoundation.ts

@@ -1,4 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { PresetPosition } from './foundation';
 
 export interface YearAndMonthFoundationProps {
     currentYear?: number;
@@ -12,6 +13,9 @@ export interface YearAndMonthFoundationProps {
     noBackBtn?: boolean;
     disabledDate?: (date: Date) => boolean;
     density?: string;
+    presetPosition?: PresetPosition;
+    renderQuickControls?: React.ReactNode;
+    renderDateInput?: React.ReactNode;
 }
 
 export interface YearAndMonthFoundationState {

package/lib/cjs/collapse/collapse.css

@@ -50,6 +50,12 @@
 .semi-collapse-header:active {
   background-color: var(--semi-color-fill-1);
 }
+.semi-collapse-header-disabled {
+  color: var(--semi-color-disabled-text);
+}
+.semi-collapse-header-disabled:hover {
+  background-color: transparent;
+}
 .semi-collapse-content {
   padding: 4px 16px 8px 16px;
   color: var(--semi-color-text-1);

package/lib/cjs/collapse/collapse.scss

@@ -61,6 +61,14 @@ $module: #{$prefix}-collapse;
             background-color: $color-collapse_header-bg-active;
         }
 
+        &-disabled {
+            color: $color-collapse_header-text-disabled;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
     }
 
     &-content {