feat: 部署初版测试

2026-03-02 21:25:21 +08:00
parent db3abb3174
commit 8cf6cb944b
97 changed files with 10250 additions and 209 deletions
--- a/extension/src/options/Options.vue
+++ b/extension/src/options/Options.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import Auth from './Auth.vue'
+import Profile from './Profile.vue'
+import Strategies from './Strategies.vue'
+import Competitors from './Competitors.vue'
+import HotTweets from './HotTweets.vue'
+
+const token = ref('')
+const isLoading = ref(true)
+const activeTab = ref('profile') // 'profile', 'strategies', 'competitors'
+
+onMounted(() => {
+  chrome.storage.local.get(['jwt_token'], (res) => {
+    if (res.jwt_token) {
+      token.value = String(res.jwt_token)
+    }
+    isLoading.value = false
+  })
+})
+
+const onAuthenticated = (newToken: string) => {
+  token.value = newToken
+}
+
+const logout = () => {
+  chrome.storage.local.remove(['jwt_token', 'user_id'], () => {
+    token.value = ''
+  })
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex flex-col items-center pt-20 pb-10 font-sans">
+    
+    <div class="w-full max-w-4xl px-6">
+      <div class="mb-10 flex justify-between items-end border-b border-white/10 pb-4">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight bg-gradient-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent">
+            InsightReply Dashboard
+          </h1>
+          <p class="text-zinc-400 mt-2">Configure your custom AI strategies, product context, and monitor radar.</p>
+        </div>
+        <div v-if="token" class="flex items-center gap-4">
+          <span class="text-sm text-green-400 flex items-center gap-2">
+            <div class="w-2 h-2 rounded-full bg-green-400"></div> Connected
+          </span>
+          <button @click="logout" class="text-sm text-zinc-500 hover:text-white transition-colors">Sign out</button>
+        </div>
+      </div>
+
+      <div v-if="isLoading" class="flex justify-center p-20">
+        <div class="w-8 h-8 border-4 border-white/20 border-t-brand-primary rounded-full animate-spin"></div>
+      </div>
+
+      <div v-else-if="!token" class="bg-[#171717] border border-white/10 rounded-2xl p-8 max-w-md mx-auto shadow-2xl mt-10">
+        <h2 class="text-xl font-semibold mb-2 text-center">Authentication Required</h2>
+        <p class="text-zinc-400 text-sm mb-6 text-center">Log in to link your InsightReply account.</p>
+        
+        <Auth @authenticated="onAuthenticated" />
+      </div>
+
+      <div v-else class="flex gap-8 items-start">
+        
+        <!-- Sidebar Menu -->
+        <div class="w-64 flex flex-col gap-2 shrink-0">
+          <button 
+            @click="activeTab = 'profile'"
+            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors', activeTab === 'profile' ? 'bg-white/10 text-white' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
+          >
+            Product Profile
+          </button>
+          <button 
+            @click="activeTab = 'strategies'"
+            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors', activeTab === 'strategies' ? 'bg-white/10 text-white' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
+          >
+            Custom Strategies
+          </button>
+          <button 
+            @click="activeTab = 'competitors'"
+            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors', activeTab === 'competitors' ? 'bg-white/10 text-white' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
+          >
+            Competitor Radar
+          </button>
+          
+          <div class="h-px bg-white/10 my-2"></div>
+          
+          <button 
+            @click="activeTab = 'hottweets'"
+            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors flex items-center justify-between', activeTab === 'hottweets' ? 'bg-orange-500/20 text-orange-400 border border-orange-500/30' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
+          >
+            <span>🔥 Opportunities</span>
+            <span v-if="activeTab !== 'hottweets'" class="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></span>
+          </button>
+        </div>
+
+        <!-- Main Content Area -->
+        <div class="flex-1 bg-[#171717] border border-white/10 rounded-2xl p-8 shadow-xl min-h-[500px]">
+          <div v-show="activeTab === 'profile'" class="animate-in fade-in duration-300">
+            <h2 class="text-lg font-semibold mb-6 border-b border-white/10 pb-4">Product Profile Configuration</h2>
+            <Profile :token="token" />
+          </div>
+
+          <div v-show="activeTab === 'strategies'" class="animate-in fade-in duration-300">
+            <h2 class="text-lg font-semibold mb-6 border-b border-white/10 pb-4">Custom Generation Strategies</h2>
+            <Strategies :token="token" />
+          </div>
+
+          <div v-show="activeTab === 'competitors'" class="animate-in fade-in duration-300">
+            <h2 class="text-lg font-semibold mb-6 border-b border-white/10 pb-4">Competitor Monitoring</h2>
+            <Competitors :token="token" />
+          </div>
+          
+          <div v-show="activeTab === 'hottweets'" class="animate-in fade-in duration-300 h-full">
+            <HotTweets :token="token" />
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</template>