refactor(wizard): [wizard] refactor the Wizard Theme (#2279)

* refactor(wizard): [wizard] 重构wizard主题

* refactor(wizard): [wizard] 修复测试用例报错

Author: chenxi-20

examples/sites/demos/pc/app/wizard/base-usage.spec.ts

@@ -10,7 +10,6 @@ test('基本用法', async ({ page }) => {
   const chartCount = 5
   const itemStatus = [/is-ready/, /is-doing/]
   const descs = ['出差信息填写', '项目信息填写', '主管审批', '权签人审批', '完成申请']
-  const readyColor = 'rgb(94, 124, 224)'
 
   await expect(charts).toHaveCount(chartCount)
   for (let i = 0; i < chartCount; i++) {
@@ -20,21 +19,24 @@ test('基本用法', async ({ page }) => {
     const middle = itemList.nth(1)
     const last = itemList.nth(2)
 
-    await expect(items).toHaveCSS('width', '120px')
-    await expect(items).toHaveCSS('height', '20px')
+    await expect(items).toHaveCSS('width', '100px')
+    await expect(items).toHaveCSS('height', '32px')
     await expect(first).toHaveClass('tiny-wizard__chart-line')
     await expect(middle).toHaveClass(/tiny-wizard__chart-icon/)
     await expect(middle).toHaveText(String(i + 1))
     await expect(last).toHaveClass('tiny-wizard__chart-line')
     await expect(names.nth(i)).toHaveText(descs[i])
 
-    if (i < 2) {
+    if (i < 1) {
       await expect(stepItems.nth(i)).toHaveClass(itemStatus[i])
-      await expect(first).toHaveCSS('background-color', readyColor)
-      await expect(middle).toHaveCSS('background-color', readyColor)
+      await expect(first).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+      await expect(middle).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+    } else if (i === 1) {
+      await expect(first).toHaveCSS('background-color', 'rgb(25, 25, 25)')
+      await expect(middle).toHaveCSS('background-color', 'rgb(255, 255, 255)')
     } else {
-      await expect(first).toHaveCSS('background-color', 'rgb(194, 196, 199)')
-      await expect(middle).toHaveCSS('background-color', 'rgb(223, 225, 230)')
+      await expect(first).toHaveCSS('background-color', 'rgb(219, 219, 219)')
+      await expect(middle).toHaveCSS('background-color', 'rgb(240, 240, 240)')
     }
   }
 })

examples/sites/demos/pc/app/wizard/time-line-flow.spec.ts

@@ -33,18 +33,18 @@ test('时间线流程图', async ({ page }) => {
   await expect(details).toHaveCount(3)
   await expect(userNames).toHaveCount(3)
   for (let i = 0; i < 3; i++) {
-    await expect(childNodeLines.nth(i)).toHaveCSS('width', '4px')
+    await expect(childNodeLines.nth(i)).toHaveCSS('width', '1px')
     await expect(childNodeLines.nth(i)).toHaveCSS('height', '88px')
     await expect(details.nth(i)).toHaveText(texts[i])
     await expect(childNodeDates.nth(i)).toHaveText(/20*1*:50/)
 
     if (i === 2) {
-      await expect(childNodeLines.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+      await expect(childNodeLines.nth(i)).toHaveCSS('background-color', 'rgb(25, 25, 25)')
     }
     if (i < 2) {
-      await expect(nodeIcons.nth(i)).toHaveCSS('width', '16px')
-      await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
-      await expect(nodeLines.nth(i)).toHaveCSS('width', '4px')
+      await expect(nodeIcons.nth(i)).toHaveCSS('width', '32px')
+      await expect(nodeIcons.nth(i)).toHaveCSS('height', '32px')
+      await expect(nodeLines.nth(i)).toHaveCSS('width', '1px')
       await expect(nodeLines.nth(i)).toHaveCSS('height', '88px')
     }
   }

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

@@ -16,17 +16,19 @@ test('垂直流程图', async ({ page }) => {
   await expect(nodeNames).toHaveCount(nodeCount)
   for (let i = 0; i < nodeCount; i++) {
     await expect(nodeNames.nth(i)).toHaveText(names[i])
-    await expect(nodeLines.nth(i)).toHaveCSS('width', '4px')
-    await expect(nodeLines.nth(i)).toHaveCSS('height', '88px')
-    await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
-    await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
+    await expect(nodeLines.nth(i)).toHaveCSS('width', '1px')
+    await expect(nodeLines.nth(i)).toHaveCSS('height', '60px')
+    await expect(nodeIcons.nth(i)).toHaveCSS('height', '32px')
 
     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)')
+      await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+      await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(240, 240, 240)')
+    } else if (i === 3) {
+      await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(219, 219, 219)')
+      await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
     } else {
-      await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-      await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+      await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(25, 25, 25)')
+      await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
     }
   }
 })

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;