From 2f362226a766c60fc12c2991430f552c6b0988d6 Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Thu, 28 Oct 2021 15:54:51 +0800
Subject: [PATCH 01/13] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E5=9F=BA=E7=A1=80=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/time-axis-item/index.tsx   | 16 ++++++------
 devui/time-axis/src/time-axis-types.ts        | 12 +++++++--
 devui/time-axis/src/time-axis.scss            | 25 +++++++------------
 devui/time-axis/src/time-axis.tsx             | 17 +++++++++++--
 docs/components/time-axis/index.md            | 23 +++++++++--------
 5 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/devui/time-axis/src/components/time-axis-item/index.tsx b/devui/time-axis/src/components/time-axis-item/index.tsx
index 15fae566..6a710b26 100644
--- a/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import {defineComponent, nextTick, onMounted, ref, watch} from 'vue'
 
 import {timeAxisItemProps, TimeAxisItemProps} from './types'
 import './index.scss'
@@ -13,17 +13,19 @@ export default defineComponent({
             return (
                 <div class={itemClass}>
                     <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
-                        <span>
-                        {props.time}
-                        </span>
+                        <div>
+                            {props.time}
+                        </div>
                     </div>
                     <div class={`${itemClass}-axis`}>
-                        <div class={`${itemClass}-line ${itemClass}-line-style-solid`}></div>
-                        <div class={`${itemClass}-dot ${itemClass}-type-primary`} style={{borderColor: props.dotColor}}></div>
+                        <div class={`${itemClass}-dot ${itemClass}-type-primary`} style={{borderColor: props.dotColor}}
+                        ></div>
                         <div class={`${itemClass}-line ${itemClass}-line-style-solid`}></div>
                     </div>
                     <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
-                        {props.text}
+                        <div>
+                            {props.text}
+                        </div>
                     </div>
                 </div>
             )
diff --git a/devui/time-axis/src/time-axis-types.ts b/devui/time-axis/src/time-axis-types.ts
index eb00d1b4..0a5bd2d8 100644
--- a/devui/time-axis/src/time-axis-types.ts
+++ b/devui/time-axis/src/time-axis-types.ts
@@ -1,6 +1,9 @@
 import type { PropType, ExtractPropTypes } from 'vue'
 export type DataDirection = 'vertical' | 'horizontal'
-
+export type LineStyle = {
+    style: 'solid'|'dashed'|'dotted'|'none'
+    color:string
+}
 
 
 export interface DataItem {
@@ -8,9 +11,14 @@ export interface DataItem {
   time: string
   //文本内容
   text: string
-  //   lineStyle?: Object<{}>
   //可选，自定义时间圈颜色
   dotColor?: string
+  //分界线的样式
+  lineStyle?: LineStyle
+
+
+
+
   customDot?: string | HTMLElement
   //时间点类型
   type?: 'primary' | 'success' | 'danger' | 'warning'
diff --git a/devui/time-axis/src/time-axis.scss b/devui/time-axis/src/time-axis.scss
index 0a78557f..96c02ad7 100644
--- a/devui/time-axis/src/time-axis.scss
+++ b/devui/time-axis/src/time-axis.scss
@@ -34,16 +34,12 @@ $devui-time-axis-item-dot-size: 18px;
 
       &-data-left {
         text-align: end;
-        margin-bottom: 24px;
-        height: $devui-time-axis-item-dot-size;
-        line-height: $devui-time-axis-item-dot-size;
-        flex: 1;
       }
 
+      &-data-left,
       &-data-right {
         margin-bottom: 24px;
-        height: $devui-time-axis-item-dot-size;
-        line-height: $devui-time-axis-item-dot-size;
+        margin-top: -2px;
         flex: 1;
       }
 
@@ -94,7 +90,7 @@ $devui-time-axis-item-dot-size: 18px;
       &-line {
         position: relative;
         min-width: 20px;
-        width: calc(50% - calc(#{$devui-time-axis-item-dot-size} / 2));
+        width: calc(100% - #{$devui-time-axis-item-dot-size});
         border-bottom-width: 2px;
         border-bottom-color: $devui-dividing-line;
       }
@@ -107,18 +103,15 @@ $devui-time-axis-item-dot-size: 18px;
         }
       }
 
-      &-data-top {
-        text-align: center;
-        display: flex;
-        align-items: flex-end;
-        padding: 0 12px;
-        flex: 1;
-      }
-
+      &-data-top,
       &-data-bottom {
         text-align: center;
-        padding: 0 12px;
+        padding: 0 6px;
         flex: 1;
+
+        > div {
+          transform: translateX(-50%);
+        }
       }
 
       &-line-style {
diff --git a/devui/time-axis/src/time-axis.tsx b/devui/time-axis/src/time-axis.tsx
index 03ae7416..5023c57e 100644
--- a/devui/time-axis/src/time-axis.tsx
+++ b/devui/time-axis/src/time-axis.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import {defineComponent, nextTick, onMounted, ref} from 'vue'
 import { timeAxisProps, TimeAxisProps } from './time-axis-types'
 import TimeAxisItem from './components/time-axis-item'
 import './time-axis.scss'
@@ -9,9 +9,22 @@ export default defineComponent({
   props: timeAxisProps,
   emits: [],
   setup(props: TimeAxisProps, ctx) {
+
+    const timeAxis = ref<null | HTMLElement>();
+    let marginLeft = 35;
+    onMounted(() => {
+      nextTick(() => {
+        const el = timeAxis.value;
+        if(props.direction==='horizontal'){
+          marginLeft = (el?.firstElementChild?.clientWidth||0)/2
+        }
+      });
+    });
+
+
     return () => {
       return (
-        <div class={`devui-time-axis-${props.direction}`}>
+        <div class={`devui-time-axis-${props.direction}`} ref={timeAxis} style={{marginLeft:marginLeft+'px'}}>
           {
             props.data.map(item=> <TimeAxisItem {...item}/>)
           }
diff --git a/docs/components/time-axis/index.md b/docs/components/time-axis/index.md
index 4740b68c..b4377464 100644
--- a/docs/components/time-axis/index.md
+++ b/docs/components/time-axis/index.md
@@ -34,26 +34,26 @@ export default defineComponent({
     const data = ref([
       {
         text: 'Download',
-        time: '2021-07-28'
+        time: '2021-10-1'
       },
       {
         text: 'Check',
-        time: '2021-07-29',
+        time: '2021-10-2',
         dotColor: 'var(--devui-success)'
       },
       {
         text: 'Build',
-        time: '2021-07-30',
+        time: '2021-10-3',
         dotColor: 'var(--devui-danger)'
       },
       {
         text: 'Depoy',
-        time: '2021-07-31',
+        time: '2021-10-4',
         dotColor: 'var(--devui-warning)'
       },
       {
         text: 'End',
-        time: '2021-08-01',
+        time: '2021-10-5',
         dotColor: 'var(--devui-waiting)'
       }
     ])
@@ -68,20 +68,21 @@ export default defineComponent({
 
 :::
 
+
+
 ### d-time-axis
 
-d-time-axis 参数
 
 | 参数           | 类型                            | 默认        | 说明         | 跳转 Demo                   |
 | ------------  | ----                            | ----       | ----        | ---------                   | 
 |   direction   |   `'vertical'\|'horizontal'`   | `vertical`  | 设置时间轴方向 |      [基本用法](#基本用法)     | 
-|   data        |            `array`             |     `[]`        | 列表数据(具体参数如下) |    [基本用法](#基本用法)       | 
+|   data        |            `object[]`             |     `[]`        | 列表数据（具体见[data参数](#data参数)） |    [基本用法](#基本用法)       | 
 
 
-data 参数
+#### data参数
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo                   |
 | ---- | ----   | ---- | ---- | ----  |
-|  time|`string`|   --   |   可选，时间   |   | 
-| text |`string` |  --    |   可选，文本内容   |   | 
-|   dotColor   |  `string`    |   --   |   可选，自定义时间圈颜色   |   | 
+|  time|`string`|   --   |   可选，时间   |   [基本用法](#基本用法)  | 
+| text |`string` |  --    |   可选，文本内容   |   [基本用法](#基本用法)  | 
+|   dotColor   |  `string`    |   --   |   可选，自定义时间圈颜色   |   [基本用法](#基本用法)  | 
-- 
Gitee


From 222a767e906674e052d3a7f366df43bb91cb19ac Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Mon, 1 Nov 2021 13:18:21 +0800
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/time-axis/index.ts   |   7 +-
 .../src/components/time-axis-item/index.tsx   |  15 ++-
 .../src/components/time-axis-item/types.ts    |  19 +--
 .../devui/time-axis/src/time-axis-types.ts    |  19 +--
 .../devui/time-axis/src/time-axis.tsx         |   7 +-
 .../docs/components/time-axis/index.md        | 108 ++++++++++++++++--
 6 files changed, 132 insertions(+), 43 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/index.ts b/packages/devui-vue/devui/time-axis/index.ts
index 4edffd52..06029110 100644
--- a/packages/devui-vue/devui/time-axis/index.ts
+++ b/packages/devui-vue/devui/time-axis/index.ts
@@ -1,17 +1,20 @@
 import type { App } from 'vue'
 import TimeAxis from './src/time-axis'
+import TimeAxisItem from './src/components/time-axis-item'
 
 TimeAxis.install = function(app: App): void {
   app.component(TimeAxis.name, TimeAxis)
+  app.component(TimeAxisItem.name, TimeAxisItem)
 }
 
-export { TimeAxis }
+export { TimeAxis,TimeAxisItem }
 
 export default {
   title: 'TimeAxis 时间轴',
   category: '数据展示',
-  status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
         app.use(TimeAxis as any)
+        app.use(TimeAxisItem as any)
   }
 }
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 6a710b26..5e0b7a7f 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -9,6 +9,7 @@ export default defineComponent({
     emits: [],
     setup(props: TimeAxisItemProps, ctx) {
         const itemClass = 'devui-time-axis-item'
+        console.log(ctx.slots)
         return () => {
             return (
                 <div class={itemClass}>
@@ -17,14 +18,18 @@ export default defineComponent({
                             {props.time}
                         </div>
                     </div>
-                    <div class={`${itemClass}-axis`}>
-                        <div class={`${itemClass}-dot ${itemClass}-type-primary`} style={{borderColor: props.dotColor}}
-                        ></div>
-                        <div class={`${itemClass}-line ${itemClass}-line-style-solid`}></div>
+                    <div class={`${itemClass}-axis`} >
+                        {
+                            ctx.slots.dot?
+                                <div  style={{color: props.dotColor}}> {ctx.slots.dot?.()}</div>:
+                                <div  class={`${itemClass}-dot ${itemClass}-type-primary`} style={{borderColor: props.dotColor}}></div>
+                        }
+
+                        <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}  style={{borderColor: props.lineColor}}></div>
                     </div>
                     <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
                         <div>
-                            {props.text}
+                            {ctx.slots.default()}
                         </div>
                     </div>
                 </div>
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
index fba08a5e..930d6626 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
@@ -1,19 +1,22 @@
 import type { PropType, ExtractPropTypes } from 'vue'
-
-
-
+import type { LineStyle } from '../../time-axis-types'
 export const timeAxisItemProps = {
   time: {
     type: String,
   },
-  text: {
-    type: String,
-  },
-
   //可选，自定义时间圈颜色
   dotColor: {
     type: String
-  }
+  },
+  //分界线的样式
+  lineStyle: {
+    type: String as PropType<LineStyle>,
+    default: 'solid'
+  },
+  //分界线的样式
+  lineColor: {
+    type: String
+  },
 } as const
 
 export type TimeAxisItemProps = ExtractPropTypes<typeof timeAxisItemProps>
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
index 0a5bd2d8..fc2567d3 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
+++ b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
@@ -1,9 +1,6 @@
 import type { PropType, ExtractPropTypes } from 'vue'
 export type DataDirection = 'vertical' | 'horizontal'
-export type LineStyle = {
-    style: 'solid'|'dashed'|'dotted'|'none'
-    color:string
-}
+export type LineStyle = 'solid' | 'dashed' | 'dotted' | 'none'
 
 
 export interface DataItem {
@@ -15,11 +12,12 @@ export interface DataItem {
   dotColor?: string
   //分界线的样式
   lineStyle?: LineStyle
-
-
-
-
+  //分界线的样式
+  lineColor?: string
+  //自定义点
   customDot?: string | HTMLElement
+
+  
   //时间点类型
   type?: 'primary' | 'success' | 'danger' | 'warning'
   status?: 'runned' | 'running' | ''
@@ -36,11 +34,6 @@ export const timeAxisProps = {
   direction: {
     type: String as PropType<DataDirection>,
     default: 'vertical'
-  },
-  //列表数据
-  data: {
-    type: Array as PropType<DataItem[]>,
-    default:()=>[]
   }
 } as const
 
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 5023c57e..80df9d1f 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -9,7 +9,6 @@ export default defineComponent({
   props: timeAxisProps,
   emits: [],
   setup(props: TimeAxisProps, ctx) {
-
     const timeAxis = ref<null | HTMLElement>();
     let marginLeft = 35;
     onMounted(() => {
@@ -20,14 +19,10 @@ export default defineComponent({
         }
       });
     });
-
-
     return () => {
       return (
         <div class={`devui-time-axis-${props.direction}`} ref={timeAxis} style={{marginLeft:marginLeft+'px'}}>
-          {
-            props.data.map(item=> <TimeAxisItem {...item}/>)
-          }
+          {ctx.slots.default?.()}
         </div>
       )
     }
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index b4377464..079c253e 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -8,7 +8,7 @@
 
 ### 基本用法
 
-通过 direction 配置时间线排列方向，默认值为`vertical`。
+通过 `direction` 属性配置时间线排列方向，默认值为`vertical`。
 :::demo
 
 ```vue
@@ -20,7 +20,17 @@
         {{ item }}
       </d-radio>
     </d-radio-group>
-    <d-time-axis :direction="choose" :data="data"/>
+    <d-time-axis :direction="choose">
+      <d-time-axis-item
+          v-for="(item,index) in timeAxisList"
+          :key="index"
+          :time="item.time"
+          :dot-color="item.dotColor"
+      >
+        {{item.text}}
+      </d-time-axis-item>
+
+    </d-time-axis>
   </div>
 </template>
 
@@ -31,7 +41,7 @@ export default defineComponent({
   setup() {
     const list = ref(['horizontal', 'vertical'])
     const choose = ref('horizontal')
-    const data = ref([
+    const timeAxisList = ref([
       {
         text: 'Download',
         time: '2021-10-1'
@@ -57,7 +67,7 @@ export default defineComponent({
         dotColor: 'var(--devui-waiting)'
       }
     ])
-    return {data, list, choose}
+    return {timeAxisList, list, choose}
   }
 })
 </script>
@@ -68,21 +78,101 @@ export default defineComponent({
 
 :::
 
+### 自定义样式
 
+:::demo
 
-### d-time-axis
+```vue
+
+<template>
+  <d-time-axis direction="horizontal">
+    <d-time-axis-item
+        v-for="(item,index) in timeAxisList"
+        :key="index"
+        :time="item.time"
+        :dot-color="item.dotColor"
+        :line-style="item.lineStyle"
+        :line-color="item.lineColor"
+    >
+     <template #dot v-if="item.dot">
+       <d-icon :name="item.dot"></d-icon>
+     </template>
+      {{item.text}}
+    </d-time-axis-item>
+  </d-time-axis>
+</template>
+
+<script>
+import {defineComponent, ref} from 'vue'
+
+export default defineComponent({
+  setup() {
+    const timeAxisList = ref([
+      {
+        text: 'Start',
+        time: '2021-10-1',
+        lineStyle: "solid",
+        dot: 'cancel-forbidden',
+      },
+      {
+        text: 'Check',
+        time: '2021-10-2',
+        dotColor: 'var(--devui-success)',
+        lineStyle: "dashed",
+        lineColor: 'var(--devui-success)',
+        dot: 'classroom-approve',
+      },
+      {
+        text: 'Debug',
+        time: '2021-10-3',
+        dotColor: 'var(--devui-info)',
+        lineStyle: "dotted",
+        lineColor: 'var(--devui-info)',
+        dot: 'add-bug',
+      },
+      {
+        text: 'Build',
+        time: '2021-10-4',
+        dotColor: 'var(--devui-warning)',
+        lineStyle: "none",
+        lineColor: 'var(--devui-warning)',
+      },
+      {
+        text: 'Display',
+        time: '2021-10-5',
+        dotColor: 'var(--devui-danger)',
+        dot: 'go-chart',
+      }
+    ])
+    return {timeAxisList}
+  }
+})
+</script>
 
+<style>
+</style>
+```
+
+:::
+
+### d-time-axis
 
 | 参数           | 类型                            | 默认        | 说明         | 跳转 Demo                   |
 | ------------  | ----                            | ----       | ----        | ---------                   | 
-|   direction   |   `'vertical'\|'horizontal'`   | `vertical`  | 设置时间轴方向 |      [基本用法](#基本用法)     | 
-|   data        |            `object[]`             |     `[]`        | 列表数据（具体见[data参数](#data参数)） |    [基本用法](#基本用法)       | 
-
+|   direction   |   `'vertical'\|'horizontal'`   | `vertical`  | 设置时间轴方向 |      [基本用法](#基本用法)     |  
 
-#### data参数
+### d-time-axis-item参数
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo                   |
 | ---- | ----   | ---- | ---- | ----  |
 |  time|`string`|   --   |   可选，时间   |   [基本用法](#基本用法)  | 
 | text |`string` |  --    |   可选，文本内容   |   [基本用法](#基本用法)  | 
 |   dotColor   |  `string`    |   --   |   可选，自定义时间圈颜色   |   [基本用法](#基本用法)  | 
+|  lineStyle| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式   |  [自定义样式](#自定义样式) | 
+| lineColor |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
+
+### 插槽
+
+| 参数           | 描述        | 跳转 Demo                   |
+| ------------  | ----           | ---------                   | 
+|   dot   |    自定义时间轴点  |     [自定义样式](#自定义样式)    |  
-- 
Gitee


From 3663da1f886f0974e989a1c7788e3403e912a5c9 Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Mon, 8 Nov 2021 15:21:44 +0800
Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E5=86=85=E5=AE=B9=E6=89=80=E5=A4=84=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E8=AE=BE=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/time-axis-item/index.tsx   |  45 +++++--
 .../src/components/time-axis-item/types.ts    |   5 +
 .../devui/time-axis/src/time-axis-types.ts    |  11 ++
 .../devui/time-axis/src/time-axis.scss        |  22 +++-
 .../devui/time-axis/src/time-axis.tsx         | 103 ++++++++++++----
 .../docs/components/time-axis/index.md        | 112 +++++++++++++++---
 6 files changed, 240 insertions(+), 58 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 5e0b7a7f..2ce03812 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -9,30 +9,51 @@ export default defineComponent({
     emits: [],
     setup(props: TimeAxisItemProps, ctx) {
         const itemClass = 'devui-time-axis-item'
-        console.log(ctx.slots)
+        console.log(JSON.stringify(ctx), JSON.stringify(props))
+
+        const renderTime = () => {
+            return (
+                <div>
+                    {
+                        ctx.slots.time
+                            ? ctx.slots.time?.()
+                            : props.time
+                    }
+                </div>
+            )
+        }
+        const renderContent = () => {
+            return (
+                <div>
+                    {ctx.slots.default?.(props)}
+                </div>
+            )
+        }
+
         return () => {
             return (
                 <div class={itemClass}>
                     <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
-                        <div>
-                            {props.time}
-                        </div>
+                        {(props.position==='top'|| props.position==='left')?renderContent():renderTime()}
                     </div>
-                    <div class={`${itemClass}-axis`} >
+                    <div class={`${itemClass}-axis`}>
                         {
-                            ctx.slots.dot?
-                                <div  style={{color: props.dotColor}}> {ctx.slots.dot?.()}</div>:
-                                <div  class={`${itemClass}-dot ${itemClass}-type-primary`} style={{borderColor: props.dotColor}}></div>
+                            ctx.slots.dot
+                                ? <div style={{color: props.dotColor}}> {ctx.slots.dot?.()}</div>
+                                : <div class={`${itemClass}-dot ${itemClass}-type-primary`}
+                                       style={{borderColor: props.dotColor}}
+                                ></div>
                         }
 
-                        <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}  style={{borderColor: props.lineColor}}></div>
+                        <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
+                             style={{borderColor: props.lineColor}}
+                        ></div>
                     </div>
                     <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
-                        <div>
-                            {ctx.slots.default()}
-                        </div>
+                        {(props.position==='bottom'|| props.position==='right')?renderContent():renderTime()}
                     </div>
                 </div>
+
             )
         }
     }
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
index 930d6626..d87a0243 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
@@ -1,5 +1,6 @@
 import type { PropType, ExtractPropTypes } from 'vue'
 import type { LineStyle } from '../../time-axis-types'
+export type Position = 'top' | 'bottom' | 'left' | 'right'
 export const timeAxisItemProps = {
   time: {
     type: String,
@@ -17,6 +18,10 @@ export const timeAxisItemProps = {
   lineColor: {
     type: String
   },
+  //分界线的样式
+  position: {
+    type: String as PropType<Position>
+  },
 } as const
 
 export type TimeAxisItemProps = ExtractPropTypes<typeof timeAxisItemProps>
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
index fc2567d3..bad2a5cc 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
+++ b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
@@ -1,5 +1,6 @@
 import type { PropType, ExtractPropTypes } from 'vue'
 export type DataDirection = 'vertical' | 'horizontal'
+export type Mode = 'normal' | 'alternative'
 export type LineStyle = 'solid' | 'dashed' | 'dotted' | 'none'
 
 
@@ -34,6 +35,16 @@ export const timeAxisProps = {
   direction: {
     type: String as PropType<DataDirection>,
     default: 'vertical'
+  },
+  //设置居中
+  center: {
+    type: Boolean,
+    default: (): boolean => false
+  },
+  //设置排序方向
+  mode: {
+    type: String as PropType<Mode>,
+    default: 'normal'
   }
 } as const
 
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.scss b/packages/devui-vue/devui/time-axis/src/time-axis.scss
index 96c02ad7..8d9f36d1 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.scss
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.scss
@@ -75,6 +75,20 @@ $devui-time-axis-item-dot-size: 18px;
     align-items: center;
     position: relative;
 
+    &-center {
+      .devui-time-axis-item {
+
+        &-data-top,
+        &-data-bottom {
+          text-align: center;
+          padding:0 6px;
+          > div {
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+
     .devui-time-axis-item {
       display: flex;
       flex-direction: column;
@@ -89,7 +103,7 @@ $devui-time-axis-item-dot-size: 18px;
 
       &-line {
         position: relative;
-        min-width: 20px;
+        min-width: 60px;
         width: calc(100% - #{$devui-time-axis-item-dot-size});
         border-bottom-width: 2px;
         border-bottom-color: $devui-dividing-line;
@@ -105,13 +119,9 @@ $devui-time-axis-item-dot-size: 18px;
 
       &-data-top,
       &-data-bottom {
-        text-align: center;
-        padding: 0 6px;
+        padding-right:12px;
         flex: 1;
 
-        > div {
-          transform: translateX(-50%);
-        }
       }
 
       &-line-style {
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 80df9d1f..c289023c 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -1,30 +1,87 @@
-import {defineComponent, nextTick, onMounted, ref} from 'vue'
-import { timeAxisProps, TimeAxisProps } from './time-axis-types'
+import {defineComponent, Fragment, nextTick, onMounted, reactive, ref, toRef, watch} from 'vue'
+import {timeAxisProps, TimeAxisProps} from './time-axis-types'
 import TimeAxisItem from './components/time-axis-item'
 import './time-axis.scss'
 
 export default defineComponent({
-  name: 'DTimeAxis',
-  components: { TimeAxisItem },
-  props: timeAxisProps,
-  emits: [],
-  setup(props: TimeAxisProps, ctx) {
-    const timeAxis = ref<null | HTMLElement>();
-    let marginLeft = 35;
-    onMounted(() => {
-      nextTick(() => {
-        const el = timeAxis.value;
-        if(props.direction==='horizontal'){
-          marginLeft = (el?.firstElementChild?.clientWidth||0)/2
+    name: 'DTimeAxis',
+    components: {TimeAxisItem},
+    props: timeAxisProps,
+    emits: [],
+    setup(props: TimeAxisProps, ctx) {
+        console.log(TimeAxisItem)
+        const timeAxis = ref<null | HTMLElement>();
+        const marginLeft = ref(0);
+        const style = reactive({
+            marginLeft: '0px',
+            height: 'auto'
+        })
+        const setStyle = () => {
+            style.height = 'auto'
+            style.marginLeft = '0px'
+            if (props.direction === 'horizontal') {
+                nextTick(() => {
+                    const el = timeAxis.value;
+                    if (props.center) {
+                        //计算偏移量
+                        style.marginLeft = (el?.firstElementChild?.clientWidth || 0) / 2 + 'px'
+                    }
+                    //算出最大高度
+                    style.height = Math.max(
+                            ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-top')).map(el => el.clientHeight),
+                            ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-bottom')).map(el => el.clientHeight)
+                        ) * 2
+                        + Math.max(...Array.from(el?.querySelectorAll('.devui-time-axis-item-axis')).map(el => el.clientHeight))
+                        + 'px'
+                });
+            }
+        }
+        onMounted(() => {
+            setStyle()
+        });
+        watch(toRef(props, 'direction'), () => {
+            setStyle()
+        })
+        return () => {
+            const renderItem = () => {
+                const slots: any[] = ctx.slots.default?.() ?? [];
+                let children;
+                if (slots.length === 1 && slots[0].type === Fragment) {
+                    children = slots[0].children || []
+                }
+                return children.map((item, index) => {
+                    if (props.direction === 'horizontal') {
+                        //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
+                        if (item.props.position === 'top' || item.props.position === 'bottom') return <item/>
+                        //判断是否需要交替
+                        if (props.mode === 'alternative') {
+                            return index % 2 == 0 ? <item position="bottom"/> : <item position="top"/>
+                        } else {
+                            //不需要交替的直接给默认值
+                            return <item position="bottom"/>
+                        }
+
+                    } else {
+                        if (item.props.position === 'left' || item.props.position === 'right') return <item/>
+                        if (props.mode === 'alternative') {
+                            return index % 2 == 0 ? <item position="left"/> : <item position="right"/>
+                        } else {
+                            return <item position="right"/>
+                        }
+                    }
+                })
+            }
+
+
+            return (
+                <div
+                    class={`devui-time-axis-${props.direction}  ${props.center ? 'devui-time-axis-' + props.direction + '-center' : ''} `}
+                    ref={timeAxis}
+                    style={style}
+                >
+                    {renderItem()}
+                </div>
+            )
         }
-      });
-    });
-    return () => {
-      return (
-        <div class={`devui-time-axis-${props.direction}`} ref={timeAxis} style={{marginLeft:marginLeft+'px'}}>
-          {ctx.slots.default?.()}
-        </div>
-      )
     }
-  }
 })
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 079c253e..5b0dc7ed 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -20,8 +20,9 @@
         {{ item }}
       </d-radio>
     </d-radio-group>
-    <d-time-axis :direction="choose">
+    <d-time-axis :direction="choose" center>
       <d-time-axis-item
+          center
           v-for="(item,index) in timeAxisList"
           :key="index"
           :time="item.time"
@@ -29,7 +30,6 @@
       >
         {{item.text}}
       </d-time-axis-item>
-
     </d-time-axis>
   </div>
 </template>
@@ -39,8 +39,8 @@ import {defineComponent, ref} from 'vue'
 
 export default defineComponent({
   setup() {
-    const list = ref(['horizontal', 'vertical'])
-    const choose = ref('horizontal')
+    const list = ref(['vertical', 'horizontal'])
+    const choose = ref('vertical')
     const timeAxisList = ref([
       {
         text: 'Download',
@@ -71,9 +71,6 @@ export default defineComponent({
   }
 })
 </script>
-
-<style>
-</style>
 ```
 
 :::
@@ -85,7 +82,7 @@ export default defineComponent({
 ```vue
 
 <template>
-  <d-time-axis direction="horizontal">
+  <d-time-axis direction="horizontal" center>
     <d-time-axis-item
         v-for="(item,index) in timeAxisList"
         :key="index"
@@ -94,9 +91,9 @@ export default defineComponent({
         :line-style="item.lineStyle"
         :line-color="item.lineColor"
     >
-     <template #dot v-if="item.dot">
-       <d-icon :name="item.dot"></d-icon>
-     </template>
+      <template #dot v-if="item.dot">
+        <d-icon :name="item.dot"></d-icon>
+      </template>
       {{item.text}}
     </d-time-axis-item>
   </d-time-axis>
@@ -112,7 +109,7 @@ export default defineComponent({
         text: 'Start',
         time: '2021-10-1',
         lineStyle: "solid",
-        dot: 'cancel-forbidden',
+        dot: 'cancel-forbidden'
       },
       {
         text: 'Check',
@@ -120,7 +117,7 @@ export default defineComponent({
         dotColor: 'var(--devui-success)',
         lineStyle: "dashed",
         lineColor: 'var(--devui-success)',
-        dot: 'classroom-approve',
+        dot: 'classroom-approve'
       },
       {
         text: 'Debug',
@@ -128,7 +125,7 @@ export default defineComponent({
         dotColor: 'var(--devui-info)',
         lineStyle: "dotted",
         lineColor: 'var(--devui-info)',
-        dot: 'add-bug',
+        dot: 'add-bug'
       },
       {
         text: 'Build',
@@ -136,21 +133,99 @@ export default defineComponent({
         dotColor: 'var(--devui-warning)',
         lineStyle: "none",
         lineColor: 'var(--devui-warning)',
+        dot: 'build-with-tool'
       },
       {
         text: 'Display',
         time: '2021-10-5',
         dotColor: 'var(--devui-danger)',
-        dot: 'go-chart',
+        dot: 'go-chart'
       }
     ])
     return {timeAxisList}
   }
 })
 </script>
+```
+
+:::
+
+### 自定义内容
+
+:::demo
+
+```vue
+
+<template>
+  <d-time-axis direction="horizontal" mode="alternative">
+    <d-time-axis-item
+        v-for="(item,index) in timeAxisList"
+        :key="index"
+        :dot-color="item.dotColor"
+        line-style="dashed"
+    >
+
+      <template #default="data">
+        <div style="position: relative">
+          <div
+              v-if="data.position === 'bottom'"
+              style="margin-bottom: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
+          ></div>
+          <div
+              :style="{'border-left': '4px solid', 'box-shadow': '0 2px 4px 0 rgba(0, 0, 0, 0.1)', padding: '12px 8px',borderColor:item.dotColor,backgroundColor:item.backgroundColor}"
+          >
+            <div style="padding-bottom: 8px; font-size: 14px; font-weight: bold">{{ item.title }}</div>
+            <div style="padding-bottom: 8px">发布日期：{{ item.date }}</div>
+          </div>
+          <div
+              v-if="data.position === 'top'"
+              style="margin-top: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
+          ></div>
+        </div>
+      </template>
+
+    </d-time-axis-item>
+  </d-time-axis>
+</template>
+
+<script>
+import {defineComponent, ref} from 'vue'
 
-<style>
-</style>
+export default defineComponent({
+  setup() {
+    const timeAxisList = ref([
+      {
+        text: 'hello',
+        dotColor: 'var(--devui-success)',
+        extraElement: {},
+        title: '第四季度交付版本1.0', date: '2019/11/01'
+      },
+      {
+        text: 'world',
+        dotColor: 'var(--devui-danger)',
+        title: '第一季度交付版本2.0', date: '2020/03/01',
+        backgroundColor: 'rgba(255, 230, 230, 0.2)'
+      },
+      {
+        text: 'nihao',
+        dotColor: 'var(--devui-warning)',
+        title: '第二季度交付版本1.0', date: '2020/05/01'
+      },
+      {
+        text: 'DevUI',
+        dotColor: 'var(--devui-danger)',
+        title: '第三季度交付版本1.0', date: '2020/09/01'
+      },
+      {
+        text: 'Awesome',
+        dotColor: 'var(--devui-success)',
+        title: '第三季度交付版本1.0', date: '2020/09/01'
+      },
+    ])
+    return {timeAxisList}
+  }
+})
+</script>
 ```
 
 :::
@@ -160,6 +235,8 @@ export default defineComponent({
 | 参数           | 类型                            | 默认        | 说明         | 跳转 Demo                   |
 | ------------  | ----                            | ----       | ----        | ---------                   | 
 |   direction   |   `'vertical'\|'horizontal'`   | `vertical`  | 设置时间轴方向 |      [基本用法](#基本用法)     |  
+|   center   |   `boolean`| `false`  | 当方向为`horizontal`时，是否将内容设置居中 |      [基本用法](#基本用法)     |  
+|   mode   |   `'normal'\|'alternative'`   | `normal`  | 可选，`normal`模式下内容按默认方向排布， `alternative`模式下内容交替排布 |      [自定义内容](#自定义内容)     |  
 
 ### d-time-axis-item参数
 
@@ -170,6 +247,7 @@ export default defineComponent({
 |   dotColor   |  `string`    |   --   |   可选，自定义时间圈颜色   |   [基本用法](#基本用法)  | 
 |  lineStyle| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式   |  [自定义样式](#自定义样式) | 
 | lineColor |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
+| position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义样式](#自定义样式) | 
 
 ### 插槽
 
-- 
Gitee


From 01dc3132e84384e47f7ae36afd0d961386e174d4 Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Mon, 8 Nov 2021 15:40:06 +0800
Subject: [PATCH 04/13] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dd-time-axis-item?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B2=A1=E6=9C=89=E4=BC=A0=E5=80=BC=E6=97=B6?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/time-axis/src/time-axis.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index c289023c..858af51e 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -45,14 +45,19 @@ export default defineComponent({
         return () => {
             const renderItem = () => {
                 const slots: any[] = ctx.slots.default?.() ?? [];
+                console.log(slots)
                 let children;
                 if (slots.length === 1 && slots[0].type === Fragment) {
                     children = slots[0].children || []
+                }else {
+                    children = slots
                 }
+                console.log(children)
                 return children.map((item, index) => {
                     if (props.direction === 'horizontal') {
+                        console.log(item)
                         //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
-                        if (item.props.position === 'top' || item.props.position === 'bottom') return <item/>
+                        if (item.props?.position === 'top' || item.props?.position === 'bottom') return <item/>
                         //判断是否需要交替
                         if (props.mode === 'alternative') {
                             return index % 2 == 0 ? <item position="bottom"/> : <item position="top"/>
@@ -62,7 +67,7 @@ export default defineComponent({
                         }
 
                     } else {
-                        if (item.props.position === 'left' || item.props.position === 'right') return <item/>
+                        if (item.props?.position === 'left' || item.props?.position === 'right') return <item/>
                         if (props.mode === 'alternative') {
                             return index % 2 == 0 ? <item position="left"/> : <item position="right"/>
                         } else {
-- 
Gitee


From 28aa70ad2beb8459c25e9d62c3b2223ec412e866 Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Mon, 8 Nov 2021 15:55:29 +0800
Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=86=85=E5=AE=B9=E4=BD=8D=E7=BD=AE=E6=A1=88?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/time-axis/src/time-axis.tsx         |  4 +--
 .../docs/components/time-axis/index.md        | 30 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 858af51e..b0ff01f0 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -49,7 +49,7 @@ export default defineComponent({
                 let children;
                 if (slots.length === 1 && slots[0].type === Fragment) {
                     children = slots[0].children || []
-                }else {
+                } else {
                     children = slots
                 }
                 console.log(children)
@@ -80,7 +80,7 @@ export default defineComponent({
 
             return (
                 <div
-                    class={`devui-time-axis-${props.direction}  ${props.center ? 'devui-time-axis-' + props.direction + '-center' : ''} `}
+                    class={`devui-time-axis-${props.direction === 'horizontal' ? 'horizontal' : 'vertical'}  ${props.center ? 'devui-time-axis-' + (props.direction === 'horizontal' ? 'horizontal' : 'vertical') + '-center' : ''} `}
                     ref={timeAxis}
                     style={style}
                 >
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 5b0dc7ed..1cce6e14 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -230,6 +230,34 @@ export default defineComponent({
 
 :::
 
+### 自定义内容位置
+
+:::demo
+
+```vue
+
+<template>
+  <h5><p>当 direction 为 horizontal 时 position 默认为 bottom</p></h5>
+  <d-time-axis direction="horizontal" center>
+    <d-time-axis-item position="top" dot-color="chocolate">Download</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-success)">Check</d-time-axis-item>
+    <d-time-axis-item position="top" dot-color="var(--devui-danger)">Build</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-warning)">Depoy</d-time-axis-item>
+    <d-time-axis-item position="top" dot-color="var(--devui-waiting)">End</d-time-axis-item>
+  </d-time-axis>
+  <h5><p>当 direction 为 vertical 时 position 默认为right</p></h5>
+  <d-time-axis direction="vertical">
+    <d-time-axis-item position="left" dot-color="chocolate">Download</d-time-axis-item>
+    <d-time-axis-item position="right" dot-color="var(--devui-success)">Check</d-time-axis-item>
+    <d-time-axis-item position="left" dot-color="var(--devui-danger)">Build</d-time-axis-item>
+    <d-time-axis-item position="right" dot-color="var(--devui-warning)">Depoy</d-time-axis-item>
+    <d-time-axis-item position="left" dot-color="var(--devui-waiting)">End</d-time-axis-item>
+  </d-time-axis>
+</template>
+```
+
+:::
+
 ### d-time-axis
 
 | 参数           | 类型                            | 默认        | 说明         | 跳转 Demo                   |
@@ -247,7 +275,7 @@ export default defineComponent({
 |   dotColor   |  `string`    |   --   |   可选，自定义时间圈颜色   |   [基本用法](#基本用法)  | 
 |  lineStyle| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式   |  [自定义样式](#自定义样式) | 
 | lineColor |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
-| position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义样式](#自定义样式) | 
+| position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义内容位置](#自定义内容位置) | 
 
 ### 插槽
 
-- 
Gitee


From e669b8516689f3054c8806af74c369028503a6e0 Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Mon, 8 Nov 2021 17:03:10 +0800
Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E8=BD=B4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8F=AF=E8=87=AA=E5=AE=9A=E4=B9=89=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=A4=E4=B8=AA=E6=97=B6=E9=97=B4=E7=82=B9=E9=97=B4?=
 =?UTF-8?q?=E9=99=84=E5=8A=A0=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/time-axis-item/index.tsx     |  6 +++---
 .../devui/time-axis/src/time-axis.scss          | 17 +++++++++++++++--
 .../devui-vue/devui/time-axis/src/time-axis.tsx | 11 +++++------
 .../docs/components/time-axis/index.md          | 11 ++++++++---
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 2ce03812..b29f8bb1 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -9,8 +9,6 @@ export default defineComponent({
     emits: [],
     setup(props: TimeAxisItemProps, ctx) {
         const itemClass = 'devui-time-axis-item'
-        console.log(JSON.stringify(ctx), JSON.stringify(props))
-
         const renderTime = () => {
             return (
                 <div>
@@ -47,7 +45,9 @@ export default defineComponent({
 
                         <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
                              style={{borderColor: props.lineColor}}
-                        ></div>
+                        >
+                            {ctx.slots.extra?<div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div>:''}
+                        </div>
                     </div>
                     <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
                         {(props.position==='bottom'|| props.position==='right')?renderContent():renderTime()}
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.scss b/packages/devui-vue/devui/time-axis/src/time-axis.scss
index 8d9f36d1..8bf58de4 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.scss
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.scss
@@ -27,6 +27,11 @@ $devui-time-axis-item-dot-size: 18px;
         border-left-width: 2px;
         border-left-color: $devui-dividing-line;
 
+        &-extra {
+          position: absolute;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
         &:first-child {
           display: none;
         }
@@ -81,7 +86,8 @@ $devui-time-axis-item-dot-size: 18px;
         &-data-top,
         &-data-bottom {
           text-align: center;
-          padding:0 6px;
+          padding: 0 6px;
+
           > div {
             transform: translateX(-50%);
           }
@@ -107,6 +113,12 @@ $devui-time-axis-item-dot-size: 18px;
         width: calc(100% - #{$devui-time-axis-item-dot-size});
         border-bottom-width: 2px;
         border-bottom-color: $devui-dividing-line;
+
+        &-extra {
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
       }
 
       &:first-child {
@@ -119,7 +131,7 @@ $devui-time-axis-item-dot-size: 18px;
 
       &-data-top,
       &-data-bottom {
-        padding-right:12px;
+        padding-right: 12px;
         flex: 1;
 
       }
@@ -149,6 +161,7 @@ $devui-time-axis-item-dot-size: 18px;
       }
     }
   }
+
 }
 
 .devui-time-axis-item {
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index b0ff01f0..85ab6aff 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -9,7 +9,6 @@ export default defineComponent({
     props: timeAxisProps,
     emits: [],
     setup(props: TimeAxisProps, ctx) {
-        console.log(TimeAxisItem)
         const timeAxis = ref<null | HTMLElement>();
         const marginLeft = ref(0);
         const style = reactive({
@@ -45,17 +44,14 @@ export default defineComponent({
         return () => {
             const renderItem = () => {
                 const slots: any[] = ctx.slots.default?.() ?? [];
-                console.log(slots)
                 let children;
                 if (slots.length === 1 && slots[0].type === Fragment) {
                     children = slots[0].children || []
                 } else {
                     children = slots
                 }
-                console.log(children)
                 return children.map((item, index) => {
                     if (props.direction === 'horizontal') {
-                        console.log(item)
                         //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
                         if (item.props?.position === 'top' || item.props?.position === 'bottom') return <item/>
                         //判断是否需要交替
@@ -76,11 +72,14 @@ export default defineComponent({
                     }
                 })
             }
-
+            //防止字段传入错误，导致显示错误
+            const getDirection = () => {
+                return props.direction === 'horizontal' ? 'horizontal' : 'vertical'
+            }
 
             return (
                 <div
-                    class={`devui-time-axis-${props.direction === 'horizontal' ? 'horizontal' : 'vertical'}  ${props.center ? 'devui-time-axis-' + (props.direction === 'horizontal' ? 'horizontal' : 'vertical') + '-center' : ''} `}
+                    class={`devui-time-axis-${getDirection()}  ${props.center ? 'devui-time-axis-' + getDirection() + '-center' : ''} `}
                     ref={timeAxis}
                     style={style}
                 >
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 1cce6e14..3870bcfd 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -183,7 +183,11 @@ export default defineComponent({
           ></div>
         </div>
       </template>
-
+      <template #extra v-if="index===0">
+        <div style="text-align: center; width: 36px; height: 36px; border-radius: 18px; border: 2px solid #dfe1e6; background: white">
+          <span style="line-height: 32px">2020</span>
+        </div>
+      </template>
     </d-time-axis-item>
   </d-time-axis>
 </template>
@@ -219,7 +223,7 @@ export default defineComponent({
       {
         text: 'Awesome',
         dotColor: 'var(--devui-success)',
-        title: '第三季度交付版本1.0', date: '2020/09/01'
+        title: '第三季度交付版本1.0', date: '2020/11/01'
       },
     ])
     return {timeAxisList}
@@ -277,8 +281,9 @@ export default defineComponent({
 | lineColor |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
 | position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义内容位置](#自定义内容位置) | 
 
-### 插槽
+### d-time-axis-item插槽
 
 | 参数           | 描述        | 跳转 Demo                   |
 | ------------  | ----           | ---------                   | 
 |   dot   |    自定义时间轴点  |     [自定义样式](#自定义样式)    |  
+|   extra   |   自定义两个时间点间附加元素  |     [自定义内容](#自定义内容)    |  
-- 
Gitee


From 3676e2409e3101aa13f9631e9f7b163f2ec8461a Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Tue, 9 Nov 2021 11:35:44 +0800
Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E7=BB=84=E4=BB=B6=E6=97=B6=E9=97=B4time?=
 =?UTF-8?q?=E7=9A=84=E4=BD=8D=E7=BD=AE=E8=87=AA=E5=AE=9A=E4=B9=89=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/time-axis/index.ts   |   2 +-
 .../src/components/time-axis-item/index.scss  | 102 ------------------
 .../src/components/time-axis-item/index.tsx   |  26 ++++-
 .../src/components/time-axis-item/types.ts    |   7 +-
 .../devui/time-axis/src/time-axis-types.ts    |  40 +++----
 .../devui/time-axis/src/time-axis.scss        |   6 +-
 .../devui/time-axis/src/time-axis.tsx         |  29 +++--
 .../docs/components/time-axis/index.md        |  30 +++++-
 8 files changed, 91 insertions(+), 151 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/index.ts b/packages/devui-vue/devui/time-axis/index.ts
index 06029110..c3d67f63 100644
--- a/packages/devui-vue/devui/time-axis/index.ts
+++ b/packages/devui-vue/devui/time-axis/index.ts
@@ -12,7 +12,7 @@ export { TimeAxis,TimeAxisItem }
 export default {
   title: 'TimeAxis 时间轴',
   category: '数据展示',
-  status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '80%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
         app.use(TimeAxis as any)
         app.use(TimeAxisItem as any)
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
index a819cfa1..4c46ac03 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
@@ -37,71 +37,6 @@
   }
 }
 
-.devui-time-axis-item-vertical-time-bottom {
-  display: flex;
-
-  .devui-time-axis-item-axis {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .devui-time-axis-item-dot {
-    &,
-    & > svg {
-      width: 18px;
-      height: 18px;
-    }
-
-    & > i {
-      font-size: 18px;
-    }
-  }
-
-  .devui-time-axis-item-custom-dot {
-    width: 18px;
-    height: 18px;
-    text-align: center;
-  }
-
-  .devui-time-axis-item-line-time-bottom {
-    position: relative;
-    height: calc(100% - 36px);
-    border-left-width: 2px;
-    border-left-color: $devui-dividing-line;
-  }
-
-  .devui-time-axis-line-style {
-    &-dashed {
-      border-left-style: dashed;
-    }
-
-    &-solid {
-      border-left-style: solid;
-    }
-
-    &-none {
-      border-left-style: none;
-    }
-  }
-
-  .devui-time-axis-middle-zone {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .devui-time-axis-item-data-time-bottom {
-    margin-left: 12px;
-    margin-bottom: 40px;
-  }
-
-  .devui-time-axis-item-template {
-    margin-left: 12px;
-    margin-bottom: 24px;
-  }
-}
-
 @keyframes devui-time-axis-running {
   0% {
     transform: rotate(0deg);
@@ -121,40 +56,3 @@
     border-color: $devui-success;
   }
 }
-
-.devui-time-axis-item-data-hidden {
-  visibility: hidden;
-}
-
-:host.devui-time-axis-item-horizontal-no-line {
-  width: auto !important;
-
-  .devui-time-axis-item-data-horizontal-top {
-    width: max-content;
-  }
-
-  .devui-time-axis-item-data-horizontal-bottom {
-    width: max-content;
-  }
-}
-
-:host.devui-time-axis-item-vertical-no-line {
-  .devui-time-axis-item-data-time-bottom {
-    margin-bottom: 0;
-  }
-
-  .devui-time-axis-item-data-vertical-left {
-    margin-bottom: 0;
-  }
-
-  .devui-time-axis-item-data-vertical-right {
-    margin-bottom: 0;
-  }
-}
-
-.devui-time-axis-item-horizontal-align-center {
-  position: relative;
-  width: fit-content;
-  transform: translateX(-50%);
-  left: 8px;
-}
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index b29f8bb1..627219cc 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -1,4 +1,5 @@
-import {defineComponent, nextTick, onMounted, ref, watch} from 'vue'
+import {defineComponent, inject, nextTick, onMounted, ref, watch} from 'vue'
+import type { TimeAxisRootType } from '../../time-axis-types'
 
 import {timeAxisItemProps, TimeAxisItemProps} from './types'
 import './index.scss'
@@ -8,6 +9,7 @@ export default defineComponent({
     props: timeAxisItemProps,
     emits: [],
     setup(props: TimeAxisItemProps, ctx) {
+        const timeAxis:TimeAxisRootType = inject('timeAxis')
         const itemClass = 'devui-time-axis-item'
         const renderTime = () => {
             return (
@@ -27,12 +29,26 @@ export default defineComponent({
                 </div>
             )
         }
+        const renderPosition = (types: string[]) => {
+            //如果有设置position的话，就直接用position的内容
+            if (types.includes(props.position)) {
+                return renderContent()
+            } else {
+                //如果是horizontal直接返回时间
+                if (timeAxis.props.direction === 'horizontal') {
+                    return renderTime()
+                } else {
+                    //如果有设定time-position,则left显示在这
+                    return props.timePosition === 'left' ? renderTime():''
+                }
+            }
+        }
 
         return () => {
             return (
                 <div class={itemClass}>
                     <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
-                        {(props.position==='top'|| props.position==='left')?renderContent():renderTime()}
+                        {renderPosition(['top','left'])}
                     </div>
                     <div class={`${itemClass}-axis`}>
                         {
@@ -42,15 +58,15 @@ export default defineComponent({
                                        style={{borderColor: props.dotColor}}
                                 ></div>
                         }
-
+                        {(timeAxis.props.direction === 'vertical'&&props.timePosition === 'bottom')?renderTime():''}
                         <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
                              style={{borderColor: props.lineColor}}
                         >
-                            {ctx.slots.extra?<div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div>:''}
+                            {ctx.slots.extra ? <div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div>:''}
                         </div>
                     </div>
                     <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
-                        {(props.position==='bottom'|| props.position==='right')?renderContent():renderTime()}
+                        {renderPosition(['right','bottom'])}
                     </div>
                 </div>
 
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
index d87a0243..01289a4a 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue'
-import type { LineStyle } from '../../time-axis-types'
+import type { LineStyle,TimePosition } from '../../time-axis-types'
 export type Position = 'top' | 'bottom' | 'left' | 'right'
 export const timeAxisItemProps = {
   time: {
@@ -22,6 +22,11 @@ export const timeAxisItemProps = {
   position: {
     type: String as PropType<Position>
   },
+  //设置时间位置
+  timePosition: {
+    type: String as PropType<TimePosition>,
+    default: 'left'
+  }
 } as const
 
 export type TimeAxisItemProps = ExtractPropTypes<typeof timeAxisItemProps>
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
index bad2a5cc..fa5d2106 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
+++ b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
@@ -1,35 +1,9 @@
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes,SetupContext } from 'vue'
 export type DataDirection = 'vertical' | 'horizontal'
 export type Mode = 'normal' | 'alternative'
+export type TimePosition = 'left' | 'bottom'
 export type LineStyle = 'solid' | 'dashed' | 'dotted' | 'none'
 
-
-export interface DataItem {
-  //时间
-  time: string
-  //文本内容
-  text: string
-  //可选，自定义时间圈颜色
-  dotColor?: string
-  //分界线的样式
-  lineStyle?: LineStyle
-  //分界线的样式
-  lineColor?: string
-  //自定义点
-  customDot?: string | HTMLElement
-
-  
-  //时间点类型
-  type?: 'primary' | 'success' | 'danger' | 'warning'
-  status?: 'runned' | 'running' | ''
-  position?: 'top' | 'bottom' | 'left' | 'right'
-  extraElement?: string | HTMLElement
-  iconClass?: string
-  data?: any
-}
-
-
-
 export const timeAxisProps = {
   //设置时间轴方向
   direction: {
@@ -45,7 +19,17 @@ export const timeAxisProps = {
   mode: {
     type: String as PropType<Mode>,
     default: 'normal'
+  },
+  //设置时间位置
+  timePosition: {
+    type: String as PropType<TimePosition>,
+    default: 'left'
   }
 } as const
 
 export type TimeAxisProps = ExtractPropTypes<typeof timeAxisProps>
+
+export interface TimeAxisRootType {
+  ctx: SetupContext<any>
+  props: TimeAxisProps
+}
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.scss b/packages/devui-vue/devui/time-axis/src/time-axis.scss
index 8bf58de4..e4804133 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.scss
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.scss
@@ -24,6 +24,7 @@ $devui-time-axis-item-dot-size: 18px;
       &-line {
         position: relative;
         height: calc(100% - #{$devui-time-axis-item-dot-size});
+        min-height: 20px;
         border-left-width: 2px;
         border-left-color: $devui-dividing-line;
 
@@ -32,6 +33,7 @@ $devui-time-axis-item-dot-size: 18px;
           top: 50%;
           transform: translate(-50%, -50%);
         }
+
         &:first-child {
           display: none;
         }
@@ -82,7 +84,6 @@ $devui-time-axis-item-dot-size: 18px;
 
     &-center {
       .devui-time-axis-item {
-
         &-data-top,
         &-data-bottom {
           text-align: center;
@@ -133,7 +134,6 @@ $devui-time-axis-item-dot-size: 18px;
       &-data-bottom {
         padding-right: 12px;
         flex: 1;
-
       }
 
       &-line-style {
@@ -161,7 +161,6 @@ $devui-time-axis-item-dot-size: 18px;
       }
     }
   }
-
 }
 
 .devui-time-axis-item {
@@ -170,6 +169,7 @@ $devui-time-axis-item-dot-size: 18px;
     & > svg {
       width: $devui-time-axis-item-dot-size;
       height: $devui-time-axis-item-dot-size;
+      flex-shrink: 0;
     }
 
     & > i {
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 85ab6aff..060a347d 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -1,5 +1,5 @@
-import {defineComponent, Fragment, nextTick, onMounted, reactive, ref, toRef, watch} from 'vue'
-import {timeAxisProps, TimeAxisProps} from './time-axis-types'
+import {defineComponent, Fragment, nextTick, onMounted, provide, reactive, ref, toRef, watch} from 'vue'
+import {timeAxisProps, TimeAxisProps,TimeAxisRootType} from './time-axis-types'
 import TimeAxisItem from './components/time-axis-item'
 import './time-axis.scss'
 
@@ -9,6 +9,7 @@ export default defineComponent({
     props: timeAxisProps,
     emits: [],
     setup(props: TimeAxisProps, ctx) {
+        provide<TimeAxisRootType>('timeAxis', {ctx, props})
         const timeAxis = ref<null | HTMLElement>();
         const marginLeft = ref(0);
         const style = reactive({
@@ -42,6 +43,17 @@ export default defineComponent({
             setStyle()
         })
         return () => {
+            const renderPositionNode = (item, position?) => {
+                let timePosition:string = props.timePosition ? props.timePosition : 'left'
+                if(item.props?.timePosition||item.props?.['time-position']){
+                    timePosition = item.props.timePosition
+                }
+                return position
+                    ? <item position={position} time-position={timePosition}/>
+                    : <item time-position={timePosition}/>
+            }
+
+
             const renderItem = () => {
                 const slots: any[] = ctx.slots.default?.() ?? [];
                 let children;
@@ -53,21 +65,20 @@ export default defineComponent({
                 return children.map((item, index) => {
                     if (props.direction === 'horizontal') {
                         //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
-                        if (item.props?.position === 'top' || item.props?.position === 'bottom') return <item/>
+                        if (item.props?.position === 'top' || item.props?.position === 'bottom') return renderPositionNode(item)
                         //判断是否需要交替
                         if (props.mode === 'alternative') {
-                            return index % 2 == 0 ? <item position="bottom"/> : <item position="top"/>
+                            return renderPositionNode(item, index % 2 == 0 ? 'bottom' : 'top')
                         } else {
                             //不需要交替的直接给默认值
-                            return <item position="bottom"/>
+                            return renderPositionNode(item, 'bottom')
                         }
-
                     } else {
-                        if (item.props?.position === 'left' || item.props?.position === 'right') return <item/>
+                        if (item.props?.position === 'left' || item.props?.position === 'right') return renderPositionNode(item)
                         if (props.mode === 'alternative') {
-                            return index % 2 == 0 ? <item position="left"/> : <item position="right"/>
+                            return renderPositionNode(item, index % 2 == 0 ? 'left' : 'right')
                         } else {
-                            return <item position="right"/>
+                            return renderPositionNode(item, 'right')
                         }
                     }
                 })
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 3870bcfd..1ff7bc0b 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -86,11 +86,13 @@ export default defineComponent({
     <d-time-axis-item
         v-for="(item,index) in timeAxisList"
         :key="index"
-        :time="item.time"
         :dot-color="item.dotColor"
         :line-style="item.lineStyle"
         :line-color="item.lineColor"
     >
+      <template #time>
+        <div>{{item.time}}</div>
+      </template>
       <template #dot v-if="item.dot">
         <d-icon :name="item.dot"></d-icon>
       </template>
@@ -184,7 +186,9 @@ export default defineComponent({
         </div>
       </template>
       <template #extra v-if="index===0">
-        <div style="text-align: center; width: 36px; height: 36px; border-radius: 18px; border: 2px solid #dfe1e6; background: white">
+        <div
+            style="text-align: center; width: 36px; height: 36px; border-radius: 18px; border: 2px solid #dfe1e6; background: white"
+        >
           <span style="line-height: 32px">2020</span>
         </div>
       </template>
@@ -262,6 +266,25 @@ export default defineComponent({
 
 :::
 
+### 设置时间位置
+
+:::demo
+
+```vue
+<template>
+  <d-time-axis  time-position="bottom">
+    <d-time-axis-item dot-color="chocolate" time="2019" time-position="left">Download</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-success)" time="11-2">Check</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-danger)" time="2020" time-position="left">Build</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-warning)" time="11-4">Depoy</d-time-axis-item>
+    <d-time-axis-item dot-color="var(--devui-waiting)" time="2021" time-position="left">End</d-time-axis-item>
+
+  </d-time-axis>
+</template>
+```
+
+:::
+
 ### d-time-axis
 
 | 参数           | 类型                            | 默认        | 说明         | 跳转 Demo                   |
@@ -269,6 +292,7 @@ export default defineComponent({
 |   direction   |   `'vertical'\|'horizontal'`   | `vertical`  | 设置时间轴方向 |      [基本用法](#基本用法)     |  
 |   center   |   `boolean`| `false`  | 当方向为`horizontal`时，是否将内容设置居中 |      [基本用法](#基本用法)     |  
 |   mode   |   `'normal'\|'alternative'`   | `normal`  | 可选，`normal`模式下内容按默认方向排布， `alternative`模式下内容交替排布 |      [自定义内容](#自定义内容)     |  
+|   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`mode`属性冲突时以`mode`为准) |      [自定义内容](#自定义内容)     |  
 
 ### d-time-axis-item参数
 
@@ -280,10 +304,12 @@ export default defineComponent({
 |  lineStyle| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式   |  [自定义样式](#自定义样式) | 
 | lineColor |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
 | position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义内容位置](#自定义内容位置) | 
+|   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`position`属性冲突时以`position`为准) |      [自定义内容](#自定义内容)     |  
 
 ### d-time-axis-item插槽
 
 | 参数           | 描述        | 跳转 Demo                   |
 | ------------  | ----           | ---------                   | 
 |   dot   |    自定义时间轴点  |     [自定义样式](#自定义样式)    |  
+|   time   |    自定义时间  |     [自定义样式](#自定义样式)    |  
 |   extra   |   自定义两个时间点间附加元素  |     [自定义内容](#自定义内容)    |  
-- 
Gitee


From 7a872479702bcbd9a0e67850434c563e4b46fd46 Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Tue, 9 Nov 2021 13:02:08 +0800
Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/time-axis/index.ts   |  2 +-
 .../src/components/time-axis-item/index.scss  | 58 -------------------
 .../src/components/time-axis-item/index.tsx   | 44 +++++++++-----
 .../src/components/time-axis-item/types.ts    |  6 ++
 .../devui/time-axis/src/time-axis.scss        | 54 +++++++++++++++++
 .../devui/time-axis/src/time-axis.tsx         |  6 +-
 .../docs/components/time-axis/index.md        | 37 +++++++-----
 7 files changed, 116 insertions(+), 91 deletions(-)
 delete mode 100644 packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss

diff --git a/packages/devui-vue/devui/time-axis/index.ts b/packages/devui-vue/devui/time-axis/index.ts
index c3d67f63..59ac2dbc 100644
--- a/packages/devui-vue/devui/time-axis/index.ts
+++ b/packages/devui-vue/devui/time-axis/index.ts
@@ -12,7 +12,7 @@ export { TimeAxis,TimeAxisItem }
 export default {
   title: 'TimeAxis 时间轴',
   category: '数据展示',
-  status: '80%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '90%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
         app.use(TimeAxis as any)
         app.use(TimeAxisItem as any)
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
deleted file mode 100644
index 4c46ac03..00000000
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../../../../style/theme/color';
-
-.devui-time-axis-item-type {
-  &-primary {
-    border: 2px solid $devui-placeholder;
-    border-radius: 50%;
-  }
-
-  &-right {
-    i {
-      color: $devui-success;
-    }
-  }
-
-  &-danger {
-    path {
-      fill: $devui-danger;
-    }
-
-    circle {
-      fill: $devui-light-text;
-    }
-  }
-
-  &-warning {
-    i {
-      color: $devui-warning;
-    }
-  }
-
-  &-running {
-    line-height: 16px;
-    text-align: center;
-    animation: devui-time-axis-running 1.5s linear infinite;
-    border: 2px solid $devui-success;
-    border-radius: 50%;
-  }
-}
-
-@keyframes devui-time-axis-running {
-  0% {
-    transform: rotate(0deg);
-    color: $devui-success;
-    border-color: $devui-success;
-  }
-
-  50% {
-    transform: rotate(180deg);
-    color: $devui-success;
-    border-color: $devui-success;
-  }
-
-  100% {
-    transform: rotate(360deg);
-    color: $devui-success;
-    border-color: $devui-success;
-  }
-}
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 627219cc..6600a304 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -1,15 +1,15 @@
 import {defineComponent, inject, nextTick, onMounted, ref, watch} from 'vue'
-import type { TimeAxisRootType } from '../../time-axis-types'
-
-import {timeAxisItemProps, TimeAxisItemProps} from './types'
-import './index.scss'
+import type {TimeAxisRootType} from '../../time-axis-types'
+import DIcon from '../../../../icon/src/icon'
+import {timeAxisItemProps, TimeAxisItemProps, Type} from './types'
 
 export default defineComponent({
     name: 'DTimeAxisItem',
     props: timeAxisItemProps,
+    components: {DIcon},
     emits: [],
     setup(props: TimeAxisItemProps, ctx) {
-        const timeAxis:TimeAxisRootType = inject('timeAxis')
+        const timeAxis: TimeAxisRootType = inject('timeAxis')
         const itemClass = 'devui-time-axis-item'
         const renderTime = () => {
             return (
@@ -39,34 +39,48 @@ export default defineComponent({
                     return renderTime()
                 } else {
                     //如果有设定time-position,则left显示在这
-                    return props.timePosition === 'left' ? renderTime():''
+                    return props.timePosition === 'left' ? renderTime() : ''
                 }
             }
         }
+        const setTypeIcon = (type: Type) => {
+            if (type === 'primary') {
+                return ''
+            }
+            return <i class={`icon-${type === 'success' ? 'right' : type}-o`}></i>
+        }
+        const renderDot = () => {
+            if (ctx.slots.dot) {
+                return <div style={{color: props.dotColor}}> {ctx.slots.dot?.()}</div>
+            } else {
+                return (<div class={`${itemClass}-dot ${itemClass}-type-${props.type}`}
+                             style={{borderColor: props.dotColor}}
+                >
+                    {setTypeIcon(props.type)}
+                </div>)
+            }
+
+        }
 
         return () => {
             return (
                 <div class={itemClass}>
                     <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
-                        {renderPosition(['top','left'])}
+                        {renderPosition(['top', 'left'])}
                     </div>
                     <div class={`${itemClass}-axis`}>
                         {
-                            ctx.slots.dot
-                                ? <div style={{color: props.dotColor}}> {ctx.slots.dot?.()}</div>
-                                : <div class={`${itemClass}-dot ${itemClass}-type-primary`}
-                                       style={{borderColor: props.dotColor}}
-                                ></div>
+                            renderDot()
                         }
-                        {(timeAxis.props.direction === 'vertical'&&props.timePosition === 'bottom')?renderTime():''}
+                        {(timeAxis.props.direction === 'vertical' && props.timePosition === 'bottom') ? renderTime() : ''}
                         <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
                              style={{borderColor: props.lineColor}}
                         >
-                            {ctx.slots.extra ? <div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div>:''}
+                            {ctx.slots.extra ? <div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div> : ''}
                         </div>
                     </div>
                     <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
-                        {renderPosition(['right','bottom'])}
+                        {renderPosition(['right', 'bottom'])}
                     </div>
                 </div>
 
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
index 01289a4a..d4172592 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/types.ts
@@ -1,6 +1,7 @@
 import type { PropType, ExtractPropTypes } from 'vue'
 import type { LineStyle,TimePosition } from '../../time-axis-types'
 export type Position = 'top' | 'bottom' | 'left' | 'right'
+export type Type = 'primary' | 'success' | 'warning' | 'error'
 export const timeAxisItemProps = {
   time: {
     type: String,
@@ -26,6 +27,11 @@ export const timeAxisItemProps = {
   timePosition: {
     type: String as PropType<TimePosition>,
     default: 'left'
+  },
+  //时间点类型
+  type: {
+    type: String as PropType<Type>,
+    default: 'primary'
   }
 } as const
 
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.scss b/packages/devui-vue/devui/time-axis/src/time-axis.scss
index e4804133..6d15b4cc 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.scss
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.scss
@@ -174,6 +174,7 @@ $devui-time-axis-item-dot-size: 18px;
 
     & > i {
       font-size: $devui-time-axis-item-dot-size;
+      vertical-align: 0;
     }
   }
 
@@ -184,4 +185,57 @@ $devui-time-axis-item-dot-size: 18px;
       }
     }
   }
+
+  &-type {
+    &-primary {
+      border: 2px solid $devui-placeholder;
+      border-radius: 50%;
+    }
+
+    &-success {
+      i {
+        color: $devui-success;
+      }
+    }
+
+    &-error {
+      i {
+        color: $devui-danger;
+      }
+    }
+
+    &-warning {
+      i {
+        color: $devui-warning;
+      }
+    }
+
+    &-running {
+      line-height: 16px;
+      text-align: center;
+      animation: devui-time-axis-running 1.5s linear infinite;
+      border: 2px solid $devui-success;
+      border-radius: 50%;
+    }
+  }
+}
+
+@keyframes devui-time-axis-running {
+  0% {
+    transform: rotate(0deg);
+    color: $devui-success;
+    border-color: $devui-success;
+  }
+
+  50% {
+    transform: rotate(180deg);
+    color: $devui-success;
+    border-color: $devui-success;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    color: $devui-success;
+    border-color: $devui-success;
+  }
 }
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 060a347d..91e26335 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -1,5 +1,5 @@
 import {defineComponent, Fragment, nextTick, onMounted, provide, reactive, ref, toRef, watch} from 'vue'
-import {timeAxisProps, TimeAxisProps,TimeAxisRootType} from './time-axis-types'
+import {timeAxisProps, TimeAxisProps, TimeAxisRootType} from './time-axis-types'
 import TimeAxisItem from './components/time-axis-item'
 import './time-axis.scss'
 
@@ -44,8 +44,8 @@ export default defineComponent({
         })
         return () => {
             const renderPositionNode = (item, position?) => {
-                let timePosition:string = props.timePosition ? props.timePosition : 'left'
-                if(item.props?.timePosition||item.props?.['time-position']){
+                let timePosition: string = props.timePosition ? props.timePosition : 'left'
+                if (item.props?.timePosition || item.props?.['time-position']) {
                     timePosition = item.props.timePosition
                 }
                 return position
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 1ff7bc0b..571df207 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -178,6 +178,9 @@ export default defineComponent({
           >
             <div style="padding-bottom: 8px; font-size: 14px; font-weight: bold">{{ item.title }}</div>
             <div style="padding-bottom: 8px">发布日期：{{ item.date }}</div>
+            <div style="padding-bottom: 8px">版本状态：
+              <d-tag :color="item.dotColor">{{item.status}}</d-tag>
+            </div>
           </div>
           <div
               v-if="data.position === 'top'"
@@ -206,28 +209,33 @@ export default defineComponent({
         text: 'hello',
         dotColor: 'var(--devui-success)',
         extraElement: {},
-        title: '第四季度交付版本1.0', date: '2019/11/01'
+        title: '第四季度交付版本1.0', date: '2019/11/01', 
+        status: '已发布'
       },
       {
         text: 'world',
         dotColor: 'var(--devui-danger)',
         title: '第一季度交付版本2.0', date: '2020/03/01',
-        backgroundColor: 'rgba(255, 230, 230, 0.2)'
+        backgroundColor: 'rgba(255, 230, 230, 0.2)', 
+        status: '未开始'
       },
       {
         text: 'nihao',
         dotColor: 'var(--devui-warning)',
-        title: '第二季度交付版本1.0', date: '2020/05/01'
+        title: '第二季度交付版本1.0', date: '2020/05/01', 
+        status: '进行中'
       },
       {
         text: 'DevUI',
         dotColor: 'var(--devui-danger)',
-        title: '第三季度交付版本1.0', date: '2020/09/01'
+        title: '第三季度交付版本1.0', date: '2020/09/01', 
+        status: '未开始'
       },
       {
         text: 'Awesome',
         dotColor: 'var(--devui-success)',
-        title: '第三季度交付版本1.0', date: '2020/11/01'
+        title: '第三季度交付版本1.0', date: '2020/11/01', 
+        status: '已发布'
       },
     ])
     return {timeAxisList}
@@ -271,14 +279,14 @@ export default defineComponent({
 :::demo
 
 ```vue
-<template>
-  <d-time-axis  time-position="bottom">
-    <d-time-axis-item dot-color="chocolate" time="2019" time-position="left">Download</d-time-axis-item>
-    <d-time-axis-item dot-color="var(--devui-success)" time="11-2">Check</d-time-axis-item>
-    <d-time-axis-item dot-color="var(--devui-danger)" time="2020" time-position="left">Build</d-time-axis-item>
-    <d-time-axis-item dot-color="var(--devui-warning)" time="11-4">Depoy</d-time-axis-item>
-    <d-time-axis-item dot-color="var(--devui-waiting)" time="2021" time-position="left">End</d-time-axis-item>
 
+<template>
+  <d-time-axis time-position="bottom">
+    <d-time-axis-item time="2019" time-position="left">Download</d-time-axis-item>
+    <d-time-axis-item time="11-2" type="success">Check</d-time-axis-item>
+    <d-time-axis-item time="2020" type="warning" time-position="left">Build</d-time-axis-item>
+    <d-time-axis-item time="11-4" type="error">Depoy</d-time-axis-item>
+    <d-time-axis-item time="2021" type="primary" time-position="left">End</d-time-axis-item>
   </d-time-axis>
 </template>
 ```
@@ -294,7 +302,7 @@ export default defineComponent({
 |   mode   |   `'normal'\|'alternative'`   | `normal`  | 可选，`normal`模式下内容按默认方向排布， `alternative`模式下内容交替排布 |      [自定义内容](#自定义内容)     |  
 |   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`mode`属性冲突时以`mode`为准) |      [自定义内容](#自定义内容)     |  
 
-### d-time-axis-item参数
+### d-time-axis-item
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo                   |
 | ---- | ----   | ---- | ---- | ----  |
@@ -304,7 +312,8 @@ export default defineComponent({
 |  lineStyle| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式   |  [自定义样式](#自定义样式) | 
 | lineColor |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
 | position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义内容位置](#自定义内容位置) | 
-|   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`position`属性冲突时以`position`为准) |      [自定义内容](#自定义内容)     |  
+|   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`position`属性冲突时以`position`为准) |      [设置时间位置](#设置时间位置)     |  
+|   type   |   `'primary' \| 'success' \| 'warning' \| 'error'`   | `primary`  | 可选，时间点类型 |      [自定义内容](#自定义内容)     |  
 
 ### d-time-axis-item插槽
 
-- 
Gitee


From 49cc325abcab11f0973c4cdba1f5777f8e17484c Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Wed, 10 Nov 2021 14:50:06 +0800
Subject: [PATCH 09/13] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E7=BB=84=E4=BB=B6=E9=83=A8=E5=88=86=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/time-axis-item/index.tsx   |  7 ++--
 .../devui/time-axis/src/time-axis-types.ts    |  2 +-
 .../devui/time-axis/src/time-axis.scss        | 14 ++++----
 .../devui/time-axis/src/time-axis.tsx         | 35 +++++++++++--------
 .../docs/components/time-axis/index.md        | 18 ++++------
 5 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 6600a304..42b64306 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -13,7 +13,7 @@ export default defineComponent({
         const itemClass = 'devui-time-axis-item'
         const renderTime = () => {
             return (
-                <div>
+                <div class={`${itemClass}-time`}>
                     {
                         ctx.slots.time
                             ? ctx.slots.time?.()
@@ -24,7 +24,7 @@ export default defineComponent({
         }
         const renderContent = () => {
             return (
-                <div>
+                <div class={`${itemClass}-content`}>
                     {ctx.slots.default?.(props)}
                 </div>
             )
@@ -51,7 +51,7 @@ export default defineComponent({
         }
         const renderDot = () => {
             if (ctx.slots.dot) {
-                return <div style={{color: props.dotColor}}> {ctx.slots.dot?.()}</div>
+                return <div style={{color: props.dotColor}} class={`${itemClass}-dot`}> {ctx.slots.dot?.()}</div>
             } else {
                 return (<div class={`${itemClass}-dot ${itemClass}-type-${props.type}`}
                              style={{borderColor: props.dotColor}}
@@ -59,7 +59,6 @@ export default defineComponent({
                     {setTypeIcon(props.type)}
                 </div>)
             }
-
         }
 
         return () => {
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
index fa5d2106..4ca37a47 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
+++ b/packages/devui-vue/devui/time-axis/src/time-axis-types.ts
@@ -13,7 +13,7 @@ export const timeAxisProps = {
   //设置居中
   center: {
     type: Boolean,
-    default: (): boolean => false
+    default: false
   },
   //设置排序方向
   mode: {
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.scss b/packages/devui-vue/devui/time-axis/src/time-axis.scss
index 6d15b4cc..24b1ec55 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.scss
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.scss
@@ -178,13 +178,13 @@ $devui-time-axis-item-dot-size: 18px;
     }
   }
 
-  &:last-child {
-    .devui-time-axis-item-line {
-      &:last-child {
-        display: none;
-      }
-    }
-  }
+  //&:last-child {
+  //  .devui-time-axis-item-line {
+  //    &:last-child {
+  //      display: none;
+  //    }
+  //  }
+  //}
 
   &-type {
     &-primary {
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 91e26335..54fdda5d 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -43,14 +43,10 @@ export default defineComponent({
             setStyle()
         })
         return () => {
-            const renderPositionNode = (item, position?) => {
-                let timePosition: string = props.timePosition ? props.timePosition : 'left'
-                if (item.props?.timePosition || item.props?.['time-position']) {
-                    timePosition = item.props.timePosition
-                }
+            const renderItemPosition = (item, position?) => {
                 return position
-                    ? <item position={position} time-position={timePosition}/>
-                    : <item time-position={timePosition}/>
+                    ? <item position={position}/>
+                    : <item/>
             }
 
 
@@ -63,22 +59,33 @@ export default defineComponent({
                     children = slots
                 }
                 return children.map((item, index) => {
+                    //默认隐藏最后一条线
+                    if ((index + 1) === children.length) {
+                        if (!item.props?.lineStyle && !item.props?.['line-style']) {
+                            item = <item line-style="none"/>
+                        }
+                    }
+                    //如果没有单独设置time-position属性，则以全局为准
+                    if (!item.props?.timePosition && !item.props?.['time-position']) {
+                        item = <item time-position={props.timePosition ? props.timePosition : 'left'}/>
+                    }
+
                     if (props.direction === 'horizontal') {
                         //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
-                        if (item.props?.position === 'top' || item.props?.position === 'bottom') return renderPositionNode(item)
+                        if (item.props?.position === 'top' || item.props?.position === 'bottom') return item
                         //判断是否需要交替
                         if (props.mode === 'alternative') {
-                            return renderPositionNode(item, index % 2 == 0 ? 'bottom' : 'top')
+                            return renderItemPosition(item, index % 2 == 0 ? 'bottom' : 'top')
                         } else {
                             //不需要交替的直接给默认值
-                            return renderPositionNode(item, 'bottom')
+                            return renderItemPosition(item, 'bottom')
                         }
                     } else {
-                        if (item.props?.position === 'left' || item.props?.position === 'right') return renderPositionNode(item)
+                        if (item.props?.position === 'left' || item.props?.position === 'right') return item
                         if (props.mode === 'alternative') {
-                            return renderPositionNode(item, index % 2 == 0 ? 'left' : 'right')
+                            return renderItemPosition(item, index % 2 == 0 ? 'left' : 'right')
                         } else {
-                            return renderPositionNode(item, 'right')
+                            return renderItemPosition(item, 'right')
                         }
                     }
                 })
@@ -90,7 +97,7 @@ export default defineComponent({
 
             return (
                 <div
-                    class={`devui-time-axis-${getDirection()}  ${props.center ? 'devui-time-axis-' + getDirection() + '-center' : ''} `}
+                    class={`devui-time-axis devui-time-axis-${getDirection()}  ${props.center ? 'devui-time-axis-' + getDirection() + '-center' : ''} `}
                     ref={timeAxis}
                     style={style}
                 >
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 571df207..01ae74f4 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -12,7 +12,6 @@
 :::demo
 
 ```vue
-
 <template>
   <div>
     <d-radio-group css-style="row" v-model="choose">
@@ -80,7 +79,6 @@ export default defineComponent({
 :::demo
 
 ```vue
-
 <template>
   <d-time-axis direction="horizontal" center>
     <d-time-axis-item
@@ -154,10 +152,9 @@ export default defineComponent({
 
 ### 自定义内容
 
+可以使用 mode 为 `alternative` 设置内容交替展示
 :::demo
-
 ```vue
-
 <template>
   <d-time-axis direction="horizontal" mode="alternative">
     <d-time-axis-item
@@ -251,9 +248,8 @@ export default defineComponent({
 :::demo
 
 ```vue
-
 <template>
-  <h5><p>当 direction 为 horizontal 时 position 默认为 bottom</p></h5>
+  <h5><p>当 direction 为 horizontal 时 position 默认 bottom</p></h5>
   <d-time-axis direction="horizontal" center>
     <d-time-axis-item position="top" dot-color="chocolate">Download</d-time-axis-item>
     <d-time-axis-item dot-color="var(--devui-success)">Check</d-time-axis-item>
@@ -261,7 +257,7 @@ export default defineComponent({
     <d-time-axis-item dot-color="var(--devui-warning)">Depoy</d-time-axis-item>
     <d-time-axis-item position="top" dot-color="var(--devui-waiting)">End</d-time-axis-item>
   </d-time-axis>
-  <h5><p>当 direction 为 vertical 时 position 默认为right</p></h5>
+  <h5><p>当 direction 为 vertical 时 position 默认 right</p></h5>
   <d-time-axis direction="vertical">
     <d-time-axis-item position="left" dot-color="chocolate">Download</d-time-axis-item>
     <d-time-axis-item position="right" dot-color="var(--devui-success)">Check</d-time-axis-item>
@@ -279,7 +275,6 @@ export default defineComponent({
 :::demo
 
 ```vue
-
 <template>
   <d-time-axis time-position="bottom">
     <d-time-axis-item time="2019" time-position="left">Download</d-time-axis-item>
@@ -308,9 +303,9 @@ export default defineComponent({
 | ---- | ----   | ---- | ---- | ----  |
 |  time|`string`|   --   |   可选，时间   |   [基本用法](#基本用法)  | 
 | text |`string` |  --    |   可选，文本内容   |   [基本用法](#基本用法)  | 
-|   dotColor   |  `string`    |   --   |   可选，自定义时间圈颜色   |   [基本用法](#基本用法)  | 
-|  lineStyle| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式   |  [自定义样式](#自定义样式) | 
-| lineColor |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
+|   dot-color   |  `string`    |   --   |   可选，自定义时间圈颜色   |   [基本用法](#基本用法)  | 
+|  line-style| `'solid'\|'dashed'\|'dotted'\|'none'` |   `solid`   |   可选，设置线条样式（若没有设置，则默认时间轴最后一个元素为`none`）   |  [自定义样式](#自定义样式) | 
+| line-color |`string`                                        |  --         |   可选，设置线条颜色   | [自定义样式](#自定义样式) | 
 | position |`'top'\|'bottom'\|'left'\|'right'`    |  当`direction`为`vertical`时默认：`right`，当`direction`为`horizontal`时，默认：`bottom`   |   可选，设置内容存在的位置，若有time则time处在相反的位置   | [自定义内容位置](#自定义内容位置) | 
 |   time-position   |   `'left'\|'bottom'`   | `left`  | 可选，仅当`direction` 为 `vertical` 时定义时间参数位置(全局设置，当与`position`属性冲突时以`position`为准) |      [设置时间位置](#设置时间位置)     |  
 |   type   |   `'primary' \| 'success' \| 'warning' \| 'error'`   | `primary`  | 可选，时间点类型 |      [自定义内容](#自定义内容)     |  
@@ -319,6 +314,7 @@ export default defineComponent({
 
 | 参数           | 描述        | 跳转 Demo                   |
 | ------------  | ----           | ---------                   | 
+|   default   |    自定义内容  |     [自定义内容](#自定义内容)    |  
 |   dot   |    自定义时间轴点  |     [自定义样式](#自定义样式)    |  
 |   time   |    自定义时间  |     [自定义样式](#自定义样式)    |  
 |   extra   |   自定义两个时间点间附加元素  |     [自定义内容](#自定义内容)    |  
-- 
Gitee


From 80d417b78373824ceb95b7881d83a2eab37ee7fd Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Wed, 10 Nov 2021 14:52:40 +0800
Subject: [PATCH 10/13] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../time-axis/__tests__/time-axis.spec.ts     | 133 +++++++++++++++++-
 1 file changed, 129 insertions(+), 4 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
index 6fd410f8..7ae6666e 100644
--- a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
+++ b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
@@ -1,8 +1,133 @@
 import { mount } from '@vue/test-utils';
-import { TimeAxis } from '../index';
-
+import DTimeAxis from '../src/time-axis';
+import DTimeAxisItem from '../src/components/time-axis-item'
+//cd packages/devui-vue
+//yarn test --testMatch='**/**/time-axis.spec.ts'
 describe('time-axis test', () => {
-  it('time-axis init render', async () => {
-    // todo
+  const wrapper = mount({
+    components: { DTimeAxis, DTimeAxisItem },
+    template: `
+    <d-time-axis>
+      <d-time-axis-item time="2021-11-9">测试1</d-time-axis-item>
+      <d-time-axis-item type="primary">
+        <div>测试2</div>
+        <template #time><div>2021-11-10</div></template>
+        <template #dot><i class="icon-right-o" /></template>
+        <template #extra><span>附加元素</span><template>
+      </d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" type="success">测试3</d-time-axis-item>
+      <d-time-axis-item time="2021-11-12" type="warning">测试4</d-time-axis-item>
+      <d-time-axis-item time="2021-11-13" type="error">测试5</d-time-axis-item>
+    </d-time-axis>
+      `,
+    setup() {
+      return
+    }
+  });
+  const timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+
+  it('should render correctly', async () => {
+    //渲染的dom元素是有这个class
+    expect(wrapper.classes()).toContain('devui-time-axis')
+    //渲染正确子节点数
+    expect(timeAxisItems.length).toBe(5)
+    //看时间是否正确
+    expect(timeAxisItems[0].find('.devui-time-axis-item-time').text()).toBe('2021-11-9')
+    //看内容是否正确
+    expect(timeAxisItems[0].find('.devui-time-axis-item-content').text()).toBe('测试1')
+  })
+
+  it('应该显示自定义内容', async () => {
+    //有自定义的时间节点
+    expect(timeAxisItems[1].find('.devui-time-axis-item-time div').html()).toBe('<div>2021-11-10</div>')
+    //有自定义的内容
+    expect(timeAxisItems[1].find('.devui-time-axis-item-content div').html()).toBe('<div>测试2</div>')
+    //显示自定义时间点
+    expect(timeAxisItems[1].find('.devui-time-axis-item-dot i').exists()).toBe(true)
+    //显示时间点间的附加元素
+    expect(timeAxisItems[1].find('.devui-time-axis-item-line-extra span').html()).toBe('<span>附加元素</span>')
+  })
+
+  it('type应该正确被渲染', async () => {
+    expect(timeAxisItems[0].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-primary')
+    expect(timeAxisItems[2].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-success')
+    expect(timeAxisItems[3].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-warning')
+    expect(timeAxisItems[4].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-error')
+
+  })
+
+  it('position信息应该正确被渲染', async () => {
+
+    const wrapper = mount({
+      components: { DTimeAxis, DTimeAxisItem },
+      template: `
+    <d-time-axis mode="alternative">
+      <d-time-axis-item time="2021-11-9">测试1</d-time-axis-item>
+      <d-time-axis-item time="2021-11-10">测试2</d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" position="right">测试3</d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" position="top">测试3</d-time-axis-item>
+    </d-time-axis>
+      `,
+      setup() {
+        return
+      }
+    });
+    let timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+    //内容是否在正确的位置
+    expect(timeAxisItems[0].find('.devui-time-axis-item-data-left .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-data-right .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[2].find('.devui-time-axis-item-data-right .devui-time-axis-item-content').exists()).toBe(true)
+    //设置横向时间轴
+    await wrapper.setProps({ direction: 'horizontal' })
+    timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+    expect(timeAxisItems[0].find('.devui-time-axis-item-data-bottom .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-data-top .devui-time-axis-item-content').exists()).toBe(true)
+    expect(timeAxisItems[3].find('.devui-time-axis-item-data-top .devui-time-axis-item-content').exists()).toBe(true)
+
+  })
+
+  it('time-position信息应该正确被渲染', async () => {
+    const wrapper = mount({
+      components: { DTimeAxis, DTimeAxisItem },
+      template: `
+    <d-time-axis time-position="bottom">
+      <d-time-axis-item time="2021-11-9">测试1</d-time-axis-item>
+      <d-time-axis-item time="2021-11-10" time-position="left">测试2</d-time-axis-item>
+    </d-time-axis>
+      `,
+      setup() {
+        return
+      }
+    });
+    const timeAxisItems = wrapper.findAll('.devui-time-axis-item')
+    //时间是否在正确的位置
+    expect(timeAxisItems[0].find('.devui-time-axis-item-data-left .devui-time-axis-item-time').exists()).toBe(false)
+    expect(timeAxisItems[0].find('.devui-time-axis-item-axis .devui-time-axis-item-time').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-data-left .devui-time-axis-item-time').exists()).toBe(true)
+    expect(timeAxisItems[1].find('.devui-time-axis-item-axis .devui-time-axis-item-time').exists()).toBe(false)
+  })
+
+  it('线条样式被正确渲染', async () => {
+    const wrapper = mount({
+      components: { DTimeAxis, DTimeAxisItem },
+      template: `
+    <d-time-axis>
+      <d-time-axis-item time="2021-11-9" line-style="solid">测试1</d-time-axis-item>
+      <d-time-axis-item time="2021-11-10" line-style="dashed">测试2</d-time-axis-item>
+      <d-time-axis-item time="2021-11-11" line-style="dotted">测试3</d-time-axis-item>
+      <d-time-axis-item time="2021-11-12" line-style="none">测试4</d-time-axis-item>
+      <d-time-axis-item time="2021-11-13">测试5</d-time-axis-item>
+    </d-time-axis>
+      `,
+      setup() {
+        return
+      }
+    });
+    const timeAxisItemAxis = wrapper.findAll('.devui-time-axis-item .devui-time-axis-item-axis')
+    expect(timeAxisItemAxis[0].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-solid')
+    expect(timeAxisItemAxis[1].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-dashed')
+    expect(timeAxisItemAxis[2].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-dotted')
+    expect(timeAxisItemAxis[3].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-none')
+    expect(timeAxisItemAxis[4].find('.devui-time-axis-item-line').classes()).toContain('devui-time-axis-item-line-style-none')
   })
 })
-- 
Gitee


From 35d29e19f0d2e75d1c2a19a6b43166a8b5421536 Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Wed, 10 Nov 2021 14:55:14 +0800
Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E7=BB=84=E4=BB=B6=E5=AE=8C=E6=88=90=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/time-axis/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devui-vue/devui/time-axis/index.ts b/packages/devui-vue/devui/time-axis/index.ts
index 59ac2dbc..e5c50940 100644
--- a/packages/devui-vue/devui/time-axis/index.ts
+++ b/packages/devui-vue/devui/time-axis/index.ts
@@ -12,7 +12,7 @@ export { TimeAxis,TimeAxisItem }
 export default {
   title: 'TimeAxis 时间轴',
   category: '数据展示',
-  status: '90%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '已完成',
   install(app: App): void {
         app.use(TimeAxis as any)
         app.use(TimeAxisItem as any)
-- 
Gitee


From 49602158e0f254843f24e3bde86119a8d2c7438a Mon Sep 17 00:00:00 2001
From: jenson <1763417179@qq.com>
Date: Wed, 10 Nov 2021 14:58:47 +0800
Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=E5=AE=8C=E5=96=84=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E7=BB=84=E4=BB=B6=E5=8D=95=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/time-axis/__tests__/time-axis.spec.ts        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
index 7ae6666e..475a798c 100644
--- a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
+++ b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
@@ -37,7 +37,7 @@ describe('time-axis test', () => {
     expect(timeAxisItems[0].find('.devui-time-axis-item-content').text()).toBe('测试1')
   })
 
-  it('应该显示自定义内容', async () => {
+  it('Custom content should be displayed', async () => {
     //有自定义的时间节点
     expect(timeAxisItems[1].find('.devui-time-axis-item-time div').html()).toBe('<div>2021-11-10</div>')
     //有自定义的内容
@@ -48,7 +48,7 @@ describe('time-axis test', () => {
     expect(timeAxisItems[1].find('.devui-time-axis-item-line-extra span').html()).toBe('<span>附加元素</span>')
   })
 
-  it('type应该正确被渲染', async () => {
+  it('type should be rendered correctly', async () => {
     expect(timeAxisItems[0].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-primary')
     expect(timeAxisItems[2].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-success')
     expect(timeAxisItems[3].find('.devui-time-axis-item-dot').classes()).toContain('devui-time-axis-item-type-warning')
@@ -56,7 +56,7 @@ describe('time-axis test', () => {
 
   })
 
-  it('position信息应该正确被渲染', async () => {
+  it('position should be rendered correctly', async () => {
 
     const wrapper = mount({
       components: { DTimeAxis, DTimeAxisItem },
@@ -86,7 +86,7 @@ describe('time-axis test', () => {
 
   })
 
-  it('time-position信息应该正确被渲染', async () => {
+  it('time-position should be rendered correctly', async () => {
     const wrapper = mount({
       components: { DTimeAxis, DTimeAxisItem },
       template: `
@@ -107,7 +107,7 @@ describe('time-axis test', () => {
     expect(timeAxisItems[1].find('.devui-time-axis-item-axis .devui-time-axis-item-time').exists()).toBe(false)
   })
 
-  it('线条样式被正确渲染', async () => {
+  it('line-style should be rendered correctly', async () => {
     const wrapper = mount({
       components: { DTimeAxis, DTimeAxisItem },
       template: `
-- 
Gitee


From f7b27b78c1ca39a61cda8e1c4a71a2bc140a4de3 Mon Sep 17 00:00:00 2001
From: Jenson <1763417179@qq.com>
Date: Sun, 14 Nov 2021 23:27:51 +0800
Subject: [PATCH 13/13] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4=E4=BB=A3=E7=A0=81=E7=BC=A9=E8=BF=9B=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../time-axis/__tests__/time-axis.spec.ts     |   2 -
 .../src/components/time-axis-item/index.tsx   | 158 +++++++--------
 .../devui/time-axis/src/time-axis.tsx         | 187 +++++++++---------
 3 files changed, 172 insertions(+), 175 deletions(-)

diff --git a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
index 475a798c..d12597cc 100644
--- a/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
+++ b/packages/devui-vue/devui/time-axis/__tests__/time-axis.spec.ts
@@ -1,8 +1,6 @@
 import { mount } from '@vue/test-utils';
 import DTimeAxis from '../src/time-axis';
 import DTimeAxisItem from '../src/components/time-axis-item'
-//cd packages/devui-vue
-//yarn test --testMatch='**/**/time-axis.spec.ts'
 describe('time-axis test', () => {
   const wrapper = mount({
     components: { DTimeAxis, DTimeAxisItem },
diff --git a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
index 42b64306..53ec882a 100644
--- a/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
+++ b/packages/devui-vue/devui/time-axis/src/components/time-axis-item/index.tsx
@@ -1,89 +1,89 @@
-import {defineComponent, inject, nextTick, onMounted, ref, watch} from 'vue'
+import {defineComponent, inject} from 'vue'
 import type {TimeAxisRootType} from '../../time-axis-types'
 import DIcon from '../../../../icon/src/icon'
 import {timeAxisItemProps, TimeAxisItemProps, Type} from './types'
 
 export default defineComponent({
-    name: 'DTimeAxisItem',
-    props: timeAxisItemProps,
-    components: {DIcon},
-    emits: [],
-    setup(props: TimeAxisItemProps, ctx) {
-        const timeAxis: TimeAxisRootType = inject('timeAxis')
-        const itemClass = 'devui-time-axis-item'
-        const renderTime = () => {
-            return (
-                <div class={`${itemClass}-time`}>
-                    {
-                        ctx.slots.time
-                            ? ctx.slots.time?.()
-                            : props.time
-                    }
-                </div>
-            )
-        }
-        const renderContent = () => {
-            return (
-                <div class={`${itemClass}-content`}>
-                    {ctx.slots.default?.(props)}
-                </div>
-            )
-        }
-        const renderPosition = (types: string[]) => {
-            //如果有设置position的话，就直接用position的内容
-            if (types.includes(props.position)) {
-                return renderContent()
-            } else {
-                //如果是horizontal直接返回时间
-                if (timeAxis.props.direction === 'horizontal') {
-                    return renderTime()
-                } else {
-                    //如果有设定time-position,则left显示在这
-                    return props.timePosition === 'left' ? renderTime() : ''
-                }
-            }
-        }
-        const setTypeIcon = (type: Type) => {
-            if (type === 'primary') {
-                return ''
-            }
-            return <i class={`icon-${type === 'success' ? 'right' : type}-o`}></i>
-        }
-        const renderDot = () => {
-            if (ctx.slots.dot) {
-                return <div style={{color: props.dotColor}} class={`${itemClass}-dot`}> {ctx.slots.dot?.()}</div>
-            } else {
-                return (<div class={`${itemClass}-dot ${itemClass}-type-${props.type}`}
-                             style={{borderColor: props.dotColor}}
-                >
-                    {setTypeIcon(props.type)}
-                </div>)
-            }
+  name: 'DTimeAxisItem',
+  components: {DIcon},
+  props: timeAxisItemProps,
+  emits: [],
+  setup(props: TimeAxisItemProps, ctx) {
+    const timeAxis: TimeAxisRootType = inject('timeAxis')
+    const itemClass = 'devui-time-axis-item'
+    const renderTime = () => {
+      return (
+        <div class={`${itemClass}-time`}>
+          {
+            ctx.slots.time
+              ? ctx.slots.time?.()
+              : props.time
+          }
+        </div>
+      )
+    }
+    const renderContent = () => {
+      return (
+        <div class={`${itemClass}-content`}>
+          {ctx.slots.default?.(props)}
+        </div>
+      )
+    }
+    const renderPosition = (types: string[]) => {
+      //如果有设置position的话，就直接用position的内容
+      if (types.includes(props.position)) {
+        return renderContent()
+      } else {
+        //如果是horizontal直接返回时间
+        if (timeAxis.props.direction === 'horizontal') {
+          return renderTime()
+        } else {
+          //如果有设定time-position,则left显示在这
+          return props.timePosition === 'left' ? renderTime() : ''
         }
+      }
+    }
+    const setTypeIcon = (type: Type) => {
+      if (type === 'primary') {
+        return ''
+      }
+      return <i class={`icon-${type === 'success' ? 'right' : type}-o`}/>
+    }
+    const renderDot = () => {
+      if (ctx.slots.dot) {
+        return <div style={{color: props.dotColor}} class={`${itemClass}-dot`}> {ctx.slots.dot?.()}</div>
+      } else {
+        return (<div class={`${itemClass}-dot ${itemClass}-type-${props.type}`}
+                     style={{borderColor: props.dotColor}}
+        >
+          {setTypeIcon(props.type)}
+        </div>)
+      }
+    }
 
-        return () => {
-            return (
-                <div class={itemClass}>
-                    <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
-                        {renderPosition(['top', 'left'])}
-                    </div>
-                    <div class={`${itemClass}-axis`}>
-                        {
-                            renderDot()
-                        }
-                        {(timeAxis.props.direction === 'vertical' && props.timePosition === 'bottom') ? renderTime() : ''}
-                        <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
-                             style={{borderColor: props.lineColor}}
-                        >
-                            {ctx.slots.extra ? <div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div> : ''}
-                        </div>
-                    </div>
-                    <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
-                        {renderPosition(['right', 'bottom'])}
-                    </div>
-                </div>
+    return () => {
+      return (
+        <div class={itemClass}>
+          <div class={`${itemClass}-data-left ${itemClass}-data-top`}>
+            {renderPosition(['top', 'left'])}
+          </div>
+          <div class={`${itemClass}-axis`}>
+            {
+              renderDot()
+            }
+            {(timeAxis.props.direction === 'vertical' && props.timePosition === 'bottom') ? renderTime() : ''}
+            <div class={`${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`}
+                 style={{borderColor: props.lineColor}}
+            >
+              {ctx.slots.extra ? <div class={`${itemClass}-line-extra`}>{ctx.slots.extra()}</div> : ''}
+            </div>
+          </div>
+          <div class={`${itemClass}-data-right ${itemClass}-data-bottom`}>
+            {renderPosition(['right', 'bottom'])}
+          </div>
+        </div>
 
-            )
-        }
+      )
     }
+  }
 })
diff --git a/packages/devui-vue/devui/time-axis/src/time-axis.tsx b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
index 54fdda5d..6d8e6e5b 100644
--- a/packages/devui-vue/devui/time-axis/src/time-axis.tsx
+++ b/packages/devui-vue/devui/time-axis/src/time-axis.tsx
@@ -4,106 +4,105 @@ import TimeAxisItem from './components/time-axis-item'
 import './time-axis.scss'
 
 export default defineComponent({
-    name: 'DTimeAxis',
-    components: {TimeAxisItem},
-    props: timeAxisProps,
-    emits: [],
-    setup(props: TimeAxisProps, ctx) {
-        provide<TimeAxisRootType>('timeAxis', {ctx, props})
-        const timeAxis = ref<null | HTMLElement>();
-        const marginLeft = ref(0);
-        const style = reactive({
-            marginLeft: '0px',
-            height: 'auto'
-        })
-        const setStyle = () => {
-            style.height = 'auto'
-            style.marginLeft = '0px'
-            if (props.direction === 'horizontal') {
-                nextTick(() => {
-                    const el = timeAxis.value;
-                    if (props.center) {
-                        //计算偏移量
-                        style.marginLeft = (el?.firstElementChild?.clientWidth || 0) / 2 + 'px'
-                    }
-                    //算出最大高度
-                    style.height = Math.max(
-                            ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-top')).map(el => el.clientHeight),
-                            ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-bottom')).map(el => el.clientHeight)
-                        ) * 2
-                        + Math.max(...Array.from(el?.querySelectorAll('.devui-time-axis-item-axis')).map(el => el.clientHeight))
-                        + 'px'
-                });
-            }
-        }
-        onMounted(() => {
-            setStyle()
+  name: 'DTimeAxis',
+  components: {TimeAxisItem},
+  props: timeAxisProps,
+  emits: [],
+  setup(props: TimeAxisProps, ctx) {
+    provide<TimeAxisRootType>('timeAxis', {ctx, props})
+    const timeAxis = ref<null | HTMLElement>();
+    const style = reactive({
+      marginLeft: '0px',
+      height: 'auto'
+    })
+    const setStyle = () => {
+      style.height = 'auto'
+      style.marginLeft = '0px'
+      if (props.direction === 'horizontal') {
+        nextTick(() => {
+          const el = timeAxis.value;
+          if (props.center) {
+            //计算偏移量
+            style.marginLeft = (el?.firstElementChild?.clientWidth || 0) / 2 + 'px'
+          }
+          //算出最大高度
+          style.height = Math.max(
+              ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-top')).map(el => el.clientHeight),
+              ...Array.from(el?.querySelectorAll('.devui-time-axis-item-data-bottom')).map(el => el.clientHeight)
+            ) * 2
+            + Math.max(...Array.from(el?.querySelectorAll('.devui-time-axis-item-axis')).map(el => el.clientHeight))
+            + 'px'
         });
-        watch(toRef(props, 'direction'), () => {
-            setStyle()
-        })
-        return () => {
-            const renderItemPosition = (item, position?) => {
-                return position
-                    ? <item position={position}/>
-                    : <item/>
-            }
+      }
+    }
+    onMounted(() => {
+      setStyle()
+    });
+    watch(toRef(props, 'direction'), () => {
+      setStyle()
+    })
+    return () => {
+      const renderItemPosition = (item, position?) => {
+        return position
+          ? <item position={position}/>
+          : <item/>
+      }
 
 
-            const renderItem = () => {
-                const slots: any[] = ctx.slots.default?.() ?? [];
-                let children;
-                if (slots.length === 1 && slots[0].type === Fragment) {
-                    children = slots[0].children || []
-                } else {
-                    children = slots
-                }
-                return children.map((item, index) => {
-                    //默认隐藏最后一条线
-                    if ((index + 1) === children.length) {
-                        if (!item.props?.lineStyle && !item.props?.['line-style']) {
-                            item = <item line-style="none"/>
-                        }
-                    }
-                    //如果没有单独设置time-position属性，则以全局为准
-                    if (!item.props?.timePosition && !item.props?.['time-position']) {
-                        item = <item time-position={props.timePosition ? props.timePosition : 'left'}/>
-                    }
+      const renderItem = () => {
+        const slots: any[] = ctx.slots.default?.() ?? [];
+        let children;
+        if (slots.length === 1 && slots[0].type === Fragment) {
+          children = slots[0].children || []
+        } else {
+          children = slots
+        }
+        return children.map((item, index) => {
+          //默认隐藏最后一条线
+          if ((index + 1) === children.length) {
+            if (!item.props?.lineStyle && !item.props?.['line-style']) {
+              item = <item line-style="none"/>
+            }
+          }
+          //如果没有单独设置time-position属性，则以全局为准
+          if (!item.props?.timePosition && !item.props?.['time-position']) {
+            item = <item time-position={props.timePosition ? props.timePosition : 'left'}/>
+          }
 
-                    if (props.direction === 'horizontal') {
-                        //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
-                        if (item.props?.position === 'top' || item.props?.position === 'bottom') return item
-                        //判断是否需要交替
-                        if (props.mode === 'alternative') {
-                            return renderItemPosition(item, index % 2 == 0 ? 'bottom' : 'top')
-                        } else {
-                            //不需要交替的直接给默认值
-                            return renderItemPosition(item, 'bottom')
-                        }
-                    } else {
-                        if (item.props?.position === 'left' || item.props?.position === 'right') return item
-                        if (props.mode === 'alternative') {
-                            return renderItemPosition(item, index % 2 == 0 ? 'left' : 'right')
-                        } else {
-                            return renderItemPosition(item, 'right')
-                        }
-                    }
-                })
+          if (props.direction === 'horizontal') {
+            //判断是否有自定义的位置信息，且是否正确 有，且正确直接用
+            if (item.props?.position === 'top' || item.props?.position === 'bottom') return item
+            //判断是否需要交替
+            if (props.mode === 'alternative') {
+              return renderItemPosition(item, index % 2 == 0 ? 'bottom' : 'top')
+            } else {
+              //不需要交替的直接给默认值
+              return renderItemPosition(item, 'bottom')
             }
-            //防止字段传入错误，导致显示错误
-            const getDirection = () => {
-                return props.direction === 'horizontal' ? 'horizontal' : 'vertical'
+          } else {
+            if (item.props?.position === 'left' || item.props?.position === 'right') return item
+            if (props.mode === 'alternative') {
+              return renderItemPosition(item, index % 2 == 0 ? 'left' : 'right')
+            } else {
+              return renderItemPosition(item, 'right')
             }
+          }
+        })
+      }
+      //防止字段传入错误，导致显示错误
+      const getDirection = () => {
+        return props.direction === 'horizontal' ? 'horizontal' : 'vertical'
+      }
 
-            return (
-                <div
-                    class={`devui-time-axis devui-time-axis-${getDirection()}  ${props.center ? 'devui-time-axis-' + getDirection() + '-center' : ''} `}
-                    ref={timeAxis}
-                    style={style}
-                >
-                    {renderItem()}
-                </div>
-            )
-        }
+      return (
+        <div
+          class={`devui-time-axis devui-time-axis-${getDirection()}  ${props.center ? 'devui-time-axis-' + getDirection() + '-center' : ''} `}
+          ref={timeAxis}
+          style={style}
+        >
+          {renderItem()}
+        </div>
+      )
     }
+  }
 })
-- 
Gitee