plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/pages/index/components/normal/DemoStep.tsx

@@ -1,291 +1,291 @@
-import {designPage, reactive} from "plain-design-composition";
-import {$message, ArrowStep, ArrowStepGroup, Button, ButtonGroup, Checkbox, Icon, InputNumber, Step, StepGroup, Tooltip} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import {DemoLine} from "../../Demo/DemoLine";
-import './DemoStep.scss';
-
-export default designPage(() => {
-
-  const state = reactive({
-    val: {
-      1: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      2: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      3: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      4: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      5: {
-        index: 2,
-      },
-      6: {
-        index: 1,
-      },
-    },
-    showFlag: true,
-    val1: {
-      0: 1,
-      1: 2,
-      3: 'step1',
-    },
-  });
-
-  return () => {
-    return (
-      <div className={'demo-step'}>
-        <DemoRow title={'基本用法'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[1].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[1].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[1].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[1].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[1].index}
-              vertical={state.val[1].vertical}
-              mini={state.val[1].mini}
-              titleAlignBottom={state.val[1].titleAlignBottom}
-              currentStatus={state.val[1].index === 5 ? 'finish' : undefined}
-            >
-              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-
-        <DemoRow title={'步骤图标'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[2].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[2].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[2].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[2].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[2].index}
-              vertical={state.val[2].vertical}
-              mini={state.val[2].mini}
-              titleAlignBottom={state.val[2].titleAlignBottom}
-              currentStatus={state.val[2].index === 5 ? 'finish' : undefined}
-            >
-              <Step icon="pi-safe" title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step icon="pi-schedule" title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step icon="pi-shake" title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step icon="pi-home" title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step icon="pi-skin" title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-
-        <DemoRow title={'小圆点'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[3].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[3].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[3].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[3].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[3].index}
-              vertical={state.val[3].vertical}
-              mini={state.val[3].mini}
-              titleAlignBottom={state.val[3].titleAlignBottom}
-              currentStatus={state.val[3].index === 5 ? 'finish' : undefined}
-              dotIcon
-            >
-              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'步骤状态'}>
-          <DemoLine>
-            <StepGroup dotIcon>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup>
-              <Step title="Finish" message="This step is finish" status="finish" icon="pi-check"/>
-              <Step title="Process" message="This step is processing..." status="process" icon="pi-info-circle-fill"/>
-              <Step title="error" message="This step is error!" status="error" icon="pi-close"/>
-              <Step title="Wait" message="This step is not start." status="wait" icon="pi-thunderbolt"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup vertical>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup dotIcon vertical>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'通过绑定val切换步骤'}>
-          <DemoLine title={'当前步骤索引'}>
-            <ButtonGroup>
-              <Button label={'step1'} onClick={() => state.val1[3] = 'step1'} active={state.val1[3] === 'step1'}/>
-              <Button label={'step2'} onClick={() => state.val1[3] = 'step2'} active={state.val1[3] === 'step2'}/>
-              <Button label={'step3'} onClick={() => state.val1[3] = 'step3'} active={state.val1[3] === 'step3'}/>
-              <Button label={'step4'} onClick={() => state.val1[3] = 'step4'} active={state.val1[3] === 'step4'}/>
-              <Button label={'step5'} onClick={() => state.val1[3] = 'step5'} active={state.val1[3] === 'step5'}/>
-            </ButtonGroup>
-          </DemoLine>
-          <StepGroup current={state.val1[3]} currentStatus={state.val1[3] === 'step5' ? 'finish' : undefined}>
-            <Step title="获取token" message="调用接口，获取token" val={'step1'}/>
-            <Step title="上传logo" message="使用token上传logo图片" val={'step2'}/>
-            <Step title="创建卡券" message="调用接口创建卡券信息" val={'step3'}/>
-            <Step title="创建二维码" message="调用接口创建二维码" val={'step4'}/>
-            <Step title="显示二维码" message="在应用中显示二维码" val={'step5'}/>
-          </StepGroup>
-          <div style={{
-            height: '100px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: 'dashed 1px #e1e1e1'
-          }}>
-            <h1 style={{ display: state.val1[3] === 'step1' ? '' : 'none' }}>Step 1</h1>
-            <h1 style={{ display: state.val1[3] === 'step2' ? '' : 'none' }}>Step 2</h1>
-            <h1 style={{ display: state.val1[3] === 'step3' ? '' : 'none' }}>Step 3</h1>
-            <h1 style={{ display: state.val1[3] === 'step4' ? '' : 'none' }}>Step 4</h1>
-            <h1 style={{ display: state.val1[3] === 'step5' ? '' : 'none' }}>Step 5</h1>
-          </div>
-        </DemoRow>
-        <DemoRow title={'自定义标题以及文本内容'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[4].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[4].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[4].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[4].titleAlignBottom}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[4].index}
-              vertical={state.val[4].vertical}
-              mini={state.val[4].mini}
-              titleAlignBottom={state.val[4].titleAlignBottom}
-              currentStatus={state.val[4].index === 5 ? 'finish' : undefined}
-            >
-              <Step>
-                {{
-                  head: () => (<Tooltip message="获取token"><span>获取token</span></Tooltip>),
-                  content: () => (<span>1、调用接口，获取token</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="上传logo"><span>上传logo</span></Tooltip>),
-                  content: () => (<span>2、使用token上传logo图片</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="创建卡券"><span>创建卡券</span></Tooltip>),
-                  content: () => (<span>3、调用接口创建卡券信息</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="创建二维码"><span>创建二维码</span></Tooltip>),
-                  content: () => (<span>4、调用接口创建二维码</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="显示二维码"><span>显示二维码</span></Tooltip>),
-                  content: () => (<span>5、在应用中显示二维码</span>)
-                }}
-              </Step>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条'}>
-          <DemoLine title={'当前步骤条索引'}>
-            <InputNumber width="120" v-model={state.val[5].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-          </DemoLine>
-          <ArrowStepGroup current={state.val[5].index}>
-            <ArrowStep title={'获取token'} onClick={() => $message('获取token')}/>
-            <ArrowStep title={'上传logo'} onClick={() => $message('上传logo')}/>
-            <ArrowStep title={'创建卡券'} onClick={() => $message('创建卡券')}/>
-            <ArrowStep title={'创建二维码'} onClick={() => $message('创建二维码')}/>
-            <ArrowStep title={'显示二维码'} onClick={() => $message('显示二维码')}/>
-          </ArrowStepGroup>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条：状态'}>
-          <ArrowStepGroup>
-            <ArrowStep title="Finish" status="finish"/>
-            <ArrowStep title="Process" status="process"/>
-            <ArrowStep title="error" status="error"/>
-            <ArrowStep title="Wait" status="wait"/>
-          </ArrowStepGroup>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条：自定义内容'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[6].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-          </DemoLine>
-          <ArrowStepGroup current={state.val[6].index} className={'custom-content-slot'}>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-safe'}/>
-              <span>获取token</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-schedule'}/>
-              <span>上传logo</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-shake'}/>
-              <span>创建卡券</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-home'}/>
-              <span>创建二维码</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-skin'}/>
-              <span>显示二维码</span>
-            </ArrowStep>
-          </ArrowStepGroup>
-        </DemoRow>
-      </div>
-    );
-  };
-});
+import {designPage, reactive} from "plain-design-composition";
+import {$message, ArrowStep, ArrowStepGroup, Button, ButtonGroup, Checkbox, Icon, InputNumber, Step, StepGroup, Tooltip} from "../../../../packages";
+import {DemoRow} from "../../Demo/DemoRow";
+import {DemoLine} from "../../Demo/DemoLine";
+import './DemoStep.scss';
+
+export default designPage(() => {
+
+  const state = reactive({
+    val: {
+      1: {
+        index: 1,
+        vertical: false,
+        mini: true,
+        titleAlignBottom: true,
+      },
+      2: {
+        index: 1,
+        vertical: false,
+        mini: true,
+        titleAlignBottom: true,
+      },
+      3: {
+        index: 1,
+        vertical: false,
+        mini: true,
+        titleAlignBottom: true,
+      },
+      4: {
+        index: 1,
+        vertical: false,
+        mini: true,
+        titleAlignBottom: true,
+      },
+      5: {
+        index: 2,
+      },
+      6: {
+        index: 1,
+      },
+    },
+    showFlag: true,
+    val1: {
+      0: 1,
+      1: 2,
+      3: 'step1',
+    },
+  });
+
+  return () => {
+    return (
+      <div className={'demo-step'}>
+        <DemoRow title={'基本用法'}>
+          <DemoLine title={'当前步骤索引'}>
+            <InputNumber width="120" v-model={state.val[1].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
+            <Checkbox label={'迷你尺寸'} v-model={state.val[1].mini}/>
+            <Checkbox label={'纵向步骤条'} v-model={state.val[1].vertical}/>
+            <Checkbox label={'标题放在图标下方'} v-model={state.val[1].titleAlignBottom}/>
+            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
+          </DemoLine>
+          <DemoLine>
+            <StepGroup
+              current={state.val[1].index}
+              vertical={state.val[1].vertical}
+              mini={state.val[1].mini}
+              titleAlignBottom={state.val[1].titleAlignBottom}
+              currentStatus={state.val[1].index === 5 ? 'finish' : undefined}
+            >
+              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
+              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
+              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
+              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
+              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
+            </StepGroup>
+          </DemoLine>
+        </DemoRow>
+
+        <DemoRow title={'步骤图标'}>
+          <DemoLine title={'当前步骤索引'}>
+            <InputNumber width="120" v-model={state.val[2].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
+            <Checkbox label={'迷你尺寸'} v-model={state.val[2].mini}/>
+            <Checkbox label={'纵向步骤条'} v-model={state.val[2].vertical}/>
+            <Checkbox label={'标题放在图标下方'} v-model={state.val[2].titleAlignBottom}/>
+            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
+          </DemoLine>
+          <DemoLine>
+            <StepGroup
+              current={state.val[2].index}
+              vertical={state.val[2].vertical}
+              mini={state.val[2].mini}
+              titleAlignBottom={state.val[2].titleAlignBottom}
+              currentStatus={state.val[2].index === 5 ? 'finish' : undefined}
+            >
+              <Step icon="pi-safe" title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
+              <Step icon="pi-schedule" title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
+              <Step icon="pi-shake" title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
+              {state.showFlag && <Step icon="pi-home" title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
+              <Step icon="pi-skin" title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
+            </StepGroup>
+          </DemoLine>
+        </DemoRow>
+
+        <DemoRow title={'小圆点'}>
+          <DemoLine title={'当前步骤索引'}>
+            <InputNumber width="120" v-model={state.val[3].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
+            <Checkbox label={'迷你尺寸'} v-model={state.val[3].mini}/>
+            <Checkbox label={'纵向步骤条'} v-model={state.val[3].vertical}/>
+            <Checkbox label={'标题放在图标下方'} v-model={state.val[3].titleAlignBottom}/>
+            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
+          </DemoLine>
+          <DemoLine>
+            <StepGroup
+              current={state.val[3].index}
+              vertical={state.val[3].vertical}
+              mini={state.val[3].mini}
+              titleAlignBottom={state.val[3].titleAlignBottom}
+              currentStatus={state.val[3].index === 5 ? 'finish' : undefined}
+              dotIcon
+            >
+              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
+              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
+              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
+              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
+              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
+            </StepGroup>
+          </DemoLine>
+        </DemoRow>
+        <DemoRow title={'步骤状态'}>
+          <DemoLine>
+            <StepGroup dotIcon>
+              <Step title="Finish" message="This step is finish" status="finish"/>
+              <Step title="Process" message="This step is processing..." status="process"/>
+              <Step title="error" message="This step is error!" status="error"/>
+              <Step title="Wait" message="This step is not start." status="wait"/>
+            </StepGroup>
+          </DemoLine>
+          <DemoLine>
+            <StepGroup>
+              <Step title="Finish" message="This step is finish" status="finish" icon="pi-check"/>
+              <Step title="Process" message="This step is processing..." status="process" icon="pi-info-circle-fill"/>
+              <Step title="error" message="This step is error!" status="error" icon="pi-close"/>
+              <Step title="Wait" message="This step is not start." status="wait" icon="pi-thunderbolt"/>
+            </StepGroup>
+          </DemoLine>
+          <DemoLine>
+            <StepGroup vertical>
+              <Step title="Finish" message="This step is finish" status="finish"/>
+              <Step title="Process" message="This step is processing..." status="process"/>
+              <Step title="error" message="This step is error!" status="error"/>
+              <Step title="Wait" message="This step is not start." status="wait"/>
+            </StepGroup>
+          </DemoLine>
+          <DemoLine>
+            <StepGroup dotIcon vertical>
+              <Step title="Finish" message="This step is finish" status="finish"/>
+              <Step title="Process" message="This step is processing..." status="process"/>
+              <Step title="error" message="This step is error!" status="error"/>
+              <Step title="Wait" message="This step is not start." status="wait"/>
+            </StepGroup>
+          </DemoLine>
+        </DemoRow>
+        <DemoRow title={'通过绑定val切换步骤'}>
+          <DemoLine title={'当前步骤索引'}>
+            <ButtonGroup>
+              <Button label={'step1'} onClick={() => state.val1[3] = 'step1'} active={state.val1[3] === 'step1'}/>
+              <Button label={'step2'} onClick={() => state.val1[3] = 'step2'} active={state.val1[3] === 'step2'}/>
+              <Button label={'step3'} onClick={() => state.val1[3] = 'step3'} active={state.val1[3] === 'step3'}/>
+              <Button label={'step4'} onClick={() => state.val1[3] = 'step4'} active={state.val1[3] === 'step4'}/>
+              <Button label={'step5'} onClick={() => state.val1[3] = 'step5'} active={state.val1[3] === 'step5'}/>
+            </ButtonGroup>
+          </DemoLine>
+          <StepGroup current={state.val1[3]} currentStatus={state.val1[3] === 'step5' ? 'finish' : undefined}>
+            <Step title="获取token" message="调用接口，获取token" val={'step1'}/>
+            <Step title="上传logo" message="使用token上传logo图片" val={'step2'}/>
+            <Step title="创建卡券" message="调用接口创建卡券信息" val={'step3'}/>
+            <Step title="创建二维码" message="调用接口创建二维码" val={'step4'}/>
+            <Step title="显示二维码" message="在应用中显示二维码" val={'step5'}/>
+          </StepGroup>
+          <div style={{
+            height: '100px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: 'dashed 1px #e1e1e1'
+          }}>
+            <h1 style={{ display: state.val1[3] === 'step1' ? '' : 'none' }}>Step 1</h1>
+            <h1 style={{ display: state.val1[3] === 'step2' ? '' : 'none' }}>Step 2</h1>
+            <h1 style={{ display: state.val1[3] === 'step3' ? '' : 'none' }}>Step 3</h1>
+            <h1 style={{ display: state.val1[3] === 'step4' ? '' : 'none' }}>Step 4</h1>
+            <h1 style={{ display: state.val1[3] === 'step5' ? '' : 'none' }}>Step 5</h1>
+          </div>
+        </DemoRow>
+        <DemoRow title={'自定义标题以及文本内容'}>
+          <DemoLine title={'当前步骤索引'}>
+            <InputNumber width="120" v-model={state.val[4].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
+            <Checkbox label={'迷你尺寸'} v-model={state.val[4].mini}/>
+            <Checkbox label={'纵向步骤条'} v-model={state.val[4].vertical}/>
+            <Checkbox label={'标题放在图标下方'} v-model={state.val[4].titleAlignBottom}/>
+          </DemoLine>
+          <DemoLine>
+            <StepGroup
+              current={state.val[4].index}
+              vertical={state.val[4].vertical}
+              mini={state.val[4].mini}
+              titleAlignBottom={state.val[4].titleAlignBottom}
+              currentStatus={state.val[4].index === 5 ? 'finish' : undefined}
+            >
+              <Step>
+                {{
+                  head: () => (<Tooltip message="获取token"><span>获取token</span></Tooltip>),
+                  content: () => (<span>1、调用接口，获取token</span>)
+                }}
+              </Step>
+              <Step>
+                {{
+                  head: () => (<Tooltip message="上传logo"><span>上传logo</span></Tooltip>),
+                  content: () => (<span>2、使用token上传logo图片</span>)
+                }}
+              </Step>
+              <Step>
+                {{
+                  head: () => (<Tooltip message="创建卡券"><span>创建卡券</span></Tooltip>),
+                  content: () => (<span>3、调用接口创建卡券信息</span>)
+                }}
+              </Step>
+              <Step>
+                {{
+                  head: () => (<Tooltip message="创建二维码"><span>创建二维码</span></Tooltip>),
+                  content: () => (<span>4、调用接口创建二维码</span>)
+                }}
+              </Step>
+              <Step>
+                {{
+                  head: () => (<Tooltip message="显示二维码"><span>显示二维码</span></Tooltip>),
+                  content: () => (<span>5、在应用中显示二维码</span>)
+                }}
+              </Step>
+            </StepGroup>
+          </DemoLine>
+        </DemoRow>
+        <DemoRow title={'箭头步骤条'}>
+          <DemoLine title={'当前步骤条索引'}>
+            <InputNumber width="120" v-model={state.val[5].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
+          </DemoLine>
+          <ArrowStepGroup current={state.val[5].index}>
+            <ArrowStep title={'获取token'} onClick={() => $message('获取token')}/>
+            <ArrowStep title={'上传logo'} onClick={() => $message('上传logo')}/>
+            <ArrowStep title={'创建卡券'} onClick={() => $message('创建卡券')}/>
+            <ArrowStep title={'创建二维码'} onClick={() => $message('创建二维码')}/>
+            <ArrowStep title={'显示二维码'} onClick={() => $message('显示二维码')}/>
+          </ArrowStepGroup>
+        </DemoRow>
+        <DemoRow title={'箭头步骤条：状态'}>
+          <ArrowStepGroup>
+            <ArrowStep title="Finish" status="finish"/>
+            <ArrowStep title="Process" status="process"/>
+            <ArrowStep title="error" status="error"/>
+            <ArrowStep title="Wait" status="wait"/>
+          </ArrowStepGroup>
+        </DemoRow>
+        <DemoRow title={'箭头步骤条：自定义内容'}>
+          <DemoLine title={'当前步骤索引'}>
+            <InputNumber width="120" v-model={state.val[6].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
+          </DemoLine>
+          <ArrowStepGroup current={state.val[6].index} className={'custom-content-slot'}>
+            <ArrowStep hideIndex>
+              <Icon icon={'pi-safe'}/>
+              <span>获取token</span>
+            </ArrowStep>
+            <ArrowStep hideIndex>
+              <Icon icon={'pi-schedule'}/>
+              <span>上传logo</span>
+            </ArrowStep>
+            <ArrowStep hideIndex>
+              <Icon icon={'pi-shake'}/>
+              <span>创建卡券</span>
+            </ArrowStep>
+            <ArrowStep hideIndex>
+              <Icon icon={'pi-home'}/>
+              <span>创建二维码</span>
+            </ArrowStep>
+            <ArrowStep hideIndex>
+              <Icon icon={'pi-skin'}/>
+              <span>显示二维码</span>
+            </ArrowStep>
+          </ArrowStepGroup>
+        </DemoRow>
+      </div>
+    );
+  };
+});