update: 二级弹窗内modal锁定paegModal的滚动

packages/app/src/components/modal/Modal.tsx

@@ -20,6 +20,7 @@ type Props = {
   width?: string;
   icon?: string;
   btnText?: string;
+  lockSelector?: string;
 };
 
 const Modal: FC<Props> = function(props) {
@@ -34,6 +35,7 @@ const Modal: FC<Props> = function(props) {
     width,
     icon,
     btnText,
+    lockSelector,
   } = props;
 
   const styles: ReactModalStyle = {
@@ -45,15 +47,15 @@ const Modal: FC<Props> = function(props) {
     },
   };
 
-  useEffect(
-    function() {
-      if (visible)
-        document.body.classList.add('lock-scroll');
-      else
-        document.body.classList.remove('lock-scroll');
-    },
-    [visible],
-  );
+  useEffect(function() {
+    if (lockSelector) {
+      const el = document.querySelector(lockSelector);
+
+      visible
+        ? el?.classList.add('lock-scroll')
+        : el?.classList.remove('lock-scroll');
+    }
+  }, [lockSelector, visible]);
 
   const isAdd = title.includes('新增');
   return (

packages/app/src/components/modal/PageModal.tsx

@@ -1,6 +1,6 @@
 import ReactModal from 'react-modal';
 import {Close} from '@icon-park/react';
-import {FC, PropsWithChildren, useEffect} from 'react';
+import {FC, PropsWithChildren} from 'react';
 
 const styles: ReactModal.Styles = {
   content: {
@@ -14,28 +14,18 @@ const styles: ReactModal.Styles = {
 type Props = {
   visible: boolean;
   onClose: () => void;
-  testId?: string;
+  'data-testid'?: string;
 };
 
-const PageModal: FC<PropsWithChildren<Props>> = function({
-  children,
-  visible,
-  onClose,
-  testId,
-}) {
-  useEffect(
-    function() {
-      if (visible)
-        document.body.classList.add('lock-scroll');
-      else
-        document.body.classList.remove('lock-scroll');
-    },
-    [visible],
-  );
+const PageModal: FC<PropsWithChildren<Props>> = function(props) {
+  const {
+    children,
+    visible,
+    onClose,
+  } = props;
 
   return (
     <ReactModal
-      data-testid={testId}
       shouldCloseOnOverlayClick
       onRequestClose={onClose}
       isOpen={visible}
@@ -43,7 +33,7 @@ const PageModal: FC<PropsWithChildren<Props>> = function({
       style={styles}
       closeTimeoutMS={200}
     >
-      <section className="ld-page-dialog">
+      <section className="ld-page-dialog" data-testid={props['data-testid']}>
         <div className="ld-page-dialog-close">
           <Close
             className="ld-page-dialog-close-icon"

packages/app/src/pages/menu-second/table/modal/index.tsx

@@ -25,6 +25,7 @@ const Modal: FC<Props> = function({id, visible, onFetch, onClose}) {
       data-test="menu_modal"
       onSubmit={onSubmit}
       isLoading={isLoading}
+      lockSelector={'.ld-page-dialog-content'}
     >
       <FormProvider {...formContext}>
         <LDErrorBoundary>

packages/app/src/pages/menu/table/second-modal/index.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const SceondModal: FC<Props> = function({pId, visible, onClose}) {
   return (
-    <LDPageModal visible={visible} onClose={onClose}>
+    <LDPageModal visible={visible} onClose={onClose} data-testid="second_menu">
       <MenuSecond pId={pId} />
     </LDPageModal>
   );

packages/app/src/styles/index.css

@@ -90,5 +90,5 @@ img {
 }
 
 .lock-scroll {
-  overflow: hidden;
+  overflow: hidden !important;
 }

packages/app/src/styles/modal.css

@@ -35,3 +35,7 @@
     transform: translateY(30px);
   }
 }
+
+.ReactModal__Body--open {
+  overflow: hidden;
+}