feat: add custom modal for lock body scroller

src/components/scroller-modal/index.tsx

@@ -0,0 +1,19 @@
+import useBodyScroll from '@/hooks/use-body-scroll';
+import { Modal, type ModalProps } from 'antd';
+import React from 'react';
+
+const ScrollerModal = (props: ModalProps) => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
+
+  React.useEffect(() => {
+    if (props.open) {
+      saveScrollHeight();
+    } else {
+      restoreScrollHeight();
+    }
+  }, [props.open]);
+
+  return <Modal {...props} />;
+};
+
+export default ScrollerModal;

src/pages/api-keys/components/add-apikey.tsx

@@ -1,11 +1,12 @@
 import CopyButton from '@/components/copy-button';
 import ModalFooter from '@/components/modal-footer';
+import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
-import { Button, Form, Modal, Tag } from 'antd';
+import { Button, Form, Tag } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { createApisKey } from '../apis';
@@ -92,7 +93,7 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   return (
-    <Modal
+    <ScrollerModal
       title={
         !showKey ? title : intl.formatMessage({ id: 'apikeys.title.save' })
       }
@@ -200,7 +201,7 @@ const AddModal: React.FC<AddModalProps> = ({
           </Form.Item>
         )}
       </Form>
-    </Modal>
+    </ScrollerModal>
   );
 };
 

src/pages/resources/components/update-labels.tsx

@@ -1,8 +1,9 @@
 import LabelSelector from '@/components/label-selector';
 import ModalFooter from '@/components/modal-footer';
+import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
 import { useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 import SimpleBar from 'simplebar-react';
@@ -37,7 +38,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
   };
 
   return (
-    <Modal
+    <ScrollerModal
       title={intl.formatMessage({ id: 'resources.button.edit' })}
       open={open}
       centered={true}
@@ -131,7 +132,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
           </Form.Item>
         </Form>
       </SimpleBar>
-    </Modal>
+    </ScrollerModal>
   );
 };
 

src/pages/users/components/add-modal.tsx

@@ -1,11 +1,12 @@
 import ModalFooter from '@/components/modal-footer';
+import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction, PasswordReg } from '@/config';
 import { PageActionType } from '@/config/types';
 import { UserOutlined, UserSwitchOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form, Modal, Select } from 'antd';
+import { Form, Select } from 'antd';
 import { useEffect } from 'react';
 import { UserRoles, UserRolesOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
@@ -51,7 +52,7 @@ const AddModal: React.FC<AddModalProps> = ({
   }, [open]);
 
   return (
-    <Modal
+    <ScrollerModal
       title={title}
       open={open}
       centered={true}
@@ -128,7 +129,7 @@ const AddModal: React.FC<AddModalProps> = ({
           ></SealInput.Password>
         </Form.Item>
       </Form>
-    </Modal>
+    </ScrollerModal>
   );
 };