优化Page

src/components/Page/index.js

@@ -1,5 +1,6 @@
 import { Button, Space } from "antd";
 import { useEffect, useState } from "react";
+import { throttle } from "throttle-debounce";
 import HeaderBack from "../HeaderBack";
 
 /**
@@ -21,12 +22,12 @@ function Page(props) {
 
   const [pageWidth, setPageWidth] = useState(window.innerWidth);
 
-  const getPageWidth = () => {
-    const pageDom = document.querySelector("#page");
+  const getPageWidth = throttle(50, () => {
+    const pageDom = document.querySelector("#page-layout");
     if (!pageDom)
       return;
     setPageWidth(pageDom.offsetWidth);
-  };
+  });
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -45,13 +46,13 @@ function Page(props) {
   }, [isShowAllAction, isShowFooter]);
 
   return (
-    <div className="page" id="page">
+    <div className="page-layout" id="page-layout">
       {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
       <div style={{ padding: contentPadding }}>
         {props.children}
         {
           (isShowAllAction && isShowFooter) && (
-            <>
+            <div className="page-layout-footer" style={{ position: "relative", zIndex: "9" }}>
               <div style={{ height: "52px" }}></div>
               <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -20px" }}>
                 {customActionButtons || (
@@ -63,7 +64,7 @@ function Page(props) {
                   </Space>
                 )}
               </div>
-            </>
+            </div>
           )
         }
       </div>