From 29d5585de012cb6abb21836d046c62c2b6ce287c Mon Sep 17 00:00:00 2001 From: dengfuping Date: Wed, 27 Mar 2024 21:23:48 +0800 Subject: [PATCH] feat(design): Empty add built-in image PRESENTED_IMAGE_GUIDE --- docs/design/design-CHANGELOG.md | 2 +- packages/design/src/empty/demo/horizontal.tsx | 2 +- packages/design/src/empty/demo/image.tsx | 2 +- packages/design/src/empty/guide.tsx | 156 ++++++++++++++++++ packages/design/src/empty/index.md | 25 ++- packages/design/src/empty/index.tsx | 4 + packages/design/src/empty/style/index.ts | 3 - 7 files changed, 184 insertions(+), 10 deletions(-) create mode 100644 packages/design/src/empty/guide.tsx diff --git a/docs/design/design-CHANGELOG.md b/docs/design/design-CHANGELOG.md index ab29ccc95..6743ec5c5 100644 --- a/docs/design/design-CHANGELOG.md +++ b/docs/design/design-CHANGELOG.md @@ -18,7 +18,7 @@ group: 基础组件 - 🔥 新版 Empty 组件 [#465](https://github.com/oceanbase/oceanbase-design/pull/465) - 💄 定制插图、主题和样式，以符合 OceanBase Design 设计规范。 - 🆕 新增 `title` 属性，用于设置空状态标题。 - - 🆕 新增 `steps` 属性，用于设置步骤引导。 + - 🆕 新增 `steps` 属性，用于设置步骤提示。 - 🆕 新增 `layout` 属性，用于设置空状态布局，默认为 vertical。 - 🆕 通过 ConfigProvider `renderEmpty` 定制全局组件的空状态。[#467](https://github.com/oceanbase/oceanbase-design/pull/467) - 🔥 新版 Result 组件 [#476](https://github.com/oceanbase/oceanbase-design/pull/476) diff --git a/packages/design/src/empty/demo/horizontal.tsx b/packages/design/src/empty/demo/horizontal.tsx index 89a8fbead..3d9918ed1 100644 --- a/packages/design/src/empty/demo/horizontal.tsx +++ b/packages/design/src/empty/demo/horizontal.tsx @@ -5,7 +5,7 @@ export default () => { return ( diff --git a/packages/design/src/empty/demo/image.tsx b/packages/design/src/empty/demo/image.tsx index 411017dc7..c53e621a0 100644 --- a/packages/design/src/empty/demo/image.tsx +++ b/packages/design/src/empty/demo/image.tsx @@ -4,7 +4,7 @@ import { Button, Empty } from '@oceanbase/design'; export default () => { return ( diff --git a/packages/design/src/empty/guide.tsx b/packages/design/src/empty/guide.tsx new file mode 100644 index 000000000..f6058eadc --- /dev/null +++ b/packages/design/src/empty/guide.tsx @@ -0,0 +1,156 @@ +import React from 'react'; + +const GuideEmptyImg: React.FC = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +if (process.env.NODE_ENV !== 'production') { + GuideEmptyImg.displayName = 'GuideEmptyImg'; +} + +export default GuideEmptyImg; diff --git a/packages/design/src/empty/index.md b/packages/design/src/empty/index.md index 4700a610f..0122ba373 100644 --- a/packages/design/src/empty/index.md +++ b/packages/design/src/empty/index.md @@ -7,8 +7,11 @@ nav: - 🔥 完全兼容 antd [Empty](https://ant.design/components/Empty-cn) 的能力和 API，可无缝切换。 - 💄 定制插图、主题和样式，以符合 OceanBase Design 设计规范。 +- 📢 不再区分默认图片和简单图片，即 PRESENTED_IMAGE_DEFAULT 和 PRESENTED_IMAGE_SIMPLE 图片相同。 +- ⭐️ 新增 PRESENTED_IMAGE_COLORED 彩色图片，用于页面和区块级的空状态。 +- ⭐️ 新增 PRESENTED_IMAGE_GUIDE 引导图片，用于功能开通等引导类场景。 - 🆕 新增 `title` 属性，用于设置空状态标题。 -- 🆕 新增 `steps` 属性，用于设置步骤引导。 +- 🆕 新增 `steps` 属性，用于设置步骤提示。 - 🆕 新增 `layout` 属性，用于设置空状态布局，默认为 `vertical`。 ## 代码演示 @@ -21,9 +24,9 @@ nav: - + - + @@ -34,7 +37,21 @@ nav: | 参数 | 说明 | 类型 | 默认值 | 版本 | | :-- | :-- | :-- | :-- | :-- | | title | 标题 | React.ReactNode | horizontal | - | -| steps | 步骤引导 | [StepItem](https://ant-design.antgroup.com/components/steps-cn#stepitem)[] | - | - | +| steps | 步骤提示 | [StepItem](https://ant-design.antgroup.com/components/steps-cn#stepitem)[] | - | - | | layout | 布局 | vertical \| horizontal | vertical | - | - 更多 API 详见 antd Empty 文档: https://ant.design/components/Empty-cn + +## 内置图片 + +- RESENTED_IMAGE_DEFAULT 和 PRESENTED_IMAGE_SIMPLE + +

+ +- PRESENTED_IMAGE_COLORED + +

+ +- PRESENTED_IMAGE_GUIDE + +

diff --git a/packages/design/src/empty/index.tsx b/packages/design/src/empty/index.tsx index 8ed05ac31..ecf05678e 100644 --- a/packages/design/src/empty/index.tsx +++ b/packages/design/src/empty/index.tsx @@ -7,6 +7,7 @@ import ConfigProvider from '../config-provider'; import { useLocale } from '../locale'; import DefaultEmptyImg from './default'; import ColoredEmptyImg from './colored'; +import GuideEmptyImg from './guide'; import useStyle from './style'; export * from 'antd/es/empty'; @@ -16,6 +17,7 @@ const defaultEmptyImg = ; // To be compatible with antd API const simpleEmptyImg = ; const coloredEmptyImg = ; +const guideEmptyImg = ; export interface EmptyProps extends AntEmptyProps { title?: React.ReactNode; @@ -27,6 +29,7 @@ type CompoundedComponent = React.FC & { PRESENTED_IMAGE_DEFAULT: React.ReactNode; PRESENTED_IMAGE_SIMPLE: React.ReactNode; PRESENTED_IMAGE_COLORED: React.ReactNode; + PRESENTED_IMAGE_GUIDE: React.ReactNode; }; const Empty: CompoundedComponent = props => { @@ -85,6 +88,7 @@ const Empty: CompoundedComponent = props => { Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg; Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg; Empty.PRESENTED_IMAGE_COLORED = coloredEmptyImg; +Empty.PRESENTED_IMAGE_GUIDE = guideEmptyImg; if (process.env.NODE_ENV !== 'production') { Empty.displayName = AntEmpty.displayName; diff --git a/packages/design/src/empty/style/index.ts b/packages/design/src/empty/style/index.ts index 8a0b3e0a6..f2d1120d3 100644 --- a/packages/design/src/empty/style/index.ts +++ b/packages/design/src/empty/style/index.ts @@ -80,9 +80,6 @@ export const genEmptyStyle: GenerateStyle = (token: EmptyToken): CSS display: 'flex', justifyContent: 'center', alignItems: 'center', - [`${componentCls}-image`]: { - height: 112, - }, [`${componentCls}-description`]: { marginLeft: token.marginXXL, textAlign: 'left',