From 79a135995b23e0c2473d92f6761016a03cc2f4c7 Mon Sep 17 00:00:00 2001
From: saas-frontend-agent <agent@coze>
Date: Fri, 11 Sep 2026 18:07:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=88=90=E5=93=81=E5=BA=93=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E6=97=A0=E9=99=90=E6=BB=9A=E5=8A=A8=20+=20AI=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E4=BA=BA=E6=B8=B2=E6=9F=93=E4=BC=A0=20project=5Fid=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=85=A5=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../products/hooks/useProductList/index.ts    | 42 +++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/pages/products/hooks/useProductList/index.ts b/apps/web/src/pages/products/hooks/useProductList/index.ts
index 1452a46e5..6729bca21 100644
--- a/apps/web/src/pages/products/hooks/useProductList/index.ts
+++ b/apps/web/src/pages/products/hooks/useProductList/index.ts
@@ -1,28 +1,53 @@
 import { useMemo } from "react"
-import { useQuery } from "@tanstack/react-query"
+import { useInfiniteQuery } from "@tanstack/react-query"
 import { getProducts, type ProductItem as ApiProductItem } from "@/api/products"
 import { mapApiProduct } from "../../utils"
+import type { ProductItem } from "../../types"
 import { useProductFiltering } from "./useProductFiltering"
 import { useBatchSelection } from "./useBatchSelection"
 
 export type { Filters } from "./useProductFiltering"
 
+const PAGE_SIZE = 20
+
 export const useProductList = () => {
-  /* ── 获取成品列表 ── */
+  /* ── 无限滚动获取成品列表（每页 20 条） ── */
   const {
-    data: apiProducts = [],
+    data,
     isLoading,
+    isFetchingNextPage,
     isError,
     error,
+    hasNextPage,
+    fetchNextPage,
     refetch,
-  } = useQuery<ApiProductItem[], Error>({
+  } = useInfiniteQuery<
+    {
+      items: ApiProductItem[]
+      total: number
+      page: number
+      page_size: number
+    },
+    Error
+  >({
     queryKey: ["products"],
-    queryFn: () => getProducts(),
+    queryFn: async ({ pageParam = 1 }) =>
+      getProducts({ page: pageParam as number, page_size: PAGE_SIZE }),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      const loadedCount = lastPage.page * lastPage.page_size
+      return loadedCount < lastPage.total ? lastPage.page + 1 : undefined
+    },
     staleTime: 30_000,
   })
 
-  // 映射为前端类型，按创建时间倒序排列，防御非数组返回
-  const products = useMemo(
+  // 将所有页拼接为一维数组，再做前端映射+排序
+  const apiProducts = useMemo<ApiProductItem[]>(() => {
+    if (!data?.pages) return []
+    return data.pages.flatMap((p) => p.items)
+  }, [data])
+
+  const products = useMemo<ProductItem[]>(
     () =>
       (Array.isArray(apiProducts) ? apiProducts : []).map(mapApiProduct).sort((a, b) => {
         if (!a.date || a.date === "—") return 1
@@ -65,8 +90,11 @@ export const useProductList = () => {
     products,
     filteredProducts,
     isLoading,
+    isFetchingNextPage,
     isError,
     error,
+    hasNextPage,
+    fetchNextPage,
     refetch,
     // 筛选
     searchText,