feat: 优化前端页面和组件

- 重构 Agents 页面
- 优化 Knowledge 页面
- 更新侧边栏导航
- 添加前端依赖

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

web/src/views/Knowledge.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { useModelSettings } from './settings/useModelSettings'
 import { fetchKnowledgeBases, createKnowledgeBase as apiCreateKnowledgeBase, deleteKnowledgeBase as apiDeleteKnowledgeBase, fetchKnowledgeDocuments } from './knowledge/useKnowledge'
 import VueOfficeDocx from '@vue-office/docx'
@@ -42,6 +42,11 @@ const embeddingModels = computed(() => {
   return models.value.filter((m: any) => m.model_type === 'embedding')
 })
 
+// 筛选 VLM 模型
+const vlmModels = computed(() => {
+  return models.value.filter((m: any) => m.model_type === 'vlm')
+})
+
 // 步骤验证
 const step1Valid = computed(() => !!newKbForm.value.name.trim())
 const step2Valid = computed(() => !!modelConfig.value.llmModelId && !!modelConfig.value.embeddingModelId)
@@ -188,6 +193,7 @@ const newKbForm = ref({
 const modelConfig = ref({
   llmModelId: '',
   embeddingModelId: '',
+  vlmModelId: '',
 })
 
 const parsingConfig = ref({
@@ -212,7 +218,11 @@ const storageConfig = ref({
 const openCreateDialog = () => {
   createStep.value = 1
   newKbForm.value = { name: '', description: '' }
-  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
+  modelConfig.value = {
+    llmModelId: '',
+    embeddingModelId: '',
+    vlmModelId: '',
+  }
   parsingConfig.value = {
     enablePdf: true,
     engine: 'markitdown',
@@ -222,13 +232,23 @@ const openCreateDialog = () => {
     highRes: false,
     fileSizeLimit: '5242880',
   }
-  storageConfig.value = { type: 'local' }
+  storageConfig.value = {
+    type: 'local',
+    endpoint: '',
+    accessKeyId: '',
+    secretAccessKey: '',
+    bucket: '',
+  }
   showCreateDialog.value = true
 }
 
 const cancelCreate = () => {
   newKbForm.value = { name: '', description: '' }
-  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
+  modelConfig.value = {
+    llmModelId: '',
+    embeddingModelId: '',
+    vlmModelId: '',
+  }
   parsingConfig.value = {
     enablePdf: true,
     engine: 'markitdown',
@@ -238,7 +258,13 @@ const cancelCreate = () => {
     highRes: false,
     fileSizeLimit: '5242880',
   }
-  storageConfig.value = { type: 'local' }
+  storageConfig.value = {
+    type: 'local',
+    endpoint: '',
+    accessKeyId: '',
+    secretAccessKey: '',
+    bucket: '',
+  }
   showCreateDialog.value = false
 }
 
@@ -254,6 +280,10 @@ const createKnowledgeBase = async () => {
       enable_pdf: parsingConfig.value.enablePdf,
       pandoc: parsingConfig.value.pandoc,
     },
+    vlm_config: modelConfig.value.vlmModelId ? {
+      enabled: true,
+      model_id: modelConfig.value.vlmModelId,
+    } : undefined,
     storage_config: {
       type: storageConfig.value.type,
       endpoint: storageConfig.value.type === 'minio' ? storageConfig.value.endpoint : undefined,
@@ -266,7 +296,11 @@ const createKnowledgeBase = async () => {
   if (result.success) {
     await fetchKbList()
     newKbForm.value = { name: '', description: '' }
-    modelConfig.value = { llmModelId: '', embeddingModelId: '' }
+    modelConfig.value = {
+      llmModelId: '',
+      embeddingModelId: '',
+      vlmModelId: '',
+    }
     parsingConfig.value = {
       enablePdf: true,
       engine: 'markitdown',
@@ -316,12 +350,26 @@ const cancelEdit = () => {
 
 // 删除知识库
 const deleteKb = async (id: string) => {
-  const result = await apiDeleteKnowledgeBase(id)
-  if (result.success) {
-    await fetchKbList()
-    ElMessage.success('Knowledge base deleted')
-  } else {
-    ElMessage.error(result.message || 'Failed to delete knowledge base')
+  try {
+    await ElMessageBox.confirm(
+      'Are you sure you want to delete this knowledge base? This action cannot be undone.',
+      'Delete Knowledge Base',
+      {
+        confirmButtonText: 'Delete',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+      }
+    )
+
+    const result = await apiDeleteKnowledgeBase(id)
+    if (result.success) {
+      await fetchKbList()
+      ElMessage.success('Knowledge base deleted')
+    } else {
+      ElMessage.error(result.message || 'Failed to delete knowledge base')
+    }
+  } catch {
+    // User cancelled
   }
 }
 
@@ -890,6 +938,23 @@ const deleteDocument = async (docId: string) => {
                   </el-option>
                 </el-select>
               </el-form-item>
+
+              <!-- VLM Configuration -->
+              <el-form-item label="VLM Model (Optional)">
+                <el-select v-model="modelConfig.vlmModelId" placeholder="Select a VLM model" class="w-full" popper-class="dark-select-dropdown" clearable>
+                  <el-option
+                    v-for="model in vlmModels"
+                    :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>
           </div>
 

web/src/views/knowledge/useKnowledge.ts

@@ -77,6 +77,10 @@ export const createKnowledgeBase = async (params: {
     enable_pdf?: boolean
     pandoc?: boolean
   }
+  vlm_config?: {
+    enabled: boolean
+    model_id: string
+  }
   storage_config?: {
     type: string
     endpoint?: string
@@ -195,7 +199,7 @@ export const reparseDocument = async (kbId: string, docId: string): Promise<{ su
 }
 
 // 获取文档预览内容
-export const getDocumentPreview = async (kbId: string, docId: string, page: number = 1): Promise<{ success: boolean; data?: { total_pages: number; current_page: number; content: string }; message?: string }> => {
+export const getDocumentPreview = async (kbId: string, docId: string, page: number = 1): Promise<{ success: boolean; data?: { total_pages: number; current_page: number; content: string; content_type?: string }; message?: string }> => {
   try {
     const response = await fetch(`${API_BASE}/api/knowledge/${kbId}/documents/${docId}/preview?page=${page}`)
     const data = await response.json()