feat: 增强 Knowledge 页面功能

- 优化知识库创建流程
- 添加更多知识库配置选项
- 改进样式和交互

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

web/src/views/Knowledge.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useModelSettings } from './settings/useModelSettings'
 import './knowledge/knowledge.css'
@@ -7,10 +7,31 @@ import './knowledge/knowledge.css'
 // 获取已配置的模型列表
 const { models, fetchModels } = useModelSettings()
 
+// 页面加载时获取模型列表
+onMounted(() => {
+  fetchModels()
+})
+
+// 筛选 LLM (chat) 模型
+const llmModels = computed(() => {
+  return models.value.filter((m: any) => m.model_type === 'chat')
+})
+
+// 筛选 Embedding 模型
+const embeddingModels = computed(() => {
+  return models.value.filter((m: any) => m.model_type === 'embedding')
+})
+
 // 步骤验证
 const step1Valid = computed(() => !!newKbForm.value.name.trim())
-const step2Valid = computed(() => !!embeddingConfig.value.modelId)
-const step3Valid = computed(() => true) // Parsing - 暂时默认通过
+const step2Valid = computed(() => !!modelConfig.value.llmModelId && !!modelConfig.value.embeddingModelId)
+const step3Valid = computed(() => {
+  // Parsing - 如果选择 docling，则需要填写 URL
+  if (parsingConfig.value.engine === 'docling') {
+    return !!parsingConfig.value.doclingUrl.trim()
+  }
+  return true
+})
 const step4Valid = computed(() => true) // Storage - 暂时默认通过
 
 // 获取当前步骤是否有效
@@ -106,17 +127,26 @@ const filteredKnowledgeBases = () => {
 // 新建知识库 - 分步骤
 const showCreateDialog = ref(false)
 const createStep = ref(1)
+
+// 文件上传弹窗
+const showFileUploadDialog = ref(false)
+const selectedKnowledge = ref<any>(null)
+const fileFilter = ref('all') // all, parsed, parsing, failed
+const selectedFile = ref<any>(null) // 当前选中的文件
 const newKbForm = ref({
   name: '',
   description: '',
 })
-const embeddingConfig = ref({
-  modelId: '',
+// 模型配置
+const modelConfig = ref({
+  llmModelId: '',
+  embeddingModelId: '',
 })
 
 const parsingConfig = ref({
   enablePdf: true,
-  engine: 'default',
+  engine: 'markitdown',
+  doclingUrl: '',
   pandoc: true,
   academic: false,
   highRes: false,
@@ -126,12 +156,11 @@ const parsingConfig = ref({
 const openCreateDialog = () => {
   createStep.value = 1
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { modelId: '' }
-  // 获取已配置的模型列表
-  fetchModels()
+  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
   parsingConfig.value = {
     enablePdf: true,
-    engine: 'default',
+    engine: 'markitdown',
+    doclingUrl: '',
     pandoc: true,
     academic: false,
     highRes: false,
@@ -142,10 +171,11 @@ const openCreateDialog = () => {
 
 const cancelCreate = () => {
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { modelId: '' }
+  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
   parsingConfig.value = {
     enablePdf: true,
-    engine: 'default',
+    engine: 'markitdown',
+    doclingUrl: '',
     pandoc: true,
     academic: false,
     highRes: false,
@@ -165,7 +195,7 @@ const createKnowledgeBase = () => {
     status: 'ready'
   })
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { modelId: '' }
+  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
   showCreateDialog.value = false
   ElMessage.success('Knowledge base created successfully')
 }
@@ -210,9 +240,10 @@ const deleteKb = (id: string) => {
   }
 }
 
-// 查看详情
-const viewDetail = (kb: any) => {
-  ElMessage.info(`Viewing ${kb.name}`)
+// 进入知识库（上传文档界面）
+const enterKnowledge = (kb: any) => {
+  selectedKnowledge.value = kb
+  showFileUploadDialog.value = true
 }
 </script>
 
@@ -286,11 +317,11 @@ const viewDetail = (kb: any) => {
             <td class="px-5 py-4">
               <div class="flex items-center justify-center gap-2">
                 <button
-                  @click="viewDetail(kb)"
+                  @click="enterKnowledge(kb)"
                   class="p-2 rounded-lg transition-colors hover:bg-dark-600"
-                  title="View"
+                  title="Enter"
                 >
-                  <i class="fa-solid fa-eye text-gray-400 hover:text-primary-danger"></i>
+                  <i class="fa-solid fa-door-open text-gray-400 hover:text-primary-orange"></i>
                 </button>
                 <button
                   @click="openEdit(kb)"
@@ -325,7 +356,7 @@ const viewDetail = (kb: any) => {
     <!-- 新建知识库弹窗 -->
     <el-dialog
       v-model="showCreateDialog"
-      title="创建知识库"
+      title="Create Knowledge Base"
       width="1100px"
       :close-on-click-modal="false"
       :show-close="false"
@@ -413,10 +444,25 @@ 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 Model">
-                <el-select v-model="embeddingConfig.modelId" placeholder="Select a configured model" class="w-full" popper-class="dark-select-dropdown">
+              <el-form-item label="LLM Model">
+                <el-select v-model="modelConfig.llmModelId" placeholder="Select a chat model" class="w-full" popper-class="dark-select-dropdown">
                   <el-option
-                    v-for="model in models"
+                    v-for="model in llmModels"
+                    :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-select v-model="modelConfig.embeddingModelId" placeholder="Select an embedding model" class="w-full" popper-class="dark-select-dropdown">
+                  <el-option
+                    v-for="model in embeddingModels"
                     :key="model.id"
                     :label="model.name"
                     :value="model.id"
@@ -439,60 +485,24 @@ const viewDetail = (kb: any) => {
             </div>
 
             <div class="parsing-section">
-              <div class="parsing-row">
-                <span class="parsing-label">Enable PDF Parsing</span>
-                <el-switch v-model="parsingConfig.enablePdf" />
-              </div>
-
               <div class="parsing-row">
                 <span class="parsing-label">Parsing Engine</span>
-                <el-select v-model="parsingConfig.engine" placeholder="Select engine" class="parsing-select">
-                  <el-option label="Default Engine" value="default" />
-                  <el-option label="DeepDoc" value="deepdoc" />
+                <el-select v-model="parsingConfig.engine" placeholder="Select engine" class="parsing-select" popper-class="dark-select-dropdown">
+                  <el-option label="MarkItDown" value="markitdown" />
+                  <el-option label="Docling" value="docling" />
                 </el-select>
               </div>
 
-              <div class="parsing-divider"></div>
-
-              <div class="parsing-label">Enabled Post-processing</div>
-
-              <div class="postprocess-list">
-                <div class="postprocess-item" :class="{ active: parsingConfig.pandoc }">
-                  <div class="postprocess-toggle">
-                    <el-switch v-model="parsingConfig.pandoc" />
-                  </div>
-                  <div class="postprocess-info">
-                    <span class="postprocess-title">Use Pandoc Markdown Enrichment</span>
-                    <span class="postprocess-desc">Enable Pandoc conversion for rich formatting</span>
-                  </div>
-                </div>
-
-                <div class="postprocess-item" :class="{ active: parsingConfig.academic }">
-                  <div class="postprocess-toggle">
-                    <el-switch v-model="parsingConfig.academic" />
-                  </div>
-                  <div class="postprocess-info">
-                    <span class="postprocess-title">Use Academic Document Parsing</span>
-                    <span class="postprocess-desc">Parse formulas, tables, and academic structures</span>
-                  </div>
-                </div>
-
-                <div class="postprocess-item" :class="{ active: parsingConfig.highRes }">
-                  <div class="postprocess-toggle">
-                    <el-switch v-model="parsingConfig.highRes" />
-                  </div>
-                  <div class="postprocess-info">
-                    <span class="postprocess-title">Use High Resolution Parsing</span>
-                    <span class="postprocess-desc">High quality mode for complex documents</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="parsing-divider"></div>
-
-              <div class="parsing-row">
-                <span class="parsing-label">File Size Limit</span>
-                <el-input v-model="parsingConfig.fileSizeLimit" class="parsing-input" />
+              <!-- Docling URL 配置 -->
+              <div v-if="parsingConfig.engine === 'docling'" class="parsing-row" style="margin-top: 12px; align-items: center;">
+                <span class="parsing-label" style="flex: 1;">Docling URL</span>
+                <input
+                  v-model="parsingConfig.doclingUrl"
+                  type="text"
+                  placeholder="http://localhost:8080"
+                  class="input-field"
+                  style="width: 350px;"
+                >
               </div>
             </div>
           </div>
@@ -566,5 +576,138 @@ const viewDetail = (kb: any) => {
         </div>
       </template>
     </el-dialog>
+
+    <!-- 文件上传弹窗 -->
+    <el-dialog
+      v-model="showFileUploadDialog"
+      :title="selectedKnowledge?.name || 'Knowledge Base'"
+      width="95vw"
+      top="20px"
+      :close-on-click-modal="false"
+      class="kb-dialog file-upload-dialog"
+    >
+      <div class="file-upload-layout">
+        <!-- 顶部导航 -->
+        <div class="file-header">
+          <button class="back-btn" @click="showFileUploadDialog = false">
+            <i class="fa-solid fa-arrow-left"></i>
+          </button>
+          <h2 class="file-title">{{ selectedKnowledge?.name || 'Knowledge Base' }}</h2>
+          <button class="btn-primary">
+            <i class="fa-solid fa-upload"></i>
+            上传文档
+          </button>
+        </div>
+
+        <!-- 标签栏 -->
+        <div class="file-tabs">
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'all' }"
+            @click="fileFilter = 'all'"
+          >
+            全部
+          </div>
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'parsed' }"
+            @click="fileFilter = 'parsed'"
+          >
+            已解析
+          </div>
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'parsing' }"
+            @click="fileFilter = 'parsing'"
+          >
+            解析中
+          </div>
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'failed' }"
+            @click="fileFilter = 'failed'"
+          >
+            解析失败
+          </div>
+        </div>
+
+        <!-- 内容区 - 左侧文件列表 + 右侧预览 -->
+        <div class="file-main">
+          <!-- 左侧文件列表 -->
+          <div class="file-list">
+            <!-- 模拟文件项 -->
+            <div
+              class="file-item"
+              :class="{ selected: selectedFile === i }"
+              v-for="i in 8"
+              :key="i"
+              @click="selectedFile = i"
+            >
+              <div class="file-item-icon">
+                <i class="fa-solid fa-file-pdf"></i>
+              </div>
+              <div class="file-item-info">
+                <div class="file-item-name">产品手册_v2.0.pdf</div>
+                <div class="file-item-meta">
+                  <span>2.4 MB</span>
+                  <span>2024-01-15</span>
+                </div>
+              </div>
+              <div class="file-item-status success">
+                <i class="fa-solid fa-check-circle"></i>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右侧预览面板 -->
+          <div class="file-preview">
+            <div class="preview-header">
+              <div class="preview-header-left">
+                <i class="fa-solid fa-file-pdf"></i>
+                <span class="preview-filename">产品手册_v2.0.pdf</span>
+              </div>
+              <div class="preview-header-info">
+                <span class="info-tag">2.4 MB</span>
+                <span class="info-tag">2024-01-15 10:30</span>
+                <span class="info-tag success">解析成功</span>
+                <span class="info-tag">156 个切片</span>
+              </div>
+            </div>
+            <div class="preview-content">
+              <!-- PDF文件预览 -->
+              <div class="pdf-preview">
+                <iframe
+                  src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+                  class="pdf-iframe"
+                ></iframe>
+              </div>
+              <div class="preview-pagination">
+                <button class="page-btn" disabled>
+                  <i class="fa-solid fa-chevron-left"></i>
+                </button>
+                <span class="page-info">1 / 3</span>
+                <button class="page-btn">
+                  <i class="fa-solid fa-chevron-right"></i>
+                </button>
+              </div>
+            </div>
+            <div class="preview-actions">
+              <button class="action-btn delete">
+                <i class="fa-solid fa-trash"></i>
+                删除
+              </button>
+              <button class="action-btn reparse">
+                <i class="fa-solid fa-rotate"></i>
+                重新解析
+              </button>
+              <button class="action-btn confirm">
+                <i class="fa-solid fa-check"></i>
+                确认
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>