style: lock body scroll bar when open a modal

src/components/delete-modal/index.tsx

@@ -1,3 +1,4 @@
+import useBodyScroll from '@/hooks/use-body-scroll';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Modal, Space, message, type ModalFuncProps } from 'antd';
@@ -6,6 +7,7 @@ import Styles from './index.less';
 
 const DeleteModal = forwardRef((props, ref) => {
   const intl = useIntl();
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [visible, setVisible] = useState(false);
   const [config, setConfig] = useState<
     ModalFuncProps & {
@@ -31,23 +33,27 @@ const DeleteModal = forwardRef((props, ref) => {
         operation: string;
       }
     ) => {
+      saveScrollHeight();
       setConfig(data);
       setVisible(true);
     },
     hide: () => {
       setVisible(false);
+      restoreScrollHeight();
     }
   }));
 
   const handleCancel = () => {
     setVisible(false);
     config.onCancel?.();
+    restoreScrollHeight();
   };
 
   const handleOk = async () => {
     await config.onOk?.();
     message.success(intl.formatMessage({ id: 'common.message.success' }));
     setVisible(false);
+    restoreScrollHeight();
   };
 
   return (

src/hooks/use-body-scroll.ts

@@ -7,6 +7,7 @@ export default function useBodyScroll() {
   const bodyScroller = React.useRef<any>(null);
 
   const instanceRef = React.useRef<any>(null);
+  const timer = React.useRef<any>(null);
 
   const int = () => {
     bodyScroller.current =
@@ -16,10 +17,11 @@ export default function useBodyScroll() {
   };
 
   const saveScrollHeight = React.useCallback(() => {
+    if (!bodyScroller.current) {
+      int();
+    }
     scrollerState.current = instanceRef.current?.state();
 
-    console.log('saveScrollHeight', scrollerState.current?.overflowAmount?.y);
-
     const scrollTop = scrollerState.current?.overflowAmount?.y;
     scrollHeight.current = scrollTop;
     instanceRef.current?.options?.({
@@ -31,21 +33,17 @@ export default function useBodyScroll() {
   }, []);
 
   const restoreScrollHeight = React.useCallback(() => {
-    console.log('saveScrollHeight++++++++++', scrollHeight.current);
+    if (timer.current) {
-
+      clearTimeout(timer.current);
-    bodyScroller.current?.scrollTo?.({
+    }
-      top: scrollHeight.current,
+    timer.current = setTimeout(() => {
-      behavior: 'smooth'
+      instanceRef.current?.options?.({
-    });
+        overflow: {
-
+          x: 'hidden',
-    instanceRef.current?.options?.({
+          y: 'scroll'
-      overflow: {
+        }
-        x: 'hidden',
+      });
-        y: 'scroll'
+    }, 1000);
-      }
-    });
-
-    instanceRef.current?.update?.();
   }, []);
 
   React.useEffect(() => {

src/pages/llmodels/catalog.tsx

@@ -1,6 +1,7 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
+import useBodyScroll from '@/hooks/use-body-scroll';
 import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
@@ -16,6 +17,7 @@ import { CatalogItem as CatalogItemType, FormData } from './config/types';
 
 const Catalog: React.FC = () => {
   const intl = useIntl();
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const navigate = useNavigate();
   const [activeId, setActiveId] = React.useState(-1);
   const [isFirst, setIsFirst] = React.useState(true);
@@ -109,10 +111,12 @@ const Catalog: React.FC = () => {
       ...openDeployModal,
       show: false
     });
+    restoreScrollHeight();
     setActiveId(-1);
   };
 
   const handleOnDeploy = useCallback((item: CatalogItemType) => {
+    saveScrollHeight();
     setActiveId(item.id);
     setOpenDeployModal({
       show: true,

src/pages/llmodels/components/instance-item.tsx

@@ -225,6 +225,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         <Tag
                           color="cyan"
                           style={{
+                            display: 'flex',
+                            alignItems: 'center',
                             maxWidth: '100%',
                             minWidth: 50,
                             textOverflow: 'ellipsis',
@@ -251,6 +253,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         <Tag
                           color="processing"
                           style={{
+                            display: 'flex',
+                            alignItems: 'center',
                             maxWidth: '100%',
                             minWidth: 50,
                             textOverflow: 'ellipsis',

src/pages/llmodels/components/table-list.tsx

@@ -9,6 +9,7 @@ import SealTable from '@/components/seal-table';
 import SealColumn from '@/components/seal-table/components/seal-column';
 import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
+import useBodyScroll from '@/hooks/use-body-scroll';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
@@ -130,6 +131,7 @@ const Models: React.FC<ModelsProps> = ({
   loadend,
   total
 }) => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [expandAtom, setExpandAtom] = useAtom(modelsExpandKeysAtom);
   const access = useAccess();
   const intl = useIntl();
@@ -362,6 +364,7 @@ const Models: React.FC<ModelsProps> = ({
         setOpenAddModal(false);
         message.success(intl.formatMessage({ id: 'common.message.success' }));
         handleSearch();
+        restoreScrollHeight();
       } catch (error) {}
     },
     [currentData]
@@ -369,6 +372,7 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleModalCancel = useCallback(() => {
     setOpenAddModal(false);
+    restoreScrollHeight();
   }, []);
 
   const handleDeployModalCancel = () => {
@@ -408,6 +412,7 @@ const Models: React.FC<ModelsProps> = ({
   const handleLogModalCancel = useCallback(() => {
     setOpenLogModal(false);
     onCancelViewLogs();
+    restoreScrollHeight();
   }, [onCancelViewLogs]);
 
   const handleDelete = async (row: any) => {
@@ -478,6 +483,7 @@ const Models: React.FC<ModelsProps> = ({
         });
         setOpenLogModal(true);
         onViewLogs();
+        saveScrollHeight();
       } catch (error) {
         console.log('error:', error);
       }
@@ -518,6 +524,7 @@ const Models: React.FC<ModelsProps> = ({
   const handleEdit = (row: ListItem) => {
     setCurrentData(row);
     setOpenAddModal(true);
+    saveScrollHeight();
   };
 
   const handleSelect = useCallback(