19cb293024
- 在KnowledgeGraphSection和QuerySection组件中添加事件声明 - 移除mindmap_router和knowledge_router中不必要的404异常抛出 - 在SearchConfigModal中增加databaseId为空时的处理逻辑 - 在KnowledgeBaseCard中优化描述显示和样式调整
301 lines
7.9 KiB
Vue
301 lines
7.9 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> |