feat: 优化 Knowledge 页面并添加样式文件

- 重构 Knowledge 页面代码
- 新增 knowledge.css 样式文件
- 添加知识库截图

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

web/src/views/Database.vue

@@ -119,14 +119,14 @@ const {
                   class="btn-icon"
                   title="Map Tables"
                 >
-                  <i class="fa-solid fa-link text-gray-400"></i>
+                  <i class="fa-solid fa-link text-gray-400 hover:text-primary-danger"></i>
                 </button>
                 <button
                   @click="openEdit(db)"
                   class="btn-icon"
                   title="Edit"
                 >
-                  <i class="fa-solid fa-pen text-gray-400"></i>
+                  <i class="fa-solid fa-pen text-gray-400 hover:text-primary-danger"></i>
                 </button>
                 <button
                   @click="deleteDb(db.id)"
@@ -529,7 +529,7 @@ const {
                     <button
                       v-if="selectedTables.length > 1"
                       @click="prevTable"
-                      class="p-1 hover:bg-dark-700 rounded"
+                      class="p-1 rounded transition-colors hover:bg-dark-700"
                       :disabled="currentTableIndex <= 0"
                     >
                       <i class="fa-solid fa-chevron-left text-gray-400"></i>
@@ -538,7 +538,7 @@ const {
                     <button
                       v-if="selectedTables.length > 1"
                       @click="nextTable"
-                      class="p-1 hover:bg-dark-700 rounded"
+                      class="p-1 rounded transition-colors hover:bg-dark-700"
                       :disabled="currentTableIndex >= selectedTables.length - 1"
                     >
                       <i class="fa-solid fa-chevron-right text-gray-400"></i>

web/src/views/Knowledge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import './database/database.css'
+import './knowledge/knowledge.css'
 
 // 模拟知识库数据
 const knowledgeBases = ref([
@@ -47,18 +47,38 @@ const filteredKnowledgeBases = () => {
   )
 }
 
-// 新建知识库
+// 新建知识库 - 分步骤
 const showCreateDialog = ref(false)
+const createStep = ref(1)
 const newKbForm = ref({
   name: '',
   description: '',
 })
+const embeddingConfig = ref({
+  provider: '',
+  model: '',
+})
 
-const createKnowledgeBase = () => {
+const openCreateDialog = () => {
+  createStep.value = 1
+  newKbForm.value = { name: '', description: '' }
+  embeddingConfig.value = { provider: '', model: '' }
+  showCreateDialog.value = true
+}
+
+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(),
     name: newKbForm.value.name,
@@ -69,12 +89,14 @@ const createKnowledgeBase = () => {
     status: 'ready'
   })
   newKbForm.value = { name: '', description: '' }
+  embeddingConfig.value = { provider: '', model: '' }
   showCreateDialog.value = false
   ElMessage.success('Knowledge base created successfully')
 }
 
 const cancelCreate = () => {
   newKbForm.value = { name: '', description: '' }
+  embeddingConfig.value = { provider: '', model: '' }
   showCreateDialog.value = false
 }
 
@@ -132,7 +154,7 @@ const viewDetail = (kb: any) => {
         <i class="fa-solid fa-brain text-gray-400"></i>
         <span class="font-medium">Knowledge Base</span>
       </div>
-      <button @click="showCreateDialog = true" class="btn-primary">
+      <button @click="openCreateDialog" class="btn-primary">
         <i class="fa-solid fa-plus"></i>
         New Knowledge Base
       </button>
@@ -195,21 +217,21 @@ const viewDetail = (kb: any) => {
               <div class="flex items-center justify-center gap-2">
                 <button
                   @click="viewDetail(kb)"
-                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  class="p-2 rounded-lg transition-colors hover:bg-dark-600"
                   title="View"
                 >
-                  <i class="fa-solid fa-eye text-gray-400"></i>
+                  <i class="fa-solid fa-eye text-gray-400 hover:text-primary-danger"></i>
                 </button>
                 <button
                   @click="openEdit(kb)"
-                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  class="p-2 rounded-lg transition-colors hover:bg-dark-600"
                   title="Edit"
                 >
-                  <i class="fa-solid fa-pen text-gray-400"></i>
+                  <i class="fa-solid fa-pen text-gray-400 hover:text-primary-danger"></i>
                 </button>
                 <button
                   @click="deleteKb(kb.id)"
-                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  class="p-2 rounded-lg transition-colors hover:bg-dark-600"
                   title="Delete"
                 >
                   <i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
@@ -233,26 +255,116 @@ const viewDetail = (kb: any) => {
     <!-- 新建知识库弹窗 -->
     <el-dialog
       v-model="showCreateDialog"
-      title="Create Knowledge Base"
+      title="创建知识库"
-      width="500px"
+      width="1100px"
       :close-on-click-modal="false"
-      class="kb-dialog"
+      :show-close="false"
+      class="kb-dialog kb-create-dialog"
     >
-      <p class="dialog-desc">Create a new knowledge base to store your documents</p>
+      <div class="create-layout">
+        <!-- 左侧：选项列表 -->
+        <div class="sidebar">
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 1 }"
+            @click="createStep = 1"
+          >
+            <i class="fa-solid fa-layer-group menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">基本信息</span>
+              <span class="menu-desc">知识库名称和描述</span>
+            </div>
+            <i v-if="createStep === 1" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+          <div
+            class="menu-item"
+            :class="{ active: createStep === 2 }"
+            @click="createStep = 2"
+          >
+            <i class="fa-solid fa-brain menu-icon"></i>
+            <div class="menu-content">
+              <span class="menu-title">Embedding 配置</span>
+              <span class="menu-desc">向量化和检索设置</span>
+            </div>
+            <i v-if="createStep === 2" class="fa-solid fa-chevron-right menu-arrow"></i>
+          </div>
+        </div>
 
+        <!-- 右侧：内容区 -->
+        <div class="content">
+          <!-- 基本信息 -->
+          <div v-if="createStep === 1" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-layer-group section-icon"></i>
+              <span class="section-title">基本信息</span>
+            </div>
             <el-form label-position="top" class="kb-form">
-        <el-form-item label="Name">
+              <el-form-item label="名称" required>
-          <el-input v-model="newKbForm.name" placeholder="Enter knowledge base name" />
+                <el-input v-model="newKbForm.name" placeholder="请输入知识库名称" />
               </el-form-item>
-        <el-form-item label="Description">
+              <el-form-item label="描述">
-          <el-input v-model="newKbForm.description" type="textarea" :rows="3" placeholder="Enter description" />
+                <el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="请输入知识库描述" />
               </el-form-item>
             </el-form>
+          </div>
+
+          <!-- Embedding 配置 -->
+          <div v-if="createStep === 2" class="form-content">
+            <div class="section-header">
+              <i class="fa-solid fa-brain section-icon"></i>
+              <span class="section-title">Embedding 配置</span>
+            </div>
+            <el-form label-position="top" class="kb-form">
+              <el-form-item label="Embedding Provider">
+                <el-select v-model="embeddingConfig.provider" placeholder="请选择 Embedding 服务商" 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>
+                    </div>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="Embedding Model">
+                <el-input v-model="embeddingConfig.model" placeholder="如：text-embedding-ada-002" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button text @click="cancelCreate">Cancel</el-button>
+          <div class="footer-left">
-          <el-button type="primary" @click="createKnowledgeBase">Confirm</el-button>
+            <span class="step-hint">填写完基本信息后，点击下一步继续配置</span>
+          </div>
+          <div class="footer-right">
+            <el-button @click="cancelCreate" class="cancel-btn">取消</el-button>
+            <el-button v-if="createStep === 2" @click="createStep = 1" class="prev-btn">
+              <i class="fa-solid fa-arrow-left"></i>
+              上一步
+            </el-button>
+            <el-button v-if="createStep === 1" @click="createStep = 2" class="next-btn">
+              下一步
+              <i class="fa-solid fa-arrow-right"></i>
+            </el-button>
+            <el-button v-if="createStep === 2" @click="createKnowledgeBase" class="confirm-btn">
+              <i class="fa-solid fa-plus"></i>
+              创建
+            </el-button>
+          </div>
         </div>
       </template>
     </el-dialog>
@@ -285,182 +397,3 @@ const viewDetail = (kb: any) => {
     </el-dialog>
   </div>
 </template>
-
-<style scoped>
-/* 按钮样式 */
-.btn-primary {
-  background-color: #f97316;
-  border: none;
-  color: white;
-  padding: 10px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.btn-primary:hover {
-  background-color: #ea580c;
-}
-
-/* 搜索框 */
-.search-input {
-  background-color: #171922;
-  border: 1px solid #374151;
-  color: white;
-  padding: 10px 12px 10px 36px;
-  border-radius: 8px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.search-input:focus {
-  border-color: #f97316;
-}
-
-.search-input::placeholder {
-  color: #6b7280;
-}
-
-/* 表格样式 */
-.bg-dark-700 {
-  background-color: #1f2937;
-}
-
-.bg-dark-600 {
-  background-color: #111827;
-}
-
-.table-row {
-  border-bottom: 1px solid #374151;
-  transition: background-color 0.2s;
-}
-
-.table-row:hover {
-  background-color: #374151;
-}
-
-/* 空状态 - 使用 database.css 中的样式 */
-.empty-box {
-  min-height: 340px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-icon {
-  width: 100px;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #1f2937, #111827);
-  border-radius: 24px;
-  margin-bottom: 20px;
-}
-
-.empty-icon i {
-  font-size: 40px;
-  color: #6b7280;
-}
-
-.empty-text {
-  color: #d1d5db;
-  font-size: 1.25rem;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.empty-tip {
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
-/* 弹窗样式 */
-.kb-dialog :deep(.el-dialog) {
-  background-color: #1f2937;
-  border-radius: 12px;
-  border: 1px solid #374151;
-}
-
-.kb-dialog :deep(.el-dialog__header) {
-  padding: 20px 24px;
-  border-bottom: 1px solid #374151;
-}
-
-.kb-dialog :deep(.el-dialog__title) {
-  color: white;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.kb-dialog :deep(.el-dialog__headerbtn) {
-  top: 20px;
-  right: 20px;
-}
-
-.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
-  color: #9ca3af;
-}
-
-.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
-  color: #f97316;
-}
-
-.kb-dialog :deep(.el-dialog__body) {
-  padding: 24px;
-}
-
-.kb-dialog :deep(.el-dialog__footer) {
-  padding: 16px 24px;
-  border-top: 1px solid #374151;
-}
-
-.dialog-desc {
-  font-size: 14px;
-  color: #9ca3af;
-  margin-bottom: 20px;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
-.kb-form :deep(.el-form-item__label) {
-  color: #d1d5db;
-  font-size: 14px;
-}
-
-.kb-form :deep(.el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #374151;
-  box-shadow: none;
-}
-
-.kb-form :deep(.el-input__inner) {
-  color: white;
-}
-
-.kb-form :deep(.el-textarea__inner) {
-  background-color: #171922;
-  border: 1px solid #374151;
-  color: white;
-  box-shadow: none;
-}
-
-.kb-dialog :deep(.el-button--primary) {
-  background-color: #f97316;
-  border-color: #f97316;
-}
-
-.kb-dialog :deep(.el-button--primary:hover) {
-  background-color: #ea580c;
-  border-color: #ea580c;
-}
-</style>

web/src/views/Settings.vue

@@ -1,97 +1,38 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
+import { useModelSettings } from './settings/useModelSettings'
+import './settings/settings.css'
+import './settings/settings-parsing.css'
+import './settings/modelSettings.css'
 
 // 当前选中的设置菜单
 const activeMenu = ref('general')
 
-// Model 列表
+// 导入 Model Settings 逻辑
-const models = ref([
+const {
-  { id: 1, name: 'OpenAI', endpoint: 'api.openai.com', status: 'active', modelType: 'chat' },
+  models,
-  { id: 2, name: 'Anthropic', endpoint: 'api.anthropic.com', status: 'active', modelType: 'chat' },
+  modelsLoading,
-  { id: 3, name: 'text-embedding-3-small', endpoint: 'api.openai.com', status: 'active', modelType: 'embedding' },
+  modelTypeOptions,
-])
+  providerOptions,
+  showAddModelForm,
+  newModelForm,
+  testingConnection,
+  connectionStatus,
+  fetchModels,
+  testConnection,
+  addModel,
+  cancelAddModel,
+  deleteModel,
+} = useModelSettings()
 
-// Model Type 选项
+// 监听菜单切换，获取模型列表
-const modelTypeOptions = [
+watch(activeMenu, (newVal) => {
-  { value: 'chat', label: 'Chat' },
+  if (newVal === 'modelSettings') {
-  { value: 'embedding', label: 'Embedding' },
+    fetchModels()
-  { value: 'rerank', label: 'Rerank' },
+  }
-  { value: 'vlm', label: 'VLM' },
-]
-
-// 是否显示新增模型表单
-const showAddModelForm = ref(false)
-
-// 新增模型表单
-const newModelForm = ref({
-  name: '',
-  apiKey: '',
-  apiEndpoint: '',
-  baseUrl: '',
-  provider: '',
-  model: '',
-  modelType: '',
 })
 
-// 测试连接状态
-const testingConnection = ref(false)
-const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')
-
-// 测试连接
-const testConnection = async () => {
-  if (!newModelForm.value.apiKey || !newModelForm.value.baseUrl) {
-    ElMessage.warning('Please enter API Key and Base URL')
-    return
-  }
-
-  testingConnection.value = true
-  connectionStatus.value = 'idle'
-
-  try {
-    // 模拟API测试（实际项目中应该调用后端接口）
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    // 假设连接成功
-    connectionStatus.value = 'success'
-    ElMessage.success('Connection successful!')
-  } catch (error) {
-    connectionStatus.value = 'error'
-    ElMessage.error('Connection failed')
-  } finally {
-    testingConnection.value = false
-  }
-}
-
-// Provider 选项
-const providerOptions = [
-  { value: 'OpenAI', label: 'OpenAI' },
-  { value: 'Ollama', label: 'Ollama' },
-]
-
-// 添加新模型
-const addModel = () => {
-  if (newModelForm.value.name && newModelForm.value.apiEndpoint) {
-    models.value.push({
-      id: Date.now(),
-      name: newModelForm.value.name,
-      endpoint: newModelForm.value.apiEndpoint,
-      status: 'active',
-      modelType: newModelForm.value.modelType || 'chat',
-    })
-    newModelForm.value = { name: '', apiKey: '', apiEndpoint: '', baseUrl: '', provider: '', model: '', modelType: '' }
-    connectionStatus.value = 'idle'
-    showAddModelForm.value = false
-    ElMessage.success('Model added successfully')
-  }
-}
-
-// 取消添加
-const cancelAddModel = () => {
-  newModelForm.value = { name: '', apiKey: '', apiEndpoint: '', baseUrl: '', provider: '', model: '', modelType: '' }
-  connectionStatus.value = 'idle'
-  showAddModelForm.value = false
-}
-
 // 设置菜单列表
 const menuItems = [
   { key: 'general', label: 'General', icon: 'fa-gear' },
@@ -102,6 +43,21 @@ const menuItems = [
   { key: 'storage', label: 'Storage', icon: 'fa-database' },
 ]
 
+// Model Options by Provider (for Parsing settings)
+const modelOptionsByProvider: Record<string, { value: string; label: string }[]> = {
+  'OpenAI': [
+    { value: 'gpt-4o', label: 'GPT-4o' },
+    { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
+    { value: 'gpt-4-turbo', label: 'GPT-4 Turbo' },
+    { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo' },
+  ],
+  'Ollama': [
+    { value: 'llama3', label: 'Llama 3' },
+    { value: 'mistral', label: 'Mistral' },
+    { value: 'codellama', label: 'CodeLlama' },
+  ],
+}
+
 // General 设置表单
 const generalForm = ref({
   name: 'Alex Smith',
@@ -485,39 +441,49 @@ const saveStorageSettings = () => {
           </div>
 
           <!-- 模型列表 -->
-          <table class="w-full">
+          <div v-if="modelsLoading" class="loading-spinner">
-            <thead class="bg-dark-600">
+            <i class="fa-solid fa-spinner"></i>
+          </div>
+          <table v-else class="model-table">
+            <thead>
               <tr>
-                <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Model Name</th>
+                <th>Model Name</th>
-                <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Model Type</th>
+                <th class="text-center">Provider</th>
-                <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">API Endpoint</th>
+                <th class="text-center">Model</th>
-                <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
+                <th class="text-center">Model Type</th>
-                <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+                <th class="text-center">Base URL</th>
+                <th class="text-center">Status</th>
+                <th class="text-center">Actions</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="model in models" :key="model.id" class="table-row">
-                <td class="px-5 py-4">
+                <td>
                   <span class="font-medium">{{ model.name }}</span>
                 </td>
-                <td class="px-5 py-4 text-center">
+                <td class="text-center text-sm">
-                  <span class="bg-primary-orange/20 text-primary-orange px-2 py-1 rounded text-sm capitalize">{{ model.modelType }}</span>
+                  {{ model.provider }}
                 </td>
-                <td class="px-5 py-4 text-center text-gray-400 text-sm">
+                <td class="text-center text-sm">
-                  {{ model.endpoint }}
+                  {{ model.model }}
                 </td>
-                <td class="px-5 py-4 text-center">
+                <td class="text-center">
-                  <span class="bg-primary-success/20 text-primary-success px-2 py-1 rounded text-sm capitalize">{{ model.status }}</span>
+                  <span class="model-type-tag">{{ model.model_type }}</span>
                 </td>
-                <td class="px-5 py-4">
+                <td class="text-center text-sm">
-                  <div class="flex items-center justify-center gap-2">
+                  {{ model.base_url }}
+                </td>
+                <td class="text-center">
+                  <span v-if="model.status === 'active'" class="status-active">Active</span>
+                  <span v-else class="status-inactive">Inactive</span>
+                </td>
+                <td class="text-center">
                   <button class="btn-icon" title="Edit">
-                      <i class="fa-solid fa-pen text-gray-400"></i>
+                    <i class="fa-solid fa-pen"></i>
                   </button>
-                    <button class="btn-icon" title="Delete">
+                  <button class="btn-icon" title="Delete" @click="deleteModel(model.id)">
-                      <i class="fa-solid fa-trash text-gray-400"></i>
+                    <i class="fa-solid fa-trash"></i>
                   </button>
-                  </div>
                 </td>
               </tr>
             </tbody>
@@ -603,488 +569,3 @@ const saveStorageSettings = () => {
     </div>
   </div>
 </template>
-
-<style scoped>
-.settings-page {
-  padding: 24px;
-  min-height: 100vh;
-  background-color: #0a0a0f;
-  transition: background-color 0.3s ease;
-}
-
-.page-header {
-  margin-bottom: 24px;
-}
-
-.page-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: white;
-}
-
-.settings-container {
-  display: flex;
-  gap: 24px;
-  background-color: #121218;
-  border-radius: 12px;
-  overflow: hidden;
-  min-height: calc(100vh - 120px);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
-}
-
-/* 左侧导航 */
-.settings-nav {
-  width: 280px;
-  background-color: #0d0d12;
-  padding: 16px 0;
-  flex-shrink: 0;
-  border-right: 1px solid #1e1e28;
-}
-
-.settings-nav ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 20px;
-  color: #9ca3af;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.nav-item:hover {
-  background-color: #1a1a24;
-  color: white;
-  transition: all 0.25s ease;
-}
-
-.nav-item.active {
-  background-color: #1a1a24;
-  color: #f97316;
-  border-left: 3px solid #f97316;
-  transition: all 0.25s ease;
-}
-
-.nav-item i {
-  width: 20px;
-  text-align: center;
-}
-
-/* 子菜单 */
-.sub-menu {
-  list-style: none;
-  padding-left: 20px;
-  margin: 0;
-}
-
-.sub-menu .nav-item {
-  padding: 10px 16px;
-  font-size: 13px;
-}
-
-.nav-item.sub-item {
-  padding-left: 40px;
-  font-size: 13px;
-}
-
-/* 右侧内容 */
-.settings-content {
-  flex: 1;
-  padding: 32px;
-  overflow-y: auto;
-  background-color: #121218;
-}
-
-.settings-section {
-  width: 100%;
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.section-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: white;
-  margin-bottom: 8px;
-}
-
-.section-desc {
-  font-size: 14px;
-  color: #9ca3af;
-  margin-bottom: 32px;
-}
-
-/* 模型列表 */
-table {
-  border-collapse: collapse;
-}
-
-.table-row {
-  border-bottom: 1px solid #252530;
-}
-
-.table-row:hover {
-  background-color: #1a1a24;
-  transition: background-color 0.25s ease;
-}
-
-.btn-icon {
-  padding: 6px;
-  border-radius: 6px;
-  transition: all 0.25s ease;
-}
-
-.btn-icon:hover {
-  background-color: #1e1e28;
-}
-
-.btn-icon:hover i {
-  color: #f97316 !important;
-}
-
-/* 添加模型按钮 */
-.add-model-btn {
-  background-color: #f97316;
-  border-color: #f97316;
-}
-
-.add-model-btn:hover {
-  background-color: #ea580c;
-  border-color: #ea580c;
-}
-
-/* 添加模型表单 */
-.add-model-form {
-  width: 100%;
-  max-width: 600px;
-}
-
-.form-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-start;
-  padding-top: 8px;
-}
-
-/* 表单样式 */
-.settings-form :deep(.el-form-item__label) {
-  color: #d1d5db;
-  font-size: 14px;
-}
-
-.settings-form :deep(.el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #4b5563;
-  box-shadow: none;
-}
-
-.settings-form :deep(.el-input__inner) {
-  color: white;
-}
-
-.settings-form :deep(.el-select) {
-  width: 100%;
-}
-
-.settings-form :deep(.el-select .el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #4b5563;
-}
-
-.password-field {
-  display: flex;
-  gap: 12px;
-}
-
-.password-field .el-input {
-  flex: 1;
-}
-
-.settings-form :deep(.el-button--primary) {
-  background-color: #f97316;
-  border-color: #f97316;
-}
-
-.settings-form :deep(.el-button--primary:hover) {
-  background-color: #ea580c;
-  border-color: #ea580c;
-}
-
-/* 弹窗样式 */
-.add-model-dialog :deep(.el-dialog) {
-  background-color: #16161e;
-  border-radius: 12px;
-  border: 1px solid #252530;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  animation: dialogFadeIn 0.25s ease;
-}
-
-@keyframes dialogFadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.add-model-dialog :deep(.el-dialog__header) {
-  padding: 20px 24px;
-  border-bottom: 1px solid #252530;
-}
-
-.add-model-dialog :deep(.el-dialog__title) {
-  color: white;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.add-model-dialog :deep(.el-dialog__headerbtn) {
-  top: 20px;
-  right: 20px;
-}
-
-.add-model-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
-  color: #9ca3af;
-}
-
-.add-model-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
-  color: #f97316;
-}
-
-.add-model-dialog :deep(.el-dialog__body) {
-  padding: 24px;
-}
-
-.add-model-dialog :deep(.el-dialog__footer) {
-  padding: 16px 24px;
-  border-top: 1px solid #252530;
-}
-
-.dialog-desc {
-  font-size: 14px;
-  color: #9ca3af;
-  margin-bottom: 20px;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 12px;
-}
-
-.test-btn {
-  background-color: #1e1e28;
-  border: 1px solid #3a3a4a;
-  color: #d1d5db;
-  transition: all 0.25s ease;
-}
-
-.test-btn:hover {
-  background-color: #2a2a3a;
-  border-color: #4a4a5a;
-  color: white;
-}
-
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  margin-top: 8px;
-}
-
-.connection-status.success {
-  color: #10b981;
-}
-
-.connection-status.error {
-  color: #ef4444;
-}
-
-.add-model-dialog :deep(.el-form-item__label) {
-  color: #d1d5db;
-  font-size: 14px;
-}
-
-.add-model-dialog :deep(.el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #4b5563;
-  box-shadow: none;
-}
-
-.add-model-dialog :deep(.el-input__inner) {
-  color: white;
-}
-
-.add-model-dialog :deep(.el-select) {
-  width: 100%;
-}
-
-.add-model-dialog :deep(.el-select .el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #4b5563;
-}
-
-.add-model-dialog :deep(.el-select .el-input__inner) {
-  color: white;
-}
-
-.add-model-dialog :deep(.el-select-dropdown) {
-  background-color: #1a1a24;
-  border: 1px solid #2a2a3a;
-}
-
-.add-model-dialog :deep(.el-select-dropdown__item) {
-  color: #d1d5db;
-}
-
-.add-model-dialog :deep(.el-select-dropdown__item.hover),
-.add-model-dialog :deep(.el-select-dropdown__item:hover) {
-  background-color: #4b5563;
-}
-
-.add-model-dialog :deep(.el-select-dropdown__item.selected) {
-  color: #f97316;
-}
-
-.add-model-dialog :deep(.el-button--primary) {
-  background-color: #f97316;
-  border-color: #f97316;
-}
-
-.add-model-dialog :deep(.el-button--primary:hover) {
-  background-color: #ea580c;
-  border-color: #ea580c;
-}
-
-/* Parsing 配置卡片 */
-.config-card {
-  background-color: #0d0d12;
-  border: 1px solid #252530;
-  border-radius: 12px;
-  padding: 24px;
-  margin-bottom: 24px;
-  transition: all 0.25s ease;
-}
-
-.config-card:hover {
-  border-color: #353545;
-}
-
-.config-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: white;
-  margin-bottom: 20px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #252530;
-}
-
-.config-section {
-  margin-bottom: 24px;
-}
-
-.config-section:last-child {
-  margin-bottom: 0;
-}
-
-.config-subtitle {
-  font-size: 14px;
-  font-weight: 500;
-  color: #9ca3af;
-  margin-bottom: 16px;
-}
-
-/* 表单行 */
-.form-row {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.form-row .flex-1 {
-  flex: 1;
-  min-width: 150px;
-}
-
-/* Switch 样式 */
-.parsing-switch :deep(.el-switch.is-checked .el-switch__core) {
-  background-color: #f97316;
-  border-color: #f97316;
-}
-
-/* Input Number 样式 */
-.settings-form :deep(.el-input-number) {
-  width: 100%;
-}
-
-.settings-form :deep(.el-input-number .el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #4b5563;
-}
-
-/* Select 样式 */
-.settings-form :deep(.el-select .el-input__wrapper) {
-  background-color: #171922;
-  border: 1px solid #4b5563;
-}
-
-/* 连接状态 */
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 8px;
-  font-size: 13px;
-}
-
-.connection-status.success {
-  color: #10b981;
-}
-
-.connection-status.error {
-  color: #ef4444;
-}
-
-/* API Endpoint 字段 */
-.api-endpoint-field {
-  display: flex;
-  gap: 12px;
-}
-
-.api-endpoint-field .el-input {
-  flex: 1;
-}
-
-.test-btn {
-  background-color: #1e1e28;
-  border: 1px solid #3a3a4a;
-  color: #d1d5db;
-  transition: all 0.25s ease;
-}
-
-.test-btn:hover {
-  background-color: #2a2a3a;
-  border-color: #4a4a5a;
-  color: white;
-}
-</style>

web/src/views/database/database.css

@@ -22,12 +22,16 @@
 
 /* 图标按钮 */
 .btn-icon {
-  @apply p-2 rounded-lg hover:bg-dark-600 transition-colors;
+  @apply p-2 rounded-lg transition-colors;
+}
+
+.btn-icon:hover {
+  @apply bg-dark-600;
 }
 
 /* 表格行 */
 .table-row {
-  @apply border-b border-dark-600 hover:bg-dark-600/50 transition-colors;
+  @apply border-b border-dark-600;
 }
 
 /* 空状态（已不使用） */

web/src/views/knowledge/knowledge.css

@@ -0,0 +1,504 @@
+/* Knowledge 页面样式 */
+
+/* 按钮样式 */
+.btn-primary {
+  background-color: #f97316;
+  border: none;
+  color: white;
+  padding: 10px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.btn-primary:hover {
+  background-color: #ea580c;
+}
+
+/* 搜索框 */
+.search-input {
+  background-color: #171922;
+  border: 1px solid #374151;
+  color: white;
+  padding: 10px 12px 10px 36px;
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #f97316;
+}
+
+.search-input::placeholder {
+  color: #6b7280;
+}
+
+/* 表格样式 */
+.bg-dark-700 {
+  background-color: #171922;
+}
+
+.bg-dark-600 {
+  background-color: #1a1c25;
+}
+
+.table-row {
+  border-bottom: 1px solid #374151;
+}
+
+/* 空状态 */
+.empty-box {
+  min-height: 340px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1f2937, #111827);
+  border-radius: 24px;
+  margin-bottom: 20px;
+}
+
+.empty-icon i {
+  font-size: 40px;
+  color: #6b7280;
+}
+
+.empty-text {
+  color: #d1d5db;
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.empty-tip {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* 基础弹窗样式 */
+.kb-dialog :deep(.el-dialog) {
+  background-color: #1f2937;
+  border-radius: 12px;
+  border: 1px solid #374151;
+}
+
+.kb-dialog :deep(.el-dialog__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #374151;
+}
+
+.kb-dialog :deep(.el-dialog__title) {
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.kb-dialog :deep(.el-dialog__headerbtn) {
+  top: 20px;
+  right: 20px;
+}
+
+.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: #9ca3af;
+}
+
+.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
+  color: #f97316;
+}
+
+.kb-dialog :deep(.el-dialog__body) {
+  padding: 24px;
+}
+
+.kb-dialog :deep(.el-dialog__footer) {
+  padding: 16px 24px;
+  border-top: 1px solid #374151;
+}
+
+.dialog-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin-bottom: 20px;
+}
+
+.kb-dialog :deep(.el-button--primary) {
+  background-color: #f97316;
+  border-color: #f97316;
+}
+
+.kb-dialog :deep(.el-button--primary:hover) {
+  background-color: #ea580c;
+  border-color: #ea580c;
+}
+
+/* 创建弹窗样式 */
+.kb-create-dialog :deep(.el-dialog) {
+  background-color: #0f1419;
+  border-radius: 16px;
+  border: 1px solid #1e2832;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.kb-create-dialog :deep(.el-dialog__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #1e2832;
+}
+
+.kb-create-dialog :deep(.el-dialog__title) {
+  color: #e8eaed;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.kb-create-dialog :deep(.el-dialog__headerbtn) {
+  top: 18px;
+  right: 18px;
+}
+
+.kb-create-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: #5f6368;
+  font-size: 18px;
+}
+
+.kb-create-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
+  color: #e8eaed;
+}
+
+.kb-create-dialog :deep(.el-dialog__body) {
+  padding: 0;
+}
+
+.kb-create-dialog :deep(.el-dialog__footer) {
+  padding: 20px 24px;
+  border-top: 1px solid #1e2832;
+  background-color: #0d1117;
+  border-radius: 0 0 16px 16px;
+}
+
+/* 创建内容布局 */
+.create-layout {
+  display: flex;
+  min-height: 560px;
+}
+
+/* 左侧 sidebar */
+.sidebar {
+  width: 280px;
+  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
+  border-right: 1px solid #1e2832;
+  padding: 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  border: 1px solid transparent;
+}
+
+.menu-item:hover {
+  background-color: rgba(54, 191, 250, 0.06);
+  border-color: rgba(54, 191, 250, 0.1);
+}
+
+.menu-item.active {
+  background: linear-gradient(135deg, rgba(54, 191, 250, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
+  border-color: rgba(54, 191, 250, 0.25);
+}
+
+.menu-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background-color: #1e2832;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #5f6368;
+  transition: all 0.3s ease;
+}
+
+.menu-item.active .menu-icon {
+  background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
+  color: white;
+  box-shadow: 0 4px 12px rgba(54, 191, 250, 0.3);
+}
+
+.menu-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.menu-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #e8eaed;
+  transition: color 0.2s;
+}
+
+.menu-item.active .menu-title {
+  color: #36bffa;
+}
+
+.menu-desc {
+  font-size: 12px;
+  color: #5f6368;
+}
+
+.menu-arrow {
+  font-size: 12px;
+  color: #36bffa;
+}
+
+/* 右侧内容区 */
+.content {
+  flex: 1;
+  padding: 36px 48px;
+  background-color: #0f1419;
+}
+
+.form-content {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 区块标题 */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 32px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #1e2832;
+}
+
+.section-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(54, 191, 250, 0.2) 0%, rgba(14, 165, 233, 0.12) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #36bffa;
+  font-size: 18px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #e8eaed;
+}
+
+/* 表单样式 */
+.kb-form :deep(.el-form-item__label) {
+  color: #9aa0a6;
+  font-size: 13px;
+  font-weight: 500;
+  padding-bottom: 8px;
+}
+
+.kb-form :deep(.el-input__wrapper) {
+  background-color: #161b22;
+  border: 1px solid #2d3640;
+  border-radius: 8px;
+  box-shadow: none;
+  padding: 4px 12px;
+}
+
+.kb-form :deep(.el-input__wrapper:hover) {
+  border-color: #36bffa;
+}
+
+.kb-form :deep(.el-input__wrapper.is-focus) {
+  border-color: #36bffa;
+  box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
+}
+
+.kb-form :deep(.el-input__inner) {
+  color: #e8eaed;
+  font-size: 14px;
+}
+
+.kb-form :deep(.el-input__inner::placeholder) {
+  color: #5f6368;
+}
+
+.kb-form :deep(.el-textarea__inner) {
+  background-color: #161b22;
+  border: 1px solid #2d3640;
+  border-radius: 8px;
+  color: #e8eaed;
+  font-size: 14px;
+  box-shadow: none;
+  padding: 12px;
+}
+
+.kb-form :deep(.el-textarea__inner:hover) {
+  border-color: #36bffa;
+}
+
+.kb-form :deep(.el-textarea__inner:focus) {
+  border-color: #36bffa;
+  box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
+}
+
+.kb-form :deep(.el-select) {
+  width: 100%;
+}
+
+.kb-form :deep(.el-select .el-input__wrapper) {
+  background-color: #161b22;
+  border: 1px solid #2d3640;
+  border-radius: 8px;
+  box-shadow: none;
+  padding: 4px 12px;
+}
+
+.kb-form :deep(.el-select .el-input__wrapper:hover) {
+  border-color: #36bffa;
+}
+
+.kb-form :deep(.el-select .el-input__wrapper.is-focus) {
+  border-color: #36bffa;
+  box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
+}
+
+/* 提供商选项 */
+.provider-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #e8eaed;
+}
+
+.provider-option i {
+  color: #36bffa;
+}
+
+/* 底部按钮区域 */
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+}
+
+.step-hint {
+  font-size: 12px;
+  color: #5f6368;
+}
+
+.footer-right {
+  display: flex;
+  gap: 10px;
+}
+
+.cancel-btn {
+  background-color: transparent;
+  border: 1px solid #2d3640;
+  color: #9aa0a6;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.cancel-btn:hover {
+  border-color: #5f6368;
+  color: #e8eaed;
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.prev-btn {
+  background-color: #1e2832;
+  border: none;
+  color: #9aa0a6;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.prev-btn:hover {
+  background-color: #2d3640;
+  color: #e8eaed;
+}
+
+.next-btn {
+  background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(54, 191, 250, 0.25);
+}
+
+.next-btn:hover {
+  background: linear-gradient(135deg, #4dc3ff 0%, #36bffa 100%);
+  box-shadow: 0 6px 16px rgba(54, 191, 250, 0.35);
+}
+
+.confirm-btn {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
+}
+
+.confirm-btn:hover {
+  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
+}

web/src/views/settings/modelSettings.css

@@ -0,0 +1,296 @@
+/* Model Settings 页面样式 */
+
+/* 表格样式 */
+.model-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.model-table th {
+  text-align: left;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #9ca3af;
+  background-color: #1a1a24;
+  border-bottom: 1px solid #252530;
+}
+
+.model-table th.text-center {
+  text-align: center;
+}
+
+.model-table td {
+  padding: 16px 20px;
+  border-bottom: 1px solid #252530;
+  color: #d1d5db;
+}
+
+.model-table td.text-center {
+  text-align: center;
+}
+
+.model-table td.text-sm {
+  font-size: 14px;
+}
+
+.model-table .font-medium {
+  font-weight: 500;
+  color: white;
+}
+
+.model-table .table-row:hover {
+  background-color: #1a1a24;
+  transition: background-color 0.25s ease;
+}
+
+/* 状态标签 */
+.status-active {
+  background-color: rgba(16, 185, 129, 0.2);
+  color: #10b981;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  text-transform: capitalize;
+}
+
+.status-inactive {
+  background-color: rgba(107, 114, 128, 0.2);
+  color: #9ca3af;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  text-transform: capitalize;
+}
+
+/* Model Type 标签 */
+.model-type-tag {
+  background-color: rgba(249, 115, 22, 0.2);
+  color: #f97316;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  text-transform: capitalize;
+}
+
+/* 操作按钮 */
+.btn-icon {
+  padding: 6px;
+  border-radius: 6px;
+  transition: all 0.25s ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-icon:hover {
+  background-color: #1e1e28;
+}
+
+.btn-icon i {
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+.btn-icon:hover i {
+  color: #f97316 !important;
+}
+
+/* 添加模型按钮 */
+.add-model-btn {
+  background-color: #f97316;
+  border-color: #f97316;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.add-model-btn:hover {
+  background-color: #ea580c;
+  border-color: #ea580c;
+}
+
+/* 弹窗样式 */
+.add-model-dialog :deep(.el-dialog) {
+  background-color: #16161e;
+  border-radius: 12px;
+  border: 1px solid #252530;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  animation: dialogFadeIn 0.25s ease;
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.add-model-dialog :deep(.el-dialog__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #252530;
+}
+
+.add-model-dialog :deep(.el-dialog__title) {
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.add-model-dialog :deep(.el-dialog__headerbtn) {
+  top: 20px;
+  right: 20px;
+}
+
+.add-model-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: #9ca3af;
+}
+
+.add-model-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
+  color: #f97316;
+}
+
+.add-model-dialog :deep(.el-dialog__body) {
+  padding: 24px;
+}
+
+.add-model-dialog :deep(.el-dialog__footer) {
+  padding: 16px 24px;
+  border-top: 1px solid #252530;
+}
+
+/* 弹窗描述 */
+.dialog-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin-bottom: 20px;
+}
+
+/* 弹窗底部按钮 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+}
+
+.test-btn {
+  background-color: #1e1e28;
+  border: 1px solid #3a3a4a;
+  color: #d1d5db;
+  transition: all 0.25s ease;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.test-btn:hover {
+  background-color: #2a2a3a;
+  border-color: #4a4a5a;
+  color: white;
+}
+
+/* 连接状态 */
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  margin-top: 8px;
+}
+
+.connection-status.success {
+  color: #10b981;
+}
+
+.connection-status.error {
+  color: #ef4444;
+}
+
+/* 表单样式 */
+.add-model-dialog :deep(.el-form-item__label) {
+  color: #d1d5db;
+  font-size: 14px;
+}
+
+.add-model-dialog :deep(.el-input__wrapper) {
+  background-color: #171922;
+  border: 1px solid #4b5563;
+  box-shadow: none;
+}
+
+.add-model-dialog :deep(.el-input__inner) {
+  color: white;
+}
+
+.add-model-dialog :deep(.el-select) {
+  width: 100%;
+}
+
+.add-model-dialog :deep(.el-select .el-input__wrapper) {
+  background-color: #171922;
+  border: 1px solid #4b5563;
+}
+
+.add-model-dialog :deep(.el-select .el-input__inner) {
+  color: white;
+}
+
+.add-model-dialog :deep(.el-select-dropdown) {
+  background-color: #1a1a24;
+  border: 1px solid #2a2a3a;
+}
+
+.add-model-dialog :deep(.el-select-dropdown__item) {
+  color: #d1d5db;
+}
+
+.add-model-dialog :deep(.el-select-dropdown__item.hover),
+.add-model-dialog :deep(.el-select-dropdown__item:hover) {
+  background-color: #2a2a3a;
+}
+
+.add-model-dialog :deep(.el-select-dropdown__item.selected) {
+  color: #f97316;
+}
+
+.add-model-dialog :deep(.el-button--primary) {
+  background-color: #f97316;
+  border-color: #f97316;
+}
+
+.add-model-dialog :deep(.el-button--primary:hover) {
+  background-color: #ea580c;
+  border-color: #ea580c;
+}
+
+/* 加载状态 */
+.loading-spinner {
+  text-align: center;
+  padding: 32px;
+  color: #9ca3af;
+}
+
+.loading-spinner i {
+  font-size: 24px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

web/src/views/settings/settings-parsing.css

@@ -0,0 +1,272 @@
+/* Parsing 和 Storage 配置样式 */
+
+/* 配置卡片 */
+.config-card {
+  background-color: #0d0d12;
+  border: 1px solid #252530;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+  transition: all 0.25s ease;
+}
+
+.config-card:hover {
+  border-color: #353545;
+}
+
+.config-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #252530;
+}
+
+.config-section {
+  margin-bottom: 24px;
+}
+
+.config-section:last-child {
+  margin-bottom: 0;
+}
+
+.config-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #9ca3af;
+  margin-bottom: 16px;
+}
+
+/* 添加模型按钮 */
+.add-model-btn {
+  background-color: #f97316;
+  border-color: #f97316;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.add-model-btn:hover {
+  background-color: #ea580c;
+  border-color: #ea580c;
+}
+
+/* 操作按钮 */
+.btn-icon {
+  padding: 6px;
+  border-radius: 6px;
+  transition: all 0.25s ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-icon:hover {
+  background-color: #1e1e28;
+}
+
+.btn-icon i {
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+.btn-icon:hover i {
+  color: #f97316 !important;
+}
+
+/* 弹窗样式 */
+.add-model-dialog :deep(.el-dialog) {
+  background-color: #16161e;
+  border-radius: 12px;
+  border: 1px solid #252530;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  animation: dialogFadeIn 0.25s ease;
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.add-model-dialog :deep(.el-dialog__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #252530;
+}
+
+.add-model-dialog :deep(.el-dialog__title) {
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.add-model-dialog :deep(.el-dialog__headerbtn) {
+  top: 20px;
+  right: 20px;
+}
+
+.add-model-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: #9ca3af;
+}
+
+.add-model-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
+  color: #f97316;
+}
+
+.add-model-dialog :deep(.el-dialog__body) {
+  padding: 24px;
+}
+
+.add-model-dialog :deep(.el-dialog__footer) {
+  padding: 16px 24px;
+  border-top: 1px solid #252530;
+}
+
+/* 弹窗描述 */
+.dialog-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin-bottom: 20px;
+}
+
+/* 弹窗底部按钮 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+}
+
+/* 测试连接按钮 */
+.test-btn {
+  background-color: #1e1e28;
+  border: 1px solid #3a3a4a;
+  color: #d1d5db;
+  transition: all 0.25s ease;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.test-btn:hover {
+  background-color: #2a2a3a;
+  border-color: #4a4a5a;
+  color: white;
+}
+
+/* 连接状态 */
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  margin-top: 8px;
+}
+
+.connection-status.success {
+  color: #10b981;
+}
+
+.connection-status.error {
+  color: #ef4444;
+}
+
+/* 弹窗表单 */
+.add-model-dialog :deep(.el-form-item__label) {
+  color: #d1d5db;
+  font-size: 14px;
+}
+
+.add-model-dialog :deep(.el-input__wrapper) {
+  background-color: #171922;
+  border: 1px solid #4b5563;
+  box-shadow: none;
+}
+
+.add-model-dialog :deep(.el-input__inner) {
+  color: white;
+}
+
+.add-model-dialog :deep(.el-select) {
+  width: 100%;
+}
+
+.add-model-dialog :deep(.el-select .el-input__wrapper) {
+  background-color: #171922;
+  border: 1px solid #4b5563;
+}
+
+.add-model-dialog :deep(.el-select .el-input__inner) {
+  color: white;
+}
+
+.add-model-dialog :deep(.el-select-dropdown) {
+  background-color: #1a1a24;
+  border: 1px solid #2a2a3a;
+}
+
+.add-model-dialog :deep(.el-select-dropdown__item) {
+  color: #d1d5db;
+}
+
+.add-model-dialog :deep(.el-select-dropdown__item.hover),
+.add-model-dialog :deep(.el-select-dropdown__item:hover) {
+  background-color: #4b5563;
+}
+
+.add-model-dialog :deep(.el-select-dropdown__item.selected) {
+  color: #f97316;
+}
+
+.add-model-dialog :deep(.el-button--primary) {
+  background-color: #f97316;
+  border-color: #f97316;
+}
+
+.add-model-dialog :deep(.el-button--primary:hover) {
+  background-color: #ea580c;
+  border-color: #ea580c;
+}
+
+/* API Endpoint 字段 */
+.api-endpoint-field {
+  display: flex;
+  gap: 12px;
+}
+
+.api-endpoint-field .el-input {
+  flex: 1;
+}
+
+/* 加载状态 */
+.loading-spinner {
+  text-align: center;
+  padding: 32px;
+  color: #9ca3af;
+}
+
+.loading-spinner i {
+  font-size: 24px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

web/src/views/settings/settings.css

@@ -0,0 +1,213 @@
+/* Settings 页面通用样式 */
+
+/* 页面容器 */
+.settings-page {
+  padding: 24px;
+  min-height: 100vh;
+  background-color: #0a0a0f;
+  transition: background-color 0.3s ease;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: white;
+}
+
+/* 设置容器 */
+.settings-container {
+  display: flex;
+  gap: 24px;
+  background-color: #121218;
+  border-radius: 12px;
+  overflow: hidden;
+  min-height: calc(100vh - 120px);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* 左侧导航 */
+.settings-nav {
+  width: 280px;
+  background-color: #0d0d12;
+  padding: 16px 0;
+  flex-shrink: 0;
+  border-right: 1px solid #1e1e28;
+}
+
+.settings-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.nav-item:hover {
+  background-color: #1a1a24;
+  color: white;
+  transition: all 0.25s ease;
+}
+
+.nav-item.active {
+  background-color: #1a1a24;
+  color: #f97316;
+  border-left: 3px solid #f97316;
+  transition: all 0.25s ease;
+}
+
+.nav-item i {
+  width: 20px;
+  text-align: center;
+}
+
+/* 子菜单 */
+.sub-menu {
+  list-style: none;
+  padding-left: 20px;
+  margin: 0;
+}
+
+.sub-menu .nav-item {
+  padding: 10px 16px;
+  font-size: 13px;
+}
+
+.nav-item.sub-item {
+  padding-left: 40px;
+  font-size: 13px;
+}
+
+/* 右侧内容 */
+.settings-content {
+  flex: 1;
+  padding: 32px;
+  overflow-y: auto;
+  background-color: #121218;
+}
+
+.settings-section {
+  width: 100%;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 8px;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin-bottom: 32px;
+}
+
+/* 表格 */
+table {
+  border-collapse: collapse;
+}
+
+.table-row {
+  border-bottom: 1px solid #252530;
+}
+
+.table-row:hover {
+  background-color: #1a1a24;
+  transition: background-color 0.25s ease;
+}
+
+/* 表单样式 */
+.settings-form :deep(.el-form-item__label) {
+  color: #d1d5db;
+  font-size: 14px;
+}
+
+.settings-form :deep(.el-input__wrapper) {
+  background-color: #171922;
+  border: 1px solid #4b5563;
+  box-shadow: none;
+}
+
+.settings-form :deep(.el-input__inner) {
+  color: white;
+}
+
+.settings-form :deep(.el-select) {
+  width: 100%;
+}
+
+.settings-form :deep(.el-select .el-input__wrapper) {
+  background-color: #171922;
+  border: 1px solid #4b5563;
+}
+
+.settings-form :deep(.el-button--primary) {
+  background-color: #f97316;
+  border-color: #f97316;
+}
+
+.settings-form :deep(.el-button--primary:hover) {
+  background-color: #ea580c;
+  border-color: #ea580c;
+}
+
+.settings-form :deep(.el-input-number) {
+  width: 100%;
+}
+
+.settings-form :deep(.el-input-number .el-input__wrapper) {
+  background-color: #171922;
+  border: 1px solid #4b5563;
+}
+
+/* 密码字段 */
+.password-field {
+  display: flex;
+  gap: 12px;
+}
+
+.password-field .el-input {
+  flex: 1;
+}
+
+/* 表单行 */
+.form-row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.form-row .flex-1 {
+  flex: 1;
+  min-width: 150px;
+}
+
+/* Switch 样式 */
+.parsing-switch :deep(.el-switch.is-checked .el-switch__core) {
+  background-color: #f97316;
+  border-color: #f97316;
+}

web/src/views/settings/types.ts

@@ -0,0 +1,35 @@
+// Model Settings 相关类型定义
+
+export interface ModelInfo {
+  id: string
+  name: string
+  model_type: string
+  provider: string
+  model: string
+  api_key: string
+  base_url: string
+  api_endpoint: string
+  status: string
+  created_at: string
+  updated_at: string
+}
+
+export interface ModelForm {
+  name: string
+  apiKey: string
+  apiEndpoint: string
+  baseUrl: string
+  provider: string
+  model: string
+  modelType: string
+}
+
+export interface ModelTypeOption {
+  value: string
+  label: string
+}
+
+export interface ProviderOption {
+  value: string
+  label: string
+}

web/src/views/settings/useModelSettings.ts

@@ -0,0 +1,214 @@
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { ModelInfo, ModelForm, ModelTypeOption, ProviderOption } from './types'
+
+// API 基础 URL
+const API_BASE = 'http://localhost:8082'
+
+export function useModelSettings() {
+  // Model 列表
+  const models = ref<ModelInfo[]>([])
+  const modelsLoading = ref(false)
+
+  // Model Type 选项
+  const modelTypeOptions: ModelTypeOption[] = [
+    { value: 'chat', label: 'Chat' },
+    { value: 'embedding', label: 'Embedding' },
+    { value: 'rerank', label: 'Rerank' },
+    { value: 'vlm', label: 'VLM' },
+  ]
+
+  // Provider 选项
+  const providerOptions: ProviderOption[] = [
+    { value: 'OpenAI', label: 'OpenAI' },
+    { value: 'Ollama', label: 'Ollama' },
+  ]
+
+  // 是否显示新增模型表单
+  const showAddModelForm = ref(false)
+
+  // 新增模型表单
+  const newModelForm = ref<ModelForm>({
+    name: '',
+    apiKey: '',
+    apiEndpoint: '',
+    baseUrl: '',
+    provider: '',
+    model: '',
+    modelType: '',
+  })
+
+  // 测试连接状态
+  const testingConnection = ref(false)
+  const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')
+
+  // 获取模型列表
+  const fetchModels = async () => {
+    modelsLoading.value = true
+    try {
+      const response = await fetch(`${API_BASE}/model/list`)
+      const result = await response.json()
+      models.value = result.list || []
+    } catch (error) {
+      console.error('Failed to fetch models:', error)
+      ElMessage.error('Failed to load models')
+    } finally {
+      modelsLoading.value = false
+    }
+  }
+
+  // 测试连接
+  const testConnection = async () => {
+    if (!newModelForm.value.apiKey || !newModelForm.value.baseUrl) {
+      ElMessage.warning('Please enter API Key and Base URL')
+      return
+    }
+
+    testingConnection.value = true
+    connectionStatus.value = 'idle'
+
+    try {
+      const response = await fetch(`${API_BASE}/model/test`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          provider: newModelForm.value.provider,
+          model: newModelForm.value.model,
+          api_key: newModelForm.value.apiKey,
+          base_url: newModelForm.value.baseUrl,
+          api_endpoint: newModelForm.value.apiEndpoint,
+        }),
+      })
+
+      const result = await response.json()
+
+      if (result.success) {
+        connectionStatus.value = 'success'
+        ElMessage.success(result.message || 'Connection successful!')
+      } else {
+        connectionStatus.value = 'error'
+        ElMessage.error(result.message || 'Connection failed')
+      }
+    } catch (error: any) {
+      connectionStatus.value = 'error'
+      ElMessage.error('Connection failed: ' + error.message)
+    } finally {
+      testingConnection.value = false
+    }
+  }
+
+  // 添加新模型（初始状态为 inactive，需要测试连接后才能激活）
+  const addModel = async () => {
+    if (!newModelForm.value.name || !newModelForm.value.provider || !newModelForm.value.model) {
+      ElMessage.warning('Please fill in required fields')
+      return
+    }
+
+    try {
+      const response = await fetch(`${API_BASE}/model/add`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: newModelForm.value.name,
+          model_type: newModelForm.value.modelType || 'chat',
+          provider: newModelForm.value.provider,
+          model: newModelForm.value.model,
+          api_key: newModelForm.value.apiKey,
+          base_url: newModelForm.value.baseUrl,
+          api_endpoint: newModelForm.value.apiEndpoint,
+          status: 'inactive', // 初始状态为未激活
+        }),
+      })
+
+      if (response.ok) {
+        const result = await response.json()
+        // 记录测试连接状态
+        const wasConnected = connectionStatus.value === 'success'
+        // 如果测试连接成功，则激活模型；否则保持 inactive
+        if (wasConnected) {
+          // 再次调用更新接口激活模型
+          await fetch(`${API_BASE}/model/${result.id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ status: 'active' }),
+          })
+          result.status = 'active'
+        }
+        models.value.push(result)
+        newModelForm.value = {
+          name: '',
+          apiKey: '',
+          apiEndpoint: '',
+          baseUrl: '',
+          provider: '',
+          model: '',
+          modelType: '',
+        }
+        connectionStatus.value = 'idle'
+        showAddModelForm.value = false
+        ElMessage.success(wasConnected ? 'Model added and activated' : 'Model added successfully')
+      } else {
+        const error = await response.json()
+        ElMessage.error(error.message || 'Failed to add model')
+      }
+    } catch (error: any) {
+      ElMessage.error('Failed to add model: ' + error.message)
+    }
+  }
+
+  // 取消添加
+  const cancelAddModel = () => {
+    newModelForm.value = {
+      name: '',
+      apiKey: '',
+      apiEndpoint: '',
+      baseUrl: '',
+      provider: '',
+      model: '',
+      modelType: '',
+    }
+    connectionStatus.value = 'idle'
+    showAddModelForm.value = false
+  }
+
+  // 删除模型
+  const deleteModel = async (id: string) => {
+    try {
+      const response = await fetch(`${API_BASE}/model/${id}`, {
+        method: 'DELETE',
+      })
+
+      if (response.ok) {
+        models.value = models.value.filter(m => m.id !== id)
+        ElMessage.success('Model deleted successfully')
+      } else {
+        ElMessage.error('Failed to delete model')
+      }
+    } catch (error: any) {
+      ElMessage.error('Failed to delete model: ' + error.message)
+    }
+  }
+
+  return {
+    // State
+    models,
+    modelsLoading,
+    modelTypeOptions,
+    providerOptions,
+    showAddModelForm,
+    newModelForm,
+    testingConnection,
+    connectionStatus,
+
+    // Methods
+    fetchModels,
+    testConnection,
+    addModel,
+    cancelAddModel,
+    deleteModel,
+  }
+}