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

feat(Page): 添加loading状态支持

master
LiuJiaNan 2026-06-01 08:28:26 +08:00
parent 2b19504196
commit 24d8ddcee5
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Page/index.d.ts vendored
View File

@ -16,6 +16,8 @@ export interface PageProps {
isShowFooter?: boolean;
/** 是否显示头部和底部组件，默认 true */
isShowAllAction?: boolean;
/** 是否处于加载状态，默认 false */
loading?: boolean;
/** 取消按钮文字，默认 "关闭" */
backButtonText?: string;
/** 内容区域的padding，默认 "20px" */

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

@ -1,4 +1,4 @@
import { Button, Space } from "antd";
import { Button, Space, Spin } from "antd";
import { useEffect, useState } from "react";
import { throttle } from "throttle-debounce";
import HeaderBack from "../HeaderBack";
@ -14,6 +14,7 @@ function Page(props) {
headerPrevious = true,
isShowFooter = true,
isShowAllAction = true,
loading = false,
backButtonText = "关闭",
contentPadding = "20px",
customActionButtons,
@ -47,29 +48,31 @@ function Page(props) {
}, [isShowAllAction, isShowFooter]);
return (
<div className="page-layout" id="page-layout">
{(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
<div style={{ padding: contentPadding }}>
{children && typeof children === "function" ? children() : 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 || (
<Space>
{extraActionButtons}
<Button onClick={() => history?.goBack?.() || window.history.back()}>
{backButtonText}
</Button>
</Space>
)}
<Spin spinning={loading}>
<div className="page-layout" id="page-layout">
{(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
<div style={{ padding: contentPadding }}>
{children && typeof children === "function" ? children() : 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 || (
<Space>
{extraActionButtons}
<Button onClick={() => history?.goBack?.() || window.history.back()}>
{backButtonText}
</Button>
</Space>
)}
</div>
</div>
</div>
)
}
)
}
</div>
</div>
</div>
</Spin>
);
}