pansou增加重试按钮

src/components/PansouSearch.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any,no-console */
 'use client';
 
-import { AlertCircle, Copy, ExternalLink, Loader2 } from 'lucide-react';
+import { AlertCircle, Copy, ExternalLink, Loader2, RefreshCw } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
 import { PansouLink, PansouSearchResult } from '@/lib/pansou.client';
 
@@ -57,18 +57,13 @@ export default function PansouSearch({
   const [copiedUrl, setCopiedUrl] = useState<string | null>(null);
   const [selectedType, setSelectedType] = useState<string>('all'); // 'all' 表示显示全部
 
-  useEffect(() => {
+  // 提取搜索函数，以便在重试时调用
-    // triggerSearch 变化时触发搜索（无论是 true 还是 false）
+  const searchPansou = useCallback(async () => {
-    if (triggerSearch === undefined) {
-      return;
-    }
-
     const currentKeyword = keyword.trim();
     if (!currentKeyword) {
       return;
     }
 
-    const searchPansou = async () => {
     setLoading(true);
     setError(null);
     setResults(null);
@@ -98,10 +93,16 @@ export default function PansouSearch({
     } finally {
       setLoading(false);
     }
-    };
+  }, [keyword, onError]);
+
+  useEffect(() => {
+    // triggerSearch 变化时触发搜索（无论是 true 还是 false）
+    if (triggerSearch === undefined) {
+      return;
+    }
 
     searchPansou();
-  }, [triggerSearch, onError]); // 移除 keyword 依赖，只依赖 triggerSearch
+  }, [triggerSearch, searchPansou]); // 依赖 triggerSearch 和 searchPansou
 
   const handleCopy = async (text: string, url: string) => {
     try {
@@ -136,6 +137,13 @@ export default function PansouSearch({
         <div className='text-center'>
           <AlertCircle className='mx-auto h-12 w-12 text-red-500 dark:text-red-400' />
           <p className='mt-4 text-sm text-red-600 dark:text-red-400'>{error}</p>
+          <button
+            onClick={searchPansou}
+            className='mt-4 inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors'
+          >
+            <RefreshCw className='h-4 w-4' />
+            重试
+          </button>
         </div>
       </div>
     );