From 42a562d1714070fdb78ad006238f0dc6e4cd5d1a Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Sat, 7 Mar 2026 14:28:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=20Settings=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 拆分 Settings 页面样式到独立 CSS 文件
- 新增 modelSettings、settings-parsing、settings 等样式文件
- 添加 TypeScript 类型定义

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/views/Settings.vue                  | 667 +++-----------------
 web/src/views/settings/modelSettings.css    | 296 +++++++++
 web/src/views/settings/settings-parsing.css | 272 ++++++++
 web/src/views/settings/settings.css         | 213 +++++++
 web/src/views/settings/types.ts             |  35 +
 web/src/views/settings/useModelSettings.ts  | 214 +++++++
 6 files changed, 1104 insertions(+), 593 deletions(-)
 create mode 100644 web/src/views/settings/modelSettings.css
 create mode 100644 web/src/views/settings/settings-parsing.css
 create mode 100644 web/src/views/settings/settings.css
 create mode 100644 web/src/views/settings/types.ts
 create mode 100644 web/src/views/settings/useModelSettings.ts

diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index 8262890..4552aad 100644
--- a/web/src/views/Settings.vue
+++ b/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 列表
-const models = ref([
-  { id: 1, name: 'OpenAI', endpoint: 'api.openai.com', status: 'active', modelType: 'chat' },
-  { id: 2, name: 'Anthropic', endpoint: 'api.anthropic.com', status: 'active', modelType: 'chat' },
-  { id: 3, name: 'text-embedding-3-small', endpoint: 'api.openai.com', status: 'active', modelType: 'embedding' },
-])
+// 导入 Model Settings 逻辑
+const {
+  models,
+  modelsLoading,
+  modelTypeOptions,
+  providerOptions,
+  showAddModelForm,
+  newModelForm,
+  testingConnection,
+  connectionStatus,
+  fetchModels,
+  testConnection,
+  addModel,
+  cancelAddModel,
+  deleteModel,
+} = useModelSettings()
 
-// Model Type 选项
-const modelTypeOptions = [
-  { value: 'chat', label: 'Chat' },
-  { value: 'embedding', label: 'Embedding' },
-  { value: 'rerank', label: 'Rerank' },
-  { value: 'vlm', label: 'VLM' },
-]
-
-// 是否显示新增模型表单
-const showAddModelForm = ref(false)
-
-// 新增模型表单
-const newModelForm = ref({
-  name: '',
-  apiKey: '',
-  apiEndpoint: '',
-  baseUrl: '',
-  provider: '',
-  model: '',
-  modelType: '',
+// 监听菜单切换，获取模型列表
+watch(activeMenu, (newVal) => {
+  if (newVal === 'modelSettings') {
+    fetchModels()
+  }
 })
 
-// 测试连接状态
-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">
-            <thead class="bg-dark-600">
+          <div v-if="modelsLoading" class="loading-spinner">
+            <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 class="text-center px-5 py-3 text-sm font-medium text-gray-400">Model Type</th>
-                <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">API Endpoint</th>
-                <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
-                <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+                <th>Model Name</th>
+                <th class="text-center">Provider</th>
+                <th class="text-center">Model</th>
+                <th class="text-center">Model Type</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">
-                  <span class="bg-primary-orange/20 text-primary-orange px-2 py-1 rounded text-sm capitalize">{{ model.modelType }}</span>
+                <td class="text-center text-sm">
+                  {{ model.provider }}
                 </td>
-                <td class="px-5 py-4 text-center text-gray-400 text-sm">
-                  {{ model.endpoint }}
+                <td class="text-center text-sm">
+                  {{ model.model }}
                 </td>
-                <td class="px-5 py-4 text-center">
-                  <span class="bg-primary-success/20 text-primary-success px-2 py-1 rounded text-sm capitalize">{{ model.status }}</span>
+                <td class="text-center">
+                  <span class="model-type-tag">{{ model.model_type }}</span>
                 </td>
-                <td class="px-5 py-4">
-                  <div class="flex items-center justify-center gap-2">
-                    <button class="btn-icon" title="Edit">
-                      <i class="fa-solid fa-pen text-gray-400"></i>
-                    </button>
-                    <button class="btn-icon" title="Delete">
-                      <i class="fa-solid fa-trash text-gray-400"></i>
-                    </button>
-                  </div>
+                <td class="text-center text-sm">
+                  {{ 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"></i>
+                  </button>
+                  <button class="btn-icon" title="Delete" @click="deleteModel(model.id)">
+                    <i class="fa-solid fa-trash"></i>
+                  </button>
                 </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>
diff --git a/web/src/views/settings/modelSettings.css b/web/src/views/settings/modelSettings.css
new file mode 100644
index 0000000..845ade8
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/web/src/views/settings/settings-parsing.css b/web/src/views/settings/settings-parsing.css
new file mode 100644
index 0000000..ccd3233
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/web/src/views/settings/settings.css b/web/src/views/settings/settings.css
new file mode 100644
index 0000000..49d84e6
--- /dev/null
+++ b/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;
+}
diff --git a/web/src/views/settings/types.ts b/web/src/views/settings/types.ts
new file mode 100644
index 0000000..9949eeb
--- /dev/null
+++ b/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
+}
diff --git a/web/src/views/settings/useModelSettings.ts b/web/src/views/settings/useModelSettings.ts
new file mode 100644
index 0000000..1d5b891
--- /dev/null
+++ b/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,
+  }
+}