lizongxi/ai-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
bakaECC 2025-12-10 18:06:25 +08:00
parent a6d5c25e1c
commit f14ebb9f0c
1 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/layout/chat_layout.vue
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 items-end justify-between mb-2">
<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
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>
</div>
<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"
>
+
新会话
</button>
</div>
@ -386,7 +386,7 @@
? '输入关键词搜索图片（实时搜索）...'
: '请输入工程参数、需求或问题...'
"
class="composer-textarea"
:class="['composer-textarea', { 'show-scrollbar': showTextareaScrollbar }]"
@keydown="handleKeydown"
:disabled="loading"
/>
@ -622,7 +622,7 @@
<div v-if="msg.isSearchBox" class="search-card">
<div class="search-head">
<div class="search-head__left">
<span class="mode-pill">🔍 文档检索模式</span>
<span class="mode-pill">文档检索模式</span>
<div>
<p class="head-title">工程档案 · 精准检索</p>
<p class="head-desc">
@ -1207,7 +1207,7 @@
? '输入关键词搜索图片（实时搜索）...'
: '请输入工程参数、需求或问题...'
"
class="composer-textarea"
:class="['composer-textarea', { 'show-scrollbar': showTextareaScrollbar }]"
@keydown="handleKeydown"
:disabled="loading"
/>
@ -1854,6 +1854,11 @@ const isSingleLine = computed(() => {
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 = [
{
id: 'knowledge-base',
@ -3518,12 +3523,15 @@ function terminateProcess(msg, msgIndex) {
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
flex-wrap: nowrap;
white-space: nowrap;
}
.search-head__left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.mode-pill {
@ -3544,12 +3552,14 @@ function terminateProcess(msg, msgIndex) {
font-size: 16px;
color: hsl(var(--foreground));
line-height: 1.2;
white-space: nowrap;
}
.head-desc {
margin-top: 2px;
font-size: 12px;
color: hsl(var(--muted-foreground));
white-space: nowrap;
}
.head-stats {
@ -4386,6 +4396,29 @@ function terminateProcess(msg, msgIndex) {
padding: 0;
line-height: 1.6;
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 {