zy-react-library/src/components/Page/index.js

import { Button, Space } from "antd";
import { useEffect, useState } from "react";
import HeaderBack from "../HeaderBack";

/**
 * 页面布局组件
 */
function Page(props) {
  const {
    headerTitle,
    history,
    isShowHeader = true,
    headerPrevious = true,
    isShowFooter = true,
    isShowAllAction = true,
    backButtonText = "关闭",
    contentPadding = "20px",
    customActionButtons,
    extraActionButtons,
  } = 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);
    if (isShowAllAction && isShowFooter) {
      window.addEventListener("resize", getPageWidth);
    }

    return () => {
      if (isShowAllAction && isShowFooter) {
        window.removeEventListener("resize", getPageWidth);
      }
      clearTimeout(timer);
    };
  }, [isShowAllAction, isShowFooter]);

  return (
    <div className="page" id="page">
      {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
      <div style={{ padding: contentPadding }}>
        {props.children}
        {
          (isShowAllAction && isShowFooter) && (
            <>
              <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 || (
                  <Space>
                    {extraActionButtons}
                    <Button onClick={() => history?.goBack?.() || window.history.back()}>
                      {backButtonText}
                    </Button>
                  </Space>
                )}
              </div>
            </>
          )
        }
      </div>
    </div>
  );
}

Page.displayName = "Page";

export default Page;