hwmom-ui/src/views/dms/aiKnowledge/knowledgeBaseCreate.vue

<template>
  <div class="kb-create-page">
<!--    <div class="kb-create-title">创建知识库</div>-->
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="kb-create-form">
      <el-form-item label="知识库名称" prop="knowledgeBaseName">
        <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称" />
      </el-form-item>
      <el-form-item label="知识库名称" prop="knowledgeBaseName">
        <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称" />
      </el-form-item>
      <el-form-item label="分段长度" prop="segmentLength">
        <el-input-number v-model="form.segmentLength" :min="1" :step="1" />
      </el-form-item>
      <el-form-item label="分段重叠" prop="segmentOverlap">
        <el-input-number v-model="form.segmentOverlap" :min="0" :step="1" />
      </el-form-item>
      <el-form-item label="检索条数" prop="topK">
        <el-input-number v-model="form.topK" :min="1" :step="1" />
      </el-form-item>
      <el-form-item label="知识库类型" prop="vectorStore">
        <el-select v-model="form.vectorStore" placeholder="请选择知识库类型">
          <el-option label="vectorStoreA" value="vectorStoreA" />
          <el-option label="vectorStoreB" value="vectorStoreB" />
        </el-select>
      </el-form-item>
      <el-form-item label="向量库" prop="vectorStore">
        <el-select v-model="form.vectorStore" placeholder="请选择向量库">
          <el-option label="vectorStoreA" value="vectorStoreA" />
          <el-option label="vectorStoreB" value="vectorStoreB" />
        </el-select>
      </el-form-item>
      <el-form-item label="向量模型" prop="vectorModel">
        <el-select v-model="form.vectorModel" placeholder="请选择向量模型">
          <el-option label="text-embedding-ada-002" value="text-embedding-ada-002" />
          <el-option label="bge-large-zh" value="bge-large-zh" />
        </el-select>
      </el-form-item>
      <el-form-item label="知识库描述" prop="description">
        <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio label="enabled">启用</el-radio>
          <el-radio label="disabled">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>

      </el-form-item>
    </el-form>
  </div>
  <div style="display: flex;justify-content: center">
    <el-button type="primary" @click="onSubmit">保存</el-button>
    <el-button @click="onCancel">取消</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['created', 'cancel'])
const formRef = ref()
const form = ref({
  name: '',
  segmentLength: 100,
  segmentOverlap: 20,
  topK: 5,
  vectorStore: '',
  vectorModel: '',
  description: '',
  status: 'enabled',
})
const rules = {
  name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
  segmentLength: [{ required: true, type: 'number' as const, min: 1, message: '请输入正整数', trigger: 'blur' }],
  segmentOverlap: [{ required: true, type: 'number' as const, min: 0, message: '请输入非负整数', trigger: 'blur' }],
  topK: [{ required: true, type: 'number' as const, min: 1, message: '请输入正整数', trigger: 'blur' }],
  vectorStore: [{ required: true, message: '请选择向量库', trigger: 'change' }],
  vectorModel: [{ required: true, message: '请选择向量模型', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}

function onSubmit() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      // TODO: 保存逻辑
      ElMessage.success('保存成功')
      emit('created', { ...form.value })
    }
  })
}
function onCancel() {
  emit('cancel')
}
</script>

<style scoped>
.kb-create-page {
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}
.kb-create-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: center;
}
.kb-create-form {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 0 24px 0 24px;
}
</style>