diff --git a/examples/sites/demos/apis/steps.js b/examples/sites/demos/apis/steps.js
index 868c74f7dd..894b872c4a 100644
--- a/examples/sites/demos/apis/steps.js
+++ b/examples/sites/demos/apis/steps.js
@@ -19,13 +19,14 @@ export default {
         },
         {
           name: 'advanced',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: 'false',
           desc: {
             'zh-CN': '是否开启高级向导模式',
             'en-US': 'Enable Advanced Wizard Mode'
           },
-          mode: ['mobile-first'],
+          mode: ['mobile-first', 'pc'],
+          pcDemo: 'advanced-steps',
           mfDemo: 'advanced-steps'
         },
         {
@@ -99,6 +100,17 @@ export default {
           mode: ['pc'],
           pcDemo: 'node-width'
         },
+        {
+          name: 'line',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '通过 line 设置横向单链型步骤条',
+            'en-US': 'Set horizontal single chain step bar through line'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
         {
           name: 'name-field',
           type: 'string',
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
index c838ee5d74..284bb1e8c4 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
@@ -15,11 +15,11 @@ import { Steps as TinySteps, Modal } from '@opentiny/vue'
 
 const advancedActive = ref(1)
 const data = ref([
-  { name: 'Basic Info', count: 3, status: 'doing' },
-  { name: 'BOQ Info', count: 0, status: 'done' },
-  { name: 'Involved Parties', count: 10, status: 'doing' },
-  { name: 'Billing', count: 0, status: 'done' },
-  { name: 'Appraise', count: 0 }
+  { name: 'Basic Info', count: 3, status: 'done' },
+  { name: 'BOQ Info', count: 0, status: 'doing' },
+  { name: 'Involved Parties', count: 10, status: 'error' },
+  { name: 'Billing', count: 0, status: 'disabled' },
+  { name: 'Appraise', count: 3 }
 ])
 
 const advancedClick = (index, node) => {
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps.spec.ts b/examples/sites/demos/pc/app/steps/advanced-steps.spec.ts
index dae256078e..45d6abcf80 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps.spec.ts
+++ b/examples/sites/demos/pc/app/steps/advanced-steps.spec.ts
@@ -10,8 +10,8 @@ test('高级向导', async ({ page }) => {
   const nodes = steps.locator('.tiny-steps-advanced li')
 
   await expect(stepsWrapper).toBeVisible()
-  await expect(nodes.first()).toHaveClass('doing')
-  await expect(nodes.nth(1)).toHaveClass(/done/)
+  await expect(nodes.first()).toHaveClass('done')
+  await expect(nodes.nth(1)).toHaveClass(/doing/)
   await expect(nodes.nth(1)).toHaveClass(/current/)
   await nodes.nth(3).click()
   await expect(nodes.nth(3)).toHaveClass(/current/)
@@ -21,6 +21,6 @@ test('高级向导', async ({ page }) => {
   const advancedSteps = page.locator('.pc-demo .tiny-steps-senior')
   const advancedNodes = advancedSteps.locator('.tiny-steps-block')
   await expect(advancedSteps).toBeVisible()
-  await expect(advancedNodes.first()).toHaveClass(/doing/)
-  await expect(advancedNodes.nth(1)).toHaveClass(/done/)
+  await expect(advancedNodes.first()).toHaveClass(/done/)
+  await expect(advancedNodes.nth(1)).toHaveClass(/doing/)
 })
diff --git a/packages/theme/src/steps/aurora-theme.js b/packages/theme/src/steps/aurora-theme.js
index 6f8dd3219f..ef2a8d2aa9 100644
--- a/packages/theme/src/steps/aurora-theme.js
+++ b/packages/theme/src/steps/aurora-theme.js
@@ -1,43 +1,40 @@
 export const tinyStepsAuroraTheme = {
-  'ti-steps-text-color': '#191919',
-  'ti-steps-text-color-hover': '#191919',
-  'ti-steps-description-text-color': '#777777',
-  'ti-steps-font-size-base': 'var(--ti-common-font-size-base)',
-  'ti-steps-border-color-hover': '#aeaeae',
-  'ti-steps-advanced-li-text-color': 'var(--ti-common-color-text-white)',
-  'ti-steps-line-margin-horizontal': '0px', // px不能省略
-  'ti-steps-line-bg-color': '#dbdbdb',
-  'ti-steps-line-height': 'var(--ti-common-space-base)',
-  'ti-steps-unselected-icon-color': 'var(--ti-common-color-text-white)',
-  'ti-steps-unselected-border-color': '#d9d9d9',
-  'ti-steps-icon-bg-color': 'var(--ti-common-color-line-normal)',
-  'ti-steps-icon-hover-text-color': '#aeaeae',
-  'ti-steps-bg-color-hover': '#f3f3f3',
-  'ti-steps-advanced-error-bg-color': '#fee7e8',
-  'ti-steps-advanced-error-bg-color-hover': '#fabdc1',
-  'ti-steps-advanced-error-bg-color-selected': '#e02128',
-  'ti-steps-error-border-color': '#e02128',
-  'ti-steps-error-text-color': '#e02128',
-  'ti-steps-advanced-disabled-bg-color': '#f3f3f3',
-  'ti-steps-done-active-border-color': 'var(--ti-common-color-line-active)',
-  'ti-steps-done-active-border-color-hover': 'var(--ti-common-color-line-hover)',
-  'ti-steps-doing-icon-bg-color': '#eef3fe',
-  'ti-steps-disabled-icon-color': '#c9c9c9',
-  'ti-steps-disabled-name-text-color': '#c9c9c9',
-  'ti-steps-disabled-text-color': '#777777',
-  'ti-steps-disabled-select-icon-bg-color': '#c9c9c9',
-  'ti-steps-disabled-select-icon-color': 'var(--ti-common-color-text-white)',
-  'ti-steps-active-font-weight': 'var(--ti-common-font-weight-7)',
-  'ti-steps-unselected-hover-icon-color': 'var(--ti-common-color-text-white)',
-  'ti-steps-unselected-hover-name-text-color': 'var(--ti-common-text-color-normal)',
-  'ti-steps-unselected-hover-border-color': 'var(--ti-common-color-line-normal)',
-  'ti-steps-advanced-li-hover-bg-color': 'var(--ti-common-bg-color-header-1)',
-  'ti-steps-advanced-done-bg-color': '#eef3fe',
-  'ti-steps-advanced-doing-bg-color': '#eef3fe',
-  'ti-steps-advanced-done-bg-color-hover': '#d0d8fd',
-  'ti-steps-advanced-doing-bg-color-hover': '#2e8bde',
-  'ti-steps-name-margin-right': 'var(--ti-common-space-2x)',
-  'ti-steps-error-bg-color': 'var(--ti-common-bg-primary)',
-  'ti-steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled)',
-  'ti-steps-error-icon-color': '#fff'
+  'tv-Steps-text-color': '#191919',
+  'tv-Steps-node-title-text-color-hover': '#191919',
+  'tv-Steps-node-desc-text-color': '#777777',
+  'tv-Steps-font-size': 'var(--ti-common-font-size-base)',
+  'tv-Steps-line-number-border-color-hover': '#aeaeae',
+  'tv-Steps-advance-li-text-color': 'var(--ti-common-color-text-white)',
+  'tv-Steps-line-margin-horizontal': '0px', // px不能省略
+  'tv-Steps-line-bg-color': '#dbdbdb',
+  'tv-Steps-line-height': 'var(--ti-common-space-base)',
+  'tv-Steps-unselected-icon-color': 'var(--ti-common-color-text-white)',
+  'tv-Steps-node-border-color': '#d9d9d9',
+  'tv-Steps-node-icon-bg-color': 'var(--ti-common-color-line-normal)',
+  'tv-Steps-line-number-text-color-hover': '#aeaeae',
+  'tv-Steps-line-number-bg-color-hover': '#f3f3f3',
+  'tv-Steps-advance-node-error-bg-color': '#fee7e8',
+  'tv-Steps-advance-node-error-bg-color-hover': '#fabdc1',
+  'tv-Steps-advance-node-error-bg-color-active': '#e02128',
+  'tv-Steps-error-border-color': '#e02128',
+  'tv-Steps-error-text-color': '#e02128',
+  'tv-Steps-advance-node-disable-bg-color': '#f3f3f3',
+  'tv-Steps-node-done-border-color': 'var(--ti-common-color-line-active)',
+  'tv-Steps-line-done-border-color-hover': 'var(--ti-common-color-line-hover)',
+  'tv-Steps-line-doing-icon-bg-color': '#eef3fe',
+  'tv-Steps-disabled-icon-color': '#c9c9c9',
+  'tv-Steps-line-title-text-color-disabled': '#c9c9c9',
+  'tv-Steps-disabled-text-color': '#777777',
+  'tv-Steps-line-number-active-bg-color-disabled': '#c9c9c9',
+  'tv-Steps-line-number-active-text-color-disabled': 'var(--ti-common-color-text-white)',
+  'tv-Steps-active-font-weight': 'var(--ti-common-font-weight-7)',
+  'tv-Steps-advance-li-hover-bg-color': 'var(--ti-common-bg-color-header-1)',
+  'tv-Steps-advance-node-done-bg-color': '#eef3fe',
+  'tv-Steps-advance-node-doing-bg-color': '#eef3fe',
+  'tv-Steps-advance-node-done-bg-color-hover': '#d0d8fd',
+  'tv-Steps-advance-node-doing-bg-color-hover': '#2e8bde',
+  'tv-Steps-name-margin-right': 'var(--ti-common-space-2x)',
+  'tv-Steps-error-bg-color': 'var(--ti-common-bg-primary)',
+  'tv-Steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled)',
+  'tv-Steps-error-icon-color': '#fff'
 }
diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less
index 7a2e0e4bf8..1af9caf898 100644
--- a/packages/theme/src/steps/index.less
+++ b/packages/theme/src/steps/index.less
@@ -23,15 +23,16 @@
 
 .@{steps-prefix-cls},
 .@{timeline-prefix-cls} {
-  .component-css-vars-steps();
+  .inject-Steps-vars();
 }
 
+/** 条形步骤条高级向导场景 */
 .@{steps-senior-prefix-cls} {
   width: 100%;
   display: flex;
-  color: var(--ti-steps-text-color);
-  font-size: var(--ti-steps-font-size-base);
+  font-size: var(--tv-Steps-font-size);
   line-height: 16px;
+  color: var(--tv-Steps-text-color);
 
   .@{steps-prefix-cls}-slide-bar {
     width: 100%;
@@ -122,29 +123,29 @@
   }
 
   .@{steps-prefix-cls}-block {
+    position: relative;
+    margin: 0 1px;
     height: 32px;
     display: flex;
     border-radius: 2px;
-    position: relative;
-    cursor: pointer;
-    color: var(--ti-steps-text-color);
-    margin: 0 1px;
     overflow: hidden;
-    background-color: var(--ti-steps-advanced-default-bg-color);
+    cursor: pointer;
+    color: var(--tv-Steps-text-color);
+    background-color: var(--tv-Steps-advance-node-bg-color);
 
     .right-arrow.hide {
       display: none;
     }
 
     &:hover {
-      background-color: var(--ti-steps-advanced-bg-color-hover);
+      background-color: var(--tv-Steps-advance-node-bg-color-hover);
     }
 
     &.active {
-      background-color: var(--ti-steps-advanced-active-bg-color);
+      background-color: var(--tv-Steps-node-bg-color-active);
 
       &:hover {
-        background-color: var(--ti-steps-done-active-bg-color-hover);
+        background-color: var(--tv-Steps-advance-node-active-bg-color-hover);
       }
     }
 
@@ -152,71 +153,46 @@
       width: 176px;
     }
 
-    &.done {
-      background-color: var(--ti-steps-advanced-done-bg-color);
+    .block-status-mixin(@bgcolor, @hoverBgColor, @activeBgColor) {
+      background-color: @bgcolor;
 
       &:hover {
-        background-color: var(--ti-steps-advanced-done-bg-color-hover);
+        background-color: @hoverBgColor;
       }
 
       &.active {
-        background-color: var(--ti-steps-advanced-active-bg-color);
-      }
-    }
-
-    &.doing {
-      background-color: var(--ti-steps-advanced-doing-bg-color);
-
-      &:hover {
-        color: #fff;
-        background-color: var(--ti-steps-advanced-doing-bg-color-hover);
-      }
-
-      &.active {
-        background-color: var(--ti-steps-advanced-active-bg-color);
+        background-color: @activeBgColor;
 
         &:hover {
-          background-color: var(--ti-steps-advanced-active-bg-color);
+          background-color: @activeBgColor;
         }
       }
     }
-
+    &.done {
+      .block-status-mixin(var(--tv-Steps-advance-node-done-bg-color), var(--tv-Steps-advance-node-done-bg-color-hover), var(--tv-Steps-node-bg-color-active));
+    }
+    &.doing {
+      .block-status-mixin(var(--tv-Steps-advance-node-doing-bg-color), var(--tv-Steps-advance-node-doing-bg-color-hover), var(--tv-Steps-node-bg-color-active));
+    }
     &.fault {
-      background-color: var(--ti-steps-advanced-error-bg-color);
-
-      &:hover {
-        background-color: var(--ti-steps-advanced-error-bg-color-hover);
-      }
-
-      &.active {
-        background-color: var(--ti-steps-advanced-error-bg-color-selected);
-      }
+      .block-status-mixin(var(--tv-Steps-advance-node-error-bg-color), var(--tv-Steps-advance-node-error-bg-color-hover), var(--tv-Steps-advance-node-error-bg-color-active));
     }
-
     &.disabled {
-      color: var(--ti-steps-disabled-icon-color);
-      background-color: var(--ti-steps-advanced-disabled-bg-color);
-
-      &:hover {
-        background-color: var(--ti-steps-advanced-disabled-bg-color-hover);
-      }
-
-      &.active {
-        background-color: var(--ti-steps-advanced-disabled-bg-color-active);
-      }
+      color: var(--tv-Steps-disabled-icon-color);
+      .block-status-mixin(var(--tv-Steps-advance-node-disable-bg-color), var(--tv-Steps-advance-node-disable-bg-color-hover), var(--tv-Steps-advance-node-disable-bg-color-active));
     }
 
     .arrow {
+      position: absolute;
       height: 0;
       width: 0;
-      position: absolute;
+      box-sizing: border-box;
       border-top-width: 16px;
       border-bottom-width: 16px;
       border-left-width: 6px;
       border-right-width: 0;
-      border-color: #fff;
       border-style: solid;
-      box-sizing: border-box;
+      border-color: #fff;
     }
 
     .left-arrow {
@@ -236,15 +212,15 @@
   }
 
   .@{steps-prefix-cls}-content {
-    font-size: 14px;
     flex: auto;
-    display: flex;
+    height: 32px;
     max-width: 100%;
+    padding: 0 24px;
+    font-size: 14px;
+    display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 24px;
     overflow: hidden;
-    height: 32px;
 
     &:hover .@{steps-prefix-cls}-icon.doing {
       background-color: #fff;
@@ -254,32 +230,32 @@
     .@{steps-prefix-cls}-icon {
       width: 16px;
       height: 16px;
+      margin-right: 8px;
       display: flex;
       flex: none;
       align-items: center;
       justify-content: center;
       border-radius: 9999px;
-      margin-right: 8px;
       background-color: #c9c9c9;
       color: #fff;
 
       &.done,
       &.doing {
-        background-color: var(--ti-steps-advanced-active-bg-color);
+        background-color: var(--tv-Steps-node-bg-color-active);
         color: #fff;
       }
 
       &.active:not(.disabled) {
-        color: var(--ti-steps-advanced-active-text-color);
+        color: var(--tv-Steps-advance-active-text-color);
         background-color: #fff;
       }
 
       &.fault {
-        background-color: var(--ti-steps-advanced-error-icon-color);
+        background-color: var(--tv-Steps-advance-error-icon-color);
         color: #fff;
 
         &.active {
-          color: var(--ti-steps-error-icon-color);
+          color: var(--tv-Steps-error-icon-color);
           background-color: #fff;
         }
       }
@@ -357,690 +333,584 @@
       &:not(.active):not(:hover).done,
       &:not(.active):not(:hover).doing {
         .@{steps-prefix-cls}-text-description {
-          color: var(--ti-steps-description-text-color);
+          color: var(--tv-Steps-node-desc-text-color);
         }
       }
     }
   }
 }
 
+/** 单链型场景 */
 .@{steps-line-prefix-cls} {
   display: flex;
-  color: var(--ti-steps-text-color);
+  color: var(--tv-Steps-text-color);
 
-  &.vertical {
-    .@{steps-prefix-cls}-block .description,
-    .@{steps-prefix-cls}-block .line-footer {
-      margin-left: 0;
+  .@{steps-prefix-cls} {
+    &.vertical {
+      .@{steps-prefix-cls}-block .description,
+      .@{steps-prefix-cls}-block .line-footer {
+        margin-left: 0;
+      }
     }
-  }
 
-  .item-number {
-    position: relative;
-    font-size: var(--ti-steps-number-font-size);
-    line-height: 1;
-  }
-
-  .item-circle {
-    width: var(--ti-steps-circle-width-height);
-    height: var(--ti-steps-circle-width-height);
-    flex: none;
-    border-radius: 9999px;
-    border: 1px solid var(--ti-steps-line-bg-color);
-    background-color: #fff;
-    font-weight: 500;
-    position: absolute;
-  }
+    // 所有节点共同默认场景
+    &-left,
+    &-block,
+    &-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
 
-  .@{steps-prefix-cls}-icon {
-    width: var(--ti-steps-circle-width-height);
-    height: var(--ti-steps-circle-width-height);
-    flex: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    z-index: 10;
-    border: 1px solid var(--ti-steps-unselected-border-color);
-    border-radius: 50%;
-  }
+      .@{steps-prefix-cls} {
+        &--main {
+          display: flex;
+          align-items: center;
+          position: relative;
 
-  .@{steps-prefix-cls}-main {
-    display: flex;
-    align-items: center;
-    position: relative;
+          .line.line-brand {
+            border-color: var(--tv-Steps-node-done-border-color);
+          }
+        }
 
-    .line.line-brand {
-      border-color: var(--ti-steps-done-active-border-color);
+        &-icon {
+          position: relative;
+          width: var(--tv-Steps-node-circle-size);
+          height: var(--tv-Steps-node-circle-size);
+          flex: none;
+          display: flex;
+          border: 1px solid var(--tv-Steps-node-border-color);
+          border-radius: 50%;
+          justify-content: center;
+          align-items: center;
+          z-index: 10;
+        }
+      }
     }
-  }
 
-  .@{steps-prefix-cls}-block {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    text-align: center;
-
-    &:not(.active, .fault, .disabled, .doing):hover {
-      .title {
-        color: var(--ti-steps-text-color-hover);
+    // 首节点和中间节点共同默认场景
+    &-left,
+    &-block {
+      .left-line.not-vertical {
+        display: none;
+        margin-right: 16px;
+        min-width: 24px;
       }
 
-      .@{steps-prefix-cls}-icon {
-        border-color: var(--ti-steps-border-color-hover);
-        color: var(--ti-steps-icon-hover-text-color);
+      .right-line.not-vertical {
+        min-width: 24px;
       }
     }
 
-    &.not-vertical {
-      min-width: 128px;
-      max-width: 320px;
-      margin-right: var(--ti-steps-line-margin-horizontal);
-      text-align: left;
-    }
-
-    .@{steps-prefix-cls}-icon {
-      width: var(--ti-steps-circle-width-height);
-      height: var(--ti-steps-circle-width-height);
-      display: flex;
-      flex: none;
-      align-items: center;
-      justify-content: center;
-      border-radius: 9999px;
-      border: 1px solid var(--ti-steps-unselected-border-color);
-      background-color: var(--ti-steps-icon-bg-color);
-      color: var(--ti-steps-unselected-icon-color);
-      font-size: 14px;
-
-      &:hover {
-        background-color: var(--ti-steps-bg-color-hover);
-      }
-
-      &.active {
-        background-color: var(--ti-steps-advanced-active-bg-color);
-        color: #fff;
-        border-color: var(--ti-steps-advanced-active-border-color);
-      }
+    // 中间节点和尾节点共同默认场景
+    &-block,
+    &-right {
+      text-align: center;
 
-      &.active.fault {
-        color: var(--ti-steps-error-text-color);
-        border: 1px solid var(--ti-steps-error-border-color);
-        background-color: var(--ti-steps-error-icon-bg-color);
+      &.not-vertical {
+        min-width: 128px;
+        max-width: 320px;
+        text-align: left;
       }
 
-      &.active.disabled {
-        background-color: var(--ti-steps-disabled-select-icon-bg-color);
-        color: var(--ti-steps-disabled-select-icon-color);
-        border-color: var(--ti-steps-disabled-border-color);
+      .@{steps-prefix-cls}-icon {
+        flex: none;
+        display: flex;
       }
 
-      .icon-finish {
-        fill: var(--ti-steps-done-icon-color);
-
-        &.active {
-          fill: #fff;
-        }
+      .line {
+        border-top: 1px solid var(--tv-Steps-line-bg-color);
+        flex: auto;
       }
 
-      .icon-warn {
-        fill: var(--ti-steps-error-icon-color);
+      .@{steps-prefix-cls}-main {
+        display: flex;
+        align-items: center;
       }
     }
 
-    &.flex-non {
-      flex: none;
-    }
-
-    &.active {
-      div.title,
-      div.title-vertical {
-        color: var(--ti-steps-advanced-active-text-color);
-      }
-
-      .description:not(.disabled, .fault) {
-        color: var(--ti-steps-advanced-desc-active-text-color);
+    // 首尾节点共同默认场景
+    &-left,
+    &-right {
+      .item-number {
+        position: relative;
+        font-size: 14px;
+        line-height: 1;
       }
 
-      .description.fault {
-        color: var(--ti-steps-error-text-color);
+      .item-circle {
+        width: var(--tv-Steps-node-circle-size);
+        height: var(--tv-Steps-node-circle-size);
+        position: absolute;
+        font-weight: 500;
+        flex: none;
+        border-radius: 9999px;
+        border: 1px solid var(--tv-Steps-line-bg-color);
+        background-color: #fff;
       }
-    }
 
-    &.disabled {
-      color: var(--ti-steps-disabled-icon-color);
-      cursor: not-allowed;
+      .@{steps-prefix-cls}-icon {
+        border: none;
 
-      &.active {
-        div.title,
-        div.title-vertical {
-          color: var(--ti-steps-disabled-name-text-color);
+        .item-number {
+          width: var(--tv-Steps-node-circle-size);
+          height: var(--tv-Steps-node-circle-size);
+          flex: none;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          z-index: 10;
+          border: 1px solid var(--tv-Steps-node-border-color);
+          border-radius: 50%;
+          background-color: var(--tv-Steps-node-icon-bg-color);
         }
       }
     }
 
-    &.fault {
-      div.title,
-      div.title-vertical {
-        color: var(--ti-steps-error-text-color);
-      }
-
-      .@{steps-prefix-cls}-icon {
-        color: var(--ti-steps-error-icon-color);
-        border-color: var(--ti-steps-error-border-color);
-        background-color: var(--ti-steps-error-icon-bg-color);
+    // 中间节点默认场景
+    &-block {
+      &:not(.active, .fault, .disabled, .doing):hover {
+        .title {
+          color: var(--tv-Steps-node-title-text-color-hover);
+        }
 
-        &:hover {
-          background-color: var(--ti-steps-error-icon-bg-color-hover);
+        .@{steps-prefix-cls}-icon {
+          border-color: var(--tv-Steps-line-number-border-color-hover);
+          color: var(--tv-Steps-line-number-text-color-hover);
         }
       }
-    }
 
-    &.doing {
+      &.not-vertical {
+        margin-right: var(--tv-Steps-line-margin-horizontal);
+      }
+
       .@{steps-prefix-cls}-icon {
-        border: 1px solid var(--ti-steps-doing-border-color);
-        background-color: var(--ti-steps-doing-icon-bg-color);
-        color: var(--ti-steps-doing-icon-color);
+        font-size: 14px;
+        border-radius: 9999px;
+        background-color: var(--tv-Steps-node-icon-bg-color);
+        color: var(--tv-Steps-unselected-icon-color);
 
         &:hover {
-          border-color: var(--ti-steps-doing-border-color-hover);
+          background-color: var(--tv-Steps-line-number-bg-color-hover);
         }
 
         &.active {
-          border: 1px solid var(--ti-steps-doing-border-color);
-          background-color: var(--ti-steps-advanced-active-bg-color);
-          color: var(--ti-steps-line-active-icon-color);
+          background-color: var(--tv-Steps-node-bg-color-active);
+          color: #fff;
+          border-color: var(--tv-Steps-advance-active-border-color);
         }
-      }
 
-      .right-line {
-        border-color: var(--ti-steps-doing-line-border-color);
-      }
-    }
+        &.active.fault {
+          color: var(--tv-Steps-error-text-color);
+          border: 1px solid var(--tv-Steps-error-border-color);
+          background-color: var(--tv-Steps-error-icon-bg-color);
+        }
 
-    &.done {
-      .title {
-        color: var(--ti-steps-done-text-color);
-      }
+        &.active.disabled {
+          background-color: var(--tv-Steps-line-number-active-bg-color-disabled);
+          color: var(--tv-Steps-line-number-active-text-color-disabled);
+          border-color: var(--tv-Steps-disabled-border-color);
+        }
 
-      .@{steps-prefix-cls}-main .@{steps-prefix-cls}-icon {
-        background-color: var(--ti-steps-done-icon-bg-color);
-        border-color: var(--ti-steps-done-active-border-color);
+        .icon-finish {
+          fill: var(--tv-Steps-done-icon-color);
 
-        &:hover {
-          border-color: var(--ti-steps-done-active-border-color-hover);
+          &.active {
+            fill: #fff;
+          }
         }
 
-        &.active {
-          border-color: var(--ti-steps-advanced-active-border-color);
-          background-color: var(--ti-steps-advanced-active-bg-color);
+        .icon-warn {
+          fill: var(--tv-Steps-error-icon-color);
         }
       }
-    }
-
-    .@{steps-prefix-cls}-icon.disabled {
-      color: var(--ti-steps-disabled-icon-color);
-      background-color: var(--ti-steps-disabled-icon-bg-color);
-      border-color: var(--ti-steps-disabled-border-color);
-    }
 
-    &.block-mini {
-      .title,
-      .description,
-      .line-footer {
-        max-width: 150px;
+      &.flex-non {
+        flex: none;
       }
-    }
-
-    .title,
-    .description,
-    .line-footer {
-      max-width: 250px;
-    }
 
-    .title {
-      font-size: var(--ti-steps-font-size-base);
-      margin-left: var(--ti-steps-text-margin-left);
-      line-height: 1.5;
-      font-weight: 500;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      word-break: break-all;
-    }
+      &.active {
+        div.title,
+        div.title-vertical {
+          color: var(--tv-Steps-advance-active-text-color);
+        }
 
-    .line {
-      border-top: 1px solid var(--ti-steps-line-bg-color);
-      flex: auto;
-    }
+        .description:not(.disabled, .fault) {
+          color: var(--tv-Steps-line-desc-text-color-active);
+        }
 
-    .left-line.acetate {
-      opacity: 0;
-    }
+        .description.fault {
+          color: var(--tv-Steps-error-text-color);
+        }
+      }
 
-    .left-line.not-vertical {
-      display: none;
-      min-width: 24px;
-      margin-left: 16px;
-    }
+      &.disabled {
+        color: var(--tv-Steps-disabled-icon-color);
+        cursor: not-allowed;
 
-    .right-line {
-      &.acetate {
-        opacity: 0;
+        &.active {
+          div.title,
+          div.title-vertical {
+            color: var(--tv-Steps-line-title-text-color-disabled);
+          }
+        }
       }
 
-      &.hide {
-        display: none;
+      .@{steps-prefix-cls}-icon.disabled {
+        color: var(--tv-Steps-disabled-icon-color);
+        background-color: var(--tv-Steps-disabled-icon-bg-color);
+        border-color: var(--tv-Steps-disabled-border-color);
       }
 
-      &.not-vertical {
-        min-width: 24px;
-        margin-left: var(--ti-steps-line-margin-horizontal);
-      }
-    }
+      &.fault {
+        div.title,
+        div.title-vertical {
+          color: var(--tv-Steps-error-text-color);
+        }
 
-    .title-vertical {
-      font-size: 14px;
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin: var(--ti-steps-vertical-title-margin-top) 20px 0;
+        .@{steps-prefix-cls}-icon {
+          color: var(--tv-Steps-error-icon-color);
+          border-color: var(--tv-Steps-error-border-color);
+          background-color: var(--tv-Steps-error-icon-bg-color);
 
-      &.not-vertical {
-        display: none;
-        margin: 0;
+          &:hover {
+            background-color: var(--tv-Steps-line-error-icon-bg-color-hover);
+          }
+        }
       }
-    }
 
-    .description,
-    .line-footer {
-      line-height: 1.5;
-      margin-left: calc(var(--ti-steps-circle-width-height) + var(--ti-steps-text-margin-left));
-    }
+      &.doing {
+        .@{steps-prefix-cls}-icon {
+          border: 1px solid var(--tv-Steps-doing-border-color);
+          background-color: var(--tv-Steps-line-doing-icon-bg-color);
+          color: var(--tv-Steps-line-doing-icon-color);
 
-    .description {
-      font-size: 12px;
-      color: var(--ti-steps-description-text-color);
-      margin-top: var(--ti-steps-vertical-description-margin-top);
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      word-break: break-all;
+          &:hover {
+            border-color: var(--tv-Steps-line-doing-border-color-hover);
+          }
 
-      &.disabled {
-        color: var(--ti-steps-disabled-text-color);
-      }
+          &.active {
+            border: 1px solid var(--tv-Steps-doing-border-color);
+            background-color: var(--tv-Steps-node-bg-color-active);
+            color: var(--tv-Steps-line-doing-active-icon-color);
+          }
+        }
 
-      .fault {
-        color: var(--ti-steps-error-text-color);
-      }
+        .left-line {
+          border-top: 1px solid var(--tv-Steps-line-active-bg-color);
+        }
 
-      &.not-vertical {
-        margin-top: 10px;
+        .right-line {
+          border-color: var(--tv-Steps-line-doing-border-color);
+        }
       }
-    }
 
-    .line-footer {
-      margin-top: 8px;
-    }
+      &.done {
+        .title {
+          color: var(--tv-Steps-done-text-color);
+        }
 
-    &.done .left-line {
-      border-top: 1px solid var(--ti-steps-line-active-bg-color);
-    }
+        .@{steps-prefix-cls}-main .@{steps-prefix-cls}-icon {
+          background-color: var(--tv-Steps-node-done-bg-color);
+          border-color: var(--tv-Steps-node-done-border-color);
 
-    &.done .right-line {
-      border-top: 1px solid var(--ti-steps-line-active-bg-color);
-    }
+          &:hover {
+            border-color: var(--tv-Steps-line-done-border-color-hover);
+          }
 
-    &.doing .left-line {
-      border-top: 1px solid var(--ti-steps-line-active-bg-color);
-    }
+          &.active {
+            border-color: var(--tv-Steps-advance-active-border-color);
+            background-color: var(--tv-Steps-node-bg-color-active);
+          }
+        }
 
-    .@{steps-prefix-cls}-main {
-      display: flex;
-      align-items: center;
-      height: var(--ti-steps-line-title-height);
-    }
+        .left-line {
+          border-top: 1px solid var(--tv-Steps-line-active-bg-color);
+        }
 
-    &.mini {
-      .@{steps-prefix-cls}-icon {
-        width: var(--ti-steps-mini-icon-size);
-        height: var(--ti-steps-mini-icon-size);
-        font-size: var(--ti-steps-mini-number-font-size);
+        .right-line {
+          border-top: 1px solid var(--tv-Steps-line-active-bg-color);
+        }
       }
 
-      .title,
-      .title-vertical {
-        font-size: 12px;
+      &.block-mini {
+        .title,
+        .description,
+        .line-footer {
+          max-width: 150px;
+        }
       }
-    }
 
-    &.small {
-      .@{steps-prefix-cls}-icon {
-        width: var(--ti-steps-small-icon-size);
-        height: var(--ti-steps-small-icon-size);
-        font-size: var(--ti-steps-small-number-font-size);
+      .title,
+      .description,
+      .line-footer {
+        max-width: 250px;
+      }
 
-        .icon {
-          width: 10px;
-          height: 10px;
-        }
+      .title {
+        font-size: var(--tv-Steps-font-size);
+        margin-left: var(--tv-Steps-text-margin-left);
+        line-height: 1.5;
+        font-weight: 500;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
       }
 
-      .title,
-      .title-vertical {
-        font-size: 12px;
+      .left-line.acetate {
+        opacity: 0;
       }
-    }
 
-    &.medium {
-      .@{steps-prefix-cls}-icon {
-        width: var(--ti-steps-circle-width-height);
-        height: var(--ti-steps-circle-width-height);
-        font-size: var(--ti-steps-font-size-base);
+      .right-line {
+        &.acetate {
+          opacity: 0;
+        }
 
-        .icon {
-          width: var(--ti-steps-number-font-size);
-          height: var(--ti-steps-number-font-size);
+        &.hide {
+          display: none;
+        }
+
+        &.not-vertical {
+          margin-left: var(--tv-Steps-line-margin-horizontal);
         }
       }
-    }
 
-    &.large {
-      .@{steps-prefix-cls}-icon {
-        width: 32px;
-        height: 32px;
-        font-size: 16px;
+      .title-vertical {
+        font-size: 14px;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: var(--tv-Steps-line-vertical-title-margin-top) 20px 0;
 
-        .icon {
-          width: 18px;
-          height: 18px;
+        &.not-vertical {
+          display: none;
+          margin: 0;
         }
       }
 
-      .title,
-      .title-vertical {
-        font-size: 16px;
+      .description,
+      .line-footer {
+        line-height: 1.5;
+        margin-left: calc(var(--tv-Steps-node-circle-size) + var(--tv-Steps-text-margin-left));
       }
-    }
-  }
 
-  &.medium .left-line {
-    margin-right: 8px;
-  }
+      .description {
+        font-size: 12px;
+        color: var(--tv-Steps-node-desc-text-color);
+        margin-top: var(--tv-Steps-line-vertical-desc-margin-top);
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
 
-  &.medium .right-line {
-    margin-left: 8px;
-  }
+        &.disabled {
+          color: var(--tv-Steps-disabled-text-color);
+        }
 
-  &.small .left-line {
-    margin-right: 8px;
-  }
+        .fault {
+          color: var(--tv-Steps-error-text-color);
+        }
 
-  &.small .right-line {
-    margin-left: 8px;
-  }
+        &.not-vertical {
+          margin-top: 10px;
+        }
+      }
 
-  &.mini .left-line {
-    margin-right: 4px;
-  }
+      .line-footer {
+        margin-top: 8px;
+      }
 
-  &.mini .right-line {
-    margin-left: 4px;
-  }
+      .@{steps-prefix-cls}-main {
+        height: 42px;
+      }
 
-  &.large .left-line {
-    margin-right: 12px;
-  }
+      /** 尺寸场景 */
+      .block-size-mixin(@size, @iconFontSize, @iconSize, @titleFontSize, @circleSize, @space) {
+        .@{steps-prefix-cls}-icon {
+          width: @size;
+          height: @size;
+          font-size: @iconFontSize;
 
-  &.large .right-line {
-    margin-left: 12px;
-  }
+          .icon {
+            width: @iconSize;
+            height: @iconSize;
+          }
+        }
 
-  .@{steps-prefix-cls}-left,
-  .@{steps-prefix-cls}-right {
-    .@{steps-prefix-cls}-icon {
-      border: none;
+        .title,
+        .title-vertical {
+          font-size: @titleFontSize;
+        }
 
-      .item-number {
-        width: var(--ti-steps-circle-width-height);
-        height: var(--ti-steps-circle-width-height);
-        flex: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        z-index: 10;
-        border: 1px solid var(--ti-steps-unselected-border-color);
-        border-radius: 50%;
-        background-color: var(--ti-steps-icon-bg-color);
-      }
-    }
-  }
+        .item-number {
+          font-size: @titleFontSize;
+        }
 
-  .@{steps-prefix-cls}-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    max-width: 320px;
-    margin-right: 16px;
+        .item-circle {
+          width: @circleSize;
+          height: @circleSize;
+        }
 
-    .@{steps-prefix-cls}-icon {
-      border-color: var();
-    }
+        .left-line {
+          margin-right: @space;
+        }
 
-    &.vertical {
-      text-align: center;
-      margin-right: 0;
-      max-width: initial;
-    }
+        .right-line {
+          margin-left: @space;
+        }
+      }
 
-    .left-line {
-      border-top: 1px solid;
-      flex: auto;
-      opacity: 0;
+      &.mini {
+        .block-size-mixin(var(--tv-Steps-mini-icon-size), var(--tv-Steps-mini-number-font-size), 10px, 12px, 8px, 4px);
+      }
 
-      &.not-vertical {
-        display: none;
-        margin-right: 16px;
-        min-width: 24px;
+      &.small {
+        .block-size-mixin(var(--tv-Steps-icon-small-size), var(--tv-Steps-small-number-font-size), 10px, 12px, 16px, 8px);
       }
-    }
 
-    .right-line {
-      flex: auto;
-      border-top: 1px solid;
+      &.medium {
+        .block-size-mixin(var(--tv-Steps-node-circle-size), var(--tv-Steps-font-size), 14px, 14px, 32px, 8px);
+      }
 
-      &.not-vertical {
-        min-width: 24px;
+      &.large {
+        .block-size-mixin(32px, 16px, 18px, 16px, 32px, 12px);
       }
     }
-  }
 
-  .@{steps-prefix-cls}-right {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    text-align: center;
-
-    &.not-vertical {
-      min-width: 128px;
+    // 首节点
+    &-left {
       max-width: 320px;
-      text-align: left;
-    }
-
-    .@{steps-prefix-cls}-main {
-      display: flex;
-      align-items: center;
-      position: relative;
-    }
-
-    .line {
-      border-top: 1px solid var(--ti-steps-line-bg-color);
-      flex: auto;
-    }
-
-    .line.right-line {
-      opacity: 0;
-    }
+      margin-right: 16px;
 
-    .line.not-vertical {
-      display: none;
-      min-width: 24px;
-      margin-left: 16px;
-    }
+      &.vertical {
+        text-align: center;
+        margin-right: 0;
+        max-width: initial;
+      }
 
-    .@{steps-prefix-cls}-icon {
-      flex: none;
-      display: flex;
-      position: relative;
-      z-index: 10;
-    }
+      .left-line {
+        border-top: 1px solid;
+        flex: auto;
+        opacity: 0;
+      }
 
-    .item-circle {
-      flex: none;
-      border-radius: 9999px;
-      border: 1px solid var(--ti-steps-line-bg-color);
-      background-color: var(--ti-steps-icon-bg-color);
-      font-weight: 500;
-      position: absolute;
+      .right-line {
+        flex: auto;
+        border-top: 1px solid;
+      }
     }
-  }
-
-  &.mini .@{steps-prefix-cls}-icon {
-    width: 8px;
-    height: 8px;
-    font-size: 12px;
-  }
-
-  &.small .@{steps-prefix-cls}-icon {
-    width: 16px;
-    height: 16px;
-    font-size: 12px;
-  }
 
-  &.medium .@{steps-prefix-cls}-icon {
-    width: var(--ti-steps-circle-width-height);
-    height: var(--ti-steps-circle-width-height);
-    font-size: 14px;
-  }
-
-  &.large .@{steps-prefix-cls}-icon {
-    width: 32px;
-    height: 32px;
-    font-size: 16px;
-  }
-
-  &.mini {
-    .item-circle {
-      width: 8px;
-      height: 8px;
-    }
-  }
+    // 尾节点
+    &-right {
+      .@{steps-prefix-cls}-main {
+        position: relative;
+      }
 
-  &.small {
-    .item-circle {
-      width: 16px;
-      height: 16px;
-    }
-  }
+      .line.right-line {
+        opacity: 0;
+      }
 
-  &.medium {
-    .item-circle {
-      width: var(--ti-steps-circle-width-height);
-      height: var(--ti-steps-circle-width-height);
-    }
-  }
+      .line.not-vertical {
+        display: none;
+        min-width: 24px;
+        margin-left: 16px;
+      }
 
-  &.large {
-    .item-number {
-      font-size: 16px;
-    }
+      .@{steps-prefix-cls}-icon {
+        position: relative;
+        z-index: 10;
+      }
 
-    .item-circle {
-      width: 32px;
-      height: 32px;
+      .item-circle {
+        flex: none;
+        border-radius: 9999px;
+        border: 1px solid var(--tv-Steps-line-bg-color);
+        background-color: var(--tv-Steps-node-icon-bg-color);
+        font-weight: 500;
+        position: absolute;
+      }
     }
   }
 }
 
+/** 默认标准型场景 */
 .@{steps-standard-prefix-cls} {
   position: relative;
   font-size: 0;
-  color: var(--ti-steps-timeline-date-time-text-color);
+  color: var(--tv-Steps-timeline-date-time-text-color);
 
   & .@{steps-prefix-cls}-advanced {
     & li {
-      line-height: var(--ti-steps-advanced-line-height);
-      display: inline-block;
-      background: var(--ti-steps-advanced-li-bg-color);
       position: relative;
+      display: inline-block;
+      line-height: var(--tv-Steps-advance-line-height);
+      background: var(--tv-Steps-advance-li-bg-color);
 
       &.current {
         .label {
-          background: var(--ti-steps-advanced-active-bg-color);
-          color: var(--ti-steps-advanced-li-text-color);
           font-weight: bold;
+          background: var(--tv-Steps-node-bg-color-active);
+          color: var(--tv-Steps-advance-li-text-color);
 
           &::after {
-            border-left-color: var(--ti-steps-advanced-active-bg-color);
+            border-left-color: var(--tv-Steps-node-bg-color-active);
           }
         }
       }
 
       .label {
-        border: solid 1px var(--ti-steps-advanced-border-color);
-        border-right: none;
+        position: relative;
         display: block;
+        font-size: var(--tv-Steps-advance-link-font-size);
+        border: solid 1px var(--tv-Steps-advance-border-color);
+        border-right: none;
         text-align: center;
-        position: relative;
         text-decoration: none;
         white-space: nowrap;
-        color: var(--ti-steps-advanced-text-color);
-        font-size: var(--ti-steps-advanced-link-font-size);
+        color: var(--tv-Steps-advance-text-color);
 
         &::after {
           content: '';
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left: 9px solid #fff;
           position: absolute;
           right: 0;
           top: 0;
           transform: translateX(100%);
+          border-top: 14px solid transparent;
+          border-bottom: 14px solid transparent;
+          border-left: 9px solid #fff;
           z-index: 1;
         }
 
         &::before {
           content: '';
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left: 9px solid #d7d8da;
           position: absolute;
           left: 0;
           top: 0;
+          border-top: 14px solid transparent;
+          border-bottom: 14px solid transparent;
+          border-left: 9px solid #d7d8da;
         }
 
         &:hover {
-          background: var(--ti-steps-advanced-li-hover-bg-color);
-          color: var(--ti-steps-advanced-li-hover-text-color);
+          background: var(--tv-Steps-advance-li-hover-bg-color);
+          color: var(--tv-Steps-advance-li-hover-text-color);
           text-decoration: none;
 
           &::after {
-            border-left-color: var(--ti-steps-advanced-li-hover-bg-color);
+            border-left-color: var(--tv-Steps-advance-li-hover-bg-color);
           }
         }
       }
 
       &:first-child {
         .label {
-          border-top-left-radius: var(--ti-steps-advanced-border-radius);
-          border-bottom-left-radius: var(--ti-steps-advanced-border-radius);
+          border-top-left-radius: var(--tv-Steps-advance-border-radius);
+          border-bottom-left-radius: var(--tv-Steps-advance-border-radius);
 
           &::before {
             display: none;
@@ -1050,9 +920,9 @@
 
       &:last-child {
         .label {
-          border-right: solid 1px var(--ti-steps-advanced-border-color);
-          border-top-right-radius: var(--ti-steps-advanced-border-radius);
-          border-bottom-right-radius: var(--ti-steps-advanced-border-radius);
+          border-right: solid 1px var(--tv-Steps-advance-border-color);
+          border-top-right-radius: var(--tv-Steps-advance-border-radius);
+          border-bottom-right-radius: var(--tv-Steps-advance-border-radius);
 
           &::after {
             display: none;
@@ -1061,51 +931,52 @@
       }
 
       .dot {
-        height: var(--ti-steps-advanced-dot-height);
-        width: var(--ti-steps-advanced-dot-width);
-        margin-right: 8px;
-        padding: 0;
+        position: absolute;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
+        margin-right: 8px;
+        padding: 0;
         display: flex;
-        position: absolute;
+        height: var(--tv-Steps-advance-dot-height);
+        width: var(--tv-Steps-advance-dot-width);
 
         svg {
           width: 100%;
           height: 100%;
-          fill: var(--ti-steps-advanced-text-color);
+          fill: var(--tv-Steps-advance-text-color);
         }
       }
 
       &.current .dot svg,
       &.current .dot svg:hover {
-        fill: var(--ti-steps-advanced-li-bg-color);
+        fill: var(--tv-Steps-advance-li-bg-color);
       }
 
       &:hover .dot svg {
-        fill: var(--ti-steps-advanced-text-color);
+        fill: var(--tv-Steps-advance-text-color);
       }
     }
 
     .count {
-      background-color: var(--ti-steps-advanced-count-bg-color);
-      border-radius: var(--ti-steps-advanced-count-border-radius);
-      color: var(--ti-steps-advanced-li-text-color);
+      position: absolute;
+      top: -10px;
+      right: 10px;
       display: inline-block;
-      font-size: var(--ti-steps-advanced-count-font-size);
-      height: var(--ti-steps-advanced-count-height);
-      line-height: var(--ti-steps-advanced-count-height);
+      font-size: var(--tv-Steps-advance-count-font-size);
+      height: var(--tv-Steps-advance-count-height);
+      line-height: var(--tv-Steps-advance-count-height);
       padding: 0 6px;
+      border-radius: var(--tv-Steps-advance-count-border-radius);
       text-align: center;
       white-space: nowrap;
-      position: absolute;
-      top: -10px;
-      right: 10px;
+      background-color: var(--tv-Steps-advance-count-bg-color);
+      color: var(--tv-Steps-advance-li-text-color);
     }
   }
 }
 
+/** 垂直点状型场景 */
 .@{steps-dot-prefix-cls} {
   display: flex;
   flex-direction: column;
@@ -1205,73 +1076,68 @@
   }
 }
 
+/** timline场景 */
 .@{timeline-prefix-cls} {
   position: relative;
 
   .line {
-    background: var(--ti-steps-line-bg-color);
+    background: var(--tv-Steps-line-bg-color);
   }
 
   .icon {
     position: relative;
+    left: calc(50% - var(--tv-Steps-icon-size) / 2);
+    top: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: var(--ti-steps-number-font-size);
-    left: calc(50% - var(--ti-steps-icon-size) / 2);
-    top: 0;
-    width: var(--ti-steps-icon-size);
-    height: var(--ti-steps-icon-size);
-    border: var(--ti-steps-icon-border-width) solid var(--ti-steps-unselected-border-color);
+    font-size: var(--tv-Steps-number-font-size);
+    width: var(--tv-Steps-icon-size);
+    height: var(--tv-Steps-icon-size);
+    padding: 2px;
+    border: var(--tv-Steps-icon-border-width) solid var(--tv-Steps-node-border-color);
     border-radius: 50%;
     box-sizing: border-box;
     overflow: hidden;
-    color: var(--ti-steps-unselected-icon-color);
-    cursor: pointer;
-    background-color: var(--ti-steps-icon-bg-color);
     z-index: 15;
-    padding: 2px;
+    color: var(--tv-Steps-unselected-icon-color);
+    background-color: var(--tv-Steps-node-icon-bg-color);
+    cursor: pointer;
 
     &[class*=~'icon-'] {
-      background-color: var(--ti-steps-custom-icon-bg-color);
+      background-color: var(--tv-Steps-custom-icon-bg-color);
     }
 
-    &.icon-success {
-      border-color: var(--ti-steps-done-active-border-color);
+    /** 图标状态场景 */
+    .timeline-icon-status-mixin(@bgColor, @borderColor, @fill) {
+      background-color: @bgColor;
+      border-color: @borderColor;
 
       .fixicon {
-        fill: var(--ti-steps-done-icon-color);
+        fill: @fill;
       }
     }
-
+    &.icon-success {
+      .timeline-icon-status-mixin( none, var(--tv-Steps-node-done-border-color),var(--tv-Steps-done-icon-color));
+    }
     &.icon-warning {
-      background-color: var(--ti-steps-warning-icon-bg-color);
-      border-color: var(--ti-steps-warning-icon-bg-color);
-
-      .fixicon {
-        fill: var(--ti-steps-warning-icon-color);
-      }
+      .timeline-icon-status-mixin(var(--tv-Steps-warning-icon-bg-color), var(--tv-Steps-warning-icon-bg-color), var(--tv-Steps-warning-icon-color));
     }
-
     &.icon-error {
-      border-color: var(--ti-steps-error-border-color);
-
-      .fixicon {
-        fill: var(--ti-steps-error-icon-color);
-      }
+      .timeline-icon-status-mixin( none, var(--tv-Steps-error-border-color),var(--tv-Steps-error-icon-color));
     }
 
     .fixicon,
     .fixicons {
-      width: var(--ti-steps-custom-icon-width-height);
-      height: var(--ti-steps-custom-icon-width-height);
-      background-color: transparent;
+      width: var(--tv-Steps-custom-icon-size);
+      height: var(--tv-Steps-custom-icon-size);
       padding: 2px;
+      background-color: transparent;
     }
 
     &.fixicons {
-      padding: 0;
       left: 0;
+      padding: 0;
       border: none;
     }
 
@@ -1281,10 +1147,10 @@
   }
 
   .date-time {
+    margin-bottom: 6px;
+    font-size: var(--tv-Steps-time-font-size);
     text-align: center;
-    color: var(--ti-steps-time-text-color);
-    font-size: var(--ti-steps-time-font-size);
-    margin-bottom: var(--ti-steps-time-margin-bottom);
+    color: var(--tv-Steps-time-text-color);
   }
 
   .@{steps-prefix-cls}__node {
@@ -1293,47 +1159,47 @@
 
   .process-done {
     .node-description {
-      color: var(--ti-steps-done-text-color);
+      color: var(--tv-Steps-done-text-color);
     }
 
     .icon {
-      color: var(--ti-steps-done-icon-color);
-      fill: var(--ti-steps-done-icon-color);
-      border-color: var(--ti-steps-done-active-border-color);
-      background-color: var(--ti-steps-done-icon-bg-color);
+      fill: var(--tv-Steps-done-icon-color);
+      border-color: var(--tv-Steps-node-done-border-color);
+      background-color: var(--tv-Steps-node-done-bg-color);
+      color: var(--tv-Steps-done-icon-color);
 
       .icon-yes {
-        fill: var(--ti-steps-done-icon-color);
-        font-size: var(--ti-steps-done-icon-size);
+        font-size: var(--tv-Steps-done-icon-size);
         border-radius: 50%;
+        fill: var(--tv-Steps-done-icon-color);
       }
     }
 
     &.@{timeline-item-prefix-cls} .dot-container .dot {
-      border-color: var(--ti-steps-done-active-border-color);
-      background-color: var(--ti-steps-done-icon-bg-color);
+      border-color: var(--tv-Steps-node-done-border-color);
+      background-color: var(--tv-Steps-node-done-bg-color);
     }
 
     .line,
     &.@{timeline-item-prefix-cls}.timeline .@{timeline-item-prefix-cls}__pillar .line {
-      background-color: var(--ti-steps-line-active-bg-color);
+      background-color: var(--tv-Steps-line-active-bg-color);
     }
   }
 
   .process-current {
     .icon {
-      color: var(--ti-steps-advanced-li-text-color);
-      font-size: var(--ti-steps-font-size-base);
-      border-color: var(--ti-steps-advanced-active-border-color);
-      background: var(--ti-steps-advanced-active-bg-color);
+      font-size: var(--tv-Steps-font-size);
+      border-color: var(--tv-Steps-advance-active-border-color);
+      color: var(--tv-Steps-advance-li-text-color);
+      background: var(--tv-Steps-node-bg-color-active);
 
       .fixicons {
-        fill: var(--ti-steps-advanced-li-text-color);
+        fill: var(--tv-Steps-advance-li-text-color);
       }
     }
 
     &.@{timeline-item-prefix-cls} .dot-container .dot {
-      background-color: var(--ti-steps-advanced-active-bg-color);
+      background-color: var(--tv-Steps-node-bg-color-active);
     }
   }
 
@@ -1342,28 +1208,28 @@
 
     .icon {
       flex-shrink: 0;
-      color: var(--ti-steps-error-icon-color);
-      border-color: var(--ti-steps-error-border-color);
-      background-color: var(--ti-steps-error-bg-color);
+      color: var(--tv-Steps-error-icon-color);
+      border-color: var(--tv-Steps-error-border-color);
+      background-color: var(--tv-Steps-error-bg-color);
 
       .icon-wrap {
         font-size: 0;
       }
 
       svg {
-        fill: var(--ti-steps-error-icon-color);
-        font-size: var(--ti-steps-error-icon-size);
+        font-size: var(--tv-Steps-error-icon-size);
+        fill: var(--tv-Steps-error-icon-color);
       }
     }
 
     &.@{timeline-item-prefix-cls} .dot-container .dot {
-      background-color: var(--ti-steps-error-border-color);
+      background-color: var(--tv-Steps-error-border-color);
     }
 
     &.normal .node-description {
       .name,
       & div.name:hover {
-        color: var(--ti-steps-error-text-color);
+        color: var(--tv-Steps-error-text-color);
       }
     }
   }
@@ -1372,23 +1238,23 @@
     cursor: not-allowed;
 
     .icon {
-      background-color: var(--ti-steps-disabled-icon-bg-color);
-      border-color: var(--ti-steps-disabled-border-color);
+      background-color: var(--tv-Steps-disabled-icon-bg-color);
+      border-color: var(--tv-Steps-disabled-border-color);
 
       .number {
-        color: var(--ti-steps-disabled-icon-color);
+        color: var(--tv-Steps-disabled-icon-color);
       }
     }
 
     &.@{timeline-item-prefix-cls} .dot-container .dot {
-      background-color: var(--ti-steps-disabled-icon-bg-color);
+      background-color: var(--tv-Steps-disabled-icon-bg-color);
     }
 
     &.normal .node-description,
     .@{timeline-item-prefix-cls}__content {
       .name,
       & div.name:hover {
-        color: var(--ti-steps-disabled-text-color);
+        color: var(--tv-Steps-disabled-text-color);
       }
     }
   }
@@ -1398,7 +1264,7 @@
   .process-error {
     .node-description {
       .name:hover {
-        font-weight: var(--ti-steps-font-size-hover);
+        font-weight: var(--tv-Steps-content-font-weight-hover);
       }
     }
   }
@@ -1406,16 +1272,16 @@
   .reverse {
     .process-current {
       .line {
-        background: var(--ti-steps-line-active-bg-color);
+        background: var(--tv-Steps-line-active-bg-color);
       }
     }
   }
 
   & .@{steps-prefix-cls}-normal {
     .normal {
-      display: block;
       position: relative;
-      font-size: var(--ti-steps-font-size-base);
+      display: block;
+      font-size: var(--tv-Steps-font-size);
     }
 
     .icon {
@@ -1425,7 +1291,7 @@
     }
 
     .name {
-      color: var(--ti-steps-timeline-date-time-text-color);
+      color: var(--tv-Steps-timeline-date-time-text-color);
       cursor: pointer;
     }
 
@@ -1448,30 +1314,30 @@
         }
 
         .node-description {
-          display: flex;
           position: relative;
-          margin-left: var(--ti-steps-text-margin-left);
+          margin-left: var(--tv-Steps-text-margin-left);
+          display: flex;
           flex: 1 0 auto;
           align-items: center;
 
           .name {
             display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            margin-right: var(--ti-steps-name-margin-right);
+            margin-right: var(--tv-Steps-name-margin-right);
+            max-width: 250px;
             overflow: hidden;
             text-overflow: ellipsis;
             word-break: break-all;
             white-space: normal;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
             text-align: left;
-            max-width: var(--ti-steps-content-max-width);
           }
         }
 
         .line {
           flex: 1;
-          height: var(--ti-steps-line-height);
-          margin-left: var(--ti-steps-line-margin-horizontal);
+          margin-left: var(--tv-Steps-line-margin-horizontal);
+          height: var(--tv-Steps-line-height);
 
           &.line-end {
             flex: 0;
@@ -1479,7 +1345,7 @@
         }
 
         &:not(:first-child) {
-          padding-left: var(--ti-steps-line-margin-horizontal);
+          padding-left: var(--tv-Steps-line-margin-horizontal);
         }
 
         &:not(:last-child) {
@@ -1497,33 +1363,33 @@
 
       .node-description {
         position: relative;
+        margin-top: var(--tv-Steps-content-margin-top);
         text-align: center;
-        margin-top: var(--ti-steps-content-margin-top);
 
         .name {
-          font-size: var(--ti-steps-font-size-base);
           float: left;
+          font-size: var(--tv-Steps-font-size);
           width: 100%;
           cursor: pointer;
 
           &:hover {
-            color: var(--ti-steps-text-color-hover);
+            color: var(--tv-Steps-node-title-text-color-hover);
           }
         }
 
         .status {
-          font-size: var(--ti-steps-font-size-base);
           float: left;
           width: 100%;
+          font-size: var(--tv-Steps-font-size);
         }
       }
 
       .line {
-        width: calc(100% - var(--ti-steps-icon-size) - var(--ti-steps-line-margin-horizontal) * 2);
-        height: var(--ti-steps-line-height);
-        left: calc(50% + var(--ti-steps-icon-size) / 2 + var(--ti-steps-line-margin-horizontal));
-        top: calc((var(--ti-steps-icon-size) - var(--ti-steps-line-height)) / 2);
         position: absolute;
+        left: calc(50% + var(--tv-Steps-icon-size) / 2 + var(--tv-Steps-line-margin-horizontal));
+        top: calc((var(--tv-Steps-icon-size) - var(--tv-Steps-line-height)) / 2);
+        width: calc(100% - var(--tv-Steps-icon-size) - var(--tv-Steps-line-margin-horizontal) * 2);
+        height: var(--tv-Steps-line-height);
 
         &.line-end {
           width: 0;
@@ -1535,45 +1401,45 @@
       position: absolute;
       bottom: 0;
       transform: translateY(100%);
-      min-width: var(--ti-steps-description-min-width);
+      min-width: 100px;
       text-align: left;
     }
 
     .process-current {
       .node-description .name {
-        color: var(--ti-steps-advanced-active-text-color);
-        font-weight: var(--ti-steps-active-font-weight);
+        font-weight: var(--tv-Steps-active-font-weight);
+        color: var(--tv-Steps-advance-active-text-color);
       }
     }
   }
 
   .show-divider {
     .@{timeline-item-prefix-cls} {
-      padding-bottom: calc(var(--ti-steps-bottom-divider-margin-top) + var(--ti-steps-bottom-divider-height));
+      padding-bottom: calc(var(--tv-Steps-bottom-divider-margin-top) + var(--tv-Steps-bottom-divider-height));
 
       &.process-current {
         &::after {
           content: '';
-          display: inline-block;
           position: absolute;
           bottom: 0;
-          left: calc(var(--ti-steps-line-margin-horizontal) + var(--ti-steps-icon-size) / 2 - 7px);
+          left: calc(var(--tv-Steps-line-margin-horizontal) + var(--tv-Steps-icon-size) / 2 - 7px);
+          display: inline-block;
           border: 7px solid transparent;
           border-top: none;
-          border-bottom-color: var(--ti-steps-advanced-active-bg-color);
+          border-bottom-color: var(--tv-Steps-node-bg-color-active);
         }
       }
 
       &:first-child {
         &.process-current::after {
           content: '';
-          display: inline-block;
           position: absolute;
           bottom: 0;
-          left: calc(var(--ti-steps-icon-size) / 2 - 7px);
+          left: calc(var(--tv-Steps-icon-size) / 2 - 7px);
+          display: inline-block;
           border: 7px solid transparent;
           border-top: none;
-          border-bottom-color: var(--ti-steps-advanced-active-bg-color);
+          border-bottom-color: var(--tv-Steps-node-bg-color-active);
         }
       }
     }
@@ -1581,66 +1447,64 @@
     & + .@{steps-prefix-cls}__bottom-divider {
       position: absolute;
       bottom: 0;
+      margin-top: calc(var(--tv-Steps-bottom-divider-margin-top) - 4px);
       width: 100%;
-      height: var(--ti-steps-bottom-divider-height);
-      margin-top: calc(var(--ti-steps-bottom-divider-margin-top) - 4px);
-      background-color: var(--ti-steps-bottom-divider-bg-color);
+      height: var(--tv-Steps-bottom-divider-height);
+      background-color: var(--tv-Steps-bottom-divider-bg-color);
     }
   }
 
   & .@{steps-prefix-cls}-timeline {
-    font-size: var(--ti-steps-timeline-name-font-size);
-    color: var(--ti-steps-timeline-date-time-text-color);
+    font-size: var(--tv-Steps-timeline-name-font-size);
+    color: var(--tv-Steps-timeline-date-time-text-color);
 
     &.@{timeline-prefix-cls}__shape-dot {
       padding-top: 4px;
 
       .timeline {
         .@{timeline-item-prefix-cls}__pillar .line {
-          width: var(--ti-steps-line-height);
-          margin-top: var(--ti-steps-timeline-line-margin-vertical);
-          background-color: var(--ti-steps-timeline-vertical-line-bg-color);
+          width: var(--tv-Steps-line-height);
+          margin-top: var(--tv-Steps-timeline-line-margin-vertical);
+          background-color: var(--tv-Steps-timeline-vertical-line-bg-color);
         }
 
         .@{timeline-item-prefix-cls}__content {
-          margin-left: var(--ti-steps-timeline-shape-dot-content-margin-left);
+          margin-left: var(--tv-Steps-timeline-shape-dot-content-margin-left);
         }
 
-        &.timeline-item--primary .dot {
-          border-color: var(--ti-steps-timeline-dot-primary-bg-color);
-          background-color: var(--ti-steps-timeline-dot-primary-bg-color);
+        /** timeline状态场景 */
+        .timeline-item-status-mixin(@color) {
+          .dot {
+            border-color: @color;
+            background-color: @color;
+          }
         }
-
-        &.timeline-item--success .dot {
-          border-color: var(--ti-steps-timeline-dot-success-bg-color);
-          background-color: var(--ti-steps-timeline-dot-success-bg-color);
+        &.timeline-item--primary {
+          .timeline-item-status-mixin(var(--tv-Steps-timeline-dot-primary-bg-color));
         }
-
-        &.timeline-item--warning .dot {
-          border-color: var(--ti-steps-timeline-dot-warning-bg-color);
-          background-color: var(--ti-steps-timeline-dot-warning-bg-color);
+        &.timeline-item--success {
+          .timeline-item-status-mixin(var(--tv-Steps-timeline-dot-success-bg-color));
         }
-
-        &.timeline-item--danger .dot {
-          border-color: var(--ti-steps-timeline-dot-danger-bg-color);
-          background-color: var(--ti-steps-timeline-dot-danger-bg-color);
+        &.timeline-item--warning {
+          .timeline-item-status-mixin(var(--tv-Steps-timeline-dot-warning-bg-color));
         }
-
-        &.timeline-item--info .dot {
-          border-color: var(--ti-steps-timeline-dot-info-bg-color);
-          background-color: var(--ti-steps-timeline-dot-info-bg-color);
+        &.timeline-item--danger {
+          .timeline-item-status-mixin(var(--tv-Steps-timeline-dot-danger-bg-color));
+        }
+        &.timeline-item--info {
+          .timeline-item-status-mixin(var(--tv-Steps-timeline-dot-info-bg-color));
         }
 
         .@{timeline-item-prefix-cls}__content {
           line-height: 1.5;
 
           .name {
-            margin-bottom: var(--ti-steps-timeline-item-title-margin-bottom);
+            margin-bottom: var(--tv-Steps-timeline-item-title-margin-bottom);
           }
 
           .time {
-            color: var(--ti-steps-timeline-item-secondary-text-color);
-            font-size: var(--ti-steps-timeline-item-secondary-text-font-size);
+            font-size: var(--tv-Steps-timeline-item-secondary-text-font-size);
+            color: var(--tv-Steps-timeline-item-secondary-text-color);
           }
         }
       }
@@ -1651,11 +1515,11 @@
       align-items: flex-start;
 
       &.process-done {
-        color: var(--ti-steps-done-text-color);
+        color: var(--tv-Steps-done-text-color);
       }
 
       &.process-current {
-        color: var(--ti-steps-advanced-active-text-color);
+        color: var(--tv-Steps-advance-active-text-color);
       }
 
       &:last-child {
@@ -1666,14 +1530,14 @@
 
       .@{timeline-item-prefix-cls}__pillar {
         display: flex;
+        margin-top: 7px;
+        width: var(--tv-Steps-timeline-dot-width);
         flex-direction: column;
         align-items: center;
         align-self: stretch;
-        margin-top: 7px;
-        width: var(--ti-steps-timeline-dot-width);
 
         .line {
-          width: var(--ti-steps-line-height);
+          width: var(--tv-Steps-line-height);
           flex: 1;
 
           .@{css-prefix}svg {
@@ -1687,9 +1551,8 @@
       }
 
       .date-time {
-        width: var(--ti-steps-timeline-vertical-left-width);
-        padding-right: var(--ti-steps-timeline-vertical-line-margin-left);
-        padding-bottom: var(--ti-steps-timeline-item-padding-bottom);
+        padding-right: var(--tv-Steps-timeline-vertical-line-margin-left);
+        padding-bottom: var(--tv-Steps-timeline-item-padding-bottom);
         text-align: right;
 
         .time {
@@ -1705,7 +1568,6 @@
       }
 
       .dot-container {
-        padding: var(--ti-steps-timeline-dot-margin-bottom);
         position: relative;
 
         .fixicons {
@@ -1715,17 +1577,17 @@
 
       .dot {
         display: block;
-        width: var(--ti-steps-timeline-dot-width);
-        height: var(--ti-steps-timeline-dot-width);
-        border: 1px solid var(--ti-steps-timeline-dot-border-color);
+        width: var(--tv-Steps-timeline-dot-width);
+        height: var(--tv-Steps-timeline-dot-width);
+        border: 1px solid var(--tv-Steps-timeline-dot-border-color);
         border-radius: 50%;
         box-sizing: border-box;
-        background-color: var(--ti-steps-timeline-dot-bg-color);
+        background-color: var(--tv-Steps-timeline-dot-bg-color);
       }
 
       .@{timeline-item-prefix-cls}__content {
-        padding-bottom: var(--ti-steps-timeline-item-padding-bottom);
-        margin-left: var(--ti-steps-timeline-vertical-line-margin-right);
+        padding-bottom: var(--tv-Steps-timeline-item-padding-bottom);
+        margin-left: var(--tv-Steps-timeline-vertical-line-margin-right);
       }
 
       .icon {
@@ -1736,8 +1598,8 @@
 
   &--mini {
     .icon {
-      width: var(--ti-steps-mini-icon-size);
-      height: var(--ti-steps-mini-icon-size);
+      width: var(--tv-Steps-mini-icon-size);
+      height: var(--tv-Steps-mini-icon-size);
     }
 
     .@{css-prefix}svg,
@@ -1745,13 +1607,13 @@
     .process-done .icon .@{css-prefix}svg,
     .process-done .icon span,
     .process-error .icon .@{css-prefix}svg {
-      font-size: var(--ti-steps-mini-number-font-size);
+      font-size: var(--tv-Steps-mini-number-font-size);
     }
 
     .node-description {
       .name,
       .status {
-        font-size: var(--ti-steps-mini-font-size-base);
+        font-size: var(--tv-Steps-mini-font-size-base);
       }
     }
   }
diff --git a/packages/theme/src/steps/old-theme.js b/packages/theme/src/steps/old-theme.js
index 4da29c412b..09ecdf1dd4 100644
--- a/packages/theme/src/steps/old-theme.js
+++ b/packages/theme/src/steps/old-theme.js
@@ -1,44 +1,43 @@
 export const tinyStepsOldTheme = {
-  'ti-steps-timeline-dot-primary-bg-color': 'var(--ti-steps-timeline-dot-bg-color)',
-  'ti-steps-timeline-item-secondary-text-font-size': 'var(--ti-common-font-size-base, 12px)',
-  'ti-steps-timeline-item-padding-bottom': 'var(--ti-common-size-5x, 20px)',
-  'ti-steps-timeline-dot-bg-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
-  'ti-steps-timeline-dot-border-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
-  'ti-steps-timeline-shape-dot-content-margin-left': 'var(--ti-common-size-3x, 12px)',
-  'ti-steps-timeline-vertical-line-margin-left': 'var(--ti-common-size-3x, 12px)',
-  'ti-steps-timeline-line-margin-vertical': 'var(--ti-common-size-base, 4px)',
-  'ti-steps-timeline-date-time-font-size': 'var(--ti-common-font-size-base, 12px)',
-  'ti-steps-advanced-count-font-size': 'var(--ti-common-font-size-base, 12px)',
-  'ti-steps-advanced-count-bg-color': 'var(--ti-common-bg-primary, #c7000b)',
-  'ti-steps-advanced-link-font-size': 'var(--ti-common-font-size-base, 12px)',
-  'ti-steps-advanced-li-text-color': 'var(--ti-common-color-selected-text-color, #fff)',
-  'ti-steps-mini-font-size-base': 'var(--ti-common-font-size-base, 12px)',
-  'ti-steps-mini-number-font-size': 'var(--ti-common-font-size-base, 12px)',
-  'ti-steps-disabled-select-icon-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
-  'ti-steps-disabled-select-icon-bg-color': 'var(--ti-common-color-bg-white-normal, #fff)',
-  'ti-steps-disabled-name-text-color': 'var(--ti-common-color-text-disabled, #adb0b8)',
-  'ti-steps-disabled-border-color': 'var(--ti-steps-disabled-icon-color)',
-  'ti-steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)',
-  'ti-steps-error-icon-size': 'var(--ti-common-font-size-1, 14px)',
-  'ti-steps-timeline-date-time-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
-  'ti-steps-unselected-border-color': 'var(--ti-steps-unselected-icon-color)',
-  'ti-steps-doing-line-border-color': 'var(--ti-common-color-bg-secondary, #adb0b8)',
-  'ti-steps-line-bg-color': 'var(--ti-common-color-bg-secondary, #adb0b8)',
-  'ti-steps-done-icon-size': 'var(--ti-common-font-size-1, 14px)',
-  'ti-steps-done-icon-color': 'var(--ti-common-color-icon-active, #5e7ce0)',
-  'ti-steps-line-active-bg-color': 'var(--ti-common-color-line-active, #5e7ce0)',
-  'ti-steps-done-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
-  'ti-steps-advanced-desc-active-text-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
-  'ti-steps-active-font-weight': 'var(--ti-common-font-weight-4, normal)',
-  'ti-steps-custom-icon-width-height': 'var(--ti-common-space-6x, 24px)',
-  'ti-steps-vertical-title-margin-top': 'var(--ti-common-space-3x, 12px)',
-  'ti-steps-description-text-color': 'var(--ti-common-color-text-secondary, #575d6c)',
-  'ti-steps-bottom-divider-margin-top': 'var(--ti-common-space-4x, 16px)',
-  'ti-steps-content-margin-top': 'var(--ti-common-space-6, 6px)',
-  'ti-steps-text-margin-left': 'var(--ti-common-space-base, 4px)',
-  'ti-steps-icon-hover-text-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
-  'ti-steps-icon-size': 'var(--ti-common-size-5x, 20px)',
-  'ti-steps-text-color-hover': 'var(--ti-common-color-primary-normal, #5e7ce0)',
-  'ti-steps-font-size-hover': 'var(--ti-common-font-weight-4, normal)',
-  'ti-steps-circle-width-height': 'var(--ti-common-size-5x, 20px)'
+  'tv-Steps-timeline-dot-primary-bg-color': 'var(--tv-Steps-timeline-dot-bg-color)',
+  'tv-Steps-timeline-item-secondary-text-font-size': 'var(--ti-common-font-size-base, 12px)',
+  'tv-Steps-timeline-item-padding-bottom': 'var(--ti-common-size-5x, 20px)',
+  'tv-Steps-timeline-dot-bg-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
+  'tv-Steps-timeline-dot-border-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
+  'tv-Steps-timeline-shape-dot-content-margin-left': 'var(--ti-common-size-3x, 12px)',
+  'tv-Steps-timeline-vertical-line-margin-left': 'var(--ti-common-size-3x, 12px)',
+  'tv-Steps-timeline-line-margin-vertical': 'var(--ti-common-size-base, 4px)',
+  'tv-Steps-advance-count-font-size': 'var(--ti-common-font-size-base, 12px)',
+  'tv-Steps-advance-count-bg-color': 'var(--ti-common-bg-primary, #c7000b)',
+  'tv-Steps-advance-link-font-size': 'var(--ti-common-font-size-base, 12px)',
+  'tv-Steps-advance-li-text-color': 'var(--ti-common-color-selected-text-color, #fff)',
+  'tv-Steps-mini-font-size-base': 'var(--ti-common-font-size-base, 12px)',
+  'tv-Steps-mini-number-font-size': 'var(--ti-common-font-size-base, 12px)',
+  'tv-Steps-line-number-active-text-color-disabled': 'var(--ti-common-color-text-disabled, #adb0b8)',
+  'tv-Steps-line-number-active-bg-color-disabled': 'var(--ti-common-color-bg-white-normal, #fff)',
+  'tv-Steps-line-title-text-color-disabled': 'var(--ti-common-color-text-disabled, #adb0b8)',
+  'tv-Steps-disabled-border-color': 'var(--tv-Steps-disabled-icon-color)',
+  'tv-Steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)',
+  'tv-Steps-error-icon-size': 'var(--ti-common-font-size-1, 14px)',
+  'tv-Steps-timeline-date-time-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
+  'tv-Steps-node-border-color': 'var(--tv-Steps-unselected-icon-color)',
+  'tv-Steps-line-doing-border-color': 'var(--ti-common-color-bg-secondary, #adb0b8)',
+  'tv-Steps-line-bg-color': 'var(--ti-common-color-bg-secondary, #adb0b8)',
+  'tv-Steps-done-icon-size': 'var(--ti-common-font-size-1, 14px)',
+  'tv-Steps-done-icon-color': 'var(--ti-common-color-icon-active, #5e7ce0)',
+  'tv-Steps-line-active-bg-color': 'var(--ti-common-color-line-active, #5e7ce0)',
+  'tv-Steps-done-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
+  'tv-Steps-line-desc-text-color-active': 'var(--ti-common-color-primary-normal, #5e7ce0)',
+  'tv-Steps-active-font-weight': 'var(--ti-common-font-weight-4, normal)',
+  'tv-Steps-custom-icon-size': 'var(--ti-common-space-6x, 24px)',
+  'tv-Steps-line-vertical-title-margin-top': 'var(--ti-common-space-3x, 12px)',
+  'tv-Steps-node-desc-text-color': 'var(--ti-common-color-text-secondary, #575d6c)',
+  'tv-Steps-bottom-divider-margin-top': 'var(--ti-common-space-4x, 16px)',
+  'tv-Steps-content-margin-top': 'var(--ti-common-space-6, 6px)',
+  'tv-Steps-text-margin-left': 'var(--ti-common-space-base, 4px)',
+  'tv-Steps-line-number-text-color-hover': 'var(--ti-common-color-primary-normal, #5e7ce0)',
+  'tv-Steps-icon-size': 'var(--ti-common-size-5x, 20px)',
+  'tv-Steps-node-title-text-color-hover': 'var(--ti-common-color-primary-normal, #5e7ce0)',
+  'tv-Steps-content-font-weight-hover': 'var(--ti-common-font-weight-4, normal)',
+  'tv-Steps-node-circle-size': 'var(--ti-common-size-5x, 20px)'
 }
diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less
index 25823dd183..6517a7454f 100644
--- a/packages/theme/src/steps/vars.less
+++ b/packages/theme/src/steps/vars.less
@@ -10,283 +10,248 @@
 *
 */
 
-.component-css-vars-steps() {
+.inject-Steps-vars() {
+  // 节点默认文本字号
+  --tv-Steps-font-size: var(--tv-font-size-md, 14px);
+  // 节点默认文本色
+  --tv-Steps-text-color: var(--tv-color-text, #191919);
+  // 当前节点背景色
+  --tv-Steps-node-bg-color-active: var(--tv-color-bg-primary, #191919);
+  // 禁用节点序号文本色
+  --tv-Steps-disabled-icon-color: var(--tv-color-text-disabled, #c2c2c2);
+  // 描述信息文本色
+  --tv-Steps-node-desc-text-color: var(--tv-color-text-weaken, #808080);
   // 节点圆圈尺寸
-  --ti-steps-circle-width-height: var(--ti-common-size-height-normal, 32px);
-  // 序号字号
-  --ti-steps-number-font-size: var(--ti-common-font-size-base, 14px);
-  // 节点内容字号
-  --ti-steps-font-size-base: var(--ti-common-font-size-base, 14px);
-  // 节点标题高度
-  --ti-steps-line-title-height: 42px;
-  // 节点内容悬浮字号
-  --ti-steps-font-size-hover: var(--ti-common-font-weight-bold, 600);
-  // 节点文本色
-  --ti-steps-text-color: var(--ti-common-color-text-primary, #191919);
-  // 节点内容悬浮背景色
-  --ti-steps-bg-color-hover: var(--ti-common-color-bg-white-normal, #ffffff);
-  // 节点内容悬浮边框色
-  --ti-steps-border-color-hover: var(--ti-common-color-line-active, #191919);
-  // 节点内容悬浮字体色
-  --ti-steps-text-color-hover: var(--ti-common-color-text-primary, #191919);
+  --tv-Steps-node-circle-size: var(--tv-size-height-md, 32px);
+  // 已完成节点边框色
+  --tv-Steps-node-done-border-color: var(--tv-color-border-active, #191919);
+  // 已完成节点背景色
+  --tv-Steps-node-done-bg-color: var(--tv-color-bg-active-secondary, #ffffff);
+  // 高级向导当前项和计数标记点的文本色
+  --tv-Steps-advance-li-text-color: var(--tv-color-text-white, #fff);
+
+  // 节点内容悬浮文本色
+  --tv-Steps-node-title-text-color-hover: var(--tv-color-text, #191919);
   // 序号圆圈大小
-  --ti-steps-icon-size: var(--ti-common-size-height-normal, 32px);
-  // 序号悬浮字体色
-  --ti-steps-icon-hover-text-color: var(--ti-common-color-text-primary, #191919);
-  // 步骤条字号(hide)
-  --ti-steps-font-size-7: var(--ti-common-font-size-7, 36px);
+  --tv-Steps-icon-size: var(--tv-size-height-md, 32px);
   // 节点间横线厚度
-  --ti-steps-line-height: var(--ti-common-border-weight-normal, 1px);
+  --tv-Steps-line-height: var(--tv-border-width, 1px);
   // 节点间横线水平边距
-  --ti-steps-line-margin-horizontal: var(--ti-common-space-2x, 8px);
-  // 节点间横线最小宽度
-  --ti-steps-line-min-width: var(--ti-common-space-4x, 16px);
+  --tv-Steps-line-margin-horizontal: var(--tv-space-md, 8px);
   // 节点内容左边距
-  --ti-steps-text-margin-left: var(--ti-common-space-2x, 8px);
-  // 节点间横线默认长度
-  --ti-steps-line-width: var(--ti-common-size-16x, 64px);
-  // 节点文本内容最大宽度
-  --ti-steps-content-max-width: calc(var(--ti-common-space-10, 10px) * 25);
-  // 节点文本内容上边距
-  --ti-steps-content-margin-top: var(--ti-common-space-2x, 8px);
-  // 底部分割线厚度
-  --ti-steps-bottom-divider-height: var(--ti-common-space-1, 1px);
-  // 底部分割线与主体间距
-  --ti-steps-bottom-divider-margin-top: calc(var(--ti-common-space-6x, 24px) + 1px);
-  // 底部分割线的颜色
-  --ti-steps-bottom-divider-bg-color: var(--ti-common-color-line-dividing, #f0f0f0);
-  // 描述信息字号
-  --ti-steps-description-font-size: var(--ti-common-font-size-base, 14px);
-  // 描述信息字体色
-  --ti-steps-description-text-color: var(--ti-common-color-text-weaken, #808080);
-  // 描述信息最小宽度
-  --ti-steps-description-min-width: calc(var(--ti-common-space-10, 10px) * 10);
-  // 垂直单链型节点标题上边距
-  --ti-steps-vertical-title-margin-top: var(--ti-common-space-2x, 8px);
-  // 垂直单链型节点描述上边距
-  --ti-steps-vertical-description-margin-top: var(--ti-common-space-2x, 8px);
-  // 图标边框宽度
-  --ti-steps-icon-border-width: var(--ti-common-space-1, 1px);
-  // 自定义图标背景色
-  --ti-steps-custom-icon-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
-  // 自定义图标大小(hide)
-  --ti-steps-custom-icon-width-height: var(--ti-common-space-5x, 20px);
-
-  // 活跃节点背景色
-  --ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize, #191919);
-  // 活跃节点悬浮背景色
-  --ti-steps-done-active-bg-color-hover: var(--ti-common-color-primary-hover, #595959);
+  --tv-Steps-text-margin-left: var(--tv-space-md, 8px);
   // 活跃节点边框色
-  --ti-steps-advanced-active-border-color: var(--ti-common-color-line-active, #191919);
-  // 活跃节点序号图标色
-  --ti-steps-line-active-icon-color: var(--ti-common-color-icon-white, #fff);
-  // 活跃节点字重
-  --ti-steps-active-font-weight: var(--ti-common-font-weight-6, 600);
-  // 活跃节点内容字体色
-  --ti-steps-advanced-active-text-color: var(--ti-common-color-primary-normal, #191919);
-  // 活跃节点内容描述字体色
-  --ti-steps-advanced-desc-active-text-color: var(--ti-common-color-text-weaken, #808080);
-
+  --tv-Steps-advance-active-border-color: var(--tv-color-border-active, #191919);
+  // 活跃节点内容文本色
+  --tv-Steps-advance-active-text-color: var(--tv-color-text, #191919);
   // 已完成节点文本色
-  --ti-steps-done-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-Steps-done-text-color: var(--tv-color-text, #191919);
   // 已完成节点线条色
-  --ti-steps-line-active-bg-color: var(--ti-common-color-dash-line-normal, #191919);
-  // 已完成节点边框色
-  --ti-steps-done-active-border-color: var(--ti-common-color-line-active, #191919);
-  // 已完成节点悬浮边框色
-  --ti-steps-done-active-border-color-hover: var(--ti-common-color-primary-hover, #595959);
-  // 已完成节点图标(或文本)色
-  --ti-steps-done-icon-color: var(--ti-common-color-text-primary, #191919);
-  // 已完成节点图标大小
-  --ti-steps-done-icon-size: var(--ti-common-font-size-4, 20px);
-  // 已完成节点背景色
-  --ti-steps-done-icon-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
-  // 已完成节点图标大小
-  --ti-steps-done-icon-size: var(--ti-common-font-size-1, 14px);
-
+  --tv-Steps-line-active-bg-color: var(--tv-color-bg-active-primary, #191919);
+  // 已完成节点图标色
+  --tv-Steps-done-icon-color: var(--tv-color-icon-active, #191919);
   // 未完成的线条色
-  --ti-steps-line-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
-  // doing状态线条色
-  --ti-steps-doing-line-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
+  --tv-Steps-line-bg-color: var(--tv-color-border-divider, #f0f0f0);
   // 未完成节点的背景色
-  --ti-steps-icon-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
+  --tv-Steps-node-icon-bg-color: var(--tv-color-bg-secondary, #ffffff);
   // 未完成节点序号图标色
-  --ti-steps-unselected-icon-color: var(--ti-common-color-icon-normal, #808080);
-  // 未完成节点序号悬浮图标色
-  --ti-steps-unselected-hover-icon-color: var(--ti-common-color-icon-hover, #191919);
-  // 未完成节点序号悬浮名称字体色
-  --ti-steps-unselected-hover-name-text-color: var(--ti-common-color-icon-hover, #191919);
+  --tv-Steps-unselected-icon-color: var(--tv-color-icon, #808080);
   // 未完成节点边框色
-  --ti-steps-unselected-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
-  // 未完成节点悬浮边框色
-  --ti-steps-unselected-hover-border-color: var(--ti-steps-unselected-hover-icon-color);
+  --tv-Steps-node-border-color: var(--tv-color-border-divider-short, #dbdbdb);
   // 未完成节点内容文本色
-  --ti-steps-timeline-date-time-text-color: var(--ti-common-color-text-primary, #191919);
-
-  // 处理中节点边框色
-  --ti-steps-doing-border-color: var(--ti-common-color-line-active, #191919);
-  // 处理中节点悬浮边框色
-  --ti-steps-doing-border-color-hover: var(--ti-common-color-primary-hover, #595959);
-  // 处理中节点图标(或文本)色
-  --ti-steps-doing-icon-color: var(--ti-common-color-icon-active, #191919);
-  // 处理中节点序号背景色
-  --ti-steps-doing-icon-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
-
-  // 警告节点图标色
-  --ti-steps-warning-icon-color: var(--ti-common-color-bg-white-normal, #ffffff);
-  // 警告节点背景色(hide)
-  --ti-steps-warning-icon-bg-color: var(--ti-common-color-warn, #ff8800);
-
+  --tv-Steps-timeline-date-time-text-color: var(--tv-color-text, #191919);
   // 错误节点的背景色
-  --ti-steps-error-icon-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
-  // 错误节点悬浮背景色
-  --ti-steps-error-icon-bg-color-hover: var(--ti-common-color-error-bg, #fce3e1);
+  --tv-Steps-error-icon-bg-color: var(--tv-color-bg-secondary, #ffffff);
   // 错误节点图标色
-  --ti-steps-error-icon-color: var(--ti-common-color-error-text, #f23030);
-  // 错误节点图标大小
-  --ti-steps-error-icon-size: var(--ti-common-font-size-2, 16px);
+  --tv-Steps-error-icon-color: var(--tv-color-error-icon, #f23030);
   // 错误节点边框色
-  --ti-steps-error-border-color: var(--ti-common-color-error-border, #f23030);
+  --tv-Steps-error-border-color: var(--tv-color-error-border, #f23030);
   // 错误节点描述文本色
-  --ti-steps-error-text-color: var(--ti-common-color-error-text, #f23030);
-
+  --tv-Steps-error-text-color: var(--tv-color-error-text, #f23030);
   // 禁用节点的背景色
-  --ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
-  // 禁用节点序号文本色
-  --ti-steps-disabled-icon-color: var(--ti-common-color-text-disabled, #c2c2c2);
+  --tv-Steps-disabled-icon-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
   // 禁用节点边框色
-  --ti-steps-disabled-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
+  --tv-Steps-disabled-border-color: var(--tv-color-border-disabled, #dbdbdb);
   // 禁用节点描述文本色
-  --ti-steps-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
-  // 禁用节点名称文本色
-  --ti-steps-disabled-name-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
-  // 禁用节点选中背景色
-  --ti-steps-disabled-select-icon-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
-  // 禁用节点选中序号文本色
-  --ti-steps-disabled-select-icon-color: var(--ti-common-color-text-disabled, #c2c2c2);
-
+  --tv-Steps-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
   // mini尺寸序号圆圈大小
-  --ti-steps-mini-icon-size: var(--ti-common-font-size-2, 16px);
+  --tv-Steps-mini-icon-size: var(--tv-icon-size, 16px);
   // mini尺寸序号字号
-  --ti-steps-mini-number-font-size: var(--ti-common-font-size-0, 12px);
-  // mini尺寸节点内容字号
-  --ti-steps-mini-font-size-base: var(--ti-common-font-size-0, 12px);
-
+  --tv-Steps-mini-number-font-size: var(--tv-font-size-sm, 12px);
   // small尺寸序号圆圈大小
-  --ti-steps-small-icon-size: var(--ti-common-font-size-5, 24px);
+  --tv-Steps-icon-small-size: calc(var(--tv-space-base, 4px) * 6);
   // small尺寸序号字号
-  --ti-steps-small-number-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Steps-small-number-font-size: var(--tv-font-size-md, 14px);
+
+  /** 条形步骤条高级向导场景 */
+  // 高级向导节点背景色
+  --tv-Steps-advance-node-bg-color: var(--tv-color-bg, #f5f5f5);
+  // 高级向导节点悬浮背景色
+  --tv-Steps-advance-node-bg-color-hover: #dfe1e6;
+  // 高级向导选中节点悬浮背景色
+  --tv-Steps-advance-node-active-bg-color-hover: var(--tv-color-bg-hover-primary, #595959);
+  // 高级向导已完成节点背景色
+  --tv-Steps-advance-node-done-bg-color: var(--tv-color-bg-header, #f0f0f0);
+  // 高级向导已完成节点悬浮背景色
+  --tv-Steps-advance-node-done-bg-color-hover: #7693f5;
+  // 高级向导进行中节点背景色
+  --tv-Steps-advance-node-doing-bg-color: var(--tv-color-bg-header, #f0f0f0);
+  // 高级向导已完成节点悬浮背景色
+  --tv-Steps-advance-node-doing-bg-color-hover: #7693f5;
+  // 高级向导异常节点背景色
+  --tv-Steps-advance-node-error-bg-color: var(--tv-color-error-bg-light, #fce3e1);
+  // 高级向导异常节点悬浮背景色
+  --tv-Steps-advance-node-error-bg-color-hover: var(--tv-color-error-bg-light, #fce3e1);
+  // 高级向导异常节点选中背景色
+  --tv-Steps-advance-node-error-bg-color-active: #de504e;
+  // 高级向导异常节点图标色
+  --tv-Steps-advance-error-icon-color: var(--tv-color-error-icon, #f23030);
+  // 高级向导禁用节点背景色
+  --tv-Steps-advance-node-disable-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
+  // 高级向导禁用节点悬浮背景色
+  --tv-Steps-advance-node-disable-bg-color-hover: var(--tv-color-bg-disabled, #f0f0f0);
+  // 高级向导禁用节点点击背景色
+  --tv-Steps-advance-node-disable-bg-color-active: var(--tv-color-bg-disabled, #f0f0f0);
+
+  /** 单链型场景 */
+  // 单链型序号悬浮边框色
+  --tv-Steps-line-number-border-color-hover: var(--tv-color-border-hover, #191919);
+  // 单链型序号悬浮文本色
+  --tv-Steps-line-number-text-color-hover: var(--tv-color-text, #191919);
+  // 单链型序号悬浮背景色
+  --tv-Steps-line-number-bg-color-hover: var(--tv-color-bg-secondary, #ffffff);
+  // 单链型序号禁用选中背景色
+  --tv-Steps-line-number-active-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
+  // 单链型序号禁用选中文本色
+  --tv-Steps-line-number-active-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
+  // 单链型选中节点描述文本色
+  --tv-Steps-line-desc-text-color-active: var(--tv-color-text-weaken, #808080);
+  // 单链型节点名称禁用文本色
+  --tv-Steps-line-title-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
+  // 单链型错误节点悬浮背景色
+  --tv-Steps-line-error-icon-bg-color-hover: var(--tv-color-error-bg-light, #fce3e1);
+  // 单链型处理中节点序号背景色
+  --tv-Steps-line-doing-icon-bg-color: var(--tv-color-act-primary-bg-white-active, #ffffff);
+  // 单链型处理中节点边框色
+  --tv-Steps-doing-border-color: var(--tv-color-border-active, #191919);
+  // 单链型处理中节点图标文本色
+  --tv-Steps-line-doing-icon-color: var(--tv-color-text, #191919);
+  // 单链型处理中节点悬浮边框色
+  --tv-Steps-line-doing-border-color-hover: var(--tv-color-act-primary-border-hover, #595959);
+  // 单链型处理中线条色
+  --tv-Steps-line-doing-border-color: var(--tv-color-border-divider-short, #dbdbdb);
+  // 单链型活跃节点序号图标色
+  --tv-Steps-line-doing-active-icon-color: var(--tv-color-icon-white, #fff);
+  // 单链型已完成节点悬浮边框色
+  --tv-Steps-line-done-border-color-hover: var(--tv-color-border-secondary, #595959);
+  // 垂直单链型节点标题上边距
+  --tv-Steps-line-vertical-title-margin-top: var(--tv-space-md, 8px);
+  // 垂直单链型节点描述上边距
+  --tv-Steps-line-vertical-desc-margin-top: var(--tv-space-md, 8px);
 
-  // 向导步骤条边框色
-  --ti-steps-advanced-border-color: var(--ti-common-color-line-normal, #c2c2c2);
-  // 向导步骤条未选中项文本色
-  --ti-steps-advanced-text-color: var(--ti-common-color-text-secondary, #595959);
-  // 向导步骤条行高
-  --ti-steps-advanced-line-height: var(--ti-common-size-7x, 28px);
-  // 向导步骤条边框圆角
-  --ti-steps-advanced-border-radius: calc(var(--ti-common-space-1, 1px) * 3);
-  // 向导步骤条未选中项背景色
-  --ti-steps-advanced-li-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
-  // 向导步骤条当前项和计数标记点的文本色
-  --ti-steps-advanced-li-text-color: var(--ti-common-color-text-white, #fff);
-  // 向导步骤条节点悬浮文本色
-  --ti-steps-advanced-li-hover-text-color: var(--ti-common-color-text-secondary, #595959);
-  // 向导步骤条节点悬浮背景色
-  --ti-steps-advanced-li-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f0f0f0);
-  // 向导步骤条字号
-  --ti-steps-advanced-link-font-size: var(--ti-common-font-size-0, 12px);
-  // 向导步骤条节点里的图标高度
-  --ti-steps-advanced-dot-height: var(--ti-common-size-3x, 12px);
-  // 向导步骤条节点里的图标宽度
-  --ti-steps-advanced-dot-width: var(--ti-common-size-3x, 12px);
-  // 向导步骤条计数标记点背景色
-  --ti-steps-advanced-count-bg-color: #c7000b;
-  // 向导步骤条计数标记点边框圆角
-  --ti-steps-advanced-count-border-radius: var(--ti-common-space-10, 10px);
-  // 向导步骤条计数标记点字号
-  --ti-steps-advanced-count-font-size: var(--ti-common-font-size-0, 12px);
-  // 向导步骤条计数标记点高度
-  --ti-steps-advanced-count-height: calc(var(--ti-common-space-6, 6px) * 3);
-  // 向导步骤条厚度(hide)
-  --ti-steps-advanced-border-weight: calc(var(--ti-common-space-base, 4px) * 3.5);
-  // 时间线时间字号(hide)
-  --ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-0, 12px);
-  // 向导步骤条正在处理节点背景色(hide)
-  --ti-steps-advanced-dot-doing-bg-color: var(--ti-common-color-warn, #ff8800);
-  // 向导步骤条待处理节点背景色(hide)
-  --ti-steps-advanced-dot-wait-bg-color: var(--ti-common-color-success-normal, #5cb300);
-  // 向导步骤条已完成节点背景色(hide)
-  --ti-steps-advanced-dot-done-bg-color: var(--ti-common-color-success-normal, #5cb300);
-  // 向导步骤条默认背景色
-  --ti-steps-advanced-default-bg-color: var(--ti-common-color-bg-normal, #f5f5f5);
-  // 向导步骤条悬浮背景色
-  --ti-steps-advanced-bg-color-hover: #dfe1e6;
-  // 向导步骤条已完成节点背景色
-  --ti-steps-advanced-done-bg-color: var(--ti-common-color-bg-light-normal, #f0f0f0);
-  // 向导步骤条已完成节点悬浮背景色
-  --ti-steps-advanced-done-bg-color-hover: var(--ti-base-color-brand-3, #7693f5);
-  // 向导步骤条进行中节点背景色
-  --ti-steps-advanced-doing-bg-color: var(--ti-common-color-bg-light-normal, #f0f0f0);
-  // 向导步骤条已完成节点悬浮背景色
-  --ti-steps-advanced-doing-bg-color-hover: var(--ti-base-color-brand-3, #7693f5);
-  // 向导步骤条异常节点背景色
-  --ti-steps-advanced-error-bg-color: var(--ti-common-color-error-bg, #fce3e1);
-  // 向导步骤条异常节点悬浮背景色
-  --ti-steps-advanced-error-bg-color-hover: var(--ti-common-color-error-border-secondary, #fce3e1);
-  // 向导步骤条异常节点选中背景色
-  --ti-steps-advanced-error-bg-color-selected: #de504e;
-  // 向导步骤条异常节点图标色
-  --ti-steps-advanced-error-icon-color: var(--ti-common-color-error-text, #f23030);
-  // 向导步骤条禁用节点背景色
-  --ti-steps-advanced-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
-  // 向导步骤条禁用节点悬浮背景色
-  --ti-steps-advanced-disabled-bg-color-hover: var(--ti-common-color-bg-disabled, #f0f0f0);
-  // 向导步骤条禁用节点点击背景色
-  --ti-steps-advanced-disabled-bg-color-active: var(--ti-common-color-bg-disabled, #f0f0f0);
+  /** 默认标准型场景 */
+  // 高级向导行高
+  --tv-Steps-advance-line-height: var(--tv-size-height-sm, 28px);
+  // 高级向导未选中项背景色
+  --tv-Steps-advance-li-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  // 高级向导字号
+  --tv-Steps-advance-link-font-size: var(--tv-font-size-sm, 12px);
+  // 高级向导边框色
+  --tv-Steps-advance-border-color: var(--tv-color-border, #c2c2c2);
+  // 高级向导未选中项文本色
+  --tv-Steps-advance-text-color: var(--tv-color-text-secondary, #595959);
+  // 高级向导节点悬浮背景色
+  --tv-Steps-advance-li-hover-bg-color: var(--tv-color-bg-header, #f0f0f0);
+  // 高级向导节点悬浮文本色
+  --tv-Steps-advance-li-hover-text-color: var(--tv-color-text-secondary, #595959);
+  // 高级向导边框圆角
+  --tv-Steps-advance-border-radius: 3px;
+  // 高级向导节点里的图标高度
+  --tv-Steps-advance-dot-height: var(--tv-space-lg, 12px);
+  // 高级向导节点里的图标宽度
+  --tv-Steps-advance-dot-width: var(--tv-space-lg, 12px);
+  // 高级向导计数标记点字号
+  --tv-Steps-advance-count-font-size: var(--tv-font-size-sm, 12px);
+  // 高级向导计数标记点高度
+  --tv-Steps-advance-count-height: calc(var(--tv-size-base, 4px) * 4);
+  // 高级向导计数标记点边框圆角
+  --tv-Steps-advance-count-border-radius: 10px;
+  // 高级向导计数标记点背景色
+  --tv-Steps-advance-count-bg-color: #c7000b;
 
+  /** timline场景 */
+  // timeline图标字号
+  --tv-Steps-number-font-size: var(--tv-font-size-md, 14px);
+  // 图标边框宽度
+  --tv-Steps-icon-border-width: var(--tv-border-width, 1px);
+  // 自定义图标背景色
+  --tv-Steps-custom-icon-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  // 警告节点背景色
+  --tv-Steps-warning-icon-bg-color: var(--tv-color-warn-bg, #ff8800);
+  // 警告节点图标色
+  --tv-Steps-warning-icon-color: var(--tv-color-icon-white, #ffffff);
+  // 自定义图标大小
+  --tv-Steps-custom-icon-size: calc(var(--tv-size-base, 4px) * 5);
+  // 时间信息字号
+  --tv-Steps-time-font-size: var(--tv-font-size-md, 14px);
+  // 时间信息文本色
+  --tv-Steps-time-text-color: var(--tv-color-text-weaken, #808080);
+  // 已完成节点图标大小
+  --tv-Steps-done-icon-size: var(--tv-font-size-md, 14px);
+  // 错误节点背景色
+  --tv-Steps-error-bg-color: transparent;
+  // 错误节点图标大小
+  --tv-Steps-error-icon-size: var(--tv-font-size-heading-xs, 16px);
+  // 节点内容悬浮字重
+  --tv-Steps-content-font-weight-hover: var(--tv-font-weight-bold, 600);
+  // 节点标题右外边距
+  --tv-Steps-name-margin-right: 0;
+  // 节点文本内容上边距
+  --tv-Steps-content-margin-top: var(--tv-space-md, 8px);
+  // 活跃节点字重
+  --tv-Steps-active-font-weight: var(--tv-font-weight-bold, 600);
+  // 底部分割线与主体间距
+  --tv-Steps-bottom-divider-margin-top: 25px;
+  // 底部分割线厚度
+  --tv-Steps-bottom-divider-height: var(--tv-border-width, 1px);
+  // 底部分割线的颜色
+  --tv-Steps-bottom-divider-bg-color: var(--tv-color-border-divider, #f0f0f0);
   // 竖式步骤条节点左右字号
-  --ti-steps-timeline-name-font-size: var(--ti-common-font-size-1, 14px);
-  // 竖式步骤条节点左侧时间预留宽度
-  --ti-steps-timeline-vertical-time-width: var(--ti-common-size-25x, 100px);
+  --tv-Steps-timeline-name-font-size: var(--tv-font-size-md, 14px);
   // 竖式步骤条线条上下间距
-  --ti-steps-timeline-line-margin-vertical: var(--ti-common-space-base, 4px);
+  --tv-Steps-timeline-line-margin-vertical: var(--tv-space-base, 4px);
   // 竖式步骤条线条背景色
-  --ti-steps-timeline-vertical-line-bg-color: var(--ti-common-color-line-dividing, #f0f0f0);
-  // 竖式步骤条线条左间距
-  --ti-steps-timeline-vertical-line-margin-left: var(--ti-common-space-4x, 16px);
-  // 竖式步骤条线条右间距
-  --ti-steps-timeline-vertical-line-margin-right: var(--ti-steps-timeline-vertical-line-margin-left);
+  --tv-Steps-timeline-vertical-line-bg-color: var(--tv-color-bg-header, #f0f0f0);
   // 竖式步骤条圆点与内容间隔
-  --ti-steps-timeline-shape-dot-content-margin-left: var(--ti-common-space-4x, 16px);
-  // 竖式步骤条圆点尺寸
-  --ti-steps-timeline-dot-width: var(--ti-common-size-2x, 8px);
-  // 竖式步骤条圆点边框色
-  --ti-steps-timeline-dot-border-color: var(--ti-base-color-brand-5, #c2c2c2);
-  // 竖式步骤条圆点背景色
-  --ti-steps-timeline-dot-bg-color: var(--ti-common-color-light, #ffffff);
-  // 竖式步骤条节点内容底部内边距
-  --ti-steps-timeline-item-padding-bottom: var(--ti-common-space-6x, 24px);
-  // 竖式步骤条二级文本颜色
-  --ti-steps-timeline-item-secondary-text-color: var(--ti-common-color-text-weaken, #808080);
-  // 竖式步骤条二级文本字号
-  --ti-steps-timeline-item-secondary-text-font-size: var(--ti-common-font-size-0, 12px);
-  // 竖式步骤条标题与二级文本间距
-  --ti-steps-timeline-item-title-margin-bottom: var(--ti-common-size-base, 4px);
-  // 基本状态圆点颜色
-  --ti-steps-timeline-dot-primary-bg-color: var(--ti-base-color-brand-5, #c2c2c2);
+  --tv-Steps-timeline-shape-dot-content-margin-left: var(--tv-space-xl, 16px);
+  // 基本状态圆点背景和边框色
+  --tv-Steps-timeline-dot-primary-bg-color: var(--tv-color-bg-control, #c2c2c2);
   // 成功状态圆点颜色
-  --ti-steps-timeline-dot-success-bg-color: var(--ti-common-color-success, #5cb300);
+  --tv-Steps-timeline-dot-success-bg-color: var(--tv-color-success-bg, #5cb300);
   // 警告状态圆点颜色
-  --ti-steps-timeline-dot-warning-bg-color: var(--ti-common-color-warn, #ff8800);
+  --tv-Steps-timeline-dot-warning-bg-color: var(--tv-color-warn-bg, #ff8800);
   // 危险状态圆点颜色
-  --ti-steps-timeline-dot-danger-bg-color: var(--ti-common-color-error, #f23030);
+  --tv-Steps-timeline-dot-danger-bg-color: var(--tv-color-error-bg, #f23030);
   // 信息状态圆点颜色
-  --ti-steps-timeline-dot-info-bg-color: var(--ti-common-color-prompt, #1476ff);
-
-  // 时间信息字体色
-  --ti-steps-time-text-color: var(--ti-common-color-text-weaken, #808080);
-  // 时间信息字号
-  --ti-steps-time-font-size: var(--ti-common-font-size-base, 14px);
-  // 时间信息下边距
-  --ti-steps-time-margin-bottom: var(--ti-common-space-6, 6px);
+  --tv-Steps-timeline-dot-info-bg-color: var(--tv-color-info-bg, #1476ff);
+  // 竖式步骤条标题与二级文本间距
+  --tv-Steps-timeline-item-title-margin-bottom: var(--tv-space-base, 4px);
+  // 竖式步骤条二级文本字号
+  --tv-Steps-timeline-item-secondary-text-font-size: var(--tv-font-size-sm, 12px);
+  // 竖式步骤条二级文本颜色
+  --tv-Steps-timeline-item-secondary-text-color: var(--tv-color-text-weaken, #808080);
+  // 竖式步骤条线条左间距
+  --tv-Steps-timeline-vertical-line-margin-left: var(--tv-space-xl, 16px);
+  // 竖式步骤条节点内容底部内边距
+  --tv-Steps-timeline-item-padding-bottom: calc(var(--tv-space-base, 4px) * 6);
+  // 竖式步骤条圆点尺寸
+  --tv-Steps-timeline-dot-width: calc(var(--tv-size-base, 4px) * 2);
+  // 竖式步骤条圆点边框色
+  --tv-Steps-timeline-dot-border-color: var(--tv-color-border, #c2c2c2);
+  // 竖式步骤条圆点背景色
+  --tv-Steps-timeline-dot-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  // 竖式步骤条线条右间距
+  --tv-Steps-timeline-vertical-line-margin-right: var(--tv-Steps-timeline-vertical-line-margin-left);
+  // mini尺寸节点内容字号
+  --tv-Steps-mini-font-size-base: var(--tv-font-size-sm, 12px);
 }
diff --git a/packages/theme/src/theme/infinity-theme/component-vars.js b/packages/theme/src/theme/infinity-theme/component-vars.js
index eab39ea351..bb2ca6c61f 100644
--- a/packages/theme/src/theme/infinity-theme/component-vars.js
+++ b/packages/theme/src/theme/infinity-theme/component-vars.js
@@ -218,13 +218,13 @@ export const infinityConcat = {
   'ti-alert-error-icon-color': 'var(--ti-common-color-error)',
   'ti-alert-success-icon-color': 'var(--ti-common-color-success)',
   // steps
-  'ti-steps-icon-size': '24px',
-  'ti-steps-done-icon-bg-color': 'var(--ti-common-color-success-normal)',
-  'ti-steps-done-active-border-color': 'var(--ti-common-color-success-normal)',
-  'ti-steps-done-icon-fill-color': '#fff',
-  'ti-steps-line-active-bg-color': 'var(--ti-common-color-border)',
-  'ti-steps-line-height': '1px',
-  'ti-steps-done-text-color': 'var(--ti-common-color-success-normal)',
+  'tv-Steps-icon-size': '24px',
+  'tv-Steps-node-done-bg-color': 'var(--ti-common-color-success-normal)',
+  'tv-Steps-node-done-border-color': 'var(--ti-common-color-success-normal)',
+  'tv-Steps-done-icon-fill-color': '#fff',
+  'tv-Steps-line-active-bg-color': 'var(--ti-common-color-border)',
+  'tv-Steps-line-height': '1px',
+  'tv-Steps-done-text-color': 'var(--ti-common-color-success-normal)',
   // tag
   'ti-tag-border-radius': 'var(--ti-common-border-radius-1)',
   'ti-tag-height': 'var(--ti-common-size-5x)',