feat: 扩展 Settings 页面功能

- 添加解析设置配置 - 优化模型设置表单 - 添加更多样式配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 16:21:44 +08:00
parent 329968de7f
commit 650789e934
5 changed files with 325 additions and 19 deletions
--- a/web/src/views/Settings.vue
+++ b/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>
--- a/web/src/views/settings/modelSettings.css
+++ b/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;
--- a/web/src/views/settings/settings-parsing.css
+++ b/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;
--- a/web/src/views/settings/settings.css
+++ b/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;
--- a/web/src/views/settings/useModelSettings.ts
+++ b/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,
  }
 }