@douyinfe/semi-foundation 2.1.3 → 2.2.0-beta.0

package/lib/cjs/upload/upload.css

@@ -73,6 +73,8 @@
   display: flex;
   flex-wrap: wrap;
   flex-shrink: 0;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 .semi-upload-file-list-main p {
   display: flex;
@@ -99,8 +101,6 @@
   justify-content: space-between;
   height: 52px;
   width: 250px;
-  margin-right: 8px;
-  margin-bottom: 8px;
   background-color: var(--semi-color-fill-0);
   cursor: pointer;
 }
@@ -235,16 +235,16 @@
   flex-direction: column;
 }
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
-  order: 2;
+  order: 1;
 }
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
-  order: 1;
+  order: 0;
 }
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
-  order: 2;
+  order: 1;
 }
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
-  order: 1;
+  order: 0;
 }
 .semi-upload-picture-add {
   background-color: var(--semi-color-fill-0);
@@ -281,11 +281,14 @@
   margin-bottom: 0;
 }
 .semi-upload-picture-file-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 96px;
   width: 96px;
+  border-radius: var(--semi-border-radius-small);
   position: relative;
-  margin-right: 8px;
-  margin-bottom: 8px;
+  overflow: hidden;
 }
 .semi-upload-picture-file-card img {
   height: 96px;
@@ -296,7 +299,7 @@
 .semi-upload-picture-file-card-close {
   width: 16px;
   height: 16px;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
   position: absolute;
   top: 8px;
   right: 8px;
@@ -350,6 +353,22 @@
   color: var(--semi-color-white);
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-pic-info {
+  display: inline-flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 24px;
+  padding: 0 10px;
+  bottom: 0;
+  left: 0;
+  color: var(--semi-color-white);
+  font-size: 12px;
+  font-weight: 600;
+  background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
+}
 .semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error {
   position: absolute;
   bottom: 6px;
@@ -362,6 +381,9 @@
 .semi-upload-picture-file-card-show-pointer {
   cursor: pointer;
 }
+.semi-upload-picture-file-card-error {
+  outline: 1px solid var(--semi-color-danger);
+}
 .semi-upload-drag-area {
   border-radius: var(--semi-border-radius-small);
   border: 2px dashed var(--semi-color-border);
@@ -442,11 +464,6 @@
 .semi-portal-rtl .semi-upload-file-list-title-clear {
   display: inline-block;
 }
-.semi-rtl .semi-upload-file-card,
-.semi-portal-rtl .semi-upload-file-card {
-  margin-right: 0;
-  margin-left: 8px;
-}
 .semi-rtl .semi-upload-file-card-info-size,
 .semi-portal-rtl .semi-upload-file-card-info-size {
   margin-left: 0;
@@ -463,11 +480,6 @@
   margin-right: 0;
   margin-left: 2px;
 }
-.semi-rtl .semi-upload-picture-file-card,
-.semi-portal-rtl .semi-upload-picture-file-card {
-  margin-right: 0;
-  margin-left: 8px;
-}
 .semi-rtl .semi-upload-picture-file-card-close,
 .semi-portal-rtl .semi-upload-picture-file-card-close {
   right: auto;

package/lib/cjs/upload/upload.scss

@@ -99,6 +99,8 @@ $module: #{$prefix}-upload;
             display: flex;
             flex-wrap: wrap;
             flex-shrink: 0;
+            gap: $spacing-upload_picture_file_card-gap;
+            margin-bottom: $spacing-upload_picture_file_card-marginBottom;
 
             p {
                 @include ver-center;
@@ -130,8 +132,6 @@ $module: #{$prefix}-upload;
         justify-content: space-between;
         height: $height-upload_file_card;
         width: $width-upload_file_card;
-        margin-right: $spacing-tight;
-        margin-bottom: $spacing-tight;
         background-color: $color-upload_card-bg;
         cursor: pointer;
 
@@ -292,21 +292,21 @@ $module: #{$prefix}-upload;
             flex-direction: column;
 
             .#{$module}-prompt {
-                order: 2;
+                order: 1;
             }
 
             .#{$module}-add {
-                order: 1;
+                order: 0;
             }
         }
 
         &[x-prompt-pos="right"] {
             .#{$module}-prompt {
-                order: 2;
+                order: 1;
             }
 
             .#{$module}-add {
-                order: 1;
+                order: 0;
             }
         }
 
@@ -353,11 +353,14 @@ $module: #{$prefix}-upload;
         }
 
         &-file-card {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             height: $height-upload_file_pic_card;
             width: $width-upload_file_pic_card;
+            border-radius: $radius-upload_picture_file_card_img;
             position: relative;
-            margin-right: $spacing-upload_picture_file_card-marginRight;
-            margin-bottom: $spacing-upload_picture_file_card-marginBottom;
+            overflow: hidden;
 
             img {
                 height: $width-upload_picture_file_card_img;
@@ -429,6 +432,22 @@ $module: #{$prefix}-upload;
                 color: $color-upload_replace-text;
                 transform: translate3D(-50%, -50%, 0);
             }
+            &-pic-info {
+                display: inline-flex;
+                box-sizing: border-box;
+                justify-content: space-between;
+                align-items: center;
+                position: absolute;
+                width: 100%;
+                height: 24px;
+                padding: 0 10px;
+                bottom: 0;
+                left: 0;
+                color: $color-upload_picture_file_card_pic_info-text;
+                font-size: $font-upload_picture_file_card_pic_info-fontSize;
+                font-weight: $font-upload_picture_file_card_pic_info-fontWeight;
+                background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
+            }
 
             &-icon-loading,
             &-icon-error {
@@ -445,6 +464,10 @@ $module: #{$prefix}-upload;
             &-show-pointer {
                 cursor: pointer;
             }
+
+            &-error {
+                outline: 1px solid $color-upload_picture_file_card_error-border;
+            }
         }
     }
 

package/lib/cjs/upload/variables.scss

@@ -22,8 +22,10 @@ $color-upload-icon: var(--semi-color-tertiary); // 图片墙上传图标加号
 $color-upload_pic_add-bg-active: var(--semi-color-fill-2); // 图片墙上传背景色 - 按下
 $color-upload_pic_add-bg-hover: var(--semi-color-fill-1); // 图片墙上传背景色 - 悬浮
 $color-upload_pic_add-bg: var(--semi-color-fill-0); // 图片墙上传背景色 - 默认
-$color-upload_pic_remove-bg: var(--semi-overlay-bg); // 图片墙上传移除图标颜色
+$color-upload_pic_remove-bg: var(--semi-color-overlay-bg); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_loading_error-icon: var(--semi-color-danger); // 图片墙上传移除图标颜色
+$color-upload_picture_file_card_error-border: var(--semi-color-danger); // 图片墙上传移除图标颜色
+$color-upload_picture_file_card_pic_info-text: var(--semi-color-white); // 图片墙图片信息（序号）文字颜色
 $color-upload_preview-icon: var(--semi-color-text-2); // 上传文件卡片文本颜色
 $color-upload_retry-text: var(--semi-color-primary); // 上传文件卡片重新上传按钮文本颜色
 $color-upload_replace-text: var(--semi-color-white); // 上传文件卡片重新替换按钮文本颜色
@@ -56,7 +58,7 @@ $spacing-upload_file_card_info_progress-marginTop: 4px; // 上传文件卡片进
 $spacing-upload_file_card_close-marginLeft: $spacing-tight; // 上传文件卡片删除按钮左侧外边距
 $spacing-upload_file_card_close-marginRight: $spacing-tight; // 上传文件卡片删除按钮右侧外边距
 $spacing-upload_file_card_icon-marginRight: $spacing-super-tight; // 上传文件卡片图标右侧外边距
-$spacing-upload_picture_file_card-marginRight: $spacing-tight; // 图片墙上传卡片右侧外边距
+$spacing-upload_picture_file_card-gap: $spacing-tight; // 图片墙卡片之间边距
 $spacing-upload_picture_file_card-marginBottom: $spacing-tight; // 图片墙上传卡片底部外边距
 $spacing-upload_picture_file_card_close-top: 8px; // 图片墙上传卡片删除按钮顶部位置
 $spacing-upload_picture_file_card_close-right: 8px; // 图片墙上传卡片删除右侧位置
@@ -79,3 +81,5 @@ $radius-upload_drag_area: var(--semi-border-radius-small); // 可拖拽上传拖
 $font-upload_file_card_info_name-fontWeight: $font-weight-bold; // 上传文件卡片文件名字重
 $font-upload_file_card_info_size-fontWeight: $font-weight-regular; // 上传文件卡片文件尺寸字重
 $font-upload_drag_area_tips-fontWeight: 600; // 可拖拽上传提示文本字重
+$font-upload_picture_file_card_pic_info-fontSize: 12px; // 图片墙图片信息字体大小
+$font-upload_picture_file_card_pic_info-fontWeight: 600; // 图片墙图片信息文本字重

package/lib/es/cascader/cascader.css

@@ -99,11 +99,11 @@
 .semi-cascader-selection-tag:first-child {
   margin-left: 0;
 }
-.semi-cascader-selection-tag-disabled {
+.semi-cascader-selection-tag-disabled.semi-tag {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-cascader-selection-tag-disabled .semi-tag-close {
+.semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
   pointer-events: none;

package/lib/es/cascader/cascader.scss

@@ -116,7 +116,7 @@ $module: #{$prefix}-cascader;
                 margin-left: 0;
             }
 
-            &-disabled {
+            &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
                 

package/lib/es/cascader/constants.d.ts

@@ -9,6 +9,9 @@ declare const strings: {
     readonly IS_VALUE: "isValue";
     readonly SHOW_NEXT_BY_CLICK: "click";
     readonly SHOW_NEXT_BY_HOVER: "hover";
+    readonly LEAF_ONLY_MERGE_TYPE: "leafOnly";
+    readonly AUTO_MERGE_VALUE_MERGE_TYPE: "autoMergeValue";
+    readonly NONE_MERGE_TYPE: "none";
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/es/cascader/constants.js

@@ -9,7 +9,12 @@ const strings = {
   IS_KEY: 'isKey',
   IS_VALUE: 'isValue',
   SHOW_NEXT_BY_CLICK: 'click',
-  SHOW_NEXT_BY_HOVER: 'hover'
+  SHOW_NEXT_BY_HOVER: 'hover',
+
+  /* Merge Type */
+  LEAF_ONLY_MERGE_TYPE: 'leafOnly',
+  AUTO_MERGE_VALUE_MERGE_TYPE: 'autoMergeValue',
+  NONE_MERGE_TYPE: 'none'
 };
 const numbers = {};
 export { cssClasses, strings, numbers };

package/lib/es/cascader/foundation.d.ts

@@ -57,6 +57,7 @@ export interface BasicScrollPanelProps {
 export interface BasicCascaderProps {
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
+    separator?: string;
     arrowIcon?: any;
     changeOnSelect?: boolean;
     multiple?: boolean;
@@ -96,6 +97,8 @@ export interface BasicCascaderProps {
     topSlot?: any;
     showNext?: ShowNextType;
     disableStrictly?: boolean;
+    leafOnly?: boolean;
+    enableLeafClick?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -125,7 +128,7 @@ export interface BasicCascaderInnerData {
     isHovering: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
-    mergedCheckedKeys: Set<string>;
+    resolvedCheckedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
     loading: boolean;

package/lib/es/cascader/foundation.js

@@ -22,7 +22,8 @@ import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
 import BaseFoundation from '../base/foundation';
 import { filter, findAncestorKeys, calcCheckedKeysForUnchecked, calcCheckedKeysForChecked, calcCheckedKeys, findDescendantKeys, normalizeKeyList } from '../tree/treeUtil';
-import { convertDataToEntities, findKeysForValues, normalizedArr, isValid } from './util'; // eslint-disable-next-line max-len
+import { convertDataToEntities, findKeysForValues, normalizedArr, isValid, calcMergeType } from './util';
+import { strings } from './constants'; // eslint-disable-next-line max-len
 
 export default class CascaderFoundation extends BaseFoundation {
   constructor(adapter) {
@@ -535,10 +536,12 @@ export default class CascaderFoundation extends BaseFoundation {
   }
 
   _defaultRenderText(path, displayRender) {
+    const separator = this.getProp('separator');
+
     if (displayRender && typeof displayRender === 'function') {
       return displayRender(path);
     } else {
-      return path.join(' / ');
+      return path.join(separator);
     }
   }
 
@@ -612,7 +615,8 @@ export default class CascaderFoundation extends BaseFoundation {
     const {
       changeOnSelect: allowChange,
       filterLeafOnly,
-      multiple
+      multiple,
+      enableLeafClick
     } = this.getProps();
     const {
       keyEntities,
@@ -646,6 +650,10 @@ export default class CascaderFoundation extends BaseFoundation {
       this._adapter.updateStates({
         activeKeys: new _Set(activeKeys)
       });
+
+      if (isLeaf && enableLeafClick) {
+        this.onItemCheckboxClick(item);
+      }
     } else {
       this._adapter.notifySelect(data.value);
 
@@ -695,12 +703,13 @@ export default class CascaderFoundation extends BaseFoundation {
     const {
       checkedKeys,
       keyEntities,
-      mergedCheckedKeys
+      resolvedCheckedKeys
     } = this.getStates();
     const {
       autoMergeValue,
       max,
-      disableStrictly
+      disableStrictly,
+      leafOnly
     } = this.getProps(); // prev checked status
 
     const prevCheckedStatus = checkedKeys.has(key); // next checked status
@@ -711,16 +720,19 @@ export default class CascaderFoundation extends BaseFoundation {
       checkedKeys: curCheckedKeys,
       halfCheckedKeys: curHalfCheckedKeys
     } = disableStrictly ? this.calcNonDisabedCheckedKeys(key, curCheckedStatus) : this.calcCheckedKeys(key, curCheckedStatus);
-    const curMergedCheckedKeys = new _Set(normalizeKeyList(curCheckedKeys, keyEntities));
-    const curRealCheckedKeys = autoMergeValue ? curMergedCheckedKeys : curCheckedKeys;
+    const mergeType = calcMergeType(autoMergeValue, leafOnly);
+    const isLeafOnlyMerge = mergeType === strings.LEAF_ONLY_MERGE_TYPE;
+    const isNoneMerge = mergeType === strings.NONE_MERGE_TYPE;
+    const curResolvedCheckedKeys = new _Set(normalizeKeyList(curCheckedKeys, keyEntities, isLeafOnlyMerge));
+    const curRealCheckedKeys = isNoneMerge ? curCheckedKeys : curResolvedCheckedKeys;
 
     if (_isNumber(max)) {
-      if (autoMergeValue) {
+      if (!isNoneMerge) {
         // When it exceeds max, the quantity is allowed to be reduced, and no further increase is allowed
-        if (mergedCheckedKeys.size < curMergedCheckedKeys.size && curMergedCheckedKeys.size > max) {
+        if (resolvedCheckedKeys.size < curResolvedCheckedKeys.size && curResolvedCheckedKeys.size > max) {
           const checkedEntities = [];
 
-          _forEachInstanceProperty(curMergedCheckedKeys).call(curMergedCheckedKeys, itemKey => {
+          _forEachInstanceProperty(curResolvedCheckedKeys).call(curResolvedCheckedKeys, itemKey => {
             checkedEntities.push(keyEntities[itemKey]);
           });
 
@@ -748,7 +760,7 @@ export default class CascaderFoundation extends BaseFoundation {
       this._adapter.updateStates({
         checkedKeys: curCheckedKeys,
         halfCheckedKeys: curHalfCheckedKeys,
-        mergedCheckedKeys: curMergedCheckedKeys
+        resolvedCheckedKeys: curResolvedCheckedKeys
       });
     } // The click event during multiple selection will definitely cause the checked state of node to change,
     // so there is no need to judge the value to change.
@@ -911,7 +923,7 @@ export default class CascaderFoundation extends BaseFoundation {
       newState.halfCheckedKeys = new _Set([]);
       newState.selectedKeys = new _Set([]);
       newState.activeKeys = new _Set([]);
-      newState.mergedCheckedKeys = new _Set([]);
+      newState.resolvedCheckedKeys = new _Set([]);
 
       this._adapter.notifyChange([]);
     } else {

package/lib/es/cascader/util.d.ts

@@ -2,3 +2,4 @@ export declare function isValid(val: any): boolean;
 export declare function normalizedArr(val: any): any[];
 export declare function convertDataToEntities(dataNodes: any): any;
 export declare function findKeysForValues(value: any, keyEntities: any): any[];
+export declare function calcMergeType(autoMergeValue: boolean, leafOnly: boolean): string;

package/lib/es/cascader/util.js

@@ -8,6 +8,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import { strings } from './constants';
 
 function getPosition(level, index) {
   var _context;
@@ -88,4 +89,17 @@ export function findKeysForValues(value, keyEntities) {
   const res = _mapInstanceProperty(_context2 = _filterInstanceProperty(_context3 = _Object$values(keyEntities)).call(_context3, item => _isEqual(item.valuePath, valuePath))).call(_context2, item => item.key);
 
   return res;
+}
+export function calcMergeType(autoMergeValue, leafOnly) {
+  let mergeType;
+
+  if (leafOnly) {
+    mergeType = strings.LEAF_ONLY_MERGE_TYPE;
+  } else if (autoMergeValue) {
+    mergeType = strings.AUTO_MERGE_VALUE_MERGE_TYPE;
+  } else {
+    mergeType = strings.NONE_MERGE_TYPE;
+  }
+
+  return mergeType;
 }

package/lib/es/checkbox/checkbox.css

@@ -36,12 +36,14 @@
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-display {
   background: var(--semi-color-fill-1);
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
+  box-shadow: none;
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
   background: var(--semi-color-disabled-fill);
@@ -49,6 +51,7 @@
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-disabled);
+  box-shadow: none;
 }
 .semi-checkbox-inner {
   position: relative;
@@ -89,7 +92,7 @@
 }
 .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
-  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+  box-shadow: none;
   color: var(--semi-color-white);
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
@@ -107,6 +110,7 @@
   background: var(--semi-color-primary-active);
   border-color: var(--semi-color-primary-active);
   color: var(--semi-color-white);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
@@ -158,10 +162,18 @@
 }
 .semi-checkbox-cardType_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
 }
 .semi-checkbox-cardType_checked:hover {
   background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
+.semi-checkbox-cardType_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-checkbox-cardType_disabled:active {
   background: transparent;
@@ -169,6 +181,13 @@
 .semi-checkbox-cardType_disabled:hover {
   background: transparent;
 }
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
 .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);

package/lib/es/checkbox/checkbox.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
             }
         }
     }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
             }
         }
     }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
             }
         }
     }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
 
         &.#{$module}-indeterminate .#{$module}-inner-display {
             background: $color-checkbox_checked-bg-hover;
-            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+            box-shadow: none;
             color: $color-checkbox_checked-icon-hover;
         }
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
             background: $color-checkbox_checked-bg-active;
             border-color: $color-checkbox_checked-border-active;
             color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
         }
 
         .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
 
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
             }
         }
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
     }
 
     &-indeterminate,

package/lib/es/checkbox/checkboxFoundation.d.ts

@@ -7,6 +7,9 @@ export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
+    nativeEvent: {
+        stopImmediatePropagation: () => void;
+    };
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
@@ -20,18 +23,22 @@ export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any
 declare class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
     constructor(adapter: CheckboxAdapter<P, S>);
     init(): void;
-    getEvent(checked: boolean, e: MouseEvent): {
+    getEvent(checked: boolean, e: any): {
         target: any;
         stopPropagation: () => void;
         preventDefault: () => void;
+        nativeEvent: {
+            stopImmediatePropagation: () => void;
+        };
     };
-    notifyChange(checked: boolean, e: MouseEvent): void;
-    handleChange(e: MouseEvent): void;
-    handleChangeInGroup(e: MouseEvent): void;
+    notifyChange(checked: boolean, e: any): void;
+    handleChange(e: any): void;
+    handleChangeInGroup(e: any): void;
     setChecked(checked: boolean): void;
     destroy(): void;
 }
 export interface BaseCheckboxProps {
+    id?: string;
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;

package/lib/es/checkbox/checkboxFoundation.js

@@ -21,6 +21,13 @@ class CheckboxFoundation extends BaseFoundation {
       },
       preventDefault: () => {
         e.preventDefault();
+      },
+      nativeEvent: {
+        stopImmediatePropagation: () => {
+          if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+            e.nativeEvent.stopImmediatePropagation();
+          }
+        }
       }
     };
     return cbValue;

package/lib/es/checkbox/variables.scss

@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
 $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
 $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
 $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
 $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
 $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
-$color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
 $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
 $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
 $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角