fix: scrollbar

This commit is contained in:
wangdan-fit2cloud 2025-07-07 15:04:35 +08:00
parent 8ee575b32e
commit 570c891ad2
4 changed files with 186 additions and 176 deletions

View File

@ -62,7 +62,7 @@
</div>
<!-- 知识库引用/执行详情 dialog -->
<el-dialog
class="chat-source-dialog"
class="scrollbar-dialog"
:title="dialogTitle"
v-model="dialogVisible"
destroy-on-close

View File

@ -50,6 +50,7 @@
align-items: flex-start;
height: 100%;
width: 100%;
margin: 0;
}
.el-radio__label {
width: 100%;
@ -216,7 +217,7 @@
}
// 带滚动条dialog
.chat-source-dialog {
.scrollbar-dialog {
padding: 16px !important;
.el-dialog__header {
padding: 4px 16px 12px 12px;

View File

@ -1,179 +1,186 @@
<template>
<el-dialog
class="scrollbar-dialog"
align-center
:title="$t('common.paramSetting')"
class="param-dialog"
v-model="dialogVisible"
style="width: 550px"
width="550px"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-scrollbar max-height="550">
<el-form label-position="top" ref="paramFormRef" :model="form" v-loading="loading">
<el-form-item :label="$t('views.application.dialog.selectSearchMode')">
<el-radio-group
v-model="form.knowledge_setting.search_mode"
class="card__radio"
@change="changeHandle"
>
<el-card
shadow="never"
class="mb-16"
:class="form.search_mode === 'embedding' ? 'active' : ''"
>
<el-radio value="embedding" size="large">
<p class="mb-4">
{{ $t('views.application.dialog.vectorSearch') }}
</p>
<el-text type="info">{{
$t('views.application.dialog.vectorSearchTooltip')
}}</el-text>
</el-radio>
</el-card>
<el-card
shadow="never"
class="mb-16"
:class="form.knowledge_setting.search_mode === 'keywords' ? 'active' : ''"
>
<el-radio value="keywords" size="large">
<p class="mb-4">
{{ $t('views.application.dialog.fullTextSearch') }}
</p>
<el-text type="info">{{
$t('views.application.dialog.fullTextSearchTooltip')
}}</el-text>
</el-radio>
</el-card>
<el-card
shadow="never"
:class="form.knowledge_setting.search_mode === 'blend' ? 'active' : ''"
>
<el-radio value="blend" size="large">
<p class="mb-4">
{{ $t('views.application.dialog.hybridSearch') }}
</p>
<el-text type="info">{{
$t('views.application.dialog.hybridSearchTooltip')
}}</el-text>
</el-radio>
</el-card>
</el-radio-group>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item>
<template #label>
<div class="flex align-center">
<span class="mr-4">{{ $t('views.application.dialog.similarityThreshold') }}</span>
<el-tooltip
effect="dark"
:content="$t('views.application.dialog.similarityTooltip')"
placement="right"
>
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip>
</div>
</template>
<el-input-number
v-model="form.knowledge_setting.similarity"
:min="0"
:max="form.knowledge_setting.search_mode === 'blend' ? 2 : 1"
:precision="3"
:step="0.1"
:value-on-clear="0"
controls-position="right"
class="w-full"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('views.application.dialog.topReferences')">
<el-input-number
v-model="form.knowledge_setting.top_n"
:min="1"
:max="10000"
:value-on-clear="1"
controls-position="right"
class="w-full"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('views.application.dialog.maxCharacters')">
<el-slider
v-model="form.knowledge_setting.max_paragraph_char_number"
show-input
:show-input-controls="false"
:min="500"
:max="100000"
class="custom-slider"
/>
</el-form-item>
<el-form-item
v-if="!isWorkflowType"
:label="$t('views.application.dialog.noReferencesAction')"
>
<el-form
label-position="top"
ref="noReferencesformRef"
:model="noReferencesform"
:rules="noReferencesRules"
:hide-required-asterisk="true"
class="w-full"
>
<div class="p-8">
<el-form label-position="top" ref="paramFormRef" :model="form" v-loading="loading">
<el-form-item :label="$t('views.application.dialog.selectSearchMode')">
<el-radio-group
v-model="form.knowledge_setting.no_references_setting.status"
class="radio-block-avatar"
v-model="form.knowledge_setting.search_mode"
class="card__radio"
@change="changeHandle"
>
<el-radio value="ai_questioning">
<p>
{{ $t('views.application.dialog.continueQuestioning') }}
</p>
</el-radio>
<el-radio value="designated_answer">
<p>{{ $t('views.application.dialog.provideAnswer') }}</p>
<el-form-item
v-if="form.knowledge_setting.no_references_setting.status === 'designated_answer'"
prop="designated_answer"
>
<el-input
v-model="noReferencesform.designated_answer"
:rows="2"
type="textarea"
maxlength="2048"
:placeholder="defaultValue['designated_answer']"
/>
</el-form-item>
</el-radio>
<el-card
shadow="never"
class="mb-16"
:class="form.search_mode === 'embedding' ? 'active' : ''"
>
<el-radio value="embedding" size="large">
<p class="mb-4">
{{ $t('views.application.dialog.vectorSearch') }}
</p>
<el-text type="info">{{
$t('views.application.dialog.vectorSearchTooltip')
}}</el-text>
</el-radio>
</el-card>
<el-card
shadow="never"
class="mb-16"
:class="form.knowledge_setting.search_mode === 'keywords' ? 'active' : ''"
>
<el-radio value="keywords" size="large">
<p class="mb-4">
{{ $t('views.application.dialog.fullTextSearch') }}
</p>
<el-text type="info">{{
$t('views.application.dialog.fullTextSearchTooltip')
}}</el-text>
</el-radio>
</el-card>
<el-card
shadow="never"
:class="form.knowledge_setting.search_mode === 'blend' ? 'active' : ''"
>
<el-radio value="blend" size="large">
<p class="mb-4">
{{ $t('views.application.dialog.hybridSearch') }}
</p>
<el-text type="info">{{
$t('views.application.dialog.hybridSearchTooltip')
}}</el-text>
</el-radio>
</el-card>
</el-radio-group>
</el-form>
</el-form-item>
</el-form-item>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item>
<template #label>
<div class="flex align-center">
<span class="mr-4">{{
$t('views.application.dialog.similarityThreshold')
}}</span>
<el-tooltip
effect="dark"
:content="$t('views.application.dialog.similarityTooltip')"
placement="right"
>
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip>
</div>
</template>
<el-input-number
v-model="form.knowledge_setting.similarity"
:min="0"
:max="form.knowledge_setting.search_mode === 'blend' ? 2 : 1"
:precision="3"
:step="0.1"
:value-on-clear="0"
controls-position="right"
class="w-full"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('views.application.dialog.topReferences')">
<el-input-number
v-model="form.knowledge_setting.top_n"
:min="1"
:max="10000"
:value-on-clear="1"
controls-position="right"
class="w-full"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('views.application.dialog.maxCharacters')">
<el-slider
v-model="form.knowledge_setting.max_paragraph_char_number"
show-input
:show-input-controls="false"
:min="500"
:max="100000"
class="custom-slider"
/>
</el-form-item>
<el-form-item @click.prevent v-if="!isWorkflowType">
<template #label>
<div class="flex align-center">
<span class="mr-4">{{ $t('views.application.form.problemOptimization.label') }}</span>
</div>
</template>
<el-switch size="small" v-model="form.problem_optimization"></el-switch>
</el-form-item>
<el-form-item
v-if="form.problem_optimization"
:label="$t('views.application.form.prompt.label')"
>
<el-input
v-model="form.problem_optimization_prompt"
:rows="6"
type="textarea"
maxlength="2048"
:placeholder="defaultPrompt"
/>
</el-form-item>
</el-form>
<el-form-item
v-if="!isWorkflowType"
:label="$t('views.application.dialog.noReferencesAction')"
>
<el-form
label-position="top"
ref="noReferencesformRef"
:model="noReferencesform"
:rules="noReferencesRules"
:hide-required-asterisk="true"
class="w-full"
>
<el-radio-group
v-model="form.knowledge_setting.no_references_setting.status"
class="radio-block-avatar"
>
<el-radio value="ai_questioning">
<p>
{{ $t('views.application.dialog.continueQuestioning') }}
</p>
</el-radio>
<el-radio value="designated_answer">
<p>{{ $t('views.application.dialog.provideAnswer') }}</p>
<el-form-item
v-if="
form.knowledge_setting.no_references_setting.status === 'designated_answer'
"
prop="designated_answer"
>
<el-input
v-model="noReferencesform.designated_answer"
:rows="2"
type="textarea"
maxlength="2048"
:placeholder="defaultValue['designated_answer']"
/>
</el-form-item>
</el-radio>
</el-radio-group>
</el-form>
</el-form-item>
<el-form-item @click.prevent v-if="!isWorkflowType">
<template #label>
<div class="flex align-center">
<span class="mr-4">{{
$t('views.application.form.problemOptimization.label')
}}</span>
</div>
</template>
<el-switch size="small" v-model="form.problem_optimization"></el-switch>
</el-form-item>
<el-form-item
v-if="form.problem_optimization"
:label="$t('views.application.form.prompt.label')"
>
<el-input
v-model="form.problem_optimization_prompt"
:rows="6"
type="textarea"
maxlength="2048"
:placeholder="defaultPrompt"
/>
</el-form-item>
</el-form>
</div>
</el-scrollbar>
<template #footer>

View File

@ -49,17 +49,19 @@
<LayoutContainer showCollapse>
<template #left>
<div class="paragraph-sidebar p-16">
<el-anchor
direction="vertical"
type="default"
:offset="130"
container=".paragraph-scollbar"
@click="handleClick"
>
<template v-for="(item, index) in paragraphDetail" :key="item.id">
<el-anchor-link :href="`#m${item.id}`" :title="item.title" v-if="item.title" />
</template>
</el-anchor>
<el-scrollbar class="paragraph-scollbar">
<el-anchor
direction="vertical"
type="default"
:offset="130"
container=".paragraph-scollbar"
@click="handleClick"
>
<template v-for="(item, index) in paragraphDetail" :key="item.id">
<el-anchor-link :href="`#m${item.id}`" :title="item.title" v-if="item.title" />
</template>
</el-anchor>
</el-scrollbar>
</div>
</template>
<div class="w-full">
@ -346,7 +348,7 @@ onMounted(() => {
}
.paragraph-sidebar {
width: 100%;
height: 100%;
height: calc(100vh - 215px);
box-sizing: border-box;
}