Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve(ui): PageContainer style #588

Merged
merged 2 commits into from
May 11, 2024
Merged

improve(ui): PageContainer style #588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99c58bc
improve(ui): PageContainer style
dengfuping May 11, 2024
a5572e5
fix(test): Update snapshots
dengfuping May 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
654 changes: 306 additions & 348 deletions packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

63 changes: 14 additions & 49 deletions packages/ui/src/PageContainer/demo/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<void>(resolve => {
setTimeout(() => {
resolve();
}, 1000);
});
setLoading(true);
promise.then(() => {
setLoading(false);
message.success('刷新成功');
});
return promise;
};
return (
<PageContainer
ghost={false}
loading={loading}
header={{
title: '页面标题',
reload: {
spin: loading,
onClick: () => {
mockRequest();
},
},
breadcrumb: {
items: [
{
href: '',
title: '一级页面',
},
{
href: '',
title: '二级页面',
},
{
title: '当前页面',
},
],
},
extra: [
<Button key="1">次要按钮</Button>,
<Button key="2" type="primary">
Expand Down Expand Up @@ -80,16 +43,18 @@ export default () => {
}}
footer={[<Button>重置</Button>, <Button type="primary">提交</Button>]}
>
<Descriptions>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="电话号码">1810000000</Descriptions.Item>
<Descriptions.Item label="地址">浙江省杭州市西湖区工专路</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="备注">这是备注</Descriptions.Item>
</Descriptions>
<Card bordered={false}>
<Descriptions title="基本信息">
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="电话号码">1810000000</Descriptions.Item>
<Descriptions.Item label="地址">浙江省杭州市西湖区工专路</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="备注">这是备注</Descriptions.Item>
</Descriptions>
</Card>
</PageContainer>
);
};
70 changes: 42 additions & 28 deletions packages/ui/src/PageContainer/demo/complete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -106,6 +115,7 @@ export default () => {
loading={loading}
header={{
title: '页面标题',
onBack: () => {},
reload: {
spin: loading,
onClick: () => {
Expand Down Expand Up @@ -174,31 +184,35 @@ export default () => {
}}
footer={[<Button>重置</Button>, <Button type="primary">提交</Button>]}
>
<Descriptions>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="电话号码">1810000000</Descriptions.Item>
<Descriptions.Item label="地址">浙江省杭州市西湖区工专路</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="备注">这是备注</Descriptions.Item>
</Descriptions>
<Card
bordered={false}
tabList={[
{
tab: '基本信息',
key: 'base',
},
{
tab: '详细信息',
key: 'info',
},
]}
>
<Table columns={columns} dataSource={dataSource} />
</Card>
<Space size={16} direction="vertical">
<Card bordered={false}>
<Descriptions>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="电话号码">1810000000</Descriptions.Item>
<Descriptions.Item label="地址">浙江省杭州市西湖区工专路</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="备注">这是备注</Descriptions.Item>
</Descriptions>
</Card>
<Card
bordered={false}
tabList={[
{
tab: '基本信息',
key: 'base',
},
{
tab: '详细信息',
key: 'info',
},
]}
>
<Table columns={columns} dataSource={dataSource} />
</Card>
</Space>
</PageContainer>
);
};
9 changes: 3 additions & 6 deletions packages/ui/src/PageContainer/demo/empty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,11 @@ export default () => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 'calc(100vh - 48px - 72px - 24px)',
height: 'calc(100vh - 72px - 24px)',
}}
>
<Empty
description={<h3>暂无数据</h3>}
image="https://mdn.alipayobjects.com/huamei_n8rchn/afts/img/A*GIGHRpu40ZoAAAAAAAAAAAAADvSFAQ/original"
>
<Button type="primary">立即刷新</Button>
<Empty image={Empty.PRESENTED_IMAGE_COLORED} title="创建第一个集群">
<Button type="primary">立即创建</Button>
</Empty>
</Card>
</PageContainer>
Expand Down
23 changes: 13 additions & 10 deletions packages/ui/src/PageContainer/demo/extra-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import React, { useState } from 'react';
import {
Button,
Card,
DatePicker,
Descriptions,
Dropdown,
Expand Down Expand Up @@ -157,16 +158,18 @@ export default () => {
</Button>,
]}
>
<Descriptions>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="电话号码">1810000000</Descriptions.Item>
<Descriptions.Item label="地址">浙江省杭州市西湖区工专路</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="备注">这是备注</Descriptions.Item>
</Descriptions>
<Card bordered={false}>
<Descriptions>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="电话号码">1810000000</Descriptions.Item>
<Descriptions.Item label="地址">浙江省杭州市西湖区工专路</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="备注">这是备注</Descriptions.Item>
</Descriptions>
</Card>
</PageContainer>
);
};
15 changes: 11 additions & 4 deletions packages/ui/src/PageContainer/demo/with-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -77,19 +77,26 @@ export default () => {
</Dropdown>,
],
}}
footer={[<Button>重置</Button>, <Button type="primary">提交</Button>]}
>
<Tabs
items={[
{
key: '1',
label: 'Tab 1',
children: 'This is content of Tab 1',
children: (
<Card bordered={false} bodyStyle={{ height: '100vh' }}>
This is content of Tab 1
</Card>
),
},
{
key: '2',
label: 'Tab 2',
children: 'This is content of Tab 2',
children: (
<Card bordered={false} bodyStyle={{ height: '100vh' }}>
This is content of Tab 2
</Card>
),
},
]}
tabBarExtraContent="This is tabBarExtraContent content"
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/PageContainer/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ nav:

## 代码演示

<code src="./demo/basic.tsx" title="基本" description="支持 reload 页面刷新"></code>
<code src="./demo/basic.tsx" title="基本" description="包含标题、操作区、内容区、页脚"></code>

<code src="./demo/extra-footer.tsx" title="页头和页脚操作区" description="位于页头和页脚操作区的组件尺寸为 `large`，字体大小为 `middle`。"></code>

<code src="./demo/complete.tsx" iframe="600" title="完整使用"></code>
<code src="./demo/complete.tsx" iframe="600" title="完整使用" description="包含面包屑、页面返回、reload 刷新等，并支持页面滚动"></code>

<code src="./demo/with-tabs.tsx" iframe="600" title="和 Tabs 组合使用"></code>

<code src="./demo/extra-footer.tsx" title="页头和页脚操作区" description="位于页头和页脚操作区的组件尺寸为 `large`，字体大小为 `middle`。" debug></code>

<code src="./demo/header-less.tsx" iframe="600" title="无 PageHeader" description="头部内容为空"></code>

<code src="./demo/empty.tsx" title="空页面"></code>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/PageContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const PageContainer = ({
);

const newSubTitle = (reload || subTitle) && (
<Space size={12}>
<Space>
{reload && (
<Tooltip title={locale.reload}>
{isObject(reload) && React.isValidElement(reload) ? (
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/PageContainer/style/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,12 @@ export const genPageContainerStyle: GenerateStyle<PageContainerToken> = (
},
[`${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,
Expand Down
Loading