fix: 修改modal滚动问题

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

@@ -1,5 +1,5 @@
 import css from './index.module.css';
-import {FC, FormEventHandler, ReactNode} from 'react';
+import {FC, FormEventHandler, ReactNode, useEffect} from 'react';
 import ReactModal from 'react-modal';
 import {CloseCircleFilled} from '@ant-design/icons';
 import ModalBtnGroup from './BtnGroup';
@@ -43,6 +43,17 @@ const Modal: FC<Props> = function ({
     },
   };
 
+  useEffect(
+    function () {
+      if (visible) {
+        document.body.classList.add('lock-scroll');
+      } else {
+        document.body.classList.remove('lock-scroll');
+      }
+    },
+    [visible],
+  );
+
   const isAdd = title.includes('新增');
   return (
     <ReactModal

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

@@ -2,12 +2,14 @@ import ReactModal from 'react-modal';
 import {ChildrenFC} from '@utils';
 import css from './index.module.css';
 import {CloseCircleFilled} from '@ant-design/icons';
+import {useEffect} from 'react';
 
 const styles: ReactModal.Styles = {
   content: {
     width: '90vw',
     height: '90vh',
     position: 'relative',
+    overflow: 'hidden',
   },
 };
 
@@ -23,6 +25,17 @@ const PageModal: ChildrenFC<Props> = function ({
   onClose,
   testId,
 }) {
+  useEffect(
+    function () {
+      if (visible) {
+        document.body.classList.add('lock-scroll');
+      } else {
+        document.body.classList.remove('lock-scroll');
+      }
+    },
+    [visible],
+  );
+
   return (
     <ReactModal
       data-testid={testId}

packages/app/src/styles/index.css

@@ -108,3 +108,7 @@ html {
   align-items: center;
   justify-content: center;
 }
+
+.lock-scroll {
+  overflow: hidden;
+}

packages/app/src/styles/modal.css

@@ -15,7 +15,6 @@
 .ReactModal__Content {
   position: static !important;
   padding: 0 !important;
-  overflow: hidden !important;
   border-radius: 10px;
   transition: transform 200ms ease-in-out !important;
   transform: translateY(30px);