From ee82aa385ce5df5ad7c8fc4b4e67216ed9680255 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Fri, 2 Jan 2026 15:02:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E5=B0=86=E6=A3=80=E7=B4=A2?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=E4=BB=8EQuerySection?=
 =?UTF-8?q?=E7=A7=BB=E8=87=B3DataBaseInfoView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构检索配置弹窗和相关按钮的位置，从QuerySection组件移动到DataBaseInfoView组件
---
 web/src/components/QuerySection.vue | 46 +++---------------------
 web/src/views/DataBaseInfoView.vue  | 55 +++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/web/src/components/QuerySection.vue b/web/src/components/QuerySection.vue
index e464133f..0ba4b173 100644
--- a/web/src/components/QuerySection.vue
+++ b/web/src/components/QuerySection.vue
@@ -13,21 +13,10 @@
               @press-enter.prevent="onQuery"
             />
             <div class="search-actions">
-              <div class="query-examples-compact">
-                <!-- 检索配置按钮 -->
-                <a-tooltip title="检索配置" placement="bottom">
-                  <a-button
-                    type="text"
-                    size="small"
-                    class="config-label-btn"
-                    @click="openSearchConfigModal"
-                  >
-                    <SettingOutlined />
-                  </a-button>
-                </a-tooltip>
-                <div class="examples-label-group">
-                  <a-tooltip title="点击手动生成测试问题" placement="bottom">
-                    <a-button
+                <div class="query-examples-compact">
+                  <div class="examples-label-group">
+                    <a-tooltip title="点击手动生成测试问题" placement="bottom">
+                      <a-button
                       type="text"
                       size="small"
                       class="examples-label-btn"
@@ -150,13 +139,6 @@
       </div>
     </div>
   </div>
-
-  <!-- 检索配置弹窗 -->
-  <SearchConfigModal
-    v-model="searchConfigModalVisible"
-    :database-id="store.database?.db_id"
-    @save="handleSearchConfigSave"
-  />
 </template>
 
 <script setup>
@@ -167,9 +149,7 @@ import { queryApi } from '@/apis/knowledge_api';
 import {
   SearchOutlined,
   ReloadOutlined,
-  SettingOutlined,
 } from '@ant-design/icons-vue';
-import SearchConfigModal from './SearchConfigModal.vue';
 
 const store = useDatabaseStore();
 
@@ -636,24 +616,6 @@ defineExpose({
   flex-wrap: wrap;
 }
 
-.config-label-btn {
-  color: var(--gray-500);
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  padding: 0 4px;
-  margin-left: -4px;
-
-  &:hover {
-    color: var(--main-color);
-    background-color: var(--gray-100);
-  }
-
-  .anticon {
-    font-size: 14px;
-  }
-}
-
 .examples-label-btn {
   color: var(--gray-500);
   font-size: 12px;
diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index b9717c7d..98b4c2cc 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -2,6 +2,13 @@
 <div class="database-info-container">
   <FileDetailModal />
 
+  <!-- 检索配置弹窗 -->
+  <SearchConfigModal
+    v-model="searchConfigModalVisible"
+    :database-id="databaseId"
+    @save="handleSearchConfigSave"
+  />
+
   <FileUploadModal
         v-model:visible="addFilesModalVisible"
         :folder-tree="folderTree"
@@ -23,6 +30,17 @@
 
     <div class="right-panel" :style="{ width: (100 - leftPanelWidth) + '%', display: store.state.rightPanelVisible ? 'flex' : 'none' }">
       <a-tabs v-model:activeKey="activeTab" class="knowledge-tabs" :tabBarStyle="{ margin: 0, padding: '0 16px' }">
+        <template #tabBarExtraContent>
+          <a-tooltip title="检索配置" placement="bottom">
+            <a-button
+              type="text"
+              class="config-btn"
+              @click="openSearchConfigModal"
+            >
+              <SettingOutlined />
+            </a-button>
+          </a-tooltip>
+        </template>
         <a-tab-pane key="graph" tab="知识图谱" v-if="isGraphSupported">
           <KnowledgeGraphSection
             :visible="true"
@@ -96,6 +114,7 @@ import { useRoute } from 'vue-router';
 import { useDatabaseStore } from '@/stores/database';
 import { useTaskerStore } from '@/stores/tasker';
 import { Info } from 'lucide-vue-next';
+import { SettingOutlined } from '@ant-design/icons-vue';
 import KnowledgeBaseCard from '@/components/KnowledgeBaseCard.vue';
 import FileTable from '@/components/FileTable.vue';
 import FileDetailModal from '@/components/FileDetailModal.vue';
@@ -105,6 +124,7 @@ import QuerySection from '@/components/QuerySection.vue';
 import MindMapSection from '@/components/MindMapSection.vue';
 import RAGEvaluationTab from '@/components/RAGEvaluationTab.vue';
 import EvaluationBenchmarks from '@/components/EvaluationBenchmarks.vue';
+import SearchConfigModal from '@/components/SearchConfigModal.vue';
 
 const route = useRoute();
 const store = useDatabaseStore();
@@ -189,6 +209,18 @@ const leftPanelWidth = ref(50);
 const isDragging = ref(false);
 const resizeHandle = ref(null);
 
+// 检索配置弹窗
+const searchConfigModalVisible = ref(false);
+
+const handleSearchConfigSave = () => {
+  store.getDatabaseInfo();
+};
+
+// 打开检索配置弹窗
+const openSearchConfigModal = () => {
+  searchConfigModalVisible.value = true;
+};
+
 // 添加文件弹窗
 const addFilesModalVisible = ref(false);
 const currentFolderId = ref(null);
@@ -495,6 +527,29 @@ const handleMouseUp = () => {
     // background-color: var(--gray-0);
     border-bottom: 1px solid var(--gray-200);
   }
+
+  :deep(.ant-tabs-extra-content) {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+}
+
+.config-btn {
+  color: var(--gray-500);
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  transition: all 0.2s;
+
+  &:hover {
+    color: var(--main-color);
+    background-color: var(--gray-100);
+  }
 }