@douyinfe/semi-foundation 2.4.1 → 2.6.0-beta.0

package/tree/foundation.ts

@@ -178,6 +178,8 @@ export interface Virtualize {
     width?: number | string;
 }
 
+export type CheckRelation = 'related' | 'unRelated';
+
 export interface BasicTreeProps {
     autoExpandParent?: boolean;
     autoExpandWhenDragEnter?: boolean;
@@ -233,6 +235,7 @@ export interface BasicTreeProps {
     value?: BasicValue;
     virtualize?: Virtualize;
     icon?: any;
+    checkRelation?: CheckRelation;
     'aria-label'?: string;
 }
 
@@ -252,6 +255,8 @@ export interface BasicTreeInnerData {
     checkedKeys: Set<string>;
     /* Half-selected node when multiple selection */
     halfCheckedKeys: Set<string>;
+    /* real selected nodes in multiple selection */
+    realCheckedKeys: Set<string>;
     /* Animation node */
     motionKeys: Set<string>;
     /* Animation type */
@@ -358,6 +363,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
             selectedKeys = [],
             checkedKeys = new Set([]),
             halfCheckedKeys = new Set([]),
+            realCheckedKeys = new Set([]),
             keyEntities = {},
             filteredKeys = new Set([]),
             inputValue = '',
@@ -366,19 +372,29 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
             filteredExpandedKeys = new Set([]),
             disabledKeys = new Set([]),
         } = this.getStates();
-        const { treeNodeFilterProp } = this.getProps();
+        const { treeNodeFilterProp, checkRelation } = this.getProps();
         const entity = keyEntities[key];
         const notExist = !entity;
         if (notExist) {
             return null;
         }
+        // if checkRelation is invalid, the checked status of node will be false
+        let realChecked = false;
+        let realHalfChecked = false;
+        if (checkRelation === 'related') {
+            realChecked = checkedKeys.has(key);
+            realHalfChecked = halfCheckedKeys.has(key);
+        } else if (checkRelation === 'unRelated') {
+            realChecked = realCheckedKeys.has(key);
+            realHalfChecked = false;
+        }
         const isSearching = Boolean(inputValue);
         const treeNodeProps: BasicTreeNodeProps = {
             eventKey: key,
             expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
             selected: selectedKeys.includes(key),
-            checked: checkedKeys.has(key),
-            halfChecked: halfCheckedKeys.has(key),
+            checked: realChecked,
+            halfChecked: realHalfChecked,
             pos: String(entity ? entity.pos : ''),
             level: entity.level,
             filtered: filteredKeys.has(key),
@@ -402,11 +418,16 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         this._adapter.notifyChange(value as BasicValue);
     }
 
-    notifyMultipleChange(key: string[] | string, e: any) {
+    notifyMultipleChange(key: string[], e: any) {
         const { keyEntities } = this.getStates();
-        const { leafOnly } = this.getProps();
+        const { leafOnly, checkRelation } = this.getProps();
         let value;
-        const keyList = normalizeKeyList(key, keyEntities, leafOnly);
+        let keyList = [];
+        if (checkRelation === 'related') {
+            keyList = normalizeKeyList(key, keyEntities, leafOnly);
+        } else if (checkRelation === 'unRelated') {
+            keyList = key;
+        }
         if (this.getProp('onChangeWithObject')) {
             value = keyList.map((itemKey: string) => keyEntities[itemKey].data);
         } else {
@@ -421,7 +442,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
         if (this.getProp('treeDataSimpleJson')) {
             this.notifyJsonChange(key, e);
         } else if (isMultiple) {
-            this.notifyMultipleChange(key, e);
+            this.notifyMultipleChange(key as string[], e);
         } else {
             let value;
             if (this.getProp('onChangeWithObject')) {
@@ -565,18 +586,36 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     * Handle the selection event in the case of multiple selection
     */
     handleMultipleSelect(e: any, treeNode: BasicTreeNodeProps) {
-        const { disableStrictly } = this.getProps();
+        const { disableStrictly, checkRelation } = this.getProps();
+        const { realCheckedKeys } = this.getStates();
         // eventKey: The key value of the currently clicked node
         const { checked, eventKey, data } = treeNode;
-        // Find the checked state of the current node
-        const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
-        const { checkedKeys, halfCheckedKeys } = disableStrictly ?
-            this.calcNonDisabedCheckedKeys(eventKey, targetStatus) :
-            this.calcCheckedKeys(eventKey, targetStatus);
-        this._adapter.notifySelect(eventKey, targetStatus, data);
-        this.notifyChange([...checkedKeys], e);
-        if (!this._isControlledComponent()) {
-            this._adapter.updateState({ checkedKeys, halfCheckedKeys });
+        if (checkRelation === 'related') {
+            // Find the checked state of the current node
+            const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
+            const { checkedKeys, halfCheckedKeys } = disableStrictly ?
+                this.calcNonDisabedCheckedKeys(eventKey, targetStatus) :
+                this.calcCheckedKeys(eventKey, targetStatus);
+            this._adapter.notifySelect(eventKey, targetStatus, data);
+            this.notifyChange([...checkedKeys], e);
+            if (!this._isControlledComponent()) {
+                this._adapter.updateState({ checkedKeys, halfCheckedKeys });
+            }
+        } else if (checkRelation === 'unRelated') {
+            const newRealCheckedKeys: Set<string> = new Set(realCheckedKeys);
+            let targetStatus: boolean;
+            if (realCheckedKeys.has(eventKey)) {
+                newRealCheckedKeys.delete(eventKey);
+                targetStatus = false;
+            } else {
+                newRealCheckedKeys.add(eventKey);
+                targetStatus = true;
+            }
+            this._adapter.notifySelect(eventKey, targetStatus, data);
+            this.notifyChange([...newRealCheckedKeys], e);
+            if (!this._isControlledComponent()) {
+                this._adapter.updateState({ realCheckedKeys: newRealCheckedKeys });
+            }
         }
     }
 

package/treeSelect/foundation.ts

@@ -31,9 +31,9 @@ export type ValidateStatus = 'error' | 'warning' | 'default';
 export type Size = 'small' | 'large' | 'default';
 
 export type BasicRenderSelectedItemInMultiple = (
-    treeNode: BasicTreeNodeData, 
+    treeNode: BasicTreeNodeData,
     otherProps: { index: number | string; onClose: (tagContent: any, e: any) => void }
-)=> {
+) => {
     isRenderInTag: boolean;
     content: any;
 };
@@ -95,6 +95,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'expandAll'
 | 'disableStrictly'
 | 'aria-label'
+| 'checkRelation'
 > {
     motion?: Motion;
     mouseEnterDelay?: number;
@@ -156,6 +157,7 @@ export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData,
 | 'disabledKeys'
 | 'loadedKeys'
 | 'loadingKeys'
+| 'realCheckedKeys'
 > {
     inputTriggerFocus: boolean;
     isOpen: boolean;
@@ -171,7 +173,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     registerClickOutsideHandler: (cb: (e: any) => void) => void;
     unregisterClickOutsideHandler: () => void;
     rePositionDropdown: () => void;
-    updateState: (states: Pick<S, keyof S>) => void;
+    updateState: (states: Partial<BasicTreeSelectInnerData>) => void;
     notifySelect: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
     notifySearch: (input: string) => void;
     cacheFlattenNodes: (bool: boolean) => void;
@@ -272,6 +274,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             selectedKeys = [],
             checkedKeys = new Set([]),
             halfCheckedKeys = new Set([]),
+            realCheckedKeys = new Set([]),
             keyEntities = {},
             filteredKeys = new Set([]),
             inputValue = '',
@@ -280,19 +283,29 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             filteredExpandedKeys = new Set([]),
             disabledKeys = new Set([]),
         } = this.getStates();
-        const { treeNodeFilterProp } = this.getProps();
+        const { treeNodeFilterProp, checkRelation } = this.getProps();
         const entity = keyEntities[key];
         const notExist = !entity;
         if (notExist) {
             return null;
         }
+        // if checkRelation is invalid, the checked status of node will be false
+        let realChecked = false;
+        let realHalfChecked = false;
+        if (checkRelation === 'related') {
+            realChecked = checkedKeys.has(key);
+            realHalfChecked = halfCheckedKeys.has(key);
+        } else if (checkRelation === 'unRelated') {
+            realChecked = realCheckedKeys.has(key);
+            realHalfChecked = false;
+        }
         const isSearching = Boolean(inputValue);
         const treeNodeProps: BasicTreeNodeProps = {
             eventKey: key,
             expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
             selected: selectedKeys.includes(key),
-            checked: checkedKeys.has(key),
-            halfChecked: halfCheckedKeys.has(key),
+            checked: realChecked,
+            halfChecked: realHalfChecked,
             pos: String(entity ? entity.pos : ''),
             level: entity.level,
             filtered: filteredKeys.has(key),
@@ -327,7 +340,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             if (!this._isLoadControlled()) {
                 this._adapter.updateState({
                     loadedKeys: newLoadedKeys,
-                } as any);
+                });
             }
             this._adapter.setState({
                 loadingKeys: newLoadingKeys,
@@ -345,8 +358,13 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     _notifyMultipleChange(key: string[], e: any) {
         const { keyEntities } = this.getStates();
-        const { leafOnly } = this.getProps();
-        const keyList = normalizeKeyList(key, keyEntities, leafOnly);
+        const { leafOnly, checkRelation } = this.getProps();
+        let keyList = [];
+        if (checkRelation === 'related') {
+            keyList = normalizeKeyList(key, keyEntities, leafOnly);
+        } else if (checkRelation === 'unRelated') {
+            keyList = key as string[];
+        }
         const nodes = keyList.map(i => keyEntities[i].data);
         if (this.getProp('onChangeWithObject')) {
             this._adapter.notifyChangeWithObject(nodes, e);
@@ -402,7 +420,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this._adapter.unregisterClickOutsideHandler();
         this._notifyBlur(e);
         if (this.getProp('motionExpand')) {
-            this._adapter.updateState({ motionKeys: new Set([]) } as any);
+            this._adapter.updateState({ motionKeys: new Set([]) });
         }
     }
 
@@ -442,7 +460,8 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
                 selectedKeys: [],
                 checkedKeys: new Set(),
                 halfCheckedKeys: new Set(),
-            } as any);
+                realCheckedKeys: new Set([]),
+            });
         }
         // When triggerSearch, clicking the clear button will trigger to clear Input
         if (filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER) {
@@ -466,18 +485,29 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     removeTag(eventKey: BasicTreeNodeData['key']) {
-        const { disableStrictly } = this.getProps();
-        const { keyEntities, disabledKeys } = this.getStates();
+        const { disableStrictly, checkRelation } = this.getProps();
+        const { keyEntities, disabledKeys, realCheckedKeys } = this.getStates();
         const item = keyEntities[eventKey].data;
         if (item.disabled || (disableStrictly && disabledKeys.has(eventKey))) {
             return;
         }
-        const { checkedKeys, halfCheckedKeys } = this.calcCheckedKeys(eventKey, false);
-        this._notifyChange([...checkedKeys], null);
-        if (!this._isControlledComponent()) {
-            this._adapter.updateState({ checkedKeys, halfCheckedKeys } as any);
-            this._adapter.rePositionDropdown();
+        if (checkRelation === 'unRelated') {
+            const newRealCheckedKeys = new Set(realCheckedKeys);
+            newRealCheckedKeys.delete(eventKey);
+            this._notifyChange([...newRealCheckedKeys], null);
+            if (!this._isControlledComponent()) {
+                this._adapter.updateState({ realCheckedKeys: newRealCheckedKeys } as any);
+                this._adapter.rePositionDropdown();
+            }
+        } else if (checkRelation === 'related') {
+            const { checkedKeys, halfCheckedKeys } = this.calcCheckedKeys(eventKey, false);
+            this._notifyChange([...checkedKeys], null);
+            if (!this._isControlledComponent()) {
+                this._adapter.updateState({ checkedKeys, halfCheckedKeys });
+                this._adapter.rePositionDropdown();
+            }
         }
+
         this._adapter.notifySelect(eventKey, false, item);
 
         // reposition dropdown when selected values change
@@ -498,7 +528,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             filteredKeys: new Set([]),
             filteredExpandedKeys: new Set(expandedOptsKeys),
             filteredShownKeys: new Set([])
-        } as any);
+        });
     }
 
     handleInputChange(sugInput: string) {
@@ -534,7 +564,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             filteredKeys: new Set(filteredOptsKeys),
             filteredExpandedKeys: new Set(expandedOptsKeys),
             filteredShownKeys,
-        } as any);
+        });
     }
 
     handleNodeSelect(e: any, treeNode: BasicTreeNodeProps) {
@@ -559,7 +589,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             selectedKeys = [eventKey];
             this._notifyChange(eventKey, e);
             if (!this._isControlledComponent()) {
-                this._adapter.updateState({ selectedKeys } as any);
+                this._adapter.updateState({ selectedKeys });
             }
         }
         if (clickToHide && (this._isSelectToClose() || !data.children)) {
@@ -581,24 +611,42 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     handleMultipleSelect(e: any, treeNode: BasicTreeNodeProps) {
-        const { searchPosition, disableStrictly } = this.getProps();
-        const { inputValue } = this.getStates();
+        const { searchPosition, disableStrictly, checkRelation } = this.getProps();
+        const { inputValue, realCheckedKeys } = this.getStates();
         const { checked, eventKey, data } = treeNode;
-        const targetStatus = disableStrictly ?
-            this.calcChekcedStatus(!checked, eventKey) :
-            !checked;
-
-        const { checkedKeys, halfCheckedKeys } = disableStrictly ?
-            this.calcNonDisabedCheckedKeys(eventKey, targetStatus) :
-            this.calcCheckedKeys(eventKey, targetStatus);
-        this._adapter.notifySelect(eventKey, targetStatus, data);
-        this._notifyChange([...checkedKeys], e);
-        if (searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
-            this._adapter.updateState({ inputValue: '' } as any);
+        if (checkRelation === 'related') {
+            const targetStatus = disableStrictly ?
+                this.calcChekcedStatus(!checked, eventKey) :
+                !checked;
+
+            const { checkedKeys, halfCheckedKeys } = disableStrictly ?
+                this.calcNonDisabedCheckedKeys(eventKey, targetStatus) :
+                this.calcCheckedKeys(eventKey, targetStatus);
+            this._adapter.notifySelect(eventKey, targetStatus, data);
+            this._notifyChange([...checkedKeys], e);
+            if (!this._isControlledComponent()) {
+                this._adapter.updateState({ checkedKeys, halfCheckedKeys });
+                this._adapter.rePositionDropdown();
+            }
+        } else if (checkRelation === 'unRelated') {
+            const newRealCheckedKeys: Set<string> = new Set(realCheckedKeys);
+            let targetStatus: boolean;
+            if (realCheckedKeys.has(eventKey)) {
+                newRealCheckedKeys.delete(eventKey);
+                targetStatus = false;
+            } else {
+                newRealCheckedKeys.add(eventKey);
+                targetStatus = true;
+            }
+            this._adapter.notifySelect(eventKey, targetStatus, data);
+            this._notifyChange([...newRealCheckedKeys], e);
+            if (!this._isControlledComponent()) {
+                this._adapter.updateState({ realCheckedKeys: newRealCheckedKeys });
+                this._adapter.rePositionDropdown();
+            }
         }
-        if (!this._isControlledComponent()) {
-            this._adapter.updateState({ checkedKeys, halfCheckedKeys } as any);
-            this._adapter.rePositionDropdown();
+        if (searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
+            this._adapter.updateState({ inputValue: '' });
         }
     }
 
@@ -659,7 +707,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
                 motionType,
             };
 
-            this._adapter.updateState(newState as any);
+            this._adapter.updateState(newState);
         }
 
         this._adapter.notifyExpand(filteredExpandedKeys, {
@@ -703,7 +751,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
                 motionKeys: new Set(motionKeys),
                 motionType,
             };
-            this._adapter.updateState(newState as any);
+            this._adapter.updateState(newState);
         }
 
         this._adapter.notifyExpand(expandedKeys, {
@@ -734,7 +782,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     handleInputTriggerBlur() {
         this._adapter.updateState({
             inputTriggerFocus: false
-        } as any);
+        });
     }
 
     /**
@@ -744,7 +792,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this.clearInput();
         this._adapter.updateState({
             inputTriggerFocus: true
-        } as any);
+        });
     }
 
     setLoadKeys(data: BasicTreeNodeData, resolve: (value?: any) => void) {

package/upload/upload.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-upload;
 
@@ -47,7 +47,7 @@ $module: #{$prefix}-upload;
         align-items: center;
     }
 
-    &[x-prompt-pos="right"] {
+    &[x-prompt-pos='right'] {
         .#{$module}-add {
             display: inline-flex;
         }
@@ -57,7 +57,7 @@ $module: #{$prefix}-upload;
         }
     }
 
-    &[x-prompt-pos="bottom"] {
+    &[x-prompt-pos='bottom'] {
         .#{$module}-add {
             display: flex;
         }
@@ -72,15 +72,14 @@ $module: #{$prefix}-upload;
         }
     }
 
-    &[x-prompt-pos="left"] {
+    &[x-prompt-pos='left'] {
         .#{$module}-add {
             display: inline-flex;
-            order: 2;
         }
 
         .#{$module}-prompt {
             display: inline-flex;
-            order: 1;
+            order: -1;
         }
 
         .#{$module}-file-list {
@@ -247,7 +246,6 @@ $module: #{$prefix}-upload;
         }
 
         &-icon {
-
             &-loading,
             &-error {
                 font-size: $width-upload_file_card-icon;
@@ -275,7 +273,6 @@ $module: #{$prefix}-upload;
             }
 
             .#{$module}-file-card {
-
                 &-info-validate-message {
                     color: $color-upload_file_card_fail_info-text;
                 }
@@ -288,26 +285,18 @@ $module: #{$prefix}-upload;
     &-picture {
         display: flex;
 
-        &[x-prompt-pos="bottom"] {
+        &[x-prompt-pos='bottom'] {
             flex-direction: column;
 
             .#{$module}-prompt {
                 order: 1;
             }
-
-            .#{$module}-add {
-                order: 0;
-            }
         }
 
-        &[x-prompt-pos="right"] {
+        &[x-prompt-pos='right'] {
             .#{$module}-prompt {
                 order: 1;
             }
-
-            .#{$module}-add {
-                order: 0;
-            }
         }
 
         &-add {
@@ -321,7 +310,6 @@ $module: #{$prefix}-upload;
             border: $width-upload_picture_add-border dashed $color-upload-border;
             color: $color-upload-icon;
             border-radius: $radius-upload_picture_add;
-            order: 2;
             cursor: pointer;
 
             &:hover {
@@ -370,38 +358,32 @@ $module: #{$prefix}-upload;
             }
 
             &-close {
-                width: $width-upload_picture_file_card_close;
-                height: $width-upload_picture_file_card_close;
-                background-color: $color-upload_pic_remove-bg;
+                visibility: hidden;
+                display: inline-flex;
                 position: absolute;
                 top: $spacing-upload_picture_file_card_close-top;
                 right: $spacing-upload_picture_file_card_close-right;
-                @include all-center;
-                display: none;
                 border-radius: $radius-upload_picture_file_card_close;
-                color: white;
                 cursor: pointer;
                 transition: all 0s;
             }
-
-            &:hover {
-                .#{$module}-picture-file-card-close {
-                    display: flex;
-                }
-
-                .#{$module}-picture-file-card-replace {
-                    visibility: visible;
-                }
+            &-icon-close {
+                font-size: $width-upload_picture_file_card_close;
+                color: $color-upload_picture_file_card_close-icon;
             }
 
-            .#{$prefix}-progress-circle {
+            &::before {
+                visibility: hidden;
+                background-color: $color-upload_picture_file_card_hover-bg;
+                content: '';
                 position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
             }
-
             &-retry {
+                visibility: hidden;
                 background-color: $color-upload_file_card_retry-bg;
                 width: $width-upload_file_card_retry;
                 height: $width-upload_file_card_retry;
@@ -416,7 +398,6 @@ $module: #{$prefix}-upload;
                 justify-content: center;
                 cursor: pointer;
             }
-
             &-icon-retry {
                 transform: scale(-1, 1);
                 font-size: $width-upload_file_card_retry-icon;
@@ -432,6 +413,17 @@ $module: #{$prefix}-upload;
                 color: $color-upload_replace-text;
                 transform: translate3D(-50%, -50%, 0);
             }
+
+            &-preview {
+                visibility: hidden;
+                display: inline-flex;
+                position: absolute;
+                cursor: pointer;
+                top: 50%;
+                left: 50%;
+                transform: translate3D(-50%, -50%, 0);
+            }
+
             &-pic-info {
                 display: inline-flex;
                 box-sizing: border-box;
@@ -468,6 +460,39 @@ $module: #{$prefix}-upload;
             &-error {
                 outline: 1px solid $color-upload_picture_file_card_error-border;
             }
+
+            &:hover {
+                &::before {
+                    visibility: visible;
+                }
+
+                .#{$module}-picture-file-card-close {
+                    visibility: visible;
+                }
+                .#{$module}-picture-file-card-replace {
+                    visibility: visible;
+                }
+
+                .#{$module}-picture-file-card-retry {
+                    visibility: visible;
+                }
+                .#{$module}-picture-file-card-preview {
+                    visibility: visible;
+                }
+            }
+
+            &-uploading {
+                &::before {
+                    visibility: visible;
+                }
+            }
+
+            .#{$prefix}-progress-circle {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
         }
     }
 
@@ -542,4 +567,4 @@ $module: #{$prefix}-upload;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/upload/variables.scss

@@ -16,7 +16,7 @@ $color-upload_drag_area_tips-text: var(--semi-color-primary); // 上传可拖拽
 $color-upload_file_card_fail_info-text: var(--semi-color-danger); // 上传文件卡片失败提示信息文本颜色
 $color-upload_file_card_preview_placeholder-bg: rgba(var(--semi-grey-3), 1); // 文件卡片默认预览背景颜色
 $color-upload_file_card_preview_placeholder-text: rgba(var(--semi-white), 1); // 文件卡片默认预览图颜色
-$color-upload_file_card_retry-bg: #fff; // 重新上传按钮背景颜色
+$color-upload_file_card_retry-bg: var(--semi-color-white); // 重新上传按钮背景颜色
 $color-upload_file_card_retry-text: var(--semi-color-primary); // 重新上传按钮文本颜色
 $color-upload-icon: var(--semi-color-tertiary); // 图片墙上传图标加号颜色
 $color-upload_pic_add-bg-active: var(--semi-color-fill-2); // 图片墙上传背景色 - 按下
@@ -26,6 +26,8 @@ $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_picture_file_card_close-icon: var(--semi-color-white); // 图片墙关闭图标颜色
+$color-upload_picture_file_card_hover-bg: var(--semi-color-overlay-bg); // 图片墙预览悬浮背景色
 $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); // 上传文件卡片重新替换按钮文本颜色