diff --git a/packages/theme-saas/src/wizard/index.less b/packages/theme-saas/src/wizard/index.less
index 2e7ad396de..8cad7ff991 100644
--- a/packages/theme-saas/src/wizard/index.less
+++ b/packages/theme-saas/src/wizard/index.less
@@ -8,7 +8,7 @@
@svg-wrapper-prefix-cls: ~'@{css-prefix}wizard__chart-svg';
.@{wizard-prefix-cls} {
- & &__nomarl {
+ & &__normal {
.@{wizard-prefix-cls}__steps {
@apply flex;
}
@@ -142,7 +142,7 @@
& &__steps-item {
&.is-ready {
.name {
- @apply text-color-brand;
+ @apply text-color-brand;
}
.@{wizard-prefix-cls}__chart-icon {
@@ -284,7 +284,7 @@
}
.@{wizard-prefix-cls} {
- .@{wizard-prefix-cls}__nomarl {
+ .@{wizard-prefix-cls}__normal {
.@{wizard-prefix-cls}__steps-item {
.@{wizard-prefix-cls}__chart-icon {
@apply w-6;
diff --git a/packages/theme/src/mixins/wizard.less b/packages/theme/src/mixins/wizard.less
deleted file mode 100644
index 69ddf2df31..0000000000
--- a/packages/theme/src/mixins/wizard.less
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
-.wizard-icon-color(@color, @bgcolor, @bordercolor) {
- color: @color;
- background: @bgcolor;
- border: 1px solid @bordercolor;
-}
-
-.wizard-line-color(@color) {
- background: @color;
- border-color: @color;
-}
diff --git a/packages/theme/src/wizard/index.less b/packages/theme/src/wizard/index.less
index de18bd4f52..ded069f973 100644
--- a/packages/theme/src/wizard/index.less
+++ b/packages/theme/src/wizard/index.less
@@ -9,8 +9,6 @@
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
-
-@import '../mixins/wizard.less';
@import '../custom.less';
@import './vars.less';
@@ -21,10 +19,24 @@
@svg-prefix-cls: ~'@{css-prefix}svg';
@svg-wrapper-prefix-cls: ~'@{css-prefix}wizard__chart-svg';
+/** 节点圆圈场景 */
+.wizard-icon-color(@color, @bgColor, @borderColor) {
+ color: @color;
+ background: @bgColor;
+ border: 1px solid @borderColor;
+}
+
+/** 线条场景 */
+.wizard-line-color(@color) {
+ background: @color;
+ border-color: @color;
+}
+
.@{wizard-prefix-cls} {
- .component-css-vars-wizard();
+ .inject-Wizard-vars();
- & &__nomarl {
+ // 水平模式场景
+ & &__normal {
.@{wizard-prefix-cls}__steps {
display: flex;
align-items: flex-start;
@@ -32,13 +44,13 @@
&-item {
&:first-child {
.@{wizard-prefix-cls}__chart-line:first-child {
- .wizard-line-color(var(--ti-wizard-first-lines-bg-color));
+ .wizard-line-color(var(--tv-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-line-color(var(--tv-Wizard-last-lines-bg-color));
}
}
}
@@ -49,211 +61,207 @@
}
.@{wizard-prefix-cls}__name {
- margin-top: var(--ti-wizard-node-title-margin-top);
+ margin-top: var(--tv-Wizard-node-title-margin-top);
+ width: calc((var(--tv-Wizard-node-size) + var(--tv-Wizard-lines-width) * 2));
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);
width: 100%;
+ font-size: var(--tv-Wizard-font-size);
}
}
.@{wizard-prefix-cls}__button {
- margin-top: var(--ti-wizard-button-group-margin-top);
- text-align: var(--ti-wizard-button-group-text-align);
+ margin-top: var(--tv-Wizard-button-group-margin-top);
+ text-align: left;
.@{button-prefix-cls} + .@{button-prefix-cls} {
- margin-left: var(--ti-wizard-button-margin-left);
+ margin-left: var(--tv-Wizard-button-margin-left);
}
}
}
+ // 垂直模式场景
& &__vertical {
padding-top: 20px;
padding-left: 20px;
- .@{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} {
+ &__steps-item {
+ &.is-doing {
+ .@{wizard-prefix-cls}__chart-icon {
+ .wizard-icon-color(
+ var(--tv-Wizard-icon-color),
+ var(--tv-Wizard-icon-bg-color),
+ var(--tv-Wizard-icon-border-color)
+ );
+
+ .@{wizard-prefix-cls}__chart-line {
+ &,
+ &.is-time-line {
+ .wizard-line-color(var(--tv-Wizard-icon-bg-color));
+ }
+ }
+ }
+
+ .@{wizard-prefix-cls}__chart-line {
+ .wizard-line-color(var(--tv-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-name > .name {
+ font-weight: var(--tv-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-border-color)
- );
+ &:last-child > ul .@{wizard-prefix-cls}__chart-line {
+ background: none;
+ }
- .@{wizard-prefix-cls}__chart-line {
- &,
- &.is-time-line {
- .wizard-line-color(var(--ti-wizard-icon-bg-color));
- }
- }
+ &:last-child > .@{wizard-prefix-cls}__node-wrapper > .@{wizard-prefix-cls}__chart-line {
+ .wizard-line-color(var(--tv-Wizard-last-lines-bg-color));
}
- }
- &:last-child > ul .@{wizard-prefix-cls}__chart-line {
- background: none;
- }
+ .@{wizard-prefix-cls}__node-wrapper {
+ height: var(--tv-Wizard-vertical-node-box-height);
+ }
- &:last-child > .@{wizard-prefix-cls}__node-wrapper > .@{wizard-prefix-cls}__chart-line {
- .wizard-line-color(var(--ti-wizard-last-lines-bg-color));
+ &:not(.is-ready, .is-doing) {
+ .@{wizard-prefix-cls}__chart-name .name {
+ color: var(--tv-Wizard-vertical-wait-desc-text-color);
+ }
+ }
}
- .@{wizard-prefix-cls}__node-wrapper {
- height: var(--ti-wizard-vertical-node-box-height);
+ &__chart-line {
+ height: var(--tv-Wizard-vertical-line-height);
+ width: var(--tv-Wizard-vertical-line-width);
+ top: var(--tv-Wizard-vertical-line-position-top);
+ position: relative;
+ display: inline-block;
}
- }
- .@{wizard-prefix-cls}__chart-line {
- 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;
- }
+ &__chart-name {
+ position: relative;
+ top: -5px;
+ transform: translateY(-50%);
+ margin-left: var(--tv-Wizard-vertical-text-margin-left);
+ display: inline-flex;
+ font-size: var(--tv-Wizard-vertical-title-font-size);
+ flex-direction: column;
+
+ .name {
+ color: var(--tv-Wizard-node-text-color);
+ line-height: var(--tv-Wizard-vertical-title-line-height);
+ }
- .@{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);
+ .children-name {
+ color: var(--tv-Wizard-vertical-desc-text-color);
+ font-size: var(--tv-Wizard-vertical-desc-font-size);
+ margin-top: var(--tv-Wizard-vertical-desc-margin-top);
+ line-height: var(--tv-Wizard-vertical-title-line-height);
+ }
}
- }
- .@{wizard-prefix-cls}__chart-name {
- 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: var(--ti-wizard-vertical-position-top);
-
- .name {
- color: var(--ti-wizard-node-text-color);
- line-height: var(--ti-wizard-vertical-title-line-height);
+ &__chart-icon {
+ position: var(--tv-Wizard-vertical-icon-position);
+ left: 50%;
+ top: var(--tv-Wizard-vertical-icon-position-top);
+ transform: translateX(-50%);
}
- .children-name {
- 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: var(--ti-wizard-vertical-icon-position);
- left: 50%;
- top: var(--ti-wizard-vertical-icon-position-top);
- transform: translateX(-50%);
- }
-
- .@{wizard-prefix-cls}__time-wrapper {
- position: relative;
- left: 50%;
- top: -14px;
- transform: translateX(-50%);
- fill: var(--ti-wizard-time-node-icon-color);
- font-size: var(--ti-common-font-size-5);
- box-sizing: border-box;
- 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-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: var(--ti-wizard-time-node-icon-width);
- height: var(--ti-wizard-time-node-icon-height);
+ &__time-wrapper {
+ position: relative;
+ left: 50%;
+ top: -14px;
+ transform: translateX(-50%);
+ fill: var(--tv-Wizard-time-node-icon-color);
+ font-size: var(--ti-common-font-size-5);
+ box-sizing: border-box;
+ width: var(--tv-Wizard-time-node-size);
+ height: var(--tv-Wizard-time-node-size);
+ display: flex;
+ border-radius: 50%;
+ text-align: center;
+ background: var(--tv-Wizard-time-node-bg-color);
+ border: var(--tv-Wizard-time-node-border-weight) solid var(--tv-Wizard-icon-bg-color);
+ justify-content: center;
+
+ .@{svg-prefix-cls} {
+ width: var(--tv-Wizard-time-node-icon-width);
+ height: var(--tv-Wizard-time-node-icon-height);
+ }
}
- }
- .@{wizard-prefix-cls}__chart-children {
- position: relative;
+ &__chart-children {
+ position: relative;
- .children-name {
- position: absolute;
- margin-left: 15px;
+ .children-name {
+ position: absolute;
+ margin-left: 15px;
+ }
}
}
}
+ // 垂直模式时间线场景
& &__vertical.is-time-line-flow {
- .@{wizard-prefix-cls}__node-wrapper {
- height: auto;
- }
+ .@{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)
- );
+ &__steps-item {
+ & > ul .@{wizard-prefix-cls}__chart-line {
+ .wizard-line-color(var(--tv-Wizard-time-lines-bg-color));
+ }
+
+ &:last-child > ul .@{wizard-prefix-cls}__chart-line {
+ background: var(--tv-Wizard-time-last-lines-bg-color);
}
- }
- .@{wizard-prefix-cls}__chart-children {
.@{wizard-prefix-cls}__chart-line {
- .wizard-line-color(var(--ti-wizard-time-lines-bg-color));
+ top: 0px;
+ margin-left: 0;
+ height: 88px;
+
+ &.is-time-line {
+ .wizard-line-color(var(--tv-Wizard-time-lines-bg-color));
+ }
}
}
- &:last-child > ul .@{wizard-prefix-cls}__chart-line {
- background: var(--ti-wizard-time-last-lines-bg-color);
+ &__chart-icon {
+ position: relative;
+ top: -14px;
}
- }
- .@{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));
+ // 时间线节点开始时的线条样式
+ & &__chart-children.is-ready .@{wizard-prefix-cls}__chart-line {
+ .wizard-line-color(var(--tv-Wizard-icon-bg-color));
}
}
-
- .@{wizard-prefix-cls}__chart-name {
- top: -5px;
- }
-
- .@{wizard-prefix-cls}__chart-icon {
- position: relative;
- top: -14px;
- }
}
+ // 垂直模式时间线日期场景
& &__date {
- min-width: var(--ti-wizard-time-left-min-width);
+ position: relative;
+ top: var(--tv-Wizard-time-left-position-top);
+ right: 15px;
+ margin-right: var(--tv-Wizard-time-left-margin-right);
+ min-width: var(--tv-Wizard-time-left-min-width);
width: auto;
- color: var(--ti-wizard-text-color);
- font-size: var(--ti-wizard-font-size);
- line-height: var(--ti-wizard-time-left-line-height);
+ color: var(--tv-Wizard-text-color);
+ font-size: var(--tv-Wizard-font-size);
+ line-height: var(--tv-Wizard-time-left-line-height);
display: inline-block;
text-align: right;
- position: relative;
- top: var(--ti-wizard-time-left-position-top);
- right: 15px;
- margin-right: var(--ti-wizard-time-left-margin-right);
.date-icon {
- 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);
+ margin-left: var(--tv-Wizard-time-left-icon-margin-left);
+ margin-right: var(--tv-Wizard-time-left-icon-margin-right);
+ font-size: var(--tv-Wizard-time-left-icon-size);
+ fill: var(--tv-Wizard-time-left-icon-color);
}
span {
@@ -261,27 +269,28 @@
}
&.time-line-text {
- font-weight: var(--ti-wizard-node-doing-font-weight);
- top: var(--ti-wizard-time-left-point-position-top);
+ top: var(--tv-Wizard-time-left-point-position-top);
+ font-weight: var(--tv-Wizard-node-doing-font-weight);
}
}
+ // 全局节点样式
& &__steps-item {
&.is-ready {
.name {
- color: var(--ti-wizard-node-text-color);
+ color: var(--tv-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-border-color)
+ var(--tv-Wizard-icon-color),
+ var(--tv-Wizard-icon-bg-color),
+ var(--tv-Wizard-icon-border-color)
);
}
.@{wizard-prefix-cls}__chart-line {
- .wizard-line-color(var(--ti-wizard-lines-bg-color));
+ .wizard-line-color(var(--tv-Wizard-lines-bg-color));
}
}
@@ -290,66 +299,65 @@
}
}
+ // 全局节点（不包含文字场景）
& &__chart {
display: flex;
justify-content: flex-start;
align-items: center;
& > .@{svg-wrapper-prefix-cls} {
- height: var(--ti-wizard-node-size);
+ height: var(--tv-Wizard-node-size);
& > .@{svg-prefix-cls} {
- font-size: var(--ti-wizard-node-size);
- fill: var(--ti-wizard-node-text-color);
+ font-size: var(--tv-Wizard-node-size);
+ fill: var(--tv-Wizard-node-text-color);
}
}
}
+ // 全局节点和时间线节点的共同样式
& &__steps-item,
& &__chart-children {
&.is-ready,
&.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)
+ var(--tv-Wizard-icon-color),
+ var(--tv-Wizard-icon-bg-color),
+ var(--tv-Wizard-icon-border-color)
);
}
}
&.is-doing .@{wizard-prefix-cls}__name .name {
- font-weight: var(--ti-wizard-node-doing-font-weight);
+ font-weight: var(--tv-Wizard-node-doing-font-weight);
}
&.is-doing .@{wizard-prefix-cls}__chart-line {
- .wizard-line-color(var(--ti-wizard-lines-bg-color));
+ .wizard-line-color(var(--tv-Wizard-lines-bg-color));
&:last-child {
- background-color: var(--ti-wizard-right-lines-doing-bg-color);
+ background-color: var(--tv-Wizard-right-lines-doing-bg-color);
}
}
}
- & &__chart-children.is-ready .@{wizard-prefix-cls}__chart-line {
- .wizard-line-color(var(--ti-wizard-icon-bg-color));
- }
-
+ // 时间线节点标题样式
& &__chart-detail {
- padding: var(--ti-wizard-time-right-padding-vertical) 8px;
+ padding: var(--tv-Wizard-time-right-padding-vertical) 8px;
border-radius: 2px;
- border-radius: var(--ti-wizard-detail-border-radius, 2px);
+ border-radius: var(--tv-Wizard-detail-border-radius, 2px);
min-height: 26px;
height: auto;
line-height: 1;
- margin-left: var(--ti-wizard-time-right-margin-left);
- text-align: var(--ti-wizard-time-right-text-align);
+ margin-left: var(--tv-Wizard-time-right-margin-left);
+ text-align: var(--tv-Wizard-time-right-text-align);
display: inline-block;
position: absolute;
top: -14px;
&:hover {
- background: var(--ti-wizard-detail-bg-color);
+ background: var(--tv-Wizard-detail-bg-color);
&::before {
content: '';
@@ -358,7 +366,7 @@
margin-top: -4px;
border-style: solid;
border-width: 4px 4px 4px 0;
- border-color: transparent var(--ti-wizard-detail-bg-color);
+ border-color: transparent var(--tv-Wizard-detail-bg-color);
position: absolute;
left: -4px;
top: 10px;
@@ -366,41 +374,43 @@
.detail-title,
.@{user-contact-prefix-cls}__role {
- color: var(--ti-wizard-icon-color);
+ color: var(--tv-Wizard-icon-color);
}
}
.detail-title {
- color: var(--ti-wizard-text-color);
+ color: var(--tv-Wizard-text-color);
font-size: var(--ti-common-font-size-1);
font-weight: 700;
- margin-bottom: var(--ti-wizard-time-right-title-margin-bottom);
- line-height: var(--ti-wizard-vertical-title-line-height);
+ margin-bottom: var(--tv-Wizard-time-right-title-margin-bottom);
+ line-height: var(--tv-Wizard-vertical-title-line-height);
}
}
+ // 默认节点圆圈样式
& &__chart-icon {
- width: var(--ti-wizard-node-size);
- height: var(--ti-wizard-node-size);
- line-height: var(--ti-wizard-node-size);
+ width: var(--tv-Wizard-node-size);
+ height: var(--tv-Wizard-node-size);
+ line-height: var(--tv-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-normal-icon-color);
+ background: var(--tv-Wizard-chart-icon-bg-color);
+ color: var(--tv-Wizard-normal-icon-color);
// 垂直简易流程图加
display: inline-block;
- border: var(--ti-wizard-lines-normal-border-weight) solid var(--ti-wizard-lines-normal-border-color);
+ border: var(--tv-Wizard-lines-normal-border-weight) solid var(--tv-Wizard-lines-normal-border-color);
&.time-line-icon {
- width: var(--ti-wizard-time-dot-size);
- height: var(--ti-wizard-time-dot-size);
- line-height: var(--ti-wizard-time-dot-size);
+ width: var(--tv-Wizard-time-dot-size);
+ height: var(--tv-Wizard-time-dot-size);
+ line-height: var(--tv-Wizard-time-dot-size);
}
}
+ // 时间线小圆形节点背景色
& &__chart-children &__chart-line &__chart-icon.time-line-icon {
- background-color: var(--ti-wizard-time-lines-bg-color);
+ background-color: var(--tv-Wizard-time-lines-bg-color);
}
& &__chart-icon,
@@ -410,26 +420,22 @@
cursor: pointer;
}
+ // 节点线样式
& &__chart-line {
- height: var(--ti-wizard-lines-height);
- background: var(--ti-wizard-lines-normal-bg-color);
- width: var(--ti-wizard-lines-width);
+ height: 1px;
+ background: var(--tv-Wizard-lines-normal-bg-color);
+ width: var(--tv-Wizard-lines-width);
&:first-child {
- margin-right: var(--ti-wizard-lines-margin-horizontal);
+ margin-right: var(--tv-Wizard-lines-margin-horizontal);
}
&:last-child {
- margin-left: var(--ti-wizard-lines-margin-horizontal);
+ margin-left: var(--tv-Wizard-lines-margin-horizontal);
}
}
- & &__chart-line &__chart-icon-time {
- font-size: var(--ti-common-font-size-4);
- fill: var(--ti-wizard-icon-bg-color);
- background: var(--ti-wizard-icon-color);
- }
-
+ // 时间线联系人信息
.@{user-contact-prefix-cls} {
.dropdown-part .@{user-head-prefix-cls},
.@{svg-prefix-cls} {
diff --git a/packages/theme/src/wizard/old-theme.js b/packages/theme/src/wizard/old-theme.js
index 26f202a64b..a2c25a2b05 100644
--- a/packages/theme/src/wizard/old-theme.js
+++ b/packages/theme/src/wizard/old-theme.js
@@ -1,51 +1,51 @@
export const tinyWizardOldTheme = {
- 'ti-wizard-time-right-title-margin-bottom': 'var(----ti-common-space-2x, 8px)',
- 'ti-wizard-time-right-padding-vertical': 'var(--ti-common-size-base, 4px)',
- 'ti-wizard-time-right-margin-left': 'var(--ti-common-space-3x, 12px)',
- 'ti-wizard-time-right-text-align': 'center',
- 'ti-wizard-time-dot-size': 'calc(var(--ti-common-size-base, 4) * 2.5)',
- 'ti-wizard-time-left-line-height': '1.2em',
- 'ti-wizard-time-left-icon-size': 'var(--ti-common-font-size-base, 14px)',
- 'ti-wizard-time-left-icon-margin-left': 'var(--ti-common-space-base, 4px)',
- 'ti-wizard-time-left-icon-color': 'auto',
- 'ti-wizard-time-left-icon-margin-right': 'var(--ti-common-space-0, 0px)',
- 'ti-wizard-time-left-point-position-top': '-14px',
- 'ti-wizard-time-left-position-top': '-24px',
- 'ti-wizard-time-left-margin-right': 'var(--ti-common-space-0, 0px)',
- 'ti-wizard-time-left-min-width': 'var(--ti-common-size-25x, 100px)',
- 'ti-wizard-time-node-icon-height': 'var(--ti-common-line-height-4, 20px)',
- 'ti-wizard-time-node-icon-width': 'var(--ti-common-size-4x, 16px)',
- 'ti-wizard-time-node-border-weight': 'var(--ti-common-border-weight-1, 2px)',
- 'ti-wizard-time-node-size': 'var(--ti-common-font-size-5, 24px)',
- 'ti-wizard-vertical-wait-desc-text-color': 'inherit',
- 'ti-wizard-vertical-desc-text-color': 'inherit',
- 'ti-wizard-vertical-desc-font-size': 'var(--ti-common-font-size-1, 14px)',
- 'ti-wizard-vertical-title-line-height': 'auto',
- 'ti-wizard-vertical-desc-margin-top': 'var(--ti-common-space-2x, 8px)',
- 'ti-wizard-vertical-text-margin-left': '15px',
- 'ti-wizard-vertical-node-box-height': 'auto',
- 'ti-wizard-vertical-icon-position-top': '-14px',
- 'ti-wizard-vertical-line-position-top': '0px',
- 'ti-wizard-vertical-icon-position': 'relative',
- 'ti-wizard-vertical-line-height': 'var(--ti-common-size-22x, 88px)',
- 'ti-wizard-vertical-line-width': 'var(--ti-common-size-base, 4px)',
- 'ti-wizard-button-group-text-align': 'right',
- 'ti-wizard-button-margin-left': 'var(--ti-common-space-2x, 8px)',
- 'ti-wizard-button-group-margin-top': 'var(--ti-common-space-10, 10px)',
- 'ti-wizard-node-title-margin-top': 'var(--ti-common-space-6, 6px)',
- 'ti-wizard-lines-normal-border-weight': '0px',
- 'ti-wizard-node-doing-font-weight': 'normal',
- 'ti-wizard-right-lines-doing-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
- 'ti-wizard-chart-icon-bg-color': 'var(--ti-common-color-line-disabled, #dfe1e6)',
- 'ti-wizard-last-lines-bg-color': 'var(--ti-wizard-lines-normal-bg-color, #dfe1e6)',
- 'ti-wizard-time-last-lines-bg-color': 'none',
- 'ti-wizard-lines-normal-bg-color': '#c2c4c7',
- 'ti-wizard-first-lines-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
- 'ti-wizard-lines-margin-horizontal': 'var(--ti-common-space-0, 0px)',
- 'ti-wizard-lines-width': 'calc(var(--ti-common-size-base, 4px) * 12.5)',
- 'ti-wizard-lines-height': 'var(--ti-common-size-base, 4px)',
- 'ti-wizard-node-size': 'var(--ti-common-font-size-4, 20px)',
- 'ti-wizard-icon-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
- 'ti-wizard-normal-icon-color': 'var(--ti-common-color-light, #fff)',
- 'ti-wizard-icon-color': 'var(--ti-common-color-light, #fff)'
+ 'tv-Wizard-time-right-title-margin-bottom': 'var(----ti-common-space-2x, 8px)',
+ 'tv-Wizard-time-right-padding-vertical': 'var(--ti-common-size-base, 4px)',
+ 'tv-Wizard-time-right-margin-left': 'var(--ti-common-space-3x, 12px)',
+ 'tv-Wizard-time-right-text-align': 'center',
+ 'tv-Wizard-time-dot-size': 'calc(var(--ti-common-size-base, 4) * 2.5)',
+ 'tv-Wizard-time-left-line-height': '1.2em',
+ 'tv-Wizard-time-left-icon-size': 'var(--ti-common-font-size-base, 14px)',
+ 'tv-Wizard-time-left-icon-margin-left': 'var(--ti-common-space-base, 4px)',
+ 'tv-Wizard-time-left-icon-color': 'auto',
+ 'tv-Wizard-time-left-icon-margin-right': 'var(--ti-common-space-0, 0px)',
+ 'tv-Wizard-time-left-point-position-top': '-14px',
+ 'tv-Wizard-time-left-position-top': '-24px',
+ 'tv-Wizard-time-left-margin-right': 'var(--ti-common-space-0, 0px)',
+ 'tv-Wizard-time-left-min-width': 'var(--ti-common-size-25x, 100px)',
+ 'tv-Wizard-time-node-icon-height': 'var(--ti-common-line-height-4, 20px)',
+ 'tv-Wizard-time-node-icon-width': 'var(--ti-common-size-4x, 16px)',
+ 'tv-Wizard-time-node-border-weight': 'var(--ti-common-border-weight-1, 2px)',
+ 'tv-Wizard-time-node-size': 'var(--ti-common-font-size-5, 24px)',
+ 'tv-Wizard-vertical-wait-desc-text-color': 'inherit',
+ 'tv-Wizard-vertical-desc-text-color': 'inherit',
+ 'tv-Wizard-vertical-desc-font-size': 'var(--ti-common-font-size-1, 14px)',
+ 'tv-Wizard-vertical-title-line-height': 'auto',
+ 'tv-Wizard-vertical-desc-margin-top': 'var(--ti-common-space-2x, 8px)',
+ 'tv-Wizard-vertical-text-margin-left': '15px',
+ 'tv-Wizard-vertical-node-box-height': 'auto',
+ 'tv-Wizard-vertical-icon-position-top': '-14px',
+ 'tv-Wizard-vertical-line-position-top': '0px',
+ 'tv-Wizard-vertical-icon-position': 'relative',
+ 'tv-Wizard-vertical-line-height': 'var(--ti-common-size-22x, 88px)',
+ 'tv-Wizard-vertical-line-width': 'var(--ti-common-size-base, 4px)',
+ 'tv-Wizard-button-group-text-align': 'right',
+ 'tv-Wizard-button-margin-left': 'var(--ti-common-space-2x, 8px)',
+ 'tv-Wizard-button-group-margin-top': 'var(--ti-common-space-10, 10px)',
+ 'tv-Wizard-node-title-margin-top': 'var(--ti-common-space-6, 6px)',
+ 'tv-Wizard-lines-normal-border-weight': '0px',
+ 'tv-Wizard-node-doing-font-weight': 'normal',
+ 'tv-Wizard-right-lines-doing-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
+ 'tv-Wizard-chart-icon-bg-color': 'var(--ti-common-color-line-disabled, #dfe1e6)',
+ 'tv-Wizard-last-lines-bg-color': 'var(--tv-Wizard-lines-normal-bg-color, #dfe1e6)',
+ 'tv-Wizard-time-last-lines-bg-color': 'none',
+ 'tv-Wizard-lines-normal-bg-color': '#c2c4c7',
+ 'tv-Wizard-first-lines-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
+ 'tv-Wizard-lines-margin-horizontal': 'var(--ti-common-space-0, 0px)',
+ 'tv-Wizard-lines-width': 'calc(var(--ti-common-size-base, 4px) * 12.5)',
+ 'tv-Wizard-lines-height': 'var(--ti-common-size-base, 4px)',
+ 'tv-Wizard-node-size': 'var(--ti-common-font-size-4, 20px)',
+ 'tv-Wizard-icon-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)',
+ 'tv-Wizard-normal-icon-color': 'var(--ti-common-color-light, #fff)',
+ 'tv-Wizard-icon-color': 'var(--ti-common-color-light, #fff)'
}
diff --git a/packages/theme/src/wizard/vars.less b/packages/theme/src/wizard/vars.less
index 88388d15d7..6a016aecd5 100644
--- a/packages/theme/src/wizard/vars.less
+++ b/packages/theme/src/wizard/vars.less
@@ -10,129 +10,123 @@
*
*/
-.component-css-vars-wizard() {
+.inject-Wizard-vars() {
// 横向流程图默认字号(不含基础插槽)
- --ti-wizard-font-size: var(--ti-common-font-size-base, 14px);
+ --tv-Wizard-font-size: var(--tv-font-size-md, 14px);
// 节点文本色|图标色
- --ti-wizard-icon-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-icon-color: var(--tv-color-icon-hover, #191919);
// 未完成节点文本色|图标色
- --ti-wizard-normal-icon-color: var(--ti-common-color-text-disabled, #c2c2c2);
+ --tv-Wizard-normal-icon-color: var(--tv-color-text-disabled, #c2c2c2);
// 时间线流程图节点两侧文本色
- --ti-wizard-text-color: var(--ti-common-color-info-normal, #191919);
+ --tv-Wizard-text-color: var(--tv-color-info-text-primary, #191919);
// 时间线流程图节点右侧文字悬浮圆角
- --ti-wizard-detail-border-radius: var(--ti-common-border-radius-normal, 6px);
+ --tv-Wizard-detail-border-radius: var(--tv-border-radius-md, 6px);
// 时间线流程图节点右侧文字悬浮背景色
- --ti-wizard-detail-bg-color: var(--ti-common-color-warning-normal, #ff8800);
+ --tv-Wizard-detail-bg-color: var(--tv-color-warn-bg, #ff8800);
// 已完成的节点和线条背景色
- --ti-wizard-icon-bg-color: var(--ti-common-color-light, #ffffff);
+ --tv-Wizard-icon-bg-color: var(--tv-color-success-bg-white, #ffffff);
// 已完成的节点边框色
- --ti-wizard-icon-border-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-icon-border-color: var(--tv-color-act-primary-border, #191919);
// 节点下方文本色
- --ti-wizard-node-text-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-node-text-color: var(--tv-color-text, #191919);
// 节点尺寸
- --ti-wizard-node-size: var(--ti-common-font-size-6, 32px);
- // 节点线高度
- --ti-wizard-lines-height: var(--ti-common-border-weight-normal, 1px);
+ --tv-Wizard-node-size: var(--tv-font-size-heading-xl, 32px);
// 节点线宽度
- --ti-wizard-lines-width: var(--ti-common-size-width-minor, 30px);
+ --tv-Wizard-lines-width: 30px;
// 节点线左右外边距
- --ti-wizard-lines-margin-horizontal: var(--ti-common-dropdown-gap, 4px);
+ --tv-Wizard-lines-margin-horizontal: var(--tv-space-base, 4px);
// 第一条节点线颜色
- --ti-wizard-first-lines-bg-color: var(--ti-common-color-transparent, transparent);
+ --tv-Wizard-first-lines-bg-color: transparent;
// 节点线颜色
- --ti-wizard-lines-bg-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-lines-bg-color: var(--tv-color-bg-active-primary, #191919);
// 未完成节点线背景色
- --ti-wizard-lines-normal-bg-color: var(--ti-common-color-line-disabled, #dbdbdb);
+ --tv-Wizard-lines-normal-bg-color: var(--tv-color-bg-disabled-control-checked, #dbdbdb);
// 时间线节点线颜色
- --ti-wizard-time-lines-bg-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-time-lines-bg-color: var(--tv-color-act-primary-bg, #191919);
// 时间线最后一条节点线颜色
- --ti-wizard-time-last-lines-bg-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-time-last-lines-bg-color: var(--tv-color-act-primary-bg, #191919);
// 最后一条节点线颜色
- --ti-wizard-last-lines-bg-color: var(--ti-common-color-transparent, transparent);
+ --tv-Wizard-last-lines-bg-color: transparent;
// 未完成的节点背景色
- --ti-wizard-chart-icon-bg-color: var(--ti-common-color-bg-light-normal, #f0f0f0);
+ --tv-Wizard-chart-icon-bg-color: var(--tv-color-bg-header, #f0f0f0);
// doing节点右侧线背景色
- --ti-wizard-right-lines-doing-bg-color: var(--ti-common-color-line-disabled, #dbdbdb);
+ --tv-Wizard-right-lines-doing-bg-color: var(--tv-color-bg-disabled-control-checked, #dbdbdb);
// doing节点下方字重
- --ti-wizard-node-doing-font-weight: var(--ti-common-font-weight-bold, 600);
+ --tv-Wizard-node-doing-font-weight: var(--tv-font-weight-bold, 600);
// 未完成节点边框色
- --ti-wizard-lines-normal-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
+ --tv-Wizard-lines-normal-border-color: var(--tv-color-border-disabled, #dbdbdb);
// 未完成节点边框厚度
- --ti-wizard-lines-normal-border-weight: var(--ti-common-border-weight-normal, 1px);
+ --tv-Wizard-lines-normal-border-weight: var(--tv-border-width, 1px);
// 节点标题上外边距
- --ti-wizard-node-title-margin-top: var(--ti-common-dropdown-gap, 4px);
+ --tv-Wizard-node-title-margin-top: var(--tv-space-base, 4px);
// 页向导模式按钮组上外边距
- --ti-wizard-button-group-margin-top: calc(var(--ti-common-space-base, 4px) * 9);
+ --tv-Wizard-button-group-margin-top: calc(var(--tv-space-base, 4px) * 9);
// 页向导模式按钮左外边距
- --ti-wizard-button-margin-left: var(--ti-common-space-3x, 12px);
- // 页向导模式按钮组上对齐方式(hide)
- --ti-wizard-button-group-text-align: left;
+ --tv-Wizard-button-margin-left: var(--tv-space-lg, 12px);
// 垂直模式线条宽度
- --ti-wizard-vertical-line-width: var(--ti-common-border-weight-normal, 1px);
+ --tv-Wizard-vertical-line-width: var(--tv-border-width, 1px);
// 垂直模式线条高度
- --ti-wizard-vertical-line-height: var(--ti-common-line-height-8, 60px);
+ --tv-Wizard-vertical-line-height: 60px;
// 垂直模式图标定位模式(hide)
- --ti-wizard-vertical-icon-position: absolute;
+ --tv-Wizard-vertical-icon-position: absolute;
+ // 垂直模式文本外边距(hide)
+ --tv-Wizard-vertical-line-position-top: 54px;
// 垂直模式文件外边距(hide)
- --ti-wizard-vertical-position-top: -5px;
- // 垂直模式文件外边距(hide)
- --ti-wizard-vertical-line-position-top: 54px;
- // 垂直模式文件外边距(hide)
- --ti-wizard-vertical-icon-position-top: -40px;
+ --tv-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);
+ --tv-Wizard-vertical-node-box-height: calc(var(--tv-Wizard-vertical-line-height) + var(--tv-Wizard-node-size) + 16px);
// 垂直模式节点文字左外边距
- --ti-wizard-vertical-text-margin-left: 21.5px;
+ --tv-Wizard-vertical-text-margin-left: 21.5px;
// 垂直模式节点描述文字上外边距
- --ti-wizard-vertical-desc-margin-top: var(--ti-common-space-0, 0px);
+ --tv-Wizard-vertical-desc-margin-top: 0px;
// 垂直模式节点标题文字行高
- --ti-wizard-vertical-title-line-height: var(--ti-common-line-height-number, 1.5);
+ --tv-Wizard-vertical-title-line-height: var(--tv-line-height-number, 1.5);
// 垂直模式节点标题字号
- --ti-wizard-vertical-title-font-size: var(--ti-common-font-size-1, 14px);
+ --tv-Wizard-vertical-title-font-size: var(--tv-font-size-md, 14px);
// 垂直模式节点描述字号
- --ti-wizard-vertical-desc-font-size: var(--ti-common-font-size-0, 12px);
+ --tv-Wizard-vertical-desc-font-size: var(--tv-font-size-sm, 12px);
// 垂直模式节点描述文本色
- --ti-wizard-vertical-desc-text-color: var(--ti-common-color-text-weaken, #808080);
+ --tv-Wizard-vertical-desc-text-color: var(--tv-color-text-weaken, #808080);
// 垂直模式未完成节点描述文本色
- --ti-wizard-vertical-wait-desc-text-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-vertical-wait-desc-text-color: var(--tv-color-text, #191919);
// 时间线节点尺寸
- --ti-wizard-time-node-size: var(--ti-common-font-size-6, 32px);
+ --tv-Wizard-time-node-size: var(--tv-font-size-heading-xl, 32px);
// 时间线节点边框厚度
- --ti-wizard-time-node-border-weight: 0;
+ --tv-Wizard-time-node-border-weight: 0;
// 时间线节点内图标宽度
- --ti-wizard-time-node-icon-width: var(--ti-common-font-size-6, 32px);
+ --tv-Wizard-time-node-icon-width: var(--tv-font-size-heading-xl, 32px);
// 时间线节点内图标高度
- --ti-wizard-time-node-icon-height: var(--ti-common-font-size-6, 32px);
+ --tv-Wizard-time-node-icon-height: var(--tv-font-size-heading-xl, 32px);
// 时间线节点内图标色
- --ti-wizard-time-node-icon-color: var(--ti-common-color-bg-emphasize, #191919);
+ --tv-Wizard-time-node-icon-color: var(--tv-color-icon-hover, #191919);
// 时间线节点内图标背景色
- --ti-wizard-time-node-bg-color: var(--ti-common-color-light, #ffffff);
+ --tv-Wizard-time-node-bg-color: var(--tv-color-success-bg-white, #ffffff);
// 时间线节点左侧日期最小宽度
- --ti-wizard-time-left-min-width: var(--ti-common-size-width-medium, 120px);
+ --tv-Wizard-time-left-min-width: 120px;
// 时间线节点左侧日期右外边距
- --ti-wizard-time-left-margin-right: var(--ti-common-space-2x, 8px);
+ --tv-Wizard-time-left-margin-right: var(--tv-space-md, 8px);
// 时间线节点左侧日期top定位(hide)
- --ti-wizard-time-left-position-top: -28px;
+ --tv-Wizard-time-left-position-top: -28px;
// 时间线节点左侧时间top定位(hide)
- --ti-wizard-time-left-point-position-top: -15px;
+ --tv-Wizard-time-left-point-position-top: -15px;
// 时间线节点左侧展开图标右外边距
- --ti-wizard-time-left-icon-margin-right: var(--ti-common-space-10, 10px);
+ --tv-Wizard-time-left-icon-margin-right: 10px;
// 时间线节点左侧展开图标色
- --ti-wizard-time-left-icon-color: var(--ti-common-color-icon-normal, #808080);
+ --tv-Wizard-time-left-icon-color: var(--tv-color-icon, #808080);
// 时间线节点左侧日期图标左外边距
- --ti-wizard-time-left-icon-margin-left: var(--ti-common-space-2x, 8px);
+ --tv-Wizard-time-left-icon-margin-left: var(--tv-space-md, 8px);
// 时间线节点左侧日期图标尺寸
- --ti-wizard-time-left-icon-size: var(--ti-common-font-size-2, 16px);
+ --tv-Wizard-time-left-icon-size: var(--tv-font-size-heading-xs, 16px);
// 时间线节点左侧文字行高
- --ti-wizard-time-left-line-height: var(--ti-common-line-height-number, 1.5);
+ --tv-Wizard-time-left-line-height: var(--tv-line-height-number, 1.5);
// 时间线节点小圆点尺寸
- --ti-wizard-time-dot-size: var(--ti-common-size-3x, 12px);
+ --tv-Wizard-time-dot-size: var(--tv-font-size-sm, 12px);
// 时间线节点右侧文字对齐方式(hide)
- --ti-wizard-time-right-text-align: left;
+ --tv-Wizard-time-right-text-align: left;
// 时间线节点右侧文字左外边距
- --ti-wizard-time-right-margin-left: 15.5px;
+ --tv-Wizard-time-right-margin-left: 15.5px;
// 时间线节点右侧文字垂直内边距
- --ti-wizard-time-right-padding-vertical: var(--ti-common-space-0, 0px);
+ --tv-Wizard-time-right-padding-vertical: 0px;
// 时间线节点右侧标题底部外边距
- --ti-wizard-time-right-title-margin-bottom: var(--ti-common-space-0, 0px);
+ --tv-Wizard-time-right-title-margin-bottom: 0px;
}
diff --git a/packages/vue/src/wizard/__tests__/wizard.test.tsx b/packages/vue/src/wizard/__tests__/wizard.test.tsx
index e5a713a37f..8fbabf9127 100644
--- a/packages/vue/src/wizard/__tests__/wizard.test.tsx
+++ b/packages/vue/src/wizard/__tests__/wizard.test.tsx
@@ -94,12 +94,12 @@ describe('PC Mode', () => {
test('base-flow 基本流程图模式', async () => {
const wrapper = mount(() => )
- expect(wrapper.find('.tiny-wizard__nomarl').exists()).toBeTruthy()
+ expect(wrapper.find('.tiny-wizard__normal').exists()).toBeTruthy()
})
test('page-guide 页向导流程图', async () => {
const wrapper = mount(() => )
- expect(wrapper.find('.tiny-wizard__nomarl').exists()).toBeTruthy()
+ expect(wrapper.find('.tiny-wizard__normal').exists()).toBeTruthy()
expect(wrapper.find('.tiny-wizard__button').exists()).toBeTruthy()
})
diff --git a/packages/vue/src/wizard/src/pc.vue b/packages/vue/src/wizard/src/pc.vue
index 70e106f965..71c5bad78e 100644
--- a/packages/vue/src/wizard/src/pc.vue
+++ b/packages/vue/src/wizard/src/pc.vue
@@ -12,7 +12,7 @@