improve(style): Empty description max-width => 600px and steps max-width => 1000px for over length style

packages/design/src/empty/demo/over-length.tsx

@@ -0,0 +1,35 @@
+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
+      image={Empty.PRESENTED_IMAGE_COLORED}
+      title="Create Your Cluster"
+      description="There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one! There is no cluster, welcome to create one!"
+      steps={steps}
+    >
+      <Button type="primary">Create Cluster</Button>
+    </Empty>
+  );
+};

packages/design/src/empty/index.md

@@ -29,6 +29,8 @@ nav:
 
 <code src="./demo/steps.tsx" title="步骤提示"></code>
 
+<code src="./demo/over-length.tsx" title="超长内容" description="为了避免无限拉伸，限制描述区的最大宽度为 600px、步骤区的最大宽度为 1000px。"></code>
+
 <code src="./demo/horizontal.tsx" title="横向布局" description="图片为 PRESENTED_IMAGE_GUIDE，常用于功能开通等引导类场景"></code>
 
 <code src="./demo/with-page-container.tsx" title="和页容器搭配使用"></code>

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

@@ -6,15 +6,7 @@ import { genLargeStyle } from '../../_util/genStyle';
 export type EmptyToken = FullToken<'Badge'>;
 
 export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSSObject => {
-  const {
-    antCls,
-    componentCls,
-    colorTextTertiary,
-    colorBgLayout,
-    colorFill,
-    colorText,
-    colorTextSecondary,
-  } = token;
+  const { antCls, componentCls, colorTextTertiary, colorText, colorTextSecondary } = token;
 
   return {
     [`${componentCls}`]: {
@@ -34,49 +26,53 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
         },
         [`${componentCls}-description-content`]: {
           color: colorTextTertiary,
+          maxWidth: 600,
           marginTop: token.marginXS,
+          margin: '0px auto',
         },
-      },
-      [`${componentCls}-footer`]: {
-        marginTop: token.marginLG,
-        ...genLargeStyle(token),
-      },
-      [`${antCls}-steps`]: {
-        marginTop: token.margin,
-        padding: token.paddingLG,
-        backgroundColor: token.colorFillQuaternary,
-        borderRadius: token.borderRadiusLG,
-        [`${antCls}-steps-item-container`]: {
-          [`${antCls}-steps-item-icon`]: {
-            height: token.controlHeightSM,
-            width: token.controlHeightSM,
-            lineHeight: `${token.controlHeightSM}px`,
-            backgroundColor: token.colorFillSecondary,
-            // override default border color
-            borderColor: token.colorFillSecondary,
-            [`${antCls}-steps-icon`]: {
-              color: colorTextSecondary,
-              fontSize: token.fontSize,
-            },
-          },
-          [`${antCls}-steps-item-content`]: {
-            [`${antCls}-steps-item-title`]: {
-              color: colorText,
-              fontSize: token.fontSize,
-              fontWeight: token.fontWeightStrong,
+        [`${antCls}-steps`]: {
+          maxWidth: 1000,
+          margin: '0px auto',
+          marginTop: token.margin,
+          padding: token.paddingLG,
+          backgroundColor: token.colorFillQuaternary,
+          borderRadius: token.borderRadiusLG,
+          [`${antCls}-steps-item-container`]: {
+            [`${antCls}-steps-item-icon`]: {
+              height: token.controlHeightSM,
+              width: token.controlHeightSM,
               lineHeight: `${token.controlHeightSM}px`,
-              '&::after': {
-                top: token.controlHeightSM / 2,
+              backgroundColor: token.colorFillSecondary,
+              // override default border color
+              borderColor: token.colorFillSecondary,
+              [`${antCls}-steps-icon`]: {
+                color: colorTextSecondary,
+                fontSize: token.fontSize,
               },
             },
-            [`${antCls}-steps-item-description`]: {
-              color: colorTextTertiary,
-              fontSize: token.fontSizeSM,
-              marginTop: token.marginXS,
+            [`${antCls}-steps-item-content`]: {
+              [`${antCls}-steps-item-title`]: {
+                color: colorText,
+                fontSize: token.fontSize,
+                fontWeight: token.fontWeightStrong,
+                lineHeight: `${token.controlHeightSM}px`,
+                '&::after': {
+                  top: token.controlHeightSM / 2,
+                },
+              },
+              [`${antCls}-steps-item-description`]: {
+                color: colorTextTertiary,
+                fontSize: token.fontSizeSM,
+                marginTop: token.marginXS,
+              },
             },
           },
         },
       },
+      [`${componentCls}-footer`]: {
+        marginTop: token.marginLG,
+        ...genLargeStyle(token),
+      },
     },
 
     [`${componentCls}-horizontal`]: {