From b715b8e85957b2a1144d4356f270ad713f2a67c2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Sun, 8 Mar 2026 10:47:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=A9=E5=B1=95=20Settings=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化模型配置表单
- 添加更多设置选项

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/views/Settings.vue | 229 +++++++++++++++++++++++--------------
 1 file changed, 142 insertions(+), 87 deletions(-)

diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index f568ca4..d3a7ec3 100644
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useModelSettings } from './settings/useModelSettings'
+import FormDialog from '@/components/FormDialog.vue'
 import './settings/settings.css'
 import './settings/settings-parsing.css'
 import './settings/modelSettings.css'
@@ -498,22 +499,28 @@ const saveStorageSettings = () => {
           </table>
 
           <!-- 新增模型弹窗 -->
-          <el-dialog
-            v-model="showAddModelForm"
+          <FormDialog
+            :model-value="showAddModelForm"
+            @update:model-value="showAddModelForm = $event"
             title="Add New Model"
-            width="500px"
-            :close-on-click-modal="false"
-            class="add-model-dialog"
+            description="Configure your model settings"
+            icon="fa-solid fa-brain"
+            icon-class="bg-gradient-to-br from-primary-orange to-red-500"
           >
-            <p class="dialog-desc">Configure your model settings</p>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Model Name</label>
+                <input
+                  v-model="newModelForm.name"
+                  type="text"
+                  placeholder="e.g., My GPT-4 Model"
+                  class="input-field"
+                >
+              </div>
 
-            <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">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Model Type</label>
+                <el-select v-model="newModelForm.modelType" placeholder="Select model type" class="w-full" size="large" popper-class="dark-select-dropdown">
                   <el-option
                     v-for="type in modelTypeOptions"
                     :key="type.value"
@@ -521,10 +528,11 @@ const saveStorageSettings = () => {
                     :value="type.value"
                   />
                 </el-select>
-              </el-form-item>
+              </div>
 
-              <el-form-item label="Provider">
-                <el-select v-model="newModelForm.provider" placeholder="Select provider">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
+                <el-select v-model="newModelForm.provider" placeholder="Select provider" class="w-full" size="large" popper-class="dark-select-dropdown">
                   <el-option
                     v-for="provider in providerOptions"
                     :key="provider.value"
@@ -532,60 +540,86 @@ const saveStorageSettings = () => {
                     :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>
-
-            <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>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Model</label>
+                <input
+                  v-model="newModelForm.model"
+                  type="text"
+                  placeholder="e.g., gpt-4o (OpenAI) or llama3 (Ollama)"
+                  class="input-field"
+                >
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">API Key</label>
+                <input
+                  v-model="newModelForm.apiKey"
+                  type="password"
+                  placeholder="sk-xxxxx (required for OpenAI)"
+                  class="input-field"
+                >
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Base URL</label>
+                <input
+                  v-model="newModelForm.baseUrl"
+                  type="text"
+                  placeholder="https://api.openai.com/v1 (OpenAI) or http://localhost:11434 (Ollama)"
+                  class="input-field"
+                >
+              </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>
+            </div>
+
+            <template #footer>
+              <button class="btn-secondary" @click="cancelAddModel">Cancel</button>
+              <button
+                :disabled="testingConnection"
+                class="btn-primary"
+                @click="testConnection"
+              >
+                <i class="fa-solid fa-plug"></i>
+                Test Connection
+              </button>
+              <button class="btn-primary" @click="addModel">
+                Confirm
+              </button>
             </template>
-          </el-dialog>
+          </FormDialog>
 
           <!-- 编辑模型弹窗 -->
-          <el-dialog
-            v-model="showEditModelForm"
+          <FormDialog
+            :model-value="showEditModelForm"
+            @update:model-value="showEditModelForm = $event"
             title="Edit Model"
-            width="500px"
-            :close-on-click-modal="false"
-            class="add-model-dialog"
+            description="Update your model settings"
+            icon="fa-solid fa-pen-to-square"
+            icon-class="bg-gradient-to-br from-primary-cyan to-blue-500"
           >
-            <p class="dialog-desc">Update your model settings</p>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Model Name</label>
+                <input
+                  v-model="editForm.name"
+                  type="text"
+                  placeholder="e.g., My GPT-4 Model"
+                  class="input-field"
+                >
+              </div>
 
-            <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">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
+                <el-select v-model="editForm.provider" placeholder="Select provider" class="w-full" size="large" popper-class="dark-select-dropdown">
                   <el-option
                     v-for="option in providerOptions"
                     :key="option.value"
@@ -593,14 +627,21 @@ const saveStorageSettings = () => {
                     :value="option.value"
                   />
                 </el-select>
-              </el-form-item>
+              </div>
 
-              <el-form-item label="Model">
-                <el-input v-model="editForm.model" placeholder="e.g., gpt-4, llama2" />
-              </el-form-item>
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Model</label>
+                <input
+                  v-model="editForm.model"
+                  type="text"
+                  placeholder="e.g., gpt-4, llama2"
+                  class="input-field"
+                >
+              </div>
 
-              <el-form-item label="Model Type">
-                <el-select v-model="editForm.modelType" placeholder="Select model type">
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Model Type</label>
+                <el-select v-model="editForm.modelType" placeholder="Select model type" class="w-full" size="large" popper-class="dark-select-dropdown">
                   <el-option
                     v-for="option in modelTypeOptions"
                     :key="option.value"
@@ -608,38 +649,52 @@ const saveStorageSettings = () => {
                     :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>
+                <label class="block text-sm font-medium text-gray-300 mb-2">API Key</label>
+                <input
+                  v-model="editForm.apiKey"
+                  type="password"
+                  placeholder="sk-..."
+                  class="input-field"
+                >
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Base URL</label>
+                <input
+                  v-model="editForm.baseUrl"
+                  type="text"
+                  placeholder="e.g., https://api.openai.com/v1"
+                  class="input-field"
+                >
+              </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>
+            </div>
+
+            <template #footer>
+              <button class="btn-secondary" @click="cancelEditModel">Cancel</button>
+              <button
+                :disabled="testingEditConnection"
+                class="btn-primary"
+                @click="testConnectionEdit"
+              >
+                <i class="fa-solid fa-plug"></i>
+                Test Connection
+              </button>
+              <button class="btn-primary" @click="updateModel">
+                Confirm
+              </button>
             </template>
-          </el-dialog>
+          </FormDialog>
         </div>
       </div>
     </div>