[Feature Branch] feat(ui): Add PageLoading + improve(ui): PageContainer loading

.dumirc.ts

@@ -180,6 +180,7 @@ export default defineConfig({
           children: [
             { title: 'BasicLayout 导航和布局', link: '/biz-components/basic-layout' },
             { title: 'PageContainer 页容器', link: '/biz-components/page-container' },
+            { title: 'PageLoading 页面级加载', link: '/biz-components/page-loading' },
             { title: 'FooterToolbar 底部操作栏', link: '/biz-components/footer-toolbar' },
             { title: 'Login 登录页', link: '/biz-components/login' },
             // { title: 'NavMenu', link: '/biz-components/nav-menu' },

packages/design/src/spin/style/index.ts

@@ -86,7 +86,7 @@ export default (prefixCls: string) => {
         // spinDotSizeLG: token.controlHeight * ratio,
         spinDotSize: token.controlHeight * 1.75, // 56,
         spinDotSizeSM: token.controlHeight * 1.125, // 36
-        spinDotSizeLG: token.controlHeight * 2.5, // 80
+        spinDotSizeLG: token.controlHeight * 2.25, // 72
       } as SpinToken),
     ];
   });

packages/ui/src/PageContainer/index.tsx

@@ -11,6 +11,7 @@ import React, { useContext } from 'react';
 import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
 import LocaleWrapper from '../locale/LocaleWrapper';
 import ItemRender from './ItemRender';
+import PageLoading from '../PageLoading';
 import zhCN from './locale/zh-CN';
 import useStyle from './style';
 
@@ -39,6 +40,7 @@ const PageContainer = ({
   tabBarExtraContent,
   footerToolBarProps,
   locale,
+  loading,
   ...restProps
 }: PageContainerProps) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
@@ -105,6 +107,7 @@ const PageContainer = ({
       extraContent={extraContent}
       tabList={tabList}
       tabBarExtraContent={tabBarExtraContent}
+      loading={loading === true ? <PageLoading matchWrapperHeight={false} /> : loading}
       footerToolBarProps={{
         // render footer under parent instead of body by default
         portalDom: false,

packages/ui/src/PageLoading/demo/basic.tsx

@@ -0,0 +1,9 @@
+/**
+ * iframe: 400
+ */
+import React from 'react';
+import { PageLoading } from '@oceanbase/ui';
+
+export default () => {
+  return <PageLoading />;
+};

packages/ui/src/PageLoading/demo/matchWrapperHeight.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PageLoading } from '@oceanbase/ui';
+import { Card } from '@oceanbase/design';
+
+export default () => {
+  return (
+    <Card
+      title="Card title"
+      bodyStyle={{
+        height: 400,
+      }}
+    >
+      <PageLoading matchWrapperHeight={true} />
+    </Card>
+  );
+};

packages/ui/src/PageLoading/demo/with-page-container.tsx

@@ -0,0 +1,67 @@
+/**
+ * iframe: 600
+ */
+import React from 'react';
+import { Button, Dropdown } from '@oceanbase/design';
+import { PageContainer } from '@oceanbase/ui';
+import { EllipsisOutlined } from '@oceanbase/icons';
+
+export default () => {
+  const loading = true;
+  return (
+    <PageContainer
+      ghost={false}
+      loading={loading}
+      header={{
+        title: '页面标题',
+        reload: {
+          spin: loading,
+        },
+        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>]}
+    />
+  );
+};

packages/ui/src/PageLoading/index.md

@@ -0,0 +1,22 @@
+---
+title: PageLoading 页面级加载
+nav:
+  title: 业务组件
+  path: /biz-components
+---
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基本" description="常用于 `dynamicImport` 的加载动画"></code>
+
+<code src="./demo/with-page-container.tsx" title="页容器加载" description="已内置到 PageContainer，通过 loading 属性控制即可"></code>
+
+<code src="./demo/matchWrapperHeight.tsx" title="固定高度的容器内加载"></code>
+
+## API
+
+| 参数               | 说明             | 类型             | 默认值 | 版本 |
+| :----------------- | :--------------- | :--------------- | :----- | :--- |
+| matchWrapperHeight | 是否匹配容器高度 | boolean \| false | -      | -    |
+
+- 更多 API 详见 [Spin 文档](/components/spin#api)

packages/ui/src/PageLoading/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Spin } from '@oceanbase/design';
+import type { SpinProps } from '@oceanbase/design';
+
+export interface PageLoadingProps extends SpinProps {
+  matchWrapperHeight?: boolean;
+}
+
+const PageLoading: React.FC<PageLoadingProps> = ({
+  prefixCls: customizePrefixCls,
+  style,
+  matchWrapperHeight = false,
+  ...restProps
+}) => {
+  const spinElement = (
+    <Spin
+      size="large"
+      gray={false}
+      style={{
+        position: 'absolute',
+        // horizontal align
+        // 36px is 1/2 of large Spin width
+        insetInlineStart: 'calc(50% - 36px)',
+        // vertical align
+        // 27px is 1/2 of large Spin height
+        top: 'calc(50% - 27px)',
+        ...style,
+      }}
+      {...restProps}
+    />
+  );
+
+  return matchWrapperHeight ? (
+    <div
+      style={{
+        height: '100%',
+        position: 'relative',
+      }}
+    >
+      {spinElement}
+    </div>
+  ) : (
+    spinElement
+  );
+};
+
+export default PageLoading;

packages/ui/src/index.ts

@@ -55,6 +55,9 @@ export type { NavMenuProps, NavMenuItem } from './NavMenu';
 export { default as PageContainer } from './PageContainer';
 export type { PageContainerProps } from './PageContainer';
 
+export { default as PageLoading } from './PageLoading';
+export type { PageLoadingProps } from './PageLoading';
+
 export { default as FooterToolbar } from './FooterToolbar';
 export type { FooterToolbarProps } from './FooterToolbar';