feat(wizard): [wizard] Add new specification wizard component (#2000)

* feat(wizard): 增加流程图新规范的基本用法模式

* feat(wizard): 增加流程图新规范的垂直模式

* feat(wizard): 增加流程图新规范的时间线模式

* feat(wizard): 修复测试用例报错

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

@@ -28,12 +28,13 @@ const dataSet = ref([
   },
   {
     name: '一级审批',
-    status: 'wait',
-    showNode: true
+    status: 'doing',
+    showNode: true,
+    content: '通过'
   },
   {
     name: '完成',
-    status: 'doing',
+    status: 'wait',
     showNode: true,
     content: '完成'
   }

examples/sites/demos/pc/app/wizard/vertical.spec.ts

@@ -9,7 +9,7 @@ test('垂直流程图', async ({ page }) => {
   const nodeIcons = wizard.locator('.tiny-wizard__chart-icon')
   const nodeNames = wizard.locator('.tiny-wizard__chart-name')
   const nodeCount = 5
-  const names = ['提交提交', '直接主管审批通过', '二级主管审批同意', '一级审批', '完成完成']
+  const names = ['提交提交', '直接主管审批通过', '二级主管审批同意', '一级审批通过', '完成完成']
 
   await expect(nodeLines).toHaveCount(nodeCount)
   await expect(nodeIcons).toHaveCount(nodeCount)
@@ -21,7 +21,7 @@ test('垂直流程图', async ({ page }) => {
     await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
     await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
 
-    if (i === 3) {
+    if (i === 4) {
       await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(194, 196, 199)')
       await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(223, 225, 230)')
     } else {

examples/sites/demos/pc/app/wizard/vertical.vue

@@ -33,12 +33,13 @@ export default {
         },
         {
           name: '一级审批',
-          status: 'wait',
-          showNode: true
+          status: 'doing',
+          showNode: true,
+          content: '通过'
         },
         {
           name: '完成',
-          status: 'doing',
+          status: 'wait',
           showNode: true,
           content: '完成'
         }

packages/theme/src/mixins/wizard.less

@@ -10,10 +10,10 @@
 *
 */
 
-.wizard-icon-color(@color, @bgcolor) {
+.wizard-icon-color(@color, @bgcolor, @bordercolor) {
   color: @color;
   background: @bgcolor;
-  border-color: @bgcolor;
+  border: 1px solid @bordercolor;
 }
 
 .wizard-line-color(@color) {

packages/theme/src/upload-list/smb-theme.js

@@ -13,5 +13,6 @@ export const tinyUploadListSmbTheme = {
   'ti-upload-list-svg-refresh-position-right': 'var(--ti-common-space-8x)',
   'ti-upload-list-picture-card-item-hover-bg-color': 'var(--ti-common-bg-color-hover-40)',
   'ti-upload-list-picture-success-border-weight': '0',
-  'ti-upload-list-item-text-color': 'var(--ti-common-color-text-secondary)'
+  'ti-upload-list-item-text-color': 'var(--ti-common-color-text-secondary)',
+  'ti-upload-list-item-name-icon-color': 'var(--ti-common-color-primary-normal)'
 }

packages/theme/src/user-contact/index.less

@@ -102,7 +102,7 @@
   & &__role {
     display: inline-block;
     color: var(--ti-user-contact-roleInfo-text-color);
-    margin-left: 8px;
+    margin-left: var(--ti-user-contact-role-desc-margin-left);
     vertical-align: middle;
     font-size: var(--ti-user-contact-roleInfo-font-size);
     line-height: 1.5;

packages/theme/src/user-contact/smb-theme.js

@@ -0,0 +1,5 @@
+export const tinyUserContactSmbTheme = {
+  'ti-user-contact-role-desc-margin-left': 'var(--ti-common-space-0)',
+  'ti-user-contact-roleInfo-text-color': 'var(--ti-common-color-text-weaken)',
+  'ti-user-contact-roleInfo-font-size': 'var(--ti-common-font-size-0)'
+}

packages/theme/src/user-contact/vars.less

@@ -20,4 +20,6 @@
   --ti-user-contact-card-header-role-font-size: var(--ti-common-font-size-2, 16px);
   --ti-user-contact-card-header-roleNum-text-color: #b9babc;
   --ti-user-contact-card-espace-text-color: var(--ti-common-color-placeholder, #adb0b8);
+  // 描述左外边距
+  --ti-user-contact-role-desc-margin-left: var(--ti-common-space-2x, 8px);
 }

packages/theme/src/wizard/index.less

@@ -15,6 +15,7 @@
 @import './vars.less';
 
 @wizard-prefix-cls: ~'@{css-prefix}wizard';
+@button-prefix-cls: ~'@{css-prefix}button';
 @user-contact-prefix-cls: ~'@{css-prefix}user-contact';
 @user-head-prefix-cls: ~'@{css-prefix}user-head';
 @svg-prefix-cls: ~'@{css-prefix}svg';
@@ -26,7 +27,21 @@
   & &__nomarl {
     .@{wizard-prefix-cls}__steps {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+
+      &-item {
+        &:first-child {
+          .@{wizard-prefix-cls}__chart-line:first-child {
+            .wizard-line-color(var(--ti-wizard-first-lines-bg-color));
+          }
+        }
+
+        &:last-child {
+          .@{wizard-prefix-cls}__chart-line:last-child {
+            .wizard-line-color(var(--ti-wizard-last-lines-bg-color));
+          }
+        }
+      }
     }
 
     .@{wizard-prefix-cls}__chart span {
@@ -34,9 +49,10 @@
     }
 
     .@{wizard-prefix-cls}__name {
-      margin-top: 6px;
+      margin-top: var(--ti-wizard-node-title-margin-top);
       overflow: hidden;
       text-align: center;
+      width: calc((var(--ti-wizard-node-size) + var(--ti-wizard-lines-width) * 2));
 
       .name {
         font-size: var(--ti-wizard-font-size);
@@ -45,8 +61,12 @@
     }
 
     .@{wizard-prefix-cls}__button {
-      margin-top: 10px;
-      text-align: right;
+      margin-top: var(--ti-wizard-button-group-margin-top);
+      text-align: var(--ti-wizard-button-group-text-align);
+
+      .@{button-prefix-cls} + .@{button-prefix-cls} {
+        margin-left: var(--ti-wizard-button-margin-left);
+      }
     }
   }
 
@@ -56,10 +76,19 @@
 
     .@{wizard-prefix-cls}__steps-item {
       &.is-doing {
+        .@{wizard-prefix-cls}__chart-line {
+          .wizard-line-color(var(--ti-wizard-right-lines-doing-bg-color));
+        }
+
+        .@{wizard-prefix-cls}__chart-name > .name {
+          font-weight: var(--ti-wizard-node-doing-font-weight);
+        }
+
         .@{wizard-prefix-cls}__chart-icon {
           .wizard-icon-color(
             var(--ti-wizard-icon-color),
-            var(--ti-wizard-icon-bg-color)
+            var(--ti-wizard-icon-bg-color),
+            var(--ti-wizard-icon-border-color)
           );
 
           .@{wizard-prefix-cls}__chart-line {
@@ -74,34 +103,56 @@
       &:last-child > ul .@{wizard-prefix-cls}__chart-line {
         background: none;
       }
+
+      &:last-child > .@{wizard-prefix-cls}__node-wrapper > .@{wizard-prefix-cls}__chart-line {
+        .wizard-line-color(var(--ti-wizard-last-lines-bg-color));
+      }
+
+      .@{wizard-prefix-cls}__node-wrapper {
+        height: var(--ti-wizard-vertical-node-box-height);
+      }
     }
 
     .@{wizard-prefix-cls}__chart-line {
-      height: 88px;
-      width: 4px;
-      top: 0px;
+      height: var(--ti-wizard-vertical-line-height);
+      width: var(--ti-wizard-vertical-line-width);
+      top: var(--ti-wizard-vertical-line-position-top);
       position: relative;
       display: inline-block;
     }
 
+    .@{wizard-prefix-cls}__steps-item:not(.is-ready, .is-doing) {
+      .@{wizard-prefix-cls}__chart-name .name {
+        color: var(--ti-wizard-vertical-wait-desc-text-color);
+      }
+    }
+
     .@{wizard-prefix-cls}__chart-name {
-      font-size: var(--ti-common-font-size-1);
-      margin-left: 15px;
+      font-size: var(--ti-wizard-vertical-title-font-size);
+      margin-left: var(--ti-wizard-vertical-text-margin-left);
       display: inline-flex;
       flex-direction: column;
       transform: translateY(-50%);
       position: relative;
-      top: -5px;
-      
+      top: var(--ti-wizard-vertical-position-top);
+
+      .name {
+        color: var(--ti-wizard-node-text-color);
+        line-height: var(--ti-wizard-vertical-title-line-height);
+      }
+
       .children-name {
-        margin-top: 8px;
+        color: var(--ti-wizard-vertical-desc-text-color);
+        font-size: var(--ti-wizard-vertical-desc-font-size);
+        margin-top: var(--ti-wizard-vertical-desc-margin-top);
+        line-height: var(--ti-wizard-vertical-title-line-height);
       }
     }
 
     .@{wizard-prefix-cls}__chart-icon {
-      position: relative;
+      position: var(--ti-wizard-vertical-icon-position);
       left: 50%;
-      top: -14px;
+      top: var(--ti-wizard-vertical-icon-position-top);
       transform: translateX(-50%);
     }
 
@@ -110,21 +161,21 @@
       left: 50%;
       top: -14px;
       transform: translateX(-50%);
-      fill: var(--ti-wizard-icon-bg-color);
+      fill: var(--ti-wizard-time-node-icon-color);
       font-size: var(--ti-common-font-size-5);
       box-sizing: border-box;
-      width: 24px;
-      height: 24px;
+      width: var(--ti-wizard-time-node-size);
+      height: var(--ti-wizard-time-node-size);
       display: flex;
       border-radius: 50%;
       text-align: center;
-      background: var(--ti-wizard-icon-color);
-      border: 2px solid var(--ti-wizard-icon-bg-color);
+      background: var(--ti-wizard-time-node-bg-color);
+      border: var(--ti-wizard-time-node-border-weight) solid var(--ti-wizard-icon-bg-color);
       justify-content: center;
 
       .@{svg-prefix-cls} {
-        width: 16px;
-        height: 20px;
+        width: var(--ti-wizard-time-node-icon-width);
+        height: var(--ti-wizard-time-node-icon-height);
       }
     }
 
@@ -138,20 +189,71 @@
     }
   }
 
+  & &__vertical.is-time-line-flow {
+    .@{wizard-prefix-cls}__node-wrapper {
+      height: auto;
+    }
+
+    .@{wizard-prefix-cls}__steps-item {
+      &.is-doing {
+        .@{wizard-prefix-cls}__chart-icon {
+          .wizard-icon-color(
+            var(--ti-wizard-icon-color),
+            var(--ti-wizard-icon-bg-color),
+            var(--ti-wizard-icon-border-color)
+          );
+        }
+      }
+
+      .@{wizard-prefix-cls}__chart-children {
+        .@{wizard-prefix-cls}__chart-line {
+          .wizard-line-color(var(--ti-wizard-time-lines-bg-color));
+        }
+      }
+
+      &:last-child > ul .@{wizard-prefix-cls}__chart-line {
+        background: var(--ti-wizard-time-last-lines-bg-color);
+      }
+    }
+
+    .@{wizard-prefix-cls}__steps-item .@{wizard-prefix-cls}__chart-line {
+      height: 88px;
+      top: 0px;
+      margin-left: 0;
+
+      &.is-time-line {
+        .wizard-line-color(var(--ti-wizard-time-lines-bg-color));
+      }
+    }
+
+    .@{wizard-prefix-cls}__chart-name {
+      top: -5px;
+    }
+
+    .@{wizard-prefix-cls}__chart-icon {
+      position: relative;
+      top: -14px;
+    }
+  }
+
   & &__date {
-    min-width: 100px;
+    min-width: var(--ti-wizard-time-left-min-width);
     width: auto;
     color: var(--ti-wizard-text-color);
     font-size: var(--ti-wizard-font-size);
-    line-height: 1.2em;
+    line-height: var(--ti-wizard-time-left-line-height);
     display: inline-block;
     text-align: right;
     position: relative;
-    top: -24px;
+    top: var(--ti-wizard-time-left-position-top);
     right: 15px;
+    margin-right: var(--ti-wizard-time-left-margin-right);
 
     .date-icon {
-      margin-left: 4px;
+      margin-left: var(--ti-wizard-time-left-icon-margin-left);
+      margin-right: var(--ti-wizard-time-left-icon-margin-right);
+      font-size: var(--ti-wizard-time-left-icon-size);
+      fill: var(--ti-wizard-time-left-icon-color);
     }
 
     span {
@@ -159,25 +261,27 @@
     }
 
     &.time-line-text {
-      top: -14px;
+      font-weight: var(--ti-wizard-node-doing-font-weight);
+      top: var(--ti-wizard-time-left-point-position-top);
     }
   }
 
   & &__steps-item {
     &.is-ready {
       .name {
-        color: var(--ti-wizard-icon-bg-color);
+        color: var(--ti-wizard-node-text-color);
       }
 
       .@{wizard-prefix-cls}__chart-icon {
         .wizard-icon-color(
           var(--ti-wizard-icon-color),
-          var(--ti-wizard-icon-bg-color)
+          var(--ti-wizard-icon-bg-color),
+          var(--ti-wizard-icon-border-color)
         );
       }
 
       .@{wizard-prefix-cls}__chart-line {
-        .wizard-line-color(var(--ti-wizard-icon-bg-color));
+        .wizard-line-color(var(--ti-wizard-lines-bg-color));
       }
     }
 
@@ -192,9 +296,11 @@
     align-items: center;
 
     & > .@{svg-wrapper-prefix-cls} {
+      height: var(--ti-wizard-node-size);
+
       & > .@{svg-prefix-cls} {
-        font-size: var(--ti-common-font-size-4);
-        fill: var(--ti-wizard-icon-bg-color);
+        font-size: var(--ti-wizard-node-size);
+        fill: var(--ti-wizard-node-text-color);
       }
     }
   }
@@ -206,30 +312,38 @@
       .@{wizard-prefix-cls}__chart-icon {
         .wizard-icon-color(
           var(--ti-wizard-icon-color),
-          var(--ti-wizard-icon-bg-color)
+          var(--ti-wizard-icon-bg-color),
+          var(--ti-wizard-icon-border-color)
         );
       }
     }
 
+    &.is-doing .@{wizard-prefix-cls}__name .name {
+      font-weight: var(--ti-wizard-node-doing-font-weight);
+    }
+
     &.is-doing .@{wizard-prefix-cls}__chart-line {
-      .wizard-line-color(var(--ti-wizard-icon-bg-color));
+      .wizard-line-color(var(--ti-wizard-lines-bg-color));
+
+      &:last-child {
+        background-color: var(--ti-wizard-right-lines-doing-bg-color);
+      }
     }
   }
 
-  & &__chart-children.is-ready .@{wizard-prefix-cls}__chart-line,
-  & &__chart-line.is-time-line {
+  & &__chart-children.is-ready .@{wizard-prefix-cls}__chart-line {
     .wizard-line-color(var(--ti-wizard-icon-bg-color));
   }
 
   & &__chart-detail {
-    padding: 4px 8px;
+    padding: var(--ti-wizard-time-right-padding-vertical) 8px;
     border-radius: 2px;
     border-radius: var(--ti-wizard-detail-border-radius, 2px);
     min-height: 26px;
     height: auto;
     line-height: 1;
-    margin-left: 12px;
-    text-align: center;
+    margin-left: var(--ti-wizard-time-right-margin-left);
+    text-align: var(--ti-wizard-time-right-text-align);
     display: inline-block;
     position: absolute;
     top: -14px;
@@ -260,30 +374,35 @@
       color: var(--ti-wizard-text-color);
       font-size: var(--ti-common-font-size-1);
       font-weight: 700;
-      margin-bottom: 8px;
+      margin-bottom: var(--ti-wizard-time-right-title-margin-bottom);
+      line-height: var(--ti-wizard-vertical-title-line-height);
     }
   }
 
   & &__chart-icon {
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
+    width: var(--ti-wizard-node-size);
+    height: var(--ti-wizard-node-size);
+    line-height: var(--ti-wizard-node-size);
     border-radius: 50%;
     font-size: var(--ti-common-font-size-base);
     text-align: center;
     background: var(--ti-wizard-chart-icon-bg-color);
-    color: var(--ti-wizard-icon-color);
-    box-sizing: content-box;
+    color: var(--ti-wizard-normal-icon-color);
     // 垂直简易流程图加
     display: inline-block;
+    border: var(--ti-wizard-lines-normal-border-weight) solid var(--ti-wizard-lines-normal-border-color);
 
     &.time-line-icon {
-      width: 10px;
-      height: 10px;
-      line-height: 10px;
+      width: var(--ti-wizard-time-dot-size);
+      height: var(--ti-wizard-time-dot-size);
+      line-height: var(--ti-wizard-time-dot-size);
     }
   }
 
+  & &__chart-children &__chart-line &__chart-icon.time-line-icon {
+    background-color: var(--ti-wizard-time-lines-bg-color);
+  }
+
   & &__chart-icon,
   & &__chart-name,
   & &__date,
@@ -292,9 +411,17 @@
   }
 
   & &__chart-line {
-    height: 4px;
-    background: #c2c4c7;
-    width: 50px;
+    height: var(--ti-wizard-lines-height);
+    background: var(--ti-wizard-lines-normal-bg-color);
+    width: var(--ti-wizard-lines-width);
+
+    &:first-child {
+      margin-right: var(--ti-wizard-lines-margin-horizontal);
+    }
+
+    &:last-child {
+      margin-left: var(--ti-wizard-lines-margin-horizontal);
+    }
   }
 
   & &__chart-line &__chart-icon-time {

packages/theme/src/wizard/smb-theme.js

@@ -0,0 +1,52 @@
+export const tinyWizardSmbTheme = {
+  'ti-wizard-icon-bg-color': 'var(--ti-common-color-light)',
+  'ti-wizard-icon-color': 'var(--ti-common-color-bg-emphasize)',
+  'ti-wizard-node-size': 'var(--ti-common-font-size-6)',
+  'ti-wizard-lines-height': 'var(--ti-common-border-weight-normal)',
+  'ti-wizard-lines-width': 'var(--ti-common-size-width-minor)',
+  'ti-wizard-lines-margin-horizontal': 'var(--ti-common-dropdown-gap)',
+  'ti-wizard-first-lines-bg-color': 'var(--ti-common-color-transparent)',
+  'ti-wizard-last-lines-bg-color': 'var(--ti-common-color-transparent)',
+  'ti-wizard-right-lines-doing-bg-color': 'var(--ti-common-color-line-disabled)',
+  'ti-wizard-lines-normal-bg-color': 'var(--ti-common-color-line-disabled)',
+  'ti-wizard-chart-icon-bg-color': 'var(--ti-common-color-bg-light-normal)',
+  'ti-wizard-lines-normal-border-weight': 'var(--ti-common-border-weight-normal)',
+  'ti-wizard-normal-icon-color': 'var(--ti-common-color-text-disabled)',
+  'ti-wizard-node-doing-font-weight': 'var(--ti-common-font-weight-bold)',
+  'ti-wizard-node-title-margin-top': 'var(--ti-common-dropdown-gap)',
+  'ti-wizard-button-group-margin-top': 'calc(var(--ti-common-space-base) * 9)',
+  'ti-wizard-button-group-text-align': 'left',
+  'ti-wizard-button-margin-left': 'var(--ti-common-space-3x)',
+  'ti-wizard-vertical-line-width': 'var(--ti-common-border-weight-normal)',
+  'ti-wizard-vertical-line-height': 'var(--ti-common-line-height-8)',
+  'ti-wizard-vertical-icon-position': 'absolute',
+  'ti-wizard-vertical-line-position-top': '54px',
+  'ti-wizard-vertical-icon-position-top': '-40px',
+  'ti-wizard-vertical-node-box-height':
+    'calc(var(--ti-wizard-vertical-line-height) + var(--ti-wizard-node-size) + 16px)',
+  'ti-wizard-vertical-text-margin-left': '21.5px',
+  'ti-wizard-vertical-desc-margin-top': 'var(--ti-common-space-0)',
+  'ti-wizard-vertical-title-line-height': 'var(--ti-common-line-height-number)',
+  'ti-wizard-vertical-desc-font-size': 'var(--ti-common-font-size-0)',
+  'ti-wizard-vertical-desc-text-color': 'var(--ti-common-color-text-weaken)',
+  'ti-wizard-vertical-wait-desc-text-color': 'var(--ti-common-color-bg-emphasize)',
+  'ti-wizard-time-node-size': 'var(--ti-common-font-size-6)',
+  'ti-wizard-time-node-border-weight': '0',
+  'ti-wizard-time-last-lines-bg-color': 'var(--ti-common-color-bg-emphasize)',
+  'ti-wizard-time-node-icon-width': 'var(--ti-common-font-size-6)',
+  'ti-wizard-time-node-icon-height': 'var(--ti-common-font-size-6)',
+  'ti-wizard-time-left-margin-right': 'var(--ti-common-space-2x)',
+  'ti-wizard-time-left-position-top': '-28px',
+  'ti-wizard-time-left-point-position-top': '-15px',
+  'ti-wizard-time-left-icon-color': 'var(--ti-common-color-icon-normal)',
+  'ti-wizard-time-left-icon-margin-right': 'var(--ti-common-space-10)',
+  'ti-wizard-time-left-min-width': 'var(--ti-common-size-width-medium)',
+  'ti-wizard-time-left-icon-margin-left': 'var(--ti-common-space-2x)',
+  'ti-wizard-time-left-icon-size': 'var(--ti-common-font-size-2)',
+  'ti-wizard-time-left-line-height': 'var(--ti-common-line-height-number)',
+  'ti-wizard-time-dot-size': 'var(--ti-common-size-3x)',
+  'ti-wizard-time-right-text-align': 'left',
+  'ti-wizard-time-right-margin-left': '15.5px',
+  'ti-wizard-time-right-padding-vertical': 'var(--ti-common-space-0)',
+  'ti-wizard-time-right-title-margin-bottom': 'var(--ti-common-space-0)'
+}

packages/theme/src/wizard/vars.less

@@ -15,6 +15,8 @@
   --ti-wizard-font-size: var(--ti-common-font-size-base, 12px);
   // 节点文本色|图标色
   --ti-wizard-icon-color: var(--ti-common-color-light, #fff);
+  // 未完成节点文本色|图标色
+  --ti-wizard-normal-icon-color: var(--ti-common-color-light, #fff);
   // 时间线流程图节点两侧文本色
   --ti-wizard-text-color: var(--ti-common-color-info-normal, #252b3a);
   // 时间线流程图节点右侧文字悬浮圆角
@@ -23,6 +25,114 @@
   --ti-wizard-detail-bg-color: var(--ti-common-color-warning-normal, #fa9841);
   // 已完成的节点和线条背景色
   --ti-wizard-icon-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // 已完成的节点边框色
+  --ti-wizard-icon-border-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // 节点下方文本色
+  --ti-wizard-node-text-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // 节点尺寸
+  --ti-wizard-node-size: var(--ti-common-font-size-4, 20px);
+  // 节点线高度
+  --ti-wizard-lines-height: var(--ti-common-size-base, 4px);
+  // 节点线宽度
+  --ti-wizard-lines-width: calc(var(--ti-common-size-base, 4px) * 12.5);
+  // 节点线左右外边距
+  --ti-wizard-lines-margin-horizontal: var(--ti-common-space-0, 0px);
+  // 第一条节点线颜色
+  --ti-wizard-first-lines-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // 节点线颜色
+  --ti-wizard-lines-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // 未完成节点线背景色
+  --ti-wizard-lines-normal-bg-color: #c2c4c7;
+  // 时间线节点线颜色
+  --ti-wizard-time-lines-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // 时间线最后一条节点线颜色
+  --ti-wizard-time-last-lines-bg-color: none;
+  // 最后一条节点线颜色
+  --ti-wizard-last-lines-bg-color: var(--ti-wizard-lines-normal-bg-color, #dfe1e6);
   // 未完成的节点背景色
   --ti-wizard-chart-icon-bg-color: var(--ti-common-color-line-disabled, #dfe1e6);
+  // doing节点右侧线背景色
+  --ti-wizard-right-lines-doing-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // doing节点下方字重
+  --ti-wizard-node-doing-font-weight: normal;
+  // 未完成节点边框色
+  --ti-wizard-lines-normal-border-color: var(--ti-common-color-line-disabled, #5c6173);
+  // 未完成节点边框厚度
+  --ti-wizard-lines-normal-border-weight: 0px;
+  // 节点标题上外边距
+  --ti-wizard-node-title-margin-top: var(--ti-common-space-6, 6px);
+  // 页向导模式按钮组上外边距
+  --ti-wizard-button-group-margin-top: var(--ti-common-space-10, 10px);
+  // 页向导模式按钮左外边距
+  --ti-wizard-button-margin-left: var(--ti-common-space-2x, 8px);
+  // 页向导模式按钮组上对齐方式(hide)
+  --ti-wizard-button-group-text-align: right;
+  // 垂直模式线条宽度
+  --ti-wizard-vertical-line-width: var(--ti-common-size-base, 4px);
+  // 垂直模式线条高度
+  --ti-wizard-vertical-line-height: var(--ti-common-size-22x, 88px);
+  // 垂直模式图标定位模式(hide)
+  --ti-wizard-vertical-icon-position: relative;
+  // 垂直模式文件外边距(hide)
+  --ti-wizard-vertical-position-top: -5px;
+  // 垂直模式文件外边距(hide)
+  --ti-wizard-vertical-line-position-top: 0px;
+  // 垂直模式文件外边距(hide)
+  --ti-wizard-vertical-icon-position-top: -14px;
+  // 垂直模式节点部分整体高度
+  --ti-wizard-vertical-node-box-height: auto;
+  // 垂直模式节点文字左外边距
+  --ti-wizard-vertical-text-margin-left: 15px;
+  // 垂直模式节点描述文字上外边距
+  --ti-wizard-vertical-desc-margin-top: var(--ti-common-space-2x, 8px);
+  // 垂直模式节点标题文字行高
+  --ti-wizard-vertical-title-line-height: auto;
+  // 垂直模式节点标题字号
+  --ti-wizard-vertical-title-font-size: var(--ti-common-font-size-1, 14px);
+  // 垂直模式节点描述字号
+  --ti-wizard-vertical-desc-font-size: var(--ti-common-font-size-1, 14px);
+  // 垂直模式节点描述文本色
+  --ti-wizard-vertical-desc-text-color: inherit;
+  // 垂直模式未完成节点描述文本色
+  --ti-wizard-vertical-wait-desc-text-color: inherit;
+  // 时间线节点尺寸
+  --ti-wizard-time-node-size: var(--ti-common-font-size-5, 24px);
+  // 时间线节点边框厚度
+  --ti-wizard-time-node-border-weight: var(--ti-common-border-weight-1, 2px);
+  // 时间线节点内图标宽度
+  --ti-wizard-time-node-icon-width: var(--ti-common-size-4x, 16px);
+  // 时间线节点内图标高度
+  --ti-wizard-time-node-icon-height: var(--ti-common-line-height-4, 20px);
+  // 时间线节点内图标色
+  --ti-wizard-time-node-icon-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
+  // 时间线节点内图标背景色
+  --ti-wizard-time-node-bg-color: var(--ti-common-color-light, #fff);
+  // 时间线节点左侧日期最小宽度
+  --ti-wizard-time-left-min-width: var(--ti-common-size-25x, 100px);
+  // 时间线节点左侧日期右外边距
+  --ti-wizard-time-left-margin-right: var(--ti-common-space-0, 0px);
+  // 时间线节点左侧日期top定位(hide)
+  --ti-wizard-time-left-position-top: -24px;
+  // 时间线节点左侧时间top定位(hide)
+  --ti-wizard-time-left-point-position-top: -14px;
+  // 时间线节点左侧展开图标右外边距
+  --ti-wizard-time-left-icon-margin-right: var(--ti-common-space-0, 0px);
+  // 时间线节点左侧展开图标色
+  --ti-wizard-time-left-icon-color: auto;
+  // 时间线节点左侧日期图标左外边距
+  --ti-wizard-time-left-icon-margin-left: var(--ti-common-space-base, 4px);
+  // 时间线节点左侧日期图标尺寸
+  --ti-wizard-time-left-icon-size: var(--ti-common-font-size-base, 14px);
+  // 时间线节点左侧文字行高
+  --ti-wizard-time-left-line-height: 1.2em;
+  // 时间线节点小圆点尺寸
+  --ti-wizard-time-dot-size: calc(var(--ti-common-size-base, 4) * 2.5);
+  // 时间线节点右侧文字对齐方式(hide)
+  --ti-wizard-time-right-text-align: center;
+  // 时间线节点右侧文字左外边距
+  --ti-wizard-time-right-margin-left: var(--ti-common-space-3x, 12px);
+  // 时间线节点右侧文字垂直内边距
+  --ti-wizard-time-right-padding-vertical: var(--ti-common-size-base, 4px);
+  // 时间线节点右侧标题底部外边距
+  --ti-wizard-time-right-title-margin-bottom: var(----ti-common-space-2x, 8px);
 }