299 lines
7.8 KiB
Vue
299 lines
7.8 KiB
Vue
<template>
|
||
<a-modal
|
||
:open="props.modelValue"
|
||
title="检索配置"
|
||
width="800px"
|
||
:confirm-loading="loading"
|
||
@ok="handleSave"
|
||
@cancel="handleCancel"
|
||
ok-text="保存"
|
||
cancel-text="取消"
|
||
>
|
||
<div class="search-config-modal">
|
||
<div v-if="loading" class="config-loading">
|
||
<a-spin size="large" />
|
||
<p>加载配置参数中...</p>
|
||
</div>
|
||
|
||
<div v-else-if="error" class="config-error">
|
||
<a-result status="error" title="配置加载失败" :sub-title="error">
|
||
<template #extra>
|
||
<a-button type="primary" @click="loadQueryParams">重新加载</a-button>
|
||
</template>
|
||
</a-result>
|
||
</div>
|
||
|
||
<div v-else class="config-forms">
|
||
<a-form layout="vertical">
|
||
<a-row :gutter="16">
|
||
<a-col :span="12" v-for="param in queryParams" :key="param.key">
|
||
<a-form-item :label="param.label">
|
||
<a-select
|
||
v-if="param.type === 'select'"
|
||
v-model:value="meta[param.key]"
|
||
style="width: 100%"
|
||
>
|
||
<a-select-option
|
||
v-for="option in param.options"
|
||
:key="option.value"
|
||
:value="option.value"
|
||
>
|
||
{{ option.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
<a-select
|
||
v-else-if="param.type === 'boolean'"
|
||
:value="computedMeta[param.key]"
|
||
@update:value="(value) => updateMeta(param.key, value)"
|
||
style="width: 100%"
|
||
>
|
||
<a-select-option value="true">启用</a-select-option>
|
||
<a-select-option value="false">关闭</a-select-option>
|
||
</a-select>
|
||
<a-input-number
|
||
v-else-if="param.type === 'number'"
|
||
v-model:value="meta[param.key]"
|
||
style="width: 100%"
|
||
:min="param.min || 0"
|
||
:max="param.max || 100"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, watch } from 'vue'
|
||
import { useDatabaseStore } from '@/stores/database'
|
||
import { message } from 'ant-design-vue'
|
||
import { queryApi } from '@/apis/knowledge_api'
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
databaseId: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue', 'save'])
|
||
|
||
const store = useDatabaseStore()
|
||
|
||
// 响应式数据
|
||
const loading = ref(false)
|
||
const error = ref('')
|
||
const queryParams = ref([])
|
||
const meta = reactive({})
|
||
|
||
// 计算属性：处理布尔类型的双向绑定
|
||
const computedMeta = computed(() => {
|
||
const result = {}
|
||
for (const key in meta) {
|
||
const param = queryParams.value.find((p) => p.key === key)
|
||
if (param?.type === 'boolean') {
|
||
// 对于布尔类型，返回字符串给 select，但保持内部为布尔值
|
||
result[key] = meta[key].toString()
|
||
} else {
|
||
result[key] = meta[key]
|
||
}
|
||
}
|
||
return result
|
||
})
|
||
|
||
// 处理值更新
|
||
const updateMeta = (key, value) => {
|
||
const param = queryParams.value.find((p) => p.key === key)
|
||
if (param?.type === 'boolean') {
|
||
// 将字符串转换回布尔值
|
||
meta[key] = value === 'true'
|
||
} else {
|
||
meta[key] = value
|
||
}
|
||
}
|
||
|
||
// 加载查询参数
|
||
const loadQueryParams = async () => {
|
||
try {
|
||
loading.value = true
|
||
error.value = ''
|
||
|
||
// 如果没有 databaseId，不执行请求
|
||
if (!props.databaseId) {
|
||
queryParams.value = []
|
||
loading.value = false
|
||
return
|
||
}
|
||
|
||
const response = await queryApi.getKnowledgeBaseQueryParams(props.databaseId)
|
||
queryParams.value = response.params?.options || []
|
||
|
||
// 过滤掉 include_distances 配置项，默认为 True 且不可修改
|
||
queryParams.value = queryParams.value.filter((param) => param.key !== 'include_distances')
|
||
|
||
// 初始化 meta 对象
|
||
queryParams.value.forEach((param) => {
|
||
if (param.default !== undefined) {
|
||
// 对于布尔类型，确保使用布尔值而不是字符串
|
||
if (param.type === 'boolean') {
|
||
meta[param.key] = Boolean(param.default)
|
||
} else {
|
||
meta[param.key] = param.default
|
||
}
|
||
}
|
||
})
|
||
|
||
// 确保设置 include_distances 为 true（即使不显示也要设置）
|
||
meta['include_distances'] = true
|
||
|
||
// 加载保存的配置
|
||
loadSavedConfig()
|
||
} catch (err) {
|
||
console.error('Failed to load query params:', err)
|
||
error.value = err.message || '加载查询参数失败'
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 加载保存的配置
|
||
const loadSavedConfig = () => {
|
||
if (!props.databaseId) return
|
||
|
||
const saved = localStorage.getItem(`search-config-${props.databaseId}`)
|
||
if (saved) {
|
||
try {
|
||
const savedConfig = JSON.parse(saved)
|
||
|
||
// 处理布尔类型转换
|
||
queryParams.value.forEach((param) => {
|
||
if (param.type === 'boolean' && savedConfig[param.key] !== undefined) {
|
||
// 将字符串值转换为布尔值
|
||
if (typeof savedConfig[param.key] === 'string') {
|
||
savedConfig[param.key] = savedConfig[param.key] === 'true'
|
||
}
|
||
}
|
||
})
|
||
|
||
Object.assign(meta, savedConfig)
|
||
} catch (e) {
|
||
console.warn('Failed to parse saved config:', e)
|
||
}
|
||
}
|
||
// 确保 include_distances 始终为 true，覆盖任何保存的值
|
||
meta['include_distances'] = true
|
||
}
|
||
|
||
// 重置为默认值
|
||
const resetToDefaults = () => {
|
||
queryParams.value.forEach((param) => {
|
||
if (param.default !== undefined) {
|
||
meta[param.key] = param.default
|
||
}
|
||
})
|
||
// 确保 include_distances 始终为 true
|
||
meta['include_distances'] = true
|
||
message.success('已重置为默认配置')
|
||
}
|
||
|
||
// 保存配置
|
||
const handleSave = async () => {
|
||
// 如果没有 databaseId，不执行保存
|
||
if (!props.databaseId) {
|
||
message.error('无法保存配置：缺少知识库ID')
|
||
return
|
||
}
|
||
|
||
// 确保 include_distances 始终为 true
|
||
meta['include_distances'] = true
|
||
|
||
// 先保存到知识库元数据
|
||
try {
|
||
const response = await queryApi.updateKnowledgeBaseQueryParams(props.databaseId, meta)
|
||
if (response.message === 'success') {
|
||
// 服务器保存成功后，再保存到 localStorage（兼容性）
|
||
localStorage.setItem(`search-config-${props.databaseId}`, JSON.stringify(meta))
|
||
message.success('配置已保存')
|
||
|
||
// 更新 store 中的配置
|
||
Object.assign(store.meta, meta)
|
||
|
||
// 触发保存事件
|
||
emit('save', { ...meta })
|
||
emit('update:modelValue', false)
|
||
} else {
|
||
throw new Error(response.message || '保存失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('保存配置到知识库失败:', error)
|
||
message.error('保存配置失败：' + error.message)
|
||
}
|
||
}
|
||
|
||
// 处理取消
|
||
const handleCancel = () => {
|
||
emit('update:modelValue', false)
|
||
}
|
||
|
||
// 监听弹窗显示状态，显示时加载数据
|
||
watch(
|
||
() => props.modelValue,
|
||
(newVal) => {
|
||
if (newVal && props.databaseId) {
|
||
loadQueryParams()
|
||
}
|
||
}
|
||
)
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.config-loading,
|
||
.config-error {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 300px;
|
||
color: var(--gray-500);
|
||
|
||
p {
|
||
margin-top: 16px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.config-forms {
|
||
max-width: 100%;
|
||
}
|
||
|
||
// 表单样式优化
|
||
:deep(.ant-form-item) {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
:deep(.ant-form-item-label > label) {
|
||
font-weight: 500;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
:deep(.ant-input),
|
||
:deep(.ant-select-selector) {
|
||
border-radius: 6px;
|
||
}
|
||
|
||
:deep(.ant-switch) {
|
||
background-color: var(--gray-300);
|
||
|
||
&.ant-switch-checked {
|
||
background-color: var(--main-color);
|
||
}
|
||
}
|
||
</style>
|