feat: 扩展优化重构

extension/src/options/Auth.vue

@@ -73,7 +73,7 @@ const submitAuth = async () => {
           v-model="form.email"
           type="email" 
           required
-          class="dashboard-input"
+          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. user@insight-reply.pro"
         />
       </div>
@@ -84,7 +84,7 @@ const submitAuth = async () => {
           v-model="form.password"
           type="password" 
           required
-          class="dashboard-input"
+          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="••••••••••••"
         />
       </div>
@@ -118,8 +118,5 @@ const submitAuth = async () => {
 </template>
 
 <style scoped>
-.dashboard-input {
+/* No scoped styles needed as we use utility classes for maximum performance and build stability */
-  @apply w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold;
-  @apply transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700;
-}
 </style>

extension/src/options/Competitors.vue

@@ -123,12 +123,12 @@ onMounted(() => {
           <div class="grid grid-cols-2 gap-8">
             <div class="space-y-3">
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Competitor Name</label>
-              <input v-model="form.competitor_name" required class="dashboard-input" placeholder="e.g. Acme Corp" />
+              <input v-model="form.competitor_name" 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-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700" placeholder="e.g. Acme Corp" />
             </div>
             <div class="space-y-3">
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Platform</label>
               <div class="relative">
-                <select v-model="form.platform" class="dashboard-input appearance-none cursor-pointer">
+                <select v-model="form.platform" 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-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700 appearance-none cursor-pointer">
                     <option value="twitter">Twitter / X</option>
                     <option value="reddit">Reddit (Coming Soon)</option>
                 </select>
@@ -144,12 +144,12 @@ onMounted(() => {
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">X Handle <span class="text-zinc-700">(optional)</span></label>
               <div class="relative">
                   <span class="absolute inset-y-0 left-5 flex items-center text-zinc-600 pointer-events-none text-sm font-bold">@</span>
-                  <input v-model="form.target_handle" class="dashboard-input pl-10" placeholder="handle" />
+                  <input v-model="form.target_handle" 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-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700 pl-10" placeholder="handle" />
               </div>
             </div>
             <div class="space-y-3">
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Monitor Keywords</label>
-              <input v-model="form.keywords" required class="dashboard-input" placeholder="e.g. acme sucks, alternative to acme" />
+              <input v-model="form.keywords" 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-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700" placeholder="e.g. acme sucks, alternative to acme" />
             </div>
           </div>
 
@@ -216,8 +216,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.dashboard-input {
+/* No scoped styles needed as we use utility classes for maximum performance and build stability */
-  @apply w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold;
-  @apply transition-apple focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/40 placeholder:text-zinc-700;
-}
 </style>

extension/src/options/Options.vue

@@ -92,13 +92,21 @@ const logout = () => {
             <h3 class="text-[10px] font-bold text-zinc-600 uppercase tracking-[0.2em]">Personalization</h3>
           </div>
           
-          <button @click="activeTab = 'profile'" :class="['sidebar-link', activeTab === 'profile' ? 'active' : '']">
+          <button @click="activeTab = 'profile'" 
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+            :class="['flex items-center gap-4 px-4 py-3.5 rounded-2xl text-[13px] font-bold transition-apple tracking-tight active:scale-95', 
+              activeTab === 'profile' 
+                ? 'bg-rose-500/10 text-rose-500 border border-rose-500/20 shadow-[0_4px_12px_rgba(244,63,94,0.1)]' 
+                : 'text-zinc-500 hover:text-zinc-200 hover:bg-white/[0.03] border border-transparent']">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="['transition-apple', activeTab === 'profile' ? 'text-rose-500' : '']"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
             Product Profile
           </button>
           
-          <button @click="activeTab = 'strategies'" :class="['sidebar-link', activeTab === 'strategies' ? 'active' : '']">
+          <button @click="activeTab = 'strategies'" 
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="m16 4 4 4-4 4"/><path d="M20 8H4v12"/></svg>
+            :class="['flex items-center gap-4 px-4 py-3.5 rounded-2xl text-[13px] font-bold transition-apple tracking-tight active:scale-95', 
+              activeTab === 'strategies' 
+                ? 'bg-rose-500/10 text-rose-500 border border-rose-500/20 shadow-[0_4px_12px_rgba(244,63,94,0.1)]' 
+                : 'text-zinc-500 hover:text-zinc-200 hover:bg-white/[0.03] border border-transparent']">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="['transition-apple', activeTab === 'strategies' ? 'text-rose-500' : '']"><path d="m16 4 4 4-4 4"/><path d="M20 8H4v12"/></svg>
             AI Strategies
           </button>
           
@@ -106,13 +114,21 @@ const logout = () => {
             <h3 class="text-[10px] font-bold text-zinc-600 uppercase tracking-[0.2em]">Market Intelligence</h3>
           </div>
 
-          <button @click="activeTab = 'competitors'" :class="['sidebar-link', activeTab === 'competitors' ? 'active' : '']">
+          <button @click="activeTab = 'competitors'" 
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
+            :class="['flex items-center gap-4 px-4 py-3.5 rounded-2xl text-[13px] font-bold transition-apple tracking-tight active:scale-95', 
+              activeTab === 'competitors' 
+                ? 'bg-rose-500/10 text-rose-500 border border-rose-500/20 shadow-[0_4px_12px_rgba(244,63,94,0.1)]' 
+                : 'text-zinc-500 hover:text-zinc-200 hover:bg-white/[0.03] border border-transparent']">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="['transition-apple', activeTab === 'competitors' ? 'text-rose-500' : '']"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
             Competitor Radar
           </button>
 
-          <button @click="activeTab = 'hottweets'" :class="['sidebar-link', activeTab === 'hottweets' ? 'active-orange' : '']">
+          <button @click="activeTab = 'hottweets'" 
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z"/></svg>
+            :class="['flex items-center gap-4 px-4 py-3.5 rounded-2xl text-[13px] font-bold transition-apple tracking-tight active:scale-95', 
+              activeTab === 'hottweets' 
+                ? 'bg-orange-500/10 text-orange-500 border border-orange-500/20 shadow-[0_4px_12px_rgba(249,115,22,0.1)]' 
+                : 'text-zinc-500 hover:text-zinc-200 hover:bg-white/[0.03] border border-transparent']">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="['transition-apple', activeTab === 'hottweets' ? 'text-orange-500' : '']"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z"/></svg>
             Growth Opportunities
           </button>
         </nav>
@@ -143,28 +159,5 @@ const logout = () => {
 </template>
 
 <style scoped>
-.sidebar-link {
+/* No scoped styles needed as we use utility classes for maximum performance and build stability */
-  @apply flex items-center gap-4 px-4 py-3.5 rounded-2xl text-[13px] font-bold transition-apple tracking-tight active:scale-95;
-  @apply text-zinc-500 hover:text-zinc-200 hover:bg-white/[0.03];
-}
-
-.sidebar-link.active {
-  @apply bg-rose-500/10 text-rose-500 border border-rose-500/20 shadow-[0_4px_12px_rgba(244,63,94,0.1)];
-}
-
-.sidebar-link.active-orange {
-  @apply bg-orange-500/10 text-orange-500 border border-orange-500/20 shadow-[0_4px_12px_rgba(249,115,22,0.1)];
-}
-
-.sidebar-link .icon {
-  @apply transition-apple;
-}
-
-.sidebar-link.active .icon {
-  @apply text-rose-500;
-}
-
-.sidebar-link.active-orange .icon {
-  @apply text-orange-500;
-}
 </style>

extension/src/options/Profile.vue

@@ -125,18 +125,18 @@ onMounted(() => {
         <div class="grid grid-cols-2 gap-8">
           <div class="space-y-3">
             <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Product Name</label>
-            <input v-model="form.product_name" required class="dashboard-input" placeholder="e.g. InsightReply" />
+            <input v-model="form.product_name" 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. InsightReply" />
           </div>
 
           <div class="space-y-3">
             <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Industry / Domain</label>
-            <input v-model="form.industry" class="dashboard-input" placeholder="e.g. AI-Powered Marketing" />
+            <input v-model="form.industry" 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. AI-Powered Marketing" />
           </div>
         </div>
 
         <div class="space-y-3">
           <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Target Persona</label>
-          <input v-model="form.target_audience" class="dashboard-input" placeholder="e.g. Founders & Indie Hackers on X" />
+          <input v-model="form.target_audience" 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. Founders & Indie Hackers on X" />
         </div>
       </section>
 
@@ -147,17 +147,17 @@ onMounted(() => {
             Value Propositions
             <span class="text-[9px] text-zinc-700 font-black lowercase tracking-normal bg-zinc-900 px-2 py-0.5 rounded border border-white/5 italic">essential knowledge</span>
           </label>
-          <textarea v-model="form.core_features" rows="4" class="dashboard-input resize-none py-4" placeholder="Distill 3-5 unique features that set your product apart."></textarea>
+          <textarea v-model="form.core_features" 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="Distill 3-5 unique features that set your product apart."></textarea>
         </div>
 
         <div class="space-y-3">
           <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">The "Hook" / Conversation Intent</label>
-          <textarea v-model="form.user_intent" rows="3" class="dashboard-input resize-none py-4" placeholder="How do you want to position yourself in replies? Helpful advisor, sharp critic, etc."></textarea>
+          <textarea v-model="form.user_intent" rows="3" 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="How do you want to position yourself in replies? Helpful advisor, sharp critic, etc."></textarea>
         </div>
 
         <div class="space-y-3">
           <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Radar Keywords <span class="text-zinc-700">(comma-separated)</span></label>
-          <input v-model="form.relevance_keywords" class="dashboard-input" placeholder="e.g. marketing, automation, twitter growth, productivity" />
+          <input v-model="form.relevance_keywords" 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. marketing, automation, twitter growth, productivity" />
         </div>
       </section>
 
@@ -172,7 +172,7 @@ onMounted(() => {
           <div class="space-y-3">
             <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">LLM Provider</label>
             <div class="relative">
-              <select v-model="form.default_llm_provider" class="dashboard-input appearance-none cursor-pointer">
+              <select v-model="form.default_llm_provider" 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 appearance-none cursor-pointer">
                 <option value="">Global Default (Automated)</option>
                 <option v-for="p in providers" :key="p" :value="p">{{ p.charAt(0).toUpperCase() + p.slice(1) }}</option>
               </select>
@@ -183,7 +183,7 @@ onMounted(() => {
           </div>
           <div class="space-y-3">
             <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Engine Model Override</label>
-            <input v-model="form.default_llm_model" class="dashboard-input" placeholder="e.g. gpt-4o, claude-3-5-sonnet" />
+            <input v-model="form.default_llm_model" 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. gpt-4o, claude-3-5-sonnet" />
           </div>
         </div>
       </section>
@@ -205,8 +205,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.dashboard-input {
+/* No scoped styles needed as we use utility classes for maximum performance and build stability */
-  @apply w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold;
-  @apply transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700;
-}
 </style>

extension/src/options/Strategies.vue

@@ -122,17 +122,17 @@ onMounted(() => {
           <div class="grid grid-cols-2 gap-8">
             <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="dashboard-input" placeholder="e.g. vc_advisor" />
+              <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" />
             </div>
             <div class="space-y-3">
               <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em] ml-1">Display Label</label>
-              <input v-model="form.label" required class="dashboard-input" placeholder="e.g. VC Advisor" />
+              <input v-model="form.label" 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" />
             </div>
           </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="dashboard-input resize-none py-4" placeholder="Be authoritative yet encouraging. Focus on market metrics. Avoid safe 'that's great' comments."></textarea>
+            <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>
           </div>
 
           <div class="flex justify-end">
@@ -177,8 +177,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.dashboard-input {
+/* No scoped styles needed as we use utility classes for maximum performance and build stability */
-  @apply w-full bg-black/40 border border-white/5 rounded-2xl px-5 py-3.5 text-sm font-semibold;
-  @apply transition-apple focus:outline-none focus:ring-4 focus:ring-rose-500/10 focus:border-rose-500/40 placeholder:text-zinc-700;
-}
 </style>