diff --git a/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue b/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
index 2408088a..8b7ebabf 100644
--- a/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
+++ b/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
@@ -2,20 +2,22 @@
@@ -616,33 +661,33 @@ onUnmounted(() => {
/>
-
+
-
-
-
-
+
+
+
+
@@ -775,34 +820,7 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
min-height: 0;
- overflow-y: auto;
- overflow-x: hidden;
-
- // 平滑滚动
- scroll-behavior: smooth;
-
- // Webkit 浏览器滚动条样式 (Chrome, Safari, Edge)
- &::-webkit-scrollbar {
- width: 6px;
- }
-
- &::-webkit-scrollbar-track {
- background: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- background: rgba(144, 147, 153, 0.3);
- border-radius: 3px;
- transition: background 0.2s ease;
-
- &:hover {
- background: rgba(144, 147, 153, 0.5);
- }
- }
-
- // Firefox 滚动条样式
- scrollbar-width: thin;
- scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
+ overflow: hidden; // 移除滚动,让 BubbleList 内部处理
}
// ==================== 滚动到底部按钮 ====================
@@ -847,11 +865,95 @@ onUnmounted(() => {
}
}
-// 气泡列表基础样式覆盖
+// 气泡列表基础样式覆盖 - 细滚动条一直显示
:deep(.el-bubble-list) {
padding-top: 0;
}
+// ==================== 细滚动条样式 ====================
+// 对所有可能的滚动容器应用细滚动条样式
+:deep(*) {
+ // 匹配具有overflow样式的元素
+ &[style*="overflow"],
+ &[style*="overflow: auto"],
+ &[style*="overflow-y: auto"],
+ &[style*="overflow: scroll"],
+ &[style*="overflow-y: scroll"] {
+ // Webkit 浏览器滚动条样式 (Chrome, Safari, Edge)
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(144, 147, 153, 0.3);
+ border-radius: 3px;
+ transition: background 0.2s ease;
+
+ &:hover {
+ background: rgba(144, 147, 153, 0.5);
+ }
+ }
+
+ // Firefox 滚动条样式
+ scrollbar-width: thin;
+ scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
+ }
+}
+
+// 同时对 .el-bubble-list 的子元素应用滚动条样式
+:deep(.el-bubble-list) {
+ // Webkit 浏览器滚动条样式 (Chrome, Safari, Edge)
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(144, 147, 153, 0.3);
+ border-radius: 3px;
+ transition: background 0.2s ease;
+
+ &:hover {
+ background: rgba(144, 147, 153, 0.5);
+ }
+ }
+
+ // Firefox 滚动条样式
+ scrollbar-width: thin;
+ scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
+
+ // 对所有子元素也应用滚动条样式
+ * {
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(144, 147, 153, 0.3);
+ border-radius: 3px;
+ transition: background 0.2s ease;
+
+ &:hover {
+ background: rgba(144, 147, 153, 0.5);
+ }
+ }
+
+ scrollbar-width: thin;
+ scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
+ }
+}
+
:deep(.el-bubble) {
padding: 0;
width: 100% !important;
@@ -920,4 +1022,8 @@ onUnmounted(() => {
opacity: 0;
transform: translateY(10px);
}
+// 对话列表底部三个点加载动画
+:deep(.el-bubble-loading-wrap ){
+ height: 50px;
+}