refactor(ui): 将检索配置功能从QuerySection移至DataBaseInfoView

重构检索配置弹窗和相关按钮的位置,从QuerySection组件移动到DataBaseInfoView组件
This commit is contained in:
Wenjie Zhang 2026-01-02 15:02:10 +08:00
parent f8ee1df96c
commit ee82aa385c
2 changed files with 59 additions and 42 deletions

View File

@ -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;

View File

@ -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);
}
}