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; isShowFooter?: boolean;
/** 是否显示头部和底部组件，默认 true */ /** 是否显示头部和底部组件，默认 true */
isShowAllAction?: boolean; isShowAllAction?: boolean;
/** 是否处于加载状态，默认 false */
loading?: boolean;
/** 取消按钮文字，默认 "关闭" */ /** 取消按钮文字，默认 "关闭" */
backButtonText?: string; backButtonText?: string;
/** 内容区域的padding，默认 "20px" */ /** 内容区域的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 { useEffect, useState } from "react";
import { throttle } from "throttle-debounce"; import { throttle } from "throttle-debounce";
import HeaderBack from "../HeaderBack"; import HeaderBack from "../HeaderBack";
@ -14,6 +14,7 @@ function Page(props) {
headerPrevious = true, headerPrevious = true,
isShowFooter = true, isShowFooter = true,
isShowAllAction = true, isShowAllAction = true,
loading = false,
backButtonText = "关闭", backButtonText = "关闭",
contentPadding = "20px", contentPadding = "20px",
customActionButtons, customActionButtons,
@ -47,29 +48,31 @@ function Page(props) {
}, [isShowAllAction, isShowFooter]); }, [isShowAllAction, isShowFooter]);
return ( return (
<div className="page-layout" id="page-layout"> <Spin spinning={loading}>
{(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />} <div className="page-layout" id="page-layout">
<div style={{ padding: contentPadding }}> {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
{children && typeof children === "function" ? children() : children} <div style={{ padding: contentPadding }}>
{ {children && typeof children === "function" ? children() : children}
(isShowAllAction && isShowFooter) && ( {
<div className="page-layout-footer" style={{ position: "relative", zIndex: "9" }}> (isShowAllAction && isShowFooter) && (
<div style={{ height: "52px" }}></div> <div className="page-layout-footer" style={{ position: "relative", zIndex: "9" }}>
<div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -20px" }}> <div style={{ height: "52px" }}></div>
{customActionButtons || ( <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -20px" }}>
<Space> {customActionButtons || (
{extraActionButtons} <Space>
<Button onClick={() => history?.goBack?.() || window.history.back()}> {extraActionButtons}
{backButtonText} <Button onClick={() => history?.goBack?.() || window.history.back()}>
</Button> {backButtonText}
</Space> </Button>
)} </Space>
)}
</div>
</div> </div>
</div> )
) }
} </div>
</div> </div>
</div> </Spin>
); );
} }