ForcePilot/web/src/components/SearchConfigModal.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 visibleQueryParams" :key="param.key">
              <a-form-item :label="param.label">
                <template #extra v-if="param.description">
                  <div class="param-description">{{ param.description }}</div>
                </template>
                <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 isDependencySatisfied = (param) => {
  const dependency = param.depend_on
  if (!dependency || dependency.length < 2) return true
  const [key, expectedValue] = dependency
  return meta[key] === expectedValue
}

const visibleQueryParams = computed(() => queryParams.value.filter(isDependencySatisfied))

// 计算属性：处理布尔类型的双向绑定
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('已重置为默认配置')
}

defineExpose({ resetToDefaults })

// 保存配置
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%;
}

.param-description {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
  margin-top: 4px;
}

// 表单样式优化
: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>