feat: 扩展优化重构
All checks were successful
Extension Build & Release / build (push) Successful in 1m15s
All checks were successful
Extension Build & Release / build (push) Successful in 1m15s
This commit is contained in:
zs
@@ -83,46 +83,41 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-12">
|
||||
<div class="space-y-8 animate-in fade-in duration-700">
|
||||
|
||||
<header class="flex justify-between items-end">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-2xl font-bold tracking-tight">AI Content Strategies</h2>
|
||||
<p class="text-sm text-zinc-500 font-medium">Fine-tune how your AI assistant approaches engagement for different personas.</p>
|
||||
</div>
|
||||
<div v-if="!showForm" class="flex justify-end">
|
||||
<button
|
||||
v-if="!showForm"
|
||||
@click="showForm = true"
|
||||
class="px-5 py-2.5 bg-rose-500 hover:bg-rose-400 text-white rounded-[14px] text-sm font-bold transition-apple shadow-lg shadow-rose-900/20 active:scale-95 flex items-center gap-2"
|
||||
class="w-full py-4 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-sm font-bold transition-apple shadow-lg shadow-rose-900/20 active:scale-95 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
|
||||
New Strategy
|
||||
New Prompt Angle
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="py-20 flex justify-center">
|
||||
<div class="w-8 h-8 border-2 border-white/10 border-t-rose-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-8">
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Create Form Modal View -->
|
||||
<transition enter-active-class="transition duration-500 ease-out transform" enter-from-class="opacity-0 scale-95 -translate-y-4" enter-to-class="opacity-100 scale-100 translate-y-0">
|
||||
<form v-if="showForm" @submit.prevent="createStrategy" class="bg-white/[0.03] border border-white/5 rounded-[32px] p-8 space-y-8 shadow-2xl relative">
|
||||
<form v-if="showForm" @submit.prevent="createStrategy" class="bg-white/[0.03] border border-white/5 rounded-[32px] p-6 space-y-6 shadow-2xl relative">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-lg font-bold">New Prompt Angle</h3>
|
||||
<h3 class="text-base font-bold">Configure Angle</h3>
|
||||
<button type="button" @click="showForm = false" class="p-2 rounded-full hover:bg-white/5 transition-apple">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMsg" class="p-4 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-xl animate-pulse">
|
||||
<div v-if="errorMsg" class="p-4 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-xl">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="space-y-3">
|
||||
<label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Internal Reference ID</label>
|
||||
<input v-model="form.strategy_key" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700" placeholder="e.g. vc_advisor" />
|
||||
<label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Internal key</label>
|
||||
<input v-model="form.strategy_key" required class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700 font-mono" placeholder="e.g. vc_advisor" />
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Display Label</label>
|
||||
@@ -131,16 +126,14 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Prompt Instructions & constraints</label>
|
||||
<textarea v-model="form.description" required rows="4" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700 resize-none py-4" placeholder="Be authoritative yet encouraging. Focus on market metrics. Avoid safe 'that's great' comments."></textarea>
|
||||
<label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Instructions</label>
|
||||
<textarea v-model="form.description" required rows="4" class="w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700 resize-none py-4" placeholder="Be authoritative yet encouraging..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button type="submit" :disabled="isSubmitting" class="px-8 py-3.5 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-[15px] font-bold transition-apple shadow-xl shadow-rose-900/30 flex items-center gap-3 active:scale-95 disabled:opacity-50">
|
||||
<div v-if="isSubmitting" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
|
||||
{{ isSubmitting ? 'Architecting...' : 'Save Strategy' }}
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" :disabled="isSubmitting" class="w-full py-4 bg-rose-500 hover:bg-rose-400 text-white rounded-2xl text-sm font-bold transition-apple shadow-xl shadow-rose-900/30 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50">
|
||||
<div v-if="isSubmitting" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
|
||||
{{ isSubmitting ? 'Architecting...' : 'Deploy Strategy' }}
|
||||
</button>
|
||||
</form>
|
||||
</transition>
|
||||
|
||||
@@ -153,21 +146,21 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div v-for="s in strategies" :key="s.id" class="group bg-white/[0.02] border border-white/5 rounded-[28px] p-6 flex justify-between items-center transition-apple hover:bg-white/[0.04] hover:border-white/10 hover:shadow-2xl">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-14 h-14 bg-rose-500/5 border border-rose-500/10 rounded-2xl flex items-center justify-center text-rose-500 group-hover:scale-110 transition-apple">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
|
||||
<div v-for="s in strategies" :key="s.id" class="group bg-white/[0.02] border border-white/5 rounded-[24px] p-4 flex justify-between items-center transition-apple hover:bg-white/[0.04]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-rose-500/5 border border-rose-500/10 rounded-xl flex items-center justify-center text-rose-500 transition-apple shrink-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[17px] font-black tracking-tight group-hover:text-rose-400 transition-apple">{{ s.label }}</span>
|
||||
<span class="text-[9px] font-black font-mono text-zinc-500 bg-black/40 px-2 py-0.5 rounded-md border border-white/5 uppercase tracking-tighter">{{ s.strategy_key }}</span>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-black tracking-tight truncate group-hover:text-rose-400 transition-apple">{{ s.label }}</span>
|
||||
<span class="text-[8px] font-black font-mono text-zinc-600 bg-black/40 px-1.5 py-0.5 rounded border border-white/5 uppercase tracking-tighter">{{ s.strategy_key }}</span>
|
||||
</div>
|
||||
<p class="text-[13px] text-zinc-500 leading-relaxed font-medium max-w-xl group-hover:text-zinc-400 transition-apple">{{ s.description }}</p>
|
||||
<p class="text-[11px] text-zinc-500 leading-relaxed font-medium truncate group-hover:text-zinc-400 transition-apple">{{ s.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="deleteStrategy(s.id)" class="p-4 rounded-2xl text-zinc-700 hover:text-rose-500 hover:bg-rose-500/10 transition-apple opacity-0 group-hover:opacity-100 active:scale-95">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
<button @click="deleteStrategy(s.id)" class="p-3 rounded-xl text-zinc-700 hover:text-rose-500 transition-apple active:scale-95">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user