feat(design): Empty add built-in image PRESENTED_IMAGE_GUIDE

oceanbase · Mar 27, 2024 · c800215 · c800215
1 parent 620e90d
commit c800215
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 10 deletions.
diff --git 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
@@ -5,7 +5,7 @@ export default () => {
   return (
     <Empty
       layout="horizontal"
-      image="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*KMWoRLCIATsAAAAAAAAAAAAADmfOAQ/original"
+      image={Empty.PRESENTED_IMAGE_GUIDE}
       title="欢迎体验 OB 智能诊断"
       description={
         <>

diff --git 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 (
     <Empty
-      image="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*KMWoRLCIATsAAAAAAAAAAAAADmfOAQ/original"
+      image="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*8Q4gRbl_qmMAAAAAAAAAAAAADmfOAQ/original"
       title="Create Your Cluster"
       description="There is no cluster, welcome to create one!"
     >

diff --git a/packages/design/src/empty/guide.tsx b/packages/design/src/empty/guide.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+
+const GuideEmptyImg: React.FC = props => (
+  <svg
+    width="164.217482px"
+    height="101.022957px"
+    viewBox="0 0 164.217482 101.022957"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <path
+        d="M0,0.515265579 L168,0 L168,92.2208281 C114.353827,84.8197407 88.4617315,118.112923 21.8636554,110.957758 L21.8636554,80.9669594 L0,0.515265579 Z"
+        id="oceanbase-design-empty-guide-path-1"
+      ></path>
+    </defs>
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-481.7825, -422.9494)">
+        <g transform="translate(478, 412)">
+          <path
+            d="M21.8636554,49.5240485 C75.5098285,56.9251359 101.401924,23.6319532 168,31.02133 L168,92.2091175 C114.353827,84.8080301 88.4617315,118.101213 21.8636554,110.946048 L21.8636554,49.5123379 L21.8636554,49.5240485 Z"
+            fill="#0181FD"
+            fillRule="nonzero"
+          ></path>
+          <g>
+            <mask id="oceanbase-design-empty-guide-mask-2" fill="white">
+              <use xlinkHref="#oceanbase-design-empty-guide-path-1"></use>
+            </mask>
+            <g></g>
+            <g mask="url(#oceanbase-design-empty-guide-mask-2)">
+              <g transform="translate(3.7825, 10.9494)">
+                <g
+                  strokeWidth="1"
+                  fill="none"
+                  fillRule="evenodd"
+                  transform="translate(131.6972, 16.6476)"
+                >
+                  <path
+                    d="M19.8143036,18.144528 C21.3601004,26.5761466 18.8189042,34.1060504 14.1463823,34.9609228 C9.47386031,35.8157953 4.43831033,29.6677401 2.90422417,21.2361215 C1.35842744,12.8045029 1.54579674,3.37748496 7.37766625,2.22984798 C13.3969051,1.04707927 18.2685069,9.71290946 19.8025931,18.144528 L19.8143036,18.144528 Z"
+                    fill="#07C846"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M32.8247595,30.6631395 C31.4194898,36.7994841 27.5315767,41.1558204 24.1355082,40.3712114 C20.7394396,39.5983131 19.1116688,33.9889446 20.5169385,27.8526 C21.9222083,21.7162553 24.7913007,15.3339885 29.0422417,16.3176773 C35.9866165,17.9337376 34.2300293,24.5150843 32.8247595,30.6631395 L32.8247595,30.6631395 Z"
+                    fill="#07C846"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M22.8005019,9.33817086 C20.4818068,12.382922 17.2379757,13.7999024 15.5633626,12.523449 C13.8887495,11.2469956 14.3923045,7.73382122 16.7109996,4.70078065 C19.0296947,1.6560295 22.2149728,-1.14279944 24.3228775,0.473260782 C27.7540778,3.10814158 25.1309076,6.30513029 22.8122125,9.34988144 L22.8005019,9.33817086 Z"
+                    fill="#07C846"
+                    fillRule="nonzero"
+                  ></path>
+                  <rect
+                    fill="#E6E6E6"
+                    fillRule="nonzero"
+                    x="0.17565872"
+                    y="32.5836748"
+                    width="37.4972815"
+                    height="9.9188624"
+                    rx="1.15934755"
+                  ></rect>
+                  <path
+                    d="M8.97030531,42.5025372 L0,42.5025372 L0,32.5836748 L7.20200753,32.5836748 L7.20200753,40.74595 C7.20200753,41.7179283 7.98661648,42.5025372 8.95859473,42.5025372 L8.95859473,42.5025372 L8.97030531,42.5025372 Z"
+                    fill="#B3B3B3"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M2.08448348,42.5025372 L35.7524049,42.5025372 L35.7524049,58.8153771 C35.7524049,61.4619684 33.5976579,63.6167154 30.9510665,63.6167154 L6.87411125,63.6167154 C4.22751987,63.6167154 2.0727729,61.4619684 2.0727729,58.8153771 L2.0727729,42.5025372 L2.0727729,42.5025372 L2.08448348,42.5025372 Z"
+                    fill="#E6E6E6"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M35.7524049,42.5025372 L2.08448348,42.5025372 L2.08448348,45.3833402 L3.38435801,45.3833402 L3.38435801,63.6167154 L10.5863655,63.6167154 L10.5863655,47.2219015 C10.5863655,46.2030809 11.4061062,45.3833402 12.4249268,45.3833402 L35.7524049,45.3833402 L35.7524049,42.5025372 Z"
+                    fill="#B3B3B3"
+                    fillRule="nonzero"
+                  ></path>
+                </g>
+                <rect
+                  fill="#005AFD"
+                  fillRule="nonzero"
+                  x="0"
+                  y="82.1614387"
+                  width="150.199916"
+                  height="20.7979925"
+                ></rect>
+                <g strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(6.6842, 0)">
+                  <path
+                    d="M129.580156,75.8025931 L22.0418879,75.8025931 C18.1422644,75.8025931 14.7696169,73.0740276 13.9615868,69.2563781 L0.0611267521,3.31409452 C-0.30190127,1.60434964 0.99797326,0 2.74284988,0 L110.281118,0 C114.180742,0 117.553389,2.72856545 118.36142,6.54621497 L132.26188,72.4884985 C132.624908,74.1982434 131.325033,75.8025931 129.580156,75.8025931 L129.580156,75.8025931 Z"
+                    fill="#E6E6E6"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M22.0418879,70.8724383 C20.4843806,70.8724383 19.1142426,69.7599331 18.7863463,68.2375575 L5.44799417,4.93015475 L110.292829,4.93015475 C111.850336,4.93015475 113.220474,6.04265997 113.548371,7.56503555 L126.886723,70.8724383 L22.0418879,70.8724383 L22.0418879,70.8724383 Z"
+                    fill="#132039"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M104.343854,12.3312422 L16.3154137,12.3312422 C15.4136989,12.3312422 14.7344852,13.1626934 14.9218545,14.0526976 L24.7938746,60.8833124 C25.1100603,62.405688 26.4567771,63.4830615 28.0025738,63.4830615 L116.031014,63.4830615 C116.932729,63.4830615 117.611942,62.6516102 117.424573,61.761606 L107.552553,14.9309912 C107.236367,13.4086156 105.88965,12.3312422 104.343854,12.3312422 Z"
+                    fill="#FFFFFF"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M36.7620887,33.539105 C50.1707043,35.3425345 54.7612522,27.2505228 71.3200142,29.0422417 L73.8846316,41.174404 C60.4760159,39.3709745 55.885468,47.4629862 39.3384166,45.7298202 L36.7620887,33.539105 Z"
+                    fill="#0181FD"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M104.343854,12.3312422 L80.419136,12.3312422 L91.2045814,63.4830615 L116.031014,63.4830615 C116.932729,63.4830615 117.611942,62.6516102 117.424573,61.761606 L107.552553,14.9309912 C107.236367,13.4086156 105.88965,12.3312422 104.343854,12.3312422 L104.343854,12.3312422 Z"
+                    fill="#0181FD"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M98.9452756,33.902133 C95.5023647,33.902133 92.1062961,31.1033041 91.3685295,27.6603931 C91.0172121,26.0092012 91.3333978,24.4868256 92.2468231,23.3508992 C93.1368273,22.2501046 94.4952547,21.6528649 96.0761832,21.6528649 C99.5190941,21.6528649 102.915163,24.4516939 103.652929,27.8946048 C104.004247,29.5457967 103.688061,31.0681723 102.774636,32.2040987 C101.884632,33.3048934 100.526204,33.902133 98.9452756,33.902133 Z"
+                    fill="#005AFD"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M154.886723,82.1731493 L43.4019883,82.1731493 L43.4019883,75.8025931 L156.84239,75.8025931 C157.45134,75.8025931 157.931474,76.2944375 157.931474,76.8916771 L157.931474,79.1166876 C157.931474,80.8030113 156.561336,82.1731493 154.875012,82.1731493 L154.886723,82.1731493 Z"
+                    fill="#CCCCCC"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M92.4576136,75.8025931 L117.16694,75.8025931 L117.16694,76.0485153 C117.16694,77.1961522 116.230094,78.1329987 115.082457,78.1329987 L94.5420971,78.1329987 C93.3944601,78.1329987 92.4576136,77.1961522 92.4576136,76.0485153 L92.4576136,75.8025931 L92.4576136,75.8025931 L92.4576136,75.8025931 Z"
+                    fill="#FFFFFF"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M50.990445,82.1731493 L17.1468649,82.1731493 C15.3902777,82.1731493 13.9615868,80.7444584 13.9615868,78.9878712 L13.9615868,78.9878712 C13.9615868,77.231284 15.3902777,75.8025931 17.1468649,75.8025931 L44.3856771,75.8025931 C45.5567353,75.8025931 46.6458193,76.3529904 47.3484542,77.2898369 L50.990445,82.1731493 L50.990445,82.1731493 Z"
+                    fill="#132039"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M107.950713,42.5094103 L92.4693242,42.5094103 C91.7315575,42.5094103 91.0874756,41.9824341 90.935238,41.2563781 L90.935238,41.2563781 C90.7361581,40.2843998 91.4739247,39.3709745 92.4693242,39.3709745 L107.950713,39.3709745 C108.688479,39.3709745 109.332561,39.8979506 109.484799,40.6240067 L109.484799,40.6240067 C109.683879,41.5959849 108.946112,42.5094103 107.950713,42.5094103 Z"
+                    fill="#005AFD"
+                    fillRule="nonzero"
+                  ></path>
+                  <path
+                    d="M109.227166,48.083647 L93.7457775,48.083647 C93.0080109,48.083647 92.3639289,47.5566708 92.2116914,46.8306148 L92.2116914,46.8306148 C92.0126115,45.8586366 92.7503781,44.9452112 93.7457775,44.9452112 L109.227166,44.9452112 C109.964933,44.9452112 110.609015,45.4721874 110.761252,46.1982434 L110.761252,46.1982434 C110.960332,47.1702217 110.222565,48.083647 109.227166,48.083647 Z"
+                    fill="#005AFD"
+                    fillRule="nonzero"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+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
@@ -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:
 
 <code src="./demo/image.tsx" title="自定义图片" description="可设置图片链接或 ReactNode"></code>
 
-<code src="./demo/steps.tsx" title="步骤引导"></code>
+<code src="./demo/steps.tsx" title="步骤提示"></code>
 
-<code src="./demo/horizontal.tsx" title="横向布局"></code>
+<code src="./demo/horizontal.tsx" title="横向布局" description="图片设置为 PRESENTED_IMAGE_GUIDE，常用于功能开通等引导类场景"></code>
 
 <code src="./demo/with-page-container.tsx" title="和页容器搭配使用"></code>
 
@@ -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
+
+<p><div><img src="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*mC4VR4Cg0GYAAAAAAAAAAAAADmfOAQ/original" /></div></p>
+
+- PRESENTED_IMAGE_COLORED
+
+<p><div><img src="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*eDOqTIaukyQAAAAAAAAAAAAADmfOAQ/original" /></div></p>
+
+- PRESENTED_IMAGE_GUIDE
+
+<p><div><img src="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*DH4BTJUbkIUAAAAAAAAAAAAADmfOAQ/original" /></div></p>
diff --git 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 = <DefaultEmptyImg />;
 // To be compatible with antd API
 const simpleEmptyImg = <DefaultEmptyImg />;
 const coloredEmptyImg = <ColoredEmptyImg />;
+const guideEmptyImg = <GuideEmptyImg />;
 
 export interface EmptyProps extends AntEmptyProps {
   title?: React.ReactNode;
@@ -27,6 +29,7 @@ type CompoundedComponent = React.FC<EmptyProps> & {
   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
@@ -80,9 +80,6 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      [`${componentCls}-image`]: {
-        height: 112,
-      },
       [`${componentCls}-description`]: {
         marginLeft: token.marginXXL,
         textAlign: 'left',