From f8c7f88ac2a37c214011f1365334d30ae911804a Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 20 Feb 2025 12:16:22 +0800
Subject: [PATCH] feat: add custom modal for lock body scroller

---
 src/components/scroller-modal/index.tsx       | 19 +++++++++++++++++++
 src/pages/api-keys/components/add-apikey.tsx  |  7 ++++---
 .../resources/components/update-labels.tsx    |  7 ++++---
 src/pages/users/components/add-modal.tsx      |  7 ++++---
 4 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 src/components/scroller-modal/index.tsx

diff --git a/src/components/scroller-modal/index.tsx b/src/components/scroller-modal/index.tsx
new file mode 100644
index 00000000..3a3a41a8
--- /dev/null
+++ b/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;
diff --git a/src/pages/api-keys/components/add-apikey.tsx b/src/pages/api-keys/components/add-apikey.tsx
index e2223b28..1c68114e 100644
--- a/src/pages/api-keys/components/add-apikey.tsx
+++ b/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>
   );
 };
 
diff --git a/src/pages/resources/components/update-labels.tsx b/src/pages/resources/components/update-labels.tsx
index 3b2f8dfb..e2517f83 100644
--- a/src/pages/resources/components/update-labels.tsx
+++ b/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>
   );
 };
 
diff --git a/src/pages/users/components/add-modal.tsx b/src/pages/users/components/add-modal.tsx
index 9537906b..6ab859a4 100644
--- a/src/pages/users/components/add-modal.tsx
+++ b/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>
   );
 };