feat(design): New design for Empty

oceanbase · Feb 6, 2024 · 787f974 · 787f974
1 parent ada947a
commit 787f974
Show file tree

Hide file tree

Showing 15 changed files with 524 additions and 1 deletion.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -144,6 +144,7 @@ export default defineConfig({
           children: [
             { title: 'Card 卡片', link: '/components/card' },
             { title: 'Descriptions 描述列表', link: '/components/descriptions' },
+            { title: 'Empty 空状态', link: '/components/empty' },
             { title: 'List 列表', link: '/components/list' },
             { title: 'Table 表格', link: '/components/table' },
             { title: 'Tabs 标签页', link: '/components/tabs' },

diff --git a/packages/design/src/empty/demo/basic.tsx b/packages/design/src/empty/demo/basic.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Empty } from '@oceanbase/design';
+
+export default () => {
+  return <Empty />;
+};
diff --git a/packages/design/src/empty/demo/complete.tsx b/packages/design/src/empty/demo/complete.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button, Empty } from '@oceanbase/design';
+
+export default () => {
+  return (
+    <Empty title="Create Your Cluster" description="There is no cluster, welcome to create one!">
+      <Button type="primary">Create</Button>
+    </Empty>
+  );
+};
diff --git a/packages/design/src/empty/demo/horizontal.tsx b/packages/design/src/empty/demo/horizontal.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Empty, Button } from '@oceanbase/design';
+
+export default () => {
+  return (
+    <Empty
+      layout="horizontal"
+      image="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*5Z-QSplMlFwAAAAAAAAAAAAADmfOAQ/original"
+      title="欢迎体验 OB 智能诊断"
+      description={
+        <>
+          <div>• OB 智能诊断是一个数据库问题诊断的控制面板</div>
+          <div>• 将详细的数据库数据图形化的展示</div>
+          <div>• 旨在帮助客户快速评估数据库的运行状态，并对如何处理问题提供建议和指导</div>
+        </>
+      }
+    >
+      <Button type="primary">开启智能诊断</Button>
+    </Empty>
+  );
+};
diff --git a/packages/design/src/empty/demo/image.tsx b/packages/design/src/empty/demo/image.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, Empty } from '@oceanbase/design';
+
+export default () => {
+  return (
+    <Empty
+      image="https://mdn.alipayobjects.com/huamei_fhnyvh/afts/img/A*5Z-QSplMlFwAAAAAAAAAAAAADmfOAQ/original"
+      title="Create Your Cluster"
+      description="There is no cluster, welcome to create one!"
+    >
+      <Button type="primary">Create</Button>
+    </Empty>
+  );
+};
diff --git a/packages/design/src/empty/demo/simple.tsx b/packages/design/src/empty/demo/simple.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Empty } from '@oceanbase/design';
+
+export default () => {
+  return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+};
diff --git a/packages/design/src/empty/demo/steps.tsx b/packages/design/src/empty/demo/steps.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Empty, Button } from '@oceanbase/design';
+
+export default () => {
+  const description = 'This is a long long long long long long description.';
+  const steps = [
+    {
+      title: 'First',
+      description,
+    },
+    {
+      title: 'Second',
+      description,
+    },
+    {
+      title: 'Third',
+      description,
+    },
+    {
+      title: 'Fourth',
+      description,
+    },
+  ];
+
+  return (
+    <Empty title="Create Your Cluster" steps={steps}>
+      <Button type="primary">Create Cluster</Button>
+    </Empty>
+  );
+};
diff --git a/packages/design/src/empty/demo/with-page-container.tsx b/packages/design/src/empty/demo/with-page-container.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Empty, Button, Card } from '@oceanbase/design';
+import { PageContainer } from '@oceanbase/ui';
+
+export default () => {
+  return (
+    <PageContainer
+      ghost={true}
+      header={{
+        title: 'Page Title',
+      }}
+    >
+      <Card
+        bordered={false}
+        bodyStyle={{
+          height: 'calc(100vh - 96px)',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Empty
+          title="Create Your Cluster"
+          description="There is no cluster, welcome to create one!"
+        >
+          <Button type="primary">Create</Button>
+        </Empty>
+      </Card>
+    </PageContainer>
+  );
+};
diff --git a/packages/design/src/empty/empty.tsx b/packages/design/src/empty/empty.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+
+const Empty: React.FC = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={160}
+    height={160}
+    {...props}
+  >
+    <defs>
+      <circle id="a" cx={33.15} cy={33.15} r={33.15} />
+    </defs>
+    <g fill="none" fillRule="evenodd" transform="translate(14 4)">
+      <g transform="translate(14.813 16.45)">
+        <path
+          fill="#0181FD"
+          fillRule="nonzero"
+          d="M59.413 0C31.274 0 7.724 19.563 1.575 45.825h64.337a5.943 5.943 0 0 1 5.938 5.938v65.75c.313-.063.625-.126.938-.2 26.362-6.076 46.025-29.688 46.025-57.9C118.813 26.6 92.213 0 59.4 0h.013Z"
+        />
+        <path
+          fill="#FFF"
+          fillRule="nonzero"
+          d="M71.862 51.763v65.75a58.589 58.589 0 0 1-8.687 1.187c-1.25.087-2.5.125-3.762.125C26.6 118.825 0 92.225 0 59.412 0 58.35.025 57.3.087 56.25c.188-3.563.7-7.05 1.488-10.425h64.337c3.288 0 5.95 2.65 5.95 5.938Z"
+        />
+        <g transform="translate(1.063 63.275)">
+          <path d="M24.375 2.413c0 .437-.363.8-.8.8H.8a.806.806 0 0 1-.8-.8v-1.6c0-.438.362-.8.8-.8h22.775c.438 0 .8.362.8.8v1.6Zm33.975 0c0 .437-.363.8-.8.8h-29.4a.806.806 0 0 1-.8-.8v-1.6c0-.438.362-.8.8-.8h29.4c.438 0 .8.362.8.8v1.6Zm0 22.437c0 .438-.363.8-.8.8h-29.4a.806.806 0 0 1-.8-.8v-1.6c0-.438.362-.8.8-.8h29.4c.438 0 .8.363.8.8v1.6Zm.275 14.75c0 .438-.362.8-.8.8H42.662a.806.806 0 0 1-.8-.8V38c0-.438.363-.8.8-.8h15.163c.438 0 .8.362.8.8v1.6Zm0-22.438c0 .438-.362.8-.8.8H42.662a.806.806 0 0 1-.8-.8v-1.6c0-.437.363-.8.8-.8h15.163c.438 0 .8.363.8.8v1.6Z" />
+          <path
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            d="M57.587 10.588c.438 0 .8-.363.8-.8v-1.6c0-.438-.362-.8-.8-.8H.8a.822.822 0 0 0-.713.437c.188.925.388 1.837.613 2.737.025 0 .063.013.088.013h56.787l.012.013Z"
+          />
+          <rect width={24.375} height={3.2} fill="#E6E6E6" fillRule="nonzero" rx={0.8} />
+          <rect width={31} height={3.2} x={27.35} fill="#E6E6E6" fillRule="nonzero" rx={0.8} />
+          <path
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            d="M39.575 17.15v-1.6c0-.438-.363-.8-.8-.8H1.925c.363 1.088.75 2.15 1.162 3.2h35.688c.438 0 .8-.363.8-.8Z"
+          />
+          <rect
+            width={16.762}
+            height={3.2}
+            x={41.875}
+            y={14.75}
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            rx={0.8}
+          />
+          <path
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            d="M58.388 32.225v-1.6c0-.438-.363-.8-.8-.8H9.413c.75 1.1 1.55 2.163 2.374 3.2h45.8c.438 0 .8-.362.8-.8ZM24.375 24.837v-1.6c0-.437-.363-.8-.8-.8h-18.5a60.329 60.329 0 0 0 1.712 3.2h16.788c.438 0 .8-.362.8-.8Z"
+          />
+          <rect
+            width={31}
+            height={3.2}
+            x={27.35}
+            y={22.438}
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            rx={0.8}
+          />
+          <path
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            d="M39.575 39.587v-1.6c0-.437-.363-.8-.8-.8H15.413a56.949 56.949 0 0 0 3.3 3.2h20.062c.438 0 .8-.362.8-.8Z"
+          />
+          <rect
+            width={16.762}
+            height={3.2}
+            x={41.875}
+            y={37.188}
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            rx={0.8}
+          />
+          <path
+            fill="#E6E6E6"
+            fillRule="nonzero"
+            d="M58.388 54.65v-1.6c0-.438-.363-.8-.8-.8H38.811A59.255 59.255 0 0 0 55 55.45h2.587c.438 0 .8-.363.8-.8ZM58.362 47.275v-1.6c0-.438-.362-.8-.8-.8h-29.4c-.437 0-.8.362-.8.8v1.163c.7.425 1.413.837 2.138 1.237h28.063c.437 0 .8-.363.8-.8Z"
+          />
+        </g>
+        <path
+          fill="#132039"
+          fillRule="nonzero"
+          d="M71.862 51.763v4.487H.088c.187-3.563.7-7.05 1.487-10.425h64.337c3.288 0 5.95 2.65 5.95 5.938Z"
+        />
+        <circle cx={2.65} cy={51.038} r={1.587} fill="#FFF" fillRule="nonzero" />
+        <circle cx={7.525} cy={51.038} r={1.587} fill="#FFF" fillRule="nonzero" />
+        <circle cx={12.338} cy={51.038} r={1.587} fill="#FFF" fillRule="nonzero" />
+      </g>
+      <path
+        fill="#132039"
+        fillRule="nonzero"
+        d="M87.612 133.762a59.523 59.523 0 0 1-9.624 1.388L54.674 91.737l32 3.838.938 38.187Z"
+      />
+      <circle cx={74.237} cy={75.875} r={59.413} />
+      <path
+        fill="#E6E6E6"
+        fillRule="nonzero"
+        d="m97.337 106.08 7.113-3.08 6.416 14.821-7.112 3.08z"
+      />
+      <path
+        fill="#CCC"
+        fillRule="nonzero"
+        d="m97.316 106.083 7.112-3.079 3.467 8.007-7.112 3.079z"
+      />
+      <path
+        fill="#FFA005"
+        fillRule="nonzero"
+        d="m123.15 151.525-3.2 1.387a3.96 3.96 0 0 1-5.225-2.112l-12.163-29.213a1.324 1.324 0 0 1 .688-1.712l7.237-3.138a1.31 1.31 0 0 1 1.725.663l12.975 28.862c.9 2.013 0 4.375-2.037 5.25v.013Z"
+      />
+      <g fillRule="nonzero">
+        <path
+          fill="#07C846"
+          d="M87.862 109.838c-14.162 0-26.95-8.4-32.562-21.388-7.775-17.95.512-38.875 18.462-46.65a35.325 35.325 0 0 1 14.075-2.925c14.163 0 26.938 8.4 32.563 21.388 7.775 17.95-.513 38.875-18.463 46.65a35.325 35.325 0 0 1-14.075 2.925Z"
+        />
+        <path
+          fill="#132039"
+          d="M87.825 41.2c12.812 0 25.025 7.475 30.437 19.987 7.275 16.8-.45 36.326-17.25 43.6a32.955 32.955 0 0 1-13.15 2.738c-12.812 0-25.025-7.475-30.437-19.988-7.275-16.8.45-36.325 17.25-43.6a32.955 32.955 0 0 1 13.15-2.737m0-4.638a37.432 37.432 0 0 0-15 3.126C63.562 43.7 56.412 51.075 52.7 60.462c-3.713 9.388-3.55 19.663.462 28.925a37.791 37.791 0 0 0 34.7 22.788c5.175 0 10.225-1.05 15-3.125 9.263-4.013 16.413-11.388 20.125-20.775 3.713-9.388 3.55-19.663-.462-28.925a37.791 37.791 0 0 0-34.7-22.788Z"
+        />
+      </g>
+      <g transform="translate(54.688 41.212)">
+        <mask id="b" fill="#fff">
+          <use xlinkHref="#a" />
+        </mask>
+        <g fillRule="nonzero" mask="url(#b)">
+          <g transform="translate(-14.425 15.412)">
+            <rect width={44.388} height={61.875} x={6.575} fill="#6ADE90" rx={5.938} />
+            <path
+              fill="#39D36B"
+              d="M5.938 0h39.087a5.943 5.943 0 0 1 5.938 5.938v4.5H0v-4.5A5.943 5.943 0 0 1 5.938 0Z"
+            />
+          </g>
+          <path fill="#FFF" d="M33.15 23.025H14.462v20.25L33.15 52.2z" />
+          <path fill="#E6E6E6" d="M33.15 23.025h18.688v20.25L33.15 52.2z" />
+          <path fill="#0181FD" d="m33.15 31.95-18.688-8.925 18.688-8.937 18.688 8.937z" />
+        </g>
+      </g>
+      <circle cx={27.9} cy={27.9} r={27.9} fill="#FFA005" fillRule="nonzero" />
+      <path
+        fill="#FFF"
+        d="M28.288 15.35c-2.55 0-4.55.725-6.038 2.175-1.512 1.45-2.238 3.45-2.238 6h3.925c0-1.45.275-2.587.863-3.375.65-.962 1.725-1.412 3.238-1.412 1.174 0 2.1.312 2.762.962.625.65.962 1.55.962 2.688 0 .862-.312 1.687-.925 2.45l-.412.487c-2.238 2-3.588 3.45-4.038 4.375-.487.925-.687 2.063-.687 3.375v.487h3.963v-.487c0-.825.174-1.55.512-2.238a5.375 5.375 0 0 1 1.375-1.724c1.65-1.45 2.65-2.375 2.963-2.726.825-1.1 1.275-2.512 1.275-4.237 0-2.1-.688-3.762-2.063-4.962-1.375-1.238-3.2-1.825-5.45-1.825l.013-.013Zm-.625 19.887c-.763 0-1.375.238-1.9.725-.513.488-.763 1.1-.763 1.863 0 .762.238 1.375.762 1.862a2.663 2.663 0 0 0 1.9.763c.763 0 1.376-.238 1.9-.725.513-.488.788-1.138.788-1.9 0-.763-.275-1.375-.763-1.863-.512-.487-1.174-.725-1.924-.725Z"
+      />
+    </g>
+  </svg>
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  Empty.displayName = 'EmptyImage';
+}
+
+export default Empty;
diff --git a/packages/design/src/empty/index.md b/packages/design/src/empty/index.md
@@ -0,0 +1,38 @@
+---
+title: Empty 空状态
+nav:
+  title: 基础组件
+  path: /components
+---
+
+- 🔥 完全兼容 antd [Empty](https://ant.design/components/Empty-cn) 的能力和 API，可无缝切换。
+- 💄 定制插图、主题和样式，符合 OceanBase Design 设计规范。
+- 🆕 新增 `title` 属性，用于设置空状态标题。
+- 🆕 新增 `steps` 属性，用于设置步骤引导。
+- 🆕 新增 `layout` 属性，用于设置空状态布局，默认为 `vertical`。
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基本" description="简单展示"></code>
+
+<code src="./demo/complete.tsx" title="完整" description="设置标题、描述和操作"></code>
+
+<code src="./demo/simple.tsx" title="简洁版" description="图片设置为 Empty.PRESENTED_IMAGE_SIMPLE"></code>
+
+<code src="./demo/image.tsx" title="自定义图片" description="可设置图片链接或 ReactNode"></code>
+
+<code src="./demo/steps.tsx" title="步骤引导"></code>
+
+<code src="./demo/horizontal.tsx" title="横向布局"></code>
+
+<code src="./demo/with-page-container.tsx" title="和页容器搭配使用"></code>
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| :-- | :-- | :-- | :-- | :-- |
+| title | 标题 | React.ReactNode | horizontal | - |
+| steps | 步骤引导 | [StepItem](https://ant-design.antgroup.com/components/steps-cn#stepitem)[] | - | - |
+| layout | 布局 | vertical \| horizontal | vertical | - |
+
+- 更多 API 详见 antd Empty 文档: https://ant.design/components/Empty-cn
diff --git a/packages/design/src/empty/index.ts b/packages/design/src/empty/index.ts