From 7de7877c640e20cec9079226f0e640873cdbbb90 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Fri, 27 Mar 2026 17:56:24 -0400
Subject: [PATCH] support edit presets

---
 src/components/SettingsView.vue | 116 +++++++++++++++++++++++++-------
 1 file changed, 91 insertions(+), 25 deletions(-)

diff --git a/src/components/SettingsView.vue b/src/components/SettingsView.vue
index 668b187..b6bde03 100644
--- a/src/components/SettingsView.vue
+++ b/src/components/SettingsView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff } from 'lucide-vue-next';
+import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil } from 'lucide-vue-next';
 import { useSettingsStore, DEFAULT_TEMPLATE, DEFAULT_EVALUATION_TEMPLATE, DEFAULT_REFINEMENT_TEMPLATE, type ApiProfile } from '../stores/settings';
 import { cn } from '../lib/utils';
 
@@ -35,6 +35,34 @@ const deleteProfile = (id: string) => {
   settings.profiles = settings.profiles.filter(p => p.id !== id);
 };
 
+const editingProfileId = ref<string | null>(null);
+const editProfileForm = ref<ApiProfile | null>(null);
+const showEditApiKey = ref(false);
+
+const startEditProfile = (profile: ApiProfile) => {
+  editingProfileId.value = profile.id;
+  editProfileForm.value = { ...profile };
+  showEditApiKey.value = false;
+};
+
+const cancelEditProfile = () => {
+  editingProfileId.value = null;
+  editProfileForm.value = null;
+};
+
+const saveEditProfile = () => {
+  if (!editProfileForm.value || !editingProfileId.value) return;
+  if (!editProfileForm.value.name.trim()) return;
+  
+  const index = settings.profiles.findIndex(p => p.id === editingProfileId.value);
+  if (index !== -1) {
+    settings.profiles[index] = { ...editProfileForm.value };
+  }
+  
+  editingProfileId.value = null;
+  editProfileForm.value = null;
+};
+
 const evaluationProfileDropdownOpen = ref(false);
 const toggleDropdown = (type: string) => {
   if (type === 'evaluationProfile') evaluationProfileDropdownOpen.value = !evaluationProfileDropdownOpen.value;
@@ -200,34 +228,72 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
                   <div 
                     v-for="profile in settings.profiles" 
                     :key="profile.id"
-                    class="p-3 flex items-center justify-between group hover:bg-white dark:hover:bg-slate-800 transition-colors rounded-lg border border-transparent hover:border-slate-200 dark:hover:border-slate-700"
                   >
-                    <div class="flex flex-col gap-1 min-w-0">
-                      <span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
-                      <div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400 font-mono bg-slate-100 dark:bg-slate-950 px-2 py-0.5 rounded w-fit">
-                        <span class="truncate max-w-32">{{ profile.modelName }}</span>
-                        <span class="opacity-30">•</span>
-                        <span class="truncate max-w-48">{{ profile.apiBaseUrl }}</span>
+                    <!-- 编辑模式 -->
+                    <div v-if="editingProfileId === profile.id && editProfileForm" class="p-4 bg-white dark:bg-slate-800/80 rounded-xl border border-blue-200 dark:border-blue-800/50 shadow-sm space-y-3 my-1">
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">预设名称</label>
+                        <input v-model="editProfileForm.name" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all text-sm text-slate-900 dark:text-slate-100" placeholder="预设名称" />
+                      </div>
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">API Base URL</label>
+                        <input v-model="editProfileForm.apiBaseUrl" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
+                      </div>
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">API Key</label>
+                        <div class="relative">
+                          <input v-model="editProfileForm.apiKey" :type="showEditApiKey ? 'text' : 'password'" class="w-full pl-3 pr-10 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
+                          <button @click="showEditApiKey = !showEditApiKey" type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none p-1">
+                            <Eye v-if="showEditApiKey" class="w-4 h-4" />
+                            <EyeOff v-else class="w-4 h-4" />
+                          </button>
+                        </div>
+                      </div>
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">Model Name</label>
+                        <input v-model="editProfileForm.modelName" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
+                      </div>
+                      <div class="flex items-center justify-end gap-2 pt-2">
+                        <button @click="cancelEditProfile" class="px-4 py-2 text-xs font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-lg transition-colors">取消</button>
+                        <button @click="saveEditProfile" :disabled="!editProfileForm.name.trim()" class="px-4 py-2 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors">保存修改</button>
                       </div>
                     </div>
-                    <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button 
-                        @click="applyProfile(profile)"
-                        class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 rounded-lg transition-colors text-xs font-medium shadow-sm"
-                      >
-                        <Play class="w-3 h-3 fill-current" />
-                        应用
-                      </button>
-                      <button 
-                        @click="deleteProfile(profile.id)"
-                        class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
-                        title="删除"
-                      >
-                        <Trash2 class="w-4 h-4" />
-                      </button>
+
+                    <!-- 正常显示模式 -->
+                    <div v-else class="p-3 flex items-center justify-between group hover:bg-white dark:hover:bg-slate-800 transition-colors rounded-lg border border-transparent hover:border-slate-200 dark:hover:border-slate-700">
+                      <div class="flex flex-col gap-1 min-w-0">
+                        <span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
+                        <div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400 font-mono bg-slate-100 dark:bg-slate-950 px-2 py-0.5 rounded w-fit">
+                          <span class="truncate max-w-32">{{ profile.modelName }}</span>
+                          <span class="opacity-30">•</span>
+                          <span class="truncate max-w-48">{{ profile.apiBaseUrl }}</span>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button 
+                          @click="applyProfile(profile)"
+                          class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 rounded-lg transition-colors text-xs font-medium shadow-sm"
+                        >
+                          <Play class="w-3 h-3 fill-current" />
+                          应用
+                        </button>
+                        <button 
+                          @click="startEditProfile(profile)"
+                          class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded-lg transition-colors"
+                          title="编辑"
+                        >
+                          <Pencil class="w-4 h-4" />
+                        </button>
+                        <button 
+                          @click="deleteProfile(profile.id)"
+                          class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
+                          title="删除"
+                        >
+                          <Trash2 class="w-4 h-4" />
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </div>
+                  </div>                </div>
               </section>
             </template>