@fjyueke/bify-mcp 1.0.0

package/metaData/components/space/doc.md

@@ -0,0 +1,125 @@
+# Space 间距
+
+### 介绍
+
+设置组件之间的间距。
+
+### 引入
+
+```tsx
+import { Button, Space } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<Space>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+</Space>
+```
+
+### 垂直
+
+```tsx
+<Block title="垂直">
+  <Space direction="vertical" fill>
+    <Button color="primary" block>
+      主要按钮
+    </Button>
+    <Button color="primary" block>
+      主要按钮
+    </Button>
+    <Button color="primary" block>
+      主要按钮
+    </Button>
+  </Space>
+</Block>
+```
+
+### 间距
+
+```tsx
+<Space size="large">
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+</Space>
+```
+
+### 自定义间距
+
+```tsx
+<Space size={16}>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+</Space>
+<Space size={[16, 32]}>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+</Space>
+<Space size={[16]}>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+</Space>
+```
+
+### 居中
+
+```tsx
+<Space justify="center">
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+</Space>
+```
+
+### 不换行
+
+```tsx
+<Space wrap="nowrap">
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+  <Button color="primary">主要按钮</Button>
+</Space>
+```
+
+## API
+
+### Props
+
+| 参数                  | 说明                                                                         | 类型                                    | 默认值       |
+| --------------------- | ---------------------------------------------------------------------------- | --------------------------------------- | ------------ |
+| direction             | 垂直排列方式 可选值 `horizontal` `vertical`                                  | _string_                                | `horizontal` |
+| size                  | 间距，可选值为 `mini` `small` `medium` `large`，或者自定义间距               | _string \| number \| [number, number?]_ | `small`      |
+| wrap                  | 子元素的换行方式，可选值为 `nowrap` `wrap` `wrap-reverse`                    | _boolean_                               | `wrap`       |
+| justify               | 主轴对齐方式，可选值为 `start` `end` `center` `space-around` `space-between` | _string_                                | `start`      |
+| align                 | 交叉轴对齐方式，可选值为 `start` `center` `end` `baseline` `stretch`         | _string_                                | `start`      |
+| fill `v0.1.1-alpha.2` | 是否填充整个父元素                                                           | _boolean_                               | `false`      |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                               | 默认值                         | 描述 |
+| ---------------------------------- | ------------------------------ | ---- |
+| --space-item-gap-mini              | _var(--padding-xs)_            | -    |
+| --space-item-gap-small             | _var(--padding-sm)_            | -    |
+| --space-item-gap-medium            | _var(--padding-md)_            | -    |
+| --space-item-gap-large             | _var(--padding-lg)_            | -    |
+| --space-item-vertical-gap-mini     | _var(--space-item-gap-mini)_   | -    |
+| --space-item-vertical-gap-small    | _var(--space-item-gap-small)_  | -    |
+| --space-item-vertical-gap-medium   | _var(--space-item-gap-medium)_ | -    |
+| --space-item-vertical-gap-large    | _var(--space-item-gap-large)_  | -    |
+| --space-item-horizontal-gap-mini   | _var(--space-item-gap-mini)_   | -    |
+| --space-item-horizontal-gap-small  | _var(--space-item-gap-small)_  | -    |
+| --space-item-horizontal-gap-medium | _var(--space-item-gap-medium)_ | -    |
+| --space-item-horizontal-gap-large  | _var(--space-item-gap-large)_  | -    |

package/metaData/components/space/example/index.tsx

@@ -0,0 +1,75 @@
+import { Button, Space } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function SpaceDemo() {
+  return (
+    <Page title="Space 间隔" className="space-demo">
+      <Block title="基础用法">
+        <Space>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+      <Block title="垂直">
+        <Space direction="vertical">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+      <Block title="间距">
+        <Space size="small">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+        <Space size="medium">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+        <Space size="large">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+      <Block title="靠右">
+        <Space justify="space-around">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+      <Block title="居中">
+        <Space justify="center">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+      <Block title="环绕">
+        <Space justify="space-around">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+      <Block title="两端对齐">
+        <Space justify="space-between">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+      <Block title="不换行">
+        <Space wrap="nowrap">
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+          <Button color="primary">主要按钮</Button>
+        </Space>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/stepper/api.md

@@ -0,0 +1,37 @@
+## API
+
+### Stepper Props
+
+| 参数         | 说明                                    | 类型               | 默认值    |
+| ------------ | --------------------------------------- | ------------------ | --------- |
+| defaultValue | 默认输入的值                            | _number \| string_ | -         |
+| value        | 当前输入的值                            | _number \| string_ | -         |
+| min          | 最小值                                  | _number \| string_ | `1`       |
+| max          | 最大值                                  | _number \| string_ | -         |
+| step         | 步长，每次点击时改变的值                | _number \| string_ | `1`       |
+| size         | 按钮大小以及输入框高度，默认单位为 `px` | _number \| string_ | `28px`    |
+| precision    | 固定显示的小数位数                      | _number \| string_ | -         |
+| shape        | 样式风格，可选值为 `square` `circular`  | _string_           | `rounded` |
+| placeholder  | 输入框占位提示文字                      | _string_           | -         |
+| disabled     | 是否禁用步进器                          | _boolean_          | `false`   |
+| longPress    | 是否开启长按手势                        | _boolean_          | `true`    |
+
+### Stepper.Input Props
+
+| 参数                     | 说明                        | 类型               | 默认值  |
+| ------------------------ | --------------------------- | ------------------ | ------- |
+| width                    | 输入框宽度，默认单位为 `px` | _number \| string_ | `32px`  |
+| disabled                 | 是否禁用输入框              | _boolean_          | `false` |
+| cursor `v0.1.0-alpha.10` | 指定 focus 时的光标位置     | _number_           | -       |
+
+### Stepper.Button Props
+
+| 参数     | 说明         | 类型      | 默认值  |
+| -------- | ------------ | --------- | ------- |
+| disabled | 是否禁用按钮 | _boolean_ | `false` |
+
+### Events
+
+| 事件名   | 说明                     | 回调参数        |
+| -------- | ------------------------ | --------------- |
+| onChange | 当绑定值变化时触发的事件 | _value: string_ |

package/metaData/components/stepper/doc.md

@@ -0,0 +1,152 @@
+# Stepper 步进器
+
+### 介绍
+
+步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
+
+### 引入
+
+```tsx
+import { Stepper } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<Stepper />
+```
+
+### 步长设置
+
+通过 `step` 属性设置每次点击增加或减少按钮时变化的值，默认为 `1`。
+
+```tsx
+<Stepper step={2} />
+```
+
+### 限制输入范围
+
+通过 `min` 和 `max` 属性限制输入值的范围。
+
+```tsx
+<Stepper min={5} max={8} />
+```
+
+### 禁用状态
+
+通过设置 `disabled` 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。
+
+```tsx
+<Stepper disabled />
+```
+
+### 禁用输入框
+
+通过设置 `Stepper.Input` 组件的 `disabled` 属性来禁用输入框，此时按钮仍然可以点击。
+
+```tsx
+<Stepper>
+  <Stepper.Button />
+  <Stepper.Input disabled />
+  <Stepper.Button />
+</Stepper>
+```
+
+### 固定小数位数
+
+通过设置 `precision` 属性可以保留固定的小数位数。
+
+```tsx
+<Stepper precision={2} />
+```
+
+### 自定义大小
+
+通过 `Stepper.Input` 组件的 `width` 属性设置输入框宽度，通过 `size` 属性设置按钮大小和输入框高度。
+
+```tsx
+<Stepper size="32">
+  <Stepper.Button />
+  <Stepper.Input disabled width="40" />
+  <Stepper.Button />
+</Stepper>
+```
+
+### 圆角风格
+
+将 `shape` 设置为 `circular` 来展示圆角风格的步进器。
+
+```tsx
+<Stepper shape="circular" size="22" />
+```
+
+## API
+
+### Stepper Props
+
+| 参数         | 说明                                    | 类型               | 默认值    |
+| ------------ | --------------------------------------- | ------------------ | --------- |
+| defaultValue | 默认输入的值                            | _number \| string_ | -         |
+| value        | 当前输入的值                            | _number \| string_ | -         |
+| min          | 最小值                                  | _number \| string_ | `1`       |
+| max          | 最大值                                  | _number \| string_ | -         |
+| step         | 步长，每次点击时改变的值                | _number \| string_ | `1`       |
+| size         | 按钮大小以及输入框高度，默认单位为 `px` | _number \| string_ | `28px`    |
+| precision    | 固定显示的小数位数                      | _number \| string_ | -         |
+| shape        | 样式风格，可选值为 `square` `circular`  | _string_           | `rounded` |
+| placeholder  | 输入框占位提示文字                      | _string_           | -         |
+| disabled     | 是否禁用步进器                          | _boolean_          | `false`   |
+| longPress    | 是否开启长按手势                        | _boolean_          | `true`    |
+
+### Stepper.Input Props
+
+| 参数                     | 说明                        | 类型               | 默认值  |
+| ------------------------ | --------------------------- | ------------------ | ------- |
+| width                    | 输入框宽度，默认单位为 `px` | _number \| string_ | `32px`  |
+| disabled                 | 是否禁用输入框              | _boolean_          | `false` |
+| cursor `v0.1.0-alpha.10` | 指定 focus 时的光标位置     | _number_           | -       |
+
+### Stepper.Button Props
+
+| 参数     | 说明         | 类型      | 默认值  |
+| -------- | ------------ | --------- | ------- |
+| disabled | 是否禁用按钮 | _boolean_ | `false` |
+
+### Events
+
+| 事件名   | 说明                     | 回调参数        |
+| -------- | ------------------------ | --------------- |
+| onChange | 当绑定值变化时触发的事件 | _value: string_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                                | 默认值                                        | 描述 |
+| --------------------------------------------------- | --------------------------------------------- | ---- |
+| --stepper-active-background-color                   | _#e8e8e8_                                     | -    |
+| --stepper-background-color                          | _var(--active-color)_                         | -    |
+| --stepper-input-width                               | _32px \* $hd_                                 | -    |
+| --stepper-input-height                              | _28px \* $hd_                                 | -    |
+| --stepper-input-margin                              | _0 2px \* $hd_                                | -    |
+| --stepper-input-font-size                           | _var(--font-size-md)_                         | -    |
+| --stepper-input-line-height                         | _normal_                                      | -    |
+| --stepper-input-color                               | _var(--text-color)_                           | -    |
+| --stepper-input-background-color                    | _var(--stepper-background-color)_             | -    |
+| --stepper-input-disabled-color                      | _var(--gray-5)_                               | -    |
+| --stepper-input-disabled-background-color           | _var(--active-color)_                         | -    |
+| --stepper-button-icon-color                         | _var(--text-color)_                           | -    |
+| --stepper-button-disabled-color                     | _var(--gray-5)_                               | -    |
+| --stepper-button-disabled-background-color          | _var(--background-color)_                     | -    |
+| --stepper-rounded-button-border-radius              | _var(--border-radius-md)_                     | -    |
+| --stepper-rounded-decrease-button-border-radius     | _var(--stepper-rounded-button-border-radius)_ | -    |
+| --stepper-rounded-increase-button-border-radius     | _var(--stepper-rounded-button-border-radius)_ | -    |
+| --stepper-circular-decrease-button-color            | _var(--danger-color)_                         | -    |
+| --stepper-circular-decrease-button-background-color | _var(--white)_                                | -    |
+| --stepper-circular-decrease-button-border-color     | _var(--danger-color)_                         | -    |
+| --stepper-circular-increase-button-color            | _var(--white)_                                | -    |
+| --stepper-circular-increase-button-background-color | _var(--blue, $blue)_                          | -    |

package/metaData/components/stepper/example/index.tsx

@@ -0,0 +1,45 @@
+import { Cell, Stepper } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function StepperDemo() {
+  return (
+    <Page title="Stepper 步进器" className="stepper-demo">
+      <Block variant="card">
+        <Cell title="基本用法">
+          <Stepper />
+        </Cell>
+        <Cell title="步长设置">
+          <Stepper step={2} />
+        </Cell>
+        <Cell title="限制输入范围">
+          <Stepper min={5} max={8} />
+        </Cell>
+        <Cell title="禁用状态">
+          <Stepper disabled />
+        </Cell>
+        <Cell title="禁用输入框">
+          <Stepper>
+            <Stepper.Button />
+            <Stepper.Input disabled />
+            <Stepper.Button />
+          </Stepper>
+        </Cell>
+        <Cell title="固定小数位数">
+          <Stepper precision={2} />
+        </Cell>
+        <Cell align="center" title="自定义大小">
+          <Stepper size="32">
+            <Stepper.Button />
+            <Stepper.Input disabled width="40" />
+            <Stepper.Button />
+          </Stepper>
+        </Cell>
+        <Cell title="圆角风格">
+          <Stepper shape="circular" size="22" />
+        </Cell>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/steps/api.md

@@ -0,0 +1,9 @@
+## API
+
+### Steps Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认步骤对应的索引值 | _number \| string_ | `0` |
+| value | 当前步骤对应的索引值 | _number \| string_ | `0` |
+| direction | 步骤条方向，可选值为 `vertical` | _string_ | `horizontal` |

package/metaData/components/steps/doc.md

@@ -0,0 +1,143 @@
+# Steps 步骤条
+
+### 介绍
+
+用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。
+
+### 引入
+
+```tsx
+import { Steps } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+`value` 属性表示当前步骤的索引，从 0 起计。
+
+```tsx
+<Steps value={0}>
+  <Steps.Step>买家下单</Steps.Step>
+  <Steps.Step>商家接单</Steps.Step>
+  <Steps.Step>买家提货</Steps.Step>
+  <Steps.Step>交易完成</Steps.Step>
+</Steps>
+```
+
+### 下方标签
+
+可以通过 alternativeLabel 属性来设置下方标签展示方式
+
+```tsx
+<Steps defaultValue={0} alternativeLabel>
+  <Steps.Step>买家下单</Steps.Step>
+  <Steps.Step>商家接单</Steps.Step>
+  <Steps.Step>买家提货</Steps.Step>
+  <Steps.Step>交易完成</Steps.Step>
+</Steps>
+```
+
+### 自定义样式
+
+可以通过 `css` 设置激活状态下的颜色。
+
+```tsx
+<Steps className="custom-color" defaultValue={0}>
+  <Steps.Step icon={<ArrowRight />}>买家下单</Steps.Step>
+  <Steps.Step icon={<ArrowRight />}>商家接单</Steps.Step>
+  <Steps.Step icon={<ArrowRight />}>买家提货</Steps.Step>
+  <Steps.Step icon={<ArrowRight />}>交易完成</Steps.Step>
+</Steps>
+```
+
+```scss
+.custom-color {
+  .taroify-step--completed {
+    .taroify-step__icon {
+      color: #38f;
+    }
+
+    .taroify-step__line,
+    .taroify-step__circle {
+      background-color: #38f;
+    }
+  }
+
+  .taroify-step--active {
+    .taroify-step__label,
+    .taroify-step__icon {
+      color: #38f;
+    }
+
+    .taroify-step__circle {
+      background-color: #38f;
+    }
+  }
+}
+```
+
+### 竖向步骤条
+
+可以通过设置 `direction` 属性来改变步骤条的显示方向。
+
+```tsx
+<Steps defaultValue={0} direction="vertical">
+  <Steps.Step>
+    <View>【城市】物流状态2</View>
+    <View>2016-07-12 12:40</View>
+  </Steps.Step>
+  <Steps.Step>
+    <View>【城市】物流状态1</View>
+    <View>2016-07-11 10:00</View>
+  </Steps.Step>
+  <Steps.Step>
+    <View>【城市】物流状态</View>
+    <View>2016-07-10 12:00</View>
+  </Steps.Step>
+  <Steps.Step>
+    <View>快件已发货</View>
+    <View>2016-07-10 09:30</View>
+  </Steps.Step>
+</Steps>
+```
+
+## API
+
+### Steps Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认步骤对应的索引值 | _number \| string_ | `0` |
+| value | 当前步骤对应的索引值 | _number \| string_ | `0` |
+| direction | 步骤条方向，可选值为 `vertical` | _string_ | `horizontal` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                     | 默认值                                  | 描述  |
+|----------------------------------------|--------------------------------------|-----|
+| --steps-background-color               | _var(var(--whit)_                    | -   |
+| --steps-horizontal-padding             | _10px * $hd 0_                       | -   |
+| --steps-vertical-padding               | _0 0 0 var(--padding-xl)_            | -   |
+| --step-color                           | _var(--gray-6)_                      | -   |
+| --step-active-color                    | _var(--green)_                       | -   |
+| --step-process-color                   | _var(--text-color)_                  | -   |
+| --step-font-size                       | _var(--font-size-md)_                | -   |
+| --step-icon-font-size                  | _12px * $hd_                         | -   |
+| --step-line-background-color           | _var(--border-color)_                | -   |
+| --step-line-transition-duration        | _var(--animation-duration-base)_     | -   |
+| --step-completed-color                 | _var(--text-color)_                  | -   |
+| --step-completed-line-background-color | _var(--green)_                       | -   |
+| --step-circle-size                     | _5PX_                                | -   |
+| --step-circle-width                    | _var(--step-circle-size)_            | -   |
+| --step-circle-height                   | _var(--step-circle-size)_            | -   |
+| --step-circle-margin                   | _3px * $hd_                          | -   |
+| --step-circle-background-color         | _var(--gray-6)_                      | -   |
+| --step-circle-border-radius            | _50%_                                | -   |
+| --step-horizontal-title-font-size      | _var(--font-size-sm)_                | -   |
+| --step-vertical-line-height            | _var(--line-height-sm)_              | -   |
+| --step-vertical-padding                | _10px * $hd 10px * $hd 10px * $hd 0_ | -   |

package/metaData/components/steps/example/index.tsx

@@ -0,0 +1,93 @@
+import { Button, Steps } from "@fjyueke/bify-core"
+import { ArrowRight } from "@fjyueke/bify-icons"
+import { View } from "@tarojs/components"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+interface ActiveStepsProps {
+  activeStep: number
+}
+
+function BasicSteps(props: ActiveStepsProps) {
+  return (
+    <Block title="基础用法">
+      <Steps value={props.activeStep}>
+        <Steps.Step>买家下单</Steps.Step>
+        <Steps.Step>商家接单</Steps.Step>
+        <Steps.Step>买家提货</Steps.Step>
+        <Steps.Step>交易完成</Steps.Step>
+      </Steps>
+    </Block>
+  )
+}
+
+function AlternativeLabelSteps(props: ActiveStepsProps) {
+  return (
+    <Block title="下方标签">
+      <Steps value={props.activeStep} alternativeLabel>
+        <Steps.Step>买家下单</Steps.Step>
+        <Steps.Step>商家接单</Steps.Step>
+        <Steps.Step>买家提货</Steps.Step>
+        <Steps.Step>交易完成</Steps.Step>
+      </Steps>
+    </Block>
+  )
+}
+
+function StepsWithCustomStyle(props: ActiveStepsProps) {
+  return (
+    <Block title="自定义样式">
+      <Steps className="custom-color" value={props.activeStep}>
+        <Steps.Step icon={<ArrowRight />}>买家下单</Steps.Step>
+        <Steps.Step icon={<ArrowRight />}>商家接单</Steps.Step>
+        <Steps.Step icon={<ArrowRight />}>买家提货</Steps.Step>
+        <Steps.Step icon={<ArrowRight />}>交易完成</Steps.Step>
+      </Steps>
+    </Block>
+  )
+}
+
+function VerticalSteps(props: ActiveStepsProps) {
+  return (
+    <Block title="竖向步骤条">
+      <Steps value={props.activeStep} direction="vertical">
+        <Steps.Step>
+          <View>【城市】物流状态2</View>
+          <View>2016-07-12 12:40</View>
+        </Steps.Step>
+        <Steps.Step>
+          <View>【城市】物流状态1</View>
+          <View>2016-07-11 10:00</View>
+        </Steps.Step>
+        <Steps.Step>
+          <View>【城市】物流状态</View>
+          <View>2016-07-10 12:00</View>
+        </Steps.Step>
+        <Steps.Step>
+          <View>快件已发货</View>
+          <View>2016-07-10 09:30</View>
+        </Steps.Step>
+      </Steps>
+    </Block>
+  )
+}
+
+export default function StepsDemo() {
+  const [activeStep, setActiveStep] = useState(0)
+
+  return (
+    <Page title="Steps 步骤条" className="steps-demo">
+      <BasicSteps activeStep={activeStep} />
+      <Block className="steps-demo__next-block">
+        <Button onClick={() => setActiveStep(activeStep + 1 > 3 ? 0 : activeStep + 1)}>
+          下一步
+        </Button>
+      </Block>
+      <AlternativeLabelSteps activeStep={activeStep} />
+      <StepsWithCustomStyle activeStep={activeStep} />
+      <VerticalSteps activeStep={activeStep} />
+    </Page>
+  )
+}