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>