refactor(steps): [steps, timeline] Refactoring the steps and timeline…

… themes (#2261) * refactor(steps): [steps, timeline] 重构steps和timeline主题 * refactor(steps): [steps, timeline] 修复测试用例报错
opentiny · Oct 14, 2024 · 50c0b05 · 50c0b05
1 parent 47371e5
commit 50c0b05
Show file tree

Hide file tree

Showing 8 changed files with 905 additions and 1,070 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'
 }