diff --git a/src/components/delete-modal/index.tsx b/src/components/delete-modal/index.tsx index 227403b5..caaf4acf 100644 --- a/src/components/delete-modal/index.tsx +++ b/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 ( diff --git a/src/hooks/use-body-scroll.ts b/src/hooks/use-body-scroll.ts index b1ddddf6..bd471459 100644 --- a/src/hooks/use-body-scroll.ts +++ b/src/hooks/use-body-scroll.ts @@ -7,6 +7,7 @@ export default function useBodyScroll() { const bodyScroller = React.useRef(null); const instanceRef = React.useRef(null); + const timer = React.useRef(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); - - bodyScroller.current?.scrollTo?.({ - top: scrollHeight.current, - behavior: 'smooth' - }); - - instanceRef.current?.options?.({ - overflow: { - x: 'hidden', - y: 'scroll' - } - }); - - instanceRef.current?.update?.(); + if (timer.current) { + clearTimeout(timer.current); + } + timer.current = setTimeout(() => { + instanceRef.current?.options?.({ + overflow: { + x: 'hidden', + y: 'scroll' + } + }); + }, 1000); }, []); React.useEffect(() => { diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx index 5d440a76..d6f2e158 100644 --- a/src/pages/llmodels/catalog.tsx +++ b/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, diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx index 90fde20e..5115ec9d 100644 --- a/src/pages/llmodels/components/instance-item.tsx +++ b/src/pages/llmodels/components/instance-item.tsx @@ -225,6 +225,8 @@ const InstanceItem: React.FC = ({ = ({ = ({ 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 = ({ setOpenAddModal(false); message.success(intl.formatMessage({ id: 'common.message.success' })); handleSearch(); + restoreScrollHeight(); } catch (error) {} }, [currentData] @@ -369,6 +372,7 @@ const Models: React.FC = ({ const handleModalCancel = useCallback(() => { setOpenAddModal(false); + restoreScrollHeight(); }, []); const handleDeployModalCancel = () => { @@ -408,6 +412,7 @@ const Models: React.FC = ({ const handleLogModalCancel = useCallback(() => { setOpenLogModal(false); onCancelViewLogs(); + restoreScrollHeight(); }, [onCancelViewLogs]); const handleDelete = async (row: any) => { @@ -478,6 +483,7 @@ const Models: React.FC = ({ }); setOpenLogModal(true); onViewLogs(); + saveScrollHeight(); } catch (error) { console.log('error:', error); } @@ -518,6 +524,7 @@ const Models: React.FC = ({ const handleEdit = (row: ListItem) => { setCurrentData(row); setOpenAddModal(true); + saveScrollHeight(); }; const handleSelect = useCallback(