feat: 扩展 Settings 页面功能

- 添加解析设置配置
- 优化模型设置表单
- 添加更多样式配置

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

web/src/views/Settings.vue

@@ -16,7 +16,9 @@ const {
   modelTypeOptions,
   providerOptions,
   showAddModelForm,
+  showEditModelForm,
   newModelForm,
+  editForm,
   testingConnection,
   connectionStatus,
   fetchModels,
@@ -24,6 +26,12 @@ const {
   addModel,
   cancelAddModel,
   deleteModel,
+  openEditDialog,
+  updateModel,
+  cancelEditModel,
+  testingEditConnection,
+  editConnectionStatus,
+  testConnectionEdit,
 } = useModelSettings()
 
 // 监听菜单切换，获取模型列表
@@ -478,7 +486,7 @@ const saveStorageSettings = () => {
                   <span v-else class="status-inactive">Inactive</span>
                 </td>
                 <td class="text-center">
-                  <button class="btn-icon" title="Edit">
+                  <button class="btn-icon" title="Edit" @click="openEditDialog(model)">
                     <i class="fa-solid fa-pen"></i>
                   </button>
                   <button class="btn-icon" title="Delete" @click="deleteModel(model.id)">
@@ -537,10 +545,6 @@ const saveStorageSettings = () => {
               <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>
@@ -564,8 +568,118 @@ const saveStorageSettings = () => {
               </div>
             </template>
           </el-dialog>
+
+          <!-- 编辑模型弹窗 -->
+          <el-dialog
+            v-model="showEditModelForm"
+            title="Edit Model"
+            width="500px"
+            :close-on-click-modal="false"
+            class="add-model-dialog"
+          >
+            <p class="dialog-desc">Update your model settings</p>
+
+            <el-form label-position="top" class="settings-form">
+              <el-form-item label="Model Name">
+                <el-input v-model="editForm.name" placeholder="e.g., My GPT-4 Model" />
+              </el-form-item>
+
+              <el-form-item label="Provider">
+                <el-select v-model="editForm.provider" placeholder="Select provider">
+                  <el-option
+                    v-for="option in providerOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="Model">
+                <el-input v-model="editForm.model" placeholder="e.g., gpt-4, llama2" />
+              </el-form-item>
+
+              <el-form-item label="Model Type">
+                <el-select v-model="editForm.modelType" placeholder="Select model type">
+                  <el-option
+                    v-for="option in modelTypeOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="API Key">
+                <el-input v-model="editForm.apiKey" type="password" placeholder="sk-..." show-password />
+              </el-form-item>
+
+              <el-form-item label="Base URL">
+                <el-input v-model="editForm.baseUrl" placeholder="e.g., https://api.openai.com/v1" />
+              </el-form-item>
+            </el-form>
+
+            <template #footer>
+              <div class="dialog-footer">
+                <button class="test-btn" @click="cancelEditModel">Cancel</button>
+                <el-button
+                  :loading="testingEditConnection"
+                  @click="testConnectionEdit"
+                  class="test-btn"
+                >
+                  <i v-if="!testingEditConnection" class="fa-solid fa-plug"></i>
+                  Test Connection
+                </el-button>
+                <el-button type="primary" @click="updateModel">Confirm</el-button>
+              </div>
+              <div v-if="editConnectionStatus === 'success'" class="connection-status success">
+                <i class="fa-solid fa-check-circle"></i> Connection successful
+              </div>
+              <div v-if="editConnectionStatus === '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>
+/* Model Settings dialog - 最高优先级覆盖 */
+
+/* 输入框 */
+.add-model-dialog .el-input__wrapper {
+  background-color: #171922 !important;
+}
+
+.add-model-dialog .el-input__wrapper input {
+  color: #ffffff !important;
+  -webkit-text-fill-color: #ffffff !important;
+}
+
+.add-model-dialog .el-input__wrapper input::placeholder {
+  color: #9ca3af !important;
+  -webkit-text-fill-color: #9ca3af !important;
+}
+
+/* 选择框 */
+.add-model-dialog .el-select__wrapper {
+  background-color: #171922 !important;
+}
+
+.add-model-dialog .el-select__wrapper .el-select__selected-item {
+  color: #ffffff !important;
+}
+
+.add-model-dialog .el-select__wrapper input::placeholder {
+  color: #9ca3af !important;
+  -webkit-text-fill-color: #9ca3af !important;
+}
+
+/* 未选中时的占位符文字 */
+.add-model-dialog .el-select__placeholder {
+  color: #9ca3af !important;
+}
+</style>

web/src/views/settings/modelSettings.css

@@ -233,6 +233,10 @@
   color: white;
 }
 
+.add-model-dialog :deep(.el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select) {
   width: 100%;
 }
@@ -246,6 +250,10 @@
   color: white;
 }
 
+.add-model-dialog :deep(.el-select .el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select-dropdown) {
   background-color: #1a1a24;
   border: 1px solid #2a2a3a;

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

@@ -199,6 +199,10 @@
   color: white;
 }
 
+.add-model-dialog :deep(.el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select) {
   width: 100%;
 }
@@ -212,6 +216,10 @@
   color: white;
 }
 
+.add-model-dialog :deep(.el-select .el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .add-model-dialog :deep(.el-select-dropdown) {
   background-color: #1a1a24;
   border: 1px solid #2a2a3a;

web/src/views/settings/settings.css

@@ -156,6 +156,10 @@ table {
   color: white;
 }
 
+.settings-form :deep(.el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .settings-form :deep(.el-select) {
   width: 100%;
 }
@@ -165,6 +169,10 @@ table {
   border: 1px solid #4b5563;
 }
 
+.settings-form :deep(.el-select .el-input__inner::placeholder) {
+  color: #6b7280;
+}
+
 .settings-form :deep(.el-button--primary) {
   background-color: #f97316;
   border-color: #f97316;

web/src/views/settings/useModelSettings.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { ModelInfo, ModelForm, ModelTypeOption, ProviderOption } from './types'
 
@@ -22,13 +22,47 @@ export function useModelSettings() {
   const providerOptions: ProviderOption[] = [
     { value: 'OpenAI', label: 'OpenAI' },
     { value: 'Ollama', label: 'Ollama' },
+    { value: 'ali', label: 'Alibaba Cloud' },
   ]
 
+  // 默认 Base URL 映射
+  const defaultBaseUrls: Record<string, string> = {
+    ali: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+  }
+
   // 是否显示新增模型表单
   const showAddModelForm = ref(false)
 
+  // 是否显示编辑模型表单
+  const showEditModelForm = ref(false)
+
   // 新增模型表单
   const newModelForm = ref<ModelForm>({
+    name: '',
+    apiKey: '',
+    apiEndpoint: '',
+    baseUrl: '',
+    provider: '',
+    model: '',
+    modelType: 'chat',
+  })
+
+  // 监听 provider 变化，自动填充默认 Base URL
+  watch(() => newModelForm.value.provider, (newProvider) => {
+    if (newProvider && defaultBaseUrls[newProvider]) {
+      newModelForm.value.baseUrl = defaultBaseUrls[newProvider]
+    }
+  })
+
+  // 监听新增弹窗打开，重置连接状态
+  watch(showAddModelForm, (newVal) => {
+    if (newVal) {
+      connectionStatus.value = 'idle'
+    }
+  })
+
+  // 编辑模型表单
+  const editForm = ref<ModelForm>({
     name: '',
     apiKey: '',
     apiEndpoint: '',
@@ -38,10 +72,20 @@ export function useModelSettings() {
     modelType: '',
   })
 
+  // 当前编辑的模型ID
+  const editingModelId = ref<string>('')
+
   // 测试连接状态
   const testingConnection = ref(false)
   const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')
 
+  // 编辑弹窗测试连接状态
+  const testingEditConnection = ref(false)
+  const editConnectionStatus = ref<'idle' | 'success' | 'error'>('idle')
+
+  // 编辑前模型的状态
+  const originalStatus = ref<string>('')
+
   // 获取模型列表
   const fetchModels = async () => {
     modelsLoading.value = true
@@ -99,6 +143,48 @@ export function useModelSettings() {
     }
   }
 
+  // 编辑弹窗测试连接
+  const testConnectionEdit = async () => {
+    if (!editForm.value.apiKey || !editForm.value.baseUrl) {
+      ElMessage.warning('Please enter API Key and Base URL')
+      return
+    }
+
+    testingEditConnection.value = true
+    editConnectionStatus.value = 'idle'
+
+    try {
+      const response = await fetch(`${API_BASE}/model/test`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          provider: editForm.value.provider,
+          model: editForm.value.model,
+          api_key: editForm.value.apiKey,
+          base_url: editForm.value.baseUrl,
+          api_endpoint: editForm.value.apiEndpoint,
+        }),
+      })
+
+      const result = await response.json()
+
+      if (result.success) {
+        editConnectionStatus.value = 'success'
+        ElMessage.success(result.message || 'Connection successful!')
+      } else {
+        editConnectionStatus.value = 'error'
+        ElMessage.error(result.message || 'Connection failed')
+      }
+    } catch (error: any) {
+      editConnectionStatus.value = 'error'
+      ElMessage.error('Connection failed: ' + error.message)
+    } finally {
+      testingEditConnection.value = false
+    }
+  }
+
   // 添加新模型（初始状态为 inactive，需要测试连接后才能激活）
   const addModel = async () => {
     if (!newModelForm.value.name || !newModelForm.value.provider || !newModelForm.value.model) {
@@ -120,24 +206,13 @@ export function useModelSettings() {
           api_key: newModelForm.value.apiKey,
           base_url: newModelForm.value.baseUrl,
           api_endpoint: newModelForm.value.apiEndpoint,
-          status: 'inactive', // 初始状态为未激活
+          status: connectionStatus.value === 'success' ? 'active' : '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: '',
@@ -146,7 +221,7 @@ export function useModelSettings() {
           baseUrl: '',
           provider: '',
           model: '',
-          modelType: '',
+          modelType: 'chat',
         }
         connectionStatus.value = 'idle'
         showAddModelForm.value = false
@@ -193,6 +268,91 @@ export function useModelSettings() {
     }
   }
 
+  // 打开编辑弹窗
+  const openEditDialog = (model: ModelInfo) => {
+    editingModelId.value = model.id
+    editForm.value = {
+      name: model.name,
+      apiKey: model.api_key,
+      apiEndpoint: model.api_endpoint,
+      baseUrl: model.base_url,
+      provider: model.provider,
+      model: model.model,
+      modelType: model.model_type,
+    }
+    originalStatus.value = model.status
+    editConnectionStatus.value = 'idle'
+    showEditModelForm.value = true
+  }
+
+  // 更新模型
+  const updateModel = async () => {
+    if (!editingModelId.value || !editForm.value.name || !editForm.value.provider || !editForm.value.model) {
+      ElMessage.warning('Please fill in required fields')
+      return
+    }
+
+    // 根据测试连接结果设置状态
+    // 用户测试通过 -> active
+    // 用户测试失败 -> error
+    // 用户没有测试 -> inactive
+    let newStatus = 'inactive'
+    if (editConnectionStatus.value === 'success') {
+      newStatus = 'active'
+    } else if (editConnectionStatus.value === 'error') {
+      newStatus = 'error'
+    }
+
+    try {
+      const response = await fetch(`${API_BASE}/model/${editingModelId.value}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: editForm.value.name,
+          model_type: editForm.value.modelType || 'chat',
+          provider: editForm.value.provider,
+          model: editForm.value.model,
+          api_key: editForm.value.apiKey,
+          base_url: editForm.value.baseUrl,
+          api_endpoint: editForm.value.apiEndpoint,
+          status: newStatus,
+        }),
+      })
+
+      if (response.ok) {
+        const result = await response.json()
+        const index = models.value.findIndex(m => m.id === editingModelId.value)
+        if (index !== -1) {
+          models.value[index] = result
+        }
+        showEditModelForm.value = false
+        ElMessage.success('Model updated successfully')
+      } else {
+        const error = await response.json()
+        ElMessage.error(error.message || 'Failed to update model')
+      }
+    } catch (error: any) {
+      ElMessage.error('Failed to update model: ' + error.message)
+    }
+  }
+
+  // 取消编辑
+  const cancelEditModel = () => {
+    editForm.value = {
+      name: '',
+      apiKey: '',
+      apiEndpoint: '',
+      baseUrl: '',
+      provider: '',
+      model: '',
+      modelType: '',
+    }
+    editingModelId.value = ''
+    showEditModelForm.value = false
+  }
+
   return {
     // State
     models,
@@ -200,15 +360,23 @@ export function useModelSettings() {
     modelTypeOptions,
     providerOptions,
     showAddModelForm,
+    showEditModelForm,
     newModelForm,
+    editForm,
     testingConnection,
     connectionStatus,
+    testingEditConnection,
+    editConnectionStatus,
 
     // Methods
     fetchModels,
     testConnection,
+    testConnectionEdit,
     addModel,
     cancelAddModel,
     deleteModel,
+    openEditDialog,
+    updateModel,
+    cancelEditModel,
   }
 }