Skip to content

Commit 50489a1

Browse files
shenjunjianshenjunjian
authored
refactor(tag-group): [tag-group] update tag-group theme (#2271)
* refactor(tag-group): update tag-group theme * refactor(tag-group): update tag-group theme * fix(tag-group): fix e2e test * fix(tag-group): fix 2e2
1 parent 504e7b6 commit 50489a1

16 files changed

+321
-218
lines changed

‎examples/sites/demos/pc/app/tag-group/basic-usage.spec.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,22 @@ test('TagGroup 基础用法', async ({ page }) => {
77
const tagGroup = page.locator('.tiny-tag-group')
88

99
const tag1 = tagGroup.getByText('标签一')
10-
await expect(tag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
11-
await expect(tag1).toHaveCSS('color', 'rgb(87, 93, 108)')
10+
await expect(tag1).toHaveCSS('background-color', 'rgb(245, 245, 245)')
11+
await expect(tag1).toHaveCSS('color', 'rgb(25, 25, 25)')
1212

1313
const tag2 = tagGroup.getByText('标签二')
14-
await expect(tag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
15-
await expect(tag2).toHaveCSS('color', 'rgb(37, 43, 58)')
14+
await expect(tag2).toHaveCSS('background-color', 'rgb(222, 236, 255)')
15+
await expect(tag2).toHaveCSS('color', 'rgb(20, 118, 255)')
1616

1717
const tag3 = tagGroup.getByText('标签三')
18-
await expect(tag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
19-
await expect(tag3).toHaveCSS('color', 'rgb(58, 194, 149)')
20-
18+
await expect(tag3).toHaveCSS('background-color', 'rgb(230, 242, 213)')
19+
await expect(tag3).toHaveCSS('color', 'rgb(92, 179, 0)')
20+
2121
const tag4 = tagGroup.getByText('标签四')
22-
await expect(tag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
23-
await expect(tag4).toHaveCSS('color', 'rgb(227, 125, 41)')
22+
await expect(tag4).toHaveCSS('background-color', 'rgb(255, 235, 209)')
23+
await expect(tag4).toHaveCSS('color', 'rgb(255, 136, 0)')
2424

2525
const tag5 = tagGroup.getByText('标签五')
26-
await expect(tag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
27-
await expect(tag5).toHaveCSS('color', 'rgb(222, 80, 78)')
28-
26+
await expect(tag5).toHaveCSS('background-color', 'rgb(252, 227, 225)')
27+
await expect(tag5).toHaveCSS('color', 'rgb(242, 48, 48)')
2928
})

‎examples/sites/demos/pc/app/tag-group/more-composition-api.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<tiny-tag-group :data="data" @item-click="itemClick"></tiny-tag-group>
3+
</template>
4+
5+
<script setup>
6+
import { ref } from 'vue'
7+
import { TagGroup as TinyTagGroup, Modal } from '@opentiny/vue'
8+
9+
const data = ref([
10+
{
11+
name: '标签一'
12+
},
13+
{
14+
name: '标签二'
15+
},
16+
{
17+
name: '标签三'
18+
},
19+
{
20+
name: '标签四'
21+
},
22+
{
23+
name: '标签五'
24+
},
25+
{
26+
name: '标签六'
27+
},
28+
{
29+
name: '标签七'
30+
},
31+
{
32+
name: '标签八'
33+
},
34+
{
35+
name: '标签九'
36+
},
37+
{
38+
name: '标签十'
39+
},
40+
{
41+
name: '标签十一'
42+
},
43+
{
44+
name: '标签十二'
45+
},
46+
{
47+
name: '标签十三'
48+
},
49+
{
50+
name: '标签十四'
51+
},
52+
{
53+
name: '标签十五'
54+
},
55+
{
56+
name: '标签十六'
57+
},
58+
{
59+
name: '标签十七'
60+
},
61+
{
62+
name: '标签十八'
63+
},
64+
{
65+
name: '标签十九'
66+
},
67+
{
68+
name: '标签二十'
69+
},
70+
{
71+
name: '标签二十一'
72+
},
73+
{
74+
name: '标签二十二'
75+
}
76+
])
77+
78+
function itemClick(item, i, e) {
79+
Modal.message(`当前点击的是第${i + 1}个标签`)
80+
}
81+
</script>

‎examples/sites/demos/pc/app/tag-group/more.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<tiny-tag-group :data="data" @item-click="itemClick"></tiny-tag-group>
3+
</template>
4+
5+
<script>
6+
import { TagGroup, Modal } from '@opentiny/vue'
7+
8+
export default {
9+
components: {
10+
TinyTagGroup: TagGroup
11+
},
12+
data() {
13+
return {
14+
data: [
15+
{
16+
name: '标签一'
17+
},
18+
{
19+
name: '标签二'
20+
},
21+
{
22+
name: '标签三'
23+
},
24+
{
25+
name: '标签四'
26+
},
27+
{
28+
name: '标签五'
29+
},
30+
{
31+
name: '标签六'
32+
},
33+
{
34+
name: '标签七'
35+
},
36+
{
37+
name: '标签八'
38+
},
39+
{
40+
name: '标签九'
41+
},
42+
{
43+
name: '标签十'
44+
},
45+
{
46+
name: '标签十一'
47+
},
48+
{
49+
name: '标签十二'
50+
},
51+
{
52+
name: '标签十三'
53+
},
54+
{
55+
name: '标签十四'
56+
},
57+
{
58+
name: '标签十五'
59+
},
60+
{
61+
name: '标签十六'
62+
},
63+
{
64+
name: '标签十七'
65+
},
66+
{
67+
name: '标签十八'
68+
},
69+
{
70+
name: '标签十九'
71+
},
72+
{
73+
name: '标签二十'
74+
},
75+
{
76+
name: '标签二十一'
77+
},
78+
{
79+
name: '标签二十二'
80+
}
81+
]
82+
}
83+
},
84+
methods: {
85+
itemClick(item, i, e) {
86+
Modal.message(`当前点击的是第${i + 1}个标签`)
87+
}
88+
}
89+
}
90+
</script>

‎examples/sites/demos/pc/app/tag-group/tag-group-effect-composition-api.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="tiny-demo-tag-group-effect">
3-
<div>深色标签 </div>
3+
<div>深色标签</div>
44
<tiny-tag-group :data="items" effect="dark"> </tiny-tag-group>
5-
<div>浅色标签 </div>
5+
<div>浅色标签</div>
66
<tiny-tag-group :data="items" effect="light"> </tiny-tag-group>
7-
<div>朴素标签 </div>
7+
<div>朴素标签</div>
88
<tiny-tag-group :data="items" effect="plain"> </tiny-tag-group>
99
</div>
1010
</template>
@@ -18,13 +18,12 @@ const items = ref([
1818
{ type: 'info', name: '标签二' },
1919
{ type: 'success', name: '标签三' },
2020
{ type: 'warning', name: '标签四' },
21-
{ type: 'danger', name: '标签五' },
22-
{ name: '标签六' }
21+
{ type: 'danger', name: '标签五' }
2322
])
2423
</script>
2524

2625
<style scoped>
2726
.tiny-demo-tag-group-effect > *:not(:last-child) {
2827
margin-bottom: 12px;
2928
}
30-
</style>
29+
</style>

‎examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,66 @@ test('TagGroup 主题', async ({ page }) => {
66

77
const tagGroupsLocator = page.locator('.tiny-demo-tag-group-effect .tiny-tag-group')
88

9+
// 深色
910
const darkTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签一' })
10-
await expect(darkTag1).toHaveCSS('background-color', 'rgb(94, 124, 224)')
11+
await expect(darkTag1).toHaveCSS('background-color', 'rgb(25, 25, 25)')
1112
await expect(darkTag1).toHaveCSS('color', 'rgb(255, 255, 255)')
1213

1314
const darkTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签二' })
14-
await expect(darkTag2).toHaveCSS('background-color', 'rgb(37, 43, 58)')
15+
await expect(darkTag2).toHaveCSS('background-color', 'rgb(20, 118, 255)')
1516
await expect(darkTag2).toHaveCSS('color', 'rgb(255, 255, 255)')
1617

1718
const darkTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签三' })
18-
await expect(darkTag3).toHaveCSS('background-color', 'rgb(80, 212, 171)')
19+
await expect(darkTag3).toHaveCSS('background-color', 'rgb(92, 179, 0)')
1920
await expect(darkTag3).toHaveCSS('color', 'rgb(255, 255, 255)')
2021

2122
const darkTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签四' })
22-
await expect(darkTag4).toHaveCSS('background-color', 'rgb(250, 152, 65)')
23+
await expect(darkTag4).toHaveCSS('background-color', 'rgb(255, 136, 0)')
2324
await expect(darkTag4).toHaveCSS('color', 'rgb(255, 255, 255)')
2425

2526
const darkTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签五' })
26-
await expect(darkTag5).toHaveCSS('background-color', 'rgb(246, 111, 106)')
27+
await expect(darkTag5).toHaveCSS('background-color', 'rgb(242, 48, 48)')
2728
await expect(darkTag5).toHaveCSS('color', 'rgb(255, 255, 255)')
2829

29-
30+
// 浅色
3031
const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签一' })
31-
await expect(lightTag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
32-
await expect(lightTag1).toHaveCSS('color', 'rgb(87, 93, 108)')
32+
await expect(lightTag1).toHaveCSS('background-color', 'rgb(245, 245, 245)')
33+
await expect(lightTag1).toHaveCSS('color', 'rgb(25, 25, 25)')
3334

3435
const lightTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签二' })
35-
await expect(lightTag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
36-
await expect(lightTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
36+
await expect(lightTag2).toHaveCSS('background-color', 'rgb(222, 236, 255)')
37+
await expect(lightTag2).toHaveCSS('color', 'rgb(20, 118, 255)')
3738

3839
const lightTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签三' })
39-
await expect(lightTag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
40-
await expect(lightTag3).toHaveCSS('color', 'rgb(58, 194, 149)')
40+
await expect(lightTag3).toHaveCSS('background-color', 'rgb(230, 242, 213)')
41+
await expect(lightTag3).toHaveCSS('color', 'rgb(92, 179, 0)')
4142

4243
const lightTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签四' })
43-
await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
44-
await expect(lightTag4).toHaveCSS('color', 'rgb(227, 125, 41)')
44+
await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 235, 209)')
45+
await expect(lightTag4).toHaveCSS('color', 'rgb(255, 136, 0)')
4546

4647
const lightTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签五' })
47-
await expect(lightTag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
48-
await expect(lightTag5).toHaveCSS('color', 'rgb(222, 80, 78)')
49-
48+
await expect(lightTag5).toHaveCSS('background-color', 'rgb(252, 227, 225)')
49+
await expect(lightTag5).toHaveCSS('color', 'rgb(242, 48, 48)')
5050

51+
// plain
5152
const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签一' })
5253
await expect(plainTag1).toHaveCSS('background-color', 'rgb(255, 255, 255)')
53-
await expect(plainTag1).toHaveCSS('color', 'rgb(94, 124, 224)')
54+
await expect(plainTag1).toHaveCSS('color', 'rgb(25, 25, 25)')
5455

5556
const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签二' })
5657
await expect(plainTag2).toHaveCSS('background-color', 'rgb(255, 255, 255)')
57-
await expect(plainTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
58+
await expect(plainTag2).toHaveCSS('color', 'rgb(20, 118, 255)')
5859

5960
const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签三' })
6061
await expect(plainTag3).toHaveCSS('background-color', 'rgb(255, 255, 255)')
61-
await expect(plainTag3).toHaveCSS('color', 'rgb(80, 212, 171)')
62+
await expect(plainTag3).toHaveCSS('color', 'rgb(92, 179, 0)')
6263

6364
const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签四' })
6465
await expect(plainTag4).toHaveCSS('background-color', 'rgb(255, 255, 255)')
65-
await expect(plainTag4).toHaveCSS('color', 'rgb(250, 152, 65)')
66+
await expect(plainTag4).toHaveCSS('color', 'rgb(255, 136, 0)')
6667

6768
const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签五' })
6869
await expect(plainTag5).toHaveCSS('background-color', 'rgb(255, 255, 255)')
69-
await expect(plainTag5).toHaveCSS('color', 'rgb(246, 111, 106)')
70-
70+
await expect(plainTag5).toHaveCSS('color', 'rgb(242, 48, 48)')
7171
})

‎examples/sites/demos/pc/app/tag-group/tag-group-effect.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="tiny-demo-tag-group-effect">
3-
<div>深色标签 </div>
3+
<div>深色标签</div>
44
<tiny-tag-group :data="items" effect="dark"> </tiny-tag-group>
5-
<div>浅色标签 </div>
5+
<div>浅色标签</div>
66
<tiny-tag-group :data="items" effect="light"> </tiny-tag-group>
7-
<div>朴素标签 </div>
7+
<div>朴素标签</div>
88
<tiny-tag-group :data="items" effect="plain"> </tiny-tag-group>
99
</div>
1010
</template>
@@ -23,8 +23,7 @@ export default {
2323
{ type: 'info', name: '标签二' },
2424
{ type: 'success', name: '标签三' },
2525
{ type: 'warning', name: '标签四' },
26-
{ type: 'danger', name: '标签五' },
27-
{ name: '标签六' }
26+
{ type: 'danger', name: '标签五' }
2827
]
2928
}
3029
}
@@ -35,4 +34,4 @@ export default {
3534
.tiny-demo-tag-group-effect > *:not(:last-child) {
3635
margin-bottom: 12px;
3736
}
38-
</style>
37+
</style>

0 commit comments

Comments
 (0)