improve(ui): PageContainer style when first child is Tabs

oceanbase · Jan 19, 2024 · 76a138e · 76a138e
1 parent 544df1f
commit 76a138e
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/packages/ui/src/PageContainer/demo/with-tabs.tsx b/packages/ui/src/PageContainer/demo/with-tabs.tsx
@@ -0,0 +1,99 @@
+/**
+ * iframe: 600
+ */
+import React, { useState } from 'react';
+import { EllipsisOutlined } from '@oceanbase/icons';
+import { Button, Descriptions, Dropdown, Input, Radio, Tabs, message } from '@oceanbase/design';
+import { PageContainer } from '@oceanbase/ui';
+
+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 (
+    <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">
+            主要按钮
+          </Button>,
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  label: '下拉菜单',
+                  key: '1',
+                },
+                {
+                  label: '下拉菜单2',
+                  key: '2',
+                },
+                {
+                  label: '下拉菜单3',
+                  key: '3',
+                },
+              ],
+            }}
+          >
+            <Button key="3" style={{ padding: '0 8px' }}>
+              <EllipsisOutlined />
+            </Button>
+          </Dropdown>,
+        ],
+      }}
+      footer={[<Button>重置</Button>, <Button type="primary">提交</Button>]}
+    >
+      <Tabs
+        items={[
+          {
+            key: '1',
+            label: 'Tab 1',
+            children: 'This is content of Tab 1',
+          },
+          {
+            key: '2',
+            label: 'Tab 2',
+            children: 'This is content of Tab 2',
+          },
+        ]}
+        tabBarExtraContent="This is tabBarExtraContent content"
+      />
+    </PageContainer>
+  );
+};
diff --git a/packages/ui/src/PageContainer/index.md b/packages/ui/src/PageContainer/index.md
@@ -19,6 +19,8 @@ nav:
 
 <code src="./demo/complete.tsx" iframe="600" title="完整使用"></code>
 
+<code src="./demo/with-tabs.tsx" iframe="600" title="和 Tabs 组合使用"></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/style/index.ts b/packages/ui/src/PageContainer/style/index.ts
@@ -58,6 +58,11 @@ export const genPageContainerStyle: GenerateStyle<PageContainerToken> = (
         paddingInline: paddingLG,
         paddingBlockStart: 0,
         paddingBlockEnd: paddingLG,
+        // set top tabs style when it is PageContainer's first child
+        [`& > ${antCls}-tabs-top:not(${antCls}-tabs-card):first-child`]: {
+          // equal to page header paddingBlockEnd
+          marginTop: -padding,
+        },
       },
       // remove paddingBlockStart for page header without breadcrumb
       [`${antCls}-page-header:not(${antCls}-page-header-has-breadcrumb)`]: {