refactor(搜索组件): 优化搜索参数处理逻辑

将搜索参数更新与查询生成逻辑分离
使用useEffect自动触发查询生成
统一处理搜索参数变更的回调函数

src/floating-panel/App.tsx

@@ -53,6 +53,9 @@ function FloatingPanelContent() {
   const [validation, setValidation] = useState<ValidationResult | null>(null)
   // 浮动面板默认展开高级选项(用户打开面板就是为了构建高级搜索语法)
   const [showAdvanced, setShowAdvanced] = useState(true)
+  const handleSearchParamsChange = useCallback((params: SearchParams) => {
+    setSearchParams(params)
+  }, [])
 
   // 🔥 监听来自 content script 的消息
   useEffect(() => {
@@ -110,7 +113,6 @@ function FloatingPanelContent() {
       // 安全提取和解码查询字符串,避免在搜索框中显示 %20, %3A 等编码
       const decodedQuery = extractAndDecodeQuery(query)
       setGeneratedQuery(decodedQuery)
-      setSearchParams(params)
     } catch (error) {
       console.error('[FloatingPanel] Failed to generate query:', error)
       setValidation({
@@ -121,6 +123,10 @@ function FloatingPanelContent() {
     }
   }, [t])
 
+  useEffect(() => {
+    void generateQuery(searchParams)
+  }, [searchParams, generateQuery])
+
   // 通用的应用逻辑,接受autoSearch参数
   const applyQuery = useCallback((autoSearch: boolean) => {
     if (!validation?.isValid) {
@@ -201,7 +207,7 @@ function FloatingPanelContent() {
         {/* 搜索表单 - 针对 800px 优化，隐藏引擎选择器（当前页面已确定搜索引擎） */}
         <SearchForm
           searchParams={searchParams}
-          onSearchParamsChange={generateQuery}
+          onSearchParamsChange={handleSearchParamsChange}
           showAdvanced={showAdvanced}
           onToggleAdvanced={setShowAdvanced}
           hideEngineSelector={true}

src/popup/App.tsx

@@ -200,15 +200,14 @@ function App() {
         updates.toUsers = [searchParams.toUser]
       }
 
-      if (Object.keys(updates).length > 0) {
+    if (Object.keys(updates).length > 0) {
-        const newParams = { ...searchParams, ...updates }
+      const newParams = { ...searchParams, ...updates }
-        setSearchParams(newParams)
+      setSearchParams(newParams)
-        void generateQuery(newParams)
+      console.log('[Migration] 已自动迁移旧字段到新数组:', updates)
-        console.log('[Migration] 已自动迁移旧字段到新数组:', updates)
-      }
     }
+  }
 
-    migrateOldFieldsToNew()
+  migrateOldFieldsToNew()
   }, []) // 空依赖,只在挂载时执行一次
 
   // 生成搜索查询 - 使用 useCallback
@@ -232,7 +231,6 @@ function App() {
       const decodedQuery = extractAndDecodeQuery(query)
       setGeneratedQuery(decodedQuery)
       setSearchUrl(query)
-      setSearchParams(params)
     } catch (error) {
       console.error('生成搜索查询失败:', error)
       setValidation({
@@ -243,6 +241,10 @@ function App() {
     }
   }, [t])
 
+  useEffect(() => {
+    void generateQuery(searchParams)
+  }, [searchParams, generateQuery])
+
   // 执行搜索 - 使用 useCallback
   const executeSearch = useCallback(() => {
     if (!searchUrl || !validation?.isValid) return
@@ -384,7 +386,6 @@ function App() {
     if (targetEngine) {
       const newParams = { ...searchParams, engine: targetEngine }
       setSearchParams(newParams)
-      void generateQuery(newParams)
       console.log(`[App] 切换到搜索引擎: ${targetEngine}`)
     } else {
       console.warn(`[App] 无法切换引擎,使用默认引擎`)
@@ -431,6 +432,10 @@ function App() {
     console.log('表单已清空')
   }, [settings])
 
+  const handleSearchParamsChange = useCallback((params: SearchParams) => {
+    setSearchParams(params)
+  }, [])
+
   // 从历史记录中恢复搜索 - 使用 useCallback
   const restoreFromHistory = useCallback((historyItem: SearchHistoryType) => {
     const restoredParams: SearchParams = {
@@ -465,8 +470,7 @@ function App() {
       dateRange: historyItem.syntax.dateRange
     }
     setSearchParams(restoredParams)
-    void generateQuery(restoredParams)
+  }, [])
-  }, [generateQuery])
 
   // 清除历史记录 - 使用 useCallback
   const clearHistory = useCallback(() => {
@@ -478,14 +482,12 @@ function App() {
   const handleApplySuggestion = useCallback((params: Partial<SearchParams>) => {
     const newParams = { ...searchParams, ...params }
     setSearchParams(newParams)
-    void generateQuery(newParams)
+  }, [searchParams])
-  }, [searchParams, generateQuery])
 
   // v1.6.0: 应用模板 - 使用 useCallback
   const handleApplyTemplate = useCallback((params: SearchParams) => {
     setSearchParams(params)
-    void generateQuery(params)
+  }, [])
-  }, [generateQuery])
 
   // v1.6.0: 初始化服务（只在组件挂载时初始化一次）
   // 🔥 P0修复：React Strict Mode 兼容性说明
@@ -592,7 +594,7 @@ function App() {
       <TranslationProvider language={settings?.language ?? 'zh-CN'}>
         <PopupContent
           searchParams={searchParams}
-          generateQuery={generateQuery}
+          onSearchParamsChange={handleSearchParamsChange}
           validation={validation}
           generatedQuery={generatedQuery}
           executeSearch={executeSearch}
@@ -621,7 +623,7 @@ export default App
 
 interface PopupContentProps {
   searchParams: SearchParams
-  generateQuery: (params: SearchParams) => void
+  onSearchParamsChange: (params: SearchParams) => void
   validation: ValidationResult | null
   generatedQuery: string
   executeSearch: () => void
@@ -646,7 +648,7 @@ interface PopupContentProps {
 
 function PopupContent({
   searchParams,
-  generateQuery,
+  onSearchParamsChange,
   validation,
   generatedQuery,
   executeSearch,
@@ -699,7 +701,7 @@ function PopupContent({
         {/* 搜索表单 */}
         <SearchForm
           searchParams={searchParams}
-          onSearchParamsChange={generateQuery}
+          onSearchParamsChange={onSearchParamsChange}
           showAdvanced={showAdvanced}
           onToggleAdvanced={(show) => setShowAdvanced(show)}
         />