feat: ModalStore优化对弹窗的支持，不叠加遮罩层以及增加抽屉多层次效果

src/components/ModalStore/src/CreateProvider.tsx

@@ -28,6 +28,8 @@ export interface ModalStoreState {
   currentModal: ModalItem[]
 }
 
+const indent = 8
+
 const ModalStore: React.FC<ModalStoreProps> = props => {
   const dispatch = useDispatch()
   const [state, setState] = useState<ModalStoreState>({
@@ -90,12 +92,7 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
         [visiblePropName]: key.startsWith('D') ? false : true,
         [onClosePropName]: getCloseFunction(key, compState?.[onClosePropName])
       }
-      isDrawer &&
-        compState?.dataId &&
-        dispatch({
-          type: 'refresh/commitAction',
-          payload: compState.dataId
-        })
+
       if (destroyOnClose) {
         const prop = typeof destroyOnClose === 'string' ? destroyOnClose : onClosePropName
 
@@ -120,12 +117,20 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
           return prevModals
         }
         nextModals.splice(index, 1)
+        compState?.dataId &&
+          dispatch({
+            type: 'refresh/commitAction',
+            payload: compState.dataId
+          })
       }
       nextModals.push(newModal)
 
       return nextModals
     })
     if (isDrawer) {
+      console.log(state.currentModal.find(item => item.key === key))
+
+      if (state.currentModal.find(item => item.key === key)) return
       // 利用事件循环，先让dom元素渲染出来再使其展示动画(否则可能导致抽屉无动画直接出现)
       setTimeout(() => {
         setModalState(prevModals =>
@@ -155,25 +160,30 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
   }
 
   function renderMaskProps(item: ModalItem) {
-    const isDrawer = item.key.startsWith('D')
-    // 没有dataId 不是抽屉
-    if (!isDrawer && !item.dataId) return item
-    const drawerStore = state.currentModal.filter(modal => modal.dataId).map(modal => modal.dataId)
+    const newItem = { ...item }
+    const isModal = item.key.startsWith('M')
+    const maskStyle: CSSProperties = {}
+    if (state.currentModal.findIndex(modal => modal.key === item.key) > 0) {
+      maskStyle.opacity = 0
+      maskStyle.animation = 'none'
+      newItem.maskStyle = maskStyle
+    }
+    if (isModal && !item.dataId) return newItem
+    const drawerStore = state.currentModal
+      .filter(modal => modal.key.startsWith('D'))
+      .map(modal => modal.dataId)
     const len = drawerStore.length
-    if (len === 1) return item
-    // 抽屉至少2个
     const currentIdx = drawerStore.findIndex(modal => modal === item.dataId)
-    if (currentIdx === 0) return item
-    if (currentIdx > 0) {
-      // 大于0说明是第二或以上的抽屉了
-      // console.log(len, currentIdx)
-
-      return {
-        ...item,
-        maskStyle: { opacity: 0, animation: 'none' } as CSSProperties
-      }
+    if (len - 1 === currentIdx) return newItem
+    // 抽屉大于2个
+
+    return {
+      ...item,
+      style: {
+        transform: `translateX(-${indent * (len - currentIdx - 1)}px)`
+      },
+      maskStyle
     }
-    return item
   }
   const { currentModal } = state
   const { children } = props