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

package/lib/cjs/tooltip/foundation.js

@@ -548,6 +548,19 @@ class Tooltip extends _foundation.default {
         translateX = -1;
         break;
 
+      case 'leftBottomOver':
+        left = triggerRect.left;
+        top = triggerRect.bottom;
+        translateY = -1;
+        break;
+
+      case 'rightBottomOver':
+        left = triggerRect.right;
+        top = triggerRect.bottom;
+        translateX = -1;
+        translateY = -1;
+        break;
+
       default:
         break;
     }
@@ -669,12 +682,16 @@ class Tooltip extends _foundation.default {
 
       const shouldReverseTop = clientTop < wrapperRect.height + spacing && restClientBottom > wrapperRect.height + spacing;
       const shouldReverseLeft = clientLeft < wrapperRect.width + spacing && restClientRight > wrapperRect.width + spacing;
-      const sholdReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
+      const shouldReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
       const shouldReverseRight = restClientRight < wrapperRect.width + spacing && clientLeft > wrapperRect.width + spacing;
+      const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
+      const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
       const shouldReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
       const shouldReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
       const shouldReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
       const shouldReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
+      const shouldReverseLeftOver = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
+      const shouldReverseRightOver = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
 
       switch (position) {
         case 'top':
@@ -736,14 +753,14 @@ class Tooltip extends _foundation.default {
           break;
 
         case 'bottom':
-          if (sholdReverseBottom) {
+          if (shouldReverseBottom) {
             position = this._reversePos(position, true);
           }
 
           break;
 
         case 'bottomLeft':
-          if (sholdReverseBottom) {
+          if (shouldReverseBottom) {
             position = this._reversePos(position, true);
           }
 
@@ -754,7 +771,7 @@ class Tooltip extends _foundation.default {
           break;
 
         case 'bottomRight':
-          if (sholdReverseBottom) {
+          if (shouldReverseBottom) {
             position = this._reversePos(position, true);
           }
 
@@ -793,6 +810,50 @@ class Tooltip extends _foundation.default {
 
           break;
 
+        case 'leftTopOver':
+          if (shouldReverseTopOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseLeftOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
+        case 'leftBottomOver':
+          if (shouldReverseBottomOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseLeftOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
+        case 'rightTopOver':
+          if (shouldReverseTopOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseRightOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
+        case 'rightBottomOver':
+          if (shouldReverseBottomOver) {
+            position = this._reversePos(position, true);
+          }
+
+          if (shouldReverseRightOver) {
+            position = this._reversePos(position);
+          }
+
+          break;
+
         default:
           break;
       }

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

@@ -128,6 +128,7 @@ export interface Virtualize {
     height?: number | string;
     width?: number | string;
 }
+export declare type CheckRelation = 'related' | 'unRelated';
 export interface BasicTreeProps {
     autoExpandParent?: boolean;
     autoExpandWhenDragEnter?: boolean;
@@ -183,6 +184,7 @@ export interface BasicTreeProps {
     value?: BasicValue;
     virtualize?: Virtualize;
     icon?: any;
+    checkRelation?: CheckRelation;
     'aria-label'?: string;
 }
 export interface BasicTreeInnerData {
@@ -193,6 +195,7 @@ export interface BasicTreeInnerData {
     selectedKeys: string[];
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
+    realCheckedKeys: Set<string>;
     motionKeys: Set<string>;
     motionType: string;
     expandedKeys: Set<string>;
@@ -242,7 +245,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     getCopyFromState(items: string[] | string): Partial<BasicTreeInnerData>;
     getTreeNodeProps(key: string): BasicTreeNodeProps;
     notifyJsonChange(key: string[] | string, e: any): void;
-    notifyMultipleChange(key: string[] | string, e: any): void;
+    notifyMultipleChange(key: string[], e: any): void;
     notifyChange(key: string[] | string, e: any): void;
     handleInputChange(sugInput: string): void;
     handleNodeSelect(e: any, treeNode: BasicTreeNodeProps): void;

package/lib/cjs/tree/foundation.js

@@ -112,6 +112,7 @@ class TreeFoundation extends _foundation.default {
       selectedKeys = [],
       checkedKeys = new _set.default([]),
       halfCheckedKeys = new _set.default([]),
+      realCheckedKeys = new _set.default([]),
       keyEntities = {},
       filteredKeys = new _set.default([]),
       inputValue = '',
@@ -121,13 +122,26 @@ class TreeFoundation extends _foundation.default {
       disabledKeys = new _set.default([])
     } = this.getStates();
     const {
-      treeNodeFilterProp
+      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);
@@ -135,8 +149,8 @@ class TreeFoundation extends _foundation.default {
       eventKey: key,
       expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: (0, _includes.default)(selectedKeys).call(selectedKeys, 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),
@@ -168,10 +182,17 @@ class TreeFoundation extends _foundation.default {
       keyEntities
     } = this.getStates();
     const {
-      leafOnly
+      leafOnly,
+      checkRelation
     } = this.getProps();
     let value;
-    const keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly);
+    let keyList = [];
+
+    if (checkRelation === 'related') {
+      keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly);
+    } else if (checkRelation === 'unRelated') {
+      keyList = key;
+    }
 
     if (this.getProp('onChangeWithObject')) {
       value = (0, _map.default)(keyList).call(keyList, itemKey => keyEntities[itemKey].data);
@@ -376,30 +397,58 @@ class TreeFoundation extends _foundation.default {
 
   handleMultipleSelect(e, treeNode) {
     const {
-      disableStrictly
-    } = this.getProps(); // eventKey: The key value of the currently clicked node
+      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
+    } = treeNode;
 
-    const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
+    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._adapter.notifySelect(eventKey, targetStatus, data);
 
-    this.notifyChange([...checkedKeys], e);
+      this.notifyChange([...checkedKeys], e);
 
-    if (!this._isControlledComponent()) {
-      this._adapter.updateState({
-        checkedKeys,
-        halfCheckedKeys
-      });
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          checkedKeys,
+          halfCheckedKeys
+        });
+      }
+    } else if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new _set.default(realCheckedKeys);
+      let targetStatus;
+
+      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/lib/cjs/treeSelect/foundation.d.ts

@@ -27,7 +27,7 @@ export interface BasicOnChange {
     (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
     (value: BasicTreeNodeData['value'] | Array<BasicTreeNodeData['value']>, node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
 }
-export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'onSearch' | 'expandAll' | 'disableStrictly' | 'aria-label'> {
+export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'onSearch' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation'> {
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -68,7 +68,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
     onVisibleChange?: (isVisible: boolean) => void;
     onLoad?: (keys: Set<string>, data: BasicTreeNodeData) => void;
 }
-export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData, 'keyEntities' | 'treeData' | 'flattenNodes' | 'selectedKeys' | 'checkedKeys' | 'halfCheckedKeys' | 'motionKeys' | 'motionType' | 'expandedKeys' | 'filteredKeys' | 'filteredExpandedKeys' | 'filteredShownKeys' | 'cachedKeyValuePairs' | 'inputValue' | 'disabledKeys' | 'loadedKeys' | 'loadingKeys'> {
+export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData, 'keyEntities' | 'treeData' | 'flattenNodes' | 'selectedKeys' | 'checkedKeys' | 'halfCheckedKeys' | 'motionKeys' | 'motionType' | 'expandedKeys' | 'filteredKeys' | 'filteredExpandedKeys' | 'filteredShownKeys' | 'cachedKeyValuePairs' | 'inputValue' | 'disabledKeys' | 'loadedKeys' | 'loadingKeys' | 'realCheckedKeys'> {
     inputTriggerFocus: boolean;
     isOpen: boolean;
     isInput: boolean;
@@ -82,7 +82,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;

package/lib/cjs/treeSelect/foundation.js

@@ -158,6 +158,7 @@ class TreeSelectFoundation extends _foundation.default {
       selectedKeys = [],
       checkedKeys = new _set.default([]),
       halfCheckedKeys = new _set.default([]),
+      realCheckedKeys = new _set.default([]),
       keyEntities = {},
       filteredKeys = new _set.default([]),
       inputValue = '',
@@ -167,13 +168,26 @@ class TreeSelectFoundation extends _foundation.default {
       disabledKeys = new _set.default([])
     } = this.getStates();
     const {
-      treeNodeFilterProp
+      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);
@@ -181,8 +195,8 @@ class TreeSelectFoundation extends _foundation.default {
       eventKey: key,
       expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: (0, _includes.default)(selectedKeys).call(selectedKeys, 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),
@@ -248,9 +262,17 @@ class TreeSelectFoundation extends _foundation.default {
       keyEntities
     } = this.getStates();
     const {
-      leafOnly
+      leafOnly,
+      checkRelation
     } = this.getProps();
-    const keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly);
+    let keyList = [];
+
+    if (checkRelation === 'related') {
+      keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly);
+    } else if (checkRelation === 'unRelated') {
+      keyList = key;
+    }
+
     const nodes = (0, _map.default)(keyList).call(keyList, i => keyEntities[i].data);
 
     if (this.getProp('onChangeWithObject')) {
@@ -376,7 +398,8 @@ class TreeSelectFoundation extends _foundation.default {
       this._adapter.updateState({
         selectedKeys: [],
         checkedKeys: new _set.default(),
-        halfCheckedKeys: new _set.default()
+        halfCheckedKeys: new _set.default(),
+        realCheckedKeys: new _set.default([])
       });
     } // When triggerSearch, clicking the clear button will trigger to clear Input
 
@@ -404,11 +427,13 @@ class TreeSelectFoundation extends _foundation.default {
 
   removeTag(eventKey) {
     const {
-      disableStrictly
+      disableStrictly,
+      checkRelation
     } = this.getProps();
     const {
       keyEntities,
-      disabledKeys
+      disabledKeys,
+      realCheckedKeys
     } = this.getStates();
     const item = keyEntities[eventKey].data;
 
@@ -416,20 +441,35 @@ class TreeSelectFoundation extends _foundation.default {
       return;
     }
 
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = this.calcCheckedKeys(eventKey, false);
+    if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new _set.default(realCheckedKeys);
+      newRealCheckedKeys.delete(eventKey);
 
-    this._notifyChange([...checkedKeys], null);
+      this._notifyChange([...newRealCheckedKeys], null);
 
-    if (!this._isControlledComponent()) {
-      this._adapter.updateState({
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          realCheckedKeys: newRealCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
+    } else if (checkRelation === 'related') {
+      const {
         checkedKeys,
         halfCheckedKeys
-      });
+      } = this.calcCheckedKeys(eventKey, false);
 
-      this._adapter.rePositionDropdown();
+      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
@@ -576,39 +616,67 @@ class TreeSelectFoundation extends _foundation.default {
   handleMultipleSelect(e, treeNode) {
     const {
       searchPosition,
-      disableStrictly
+      disableStrictly,
+      checkRelation
     } = this.getProps();
     const {
-      inputValue
+      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);
+    if (checkRelation === 'related') {
+      const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
+      const {
+        checkedKeys,
+        halfCheckedKeys
+      } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
 
-    this._notifyChange([...checkedKeys], e);
+      this._adapter.notifySelect(eventKey, targetStatus, data);
 
-    if (searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
-      this._adapter.updateState({
-        inputValue: ''
-      });
+      this._notifyChange([...checkedKeys], e);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          checkedKeys,
+          halfCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
+    } else if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new _set.default(realCheckedKeys);
+      let targetStatus;
+
+      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()) {
+    if (searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
       this._adapter.updateState({
-        checkedKeys,
-        halfCheckedKeys
+        inputValue: ''
       });
-
-      this._adapter.rePositionDropdown();
     }
   }
 

package/lib/cjs/upload/upload.css

@@ -53,11 +53,10 @@
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-add {
   display: inline-flex;
-  order: 2;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-prompt {
   display: inline-flex;
-  order: 1;
+  order: -1;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-file-list {
   order: 2;
@@ -237,15 +236,9 @@
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture-add {
   background-color: var(--semi-color-fill-0);
   height: 96px;
@@ -257,7 +250,6 @@
   border: 2px dashed var(--semi-color-border);
   color: var(--semi-color-tertiary);
   border-radius: var(--semi-border-radius-small);
-  order: 2;
   cursor: pointer;
 }
 .semi-upload-picture-add:hover {
@@ -297,35 +289,32 @@
   border-radius: var(--semi-border-radius-small);
 }
 .semi-upload-picture-file-card-close {
-  width: 16px;
-  height: 16px;
-  background-color: var(--semi-color-overlay-bg);
+  visibility: hidden;
+  display: inline-flex;
   position: absolute;
   top: 8px;
   right: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  display: none;
   border-radius: var(--semi-border-radius-circle);
-  color: white;
   cursor: pointer;
   transition: all 0s;
 }
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
-  display: flex;
-}
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
-  visibility: visible;
+.semi-upload-picture-file-card-icon-close {
+  font-size: 16px;
+  color: var(--semi-color-white);
 }
-.semi-upload-picture-file-card .semi-progress-circle {
+.semi-upload-picture-file-card::before {
+  visibility: hidden;
+  background-color: var(--semi-color-overlay-bg);
+  content: "";
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 .semi-upload-picture-file-card-retry {
-  background-color: #fff;
+  visibility: hidden;
+  background-color: var(--semi-color-white);
   width: 24px;
   height: 24px;
   position: absolute;
@@ -353,6 +342,15 @@
   color: var(--semi-color-white);
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-preview {
+  visibility: hidden;
+  display: inline-flex;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  left: 50%;
+  transform: translate3D(-50%, -50%, 0);
+}
 .semi-upload-picture-file-card-pic-info {
   display: inline-flex;
   box-sizing: border-box;
@@ -384,6 +382,30 @@
 .semi-upload-picture-file-card-error {
   outline: 1px solid var(--semi-color-danger);
 }
+.semi-upload-picture-file-card:hover::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview {
+  visibility: visible;
+}
+.semi-upload-picture-file-card-uploading::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card .semi-progress-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .semi-upload-drag-area {
   border-radius: var(--semi-border-radius-small);
   border: 2px dashed var(--semi-color-border);