docs(steps): [steps] optimize steps docs (#801)

examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-steps :data="data" type="advanced" :active="advancedActive" @click="advancedClick"></tiny-steps>
+  <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Steps as TinySteps, Modal } from '@opentiny/vue'
 
@@ -14,7 +14,7 @@ const data = ref([
   { name: 'Billing', count: 0, status: 'done' }
 ])
 
-function advancedClick(index, node) {
+const advancedClick = (index, node) => {
   advancedActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)

examples/sites/demos/pc/app/steps/advanced-steps.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-steps :data="data" type="advanced" :active="advancedActive" @click="advancedClick"></tiny-steps>
+  <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
 </template>
 
-<script lang="jsx">
+<script>
 import { Steps, Modal } from '@opentiny/vue'
 
 export default {
@@ -15,8 +15,8 @@ export default {
       data: [
         { name: 'Basic Info', count: 3, status: 'doing' },
         { name: 'BOQ Info', count: 0, status: 'done' },
-        { name: 'Involved Parties', count: 10, status: 'doing' },
+        { name: 'Involved Parties', count: 10, status: 'error' },
-        { name: 'Billing', count: 0, status: 'done' }
+        { name: 'Billing', count: 0, status: 'disabled' }
       ]
     }
   },

examples/sites/demos/pc/app/steps/click-composition-api.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-click">
     <div>点击步骤条节点来切换选中状态</div>
-    <tiny-steps :data="stepsData" :active="defaultActive" type="normal" @click="normalClick"></tiny-steps>
+    <tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
     <div v-if="currentNode">
-      <span>选中节点index:{{ currentNode.index }}; </span><br />
+      <span>选中节点 index: {{ currentNode.index }} </span><br />
-      <span> 选中节点node: {{ currentNode.node }} </span>
+      <span>选中节点 node: {{ currentNode.node }} </span>
     </div>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Steps as TinySteps } from '@opentiny/vue'
 
@@ -38,7 +38,7 @@ const stepsData = ref([
 const defaultActive = ref(1)
 const currentNode = ref(null)
 
-function normalClick(index, node) {
+const normalClick = (index, node) => {
   defaultActive.value = index
   currentNode.value = {
     index,
@@ -48,13 +48,18 @@ function normalClick(index, node) {
 </script>
 
 <style scoped>
-.content {
+.demo-steps-click {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;
+  font-size: 14px;
 }
 
-.content > div:not(:last-child) {
+.demo-steps-click > div:not(:last-child) {
   margin: 0 0 20px 0;
 }
+
+span {
+  line-height: 1.5;
+}
 </style>

examples/sites/demos/pc/app/steps/click.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-click">
-    <div>点击步骤条节点来切换选中状态</div>
+    <tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
-    <tiny-steps :data="stepsData" :active="defaultActive" type="normal" @click="normalClick"></tiny-steps>
     <div v-if="currentNode">
-      <span>选中节点index:{{ currentNode.index }}; </span><br />
+      <span>选中节点 index: {{ currentNode.index }}</span
-      <span> 选中节点node: {{ currentNode.node }} </span>
+      ><br />
+      <span>选中节点 node: {{ currentNode.node }} </span>
     </div>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Steps } from '@opentiny/vue'
 
 export default {
@@ -57,13 +57,17 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.demo-steps-click {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;
 }
 
-.content > div:not(:last-child) {
+.demo-steps-click > div:not(:last-child) {
   margin: 0 0 20px 0;
 }
+
+span {
+  line-height: 1.5;
+}
 </style>

examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-custom-field">
     <tiny-steps :data="stepsData" name-field="reName" count-field="reCount" status-field="reStatus"></tiny-steps>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Steps as TinySteps } from '@opentiny/vue'
 
@@ -33,7 +33,7 @@ const stepsData = ref([
 </script>
 
 <style scoped>
-.content {
+.demo-steps-custom-field {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;

examples/sites/demos/pc/app/steps/custom-steps-item.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-custom-field">
     <tiny-steps :data="stepsData" name-field="reName" count-field="reCount" status-field="reStatus"></tiny-steps>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Steps } from '@opentiny/vue'
 
 export default {
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.demo-steps-custom-field {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;

examples/sites/demos/pc/app/steps/data-resource-composition-api.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-steps :data="stepsData" :active="active" @click="onClick"></tiny-steps>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Steps as TinySteps } from '@opentiny/vue'
-
-const stepsData = ref([
-  {
-    name: 'name属性内容1',
-    count: 0,
-    status: 'done'
-  },
-  {
-    name: 'name属性内容2',
-    count: 9,
-    status: 'doing'
-  },
-  {
-    name: 'name属性内容3',
-    count: 0,
-    status: 'undo'
-  },
-  {
-    name: 'name属性内容4',
-    count: 5,
-    status: 'undo'
-  }
-])
-const active = ref(1)
-
-function onClick(index, node) {
-  active.value = index
-  node.status = 'doing'
-}
-</script>
-
-<style scoped>
-.content {
-  padding: 20px;
-  max-width: 50%;
-  min-width: 700px;
-}
-</style>

examples/sites/demos/pc/app/steps/data-resource.spec.ts

@@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基本用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('steps#data-resource')
-
-  const steps = page.locator('#preview .tiny-steps')
-  const nodes = steps.locator('li')
-
-  await expect(nodes.first()).toHaveText('name属性内容1')
-  await expect(nodes.first()).toHaveClass(/done/)
-  await expect(nodes.first().locator('.dot')).toHaveClass(/done/)
-  await expect(nodes.nth(1)).toHaveClass(/doing/)
-  await expect(nodes.nth(1).locator('.count')).toHaveText('9')
-  await expect(nodes.nth(1).locator('.dot')).toHaveClass(/doing/)
-
-  // 点击节点
-  await page.getByTitle('name属性内容3').click()
-  await expect(nodes.nth(2)).toHaveClass(/current/)
-  await expect(nodes.nth(2)).toHaveClass(/doing/)
-  await expect(nodes.nth(3)).toHaveClass(/undo/)
-})

examples/sites/demos/pc/app/steps/data-resource.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-steps :data="stepsData" :active="active" @click="onClick"></tiny-steps>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Steps } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySteps: Steps
-  },
-  data() {
-    return {
-      stepsData: [
-        {
-          name: 'name属性内容1',
-          count: 0,
-          status: 'done'
-        },
-        {
-          name: 'name属性内容2',
-          count: 9,
-          status: 'doing'
-        },
-        {
-          name: 'name属性内容3',
-          count: 0,
-          status: 'undo'
-        },
-        {
-          name: 'name属性内容4',
-          count: 5,
-          status: 'undo'
-        }
-      ],
-      active: 1
-    }
-  },
-  methods: {
-    onClick(index, node) {
-      this.active = index
-      node.status = 'doing'
-    }
-  }
-}
-</script>
-
-<style scoped>
-.content {
-  padding: 20px;
-  max-width: 50%;
-  min-width: 700px;
-}
-</style>

examples/sites/demos/pc/app/steps/node-status-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 

examples/sites/demos/pc/app/steps/node-status.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue

@@ -1,15 +1,15 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
 const normalActive = ref(0)
 const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
 
-function normalClick(index, node) {
+const normalClick = (index, node) => {
   normalActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)

examples/sites/demos/pc/app/steps/normal-steps.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/only-number-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-time-line :data="data" :active="normalActive" :only-number="onlyNumber" @click="normalClick"></tiny-time-line>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 

examples/sites/demos/pc/app/steps/only-number.vue

@@ -2,7 +2,7 @@
   <tiny-time-line :data="data" :active="normalActive" :only-number="true" @click="normalClick"></tiny-time-line>
 </template>
 
-<script lang="ts">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/order-progress-composition-api.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-steps
-      :data="stepsData"
-      :active="active"
-      name-field="reName"
-      count-field="reCount"
-      status-field="reStatus"
-      @click="normalClick"
-    ></tiny-steps>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Steps as TinySteps, Modal } from '@opentiny/vue'
-
-const active = ref(1)
-const stepsData = ref([
-  {
-    reName: '已下单',
-    reCount: 0,
-    reStatus: 'done'
-  },
-  {
-    reName: '运输中',
-    reCount: 1,
-    reStatus: 'done'
-  },
-  {
-    reName: '已签收',
-    reCount: 0,
-    reStatus: 'doing'
-  }
-])
-
-function normalClick(index, node) {
-  active.value = index
-
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-}
-</script>
-
-<style scoped>
-.content {
-  padding: 20px;
-  max-width: 50%;
-  min-width: 700px;
-}
-</style>

examples/sites/demos/pc/app/steps/order-progress.spec.ts

@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('订单流程', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('steps#order-progress')
-
-  const advancedSteps = page.locator('#preview .tiny-steps')
-  const nodes = advancedSteps.locator('li')
-
-  await expect(nodes.first()).toContainText('已下单')
-  await expect(nodes.nth(1)).toContainText('运输中')
-  await expect(nodes.nth(1).locator('.count')).toContainText('1')
-  await expect(nodes.nth(2)).toContainText('已签收')
-  await nodes.nth(2).click()
-  await expect(nodes.nth(2)).toHaveClass(/current/)
-})

examples/sites/demos/pc/app/steps/order-progress.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-steps
-      :data="stepsData"
-      :active="active"
-      name-field="reName"
-      count-field="reCount"
-      status-field="reStatus"
-      @click="normalClick"
-    ></tiny-steps>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Steps, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySteps: Steps
-  },
-  data() {
-    return {
-      active: 1,
-      stepsData: [
-        {
-          reName: '已下单',
-          reCount: 0,
-          reStatus: 'done'
-        },
-        {
-          reName: '运输中',
-          reCount: 1,
-          reStatus: 'done'
-        },
-        {
-          reName: '已签收',
-          reCount: 0,
-          reStatus: 'doing'
-        }
-      ]
-    }
-  },
-  methods: {
-    normalClick(index, node) {
-      this.active = index
-
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.content {
-  padding: 20px;
-  max-width: 50%;
-  min-width: 700px;
-}
-</style>

examples/sites/demos/pc/app/steps/show-divider-composition-api.vue

@@ -1,23 +1,16 @@
 <template>
-  <tiny-time-line
+  <tiny-time-line :data="data" :active="normalActive" :show-divider="true" text-position="right" @click="normalClick">
-    :data="data"
-    :active="normalActive"
-    type="normal"
-    @click="normalClick"
-    show-divider="true"
-    text-position="right"
-  >
   </tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
 const normalActive = ref(0)
 const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
 
-function normalClick(index, node) {
+const normalClick = (index, node) => {
   normalActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)

examples/sites/demos/pc/app/steps/show-divider.vue

@@ -1,16 +1,9 @@
 <template>
-  <tiny-time-line
+  <tiny-time-line :data="data" :active="normalActive" :show-divider="true" text-position="right" @click="normalClick">
-    :data="data"
-    :active="normalActive"
-    type="normal"
-    @click="normalClick"
-    show-divider="true"
-    text-position="right"
-  >
   </tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/size-composition-api.vue

@@ -1,21 +1,8 @@
 <template>
-  <p>mini尺寸:</p>
+  <tiny-steps vertical line size="small" :data="data" :visible-num="4" :active="advancedActive"></tiny-steps>
-  <tiny-time-line
-    :data="data"
-    :active="normalActive"
-    type="normal"
-    size="mini"
-    text-position="right"
-    @click="normalClick"
-  >
-  </tiny-time-line>
-
-  <p>默认尺寸:</p>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" text-position="right" @click="normalClick">
-  </tiny-time-line>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
@@ -37,16 +24,4 @@ const data = ref([
   }
 ])
 const normalActive1 = ref(0)
-
-function normalClick(index, node) {
-  normalActive.value = index
-
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-}
-
-function normalClick1(index, node) {
-  normalActive1.value = index
-
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-}
 </script>

examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue

@@ -1,19 +1,12 @@
 <template>
-  <tiny-time-line
+  <tiny-time-line :data="data" :active="active" :show-divider="true" text-position="right" @click="normalClick">
-    :data="data"
-    :active="active"
-    type="normal"
-    :show-divider="true"
-    text-position="right"
-    @click="normalClick"
-  >
     <template #active-node-desc>
       <div class="active-node-desc">{{ data[active].desc }}</div>
     </template>
   </tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 

examples/sites/demos/pc/app/steps/slot-active-node-desc.vue

@@ -1,19 +1,12 @@
 <template>
-  <tiny-time-line
+  <tiny-time-line :data="data" :active="active" :show-divider="true" text-position="right" @click="normalClick">
-    :data="data"
-    :active="active"
-    type="normal"
-    :show-divider="true"
-    text-position="right"
-    @click="normalClick"
-  >
     <template #active-node-desc>
       <div class="active-node-desc">{{ data[active].desc }}</div>
     </template>
   </tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/slot-description-composition-api.vue

@@ -10,7 +10,7 @@
   </tiny-time-line>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 
@@ -22,7 +22,7 @@ const data = ref([
   { name: 'Billing', description: '最终步骤信息' }
 ])
 
-function normalClick(index, node) {
+const normalClick = (index, node) => {
   active.value = index
 }
 </script>

examples/sites/demos/pc/app/steps/slot-description.vue

@@ -10,7 +10,7 @@
   </tiny-time-line>
 </template>
 
-<script lang="ts">
+<script>
 import { TimeLine, TimelineItem } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/slot-item-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-slot-item">
     <div>通过 item 插槽添加自定义图标</div>
     <tiny-steps :data="stepsData">
       <template #item="data">
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Steps as TinySteps } from '@opentiny/vue'
 import { iconYes, iconClose } from '@opentiny/vue-icon'
@@ -48,13 +48,13 @@ const stepsData = ref([
 </script>
 
 <style scoped>
-.content {
+.demo-steps-slot-item {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;
 }
 
-.content > div:not(:last-child) {
+.demo-steps-slot-item > div:not(:last-child) {
   margin: 0 0 20px 0;
 }
 </style>

examples/sites/demos/pc/app/steps/slot-item.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-slot-item">
-    <div>通过 item 插槽添加自定义图标</div>
+    <div>通过 item 插槽添加自定义图标：</div>
     <tiny-steps :data="stepsData">
       <template #item="data">
         <a class="label"
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Steps } from '@opentiny/vue'
 import { IconYes, IconClose } from '@opentiny/vue-icon'
 
@@ -56,7 +56,7 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.demo-steps-slot-item {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;

examples/sites/demos/pc/app/steps/space-composition-api.vue

@@ -1,10 +1,14 @@
 <template>
-  <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+  <div class="tiny-steps-demo-space">
+    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+    <br />
+    <tiny-time-line space="30%" :data="stepsData" :active="active" text-position="right"></tiny-time-line>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
-import { Steps as TinySteps } from '@opentiny/vue'
+import { Steps as TinySteps, TimeLine as TinyTimeLine } from '@opentiny/vue'
 
 const stepsData = ref([
   {
@@ -25,7 +29,7 @@ const stepsData = ref([
 ])
 const active = ref(1)
 
-function onClick(index, node) {
+const onClick = (index, node) => {
   active.value = index
   node.status = 'doing'
 }

examples/sites/demos/pc/app/steps/space.vue

@@ -1,13 +1,18 @@
 <template>
-  <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+  <div class="tiny-steps-demo-space">
+    <tiny-steps space="200" :data="stepsData" :active="active" @click="onClick"></tiny-steps>
+    <br />
+    <tiny-time-line space="30%" :data="stepsData" :active="active" text-position="right"></tiny-time-line>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
-import { Steps } from '@opentiny/vue'
+import { Steps, TimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps: Steps,
+    TinyTimeLine: TimeLine
   },
   data() {
     return {

examples/sites/demos/pc/app/steps/text-position-composition-api.vue

@@ -1,13 +1,8 @@
 <template>
-  <p>默认内容位于序号下方</p>
+  <tiny-time-line :data="data" :active="normalActive" text-position="right" @click="normalClick"> </tiny-time-line>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"> </tiny-time-line>
-
-  <p>设置<code>textPosition</code>为<code>right</code>时， 内容位于序号右边。</p>
-  <tiny-time-line :data="data" :active="normalActive1" type="normal" text-position="right" @click="normalClick1">
-  </tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
@@ -28,24 +23,10 @@ const data = ref([
     disabled: true
   }
 ])
-const normalActive1 = ref(0)
 
-function normalClick(index, node) {
+const normalClick = (index, node) => {
   normalActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
 }
-
-function normalClick1(index, node) {
-  normalActive1.value = index
-
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-}
 </script>
-
-<style>
-code {
-  padding: 4px;
-  background-color: var(--lightless);
-}
-</style>

examples/sites/demos/pc/app/steps/text-position.vue

@@ -1,15 +1,8 @@
 <template>
-  <div>
+  <tiny-time-line :data="data" :active="normalActive" text-position="right" @click="normalClick"> </tiny-time-line>
-    <p>默认内容位于序号下方</p>
-    <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"> </tiny-time-line>
-    
-    <p style="margin-top: 20px">设置<code>textPosition</code>为<code>right</code>时， 内容位于序号右边。</p>
-    <tiny-time-line :data="data" :active="normalActive1" type="normal" text-position="right" @click="normalClick1">
-    </tiny-time-line>
-  </div>
 </template>
 
-<script lang="ts">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {
@@ -35,18 +28,13 @@ export default {
           disabled: true
         }
       ],
-      normalActive1: 0
+      normalActive: 0
     }
   },
   methods: {
     normalClick(index, node) {
       this.normalActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-    },
-    normalClick1(index, node) {
-      this.normalActive1 = index
-
       Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }

examples/sites/demos/pc/app/steps/timeline-steps-composition-api.vue

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <div class="title">横向步骤条 正向</div>
-    <tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
-    <div class="half-div">
-      <div class="title">竖式步骤条 正向</div>
-      <tiny-time-line :data="data3" type="timeline" vertical :active="timeActive2" @click="timeClick2"></tiny-time-line>
-    </div>
-    <div class="half-div">
-      <div class="title">竖式步骤条 反向</div>
-      <tiny-time-line
-        :data="data3"
-        reverse
-        type="timeline"
-        vertical
-        :active="timeActive3"
-        @click="timeClick3"
-      ></tiny-time-line>
-    </div>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
-
-const timeActive1 = ref(0)
-const timeActive2 = ref(0)
-const timeActive3 = ref(0)
-const data3 = ref([
-  { name: '已下单', time: '2018-05-22 14:20' },
-  { name: '运输中', time: '2018-05-22 14:20' },
-  { name: '已签收', time: '2018-05-22 14:20' }
-])
-
-function timeClick1(index, node) {
-  timeActive1.value = index
-
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-}
-
-function timeClick2(index) {
-  timeActive2.value = index
-}
-
-function timeClick3(index) {
-  timeActive3.value = index
-}
-</script>
-
-<style scoped>
-.half-div {
-  display: inline-block;
-  width: 49%;
-  margin-top: 60px;
-  margin-bottom: 50px;
-  padding-left: 50px;
-}
-
-.title {
-  font-weight: bold;
-  margin-bottom: 30px;
-}
-</style>

examples/sites/demos/pc/app/steps/timeline-steps.vue

@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <div class="title">横向步骤条 正向</div>
-    <tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
-    <div class="half-div">
-      <div class="title">竖式步骤条 正向</div>
-      <tiny-time-line :data="data3" type="timeline" vertical :active="timeActive2" @click="timeClick2"></tiny-time-line>
-    </div>
-    <div class="half-div">
-      <div class="title">竖式步骤条 反向</div>
-      <tiny-time-line
-        :data="data3"
-        reverse
-        type="timeline"
-        vertical
-        :active="timeActive3"
-        @click="timeClick3"
-      ></tiny-time-line>
-    </div>
-  </div>
-</template>
-
-<script lang="jsx">
-import { TimeLine, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      timeActive1: 0,
-      timeActive2: 0,
-      timeActive3: 0,
-      data3: [
-        { name: '已下单', time: '2018-05-22 14:20' },
-        { name: '运输中', time: '2018-05-22 14:20' },
-        { name: '已签收', time: '2018-05-22 14:20' }
-      ]
-    }
-  },
-  methods: {
-    timeClick1(index, node) {
-      this.timeActive1 = index
-
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-    },
-    timeClick2(index) {
-      this.timeActive2 = index
-    },
-    timeClick3(index) {
-      this.timeActive3 = index
-    }
-  }
-}
-</script>
-
-<style scoped>
-.half-div {
-  display: inline-block;
-  width: 49%;
-  margin-top: 60px;
-  margin-bottom: 50px;
-  padding-left: 50px;
-}
-
-.title {
-  font-weight: bold;
-  margin-bottom: 30px;
-}
-</style>

examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="demo-steps-vertical">
+    <div class="half-div">
+      <div class="title">竖式步骤条 正向</div>
+      <tiny-time-line vertical :data="data" :active="timeActive" @click="onClick"></tiny-time-line>
+    </div>
+    <div class="half-div">
+      <div class="title">竖式步骤条 反向</div>
+      <tiny-time-line reverse vertical :data="data" :active="timeActive" @click="onClick"></tiny-time-line>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+
+const timeActive = ref(0)
+const data = ref([
+  { name: '已下单', time: '2018-05-22 14:20' },
+  { name: '运输中', time: '2018-05-22 14:20' },
+  { name: '已签收', time: '2018-05-22 14:20' }
+])
+
+const onClick = (index, node) => {
+  timeActive1.value = index
+
+  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+}
+</script>
+
+<style scoped>
+.half-div {
+  display: inline-block;
+  width: 49%;
+}
+
+.title {
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+</style>

examples/sites/demos/pc/app/steps/vertical-steps.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="tiny-steps-demo-vertical">
+    <div class="half-div">
+      <div class="title">竖式步骤条 正向</div>
+      <tiny-time-line vertical :data="data" :active="timeActive" @click="onClick"></tiny-time-line>
+    </div>
+    <div class="half-div">
+      <div class="title">竖式步骤条 反向</div>
+      <tiny-time-line reverse vertical :data="data" :active="timeActive" @click="onClick"></tiny-time-line>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TimeLine, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLine
+  },
+  data() {
+    return {
+      timeActive: 0,
+      data: [
+        { name: '已下单', time: '2018-05-22 14:20' },
+        { name: '运输中', time: '2018-05-22 14:20' },
+        { name: '已签收', time: '2018-05-22 14:20' }
+      ]
+    }
+  },
+  methods: {
+    onClick(index) {
+      this.timeActive = index
+    }
+  }
+}
+</script>
+
+<style scoped>
+.half-div {
+  display: inline-block;
+  width: 49%;
+}
+
+.title {
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+</style>

examples/sites/demos/pc/app/steps/webdoc/steps.cn.md

@@ -4,4 +4,4 @@ title: Steps 步骤条
 
 # Steps 步骤条
 
-<div>Steps 步骤条</div>
+<div>引导用户按照流程分布完成任务的导航条。</div>

examples/sites/demos/pc/app/steps/webdoc/steps.en.md

@@ -4,4 +4,4 @@ title: Steps
 
 # Steps
 
-<div>Steps</div>
+<div>Steps guides users to complete tasks distributed according to a process flow.</div>

examples/sites/demos/pc/app/steps/webdoc/steps.js

@@ -3,69 +3,82 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'data-resource',
+      'demoId': 'normal-steps',
-      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'name': { 'zh-CN': '单链型步骤条', 'en-US': 'chain steps' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
-      'codeFiles': ['data-resource.vue']
+        'zh-CN':
+          '<p>使用 <code>tiny-time-line</code> 标签时显示为单链型步骤条，通过 <code>data</code> 属性绑定节点数据， <code>active</code> 属性指定当前选中节点。</p>\n',
+        'en-US':
+          '<p>When using <code>tiny-time-line</code> tags, it displays as a chain steps.The node data is bound through the <code>data</code> attribute, and the <code>active</code> property specifies the currently selected node.</p>\n'
+      },
+      'codeFiles': ['normal-steps.vue']
+    },
+    {
+      'demoId': 'advanced-steps',
+      'name': { 'zh-CN': '条形步骤条', 'en-US': 'Bar steps' },
+      'desc': {
+        'zh-CN': '<p>使用 <code>tiny-steps</code> 标签时，显示为条形步骤条。</p>\n',
+        'en-US': 'When using <code>tiny-steps<</code> tags, it displays as a bar steps.'
+      },
+      'codeFiles': ['advanced-steps.vue']
+    },
+    {
+      'demoId': 'vertical-steps',
+      'name': { 'zh-CN': '竖式步骤条', 'en-US': 'Vertical steps' },
+      'desc': {
+        'zh-CN': '<p>使用 <code>vertical</code> 属性设置为条形步骤条。</p>\n',
+        'en-US': 'Use <code>vertical<</code> attribute to set vertical steps.'
+      },
+      'codeFiles': ['vertical-steps.vue']
     },
     {
       'demoId': 'space',
       'name': { 'zh-CN': '节点宽度', 'en-US': 'Common Step Bar' },
       'desc': {
-        'zh-CN': '<p>使用 <code>space</code>属性配置步骤条节点的宽度。</p>\n',
+        'zh-CN': '<p>使用 <code>space</code> 属性配置步骤条节点的宽度。</p>\n',
-        'en-US':
+        'en-US': '<p>Using <code>space</code> attribute to set node width. </p>\n'
-          '<p>Use the <code>tiny-time-line</code> tag and set <code>type</code> to <code>normal</code> to implement common steps. </p>\n'
       },
       'codeFiles': ['space.vue']
     },
-    {
-      'demoId': 'normal-steps',
-      'name': { 'zh-CN': '普通步骤条', 'en-US': 'Advanced Wizard' },
-      'desc': {
-        'zh-CN':
-          '<p>使用 <code>tiny-time-line</code> 标签，并设置 <code>type</code> 为 <code>normal</code> 实现普通步骤条。</p>\n',
-        'en-US': '<p>Set <code>type</code> to <code>advanced</code> to enable the advanced wizard function. </p>\n'
-      },
-      'codeFiles': ['normal-steps.vue']
-    },
     {
       'demoId': 'node-status',
       'name': { 'zh-CN': '节点状态', 'en-US': 'Timeline Step Bar' },
       'desc': {
         'zh-CN':
-          '<p>通过单个节点数据的<code>disabled</code> 属性配置是否禁用;通过 <code>error</code> 属性配置错误状态</p>\n',
+          '<p>通过单个节点数据中的 <code>disabled</code> 属性配置是否禁用；<code>error</code> 属性配置错误状态</p>\n',
         'en-US':
-          '<p>Use the <code>tiny-time-line</code> tag and set <code>type</code> to <code>timeline</code> to implement the timeline step bar. If the <code>vertical</code> attribute is configured, the timeline step bar changes to the vertical mode. If the <code>reverse</code> attribute is configured, the timeline step bar changes to the vertical mode. </p>\n'
+          '<p>The <code>disabled</code> attribute in single node data is used to configure whether to disable, while the <code>error</code> attribute is used to configure error state</p>\n'
       },
       'codeFiles': ['node-status.vue']
     },
     {
       'demoId': 'text-position',
-      'name': { 'zh-CN': '文本内容位置', 'en-US': 'Customized Data Item' },
+      'name': { 'zh-CN': '节点名称位置', 'en-US': 'Node name position' },
       'desc': {
         'zh-CN':
-          '<p>通过<code>textPosition</code> 配置节点内容位置，默认位于序号下方, 取值为<code>"right"</code>时内容位于序号右边。</p>\n',
+          '<p>通过 <code>text-position</code> 配置节点名称位置，默认位于序号下方, 当取值为 <code>right</code> 时名称位于序号右侧。</p>\n',
         'en-US':
-          "<p>By default, the subobjects of bound data contain the name, count, and status fields. \n<code>name-field</code>: Set the field name corresponding to the name in the node information. The default value is'name'. \n<code>count-field</code>: field name corresponding to the logo count in the advanced wizard. The default value is'count'. \n<code>status-field</code>: field name corresponding to the data status. The default value is status. </p>\n"
+          '<p>Configure the position of the node name using <code>text-position</code>, with the default position being below the number. When the value is <code>right</code>, the name is positioned to the right of the number.</p>\n'
       },
       'codeFiles': ['text-position.vue']
     },
     {
       'demoId': 'show-divider',
-      'name': { 'zh-CN': '底部分割线', 'en-US': 'Order Process' },
+      'name': { 'zh-CN': '底部分割线', 'en-US': 'Bottom dividing line' },
       'desc': {
         'zh-CN':
-          '<p>通过<code>show-divider</code> 设置是否显示步骤条底部分隔线，仅当节点文本内容位于序号右边时生效。</p>\n',
+          '<p>通过 <code>show-divider</code> 属性设置是否显示步骤条底部分隔线，仅当节点文本内容位于序号右边时生效。</p>\n',
-        'en-US': '<p>The Steps component is used to simulate the order process. </p>\n'
+        'en-US':
+          '<p><code>show-divider</code> attribute is used to set whether to display the bottom dividing line of the step bar. It only takes effect when the node text content is located to the right of the number. </p>\n'
       },
       'codeFiles': ['show-divider.vue']
     },
     {
       'demoId': 'slot-description',
-      'name': { 'zh-CN': '节点描述信息', 'en-US': 'Node Description' },
+      'name': { 'zh-CN': '节点描述插槽', 'en-US': 'Node Description' },
       'desc': {
-        'zh-CN': '<p>通过<code>description</code> 插槽添加单个节点的补充描述信息。</p>\n',
+        'zh-CN': '<p>通过 <code>description</code> 插槽添加单个节点的描述信息。</p>\n',
-        'en-US': '<p>The <code>click</code> event is triggered when a node is clicked. </p>\n'
+        'en-US': '<p>Add description information for a single node through the <code>description</code> slot.</p>\n'
       },
       'codeFiles': ['slot-description.vue']
     },
@@ -73,8 +86,9 @@ export default {
       'demoId': 'slot-active-node-desc',
       'name': { 'zh-CN': '当前节点描述信息', 'en-US': 'Click Event' },
       'desc': {
-        'zh-CN': '<p>通过<code>active-node-desc</code> 插槽添加当前节点一些自定义的描述信息。</p>\n',
+        'zh-CN': '<p>通过 <code>active-node-desc</code> 插槽添加当前选中节点的描述信息。</p>\n',
-        'en-US': '<p>The <code>click</code> event is triggered when a node is clicked. </p>\n'
+        'en-US':
+          '<p>Add description information for the active node through the <code>active-node-desc</code> slot. </p>\n'
       },
       'codeFiles': ['slot-active-node-desc.vue']
     },
@@ -82,64 +96,50 @@ export default {
       'demoId': 'size',
       'name': { 'zh-CN': '尺寸', 'en-US': 'Use of slots' },
       'desc': {
-        'zh-CN': '<p>通过 <code>size</code> 设置步骤条尺寸。</p>\n',
+        'zh-CN': '<p>通过 <code>size</code> 属性设置步骤条尺寸。</p>\n',
-        'en-US': '<p>Customize the content of the step bar node through the scope slot <code>item</code>. </p>\n'
+        'en-US': '<p>Set size of steps through <code>size</code> attribute.</p>\n'
       },
       'codeFiles': ['size.vue']
     },
-    {
-      'demoId': 'advanced-steps',
-      'name': { 'zh-CN': '高级向导', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>设置 <code>type</code> 为 <code>advanced</code> 启用高级向导功能。</p>\n', 'en-US': '' },
-      'codeFiles': ['advanced-steps.vue']
-    },
-    {
-      'demoId': 'timeline-steps',
-      'name': { 'zh-CN': '时间线步骤条', 'en-US': '' },
-      'desc': {
-        'zh-CN':
-          '<p>使用 <code>tiny-time-line</code> 标签，并设置 <code>type</code> 为 <code>timeline</code> 实现时间线步骤条。同时若配置 <code>vertical</code> 属性，时间线步骤条将变成竖向模式，而若再配置 <code>reverse</code> 属性，则还可以实现时间线步骤条竖向模式的反向形式。</p>\n',
-        'en-US': ''
-      },
-      'codeFiles': ['timeline-steps.vue']
-    },
     {
       'demoId': 'custom-steps-item',
-      'name': { 'zh-CN': '自定义数据项', 'en-US': '' },
+      'name': { 'zh-CN': '自定义字段', 'en-US': 'Custom fields' },
       'desc': {
         'zh-CN':
-          "<p>默认情况下，绑定数据的子对象包含 name、count 字段。\n<code>name-field</code>：设置节点信息中名称对应的字段名，默认为 'name' 。\n<code>count-field</code>：设置高级向导里徽标计数对应的字段名，默认为 'count' 。\n<code>status-field</code>：设置数据状态对应的字段名，默认为 'status' 。</p>\n",
+          "<p>可以通过以下属性自定义数据项字段：<br /><code>name-field</code>： 设置节点信息中名称对应的字段名，默认为 'name'  <br /><code>count-field</code>：设置条形步骤条里徽标计数对应的字段名，默认为 'count' 。<br /><code>status-field</code>：设置数据状态对应的字段名，默认为 'status' 。</p>\n",
-        'en-US': ''
+        'en-US':
+          "You can customize the data item fields with the following attributes.<br /><code>name-field</code>: Set the field name corresponding to the name in the node information, the default is 'name'.<br /><code>count-field</code>Set the field name corresponding to the count in the logo counter of the bar step bar, the default is 'count'.<br /><code>status-field</code>: Set the field name corresponding to the status in the data item, the default is 'status'."
       },
       'codeFiles': ['custom-steps-item.vue']
     },
     {
       'demoId': 'only-number',
-      'name': { 'zh-CN': '序号仅显示数字', 'en-US': '' },
+      'name': { 'zh-CN': '纯数字序号', 'en-US': 'Only numeric order' },
       'desc': {
         'zh-CN':
-          "<p>设置<code>only-number</code>为true时，节点只显示数字序号而不显示任何状态图标。</p>\n",
+          '<p>设置 <code>only-number</code> 为true时，节点只显示数字序号而不显示任何状态图标，仅适用单链型步骤条。</p>\n',
-        'en-US': ''
+        'en-US':
+          'When setting <code>only-number</code> to true, the node only displays numeric serial numbers without any status icons, only applicable to chain steps.'
       },
       'codeFiles': ['only-number.vue']
     },
-    {
-      'demoId': 'order-progress',
-      'name': { 'zh-CN': '订单流程', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 Steps 组件模拟订单流程。</p>\n', 'en-US': '' },
-      'codeFiles': ['order-progress.vue']
-    },
     {
       'demoId': 'click',
       'name': { 'zh-CN': '点击事件', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n',
+        'en-US': 'Trigger <code>click</code> event when clicking on a node.'
+      },
       'codeFiles': ['click.vue']
     },
     {
-      'demoId': 'slot',
+      'demoId': 'slot-item',
-      'name': { 'zh-CN': '插槽的使用', 'en-US': '' },
+      'name': { 'zh-CN': 'item插槽', 'en-US': 'item slot' },
-      'desc': { 'zh-CN': '<p>通过作用域插槽 <code>item</code> 自定义步骤条节点内容。</p>\n', 'en-US': '' },
+      'desc': {
-      'codeFiles': ['slot.vue']
+        'zh-CN': '<p>通过插槽 <code>item</code> 自定义节点内容。</p>\n',
+        'en-US': 'Customize step bar node content through scope slot <code>item</code>.'
+      },
+      'codeFiles': ['slot-item.vue']
     }
   ],
   apis: [
@@ -152,8 +152,8 @@ export default {
           'type': 'number',
           'defaultValue': '-1',
           'desc': {
-            'zh-CN': '设置步骤条的选中步骤，默认为-1 。',
+            'zh-CN': '当前步骤索引，从0开始计数',
-            'en-US': 'Set the selected step of the step bar. The default value is -1.'
+            'en-US': 'Current step index and count from 0'
           },
           'demoId': 'advanced-steps'
         },
@@ -162,36 +162,72 @@ export default {
           'type': 'string',
           'defaultValue': 'count',
           'desc': {
-            'zh-CN': "设置高级向导里徽标计数对应的字段名，默认为 'count'",
+            'zh-CN': '条形步骤条里徽标计数对应的字段名',
-            'en-US':
+            'en-US': 'Custom field name corresponding to logo count in bar steps'
-              "Set the field name corresponding to the logo count in the advanced wizard. The default value is'count'"
           },
           'demoId': 'custom-steps-item'
         },
         {
           'name': 'data',
-          'type': 'object , Array',
+          'type': 'IStepsItem',
-          'defaultValue': '',
+          'typeAnchorName': 'IStepsItem[] | ITimelineItem[]',
-          'desc': { 'zh-CN': '设置步骤条的数据。', 'en-US': 'Set the step bar data.' },
+          'defaultValue': '[]',
-          'demoId': 'data-resource'
+          'desc': {
+            'zh-CN':
+              '步骤条数据，其中条形步骤条的数据类型参考<a href="IStepsItem">IStepsItem</a>；单链型步骤条的数据类型参考<a href="time-line#ITimelineItem">Timeline组件</a>',
+            'en-US':
+              'The data type of the step bar is referred to <a href="IStepsItem">IStepsItem</a>, and the data type of the chain step bar is referred to <a href="time-line#ITimelineItem">Timeline component</a>.'
+          },
+          'demoId': 'normal-steps'
         },
         {
           'name': 'name-field',
           'type': 'string',
           'defaultValue': 'name',
           'desc': {
-            'zh-CN': "设置节点信息中名称对应的字段名，默认为 'name'",
+            'zh-CN': '节点名称对应的字段名',
-            'en-US': "Set the field name corresponding to the name in the node information. The default value is'name'"
+            'en-US': 'Field name corresponds to  name of node'
           },
           'demoId': 'custom-steps-item'
         },
+        {
+          'name': 'only-number',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '节点序号是否只显示数字，用于单链型步骤条',
+            'en-US': 'Whether the node sequence number only displays numbers, used for chain steps'
+          },
+          'demoId': 'only-number'
+        },
+        {
+          'name': 'reverse',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否逆序展示数据，用于单链型步骤条',
+            'en-US': 'Whether to display data in reverse order, used for chain steps'
+          },
+          'demoId': 'vertical-steps'
+        },
+        {
+          'name': 'show-divider',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否显示单链型步骤条的底部分割线',
+            'en-US': 'Whether to display the bottom separator line of the chain steps'
+          },
+          'demoId': 'show-divider'
+        },
         {
           'name': 'space',
-          'type': 'string, number',
+          'type': 'string | number',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置步骤条节点的宽度, 取值为数字、带长度单位数值与百分比，数字会默认以px为长度单位。',
+            'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位。',
-            'en-US': 'Set the width of the step bar.'
+            'en-US':
+              'Node width can be set to numeric values, values with length units, or percentages. Numeric values will default to using pixels as the length unit'
           },
           'demoId': 'space'
         },
@@ -200,8 +236,8 @@ export default {
           'type': 'string',
           'defaultValue': 'status',
           'desc': {
-            'zh-CN': "设置数据状态对应的字段名，默认为 'status'",
+            'zh-CN': '数据状态对应的字段名，用于条形步骤条',
-            'en-US': "Name of the field corresponding to the data status. The default value is'status'"
+            'en-US': 'Field name corresponding to data status, used for bar steps '
           },
           'demoId': 'custom-steps-item'
         },
@@ -209,31 +245,20 @@ export default {
           'name': 'text-position',
           'type': 'string',
           'defaultValue': 'bottom',
-          'desc': { 'zh-CN': '设置节点文本内容的位置, 可选值有right, bottom', 'en-US': '' },
+          'desc': {
+            'zh-CN': '节点名称的位置， 可选值有right | bottom，用于单链型步骤条',
+            'en-US':
+              'The position of the node name, with optional values of right | bottom, is used for the chain steps'
+          },
           'demoId': 'text-position'
-        },
+        }
-        {
-          'name': 'show-divider',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': { 'zh-CN': '设置是否显示步骤条底部分割线', 'en-US': '' },
-          'demoId': 'show-divider'
-        },
-        {
-          'name': 'only-number',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': { 'zh-CN': '节点序号是否只显示数字', 'en-US': '' },
-          'demoId': 'only-number'
-        },
       ],
       'events': [
         {
           'name': 'click',
-          'type': '',
+          'type': '(index: number, node: IStepsItem | ITimelineItem) => void',
-          'defaultValue': '',
           'desc': {
-            'zh-CN': '节点的点击事件，参数（index:节点索引, node：节点数据信息）',
+            'zh-CN': '节点点击事件，参数：<li>index: 点击节点的索引</li><li>node：点击节点的数据</li>',
             'en-US': 'Node click event. Parameter: (index: node index, node: node data information)'
           },
           'demoId': 'click'
@@ -241,27 +266,49 @@ export default {
       ],
       'slots': [
         {
-          'name': 'item',
+          'name': 'active-node-desc',
-          'type': '',
+          'desc': {
-          'defaultValue': '',
+            'zh-CN': '当前节点描述信息插槽，用于单链型步骤条',
-          'desc': { 'zh-CN': '步骤条数据项插槽', 'en-US': 'Step bar data item slot' },
+            'en-US': 'Current node description information slot, used for chain steps'
-          'demoId': 'slot'
+          },
+          'demoId': 'slot-active-node-desc'
         },
         {
           'name': 'description',
-          'type': '',
+          'desc': {
-          'defaultValue': '',
+            'zh-CN': '节点描述信息插槽，用于单链型步骤条',
-          'desc': { 'zh-CN': '节点描述信息插槽', 'en-US': 'Node description information slot' },
+            'en-US': 'Node description information slot, used for chain steps'
+          },
           'demoId': 'slot-description'
         },
         {
-          'name': 'active-node-desc',
+          'name': 'item',
-          'type': '',
+          'desc': {
-          'defaultValue': '',
+            'zh-CN': '步骤条数据项插槽，用于条形步骤条',
-          'desc': { 'zh-CN': '当前节点描述信息插槽', 'en-US': '' },
+            'en-US': 'Step bar data item slot, used for bar steps'
-          'demoId': 'slot-active-node-desc'
+          },
+          'demoId': 'slot-item'
         }
       ]
     }
+  ],
+  'types': [
+    {
+      'name': 'IStepsItem',
+      'type': 'interface',
+      'code': `
+interface IStepsItem {
+  // 条形步骤条数据项
+  name: string, // 节点名称
+  status: IStepsStatus, // 节点状态，取值见下面IStepsStatus类型说明
+  count: number // 节点右上角徽标计数
+}
+      `
+    },
+    {
+      'name': 'IStepsStatus',
+      'type': 'type',
+      'code': `type IStepsStatus = 'doing' | 'done' | 'disabled' | 'error' | ''`
+    }
   ]
 }