feat: 扩展弹框配置重构

2026-03-03 16:04:03 +08:00 · 2026-03-03 15:47:23 +08:00 · 2026-03-03 15:32:33 +08:00
7 changed files with 161 additions and 78 deletions
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -42,5 +42,17 @@
            },
            "description": "Toggle InsightReply Sidebar"
        }
+    },
+    "web_accessible_resources": [
+        {
+            "resources": [
+                "src/assets/*",
+                "assets/*"
+            ],
+            "matches": [
+                "https://twitter.com/*",
+                "https://x.com/*"
+            ]
        }
+    ]
 }
--- a/extension/src/content/Sidebar.vue
+++ b/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,17 +22,8 @@ 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) => {
+// 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,
@@ -48,11 +32,11 @@ onMounted(() => {
    }))
    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'
@@ -123,28 +107,28 @@ const copyToClipboard = async (reply: any) => {

 <template>
  <transition
-    enter-active-class="transition duration-500 ease-out transform"
-    enter-from-class="translate-x-full opacity-0 scale-95"
-    enter-to-class="translate-x-0 opacity-100 scale-100"
-    leave-active-class="transition duration-400 ease-in transform"
-    leave-from-class="translate-x-0 opacity-100 scale-100"
-    leave-to-class="translate-x-full opacity-0 scale-95"
+    enter-active-class="transition-transform duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+    enter-from-class="translate-x-full"
+    enter-to-class="translate-x-0"
+    leave-active-class="transition-transform duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+    leave-from-class="translate-x-0"
+    leave-to-class="translate-x-full"
  >
-    <div v-if="isVisible" class="fixed right-6 top-1/2 -translate-y-1/2 w-[380px] max-h-[90vh] flex flex-col glass-card rounded-[24px] shadow-[0_32px_64px_rgba(0,0,0,0.5)] text-[#f8fafc] font-sans z-[2147483647] overflow-hidden border border-white/5 selection:bg-rose-500/30">
+    <div v-if="isVisible" class="fixed right-0 top-0 bottom-0 w-[400px] flex flex-col bg-zinc-950/90 backdrop-blur-[40px] border-l border-white/10 shadow-[-10px_0_40px_rgba(0,0,0,0.5)] text-[#f8fafc] font-sans z-[2147483647] overflow-hidden selection:bg-rose-500/30">
      
      <!-- Premium Header -->
-      <div class="px-6 py-5 flex justify-between items-center bg-white/[0.02] border-b border-white/5">
+      <div class="px-6 py-5 flex justify-between items-center bg-white/[0.02] border-b border-white/5 shrink-0">
        <div class="flex items-center gap-3">
-          <div class="p-2 rounded-lg bg-rose-500/10 border border-rose-500/20">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-rose-500"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
+          <div class="p-2 rounded-xl bg-gradient-to-br from-rose-500 to-rose-600 shadow-lg shadow-rose-900/20">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-white"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
          </div>
          <div>
-            <span class="text-sm font-bold tracking-tight block">InsightReply</span>
-            <span class="text-[9px] text-zinc-500 uppercase tracking-[0.2em] font-bold">Spatial Copilot</span>
+            <span class="text-[15px] font-black tracking-tight block text-white drop-shadow-sm">InsightReply</span>
+            <span class="text-[9px] text-zinc-400 uppercase tracking-[0.2em] font-bold">Spatial Copilot</span>
          </div>
        </div>
-        <button @click="isVisible = false" class="p-2 rounded-full hover:bg-white/10 transition-apple group">
-          <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="text-zinc-500 group-hover:text-white transition-apple"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        <button @click="isVisible = false" class="p-2.5 rounded-full bg-white/5 hover:bg-rose-500/20 hover:text-rose-400 border border-white/5 transition-apple group">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-zinc-400 group-hover:text-rose-400 transition-apple"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
      </div>

--- a/extension/src/content/sidebar-mount.ts
+++ b/extension/src/content/sidebar-mount.ts
@@ -1,13 +1,22 @@
-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
+let isMounting = false
+
+async function initSidebar() {
+    if (isMounted || isMounting) return
+
+    let host = document.getElementById(MOUNT_ID)
+    if (host) return
+
+    isMounting = true

    // 1. Create Host Element
    host = document.createElement('div')
@@ -39,26 +48,85 @@ function initSidebar(tweetData?: any) {
    `
    shadowRoot.appendChild(container)

-    // 4. Inject Styles
-    const injectStyles = () => {
-        const styles = document.querySelectorAll('style, link[rel="stylesheet"]')
-        styles.forEach(style => {
-            shadowRoot.appendChild(style.cloneNode(true))
-        })
+    // 4. Inject Styles (Bypassing X.com CSP via fetch)
+    const injectStyles = async () => {
+        try {
+            // Check for Vite dev mode styles first
+            const devStyles = document.querySelectorAll('style[data-vite-dev-id]')
+            if (devStyles.length > 0) {
+                devStyles.forEach(style => shadowRoot.appendChild(style.cloneNode(true)))
+                console.log('[InsightReply] Injected dev styles into shadow DOM')
+                return
            }
-    injectStyles()

-    // 5. Create Vue App
-    const app = createApp(Sidebar, { tweetData })
+            // Production mode: fetch the CSS file directly to bypass rigid CSP
+            // CRXJS usually puts built CSS in assets/index-[hash].css
+            const cssUrl = chrome.runtime.getURL('assets/index.css')
+            // In Vite dev mode the raw file might be available
+            const devUrl = chrome.runtime.getURL('src/assets/tailwind.css')
+
+            const urlToFetch = chrome.runtime.id.includes('extension') ? cssUrl : devUrl
+
+            const response = await fetch(urlToFetch)
+            if (response.ok) {
+                const cssText = await response.text()
+                const styleEl = document.createElement('style')
+                styleEl.textContent = cssText
+                shadowRoot.appendChild(styleEl)
+                console.log('[InsightReply] Successfully injected fetched CSS into shadow DOM')
+            } else {
+                console.warn('[InsightReply] Failed to fetch CSS file directly, falling back to basic link tag')
+                const linkEl = document.createElement('link')
+                linkEl.rel = 'stylesheet'
+                linkEl.href = chrome.runtime.getURL('src/assets/tailwind.css')
+                shadowRoot.appendChild(linkEl)
+            }
+        } catch (err) {
+            console.error('[InsightReply] Error injecting styles:', err)
+        }
+    }
+
+    // Inject and wait
+    await injectStyles()
+
+    // 5. Create Vue App with reactive provide
+    const app = createApp(Sidebar)
+
+    isMounting = false
+    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
+})
--- a/extension/src/options/HotTweets.vue
+++ b/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
  }
--- a/server/internal/handler/ai_handler.go
+++ b/server/internal/handler/ai_handler.go
@@ -2,6 +2,7 @@ package handler

 import (
 	"encoding/json"
+	"log"
 	"net/http"
 	"strings"

@@ -53,6 +54,7 @@ func (h *AIHandler) Generate(w http.ResponseWriter, r *http.Request) {

 	ctx := r.Context()
 	userID := ctx.Value("userID").(string)
+	log.Printf("[AIHandler] Generate request from userID=%s strategy=%q provider=%q model=%q", userID, body.Strategy, body.Provider, body.Model)

 	// Fetch Product Profile Context
 	var productContext string
@@ -79,9 +81,11 @@ func (h *AIHandler) Generate(w http.ResponseWriter, r *http.Request) {

 	replyString, err := h.svc.GenerateReply(ctx, body.TweetContent, productContext, body.Identity, body.Provider, body.Model)
 	if err != nil {
+		log.Printf("[AIHandler] ERROR GenerateReply for userID=%s: %v", userID, err)
 		SendError(w, http.StatusBadGateway, 5002, "Failed to generate AI reply: "+err.Error())
 		return
 	}
+	log.Printf("[AIHandler] GenerateReply success for userID=%s, reply length=%d", userID, len(replyString))

 	// Clean up potential markdown wrappers from LLM output
 	cleanReply := strings.TrimSpace(replyString)
--- a/server/internal/handler/tweet_handler.go
+++ b/server/internal/handler/tweet_handler.go
@@ -2,6 +2,7 @@ package handler

 import (
 	"encoding/json"
+	"log"
 	"net/http"

 	"github.com/zs/InsightReply/internal/repository"
@@ -17,15 +18,18 @@ func NewTweetHandler(repo *repository.TweetRepository) *TweetHandler {

 // GetHotTweets returns the top heating tweets spanning across all tracking targets
 func (h *TweetHandler) GetHotTweets(w http.ResponseWriter, r *http.Request) {
-	// Standardize to take the top 50 hottest tweets that haven't been manually marked as processed
+	log.Printf("[TweetHandler] GetHotTweets called from %s", r.RemoteAddr)
+
 	tweets, err := h.repo.GetTopHeatingTweets(50)
 	if err != nil {
+		log.Printf("[TweetHandler] ERROR GetTopHeatingTweets: %v", err)
 		w.Header().Set("Content-Type", "application/json")
 		w.WriteHeader(http.StatusInternalServerError)
 		json.NewEncoder(w).Encode(map[string]interface{}{"error": "failed to retrieve hot tweets"})
 		return
 	}

+	log.Printf("[TweetHandler] GetHotTweets returning %d tweets", len(tweets))
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(tweets)
 }
@@ -34,15 +38,18 @@ func (h *TweetHandler) GetHotTweets(w http.ResponseWriter, r *http.Request) {
 func (h *TweetHandler) GetSearchTweets(w http.ResponseWriter, r *http.Request) {
 	keyword := r.URL.Query().Get("keyword")
 	handle := r.URL.Query().Get("handle")
+	log.Printf("[TweetHandler] SearchTweets called: keyword=%q handle=%q", keyword, handle)

 	tweets, err := h.repo.SearchTweets(keyword, handle, 50)
 	if err != nil {
+		log.Printf("[TweetHandler] ERROR SearchTweets: %v", err)
 		w.Header().Set("Content-Type", "application/json")
 		w.WriteHeader(http.StatusInternalServerError)
 		json.NewEncoder(w).Encode(map[string]interface{}{"error": "failed to search tweets"})
 		return
 	}

+	log.Printf("[TweetHandler] SearchTweets returning %d tweets", len(tweets))
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(tweets)
 }
--- a/server/internal/middleware/ratelimit.go
+++ b/server/internal/middleware/ratelimit.go
@@ -1,6 +1,7 @@
 package middleware

 import (
+	"log"
 	"net/http"
 	"sync"
 	"time"
@@ -49,6 +50,7 @@ func RateLimit(db *gorm.DB) func(http.Handler) http.Handler {
 				// For now, fallback to generic tight limit for anonymous usage
 				ipLimiter := getLimiter(r.RemoteAddr, "Free")
 				if !ipLimiter.Allow() {
+					log.Printf("[RateLimit] 429 for anonymous IP=%s path=%s", r.RemoteAddr, r.URL.Path)
 					http.Error(w, `{"code":429, "message":"Too Many Requests: Rate limit exceeded"}`, http.StatusTooManyRequests)
 					return
 				}
@@ -72,6 +74,7 @@ func RateLimit(db *gorm.DB) func(http.Handler) http.Handler {

 			limiter := getLimiter(userID, tier)
 			if !limiter.Allow() {
+				log.Printf("[RateLimit] 429 for userID=%s tier=%s path=%s", userID, tier, r.URL.Path)
 				http.Error(w, `{"code":429, "message":"Too Many Requests: Daily quota or rate limit exceeded"}`, http.StatusTooManyRequests)
 				return
 			}
Author	SHA1	Message	Date
zs	4b7f308528	feat: 扩展弹框配置重构 All checks were successful Extension Build & Release / build (push) Successful in 1m18s Details	2026-03-03 16:04:03 +08:00
zs	95ee3fa61d	feat: 扩展弹框配置重构 All checks were successful Extension Build & Release / build (push) Successful in 48s Details	2026-03-03 15:47:23 +08:00
zs	d82d59cbe4	feat: 扩展弹框配置重构 All checks were successful Extension Build & Release / build (push) Successful in 1m32s Details Backend Deploy (Go + Docker) / deploy (push) Successful in 1m51s Details	2026-03-03 15:32:33 +08:00