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; +}