Merge pull request #588 from oceanbase/zhuyue-dev-master

improve(ui): PageContainer style
oceanbase · May 11, 2024 · 8c85724 · 8c85724
2 parents a8abb1f + a5572e5
commit 8c85724
Show file tree

Hide file tree

Showing 9 changed files with 397 additions and 450 deletions.
diff --git a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap
diff --git 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<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">
@@ -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>
   );
 };
diff --git 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={[<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>
   );
 };
diff --git 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)',
         }}
       >
-        <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>

diff --git 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 () => {
         </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>
   );
 };
diff --git 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 () => {
           </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"

diff --git a/packages/ui/src/PageContainer/index.md b/packages/ui/src/PageContainer/index.md
@@ -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>

diff --git a/packages/ui/src/PageContainer/index.tsx b/packages/ui/src/PageContainer/index.tsx
@@ -59,7 +59,7 @@ const PageContainer = ({
   );
 
   const newSubTitle = (reload || subTitle) && (
-    <Space size={12}>
+    <Space>
       {reload && (
         <Tooltip title={locale.reload}>
           {isObject(reload) && React.isValidElement(reload) ? (

diff --git a/packages/ui/src/PageContainer/style/index.ts b/packages/ui/src/PageContainer/style/index.ts
@@ -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,