feat: 🎸 封装了一个滚动加载组件

src/pages/ProjectLibraryPage/index.css

@@ -13,6 +13,8 @@
     box-sizing: border-box;
     padding: 20px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     .user-portfolio-search-area {
       width: 100%;
@@ -31,9 +33,7 @@
         }
       }
     }
-
     .user-portfolio-list {
-      width: 100%;
       overflow-y: auto;
       box-sizing: border-box;
       display: flex;
@@ -63,7 +63,8 @@
         align-items: flex-start;
         flex-direction: column;
 
-        > span {
+        .user-portfolio-item-title {
+          width: 100%;
           border: 1px solid #2c7aff;
           background-color: #e8f3ff;
           height: 20px;
@@ -73,7 +74,11 @@
           color: #2c7aff;
           font-size: 12px;
           font-weight: 600;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
+
         > div {
           width: 100%;
           height: 24px;

src/pages/ProjectLibraryPage/index.jsx

@@ -1,21 +1,29 @@
-import { useState } from "react";
-import { Input } from "@arco-design/web-react";
-import { mockData } from "@/data/mockData";
+import { useState, useEffect } from "react";
+import { Input, Empty } from "@arco-design/web-react";
+import InfiniteScroll from "@/components/InfiniteScroll";
 import ProjectCasesModal from "./components/ProjectCasesModal";
+import { getProjectsList } from "@/services/projectLibrary";
 
 import "./index.css";
 
 const InputSearch = Input.Search;
-const { projectLibrary } = mockData;
+const PAGE_SIZE = 10;
 
 const ProjectLibrary = () => {
   const [modalData, setModalData] = useState(undefined);
+  const [projectList, setProjectList] = useState([]);
   const [projectCasesModalVisible, setProjectCasesModalVisible] =
     useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
 
   const onSearch = (value) => {
-    console.log(value);
+    setProjectList([]);
+    setHasMore(true);
+    setPage(1);
+    fetchProjects(value, 1);
   };
+
   const handleProjectClick = (item) => {
     setModalData(item);
     setProjectCasesModalVisible(true);
@@ -26,6 +34,24 @@ const ProjectLibrary = () => {
     setModalData(undefined);
   };
 
+  const fetchProjects = async (searchValue = "", pageNum) => {
+    try {
+      // 这里使用真实API替换模拟数据
+      const response = await getProjectsList({
+        search: searchValue,
+        page: pageNum ?? page,
+        pageSize: PAGE_SIZE,
+      });
+      if (response.success) {
+        setProjectList((prevList) => [...prevList, ...response.data]);
+        setHasMore(response?.data.length === PAGE_SIZE);
+        setPage((prevPage) => prevPage + 1);
+      }
+    } catch (error) {
+      console.error("Failed to fetch projects:", error);
+    }
+  };
+
   return (
     <div className="user-portfolio-page">
       <div className="user-portfolio-wrapper">
@@ -36,17 +62,22 @@ const ProjectLibrary = () => {
             searchButton="搜索"
           />
         </div>
-        <ul className="user-portfolio-list">
-          {projectLibrary?.projects?.map((item) => (
+        <InfiniteScroll
+          loadMore={fetchProjects}
+          hasMore={hasMore}
+          threshold={100}
+          className="user-portfolio-list"
+        >
+          {projectList.map((item) => (
             <li className="user-portfolio-item" key={item.id}>
-              <span>{item.subtitle}</span>
+              <p className="user-portfolio-item-title">{item.description}</p>
               <div>
-                <p>{item.title}</p>
-                <span onClick={() => handleProjectClick(item)}>详情 &gt; </span>
+                <p>{item.name}</p>
+                <span onClick={() => handleProjectClick(item)}>详情 &gt;</span>
               </div>
             </li>
           ))}
-        </ul>
+        </InfiniteScroll>
       </div>
       <ProjectCasesModal
         data={modalData}