diff --git a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap index 5dee956ae..32d4bac5b 100644 --- a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap @@ -5,41 +5,8 @@ exports[`PageContainer > basic 1`] = ` class="ant-pro-page-container ant-pro-page-container-with-footer" >
-
@@ -52,39 +19,6 @@ exports[`PageContainer > basic 1`] = ` > 页面标题 - -
-
- - - -
-
-
basic 1`] = ` class="ant-pro-page-container-children-container" >
- - - +
+
-
+ + +
-
+
+
+ + + - - 创建人 - - - - 曲丽丽 - - - - - + - + - - - + + - - 关联表单 - - - - - 421421 - - - - - - + - + - - -
-
- + 创建人 + + + + 曲丽丽 + + +
+ 		- 电话号码 - - - - 1810000000 - - - - -
- + 电话号码 + + + + 1810000000 + + +
+ 		- 地址 - - - - 浙江省杭州市西湖区工专路 - - - -
-
+ 地址 + + + + 浙江省杭州市西湖区工专路 + + +
+
-
- + 关联表单 + + + + + 421421 + + + +
+ 		- 创建时间 - - - - 2017-01-10 - - - - -
- + 创建时间 + + + + 2017-01-10 + + +
+ 		- 备注 - - - - 这是备注 - - - -
+ + 备注 + + + + 这是备注 + + +
+
+
+
@@ -380,8 +331,7 @@ exports[`PageContainer > extra and footer 1`] = ` class="ant-page-header-heading-sub-title" >
extra and footer 1`] = ` class="ant-pro-page-container-children-container" >
- - - - + + +
-
+
+ + + - - 创建人 - - - - 曲丽丽 - - - - - + - + - - - + + - - 关联表单 - - - - - 421421 - - - - - - + - + - - -
-
- + 创建人 + + + + 曲丽丽 + + +
+ 		- 电话号码 - - - - 1810000000 - - - - -
- - 地址 - - + 电话号码 + + + + 1810000000 + + +
+ 		- - 浙江省杭州市西湖区工专路 - - - -
-
+ 地址 + + + + 浙江省杭州市西湖区工专路 + + +
+
-
- - 创建时间 - - + 关联表单 + + + + + 421421 + + + +
+ 		- - 2017-01-10 - - - - -
- - 备注 - - + 创建时间 + + + + 2017-01-10 + + +
+ 		- - 这是备注 - - - -
+ + 备注 + + + + 这是备注 + + +
+
+
+
diff --git a/packages/ui/src/PageContainer/demo/basic.tsx b/packages/ui/src/PageContainer/demo/basic.tsx index f60f581a7..59e62f5ad 100644 --- a/packages/ui/src/PageContainer/demo/basic.tsx +++ b/packages/ui/src/PageContainer/demo/basic.tsx @@ -1,54 +1,17 @@ /** * iframe: 600 */ -import React, { useState } from 'react'; -import { Button, Descriptions, Dropdown, message } from '@oceanbase/design'; +import React from 'react'; +import { Button, Card, Descriptions, Dropdown } from '@oceanbase/design'; import { PageContainer } from '@oceanbase/ui'; import { EllipsisOutlined } from '@oceanbase/icons'; export default () => { - const [loading, setLoading] = useState(false); - - const mockRequest = () => { - const promise = new Promise(resolve => { - setTimeout(() => { - resolve(); - }, 1000); - }); - setLoading(true); - promise.then(() => { - setLoading(false); - message.success('刷新成功'); - }); - return promise; - }; return ( { - mockRequest(); - }, - }, - breadcrumb: { - items: [ - { - href: '', - title: '一级页面', - }, - { - href: '', - title: '二级页面', - }, - { - title: '当前页面', - }, - ], - }, extra: [ , , ]} > - - 曲丽丽 - 1810000000 - 浙江省杭州市西湖区工专路 - - 421421 - - 2017-01-10 - 这是备注 - + + + 曲丽丽 + 1810000000 + 浙江省杭州市西湖区工专路 + + 421421 + + 2017-01-10 + 这是备注 + + ); }; diff --git a/packages/ui/src/PageContainer/demo/complete.tsx b/packages/ui/src/PageContainer/demo/complete.tsx index be52c4738..04e63b076 100644 --- a/packages/ui/src/PageContainer/demo/complete.tsx +++ b/packages/ui/src/PageContainer/demo/complete.tsx @@ -1,7 +1,16 @@ -import { EllipsisOutlined } from '@oceanbase/icons'; -import { Button, Card, Descriptions, Dropdown, Modal, message, Table } from '@oceanbase/design'; -import { PageContainer } from '@oceanbase/ui'; import React, { useState } from 'react'; +import { + Button, + Card, + Descriptions, + Dropdown, + Modal, + message, + Table, + Space, +} from '@oceanbase/design'; +import { PageContainer } from '@oceanbase/ui'; +import { EllipsisOutlined } from '@oceanbase/icons'; export default () => { const [loading, setLoading] = useState(false); @@ -106,6 +115,7 @@ export default () => { loading={loading} header={{ title: '页面标题', + onBack: () => {}, reload: { spin: loading, onClick: () => { @@ -174,31 +184,35 @@ export default () => { }} footer={[, ]} > - - 曲丽丽 - 1810000000 - 浙江省杭州市西湖区工专路 - - 421421 - - 2017-01-10 - 这是备注 - - - - + + + + 曲丽丽 + 1810000000 + 浙江省杭州市西湖区工专路 + + 421421 + + 2017-01-10 + 这是备注 + + + +
+ + ); }; diff --git a/packages/ui/src/PageContainer/demo/empty.tsx b/packages/ui/src/PageContainer/demo/empty.tsx index 5ee82a0b6..6110a9fe6 100644 --- a/packages/ui/src/PageContainer/demo/empty.tsx +++ b/packages/ui/src/PageContainer/demo/empty.tsx @@ -18,14 +18,11 @@ export default () => { display: 'flex', justifyContent: 'center', alignItems: 'center', - height: 'calc(100vh - 48px - 72px - 24px)', + height: 'calc(100vh - 72px - 24px)', }} > - 暂无数据} - image="https://mdn.alipayobjects.com/huamei_n8rchn/afts/img/A*GIGHRpu40ZoAAAAAAAAAAAAADvSFAQ/original" - > - + + diff --git a/packages/ui/src/PageContainer/demo/extra-footer.tsx b/packages/ui/src/PageContainer/demo/extra-footer.tsx index dad2569a2..71ed4549e 100644 --- a/packages/ui/src/PageContainer/demo/extra-footer.tsx +++ b/packages/ui/src/PageContainer/demo/extra-footer.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { Button, + Card, DatePicker, Descriptions, Dropdown, @@ -157,16 +158,18 @@ export default () => { , ]} > - - 曲丽丽 - 1810000000 - 浙江省杭州市西湖区工专路 - - 421421 - - 2017-01-10 - 这是备注 - + + + 曲丽丽 + 1810000000 + 浙江省杭州市西湖区工专路 + + 421421 + + 2017-01-10 + 这是备注 + + ); }; diff --git a/packages/ui/src/PageContainer/demo/with-tabs.tsx b/packages/ui/src/PageContainer/demo/with-tabs.tsx index 2b75053eb..c8df68a5d 100644 --- a/packages/ui/src/PageContainer/demo/with-tabs.tsx +++ b/packages/ui/src/PageContainer/demo/with-tabs.tsx @@ -3,7 +3,7 @@ */ import React, { useState } from 'react'; import { EllipsisOutlined } from '@oceanbase/icons'; -import { Button, Descriptions, Dropdown, Input, Radio, Tabs, message } from '@oceanbase/design'; +import { Button, Card, Dropdown, Tabs, message } from '@oceanbase/design'; import { PageContainer } from '@oceanbase/ui'; export default () => { @@ -77,19 +77,26 @@ export default () => { , ], }} - footer={[, ]} > + This is content of Tab 1 + + ), }, { key: '2', label: 'Tab 2', - children: 'This is content of Tab 2', + children: ( + + This is content of Tab 2 + + ), }, ]} tabBarExtraContent="This is tabBarExtraContent content" diff --git a/packages/ui/src/PageContainer/index.md b/packages/ui/src/PageContainer/index.md index 940ff7765..83b93d24c 100644 --- a/packages/ui/src/PageContainer/index.md +++ b/packages/ui/src/PageContainer/index.md @@ -13,14 +13,14 @@ nav: ## 代码演示 - + - - - + + + diff --git a/packages/ui/src/PageContainer/index.tsx b/packages/ui/src/PageContainer/index.tsx index 76e3a315c..90418376d 100644 --- a/packages/ui/src/PageContainer/index.tsx +++ b/packages/ui/src/PageContainer/index.tsx @@ -59,7 +59,7 @@ const PageContainer = ({ ); const newSubTitle = (reload || subTitle) && ( - + {reload && ( {isObject(reload) && React.isValidElement(reload) ? ( diff --git a/packages/ui/src/PageContainer/style/index.ts b/packages/ui/src/PageContainer/style/index.ts index 567fb9726..222d6dab1 100644 --- a/packages/ui/src/PageContainer/style/index.ts +++ b/packages/ui/src/PageContainer/style/index.ts @@ -39,9 +39,12 @@ export const genPageContainerStyle: GenerateStyle = ( }, [`${antCls}-page-header-heading-title`]: { fontSize: fontSizeHeading3, + marginInlineEnd: token.marginXS, }, [`${antCls}-page-header-heading-reload`]: { cursor: 'pointer', + fontSize: token.fontSizeLG, + marginTop: token.marginXXS, }, [`${antCls}-page-header-heading-extra`]: { height,