From 570c891ad29869cd85837ee20ec94fe137a99e67 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 7 Jul 2025 15:04:35 +0800
Subject: [PATCH] fix: scrollbar

---
 .../knowledge-source-component/index.vue      |   2 +-
 ui/src/styles/component.scss                  |   3 +-
 .../component/ParamSettingDialog.vue          | 331 +++++++++---------
 ui/src/views/paragraph/index.vue              |  26 +-
 4 files changed, 186 insertions(+), 176 deletions(-)

diff --git a/ui/src/components/ai-chat/component/knowledge-source-component/index.vue b/ui/src/components/ai-chat/component/knowledge-source-component/index.vue
index d595690ab..31faa4cec 100644
--- a/ui/src/components/ai-chat/component/knowledge-source-component/index.vue
+++ b/ui/src/components/ai-chat/component/knowledge-source-component/index.vue
@@ -62,7 +62,7 @@
     </div>
     <!-- 知识库引用/执行详情 dialog -->
     <el-dialog
-      class="chat-source-dialog"
+      class="scrollbar-dialog"
       :title="dialogTitle"
       v-model="dialogVisible"
       destroy-on-close
diff --git a/ui/src/styles/component.scss b/ui/src/styles/component.scss
index 421b1338a..943d083cf 100644
--- a/ui/src/styles/component.scss
+++ b/ui/src/styles/component.scss
@@ -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;
diff --git a/ui/src/views/application/component/ParamSettingDialog.vue b/ui/src/views/application/component/ParamSettingDialog.vue
index a169a111b..6409c90dd 100644
--- a/ui/src/views/application/component/ParamSettingDialog.vue
+++ b/ui/src/views/application/component/ParamSettingDialog.vue
@@ -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>
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index d8b8a8609..34ba2236d 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -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;
   }