Skip to content

Commit 488be43

Browse files
author
weilei
committed
feat: 更新 Conversations 组件，添加滚动条样式和加载更多功能的样式调整
1 parent e33d2e9 commit 488be43

File tree

3 files changed

+104
-46
lines changed

3 files changed

+104
-46
lines changed

‎packages/element-x-ui/src/components/Conversations/main.vue‎

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -104,21 +104,21 @@
104104
</template>
105105
</conversations-item>
106106
</template>
107-
</div>
108107

109-
<!-- 加载更多 -->
110-
<div v-if="loadMoreLoading" class="el-x-conversations-load-more">
111-
<slot name="load-more">
112-
<i class="el-icon-loading el-x-conversations-load-more-is-loading"></i>
113-
<span>加载更多...</span>
114-
</slot>
108+
<!-- 加载更多 -->
109+
<div v-if="loadMoreLoading" class="el-x-conversations-load-more">
110+
<slot name="load-more">
111+
<i class="el-icon-loading el-x-conversations-load-more-is-loading"></i>
112+
<span>加载更多...</span>
113+
</slot>
114+
</div>
115115
</div>
116116
</div>
117117
</li>
118118
</ul>
119119
<slot name="footer"></slot>
120120
<!-- 滚动到顶部按钮 -->
121-
<el-button v-show="showScrollTop && showToTopBtn" class="scroll-to-top-btn" circle @click="scrollToTop">
121+
<el-button v-show="showScrollTop && showToTopBtn" class="scroll-to-top-btn" circle :type="toTopBtnType" :style="toTopBtnStyle" @click="scrollToTop">
122122
<i class="el-icon-top"></i>
123123
</el-button>
124124
</div>
@@ -246,6 +246,15 @@ export default {
246246
type: Boolean,
247247
default: false,
248248
},
249+
toTopBtnType: {
250+
type: String,
251+
default: 'primary',
252+
validator: (value) => ['primary', 'success', 'warning', 'danger', 'info', 'text'].includes(value),
253+
},
254+
toTopBtnStyle: {
255+
type: Object,
256+
default: () => ({}),
257+
},
249258
labelKey: {
250259
type: String,
251260
default: 'label',
@@ -486,6 +495,12 @@ export default {
486495
if (this.$refs.scrollContainer) {
487496
this.$refs.scrollContainer.scrollTop = 0
488497
}
498+
499+
// 确保吸顶组状态也被重置
500+
if (this.shouldUseGrouping && this.groups.length > 0) {
501+
this.stickyGroupKeys.clear()
502+
this.stickyGroupKeys.add(this.groups[0].key)
503+
}
489504
},
490505
491506
handleMenuItemClick(command, item) {
@@ -509,21 +524,39 @@ export default {
509524
.el-x-conversations-scrollbar {
510525
height: 100%;
511526
overflow-y: auto;
512-
scrollbar-width: thin;
513-
scrollbar-color: #e0e0e0 transparent;
514527
528+
/* 隐藏默认滚动条 */
515529
&::-webkit-scrollbar {
516530
width: 6px;
517-
height: 6px;
518531
}
519532
520533
&::-webkit-scrollbar-thumb {
521-
background-color: #e0e0e0;
534+
background-color: transparent;
522535
border-radius: 3px;
536+
transition: background-color 0.3s ease;
523537
}
524538
525539
&::-webkit-scrollbar-track {
526540
background-color: transparent;
527541
}
542+
543+
/* 鼠标悬停时显示滚动条 */
544+
&:hover {
545+
&::-webkit-scrollbar-thumb {
546+
background-color: #e0e0e0;
547+
}
548+
}
549+
}
550+
551+
/* 为Firefox添加滚动条样式 */
552+
@supports (scrollbar-width: thin) {
553+
.el-x-conversations-scrollbar {
554+
scrollbar-width: thin;
555+
scrollbar-color: transparent transparent;
556+
557+
&:hover {
558+
scrollbar-color: #e0e0e0 transparent;
559+
}
560+
}
528561
}
529562
</style>

‎packages/element-x-ui/src/styles/Conversations.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,18 @@
4646
.el-x-conversations-load-more {
4747
display: flex;
4848
width: calc(100% - 20px);
49-
padding: 4px 0;
49+
padding: 14px 10px;
5050
justify-content: center;
5151
align-items: center;
5252
font-size: 12px;
5353
gap: 3px;
54-
height: 100%;
5554
color: #909399;
5655
background-color: var(--conversation-list-auto-bg-color, #fff);
56+
margin-right: 20px;
57+
border-radius: 8px;
58+
height: auto;
59+
min-height: var(--conversation-label-height, 20px);
60+
box-sizing: border-box;
5761
}
5862

5963
// 加载动画

‎packages/element-x-ui/src/theme/var.scss‎

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,68 @@
11
@import "~element-ui/packages/theme-chalk/src/common/var";
22

3-
$--el-x-color-primary: $--color-primary ;
3+
$--el-x-color-primary: $--color-primary;
44
// 字体大小
5-
$--el-x-font-size-base: $--font-size-base;
6-
$--el-x-font-size-medium: $--font-size-medium;
7-
$--el-x-font-size-large: $--font-size-large;
8-
$--el-x-font-size-extra-large: $--font-size-extra-large;
5+
$--el-x-font-size-small: $--font-size-small !default;
6+
$--el-x-font-size-base: $--font-size-base !default;
7+
$--el-x-font-size-medium: $--font-size-medium !default;
8+
$--el-x-font-size-large: $--font-size-large !default;
9+
$--el-x-font-size-extra-large: $--font-size-extra-large !default;
10+
911

1012
// 字体颜色
11-
$--el-x-text-color-primary: $--color-text-primary;
12-
$--el-x-text-color-secondary: $--color-text-regular;
13+
$--el-x-text-color-primary: $--color-text-primary !default;
14+
$--el-x-text-color-regular: $--color-text-regular !default;
15+
$--el-x-text-color-secondary:$--color-text-secondary !default;
16+
$--el-x-text-color-placeholder: $--color-text-placeholder !default;
17+
$--el-x-text-color-disabled: $--color-text-placeholder !default;
18+
19+
1320

14-
$--el-x-text-color-placeholder: $--color-text-placeholder;
1521

1622
// 行高
17-
$--el-x-font-line-height-primary: $--font-line-height-primary;
23+
$--el-x-font-line-height-primary: $--font-line-height-primary;
24+
25+
// 填充背景
26+
$--el-x-fill-color: $--message-background-color;
27+
28+
// 边框
29+
30+
$--el-x-border-radius-base: $--border-radius-base;
31+
$--el-x-border-radius-md:8px;
32+
$--el-x-border-radius-round: 20px;
33+
$--el-x-border-radius-small: $--border-radius-small;
34+
$--el-x-border-radius-circle:$--border-radius-circle;
35+
36+
//间距
37+
38+
$--el-x-spacing-xs: 4px !default;
39+
$--el-x-spacing-sm: 8px !default;
40+
$--el-x-spacing-md: 12px !default;
41+
$--el-x-spacing-lg: 16px !default;
42+
$--el-x-spacing-xl: 20px !default;
43+
44+
// 内边距
45+
46+
$--el-x-padding-xs: $--border-radius-base !default;
47+
$--el-x-padding-sm: $--font-size-base !default;
48+
$--el-x-padding-md: $--font-size-medium !default;
49+
$--el-x-padding-lg: $--font-size-large !default;
50+
$--el-x-padding-xl: $--font-size-extra-large !default;
51+
52+
// 边框颜色
53+
$--el-x-border-color: $--border-color-base;
1854

19-
// 填充背景
20-
$--el-x-fill-color: $--message-background-color;
55+
// 边框宽度
56+
$--el-x-border-width: $--border-width-base;
2157

22-
// 边框
23-
24-
$--el-x-border-radius-base: $--border-radius-base;
25-
$--el-x-border-radius-md:8px;
26-
$--el-x-border-radius-round: 20px ;
27-
$--el-x-border-radius-small: $--border-radius-small;
28-
$--el-x-border-radius-circle:$--border-radius-circle;
2958

30-
31-
// 边框颜色
32-
$--el-x-border-color: $--border-color-base;
3359

34-
// 边框宽度
35-
$--el-x-border-width: $--border-width-base;
36-
37-
// 内边距
38-
$--el-x-padding-sm: 8px;
39-
$--el-x-padding-md: 12px;
40-
$--el-x-padding-lg: 16px;
4160

61+
// 阴影
62+
$--el-x-box-shadow-base: $--box-shadow-base;
4263

43-
// 阴影
44-
$--el-x-box-shadow-base: $--box-shadow-base;
4564

46-
// 气泡内容最大宽度
47-
// $--bubble-content-max-width: 300px;
65+
// 边框半径
66+
$--el-x-border-radius-sm: 2px !default;
67+
$--el-x-border-radius-md: $--border-radius-base !default;
68+
$--el-x-border-radius-lg: 8px !default;

0 commit comments

Comments
 (0)