front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化Page

master
LiuJiaNan 2025-12-27 09:52:25 +08:00
parent cf529ee0c9
commit 474a95dcb2
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Page/index.js
View File

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