Skip to content

Commit 50c0b05

Browse files
chenxi-20chenxi-20
authored
refactor(steps): [steps, timeline] Refactoring the steps and timeline themes (#2261)
* refactor(steps): [steps, timeline] 重构steps和timeline主题 * refactor(steps): [steps, timeline] 修复测试用例报错
1 parent 47371e5 commit 50c0b05

File tree

8 files changed

+905
-1070
lines changed

8 files changed

+905
-1070
lines changed

‎examples/sites/demos/apis/steps.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@ export default {
1919
},
2020
{
2121
name: 'advanced',
22-
type: 'Boolean',
22+
type: 'boolean',
2323
defaultValue: 'false',
2424
desc: {
2525
'zh-CN': '是否开启高级向导模式',
2626
'en-US': 'Enable Advanced Wizard Mode'
2727
},
28-
mode: ['mobile-first'],
28+
mode: ['mobile-first', 'pc'],
29+
pcDemo: 'advanced-steps',
2930
mfDemo: 'advanced-steps'
3031
},
3132
{
@@ -99,6 +100,17 @@ export default {
99100
mode: ['pc'],
100101
pcDemo: 'node-width'
101102
},
103+
{
104+
name: 'line',
105+
type: 'boolean',
106+
defaultValue: 'false',
107+
desc: {
108+
'zh-CN': '通过 line 设置横向单链型步骤条',
109+
'en-US': 'Set horizontal single chain step bar through line'
110+
},
111+
mode: ['pc'],
112+
pcDemo: 'basic-usage'
113+
},
102114
{
103115
name: 'name-field',
104116
type: 'string',

‎examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ import { Steps as TinySteps, Modal } from '@opentiny/vue'
1515
1616
const advancedActive = ref(1)
1717
const data = ref([
18-
{ name: 'Basic Info', count: 3, status: 'doing' },
19-
{ name: 'BOQ Info', count: 0, status: 'done' },
20-
{ name: 'Involved Parties', count: 10, status: 'doing' },
21-
{ name: 'Billing', count: 0, status: 'done' },
22-
{ name: 'Appraise', count: 0 }
18+
{ name: 'Basic Info', count: 3, status: 'done' },
19+
{ name: 'BOQ Info', count: 0, status: 'doing' },
20+
{ name: 'Involved Parties', count: 10, status: 'error' },
21+
{ name: 'Billing', count: 0, status: 'disabled' },
22+
{ name: 'Appraise', count: 3 }
2323
])
2424
2525
const advancedClick = (index, node) => {

‎examples/sites/demos/pc/app/steps/advanced-steps.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ test('高级向导', async ({ page }) => {
1010
const nodes = steps.locator('.tiny-steps-advanced li')
1111

1212
await expect(stepsWrapper).toBeVisible()
13-
await expect(nodes.first()).toHaveClass('doing')
14-
await expect(nodes.nth(1)).toHaveClass(/done/)
13+
await expect(nodes.first()).toHaveClass('done')
14+
await expect(nodes.nth(1)).toHaveClass(/doing/)
1515
await expect(nodes.nth(1)).toHaveClass(/current/)
1616
await nodes.nth(3).click()
1717
await expect(nodes.nth(3)).toHaveClass(/current/)
@@ -21,6 +21,6 @@ test('高级向导', async ({ page }) => {
2121
const advancedSteps = page.locator('.pc-demo .tiny-steps-senior')
2222
const advancedNodes = advancedSteps.locator('.tiny-steps-block')
2323
await expect(advancedSteps).toBeVisible()
24-
await expect(advancedNodes.first()).toHaveClass(/doing/)
25-
await expect(advancedNodes.nth(1)).toHaveClass(/done/)
24+
await expect(advancedNodes.first()).toHaveClass(/done/)
25+
await expect(advancedNodes.nth(1)).toHaveClass(/doing/)
2626
})

‎packages/theme/src/steps/aurora-theme.js

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
11
export const tinyStepsAuroraTheme = {
2-
'ti-steps-text-color': '#191919',
3-
'ti-steps-text-color-hover': '#191919',
4-
'ti-steps-description-text-color': '#777777',
5-
'ti-steps-font-size-base': 'var(--ti-common-font-size-base)',
6-
'ti-steps-border-color-hover': '#aeaeae',
7-
'ti-steps-advanced-li-text-color': 'var(--ti-common-color-text-white)',
8-
'ti-steps-line-margin-horizontal': '0px', // px不能省略
9-
'ti-steps-line-bg-color': '#dbdbdb',
10-
'ti-steps-line-height': 'var(--ti-common-space-base)',
11-
'ti-steps-unselected-icon-color': 'var(--ti-common-color-text-white)',
12-
'ti-steps-unselected-border-color': '#d9d9d9',
13-
'ti-steps-icon-bg-color': 'var(--ti-common-color-line-normal)',
14-
'ti-steps-icon-hover-text-color': '#aeaeae',
15-
'ti-steps-bg-color-hover': '#f3f3f3',
16-
'ti-steps-advanced-error-bg-color': '#fee7e8',
17-
'ti-steps-advanced-error-bg-color-hover': '#fabdc1',
18-
'ti-steps-advanced-error-bg-color-selected': '#e02128',
19-
'ti-steps-error-border-color': '#e02128',
20-
'ti-steps-error-text-color': '#e02128',
21-
'ti-steps-advanced-disabled-bg-color': '#f3f3f3',
22-
'ti-steps-done-active-border-color': 'var(--ti-common-color-line-active)',
23-
'ti-steps-done-active-border-color-hover': 'var(--ti-common-color-line-hover)',
24-
'ti-steps-doing-icon-bg-color': '#eef3fe',
25-
'ti-steps-disabled-icon-color': '#c9c9c9',
26-
'ti-steps-disabled-name-text-color': '#c9c9c9',
27-
'ti-steps-disabled-text-color': '#777777',
28-
'ti-steps-disabled-select-icon-bg-color': '#c9c9c9',
29-
'ti-steps-disabled-select-icon-color': 'var(--ti-common-color-text-white)',
30-
'ti-steps-active-font-weight': 'var(--ti-common-font-weight-7)',
31-
'ti-steps-unselected-hover-icon-color': 'var(--ti-common-color-text-white)',
32-
'ti-steps-unselected-hover-name-text-color': 'var(--ti-common-text-color-normal)',
33-
'ti-steps-unselected-hover-border-color': 'var(--ti-common-color-line-normal)',
34-
'ti-steps-advanced-li-hover-bg-color': 'var(--ti-common-bg-color-header-1)',
35-
'ti-steps-advanced-done-bg-color': '#eef3fe',
36-
'ti-steps-advanced-doing-bg-color': '#eef3fe',
37-
'ti-steps-advanced-done-bg-color-hover': '#d0d8fd',
38-
'ti-steps-advanced-doing-bg-color-hover': '#2e8bde',
39-
'ti-steps-name-margin-right': 'var(--ti-common-space-2x)',
40-
'ti-steps-error-bg-color': 'var(--ti-common-bg-primary)',
41-
'ti-steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled)',
42-
'ti-steps-error-icon-color': '#fff'
2+
'tv-Steps-text-color': '#191919',
3+
'tv-Steps-node-title-text-color-hover': '#191919',
4+
'tv-Steps-node-desc-text-color': '#777777',
5+
'tv-Steps-font-size': 'var(--ti-common-font-size-base)',
6+
'tv-Steps-line-number-border-color-hover': '#aeaeae',
7+
'tv-Steps-advance-li-text-color': 'var(--ti-common-color-text-white)',
8+
'tv-Steps-line-margin-horizontal': '0px', // px不能省略
9+
'tv-Steps-line-bg-color': '#dbdbdb',
10+
'tv-Steps-line-height': 'var(--ti-common-space-base)',
11+
'tv-Steps-unselected-icon-color': 'var(--ti-common-color-text-white)',
12+
'tv-Steps-node-border-color': '#d9d9d9',
13+
'tv-Steps-node-icon-bg-color': 'var(--ti-common-color-line-normal)',
14+
'tv-Steps-line-number-text-color-hover': '#aeaeae',
15+
'tv-Steps-line-number-bg-color-hover': '#f3f3f3',
16+
'tv-Steps-advance-node-error-bg-color': '#fee7e8',
17+
'tv-Steps-advance-node-error-bg-color-hover': '#fabdc1',
18+
'tv-Steps-advance-node-error-bg-color-active': '#e02128',
19+
'tv-Steps-error-border-color': '#e02128',
20+
'tv-Steps-error-text-color': '#e02128',
21+
'tv-Steps-advance-node-disable-bg-color': '#f3f3f3',
22+
'tv-Steps-node-done-border-color': 'var(--ti-common-color-line-active)',
23+
'tv-Steps-line-done-border-color-hover': 'var(--ti-common-color-line-hover)',
24+
'tv-Steps-line-doing-icon-bg-color': '#eef3fe',
25+
'tv-Steps-disabled-icon-color': '#c9c9c9',
26+
'tv-Steps-line-title-text-color-disabled': '#c9c9c9',
27+
'tv-Steps-disabled-text-color': '#777777',
28+
'tv-Steps-line-number-active-bg-color-disabled': '#c9c9c9',
29+
'tv-Steps-line-number-active-text-color-disabled': 'var(--ti-common-color-text-white)',
30+
'tv-Steps-active-font-weight': 'var(--ti-common-font-weight-7)',
31+
'tv-Steps-advance-li-hover-bg-color': 'var(--ti-common-bg-color-header-1)',
32+
'tv-Steps-advance-node-done-bg-color': '#eef3fe',
33+
'tv-Steps-advance-node-doing-bg-color': '#eef3fe',
34+
'tv-Steps-advance-node-done-bg-color-hover': '#d0d8fd',
35+
'tv-Steps-advance-node-doing-bg-color-hover': '#2e8bde',
36+
'tv-Steps-name-margin-right': 'var(--ti-common-space-2x)',
37+
'tv-Steps-error-bg-color': 'var(--ti-common-bg-primary)',
38+
'tv-Steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled)',
39+
'tv-Steps-error-icon-color': '#fff'
4340
}

0 commit comments

Comments
 (0)