diff --git a/team-require/web/model-settings.md b/team-require/web/model-settings.md
new file mode 100644
index 0000000..33ce937
--- /dev/null
+++ b/team-require/web/model-settings.md
@@ -0,0 +1,193 @@
+# Model Settings 需求文档
+
+## 需求概述
+
+Model Settings 页面用于管理 AI 模型配置，支持添加、编辑、删除和测试模型连接。
+
+## 功能列表
+
+### 1. 模型列表展示
+
+展示已配置的模型列表，包含以下字段：
+- Model Name（模型名称）
+- Model Type（模型类型）：Chat / Embedding / Rerank / VLM
+- API Endpoint（API 端点）
+- Status（状态）：Active / Inactive
+
+### 2. 添加新模型
+
+点击 "Add New Model" 按钮，弹出表单包含以下字段：
+- Model Name（必填）
+- Model Type（必选）：Chat / Embedding / Rerank / VLM
+- Provider（必选）：OpenAI / Ollama
+- Model（必填）：模型名称，如 gpt-4o
+- API Key（必填）
+- Base URL（必填）
+- API Endpoint（可选）
+
+### 3. 测试连接
+
+在添加模型表单中提供 "Test Connection" 按钮，用于验证模型连接是否可用。
+
+### 4. 编辑模型
+
+点击编辑按钮，弹出编辑表单，可修改模型信息。
+
+### 5. 删除模型
+
+点击删除按钮，确认后删除模型记录。
+
+---
+
+## 后端接口需求
+
+### 1. 获取模型列表
+
+**接口地址：** `GET /api/models` 或 `GET /model/list`
+
+**返回参数：**
+```json
+{
+  "list": [
+    {
+      "id": "1",
+      "name": "OpenAI",
+      "model_type": "chat",
+      "provider": "OpenAI",
+      "model": "gpt-4o",
+      "api_key": "sk-xxx",
+      "base_url": "https://api.openai.com",
+      "api_endpoint": "/v1/chat/completions",
+      "status": "active",
+      "created_at": "2024-01-01T00:00:00Z",
+      "updated_at": "2024-01-01T00:00:00Z"
+    }
+  ]
+}
+```
+
+### 2. 添加模型
+
+**接口地址：** `POST /api/models` 或 `POST /model/add`
+
+**请求参数：**
+```json
+{
+  "name": "OpenAI",
+  "model_type": "chat",
+  "provider": "OpenAI",
+  "model": "gpt-4o",
+  "api_key": "sk-xxx",
+  "base_url": "https://api.openai.com",
+  "api_endpoint": "/v1/chat/completions"
+}
+```
+
+**返回参数：**
+```json
+{
+  "id": "1",
+  "name": "OpenAI",
+  "model_type": "chat",
+  ...
+}
+```
+
+### 3. 更新模型
+
+**接口地址：** `PUT /api/models/{id}` 或 `PUT /model/{id}`
+
+**请求参数：**
+```json
+{
+  "name": "OpenAI Updated",
+  "model_type": "chat",
+  "provider": "OpenAI",
+  "model": "gpt-4o",
+  "api_key": "sk-xxx",
+  "base_url": "https://api.openai.com",
+  "api_endpoint": "/v1/chat/completions",
+  "status": "active"
+}
+```
+
+### 4. 删除模型
+
+**接口地址：** `DELETE /api/models/{id}` 或 `DELETE /model/{id}`
+
+**返回参数：**
+```json
+{
+  "success": true
+}
+```
+
+### 5. 测试连接
+
+**接口地址：** `POST /api/models/test` 或 `POST /model/test`
+
+**请求参数：**
+```json
+{
+  "provider": "OpenAI",
+  "model": "gpt-4o",
+  "api_key": "sk-xxx",
+  "base_url": "https://api.openai.com",
+  "api_endpoint": "/v1/chat/completions"
+}
+```
+
+**返回参数：**
+```json
+{
+  "success": true,
+  "message": "Connection successful"
+}
+```
+
+---
+
+## 数据结构
+
+### Model 表结构（参考）
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | string | 主键 UUID |
+| name | string | 模型名称 |
+| model_type | string | 模型类型：chat/embedding/rerank/vlm |
+| provider | string | 提供商：OpenAI/Ollama |
+| model | string | 模型标识 |
+| api_key | string | API 密钥（加密存储） |
+| base_url | string | 基础 URL |
+| api_endpoint | string | API 端点路径 |
+| status | string | 状态：active/inactive |
+| created_at | datetime | 创建时间 |
+| updated_at | datetime | 更新时间 |
+
+---
+
+## 前端组件状态
+
+### 表单数据 (newModelForm)
+```typescript
+{
+  name: string,
+  apiKey: string,
+  apiEndpoint: string,
+  baseUrl: string,
+  provider: string,
+  model: string,
+  modelType: string
+}
+```
+
+### 模型类型选项 (modelTypeOptions)
+- Chat
+- Embedding
+- Rerank
+- VLM
+
+### 提供商选项 (providerOptions)
+- OpenAI
+- Ollama
diff --git a/web/src/views/Knowledge.vue b/web/src/views/Knowledge.vue
new file mode 100644
index 0000000..1e6f429
--- /dev/null
+++ b/web/src/views/Knowledge.vue
@@ -0,0 +1,466 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import './database/database.css'
+
+// 模拟知识库数据
+const knowledgeBases = ref([
+  {
+    id: '1',
+    name: 'Product Documentation',
+    description: 'Product user manual and API docs',
+    document_count: 156,
+    chunk_count: 1248,
+    created_at: '2024-01-15T10:30:00Z',
+    status: 'ready'
+  },
+  {
+    id: '2',
+    name: 'Company Policies',
+    description: 'Internal company policies and procedures',
+    document_count: 42,
+    chunk_count: 320,
+    created_at: '2024-01-20T14:20:00Z',
+    status: 'ready'
+  },
+  {
+    id: '3',
+    name: 'Technical Wiki',
+    description: 'Engineering documentation and RFCs',
+    document_count: 89,
+    chunk_count: 756,
+    created_at: '2024-02-01T09:15:00Z',
+    status: 'processing'
+  },
+])
+
+const loading = ref(false)
+const searchQuery = ref('')
+
+// 筛选知识库
+const filteredKnowledgeBases = () => {
+  if (!searchQuery.value) return knowledgeBases.value
+  const query = searchQuery.value.toLowerCase()
+  return knowledgeBases.value.filter(kb =>
+    kb.name.toLowerCase().includes(query) ||
+    kb.description.toLowerCase().includes(query)
+  )
+}
+
+// 新建知识库
+const showCreateDialog = ref(false)
+const newKbForm = ref({
+  name: '',
+  description: '',
+})
+
+const createKnowledgeBase = () => {
+  if (!newKbForm.value.name) {
+    ElMessage.warning('Please enter knowledge base name')
+    return
+  }
+  knowledgeBases.value.push({
+    id: Date.now().toString(),
+    name: newKbForm.value.name,
+    description: newKbForm.value.description,
+    document_count: 0,
+    chunk_count: 0,
+    created_at: new Date().toISOString(),
+    status: 'ready'
+  })
+  newKbForm.value = { name: '', description: '' }
+  showCreateDialog.value = false
+  ElMessage.success('Knowledge base created successfully')
+}
+
+const cancelCreate = () => {
+  newKbForm.value = { name: '', description: '' }
+  showCreateDialog.value = false
+}
+
+// 编辑知识库
+const showEditDialog = ref(false)
+const editForm = ref({
+  id: '',
+  name: '',
+  description: '',
+})
+
+const openEdit = (kb: any) => {
+  editForm.value = {
+    id: kb.id,
+    name: kb.name,
+    description: kb.description
+  }
+  showEditDialog.value = true
+}
+
+const saveEdit = () => {
+  const kb = knowledgeBases.value.find(k => k.id === editForm.value.id)
+  if (kb) {
+    kb.name = editForm.value.name
+    kb.description = editForm.value.description
+  }
+  showEditDialog.value = false
+  ElMessage.success('Knowledge base updated successfully')
+}
+
+const cancelEdit = () => {
+  showEditDialog.value = false
+}
+
+// 删除知识库
+const deleteKb = (id: string) => {
+  const index = knowledgeBases.value.findIndex(k => k.id === id)
+  if (index > -1) {
+    knowledgeBases.value.splice(index, 1)
+    ElMessage.success('Knowledge base deleted')
+  }
+}
+
+// 查看详情
+const viewDetail = (kb: any) => {
+  ElMessage.info(`Viewing ${kb.name}`)
+}
+</script>
+
+<template>
+  <div class="p-6 min-h-screen">
+    <!-- 顶部导航 -->
+    <div class="flex justify-between items-center mb-6">
+      <div class="flex items-center gap-2">
+        <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">
+        <i class="fa-solid fa-plus"></i>
+        New Knowledge Base
+      </button>
+    </div>
+
+    <!-- 搜索 -->
+    <div class="flex gap-4 mb-6">
+      <div class="flex-1 relative">
+        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search knowledge bases by name or description..."
+          class="search-input w-full"
+        >
+      </div>
+    </div>
+
+    <!-- Knowledge Base 列表 -->
+    <div class="bg-dark-700 rounded-xl overflow-hidden">
+      <div v-if="loading" class="py-12 text-center text-gray-400">
+        <i class="fa-solid fa-circle-notch fa-spin text-2xl mb-2"></i>
+        <p>Loading...</p>
+      </div>
+      <table v-else-if="filteredKnowledgeBases().length > 0" class="w-full">
+        <thead class="bg-dark-600">
+          <tr>
+            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Name</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Documents</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Chunks</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">Created</th>
+            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="kb in filteredKnowledgeBases()" :key="kb.id" class="table-row">
+            <td class="px-5 py-4">
+              <div class="font-medium">{{ kb.name }}</div>
+              <div class="text-sm text-gray-500">{{ kb.description }}</div>
+            </td>
+            <td class="px-5 py-4 text-center">
+              <span class="text-primary-cyan">{{ kb.document_count }}</span>
+            </td>
+            <td class="px-5 py-4 text-center text-gray-400 text-sm">
+              {{ kb.chunk_count }}
+            </td>
+            <td class="px-5 py-4 text-center">
+              <span v-if="kb.status === 'ready'" class="bg-primary-success/20 text-primary-success px-2 py-1 rounded text-sm">
+                Ready
+              </span>
+              <span v-else-if="kb.status === 'processing'" class="bg-primary-warning/20 text-primary-warning px-2 py-1 rounded text-sm">
+                Processing
+              </span>
+            </td>
+            <td class="px-5 py-4 text-center text-gray-400 text-sm">
+              {{ kb.created_at?.split('T')[0] }}
+            </td>
+            <td class="px-5 py-4">
+              <div class="flex items-center justify-center gap-2">
+                <button
+                  @click="viewDetail(kb)"
+                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  title="View"
+                >
+                  <i class="fa-solid fa-eye text-gray-400"></i>
+                </button>
+                <button
+                  @click="openEdit(kb)"
+                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  title="Edit"
+                >
+                  <i class="fa-solid fa-pen text-gray-400"></i>
+                </button>
+                <button
+                  @click="deleteKb(kb.id)"
+                  class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
+                  title="Delete"
+                >
+                  <i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- 空状态 -->
+      <div v-else class="empty-box">
+        <div class="empty-icon">
+          <i class="fa-solid fa-brain"></i>
+        </div>
+        <p class="empty-text">No knowledge bases found</p>
+        <p class="empty-tip">Click "New Knowledge Base" to create one</p>
+      </div>
+    </div>
+
+    <!-- 新建知识库弹窗 -->
+    <el-dialog
+      v-model="showCreateDialog"
+      title="Create Knowledge Base"
+      width="500px"
+      :close-on-click-modal="false"
+      class="kb-dialog"
+    >
+      <p class="dialog-desc">Create a new knowledge base to store your documents</p>
+
+      <el-form label-position="top" class="kb-form">
+        <el-form-item label="Name">
+          <el-input v-model="newKbForm.name" placeholder="Enter knowledge base name" />
+        </el-form-item>
+        <el-form-item label="Description">
+          <el-input v-model="newKbForm.description" type="textarea" :rows="3" placeholder="Enter description" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button text @click="cancelCreate">Cancel</el-button>
+          <el-button type="primary" @click="createKnowledgeBase">Confirm</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 编辑知识库弹窗 -->
+    <el-dialog
+      v-model="showEditDialog"
+      title="Edit Knowledge Base"
+      width="500px"
+      :close-on-click-modal="false"
+      class="kb-dialog"
+    >
+      <p class="dialog-desc">Edit knowledge base information</p>
+
+      <el-form label-position="top" class="kb-form">
+        <el-form-item label="Name">
+          <el-input v-model="editForm.name" placeholder="Enter knowledge base name" />
+        </el-form-item>
+        <el-form-item label="Description">
+          <el-input v-model="editForm.description" type="textarea" :rows="3" placeholder="Enter description" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button text @click="cancelEdit">Cancel</el-button>
+          <el-button type="primary" @click="saveEdit">Save</el-button>
+        </div>
+      </template>
+    </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>
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
new file mode 100644
index 0000000..8262890
--- /dev/null
+++ b/web/src/views/Settings.vue
@@ -0,0 +1,1090 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// 当前选中的设置菜单
+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 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: '',
+})
+
+// 测试连接状态
+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' },
+  { key: 'members', label: 'Members', icon: 'fa-users' },
+  { key: 'notifications', label: 'Notifications', icon: 'fa-bell' },
+  { key: 'modelSettings', label: 'Model Settings', icon: 'fa-brain' },
+  { key: 'parsing', label: 'Parsing', icon: 'fa-code' },
+  { key: 'storage', label: 'Storage', icon: 'fa-database' },
+]
+
+// General 设置表单
+const generalForm = ref({
+  name: 'Alex Smith',
+  email: 'alex@gmail.com',
+  password: '********',
+  language: 'English',
+  timezone: 'UTC +08:00 Beijing',
+})
+
+// 语言选项
+const languageOptions = [
+  { value: 'English', label: 'English' },
+  { value: 'Chinese', label: '中文' },
+  { value: 'Japanese', label: '日本語' },
+]
+
+// 时区选项
+const timezoneOptions = [
+  { value: 'UTC +08:00 Beijing', label: 'UTC +08:00 Beijing' },
+  { value: 'UTC +00:00 London', label: 'UTC +00:00 London' },
+  { value: 'UTC -05:00 New York', label: 'UTC -05:00 New York' },
+  { value: 'UTC -08:00 Los Angeles', label: 'UTC -08:00 Los Angeles' },
+]
+
+// 保存设置
+const saveChanges = () => {
+  ElMessage.success('Settings saved successfully')
+}
+
+// 显示密码修改弹窗
+const showChangePassword = () => {
+  ElMessage.info('Password change dialog would open here')
+}
+
+// Parsing 配置表单
+const parsingForm = ref({
+  // LLM Provider
+  provider: 'OpenAI',
+  model: 'gpt-4o',
+  apiKey: '',
+  apiEndpoint: '',
+  // 通用配置
+  maxWorkers: 5,
+  maxRetries: 3,
+  requestTimeout: 60,
+  enableProxy: false,
+  httpProxyUrl: '',
+  // 文本解析
+  enableMultimodal: true,
+  visionModel: 'gpt-4o',
+  imageUnderstandingPrice: 0.00125,
+  enableJsonMode: false,
+  jsonModeModel: 'gpt-4o',
+  // 文件解析
+  enableFileParsing: true,
+  enableTableRecognition: true,
+  enableFormulaRecognition: true,
+  ocrLanguage: 'en',
+})
+
+// Vision Model 选项
+const visionModelOptions = [
+  { value: 'gpt-4o', label: 'GPT-4o' },
+  { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
+  { value: 'claude-3-5-sonnet', label: 'Claude 3.5 Sonnet' },
+  { value: 'claude-3-haiku', label: 'Claude 3 Haiku' },
+  { value: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro' },
+]
+
+// OCR 语言选项
+const ocrLanguageOptions = [
+  { value: 'en', label: 'English' },
+  { value: 'zh', label: 'Chinese' },
+  { value: 'ja', label: 'Japanese' },
+  { value: 'ko', label: 'Korean' },
+  { value: 'auto', label: 'Auto Detect' },
+]
+
+// 保存 Parsing 设置
+const saveParsingSettings = () => {
+  ElMessage.success('Parsing settings saved successfully')
+}
+
+// Storage 配置表单
+const storageForm = ref({
+  storageType: 'local',
+  // Local 存储
+  localPath: './storage',
+  // MinIO 存储
+  minioEndpoint: 'localhost:9000',
+  minioAccessKey: '',
+  minioSecretKey: '',
+  minioBucket: 'x-agents',
+  minioUseSSL: false,
+})
+
+// 保存 Storage 设置
+const saveStorageSettings = () => {
+  ElMessage.success('Storage settings saved successfully')
+}
+</script>
+
+<template>
+  <div class="settings-page">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">Settings</h1>
+    </div>
+
+    <div class="settings-container">
+      <!-- 左侧菜单 -->
+      <nav class="settings-nav">
+        <ul>
+          <li
+            v-for="item in menuItems"
+            :key="item.key"
+            :class="['nav-item', { active: activeMenu === item.key }]"
+            @click="activeMenu = item.key"
+          >
+            <i :class="['fa-solid', item.icon]"></i>
+            <span>{{ item.label }}</span>
+          </li>
+        </ul>
+      </nav>
+
+      <!-- 右侧内容 -->
+      <div class="settings-content">
+        <!-- General 设置 -->
+        <div v-if="activeMenu === 'general'" class="settings-section">
+          <h2 class="section-title">General Settings</h2>
+          <p class="section-desc">Manage your personal information and preferences</p>
+
+          <el-form :model="generalForm" label-position="top" class="settings-form">
+            <el-form-item label="Name">
+              <el-input v-model="generalForm.name" placeholder="Enter your name" />
+            </el-form-item>
+
+            <el-form-item label="Email">
+              <el-input v-model="generalForm.email" placeholder="Enter your email" />
+            </el-form-item>
+
+            <el-form-item label="Password">
+              <div class="password-field">
+                <el-input v-model="generalForm.password" type="password" disabled />
+                <el-button @click="showChangePassword">Change</el-button>
+              </div>
+            </el-form-item>
+
+            <el-form-item label="Language">
+              <el-select v-model="generalForm.language" placeholder="Select language">
+                <el-option
+                  v-for="lang in languageOptions"
+                  :key="lang.value"
+                  :label="lang.label"
+                  :value="lang.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="Timezone">
+              <el-select v-model="generalForm.timezone" placeholder="Select timezone">
+                <el-option
+                  v-for="tz in timezoneOptions"
+                  :key="tz.value"
+                  :label="tz.label"
+                  :value="tz.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="saveChanges">Save Changes</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+
+        <!-- Parsing 设置 -->
+        <div v-if="activeMenu === 'parsing'" class="settings-section">
+          <h2 class="section-title">Parsing</h2>
+          <p class="section-desc">Configure parsing settings</p>
+
+          <!-- LLM Provider -->
+          <div class="config-card">
+            <h3 class="config-title">LLM Provider</h3>
+            <el-form label-position="top" class="settings-form">
+              <div class="form-row">
+                <el-form-item label="Provider" class="flex-1">
+                  <el-select v-model="parsingForm.provider" placeholder="Select provider">
+                    <el-option v-for="p in providerOptions" :key="p.value" :label="p.label" :value="p.value" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="Model" class="flex-1">
+                  <el-select v-model="parsingForm.model" placeholder="Select model">
+                    <el-option v-for="m in modelOptionsByProvider[parsingForm.provider]" :key="m.value" :label="m.label" :value="m.value" />
+                  </el-select>
+                </el-form-item>
+              </div>
+              <el-form-item label="API Key">
+                <el-input v-model="parsingForm.apiKey" type="password" placeholder="Enter API key" show-password />
+              </el-form-item>
+              <el-form-item label="API Endpoint">
+                <el-input v-model="parsingForm.apiEndpoint" placeholder="Enter API endpoint" />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- Parsing Configuration -->
+          <div class="config-card">
+            <h3 class="config-title">Parsing Configuration</h3>
+
+            <!-- 通用配置 -->
+            <div class="config-section">
+              <h4 class="config-subtitle">General</h4>
+              <el-form label-position="top" class="settings-form">
+                <div class="form-row">
+                  <el-form-item label="Max Workers" class="flex-1">
+                    <el-input-number v-model="parsingForm.maxWorkers" :min="1" :max="100" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="Max Retries" class="flex-1">
+                    <el-input-number v-model="parsingForm.maxRetries" :min="0" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="Request Timeout (seconds)" class="flex-1">
+                    <el-input-number v-model="parsingForm.requestTimeout" :min="10" :max="600" controls-position="right" />
+                  </el-form-item>
+                </div>
+                <div class="form-row">
+                  <el-form-item label="Enable HTTP Proxy" class="flex-1">
+                    <el-switch v-model="parsingForm.enableProxy" class="parsing-switch" />
+                  </el-form-item>
+                  <el-form-item v-if="parsingForm.enableProxy" label="HTTP Proxy URL" class="flex-1">
+                    <el-input v-model="parsingForm.httpProxyUrl" placeholder="http://proxy:8080" />
+                  </el-form-item>
+                </div>
+              </el-form>
+            </div>
+
+            <!-- 文本解析 -->
+            <div class="config-section">
+              <h4 class="config-subtitle">Text Parsing</h4>
+              <el-form label-position="top" class="settings-form">
+                <div class="form-row">
+                  <el-form-item label="Enable Multimodal" class="flex-1">
+                    <el-switch v-model="parsingForm.enableMultimodal" class="parsing-switch" />
+                  </el-form-item>
+                  <el-form-item v-if="parsingForm.enableMultimodal" label="Vision Model" class="flex-1">
+                    <el-select v-model="parsingForm.visionModel" placeholder="Select model">
+                      <el-option v-for="m in visionModelOptions" :key="m.value" :label="m.label" :value="m.value" />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item v-if="parsingForm.enableMultimodal" label="Image Understanding Price" class="flex-1">
+                    <el-input v-model="parsingForm.imageUnderstandingPrice" placeholder="0.00125">
+                      <template #append>$/1k tokens</template>
+                    </el-input>
+                  </el-form-item>
+                </div>
+                <div class="form-row">
+                  <el-form-item label="Enable JSON Mode" class="flex-1">
+                    <el-switch v-model="parsingForm.enableJsonMode" class="parsing-switch" />
+                  </el-form-item>
+                  <el-form-item v-if="parsingForm.enableJsonMode" label="JSON Mode Model" class="flex-1">
+                    <el-select v-model="parsingForm.jsonModeModel" placeholder="Select model">
+                      <el-option v-for="m in visionModelOptions" :key="m.value" :label="m.label" :value="m.value" />
+                    </el-select>
+                  </el-form-item>
+                </div>
+              </el-form>
+            </div>
+
+            <!-- 文件解析 -->
+            <div class="config-section">
+              <h4 class="config-subtitle">File Parsing</h4>
+              <el-form label-position="top" class="settings-form">
+                <div class="form-row">
+                  <el-form-item label="Enable File Parsing" class="flex-1">
+                    <el-switch v-model="parsingForm.enableFileParsing" class="parsing-switch" />
+                  </el-form-item>
+                  <el-form-item label="Enable Table Recognition" class="flex-1">
+                    <el-switch v-model="parsingForm.enableTableRecognition" class="parsing-switch" />
+                  </el-form-item>
+                  <el-form-item label="Enable Formula Recognition" class="flex-1">
+                    <el-switch v-model="parsingForm.enableFormulaRecognition" class="parsing-switch" />
+                  </el-form-item>
+                </div>
+                <el-form-item label="OCR Language">
+                  <el-select v-model="parsingForm.ocrLanguage" placeholder="Select language">
+                    <el-option v-for="lang in ocrLanguageOptions" :key="lang.value" :label="lang.label" :value="lang.value" />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+
+          <!-- 保存按钮 -->
+          <div class="form-actions mt-6">
+            <el-button type="primary" @click="saveParsingSettings">Save</el-button>
+          </div>
+        </div>
+
+        <!-- Storage 设置 -->
+        <div v-if="activeMenu === 'storage'" class="settings-section">
+          <h2 class="section-title">Storage</h2>
+          <p class="section-desc">Configure storage settings</p>
+
+          <!-- Storage Type -->
+          <div class="config-card">
+            <h3 class="config-title">Storage Type</h3>
+            <el-form label-position="top" class="settings-form">
+              <el-form-item label="Storage Type">
+                <el-select v-model="storageForm.storageType" placeholder="Select storage type">
+                  <el-option label="Local" value="local" />
+                  <el-option label="MinIO" value="minio" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- Local Storage -->
+          <div v-if="storageForm.storageType === 'local'" class="config-card">
+            <h3 class="config-title">Local Storage</h3>
+            <el-form label-position="top" class="settings-form">
+              <el-form-item label="Storage Path">
+                <el-input v-model="storageForm.localPath" placeholder="Enter local storage path" />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- MinIO Storage -->
+          <div v-if="storageForm.storageType === 'minio'" class="config-card">
+            <h3 class="config-title">MinIO Storage</h3>
+            <el-form label-position="top" class="settings-form">
+              <el-form-item label="Endpoint">
+                <el-input v-model="storageForm.minioEndpoint" placeholder="e.g., localhost:9000" />
+              </el-form-item>
+              <div class="form-row">
+                <el-form-item label="Access Key" class="flex-1">
+                  <el-input v-model="storageForm.minioAccessKey" placeholder="Enter access key" />
+                </el-form-item>
+                <el-form-item label="Secret Key" class="flex-1">
+                  <el-input v-model="storageForm.minioSecretKey" type="password" placeholder="Enter secret key" show-password />
+                </el-form-item>
+              </div>
+              <el-form-item label="Bucket">
+                <el-input v-model="storageForm.minioBucket" placeholder="Enter bucket name" />
+              </el-form-item>
+              <el-form-item label="Use SSL">
+                <el-switch v-model="storageForm.minioUseSSL" class="parsing-switch" />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- 保存按钮 -->
+          <div class="form-actions mt-6">
+            <el-button type="primary" @click="saveStorageSettings">Save</el-button>
+          </div>
+        </div>
+
+        <!-- Members 设置 -->
+        <div v-if="activeMenu === 'members'" class="settings-section">
+          <h2 class="section-title">Members</h2>
+          <p class="section-desc">Manage team members</p>
+        </div>
+
+        <!-- Notifications 设置 -->
+        <div v-if="activeMenu === 'notifications'" class="settings-section">
+          <h2 class="section-title">Notifications</h2>
+          <p class="section-desc">Configure notification preferences</p>
+        </div>
+
+        <!-- Model Settings 设置 -->
+        <div v-if="activeMenu === 'modelSettings'" class="settings-section">
+          <div class="flex justify-between items-center mb-6">
+            <div>
+              <h2 class="section-title">Model Settings</h2>
+              <p class="section-desc">Configure AI model settings</p>
+            </div>
+            <el-button type="primary" class="add-model-btn" @click="showAddModelForm = true">
+              <i class="fa-solid fa-plus mr-2"></i>
+              Add New Model
+            </el-button>
+          </div>
+
+          <!-- 模型列表 -->
+          <table class="w-full">
+            <thead class="bg-dark-600">
+              <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="model in models" :key="model.id" class="table-row">
+                <td class="px-5 py-4">
+                  <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>
+                <td class="px-5 py-4 text-center text-gray-400 text-sm">
+                  {{ model.endpoint }}
+                </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>
+                <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>
+              </tr>
+            </tbody>
+          </table>
+
+          <!-- 新增模型弹窗 -->
+          <el-dialog
+            v-model="showAddModelForm"
+            title="Add New Model"
+            width="500px"
+            :close-on-click-modal="false"
+            class="add-model-dialog"
+          >
+            <p class="dialog-desc">Configure your model settings</p>
+
+            <el-form label-position="top" class="settings-form">
+              <el-form-item label="Model Name">
+                <el-input v-model="newModelForm.name" placeholder="e.g., My GPT-4 Model" />
+              </el-form-item>
+
+              <el-form-item label="Model Type">
+                <el-select v-model="newModelForm.modelType" placeholder="Select model type">
+                  <el-option
+                    v-for="type in modelTypeOptions"
+                    :key="type.value"
+                    :label="type.label"
+                    :value="type.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="Provider">
+                <el-select v-model="newModelForm.provider" placeholder="Select provider">
+                  <el-option
+                    v-for="provider in providerOptions"
+                    :key="provider.value"
+                    :label="provider.label"
+                    :value="provider.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="Model">
+                <el-input v-model="newModelForm.model" placeholder="e.g., gpt-4o (OpenAI) or llama3 (Ollama)" />
+              </el-form-item>
+
+              <el-form-item label="API Key">
+                <el-input v-model="newModelForm.apiKey" type="password" placeholder="sk-xxxxx (required for OpenAI)" show-password />
+              </el-form-item>
+
+              <el-form-item label="Base URL">
+                <el-input v-model="newModelForm.baseUrl" placeholder="https://api.openai.com/v1 (OpenAI) or http://localhost:11434 (Ollama)" />
+              </el-form-item>
+
+              <el-form-item label="API Endpoint">
+                <el-input v-model="newModelForm.apiEndpoint" placeholder="e.g., /chat/completions" />
+              </el-form-item>
+            </el-form>
+
+            <template #footer>
+              <div class="dialog-footer">
+                <el-button text @click="cancelAddModel">Cancel</el-button>
+                <el-button
+                  :loading="testingConnection"
+                  @click="testConnection"
+                  class="test-btn"
+                >
+                  <i v-if="!testingConnection" class="fa-solid fa-plug"></i>
+                  Test Connection
+                </el-button>
+                <el-button type="primary" @click="addModel">Confirm</el-button>
+              </div>
+              <div v-if="connectionStatus === 'success'" class="connection-status success">
+                <i class="fa-solid fa-check-circle"></i> Connection successful
+              </div>
+              <div v-else-if="connectionStatus === 'error'" class="connection-status error">
+                <i class="fa-solid fa-xmark-circle"></i> Connection failed
+              </div>
+            </template>
+          </el-dialog>
+        </div>
+      </div>
+    </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>