perf: 滚动条

src/components/SecondHeaderWrapper.jsx

@@ -10,8 +10,8 @@ const HeaderWrapper = ({ children, header, loading, backTo, ...props }) => {
   } = theme.useToken();
   return (
     <>
-      <Spin spinning={loading || false}>
-        <Layout className=' bg-white'>
+      <Spin spinning={loading || false} wrapperClassName='h-full [&_.ant-spin-container]:h-full' >
+        <Layout className=' bg-white h-full'>
           <Header className='header px-6 h-10 ' style={{ background: 'white' }}>
             <Flex justify={'space-between'} align={'center'} className='h-full'>
               {/* {header} */}
@@ -20,7 +20,7 @@ const HeaderWrapper = ({ children, header, loading, backTo, ...props }) => {
             </Flex>
           </Header>
           <Divider className='my-2' />
-          <Content className='' style={{ backgroundColor: colorBgContainer }}>
+          <Content className='overflow-auto' style={{ backgroundColor: colorBgContainer }}>
             {children || <Outlet />}
           </Content>
         </Layout>

src/views/App.jsx

@@ -98,7 +98,7 @@ function App() {
       </FloatButton.Group>
       {contextHolder}
       <ErrorBoundary>
-				<Layout className='min-h-screen'>
+				<Layout className='min-h-screen h-dvh'>
 					<Header className='sticky top-0 z-10 w-full'>
 						<Row gutter={{ md: 24 }} justify='end' align='middle'>
 							<Col span={15}>
@@ -159,7 +159,7 @@ function App() {
 							</Col>
 						</Row>
 					</Header>
-					<Content className='p-6 m-0 min-h-72 bg-white'>
+					<Content className='p-6 m-0 min-h-72 bg-white overflow-auto'>
             {needToLogin ? <>login...</> : <Outlet />}
 					</Content>
           <Footer>China Highlights International Travel Service Co., LTD, Version: {BUILD_VERSION}</Footer>

src/views/products/Detail.jsx

@@ -43,11 +43,11 @@ function Detail() {
       backTo={false}
       header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} handleNewProduct={() => setAddProductVisible(true)} />}>
       <>
-        <Flex gap={10}>
+        <Flex gap={10} className='h-full'>
           {/* onNodeSelect={handleNodeSelect} */}
-          <ProductsTree className='basis-80 sticky top-16 overflow-y-auto shrink-0' style={{ height: 'calc(100vh - 150px)' }} />
+          <ProductsTree className='basis-80 sticky top-0 overflow-y-auto shrink-0' style1={{ height: 'calc(100vh - 150px)' }} />
           <Divider type={'vertical'} className='mx-1 h-auto' />
-          <div className=' flex-auto '>
+          <div className=' flex-auto overflow-auto '>
             <ProductInfo />
           </div>
         </Flex>