From eef0ddf839357a7daf9eb537862ce801f5f60703 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Tue, 8 Jul 2025 16:05:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E7=82=B9=E8=B5=9E=E8=AE=B0=E5=BD=95=E5=81=9A=E5=A5=BD=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workspace/auto-like/AutoLikeDetail.tsx    | 179 +++++++++++-------
 1 file changed, 106 insertions(+), 73 deletions(-)

diff --git a/nkebao/src/pages/workspace/auto-like/AutoLikeDetail.tsx b/nkebao/src/pages/workspace/auto-like/AutoLikeDetail.tsx
index 78da36d4..3b00da25 100644
--- a/nkebao/src/pages/workspace/auto-like/AutoLikeDetail.tsx
+++ b/nkebao/src/pages/workspace/auto-like/AutoLikeDetail.tsx
@@ -1,10 +1,9 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   ThumbsUp,
   RefreshCw,
   Search,
-  Filter,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -48,75 +47,133 @@ export default function AutoLikeDetail() {
   const [total, setTotal] = useState(0);
   const pageSize = 10;
 
-  const fetchRecords = useCallback(async (page: number = 1, keyword?: string) => {
+  useEffect(() => {
     if (!id) return;
     setRecordsLoading(true);
-    try {
-      const response = await fetchLikeRecords(id, page, pageSize, keyword);
-      setRecords(response.list || []);
-      setTotal(response.total || 0);
-      setCurrentPage(page);
-    } catch (error) {
-      console.error('获取点赞记录失败:', error);
-      toast({
-        title: '获取点赞记录失败',
-        description: '请稍后重试',
-        variant: 'destructive',
-      });
-    } finally {
-      setRecordsLoading(false);
-    }
-  }, [id, toast]);
-
-  useEffect(() => {
-    if (id) {
-      fetchRecords(1);
-    }
-  }, [id, fetchRecords]); // 加上 fetchRecords 依赖
+    fetchLikeRecords(id, 1, pageSize)
+      .then(response => {
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+        setCurrentPage(1);
+      })
+      .catch(() => {
+        toast({
+          title: '获取点赞记录失败',
+          description: '请稍后重试',
+          variant: 'destructive',
+        });
+      })
+      .finally(() => setRecordsLoading(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
 
   const handleSearch = () => {
     setCurrentPage(1);
-    fetchRecords(1, searchTerm);
+    fetchLikeRecords(id!, 1, pageSize, searchTerm)
+      .then(response => {
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+        setCurrentPage(1);
+      })
+      .catch(() => {
+        toast({
+          title: '获取点赞记录失败',
+          description: '请稍后重试',
+          variant: 'destructive',
+        });
+      });
   };
 
   const handleRefresh = () => {
-    fetchRecords(currentPage, searchTerm);
+    fetchLikeRecords(id!, currentPage, pageSize, searchTerm)
+      .then(response => {
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+      })
+      .catch(() => {
+        toast({
+          title: '获取点赞记录失败',
+          description: '请稍后重试',
+          variant: 'destructive',
+        });
+      });
   };
 
   const handlePageChange = (newPage: number) => {
-    fetchRecords(newPage, searchTerm);
+    fetchLikeRecords(id!, newPage, pageSize, searchTerm)
+      .then(response => {
+        setRecords(response.list || []);
+        setTotal(response.total || 0);
+        setCurrentPage(newPage);
+      })
+      .catch(() => {
+        toast({
+          title: '获取点赞记录失败',
+          description: '请稍后重试',
+          variant: 'destructive',
+        });
+      });
   };
 
   return (
     <Layout
       header={
+        <>
         <PageHeader
           title="点赞记录"
           defaultBackPath="/workspace/auto-like"
         />
+        <div className="flex items-center space-x-2 px-4 py-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Input 
+                placeholder="搜索好友昵称或内容" 
+                className="pl-9" 
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+              />
+            </div>
+            <Button variant="outline" size="icon" onClick={handleRefresh} disabled={recordsLoading}>
+              <RefreshCw className={`h-4 w-4 ${recordsLoading ? 'animate-spin' : ''}`} />
+            </Button>
+          </div>
+        </>
+      }
+      footer={
+        <>
+          {records.length > 0 && total > pageSize && (
+          <div className="flex justify-center py-4">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={currentPage === 1}
+              onClick={() => handlePageChange(currentPage - 1)}
+              className="mx-1"
+            >
+              上一页
+            </Button>
+            <span className="mx-4 py-2 text-sm text-gray-500">
+              第 {currentPage} 页，共 {Math.ceil(total / pageSize)} 页
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={currentPage >= Math.ceil(total / pageSize)}
+              onClick={() => handlePageChange(currentPage + 1)}
+              className="mx-1"
+            >
+              下一页
+            </Button>
+          </div>
+        )}
+        </>
+      
       }
     >
       <div className="bg-gray-50 min-h-screen pb-20">
         <div className="p-4 space-y-4">
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="relative flex-1">
-                  <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-                  <Input 
-                    placeholder="搜索好友昵称或内容" 
-                    className="pl-9" 
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-                  />
-                </div>
-                <Button variant="outline" size="icon" onClick={handleRefresh} disabled={recordsLoading}>
-                  <RefreshCw className={`h-4 w-4 ${recordsLoading ? 'animate-spin' : ''}`} />
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
+        
           {recordsLoading ? (
             <div className="space-y-4">
               {Array.from({ length: 3 }).map((_, index) => (
@@ -215,32 +272,8 @@ export default function AutoLikeDetail() {
               ))}
             </>
           )}
-          {/* 分页 */}
-          {records.length > 0 && total > pageSize && (
-            <div className="flex justify-center mt-6">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={currentPage === 1}
-                onClick={() => handlePageChange(currentPage - 1)}
-                className="mx-1"
-              >
-                上一页
-              </Button>
-              <span className="mx-4 py-2 text-sm text-gray-500">
-                第 {currentPage} 页，共 {Math.ceil(total / pageSize)} 页
-              </span>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={currentPage >= Math.ceil(total / pageSize)}
-                onClick={() => handlePageChange(currentPage + 1)}
-                className="mx-1"
-              >
-                下一页
-              </Button>
-            </div>
-          )}
+         
+          
         </div>
       </div>
     </Layout>