feat: 优化前端页面和组件

- 重构 Agents 页面 - 优化 Knowledge 页面 - 更新侧边栏导航 - 添加前端依赖 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 15:42:21 +08:00
parent 0a9f6e278e
commit cac05b4297
6 changed files with 513 additions and 642 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -20,6 +20,7 @@
        "vue-router": "^4.3.0"
      },
      "devDependencies": {
+        "@types/papaparse": "^5.5.2",
        "@vitejs/plugin-vue": "^5.0.4",
        "autoprefixer": "^10.4.19",
        "postcss": "^8.4.38",
@@ -982,6 +983,27 @@
        "@types/lodash": "*"
      }
    },
+    "node_modules/@types/node": {
+      "version": "25.3.5",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-25.3.5.tgz",
+      "integrity": "sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/papaparse": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmmirror.com/@types/papaparse/-/papaparse-5.5.2.tgz",
+      "integrity": "sha512-gFnFp/JMzLHCwRf7tQHrNnfhN4eYBVYYI897CGX4MY1tzY9l2aLkVyx2IlKZ/SAqDbB3I1AOZW5gTMGGsqWliA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/web-bluetooth": {
      "version": "0.0.20",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -2624,6 +2646,13 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -21,6 +21,7 @@
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
+    "@types/papaparse": "^5.5.2",
    "@vitejs/plugin-vue": "^5.0.4",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -39,42 +39,45 @@ interface MenuItem {
  path?: string
 }

-const mainMenu = computed<MenuItem[]>(() => [
-  { name: 'Dashboard', icon: 'fa-gauge', path: '/dashboard' },
-  { name: 'Agents', icon: 'fa-robot', badge: 3, path: '/agents' },
-  { name: 'Script', icon: 'fa-code', path: '/script' },
+// 第1组: Chat, Agents
+const group1 = computed(() => [
+  { name: 'Chat', icon: 'fa-robot', path: '/agents' },
+  { name: 'Agents', icon: 'fa-users', badge: 3, path: '/agents' },
+])
+
+// 第2组: Database, Knowledge
+const group2 = computed(() => [
  { name: 'Database', icon: 'fa-database', path: '/database', badge: databaseCount.value },
  { name: 'Knowledge', icon: 'fa-brain', path: '/knowledge', badge: knowledgeCount.value },
 ])

-const middleMenu: MenuItem[] = [
+// 第3组: Skills, Tools, Script
+const group3 = computed(() => [
  { name: 'Skills', icon: 'fa-wand-magic-sparkles', badge: 21, path: '/mcp' },
  { name: 'Tools', icon: 'fa-tools', badge: 13, path: '/model-apis' },
-]
+  { name: 'Script', icon: 'fa-code', path: '/script' },
+])

-const bottomMenu: MenuItem[] = [
-  { name: 'Settings', icon: 'fa-gear', path: '/settings' },
-]
-
-const bottomMenu2: MenuItem[] = [
+// 第4组: Dashboard, Account, Settings
+const group4 = computed(() => [
+  { name: 'Dashboard', icon: 'fa-gauge', path: '/dashboard' },
  { name: 'Account', icon: 'fa-user', path: '/account' },
-]
+  { name: 'Settings', icon: 'fa-gear', path: '/settings' },
+])

 const activeMenu = computed(() => {
  const currentPath = route.path
-  // Check main menu
-  const menuItem = mainMenu.value.find(item => item.path === currentPath)
-  if (menuItem) return menuItem.name
-  // Check middle menu (Skills, Tools)
-  const middleItem = middleMenu.find(item => item.path === currentPath)
-  if (middleItem) return middleItem.name
-  // Check bottom menu (Settings)
-  const bottomItem = bottomMenu.find(item => item.path === currentPath)
-  if (bottomItem) return bottomItem.name
-  // Check bottomMenu2 (Account)
-  const bottomItem2 = bottomMenu2.find(item => item.path === currentPath)
-  if (bottomItem2) return bottomItem2.name
-  return 'Dashboard'
+
+  // Special case for /agents - prioritize Chat over Agents
+  if (currentPath === '/agents') {
+    return 'Chat'
+  }
+
+  // Check all groups
+  const allGroups = [...group1.value, ...group2.value, ...group3.value, ...group4.value]
+  const item = allGroups.find(item => item.path === currentPath)
+  if (item) return item.name
+  return 'Chat'
 })

 const navigateTo = (item: MenuItem) => {
@@ -129,8 +132,8 @@ const handleUserCommand = (command: string) => {
    <!-- 导航菜单 -->
    <nav class="flex-1 px-3 py-2">
      <ul class="space-y-1">
-        <!-- Dashboard, Agents -->
-        <li v-for="item in mainMenu.slice(0, 2)" :key="item.name">
+        <!-- 第1组: Chat, Agents -->
+        <li v-for="item in group1" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -148,8 +151,8 @@ const handleUserCommand = (command: string) => {
        <!-- 分隔线1 -->
        <li class="my-4 border-t border-dark-500"></li>

-        <!-- Database, Knowledge -->
-        <li v-for="item in mainMenu.slice(2)" :key="item.name">
+        <!-- 第2组: Database, Knowledge -->
+        <li v-for="item in group2" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -167,8 +170,8 @@ const handleUserCommand = (command: string) => {
        <!-- 分隔线2 -->
        <li class="my-4 border-t border-dark-500"></li>

-        <!-- Skills & Tools -->
-        <li v-for="item in middleMenu" :key="item.name">
+        <!-- 第3组: Skills, Tools, Script -->
+        <li v-for="item in group3" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -183,8 +186,11 @@ const handleUserCommand = (command: string) => {
          </a>
        </li>

-        <!-- Settings -->
-        <li v-for="item in bottomMenu" :key="item.name">
+        <!-- 分隔线3 -->
+        <li class="my-4 border-t border-dark-500"></li>
+
+        <!-- 第4组: Dashboard, Account, Settings -->
+        <li v-for="item in group4" :key="item.name">
          <a
            href="#"
            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
@@ -202,24 +208,6 @@ const handleUserCommand = (command: string) => {
            </div>
          </a>
        </li>
-
-        <!-- 分隔线 -->
-        <li class="my-4 border-t border-dark-500"></li>
-
-        <!-- Account -->
-        <li v-for="item in bottomMenu2" :key="item.name">
-          <a
-            href="#"
-            class="flex items-center justify-between px-3 py-2.5 rounded-lg transition-colors text-sm"
-            :class="activeMenu === item.name ? 'bg-dark-600 text-white' : 'text-gray-400 hover:bg-dark-600 hover:text-white'"
-            @click="navigateTo(item)"
-          >
-            <div class="flex items-center gap-3">
-              <i :class="['fa-solid', item.icon, 'w-5', 'text-center']"></i>
-              <span>{{ item.name }}</span>
-            </div>
-          </a>
-        </li>
      </ul>
    </nav>

--- a/web/src/views/Agents.vue
+++ b/web/src/views/Agents.vue
--- a/web/src/views/Knowledge.vue
+++ b/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>

--- a/web/src/views/knowledge/useKnowledge.ts
+++ b/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()