优化滚动条显示逻辑与样式限制

This commit is contained in:
bakaECC 2025-12-10 18:06:25 +08:00
parent a6d5c25e1c
commit f14ebb9f0c

View File

@ -63,7 +63,7 @@
<div class="flex-1 flex flex-col min-h-0 px-4 pt-4 pb-4 relative z-10"> <div class="flex-1 flex flex-col min-h-0 px-4 pt-4 pb-4 relative z-10">
<div class="flex items-end justify-between mb-2"> <div class="flex items-end justify-between mb-2">
<div <div
class="flex items-end gap-1 overflow-x-auto scrollbar-custom flex-1" class="flex items-end gap-1 overflow-x-auto overflow-y-hidden scrollbar-custom flex-1"
> >
<button <button
class="px-4 py-2 text-xs font-medium bg-white/30 text-foreground rounded-t-2xl shadow-sm -mb-[1px]" class="px-4 py-2 text-xs font-medium bg-white/30 text-foreground rounded-t-2xl shadow-sm -mb-[1px]"
@ -77,10 +77,10 @@
</button> </button>
</div> </div>
<button <button
class="w-6 h-6 rounded-md bg-white/40 border border-white/40 flex items-center justify-center text-xs" class="h-9 px-4 rounded-full bg-gradient-to-r from-blue-500 to-blue-400 border border-white/60 shadow-lg text-white flex items-center justify-center text-[11px] font-semibold hover:shadow-xl hover:scale-105 transition-all"
@click="newConversation" @click="newConversation"
> >
+ 新会话
</button> </button>
</div> </div>
@ -386,7 +386,7 @@
? '输入关键词搜索图片(实时搜索)...' ? '输入关键词搜索图片(实时搜索)...'
: '请输入工程参数、需求或问题...' : '请输入工程参数、需求或问题...'
" "
class="composer-textarea" :class="['composer-textarea', { 'show-scrollbar': showTextareaScrollbar }]"
@keydown="handleKeydown" @keydown="handleKeydown"
:disabled="loading" :disabled="loading"
/> />
@ -622,7 +622,7 @@
<div v-if="msg.isSearchBox" class="search-card"> <div v-if="msg.isSearchBox" class="search-card">
<div class="search-head"> <div class="search-head">
<div class="search-head__left"> <div class="search-head__left">
<span class="mode-pill">🔍 文档检索模式</span> <span class="mode-pill">文档检索模式</span>
<div> <div>
<p class="head-title">工程档案 · 精准检索</p> <p class="head-title">工程档案 · 精准检索</p>
<p class="head-desc"> <p class="head-desc">
@ -1207,7 +1207,7 @@
? '输入关键词搜索图片(实时搜索)...' ? '输入关键词搜索图片(实时搜索)...'
: '请输入工程参数、需求或问题...' : '请输入工程参数、需求或问题...'
" "
class="composer-textarea" :class="['composer-textarea', { 'show-scrollbar': showTextareaScrollbar }]"
@keydown="handleKeydown" @keydown="handleKeydown"
:disabled="loading" :disabled="loading"
/> />
@ -1854,6 +1854,11 @@ const isSingleLine = computed(() => {
return !inputText.value.includes('\n') && inputText.value.length < 50 return !inputText.value.includes('\n') && inputText.value.length < 50
}) })
const showTextareaScrollbar = computed(() => {
const lines = inputText.value.split(/\r?\n/)
return lines.length > 2
})
const guidePrompts = [ const guidePrompts = [
{ {
id: 'knowledge-base', id: 'knowledge-base',
@ -3518,12 +3523,15 @@ function terminateProcess(msg, msgIndex) {
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
margin-bottom: 16px; margin-bottom: 16px;
flex-wrap: nowrap;
white-space: nowrap;
} }
.search-head__left { .search-head__left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
flex-wrap: nowrap;
} }
.mode-pill { .mode-pill {
@ -3544,12 +3552,14 @@ function terminateProcess(msg, msgIndex) {
font-size: 16px; font-size: 16px;
color: hsl(var(--foreground)); color: hsl(var(--foreground));
line-height: 1.2; line-height: 1.2;
white-space: nowrap;
} }
.head-desc { .head-desc {
margin-top: 2px; margin-top: 2px;
font-size: 12px; font-size: 12px;
color: hsl(var(--muted-foreground)); color: hsl(var(--muted-foreground));
white-space: nowrap;
} }
.head-stats { .head-stats {
@ -4386,6 +4396,29 @@ function terminateProcess(msg, msgIndex) {
padding: 0; padding: 0;
line-height: 1.6; line-height: 1.6;
text-align: left; text-align: left;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.composer-textarea :deep(.el-textarea__inner::-webkit-scrollbar) {
width: 0;
height: 0;
}
.composer-textarea.show-scrollbar :deep(.el-textarea__inner) {
overflow-y: auto;
scrollbar-width: thin;
}
.composer-textarea.show-scrollbar :deep(.el-textarea__inner::-webkit-scrollbar) {
width: 6px;
height: 6px;
}
.composer-textarea.show-scrollbar :deep(.el-textarea__inner::-webkit-scrollbar-thumb) {
background: hsla(220, 20%, 60%, 0.3);
border-radius: 999px;
} }
.composer-textarea :deep(.el-textarea__inner):focus { .composer-textarea :deep(.el-textarea__inner):focus {