julian/ai-translate-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

support edit presets

Browse Source
This commit is contained in:
Julian Freeman
2026-03-27 17:56:24 -04:00
parent 15626ba9e1
commit 7de7877c64
1 changed files with 91 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/SettingsView.vue
View File

@@ -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>