Hyl/optimize timeline docs (#808)

* docs(timeline): [timeline] optimize timeline api docs

* docs(timeline): [timeline] optimize timeline demo docs

examples/sites/demos/pc/app/time-line/basic-usage-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-time-line :data="data" :active="active" @click="click"></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/time-line/basic-usage.vue

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

examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue

@@ -9,7 +9,7 @@
   ></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/time-line/custom-field.vue

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

examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue

@@ -11,7 +11,7 @@
   </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/time-line/custom-horizontal-timeline.vue

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

examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue

@@ -1,19 +1,19 @@
 <template>
   <tiny-time-line :data="data" :active="active" @click="click" vertical>
     <template #left="{ slotScope: { name } }">
-      <span style="text-align: right; float: left; padding-right: 16px">
+      <span class="custom-left">
         {{ name }}
       </span>
     </template>
     <template #right="{ slotScope: { time } }">
-      <span style="margin-left: 15px; float: left">
+      <span class="custom-right">
         {{ time }}
       </span>
     </template>
   </tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 
@@ -28,3 +28,15 @@ function click(index) {
   active.value = index
 }
 </script>
+
+<style scoped>
+.custom-left {
+  padding-right: 16px;
+  text-align: right;
+}
+
+.custom-right {
+  margin-left: 15px;
+  margin-bottom: 50px;
+}
+</style>

examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue

@@ -1,19 +1,19 @@
 <template>
   <tiny-time-line :data="data" :active="active" @click="click" vertical>
     <template #left="{ slotScope: { name } }">
-      <span style="text-align: right; float: left; padding-right: 16px">
+      <span class="custom-left">
         {{ name }}
       </span>
     </template>
     <template #right="{ slotScope: { time } }">
-      <span style="margin-left: 15px; float: left">
+      <span class="custom-right">
         {{ time }}
       </span>
     </template>
   </tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine } from '@opentiny/vue'
 
 export default {
@@ -37,3 +37,15 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.custom-left {
+  padding-right: 16px;
+  text-align: right;
+}
+
+.custom-right {
+  margin-left: 15px;
+  margin-bottom: 50px;
+}
+</style>

examples/sites/demos/pc/app/time-line/horizontal-step-composition-api.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :horizontal="true" :active="active" @click="click"></tiny-time-line>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
-
-const active = ref(1)
-const data = ref([
-  { name: '已下单', time: '2019-11-11 00:01:30' },
-  { name: '运输中', time: '2019-11-12 14:20:15' },
-  { name: '已签收', time: '2019-11-14 20:45:50' }
-])
-
-function click(index, node) {
-  active.value = index
-  Modal.message({
-    message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
-    status: 'info'
-  })
-}
-</script>

examples/sites/demos/pc/app/time-line/horizontal-step.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('横向时间线', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#horizontal-step')
-
-  const timeline = page.locator('#preview .tiny-steps')
-  await expect(timeline).toHaveClass(/is-horizontal/)
-  await expect(timeline.locator('div').first()).toHaveClass(/tiny-steps-normal/)
-})

examples/sites/demos/pc/app/time-line/horizontal-step.vue

@@ -1,32 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :horizontal="true" :active="active" @click="click"></tiny-time-line>
-</template>
-
-<script lang="jsx">
-import { TimeLine, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      active: 1,
-      data: [
-        { name: '已下单', time: '2019-11-11 00:01:30' },
-        { name: '运输中', time: '2019-11-12 14:20:15' },
-        { name: '已签收', time: '2019-11-14 20:45:50' }
-      ]
-    }
-  },
-  methods: {
-    click(index, node) {
-      this.active = index
-      Modal.message({
-        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
-        status: 'info'
-      })
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 

examples/sites/demos/pc/app/time-line/set-start-value-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-time-line :data="data" :active="active" @click="click" :start="2"></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/time-line/set-start-value.vue

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

examples/sites/demos/pc/app/time-line/shape-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-shape">
     <tiny-button type="primary" @click="changeShape">
-      点击切换shape的值为 {{ shape === 'dot' ? 'circle' : 'dot' }}
+      点击切换 shape 为 {{ shape === 'dot' ? 'circle' : 'dot' }}
     </tiny-button>
     <tiny-time-line vertical :data="data" :shape="shape"></tiny-time-line>
   </div>

examples/sites/demos/pc/app/time-line/shape.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="demo-shape">
-    <tiny-button type="primary" @click="changeShape"> 点击切换shape的值为 {{ shape === 'dot' ? 'circle': 'dot'}} </tiny-button>
+    <tiny-button type="primary" @click="changeShape">
+      点击切换 shape 为 {{ shape === 'dot' ? 'circle' : 'dot' }}
+    </tiny-button>
     <tiny-time-line vertical :data="data" :shape="shape"></tiny-time-line>
   </div>
 </template>
@@ -19,14 +21,14 @@ export default {
         { name: '已下单', time: '2019-11-11 00:01:30' },
         { name: '运输中', time: '2019-11-12 14:20:15' },
         { name: '已签收', time: '2019-11-13 20:45:50' },
-        { name: '已评价', time: '2019-11-14 20:45:50' },
+        { name: '已评价', time: '2019-11-14 20:45:50' }
       ],
       shape: 'dot'
     }
   },
   methods: {
     changeShape() {
-      this.shape = this.shape === 'dot'? 'circle': 'dot'
+      this.shape = this.shape === 'dot' ? 'circle' : 'dot'
     }
   }
 }

examples/sites/demos/pc/app/time-line/show-number-composition-api.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" :show-number="false"></tiny-time-line>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
-
-const active = ref(1)
-const data = ref([
-  { name: '已下单', time: '2019-11-11 00:01:30' },
-  { name: '运输中', time: '2019-11-12 14:20:15' },
-  { name: '已签收', time: '2019-11-14 20:45:50' }
-])
-
-function click(index) {
-  active.value = index
-}
-</script>

examples/sites/demos/pc/app/time-line/show-number.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('隐藏未完成节点的序号', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#show-number')
-
-  const nodes = page.locator('#preview .tiny-steps .normal')
-  await expect(nodes.first().locator('.icon svg')).toBeVisible()
-  await expect(nodes.nth(1).locator('.icon')).not.toHaveText('2')
-  await expect(nodes.nth(2).locator('.icon')).not.toHaveText('3')
-})

examples/sites/demos/pc/app/time-line/show-number.vue

@@ -1,28 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" :show-number="false"></tiny-time-line>
-</template>
-
-<script lang="jsx">
-import { TimeLine } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      active: 1,
-      data: [
-        { name: '已下单', time: '2019-11-11 00:01:30' },
-        { name: '运输中', time: '2019-11-12 14:20:15' },
-        { name: '已签收', time: '2019-11-14 20:45:50' }
-      ]
-    }
-  },
-  methods: {
-    click(index) {
-      this.active = index
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/time-line/show-status-composition-api.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" show-status></tiny-time-line>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
-
-const active = ref(1)
-const data = ref([
-  { name: '已下单', time: '2019-11-11 00:01:30' },
-  { name: '运输中', time: '2019-11-12 14:20:15' },
-  { name: '已签收', time: '2019-11-14 20:45:50' }
-])
-
-function click(index, node) {
-  active.value = index
-  Modal.message({
-    message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
-    status: 'info'
-  })
-}
-</script>

examples/sites/demos/pc/app/time-line/show-status.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('显示组件内部状态', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#show-status')
-
-  const nodes = page.locator('#preview .tiny-steps .normal')
-  await expect(nodes.first().locator('.status')).toHaveText('已完成')
-  await expect(nodes.nth(1).locator('.status')).toHaveText('进行中')
-  await expect(nodes.nth(2).locator('.status')).toHaveText('等待中')
-})

examples/sites/demos/pc/app/time-line/show-status.vue

@@ -1,32 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" show-status></tiny-time-line>
-</template>
-
-<script lang="ts">
-import { TimeLine, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      active: 1,
-      data: [
-        { name: '已下单', time: '2019-11-11 00:01:30' },
-        { name: '运输中', time: '2019-11-12 14:20:15' },
-        { name: '已签收', time: '2019-11-14 20:45:50' }
-      ]
-    }
-  },
-  methods: {
-    click(index, node) {
-      this.active = index
-      Modal.message({
-        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
-        status: 'info'
-      })
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/time-line/status-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-time-line vertical :data="data"></tiny-time-line>
+  <tiny-time-line vertical :data="data" shape="dot"></tiny-time-line>
 </template>
 
 <script setup lang="ts">

examples/sites/demos/pc/app/time-line/status.vue

@@ -16,8 +16,8 @@ export default {
         { name: '成功 / success', time: '2019-11-11 00:01:30', type: 'success' },
         { name: '警告 / warning', time: '2019-11-12 14:20:15', type: 'warning' },
         { name: '危险 / danger', time: '2019-11-13 20:45:50', type: 'danger' },
-        { name: '信息 / info', time: '2019-11-14 20:45:50', type: 'info' },
-      ],
+        { name: '信息 / info', time: '2019-11-14 20:45:50', type: 'info' }
+      ]
     }
   }
 }

examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue

@@ -1,15 +1,10 @@
 <template>
-  <tiny-time-line
-    :active="active"
-    text-position="right"
-    space="280px"
-  >
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)" >
-    </tiny-timeline-item>
+  <tiny-time-line :active="active" text-position="right" space="200px">
+    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick(i)"> </tiny-timeline-item>
   </tiny-time-line>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem, Modal } from '@opentiny/vue'
 
@@ -20,7 +15,7 @@ const data = ref([
   { name: '已签收', time: '2019-11-14 20:45:50' }
 ])
 
-function click(index, node) {
+const onItemClick = (index, node) => {
   active.value = index
   Modal.message({
     message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,

examples/sites/demos/pc/app/time-line/timeline-item.vue

@@ -1,11 +1,6 @@
 <template>
-  <tiny-time-line
-    :active="active"
-    text-position="right"
-    space="200px"
-  >
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)" >
-    </tiny-timeline-item>
+  <tiny-time-line :active="active" text-position="right" space="200px">
+    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick(i)"> </tiny-timeline-item>
   </tiny-time-line>
 </template>
 
@@ -21,17 +16,17 @@ export default {
     return {
       active: 1,
       data: [
-        { name: 'Basic Info.', description: '基本信息必填' },
-        { name: 'BOQ Info', description: '第二步描述信息' },
-        { name: 'Billing', description: '最终步骤信息' }
+        { name: '已下单', time: '2019-11-11 00:01:30' },
+        { name: '运输中', time: '2019-11-12 14:20:15' },
+        { name: '已签收', time: '2019-11-14 20:45:50' }
       ],
       showDivider: true
     }
   },
   methods: {
-    normalClick(index) {
+    onItemClick(index) {
       this.active = index
-    },
+    }
   }
 }
 </script>

examples/sites/demos/pc/app/time-line/vertical-step-composition-api.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" vertical></tiny-time-line>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
-
-const active = ref(1)
-const data = ref([
-  { name: '已下单', time: '2019-11-11 00:01:30' },
-  { name: '运输中', time: '2019-11-12 14:20:15' },
-  { name: '已签收', time: '2019-11-14 20:45:50' }
-])
-
-function click(index) {
-  active.value = index
-}
-</script>

examples/sites/demos/pc/app/time-line/vertical-step-reverse-composition-api.vue

@@ -1,20 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" vertical reverse></tiny-time-line>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
-
-const active = ref(1)
-const data = ref([
-  { name: '已下单', time: '2019-11-11 00:01:30' },
-  { name: '运输中', time: '2019-11-12 14:20:15' },
-  { name: '已签收', time: '2019-11-14 20:45:50' }
-])
-
-function click(index) {
-  Modal.message({ message: `触发了click事件：${index}`, status: 'info' })
-  active.value = index
-}
-</script>

examples/sites/demos/pc/app/time-line/vertical-step-reverse.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('节点点击事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#vertical-step-reverse')
-
-  const node1 = page.locator('#preview .tiny-steps .timeline').first()
-  const node2 = page.locator('#preview .tiny-steps .timeline').nth(1)
-
-  await node1.locator('.icon').click()
-  await expect(page.getByText('触发了click事件：2')).toBeVisible()
-  await expect(node1).toHaveClass(/process-current/)
-
-  await node2.locator('.icon').click()
-  await expect(page.getByText('触发了click事件：1')).toBeVisible()
-  await expect(node2).toHaveClass(/process-current/)
-  await expect(node1).not.toHaveClass(/process-current/)
-})

examples/sites/demos/pc/app/time-line/vertical-step-reverse.vue

@@ -1,29 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" vertical reverse></tiny-time-line>
-</template>
-
-<script lang="jsx">
-import { TimeLine, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      active: 1,
-      data: [
-        { name: '已下单', time: '2019-11-11 00:01:30' },
-        { name: '运输中', time: '2019-11-12 14:20:15' },
-        { name: '已签收', time: '2019-11-14 20:45:50' }
-      ]
-    }
-  },
-  methods: {
-    click(index) {
-      Modal.message({ message: `触发了click事件：${index}`, status: 'info' })
-      this.active = index
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/time-line/vertical-step.vue

@@ -1,28 +0,0 @@
-<template>
-  <tiny-time-line :data="data" :active="active" @click="click" vertical></tiny-time-line>
-</template>
-
-<script lang="jsx">
-import { TimeLine } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLine
-  },
-  data() {
-    return {
-      active: 1,
-      data: [
-        { name: '已下单', time: '2019-11-11 00:01:30' },
-        { name: '运输中', time: '2019-11-12 14:20:15' },
-        { name: '已签收', time: '2019-11-14 20:45:50' }
-      ]
-    }
-  },
-  methods: {
-    click(index) {
-      this.active = index
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="demo-timeline-vertical">
+    <div class="demo-content">
+      <p>竖式时间线 正向</p>
+      <tiny-time-line :data="data" :active="active" @click="click" vertical></tiny-time-line>
+    </div>
+    <div class="demo-content">
+      <p>竖式时间线 逆向</p>
+      <tiny-time-line :data="data" :active="active" @click="click" vertical reverse></tiny-time-line>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+
+const active = ref(1)
+const data = ref([
+  { name: '已下单', time: '2019-11-11 00:01:30' },
+  { name: '运输中', time: '2019-11-12 14:20:15' },
+  { name: '已签收', time: '2019-11-14 20:45:50' }
+])
+
+function click(index) {
+  active.value = index
+}
+</script>
+
+<style scoped>
+.demo-timeline-vertical {
+  display: flex;
+}
+
+.demo-content {
+  margin-right: 20px;
+}
+</style>

examples/sites/demos/pc/app/time-line/vertical-timeline.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="demo-timeline-vertical">
+    <div class="demo-content">
+      <p>竖向时间线 正向</p>
+      <tiny-time-line :data="data" :active="active" @click="click" vertical></tiny-time-line>
+    </div>
+
+    <div class="demo-content">
+      <p>竖向时间线 反向</p>
+      <tiny-time-line :data="data" :active="active" @click="click" vertical reverse></tiny-time-line>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TimeLine } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLine
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '已下单', time: '2019-11-11 00:01:30' },
+        { name: '运输中', time: '2019-11-12 14:20:15' },
+        { name: '已签收', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  },
+  methods: {
+    click(index) {
+      this.active = index
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-timeline-vertical {
+  display: flex;
+}
+
+.demo-content {
+  margin-right: 20px;
+}
+</style>

examples/sites/demos/pc/app/time-line/webdoc/time-line.cn.md

@@ -4,4 +4,4 @@ title: TimeLine 时间线
 
 # TimeLine 时间线
 
-<div>TimeLine 时间线</div>
+<div>可视化时间流信息</div>

examples/sites/demos/pc/app/time-line/webdoc/time-line.en.md

@@ -4,4 +4,4 @@ title: TimeLine
 
 # TimeLine
 
-<div>TimeLine</div>
+<div>Visualize time flow information.</div>

examples/sites/demos/pc/app/time-line/webdoc/time-line.js

@@ -7,38 +7,32 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>data</code> 属性设置时间线步骤条数据，通过 <code>active</code> 属性设置步骤条的选中步骤。</p>\n',
+          '<p>通过 <code>data</code> 属性设置时间线的节点数据；<code>active</code> 属性设置当前节点，<code>click</code> 监听单节点的点击事件。</p>\n',
         'en-US':
-          '<p>Use the <code>data</code> attribute to set the timeline step bar data, and use the <code>active</code> attribute to set the selected step of the step bar. </p>\n'
+          '<p>Use the <code>data</code> attribute to set data,  the <code>active</code> attribute to set the selected node, and <code>click</code> to listen to click event on node. </p>\n'
       },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'timeline-item',
-      'name': { 'zh-CN': '时间线节点', 'en-US': 'Timeline Node' },
+      'name': { 'zh-CN': '时间线节点组件', 'en-US': 'Timeline Node Component' },
       'desc': {
-        'zh-CN': '<p>可以通过时间线节点组件<code>TimelineItem</code>自定义单个节点的属性、事件和插槽。</p>\n',
-        'en-US': ''
+        'zh-CN': '<p>通过时间线节点组件 <code>timeline-item</code> 自定义单个节点的属性、事件和插槽。</p>\n',
+        'en-US':
+          '<p>Customize the attributes, events, and slots of individual nodes through the <code>timeline-item</code> component of the Timeline node component.</p>\n'
       },
       'codeFiles': ['timeline-item.vue']
     },
     {
-      'demoId': 'horizontal-step',
-      'name': { 'zh-CN': '横向时间线', 'en-US': 'horizontal timeline' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>horizontal</code> 属性设置横向时间线。</p>\n',
-        'en-US': '<p>Set the horizontal timeline through the <code>horizontal</code> attribute. </p>\n'
-      },
-      'codeFiles': ['horizontal-step.vue']
-    },
-    {
-      'demoId': 'vertical-step',
+      'demoId': 'vertical-timeline',
       'name': { 'zh-CN': '竖向时间线', 'en-US': 'Vertical Timeline' },
       'desc': {
-        'zh-CN': '<p>通过 <code>vertical</code> 属性设置竖向时间线。</p>\n',
-        'en-US': '<p>Use the <code>vertical</code> attribute to set the vertical timeline. </p>\n'
+        'zh-CN':
+          '<p>通过 <code>vertical</code> 属性设置为竖直方向时间线，<code>reverse</code> 设置是否逆序展示数据。</p>\n',
+        'en-US':
+          '<p>Use the <code>vertical</code> attribute to set the vertical timeline and <code>reverse</code> to set whether display data in reverse order.</p>\n'
       },
-      'codeFiles': ['vertical-step.vue']
+      'codeFiles': ['vertical-timeline.vue']
     },
     {
       'demoId': 'shape',
@@ -59,94 +53,55 @@ export default {
       'codeFiles': ['status.vue']
     },
     {
-      'demoId': 'vertical-step-reverse',
-      'name': { 'zh-CN': '竖向时间线的方向', 'en-US': 'Direction of the vertical timeline' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>reverse</code> 属性设置竖向步骤条的方向。</p>\n',
-        'en-US': '<p>Sets the direction of the vertical step bar through the <code>reverse</code> attribute. </p>\n'
-      },
-      'codeFiles': ['vertical-step-reverse.vue']
-    },
-    {
-      'demoId': 'set-step-width',
+      'demoId': 'set-node-width',
       'name': { 'zh-CN': '宽度设置', 'en-US': 'Width Setting' },
       'desc': {
-        'zh-CN': '<p>详细用法参考如下示例。</p>\n',
-        'en-US': '<p>Use the <code>space</code> attribute to set the width of the step bar. </p>\n'
+        'zh-CN': '<p>通过 <code>space</code> 属性设置节点的宽度。</p>\n',
+        'en-US': '<p>Use the <code>space</code> attribute to set the width of timeline node. </p>\n'
       },
-      'codeFiles': ['set-step-width.vue']
+      'codeFiles': ['set-node-width.vue']
     },
     {
-      'demoId': 'different-data',
-      'name': { 'zh-CN': '数据映射', 'en-US': 'Data Mapping' },
-      'desc': {
-        'zh-CN':
-          '<p>通过 <code>name-field</code> 属性设置节点信息中名称对应的字段名，通过 <code>time-field</code> 属性设置节点时间信息对应的字段名。</p>\n',
-        'en-US':
-          '<p>The <code>name-field</code> attribute is used to set the field name corresponding to the node name in the node information, and the <code>time-field</code> attribute is used to set the field name corresponding to the node time information. </p>\n'
-      },
-      'codeFiles': ['different-data.vue']
-    },
-    {
-      'demoId': 'set-start-value',
-      'name': { 'zh-CN': '设置序号起始值', 'en-US': 'Set the start value of the sequence number' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>start</code> 属性设置步骤条序号起始值。</p>\n',
-        'en-US': '<p>Set the start step sequence number through the <code>start</code> attribute. </p>\n'
-      },
-      'codeFiles': ['set-start-value.vue']
-    },
-    {
-      'demoId': 'show-status',
-      'name': { 'zh-CN': '显示组件内部状态', 'en-US': 'Display the internal status of a component.' },
-      'desc': {
-        'zh-CN':
-          '<p>通过 <code>show-status</code> 属性设置是否显示组件内部状态。默认为 <code>false</code>，表示不显示。</p>\n',
-        'en-US':
-          '<p>The <code>show-status</code> attribute is used to set whether to display the internal status of a component. The default value is <code>false</code>, indicating that the parameter is not displayed. </p>\n'
-      },
-      'codeFiles': ['show-status.vue']
-    },
-    {
-      'demoId': 'show-number',
-      'name': { 'zh-CN': '未完成的序号显示', 'en-US': 'Unfinished Sequence Number Display' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>show-number</code> 属性设置未完成的状态是否显示序号。</p>\n',
-        'en-US':
-          '<p>The <code>show-number</code> attribute is used to set whether to display sequence numbers for uncompleted states. </p>\n'
-      },
-      'codeFiles': ['show-number.vue']
-    },
-    {
-      'demoId': 'custom-normal-step',
+      'demoId': 'custom-horizontal-timeline',
       'name': { 'zh-CN': '自定义横向时间线', 'en-US': 'Customizing a Horizontal Timeline' },
       'desc': {
         'zh-CN':
-          '<p><code>slot</code> 为 <code>top</code>可以自定义步骤条顶部内容，<code>slot</code> 为 <code>bottom</code> 可以自定义步骤条底部内容。</p>\n',
+          '<p>通过 <code>top</code> 插槽可以自定义步骤条顶部内容，<code>bottom</code> 插槽自定义步骤条底部内容。</p>\n',
         'en-US':
-          'If <p><code>slot</code> is <code>top</code>, you can customize the top content of the step bar. If <p><code>slot</code> is <code>slot</code>, you can customize the bottom content of the step bar. </p>\n'
+          'If <p><code>slot</code> is <code>top</code>, you can customize the top content of the timeline. If <p><code>slot</code> is <code>slot</code>, you can customize the bottom content of the timeline. </p>\n'
       },
-      'codeFiles': ['custom-normal-step.vue']
+      'codeFiles': ['custom-horizontal-timeline.vue']
     },
     {
-      'demoId': 'custom-vertical-step',
+      'demoId': 'custom-vertical-timeline',
       'name': { 'zh-CN': '自定义竖向时间线', 'en-US': 'Customized Vertical Timeline' },
       'desc': {
         'zh-CN':
-          '<p><code>slot</code> 为 <code>left</code>可以自定义步骤条左侧内容，<code>slot</code> 为 <code>right</code> 可以自定义步骤条右侧内容。</p>\n',
+          '<p>通过<code>left</code> 插槽自定义步骤条左侧内容，<code>right</code> 插槽自定义步骤条右侧内容。</p>\n',
         'en-US':
-          'If <p><code>slot</code> is set to <code>left</code>, you can customize the content on the left of the step bar. If <p><code>slot</code> is set to <code>right</code>, you can customize the content on the right of the step bar. </p>\n'
+          'If <p><code>slot</code> is set to <code>left</code>, you can customize the content on the left of the timeline. If <p><code>slot</code> is set to <code>right</code>, you can customize the content on the right of the timeline. </p>\n'
       },
-      'codeFiles': ['custom-vertical-step.vue']
+      'codeFiles': ['custom-vertical-timeline.vue']
     },
     {
-      'demoId': 'vertical-step-reverse1',
-      'name': { 'zh-CN': 'click 事件', 'en-US': 'click event' },
+      'demoId': 'custom-field',
+      'name': { 'zh-CN': '自定义字段', 'en-US': 'Custom Field' },
       'desc': {
-        'zh-CN': '<p>单击时触发 click 事件</p>\n',
-        'en-US': '<p>The click event is triggered upon a click</p>\n'
+        'zh-CN':
+          '<p>通过 <code>name-field</code> 属性设置节点信息中名称对应的字段名，<code>time-field</code> 属性设置节点时间信息对应的字段名。</p>\n',
+        'en-US':
+          '<p>The <code>name-field</code> attribute is used to set the field name corresponding to the node name in the node information, and the <code>time-field</code> attribute is used to set the field name corresponding to the node time information. </p>\n'
       },
-      'codeFiles': ['vertical-step-reverse.vue']
+      'codeFiles': ['custom-field.vue']
+    },
+    {
+      'demoId': 'set-start-value',
+      'name': { 'zh-CN': '序号起始值', 'en-US': 'Start value of the sequence number' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>start</code> 属性设置时间线序号起始值。</p>\n',
+        'en-US': '<p>Set the start sequence number through the <code>start</code> attribute. </p>\n'
+      },
+      'codeFiles': ['set-start-value.vue']
     }
   ],
   apis: [
@@ -155,12 +110,67 @@ export default {
       'type': 'component',
       'properties': [
         {
-          'name': 'data',
-          'type': 'Array',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '设置时间线步骤条数据', 'en-US': 'Set timeline step bar data' },
+          'name': 'active',
+          'type': 'number',
+          'defaultValue': '-1',
+          'desc': {
+            'zh-CN': '当前节点索引，从0开始计数',
+            'en-US': 'Current node index and count from 0'
+          },
           'demoId': 'basic-usage'
         },
+        {
+          'name': 'data',
+          'type': 'ITimelineItem',
+          'typeAnchorName': 'ITimelineItem',
+          'defaultValue': '[]',
+          'desc': {
+            'zh-CN': '节点数据',
+            'en-US': 'Nodes data'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'horizontal',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否水平方向',
+            'en-US': 'Whether horizontal constructure'
+          },
+          'demoId': ''
+        },
+        {
+          'name': 'line-width',
+          'type': 'string | number',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '连接线长度，仅当 text-position 取值为 true 时生效，设置后 space 属性失效。',
+            'en-US':
+              'The length of the connection line and it is valid only when text-position is set to true. After setting, the space property is invalid'
+          },
+          'demoId': ''
+        },
+        {
+          'name': 'name-field',
+          'type': 'string',
+          'defaultValue': 'name',
+          'desc': {
+            'zh-CN': '节点名称对应的字段名',
+            'en-US': 'Set the field name in the node information.'
+          },
+          'demoId': 'custom-field'
+        },
+        {
+          'name': 'reverse',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否逆序排列节点，仅用于竖式时间线',
+            'en-US': 'Whether the node in reverse order and only for vertical timeline'
+          },
+          'demoId': 'vertical-timeline'
+        },
         {
           'name': 'shape',
           'type': 'string',
@@ -171,133 +181,162 @@ export default {
           },
           'demoId': 'shape'
         },
-        {
-          'name': 'vertical',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '竖式步骤条', 'en-US': 'vertical step bar' },
-          'demoId': 'vertical-step'
-        },
-        {
-          'name': 'horizontal',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '是否为横向步骤条', 'en-US': 'Whether it is a horizontal step bar' },
-          'demoId': 'horizontal-step'
-        },
         {
           'name': 'show-number',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN': '设置未完成的状态是否显示序号',
-            'en-US': 'Set whether to display sequence numbers for unfinished states.'
+            'zh-CN': '未完成状态的节点是否显示序号',
+            'en-US': 'Whether to display sequence numbers for unfinished states'
           },
-          'demoId': 'show-number'
+          'demoId': ''
         },
         {
-          'name': 'name-field',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 name',
-          'desc': { 'zh-CN': '设置节点信息中名称对应的字段名', 'en-US': 'Set the field name in the node information.' },
-          'demoId': 'different-data'
-        },
-        {
-          'name': 'time-field',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 time',
+          'name': 'space',
+          'type': 'string | number',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置节点时间信息对应的字段名',
-            'en-US': 'Setting the name of the field corresponding to the node time information'
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
+            'en-US':
+              'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
           },
-          'demoId': 'different-data'
+          'demoId': 'set-node-width'
         },
         {
           'name': 'start',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 1',
-          'desc': { 'zh-CN': '设置步骤条序号起始值', 'en-US': 'Set the start step sequence number.' },
+          'defaultValue': '1',
+          'desc': {
+            'zh-CN': '节点序号起始值',
+            'en-US': 'The start step sequence number.'
+          },
           'demoId': 'set-start-value'
         },
         {
-          'name': 'space',
-          'type': 'string， Numer',
-          'defaultValue': '',
+          'name': 'time-field',
+          'type': 'string',
+          'defaultValue': 'time',
           'desc': {
-            'zh-CN': '设置时间线节点的宽度, 取值为数字、带长度单位数值与百分比，数字会默认以px为长度单位。',
-            'en-US': 'Set the width of the step bar'
+            'zh-CN': '节点时间信息对应的字段名',
+            'en-US': 'The name of the field corresponding to the node time information'
           },
-          'demoId': 'set-step-width'
+          'demoId': 'custome-filed'
         },
         {
-          'name': 'active',
-          'type': 'number',
-          'defaultValue': '该属性的默认值为 -1',
-          'desc': { 'zh-CN': '设置步骤条的选中步骤', 'en-US': 'Set the selected step of the step bar' },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'reverse',
+          'name': 'vertical',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '设置竖向步骤条的方向', 'en-US': 'Set the direction of the vertical step bar' },
-          'demoId': 'vertical-step-reverse'
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否竖直方向',
+            'en-US': 'Vertical direction'
+          },
+          'demoId': 'vertical-timeline'
+        }
+      ],
+      'events': [
+        {
+          'name': 'click',
+          'type': '(index: number, node: ITimelineItem) => void',
+          'desc': {
+            'zh-CN': '节点的点击事件，参数：<br />index：点击节点的下标<br /> node： 点击节点数据}',
+            'en-US': 'Click event of a node. arguments:<br />index: click the subscript of a node<br />node: node data'
+          },
+          'demoId': 'basic-usage'
+        }
+      ],
+      'slots': [
+        {
+          'name': 'bottom',
+          'desc': {
+            'zh-CN': '自定义节点底部内容',
+            'en-US': 'Customize bottom content for timeline item'
+          },
+          'demoId': 'custom-normal-timeline'
+        },
+        {
+          'name': 'left',
+          'desc': {
+            'zh-CN': '自定义节点左侧内容',
+            'en-US': 'Customize left content for timeline item'
+          },
+          'demoId': 'custom-vertical-timeline'
+        },
+        {
+          'name': 'right',
+          'desc': {
+            'zh-CN': '自定义节点右侧内容',
+            'en-US': 'Customize right content for timeline item'
+          },
+          'demoId': 'custom-horizontal-timeline'
+        },
+        {
+          'name': 'top',
+          'desc': {
+            'zh-CN': '自定义节点顶部内容',
+            'en-US': 'Customize bottom content for timeline item'
+          },
+          'demoId': 'custom-horizontal-timeline'
+        }
+      ]
+    },
+    {
+      'name': 'timeline-item',
+      'type': 'component',
+      'properties': [
+        {
+          'name': 'node',
+          'type': 'ITimelineItem',
+          'typeAnchorName': 'ITimelineItem',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '节点数据',
+            'en-US': 'Node data'
+          },
+          'demoId': 'timeline-item'
         },
         {
           'name': 'line-width',
           'type': 'string | number',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '连接线长度，仅text-position取值为true时生效，设置后space属性失效。',
+            'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效。',
             'en-US':
               'The length of the connection line and it is valid only when text-position is set to true. After setting, the space property is invalid'
           },
           'demoId': ''
-        }
-      ],
-      'events': [
+        },
         {
-          'name': 'click',
-          'type': 'Function(arg1,arg2)',
-          'defaultValue': '',
+          'name': 'space',
+          'type': 'string | number',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '节点的点击事件;arguments: arg1:点击节点的下标, arg2:{ name: 节点名称, time: 时间 }',
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
             'en-US':
-              'Click event of a node. arguments: arg1: click the subscript of a node, arg2: {name: node name, time: time}'
+              'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
           },
-          'demoId': 'vertical-step-reverse1'
-        }
-      ],
-      'slots': [
-        {
-          'name': 'top',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '定义步骤条顶部', 'en-US': 'Define the top of the step bar' },
-          'demoId': 'custom-normal-step'
-        },
-        {
-          'name': 'bottom',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '定义步骤条底部', 'en-US': 'Define the bottom of the step bar' },
-          'demoId': 'custom-normal-step'
-        },
-        {
-          'name': 'left',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '定义步骤条左侧内容', 'en-US': 'Define the content on the left of the step bar.' },
-          'demoId': 'custom-vertical-step'
-        },
-        {
-          'name': 'right',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '定义步骤条右侧内容', 'en-US': 'Define the content on the right of the step bar' },
-          'demoId': 'custom-vertical-step'
+          'demoId': 'set-node-width'
         }
       ]
     }
+  ],
+  types: [
+    {
+      'name': 'ITimelineItem',
+      'type': 'interface',
+      'code': `
+interface ITimelineItem {
+  name: string // 节点名称
+  time: string // 节点时间
+  error: boolean // 是否异常状态
+  disabled: boolean // 是否禁用
+  type: ITimelineItemType // 节点类型
+}
+      `
+    },
+    {
+      'name': 'ITimelineItemType',
+      'type': 'type',
+      'code': `type ITimelineItemType = 'primary' | 'success' | 'warning' | 'error' | 'info'`
+    }
   ]
 }

packages/vue/src/time-line/src/index.ts

@@ -37,7 +37,7 @@ export const timelineProps = {
   },
   horizontal: {
     type: Boolean,
-    default: false
+    default: true
   },
   showNumber: {
     type: Boolean,