Skip to content

Commit 83f4849

Browse files
seaeamseaeam
committed
refactor: 修改 style 样式
1 parent f10d5be commit 83f4849

29 files changed

+527
-331
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@
5454
"@seam-element/theme": "workspace:*",
5555
"@seam-element/utils": "workspace:*",
5656
"@seam-element/vite-plugins": "workspace:*",
57+
"seam-element": "workspace:*",
5758
"@vitest/coverage-v8": "^3.1.1",
5859
"@vue/test-utils": "^2.4.5",
5960
"jsdom": "^24.0.0",
6061
"lodash-es": "^4.17.21",
61-
"seam-element": "workspace:*",
6262
"vue": "^3.4.19"
6363
},
6464
"packageManager": "pnpm@10.7.1+sha512.2d92c86b7928dc8284f53494fb4201f983da65f0fb4f0d40baafa5cf628fa31dae3e5968f12466f17df7e97310e30f343a648baea1b9b350685dafafffdf5808"

‎packages/components/Alert/Alert.spec.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,24 +106,24 @@ describe('Alert.vue', () => {
106106
},
107107
})
108108
//class
109-
const rootNode = wrapper.find('.er-alert')
109+
const rootNode = wrapper.find('.se-alert')
110110
expect(rootNode.classes()).toContain('text-center')
111111
})
112112

113113
it('should not render close icon when closable is false', () => {
114114
const wrapper = mount(Alert, {
115115
props: { closable: false },
116116
})
117-
expect(wrapper.find('.er-alert__close').exists()).toBe(false)
117+
expect(wrapper.find('.se-alert__close').exists()).toBe(false)
118118
})
119119

120120
it('should toggle visibility when open and close methods are called', async () => {
121121
const wrapper = mount(Alert, {
122122
props: { title, closable: false },
123123
})
124124
await wrapper.vm.close()
125-
expect(wrapper.find('.er-alert').attributes().style).toBe('display: none;')
125+
expect(wrapper.find('.se-alert').attributes().style).toBe('display: none;')
126126
await wrapper.vm.open()
127-
expect(wrapper.find('.er-alert').attributes().style).toBe('')
127+
expect(wrapper.find('.se-alert').attributes().style).toBe('')
128128
})
129129
})

‎packages/components/Alert/Alert.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,35 +38,35 @@ defineExpose<AlertInstance>({
3838
</script>
3939

4040
<template>
41-
<transition name="er-alert-fade">
41+
<transition name="se-alert-fade">
4242
<div
4343
v-show="visible"
44-
class="er-alert"
44+
class="se-alert"
4545
role="alert"
4646
:class="{
47-
[`er-alert__${type}`]: type,
48-
[`er-alert__${effect}`]: effect,
47+
[`se-alert__${type}`]: type,
48+
[`se-alert__${effect}`]: effect,
4949
'text-center': center,
5050
}"
5151
>
5252
<se-icon
5353
v-if="showIcon"
54-
class="er-alert__icon"
54+
class="se-alert__icon"
5555
:class="{ 'big-icon': withDescription }"
5656
:icon="iconName"
5757
/>
58-
<div class="er-alert__content">
58+
<div class="se-alert__content">
5959
<span
60-
class="er-alert__title"
60+
class="se-alert__title"
6161
:class="{ 'with-desc': withDescription }"
6262
:style="{ display: center && !showIcon ? 'flow' : 'inline' }"
6363
>
6464
<slot name="title">{{ title }}</slot>
6565
</span>
66-
<p class="er-alert__description">
66+
<p class="se-alert__description">
6767
<slot>{{ description }}</slot>
6868
</p>
69-
<div class="er-alert__close" v-if="closable">
69+
<div class="se-alert__close" v-if="closable">
7070
<se-icon @click.stop="close" icon="xmark" />
7171
</div>
7272
</div>

‎packages/components/Alert/style.css

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
1-
.er-alert {
2-
--er-alert-padding: 8px 16px;
3-
--er-alert-border-radius-base: var(--er-border-radius-base);
4-
--er-alert-bg-color: var(--er-color-white);
5-
--er-alert-title-font-size: 14px;
6-
--er-alert-title-font-size-with-desc: 16px;
7-
--er-alert-desc-font-size: 14px;
8-
--er-alert-text-color: var(--er-text-color-primary);
9-
--er-alert-top-margin: 20px;
10-
--er-alert-icon-size: 16px;
11-
--er-alert-icon-margin: 8px;
12-
--er-alert-big-icon-size: 28px;
13-
--er-alert-big-icon-margin: 12px;
1+
.se-alert {
2+
--se-alert-padding: 8px 16px;
3+
--se-alert-border-radius-base: var(--se-border-radius-base);
4+
--se-alert-bg-color: var(--se-color-white);
5+
--se-alert-title-font-size: 14px;
6+
--se-alert-title-font-size-with-desc: 16px;
7+
--se-alert-desc-font-size: 14px;
8+
--se-alert-text-color: var(--se-text-color-primary);
9+
--se-alert-top-margin: 20px;
10+
--se-alert-icon-size: 16px;
11+
--se-alert-icon-margin: 8px;
12+
--se-alert-big-icon-size: 28px;
13+
--se-alert-big-icon-margin: 12px;
1414
}
15-
.er-alert {
16-
padding: var(--er-alert-padding);
15+
.se-alert {
16+
padding: var(--se-alert-padding);
1717
margin: 0;
1818
box-sizing: border-box;
19-
border-radius: var(--er-alert-border-radius-base);
19+
border-radius: var(--se-alert-border-radius-base);
2020
position: relative;
21-
background-color: var(--er-alert-bg-color);
21+
background-color: var(--se-alert-bg-color);
2222
overflow: hidden;
2323
opacity: 1;
2424
display: flex;
2525
align-items: center;
26-
transition: opacity var(--er-transition-duration);
27-
margin-top: var(--er-alert-top-margin);
28-
.er-alert__icon {
29-
color: var(--er-alert-text-color);
30-
font-size: var(--er-alert-icon-size);
31-
width: var(--er-alert-icon-size);
32-
margin-right: var(--er-alert-icon-margin);
26+
transition: opacity var(--se-transition-duration);
27+
margin-top: var(--se-alert-top-margin);
28+
.se-alert__icon {
29+
color: var(--se-alert-text-color);
30+
font-size: var(--se-alert-icon-size);
31+
width: var(--se-alert-icon-size);
32+
margin-right: var(--se-alert-icon-margin);
3333
&.big-icon {
34-
font-size: var(--er-alert-big-icon-size);
35-
width: var(--er-alert-big-icon-size);
36-
margin-right: var(--er-alert-big-icon-margin);
34+
font-size: var(--se-alert-big-icon-size);
35+
width: var(--se-alert-big-icon-size);
36+
margin-right: var(--se-alert-big-icon-margin);
3737
}
3838
}
39-
.er-alert__content {
40-
color: var(--er-alert-text-color);
39+
.se-alert__content {
40+
color: var(--se-alert-text-color);
4141
vertical-align: text-top;
42-
.er-alert__title {
43-
font-size: var(--er-alert-title-font-size);
42+
.se-alert__title {
43+
font-size: var(--se-alert-title-font-size);
4444
line-height: 24px;
4545
&.with-desc {
46-
font-size: var(--er-alert-title-font-size-with-desc);
46+
font-size: var(--se-alert-title-font-size-with-desc);
4747
}
4848
}
49-
.er-alert__description {
50-
font-size: var(--er-alert-desc-font-size);
49+
.se-alert__description {
50+
font-size: var(--se-alert-desc-font-size);
5151
margin: 0;
5252
}
5353

54-
.er-alert__close {
55-
font-size: var(--er-alert-close-font-size);
54+
.se-alert__close {
55+
font-size: var(--se-alert-close-font-size);
5656
opacity: 1;
5757
position: absolute;
5858
top: 12px;
5959
right: 15px;
6060
cursor: pointer;
61-
:deep(.er-icon) {
61+
:deep(.se-icon) {
6262
vertical-align: top;
6363
}
6464
}
65-
&.er-alert__light {
66-
.er-alert__close {
67-
color: var(--er-text-color-placeholder);
65+
&.se-alert__light {
66+
.se-alert__close {
67+
color: var(--se-text-color-placeholder);
6868
}
6969
}
70-
&.er-alert__dark {
71-
.er-alert__close {
72-
color: var(--er-color-white);
70+
&.se-alert__dark {
71+
.se-alert__close {
72+
color: var(--se-color-white);
7373
}
7474
}
7575
}
@@ -83,18 +83,18 @@
8383
}
8484
}
8585

86-
.er-alert-fade-enter-from,
87-
.er-alert-fade-leave-to {
86+
.se-alert-fade-entse-from,
87+
.se-alert-fade-leave-to {
8888
opacity: 0;
8989
}
9090

9191
@each $val in success, warning, info, danger {
92-
.er-alert__$(val).er-alert__light {
93-
--er-alert-text-color: var(--er-color-$(val));
94-
--er-alert-bg-color: var(--er-color-$(val)-light-9);
92+
.se-alert__$(val).se-alert__light {
93+
--se-alert-text-color: var(--se-color-$(val));
94+
--se-alert-bg-color: var(--se-color-$(val)-light-9);
9595
}
96-
.er-alert__$(val).er-alert__dark {
97-
--er-alert-text-color: var(--er-color-white);
98-
--er-alert-bg-color: var(--er-color-$(val));
96+
.se-alert__$(val).se-alert__dark {
97+
--se-alert-text-color: var(--se-color-white);
98+
--se-alert-bg-color: var(--se-color-$(val));
9999
}
100100
}

‎packages/components/Button/Button.spec.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('Button.vue', () => {
1212
const wrapper = mount(Button, {
1313
props: { type: type as any },
1414
})
15-
expect(wrapper.classes()).toContain(`er-button--${type}`)
15+
expect(wrapper.classes()).toContain(`se-button--${type}`)
1616
})
1717
})
1818

@@ -23,7 +23,7 @@ describe('Button.vue', () => {
2323
const wrapper = mount(Button, {
2424
props: { size: size as any },
2525
})
26-
expect(wrapper.classes()).toContain(`er-button--${size}`)
26+
expect(wrapper.classes()).toContain(`se-button--${size}`)
2727
})
2828
})
2929

@@ -126,7 +126,7 @@ describe('ButtonGroup.vue', () => {
126126
</ButtonGroup>
127127
))
128128

129-
expect(wrapper.classes()).toContain('er-button-group')
129+
expect(wrapper.classes()).toContain('se-button-group')
130130
})
131131

132132
test('button group size', () => {
@@ -140,7 +140,7 @@ describe('ButtonGroup.vue', () => {
140140
))
141141

142142
const buttonWrapper = wrapper.findComponent(Button)
143-
expect(buttonWrapper.classes()).toContain(`er-button--${size}`)
143+
expect(buttonWrapper.classes()).toContain(`se-button--${size}`)
144144
})
145145
})
146146

@@ -155,7 +155,7 @@ describe('ButtonGroup.vue', () => {
155155
))
156156

157157
const buttonWrapper = wrapper.findComponent(Button)
158-
expect(buttonWrapper.classes()).toContain(`er-button--${type}`)
158+
expect(buttonWrapper.classes()).toContain(`se-button--${type}`)
159159
})
160160
})
161161

‎packages/components/Button/Button.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@ defineExpose<ButtonInstance>({
4949
:is="tag"
5050
:autofocus="autofocus"
5151
:ref="_ref"
52-
class="er-button"
52+
class="se-button"
5353
:type="tag === 'button' ? nativeType : void 0"
5454
:disabled="disabled || loading ? true : void 0"
5555
:class="{
56-
[`er-button--${type}`]: type,
57-
[`er-button--${size}`]: size,
56+
[`se-button--${type}`]: type,
57+
[`se-button--${size}`]: size,
5858
'is-plain': plain,
5959
'is-round': round,
6060
'is-circle': circle,

‎packages/components/Button/ButtonGroup.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ provide(
2020
</script>
2121

2222
<template>
23-
<div class="er-button-group">
23+
<div class="se-button-group">
2424
<slot></slot>
2525
</div>
2626
</template>

0 commit comments

Comments
 (0)