feat: 扩展弹框配置重构

extension/src/content/Sidebar.vue

@@ -1,20 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, inject, computed, type Ref } from 'vue'
 
-const props = defineProps<{
-  tweetData?: {
-    id: string;
-    author: string;
-    content: string;
-    stats: {
-      replies: string;
-      retweets: string;
-      likes: string;
-    }
-  }
-}>()
+// Injected reactive refs from sidebar-mount.ts
+const currentTweetData = inject<Ref<any>>('currentTweetData', ref(null))
+const isVisible = inject<Ref<boolean>>('sidebarVisible', ref(false))
+
+// Computed getter for template convenience
+const tweetData = computed(() => currentTweetData.value)
 
-const isVisible = ref(false) // Start hidden, wait for trigger
 const selectedStrategy = ref('Insightful')
 const generatedReplies = ref<Array<{strategy: string, content: string}>>([])
 const isGenerating = ref(false)
@@ -29,30 +22,21 @@ const defaultStrategies = [
 
 const strategies = ref([...defaultStrategies])
 
-onMounted(() => {
-  // Listen for toggle messages directly in the component
-  chrome.runtime.onMessage.addListener((message) => {
-    if (message.type === 'TOGGLE_SIDEBAR') {
-      isVisible.value = !isVisible.value
-    } else if (message.type === 'SHOW_INSIGHT') {
-      isVisible.value = true
-    }
-  })
-
-  chrome.runtime.sendMessage({ type: 'FETCH_CUSTOM_STRATEGIES' }, (response) => {
-    if (response && response.success && response.data) {
-      const customStrategies = response.data.map((s: any) => ({
-        id: s.strategy_key,
-        label: s.label,
-        icon: '<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"/>'
-      }))
-      strategies.value = [...defaultStrategies, ...customStrategies]
-    }
-  })
+// Fetch custom strategies on mount
+chrome.runtime.sendMessage({ type: 'FETCH_CUSTOM_STRATEGIES' }, (response) => {
+  if (response && response.success && response.data) {
+    const customStrategies = response.data.map((s: any) => ({
+      id: s.strategy_key,
+      label: s.label,
+      icon: '<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"/>'
+    }))
+    strategies.value = [...defaultStrategies, ...customStrategies]
+  }
 })
 
+
 const generate = () => {
-  if (!props.tweetData) return
+  if (!tweetData.value) return
   
   isGenerating.value = true
   generatedReplies.value = []
@@ -68,7 +52,7 @@ const generate = () => {
     chrome.runtime.sendMessage({
       type: 'GENERATE_REPLY',
       payload: {
-        tweetContent: props.tweetData!.content,
+        tweetContent: tweetData.value!.content,
         strategy: selectedStrategy.value,
         identity: finalIdentity
       }
@@ -93,7 +77,7 @@ const copyToClipboard = async (reply: any) => {
   showProfileTip.value = true
   setTimeout(() => { showProfileTip.value = false }, 7000)
 
-  if (!props.tweetData || !props.tweetData.id) return;
+  if (!tweetData.value || !tweetData.value.id) return;
 
   chrome.storage.local.get(['jwt_token'], async (result) => {
     if (result.jwt_token) {
@@ -107,7 +91,7 @@ const copyToClipboard = async (reply: any) => {
             'Authorization': `Bearer ${token}`
           },
           body: JSON.stringify({
-            tweet_id: props.tweetData?.id,
+            tweet_id: tweetData.value?.id,
             strategy_type: reply.strategy || 'General',
             content: reply.content,
             language: 'en'

extension/src/content/sidebar-mount.ts

@@ -1,13 +1,19 @@
-import { createApp } from 'vue'
+import { createApp, ref } from 'vue'
 import Sidebar from './Sidebar.vue'
-import '../assets/tailwind.css' // We might need to handle this specially for Shadow DOM
 
 const MOUNT_ID = 'insight-reply-sidebar-root'
 
-function initSidebar(tweetData?: any) {
-    let host = document.getElementById(MOUNT_ID)
+// Shared reactive tweet data that the Sidebar component will receive
+const currentTweetData = ref<any>(null)
+const sidebarVisible = ref(false)
 
-    if (host) return;
+let isMounted = false
+
+function initSidebar() {
+    if (isMounted) return
+
+    let host = document.getElementById(MOUNT_ID)
+    if (host) return
 
     // 1. Create Host Element
     host = document.createElement('div')
@@ -48,17 +54,42 @@ function initSidebar(tweetData?: any) {
     }
     injectStyles()
 
-    // 5. Create Vue App
-    const app = createApp(Sidebar, { tweetData })
+    // 5. Create Vue App with reactive provide
+    const app = createApp(Sidebar)
+    app.provide('currentTweetData', currentTweetData)
+    app.provide('sidebarVisible', sidebarVisible)
     app.mount(container)
+
+    isMounted = true
+    console.log('[InsightReply] Sidebar mounted successfully')
 }
 
-// Ensure it mounts on load if needed, but primarily triggered by messages
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-    if (message.type === 'SHOW_INSIGHT' || message.type === 'TOGGLE_SIDEBAR') {
-        initSidebar(message.payload);
-        // The component itself listens for TOGGLE_SIDEBAR to show/hide
-        sendResponse({ received: true });
+function showSidebar(tweetData?: any) {
+    initSidebar()
+
+    if (tweetData) {
+        currentTweetData.value = tweetData
+        console.log('[InsightReply] Tweet data updated:', tweetData.content?.substring(0, 60))
     }
-    return true;
-});
+
+    sidebarVisible.value = true
+}
+
+function toggleSidebar() {
+    initSidebar()
+    sidebarVisible.value = !sidebarVisible.value
+}
+
+// Listen for messages from background script
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+    console.log('[InsightReply SidebarMount] Received message:', message.type)
+
+    if (message.type === 'SHOW_INSIGHT') {
+        showSidebar(message.payload)
+        sendResponse({ received: true })
+    } else if (message.type === 'TOGGLE_SIDEBAR') {
+        toggleSidebar()
+        sendResponse({ received: true })
+    }
+    return true
+})

extension/src/options/HotTweets.vue

@@ -39,6 +39,11 @@ const loadHotTweets = async () => {
       }
     })
     
+    if (response.status === 429) {
+      error.value = '请求频率达到上限，请稍后再试。Free 用户每日限额 10 次 API 调用。'
+      return
+    }
+
     if (!response.ok) {
         throw new Error(`Opportunity discovery failed (${response.status})`)
     }
@@ -46,7 +51,7 @@ const loadHotTweets = async () => {
     const data = await response.json()
     tweets.value = data || []
   } catch (err: any) {
-    error.value = err.message || 'Quantum network sync error.'
+    error.value = err.message || 'Network connection error.'
   } finally {
     loading.value = false
   }