feat: 增强 Knowledge 创建流程步骤验证

- 添加步骤有效性验证逻辑
- 支持跳转到已完成步骤
- 优化创建流程用户体验

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/views/Knowledge.vue

@@ -1,8 +1,64 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { ElMessage } from 'element-plus'
+import { useModelSettings } from './settings/useModelSettings'
 import './knowledge/knowledge.css'
 
+// 获取已配置的模型列表
+const { models, fetchModels } = useModelSettings()
+
+// 步骤验证
+const step1Valid = computed(() => !!newKbForm.value.name.trim())
+const step2Valid = computed(() => !!embeddingConfig.value.modelId)
+const step3Valid = computed(() => true) // Parsing - 暂时默认通过
+const step4Valid = computed(() => true) // Storage - 暂时默认通过
+
+// 获取当前步骤是否有效
+const isCurrentStepValid = computed(() => {
+  switch (createStep.value) {
+    case 1: return step1Valid.value
+    case 2: return step2Valid.value
+    case 3: return step3Valid.value
+    case 4: return step4Valid.value
+    default: return false
+  }
+})
+
+// 步骤是否可以点击（只能点击当前步骤或已完成的步骤）
+const canClickStep = (step: number) => {
+  if (step === 1) return true
+  if (step === createStep.value) return true
+  // 可以点击已完成的前面的步骤
+  if (step < createStep.value) {
+    switch (step) {
+      case 1: return step1Valid.value
+      case 2: return step2Valid.value
+      case 3: return step3Valid.value
+      case 4: return step4Valid.value
+      default: return false
+    }
+  }
+  return false
+}
+
+// 下一步
+const nextStep = () => {
+  if (!isCurrentStepValid.value) {
+    ElMessage.warning('Please complete the current step first')
+    return
+  }
+  if (createStep.value < 4) {
+    createStep.value++
+  }
+}
+
+// 上一步
+const prevStep = () => {
+  if (createStep.value > 1) {
+    createStep.value--
+  }
+}
+
 // 模拟知识库数据
 const knowledgeBases = ref([
   {
@@ -55,8 +111,7 @@ const newKbForm = ref({
   description: '',
 })
 const embeddingConfig = ref({
-  provider: '',
-  model: '',
+  modelId: '',
 })
 
 const parsingConfig = ref({
@@ -71,7 +126,9 @@ const parsingConfig = ref({
 const openCreateDialog = () => {
   createStep.value = 1
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { provider: '', model: '' }
+  embeddingConfig.value = { modelId: '' }
+  // 获取已配置的模型列表
+  fetchModels()
   parsingConfig.value = {
     enablePdf: true,
     engine: 'default',
@@ -85,7 +142,7 @@ const openCreateDialog = () => {
 
 const cancelCreate = () => {
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { provider: '', model: '' }
+  embeddingConfig.value = { modelId: '' }
   parsingConfig.value = {
     enablePdf: true,
     engine: 'default',
@@ -97,18 +154,6 @@ const cancelCreate = () => {
   showCreateDialog.value = false
 }
 
-const nextStep = () => {
-  if (!newKbForm.value.name) {
-    ElMessage.warning('Please enter knowledge base name')
-    return
-  }
-  createStep.value = 2
-}
-
-const prevStep = () => {
-  createStep.value = 1
-}
-
 const createKnowledgeBase = () => {
   knowledgeBases.value.push({
     id: Date.now().toString(),
@@ -120,7 +165,7 @@ const createKnowledgeBase = () => {
     status: 'ready'
   })
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { provider: '', model: '' }
+  embeddingConfig.value = { modelId: '' }
   showCreateDialog.value = false
   ElMessage.success('Knowledge base created successfully')
 }
@@ -300,11 +345,12 @@ const viewDetail = (kb: any) => {
               <span class="menu-desc">Name and description</span>
             </div>
             <i v-if="createStep === 1" class="fa-solid fa-chevron-right menu-arrow"></i>
+            <i v-else-if="createStep > 1 && step1Valid" class="fa-solid fa-check-circle menu-check"></i>
           </div>
           <div
             class="menu-item"
-            :class="{ active: createStep === 2 }"
-            @click="createStep = 2"
+            :class="{ active: createStep === 2, disabled: !canClickStep(2) }"
+            @click="canClickStep(2) && (createStep = 2)"
           >
             <i class="fa-solid fa-robot menu-icon"></i>
             <div class="menu-content">
@@ -312,11 +358,12 @@ const viewDetail = (kb: any) => {
               <span class="menu-desc">Embedding & rerank models</span>
             </div>
             <i v-if="createStep === 2" class="fa-solid fa-chevron-right menu-arrow"></i>
+            <i v-else-if="createStep > 2 && step2Valid" class="fa-solid fa-check-circle menu-check"></i>
           </div>
           <div
             class="menu-item"
-            :class="{ active: createStep === 3 }"
-            @click="createStep = 3"
+            :class="{ active: createStep === 3, disabled: !canClickStep(3) }"
+            @click="canClickStep(3) && (createStep = 3)"
           >
             <i class="fa-solid fa-file-lines menu-icon"></i>
             <div class="menu-content">
@@ -324,11 +371,12 @@ const viewDetail = (kb: any) => {
               <span class="menu-desc">Document parsing settings</span>
             </div>
             <i v-if="createStep === 3" class="fa-solid fa-chevron-right menu-arrow"></i>
+            <i v-else-if="createStep > 3 && step3Valid" class="fa-solid fa-check-circle menu-check"></i>
           </div>
           <div
             class="menu-item"
-            :class="{ active: createStep === 4 }"
-            @click="createStep = 4"
+            :class="{ active: createStep === 4, disabled: !canClickStep(4) }"
+            @click="canClickStep(4) && (createStep = 4)"
           >
             <i class="fa-solid fa-hard-drive menu-icon"></i>
             <div class="menu-content">
@@ -336,42 +384,7 @@ const viewDetail = (kb: any) => {
               <span class="menu-desc">Vector & file storage</span>
             </div>
             <i v-if="createStep === 4" class="fa-solid fa-chevron-right menu-arrow"></i>
-          </div>
-          <div
-            class="menu-item"
-            :class="{ active: createStep === 5 }"
-            @click="createStep = 5"
-          >
-            <i class="fa-solid fa-scissors menu-icon"></i>
-            <div class="menu-content">
-              <span class="menu-title">Chunking</span>
-              <span class="menu-desc">Text chunking strategy</span>
-            </div>
-            <i v-if="createStep === 5" class="fa-solid fa-chevron-right menu-arrow"></i>
-          </div>
-          <div
-            class="menu-item"
-            :class="{ active: createStep === 6 }"
-            @click="createStep = 6"
-          >
-            <i class="fa-solid fa-project-diagram menu-icon"></i>
-            <div class="menu-content">
-              <span class="menu-title">Knowledge Graph</span>
-              <span class="menu-desc">Graph extraction settings</span>
-            </div>
-            <i v-if="createStep === 6" class="fa-solid fa-chevron-right menu-arrow"></i>
-          </div>
-          <div
-            class="menu-item"
-            :class="{ active: createStep === 7 }"
-            @click="createStep = 7"
-          >
-            <i class="fa-solid fa-sliders menu-icon"></i>
-            <div class="menu-content">
-              <span class="menu-title">Advanced</span>
-              <span class="menu-desc">Additional settings</span>
-            </div>
-            <i v-if="createStep === 7" class="fa-solid fa-chevron-right menu-arrow"></i>
+            <i v-else-if="createStep > 4 && step4Valid" class="fa-solid fa-check-circle menu-check"></i>
           </div>
         </div>
 
@@ -400,31 +413,21 @@ const viewDetail = (kb: any) => {
               <span class="section-title">Model Config</span>
             </div>
             <el-form label-position="top" class="kb-form">
-              <el-form-item label="Embedding Provider">
-                <el-select v-model="embeddingConfig.provider" placeholder="Select embedding provider" class="w-full">
-                  <el-option label="OpenAI" value="openai">
-                    <div class="provider-option">
-                      <i class="fa-solid fa-robot"></i>
-                      <span>OpenAI</span>
-                    </div>
-                  </el-option>
-                  <el-option label="Ollama" value="ollama">
-                    <div class="provider-option">
-                      <i class="fa-solid fa-microchip"></i>
-                      <span>Ollama</span>
-                    </div>
-                  </el-option>
-                  <el-option label="Azure OpenAI" value="azure">
-                    <div class="provider-option">
-                      <i class="fa-brands fa-microsoft"></i>
-                      <span>Azure OpenAI</span>
+              <el-form-item label="Embedding Model">
+                <el-select v-model="embeddingConfig.modelId" placeholder="Select a configured model" class="w-full" popper-class="dark-select-dropdown">
+                  <el-option
+                    v-for="model in models"
+                    :key="model.id"
+                    :label="model.name"
+                    :value="model.id"
+                  >
+                    <div class="model-option">
+                      <span class="model-name">{{ model.name }}</span>
+                      <span class="model-info">{{ model.provider }} - {{ model.model }}</span>
                     </div>
                   </el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item label="Embedding Model">
-                <el-input v-model="embeddingConfig.model" placeholder="e.g., text-embedding-ada-002" />
-              </el-form-item>
             </el-form>
           </div>
 
@@ -510,76 +513,25 @@ const viewDetail = (kb: any) => {
               </el-form-item>
             </el-form>
           </div>
-
-          <!-- Step 5: Chunking -->
-          <div v-if="createStep === 5" class="form-content">
-            <div class="section-header">
-              <i class="fa-solid fa-scissors section-icon"></i>
-              <span class="section-title">Chunking</span>
-            </div>
-            <el-form label-position="top" class="kb-form">
-              <el-form-item label="Chunk Size">
-                <el-input type="number" placeholder="e.g., 500" />
-              </el-form-item>
-              <el-form-item label="Chunk Overlap">
-                <el-input type="number" placeholder="e.g., 50" />
-              </el-form-item>
-            </el-form>
-          </div>
-
-          <!-- Step 6: Knowledge Graph -->
-          <div v-if="createStep === 6" class="form-content">
-            <div class="section-header">
-              <i class="fa-solid fa-project-diagram section-icon"></i>
-              <span class="section-title">Knowledge Graph</span>
-            </div>
-            <el-form label-position="top" class="kb-form">
-              <el-form-item label="Enable Knowledge Graph">
-                <el-switch />
-              </el-form-item>
-              <el-form-item label="Graph Extraction">
-                <el-select placeholder="Select extraction level" class="w-full">
-                  <el-option label="Entities Only" value="entities" />
-                  <el-option label="Entities & Relations" value="relations" />
-                </el-select>
-              </el-form-item>
-            </el-form>
-          </div>
-
-          <!-- Step 7: Advanced -->
-          <div v-if="createStep === 7" class="form-content">
-            <div class="section-header">
-              <i class="fa-solid fa-sliders section-icon"></i>
-              <span class="section-title">Advanced</span>
-            </div>
-            <el-form label-position="top" class="kb-form">
-              <el-form-item label="Top K">
-                <el-input type="number" placeholder="e.g., 5" />
-              </el-form-item>
-              <el-form-item label="Score Threshold">
-                <el-input type="number" placeholder="e.g., 0.7" />
-              </el-form-item>
-            </el-form>
-          </div>
         </div>
       </div>
 
       <template #footer>
         <div class="dialog-footer">
           <div class="footer-left">
-            <span class="step-hint">Step {{ createStep }} of 7</span>
+            <span class="step-hint">Step {{ createStep }} of 4</span>
           </div>
           <div class="footer-right">
             <el-button @click="cancelCreate" class="cancel-btn">Cancel</el-button>
-            <el-button v-if="createStep > 1" @click="createStep--" class="prev-btn">
+            <el-button v-if="createStep > 1" @click="prevStep" class="prev-btn">
               <i class="fa-solid fa-arrow-left"></i>
               Previous
             </el-button>
-            <el-button v-if="createStep < 7" @click="createStep++" class="next-btn">
+            <el-button v-if="createStep < 4" :disabled="!isCurrentStepValid" @click="nextStep" class="next-btn">
               Next
               <i class="fa-solid fa-arrow-right"></i>
             </el-button>
-            <el-button v-if="createStep === 7" @click="createKnowledgeBase" class="confirm-btn">
+            <el-button v-if="createStep === 4" :disabled="!isCurrentStepValid" @click="createKnowledgeBase" class="confirm-btn">
               <i class="fa-solid fa-plus"></i>
               Create
             </el-button>