diff --git a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
index 863c79616a..c18246ea5a 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
+++ b/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)}.`)
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps.vue b/examples/sites/demos/pc/app/steps/advanced-steps.vue
index a323b438d2..458e299caf 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps.vue
+++ b/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: 'Billing', count: 0, status: 'done' }
+        { name: 'Involved Parties', count: 10, status: 'error' },
+        { name: 'Billing', count: 0, status: 'disabled' }
       ]
     }
   },
diff --git a/examples/sites/demos/pc/app/steps/click-composition-api.vue b/examples/sites/demos/pc/app/steps/click-composition-api.vue
index d4501942d8..b59755ec10 100644
--- a/examples/sites/demos/pc/app/steps/click-composition-api.vue
+++ b/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> 选中节点node: {{ currentNode.node }} </span>
+      <span>选中节点 index: {{ currentNode.index }} </span><br />
+      <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>
diff --git a/examples/sites/demos/pc/app/steps/click.vue b/examples/sites/demos/pc/app/steps/click.vue
index 5d9308be3d..567c3243f3 100644
--- a/examples/sites/demos/pc/app/steps/click.vue
+++ b/examples/sites/demos/pc/app/steps/click.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="content">
-    <div>点击步骤条节点来切换选中状态</div>
-    <tiny-steps :data="stepsData" :active="defaultActive" type="normal" @click="normalClick"></tiny-steps>
+  <div class="demo-steps-click">
+    <tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
     <div v-if="currentNode">
-      <span>选中节点index:{{ currentNode.index }}; </span><br />
-      <span> 选中节点node: {{ currentNode.node }} </span>
+      <span>选中节点 index: {{ currentNode.index }}</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>
diff --git a/examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue b/examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue
index 5ffc09bb08..8cc1e6e223 100644
--- a/examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue
+++ b/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;
diff --git a/examples/sites/demos/pc/app/steps/custom-steps-item.vue b/examples/sites/demos/pc/app/steps/custom-steps-item.vue
index 81e95fb836..2ff73eb8b6 100644
--- a/examples/sites/demos/pc/app/steps/custom-steps-item.vue
+++ b/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;
diff --git a/examples/sites/demos/pc/app/steps/data-resource-composition-api.vue b/examples/sites/demos/pc/app/steps/data-resource-composition-api.vue
deleted file mode 100644
index 997efbfae7..0000000000
--- a/examples/sites/demos/pc/app/steps/data-resource-composition-api.vue
+++ /dev/null
@@ -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>
diff --git a/examples/sites/demos/pc/app/steps/data-resource.spec.ts b/examples/sites/demos/pc/app/steps/data-resource.spec.ts
deleted file mode 100644
index a435e6c9f8..0000000000
--- a/examples/sites/demos/pc/app/steps/data-resource.spec.ts
+++ /dev/null
@@ -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/)
-})
diff --git a/examples/sites/demos/pc/app/steps/data-resource.vue b/examples/sites/demos/pc/app/steps/data-resource.vue
deleted file mode 100644
index 5e8c482892..0000000000
--- a/examples/sites/demos/pc/app/steps/data-resource.vue
+++ /dev/null
@@ -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>
diff --git a/examples/sites/demos/pc/app/steps/node-status-composition-api.vue b/examples/sites/demos/pc/app/steps/node-status-composition-api.vue
index f6d949e05b..ebc8f758a6 100644
--- a/examples/sites/demos/pc/app/steps/node-status-composition-api.vue
+++ b/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'
 
diff --git a/examples/sites/demos/pc/app/steps/node-status.vue b/examples/sites/demos/pc/app/steps/node-status.vue
index 72487382b4..0679dbd717 100644
--- a/examples/sites/demos/pc/app/steps/node-status.vue
+++ b/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 {
diff --git a/examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue
index 4344392ec4..4445685073 100644
--- a/examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue
+++ b/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)}.`)
diff --git a/examples/sites/demos/pc/app/steps/normal-steps.vue b/examples/sites/demos/pc/app/steps/normal-steps.vue
index b3fd36aaa9..a3c33f8091 100644
--- a/examples/sites/demos/pc/app/steps/normal-steps.vue
+++ b/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 {
diff --git a/examples/sites/demos/pc/app/steps/only-number-composition-api.vue b/examples/sites/demos/pc/app/steps/only-number-composition-api.vue
index 54a334782e..0d31fa9e0e 100644
--- a/examples/sites/demos/pc/app/steps/only-number-composition-api.vue
+++ b/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'
 
diff --git a/examples/sites/demos/pc/app/steps/only-number.vue b/examples/sites/demos/pc/app/steps/only-number.vue
index 19041fcdbb..167644a09d 100644
--- a/examples/sites/demos/pc/app/steps/only-number.vue
+++ b/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 {
diff --git a/examples/sites/demos/pc/app/steps/order-progress-composition-api.vue b/examples/sites/demos/pc/app/steps/order-progress-composition-api.vue
deleted file mode 100644
index 690b8b9c70..0000000000
--- a/examples/sites/demos/pc/app/steps/order-progress-composition-api.vue
+++ /dev/null
@@ -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>
diff --git a/examples/sites/demos/pc/app/steps/order-progress.spec.ts b/examples/sites/demos/pc/app/steps/order-progress.spec.ts
deleted file mode 100644
index 64d015e531..0000000000
--- a/examples/sites/demos/pc/app/steps/order-progress.spec.ts
+++ /dev/null
@@ -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/)
-})
diff --git a/examples/sites/demos/pc/app/steps/order-progress.vue b/examples/sites/demos/pc/app/steps/order-progress.vue
deleted file mode 100644
index 1458b789eb..0000000000
--- a/examples/sites/demos/pc/app/steps/order-progress.vue
+++ /dev/null
@@ -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>
diff --git a/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue b/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue
index 8258d54b4c..6fe97e5709 100644
--- a/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue
@@ -1,23 +1,16 @@
 <template>
-  <tiny-time-line
-    :data="data"
-    :active="normalActive"
-    type="normal"
-    @click="normalClick"
-    show-divider="true"
-    text-position="right"
-  >
+  <tiny-time-line :data="data" :active="normalActive" :show-divider="true" text-position="right" @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)}.`)
diff --git a/examples/sites/demos/pc/app/steps/show-divider.vue b/examples/sites/demos/pc/app/steps/show-divider.vue
index 4df061112e..cb8b47c748 100644
--- a/examples/sites/demos/pc/app/steps/show-divider.vue
+++ b/examples/sites/demos/pc/app/steps/show-divider.vue
@@ -1,16 +1,9 @@
 <template>
-  <tiny-time-line
-    :data="data"
-    :active="normalActive"
-    type="normal"
-    @click="normalClick"
-    show-divider="true"
-    text-position="right"
-  >
+  <tiny-time-line :data="data" :active="normalActive" :show-divider="true" text-position="right" @click="normalClick">
   </tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/steps/size-composition-api.vue b/examples/sites/demos/pc/app/steps/size-composition-api.vue
index e285af4e16..29ad347104 100644
--- a/examples/sites/demos/pc/app/steps/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/size-composition-api.vue
@@ -1,21 +1,8 @@
 <template>
-  <p>mini尺寸:</p>
-  <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>
+  <tiny-steps vertical line size="small" :data="data" :visible-num="4" :active="advancedActive"></tiny-steps>
 </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>
diff --git a/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue
index 894835568c..d8d3e75909 100644
--- a/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue
@@ -1,19 +1,12 @@
 <template>
-  <tiny-time-line
-    :data="data"
-    :active="active"
-    type="normal"
-    :show-divider="true"
-    text-position="right"
-    @click="normalClick"
-  >
+  <tiny-time-line :data="data" :active="active" :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'
 
diff --git a/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue b/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue
index 8ecd12845c..04d064f3ad 100644
--- a/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue
+++ b/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue
@@ -1,19 +1,12 @@
 <template>
-  <tiny-time-line
-    :data="data"
-    :active="active"
-    type="normal"
-    :show-divider="true"
-    text-position="right"
-    @click="normalClick"
-  >
+  <tiny-time-line :data="data" :active="active" :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 {
diff --git a/examples/sites/demos/pc/app/steps/slot-description-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-description-composition-api.vue
index cae2e70c42..477f5fd604 100644
--- a/examples/sites/demos/pc/app/steps/slot-description-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/steps/slot-description.vue b/examples/sites/demos/pc/app/steps/slot-description.vue
index 64d7c88fb6..b81073f6d4 100644
--- a/examples/sites/demos/pc/app/steps/slot-description.vue
+++ b/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 {
diff --git a/examples/sites/demos/pc/app/steps/slot-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
similarity index 89%
rename from examples/sites/demos/pc/app/steps/slot-composition-api.vue
rename to examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
index 0edf761439..818e86dcfb 100644
--- a/examples/sites/demos/pc/app/steps/slot-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/steps/slot.spec.ts b/examples/sites/demos/pc/app/steps/slot-item.spec.ts
similarity index 100%
rename from examples/sites/demos/pc/app/steps/slot.spec.ts
rename to examples/sites/demos/pc/app/steps/slot-item.spec.ts
diff --git a/examples/sites/demos/pc/app/steps/slot.vue b/examples/sites/demos/pc/app/steps/slot-item.vue
similarity index 90%
rename from examples/sites/demos/pc/app/steps/slot.vue
rename to examples/sites/demos/pc/app/steps/slot-item.vue
index b8cdc8f106..d483a7cc4a 100644
--- a/examples/sites/demos/pc/app/steps/slot.vue
+++ b/examples/sites/demos/pc/app/steps/slot-item.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="content">
-    <div>通过 item 插槽添加自定义图标</div>
+  <div class="demo-steps-slot-item">
+    <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;
diff --git a/examples/sites/demos/pc/app/steps/space-composition-api.vue b/examples/sites/demos/pc/app/steps/space-composition-api.vue
index 8e7c608ccd..c87a6e0ac6 100644
--- a/examples/sites/demos/pc/app/steps/space-composition-api.vue
+++ b/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'
 }
diff --git a/examples/sites/demos/pc/app/steps/space.vue b/examples/sites/demos/pc/app/steps/space.vue
index 93f7e53a5f..67c3e7b385 100644
--- a/examples/sites/demos/pc/app/steps/space.vue
+++ b/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">
-import { Steps } from '@opentiny/vue'
+<script>
+import { Steps, TimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps: Steps,
+    TinyTimeLine: TimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/steps/text-position-composition-api.vue b/examples/sites/demos/pc/app/steps/text-position-composition-api.vue
index 6f12b45ebb..141238ae86 100644
--- a/examples/sites/demos/pc/app/steps/text-position-composition-api.vue
+++ b/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" 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>
+  <tiny-time-line :data="data" :active="normalActive" text-position="right" @click="normalClick"> </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>
diff --git a/examples/sites/demos/pc/app/steps/text-position.vue b/examples/sites/demos/pc/app/steps/text-position.vue
index d5c4a45571..405c3cff30 100644
--- a/examples/sites/demos/pc/app/steps/text-position.vue
+++ b/examples/sites/demos/pc/app/steps/text-position.vue
@@ -1,15 +1,8 @@
 <template>
-  <div>
-    <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>
+  <tiny-time-line :data="data" :active="normalActive" text-position="right" @click="normalClick"> </tiny-time-line>
 </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)}.`)
     }
   }
diff --git a/examples/sites/demos/pc/app/steps/timeline-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/timeline-steps-composition-api.vue
deleted file mode 100644
index 6ef1cd1a24..0000000000
--- a/examples/sites/demos/pc/app/steps/timeline-steps-composition-api.vue
+++ /dev/null
@@ -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>
diff --git a/examples/sites/demos/pc/app/steps/timeline-steps.vue b/examples/sites/demos/pc/app/steps/timeline-steps.vue
deleted file mode 100644
index e03bfe0be1..0000000000
--- a/examples/sites/demos/pc/app/steps/timeline-steps.vue
+++ /dev/null
@@ -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>
diff --git a/examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue
new file mode 100644
index 0000000000..e9094480be
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/pc/app/steps/timeline-steps.spec.ts b/examples/sites/demos/pc/app/steps/vertical-steps.spec.ts
similarity index 100%
rename from examples/sites/demos/pc/app/steps/timeline-steps.spec.ts
rename to examples/sites/demos/pc/app/steps/vertical-steps.spec.ts
diff --git a/examples/sites/demos/pc/app/steps/vertical-steps.vue b/examples/sites/demos/pc/app/steps/vertical-steps.vue
new file mode 100644
index 0000000000..e754dd12b7
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/pc/app/steps/webdoc/steps.cn.md b/examples/sites/demos/pc/app/steps/webdoc/steps.cn.md
index eb971f2ac1..562af4dda1 100644
--- a/examples/sites/demos/pc/app/steps/webdoc/steps.cn.md
+++ b/examples/sites/demos/pc/app/steps/webdoc/steps.cn.md
@@ -4,4 +4,4 @@ title: Steps 步骤条
 
 # Steps 步骤条
 
-<div>Steps 步骤条</div>
+<div>引导用户按照流程分布完成任务的导航条。</div>
diff --git a/examples/sites/demos/pc/app/steps/webdoc/steps.en.md b/examples/sites/demos/pc/app/steps/webdoc/steps.en.md
index 8229eb855d..6242060d17 100644
--- a/examples/sites/demos/pc/app/steps/webdoc/steps.en.md
+++ b/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>
diff --git a/examples/sites/demos/pc/app/steps/webdoc/steps.js b/examples/sites/demos/pc/app/steps/webdoc/steps.js
index 73e390a5c3..443aebd2b7 100644
--- a/examples/sites/demos/pc/app/steps/webdoc/steps.js
+++ b/examples/sites/demos/pc/app/steps/webdoc/steps.js
@@ -3,69 +3,82 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'data-resource',
-      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['data-resource.vue']
+      'demoId': 'normal-steps',
+      'name': { 'zh-CN': '单链型步骤条', 'en-US': 'chain steps' },
+      'desc': {
+        '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': 'space',
-      'name': { 'zh-CN': '节点宽度', 'en-US': 'Common Step Bar' },
+      'demoId': 'advanced-steps',
+      'name': { 'zh-CN': '条形步骤条', 'en-US': 'Bar steps' },
       'desc': {
-        'zh-CN': '<p>使用 <code>space</code>属性配置步骤条节点的宽度。</p>\n',
-        'en-US':
-          '<p>Use the <code>tiny-time-line</code> tag and set <code>type</code> to <code>normal</code> to implement common steps. </p>\n'
+        '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': ['space.vue']
+      'codeFiles': ['advanced-steps.vue']
     },
     {
-      'demoId': 'normal-steps',
-      'name': { 'zh-CN': '普通步骤条', 'en-US': 'Advanced Wizard' },
+      'demoId': 'vertical-steps',
+      'name': { 'zh-CN': '竖式步骤条', 'en-US': 'Vertical steps' },
       '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'
+        'zh-CN': '<p>使用 <code>vertical</code> 属性设置为条形步骤条。</p>\n',
+        'en-US': 'Use <code>vertical<</code> attribute to set vertical steps.'
       },
-      'codeFiles': ['normal-steps.vue']
+      'codeFiles': ['vertical-steps.vue']
+    },
+    {
+      'demoId': 'space',
+      'name': { 'zh-CN': '节点宽度', 'en-US': 'Common Step Bar' },
+      'desc': {
+        'zh-CN': '<p>使用 <code>space</code> 属性配置步骤条节点的宽度。</p>\n',
+        'en-US': '<p>Using <code>space</code> attribute to set node width. </p>\n'
+      },
+      'codeFiles': ['space.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',
-        'en-US': '<p>The Steps component is used to simulate the order process. </p>\n'
+          '<p>通过 <code>show-divider</code> 属性设置是否显示步骤条底部分隔线，仅当节点文本内容位于序号右边时生效。</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',
-        'en-US': '<p>The <code>click</code> event is triggered when a node is clicked. </p>\n'
+        'zh-CN': '<p>通过 <code>description</code> 插槽添加单个节点的描述信息。</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',
-        'en-US': '<p>The <code>click</code> event is triggered when a node is clicked. </p>\n'
+        'zh-CN': '<p>通过 <code>active-node-desc</code> 插槽添加当前选中节点的描述信息。</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',
-        'en-US': '<p>Customize the content of the step bar node through the scope slot <code>item</code>. </p>\n'
+        'zh-CN': '<p>通过 <code>size</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",
-        'en-US': ''
+          "<p>可以通过以下属性自定义数据项字段：<br /><code>name-field</code>： 设置节点信息中名称对应的字段名，默认为 'name'  <br /><code>count-field</code>：设置条形步骤条里徽标计数对应的字段名，默认为 'count' 。<br /><code>status-field</code>：设置数据状态对应的字段名，默认为 'status' 。</p>\n",
+        '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",
-        'en-US': ''
+          '<p>设置 <code>only-number</code> 为true时，节点只显示数字序号而不显示任何状态图标，仅适用单链型步骤条。</p>\n',
+        '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',
-      'name': { 'zh-CN': '插槽的使用', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过作用域插槽 <code>item</code> 自定义步骤条节点内容。</p>\n', 'en-US': '' },
-      'codeFiles': ['slot.vue']
+      'demoId': 'slot-item',
+      'name': { 'zh-CN': 'item插槽', 'en-US': 'item slot' },
+      'desc': {
+        '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 。',
-            'en-US': 'Set the selected step of the step bar. The default value is -1.'
+            'zh-CN': '当前步骤索引，从0开始计数',
+            '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'",
-            'en-US':
-              "Set the field name corresponding to the logo count in the advanced wizard. The default value is'count'"
+            'zh-CN': '条形步骤条里徽标计数对应的字段名',
+            'en-US': 'Custom field name corresponding to logo count in bar steps'
           },
           'demoId': 'custom-steps-item'
         },
         {
           'name': 'data',
-          'type': 'object , Array',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '设置步骤条的数据。', 'en-US': 'Set the step bar data.' },
-          'demoId': 'data-resource'
+          'type': 'IStepsItem',
+          'typeAnchorName': 'IStepsItem[] | ITimelineItem[]',
+          'defaultValue': '[]',
+          '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'",
-            'en-US': "Set the field name corresponding to the name in the node information. The default value is'name'"
+            'zh-CN': '节点名称对应的字段名',
+            '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为长度单位。',
-            'en-US': 'Set the width of the step bar.'
+            'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位。',
+            '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'",
-            'en-US': "Name of the field corresponding to the data status. The default value is'status'"
+            'zh-CN': '数据状态对应的字段名，用于条形步骤条',
+            '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': '',
-          'defaultValue': '',
+          'type': '(index: number, node: IStepsItem | ITimelineItem) => void',
           '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',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '步骤条数据项插槽', 'en-US': 'Step bar data item slot' },
-          'demoId': 'slot'
+          'name': 'active-node-desc',
+          'desc': {
+            'zh-CN': '当前节点描述信息插槽，用于单链型步骤条',
+            'en-US': 'Current node description information slot, used for chain steps'
+          },
+          'demoId': 'slot-active-node-desc'
         },
         {
           'name': 'description',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '节点描述信息插槽', 'en-US': 'Node description information slot' },
+          'desc': {
+            'zh-CN': '节点描述信息插槽，用于单链型步骤条',
+            'en-US': 'Node description information slot, used for chain steps'
+          },
           'demoId': 'slot-description'
         },
         {
-          'name': 'active-node-desc',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '当前节点描述信息插槽', 'en-US': '' },
-          'demoId': 'slot-active-node-desc'
+          'name': 'item',
+          'desc': {
+            'zh-CN': '步骤条数据项插槽，用于条形步骤条',
+            'en-US': 'Step bar data item slot, used for bar steps'
+          },
+          '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' | ''`
+    }
   ]
 }