优化FormBuilder

src/components/FormBuilder/FormBuilder.js

@@ -1,4 +1,5 @@
 import { Button, Col, Form, message, Row, Space, Spin } from "antd";
+import { useEffect, useState } from "react";
 import FormItemsRenderer from "./FormItemsRenderer";
 
 /**
@@ -23,6 +24,26 @@ const FormBuilder = (props) => {
     ...restProps
   } = props;
 
+  const [pageWidth, setPageWidth] = useState(window.innerWidth);
+
+  const getPageWidth = () => {
+    const pageDom = document.querySelector("#page");
+    if (!pageDom)
+      return;
+    setPageWidth(pageDom.offsetWidth);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      getPageWidth();
+    }, 0);
+    window.addEventListener("resize", getPageWidth);
+    return () => {
+      window.removeEventListener("resize", getPageWidth);
+      clearTimeout(timer);
+    };
+  }, []);
+
   const handleCancel = () => {
     window.history.back();
   };
@@ -51,11 +72,10 @@ const FormBuilder = (props) => {
           />
         </Row>
         {showActionButtons && (
-          <div style={{ transform: 'scale(1)', margin: '0px -44px' }}>
+          <>
-            <div style={{ height: "52px" }}></div>
+            <div style={{ height: "32px" }}></div>
             <Row
-              gutter={gutter}
+              style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0 -44px" }}
-              style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: "100%" }}
             >
               <Col span={24} style={{ textAlign: "center" }}>
                 {customActionButtons || (
@@ -75,7 +95,7 @@ const FormBuilder = (props) => {
                 )}
               </Col>
             </Row>
-          </div>
+          </>
         )}
       </Form>
     </Spin>