From 2e5f50251d63718daea9485e30777326cfb35f73 Mon Sep 17 00:00:00 2001
From: Zain <lhlyzh@outlook.com>
Date: Tue, 25 Nov 2025 11:59:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将搜索参数更新与查询生成逻辑分离
使用useEffect自动触发查询生成
统一处理搜索参数变更的回调函数
---
 src/floating-panel/App.tsx | 10 ++++++++--
 src/popup/App.tsx          | 40 ++++++++++++++++++++------------------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/floating-panel/App.tsx b/src/floating-panel/App.tsx
index 89bf39c..235d8bf 100644
--- a/src/floating-panel/App.tsx
+++ b/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}
diff --git a/src/popup/App.tsx b/src/popup/App.tsx
index 2cb83f3..8b97eb6 100644
--- a/src/popup/App.tsx
+++ b/src/popup/App.tsx
@@ -200,15 +200,14 @@ function App() {
         updates.toUsers = [searchParams.toUser]
       }
 
-      if (Object.keys(updates).length > 0) {
-        const newParams = { ...searchParams, ...updates }
-        setSearchParams(newParams)
-        void generateQuery(newParams)
-        console.log('[Migration] 已自动迁移旧字段到新数组:', updates)
-      }
+    if (Object.keys(updates).length > 0) {
+      const newParams = { ...searchParams, ...updates }
+      setSearchParams(newParams)
+      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, generateQuery])
+  }, [searchParams])
 
   // 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)}
         />