From 916d2102904fc6862f62a45eac0530cdcce9a6f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BA=BA=E7=BB=9D=E4=B8=8D=E4=B8=BA?=
 =?UTF-8?q?=E5=A5=B4?= <szh19970123@icloud.com>
Date: Thu, 21 Aug 2025 13:37:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85=E4=BA=86=E6=BB=9A=E5=8A=A8=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?/=E8=A7=A3=E5=86=B3=E4=BA=86=E4=B8=80=E4=B8=AA=E5=BC=95?=
 =?UTF-8?q?=E7=94=A8bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/InfiniteScroll/index.jsx | 63 +++++++++++++++++--------
 src/pages/CompanyJobsListPage/index.jsx | 35 ++++++++------
 src/pages/ProjectLibraryPage/index.jsx  |  1 -
 3 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/src/components/InfiniteScroll/index.jsx b/src/components/InfiniteScroll/index.jsx
index ac53dd3..bb6d62e 100644
--- a/src/components/InfiniteScroll/index.jsx
+++ b/src/components/InfiniteScroll/index.jsx
@@ -6,41 +6,61 @@ const InfiniteScroll = ({
   loadMore,
   hasMore,
   children,
-  threshold = 50,
+  threshold = 0.1, // 触发阈值，元素可见比例
   className = "",
   empty = false,
 }) => {
   const containerRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const observerRef = useRef(null);
   const [loading, setLoading] = useState(false);
+  const [hasInitialized, setHasInitialized] = useState(false); // 首次挂载
+
+  // 加载更多数据的处理函数
+  const handleLoadMore = () => {
+    if (loading || !hasMore) return;
 
-  const handleScroll = () => {
-    if (loading) return;
     setLoading(true);
-    if (!containerRef.current || !hasMore) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-
-    if (scrollTop + clientHeight >= scrollHeight - threshold) {
-      loadMore().finally(() => {
-        setLoading(false);
-      });
-    }
+    loadMore().finally(() => {
+      setLoading(false);
+    });
   };
 
+  // 设置IntersectionObserver
   useEffect(() => {
-    const container = containerRef.current;
-    if (container) {
-      container.addEventListener("scroll", handleScroll);
-      // 初始加载时检查是否需要加载更多
-      handleScroll();
+    // 初始化观察器
+    const options = {
+      root: containerRef.current,
+      rootMargin: "0px 0px 50px 0px", // 减少提前触发距离
+      threshold,
+    };
+
+    // 创建观察器实例
+    observerRef.current = new IntersectionObserver((entries) => {
+      const [entry] = entries;
+      if (entry.isIntersecting) {
+        handleLoadMore();
+      }
+    }, options);
+
+    // 开始观察哨兵元素
+    if (sentinelRef.current) {
+      observerRef.current.observe(sentinelRef.current);
     }
 
+    // 初始加载检查 - 仅在组件首次挂载时执行
+    if (hasMore && !loading && !hasInitialized) {
+      setHasInitialized(true);
+      handleLoadMore();
+    }
+
+    // 清理函数
     return () => {
-      if (container) {
-        container.removeEventListener("scroll", handleScroll);
+      if (observerRef.current) {
+        observerRef.current.disconnect();
       }
     };
-  }, [loadMore, hasMore, threshold]);
+  }, [loadMore, hasMore, threshold, loading]);
 
   return (
     <div
@@ -49,6 +69,9 @@ const InfiniteScroll = ({
     >
       {children}
 
+      {/* 哨兵元素 - 用于触发加载更多 */}
+      <div ref={sentinelRef} className="sentinel-element"></div>
+
       {!hasMore && empty && (
         <Empty description="暂无数据" className="empty-data" />
       )}
diff --git a/src/pages/CompanyJobsListPage/index.jsx b/src/pages/CompanyJobsListPage/index.jsx
index c201f61..e27b5f9 100644
--- a/src/pages/CompanyJobsListPage/index.jsx
+++ b/src/pages/CompanyJobsListPage/index.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { jobAPI } from "@/services/api";
+import { getJobsList } from "@/services";
 import { mapJobList } from "@/utils/dataMapper";
 import JobList from "@/pages/CompanyJobsPage/components/JobList";
 
@@ -20,12 +20,12 @@ const CompanyJobsListPage = () => {
   const fetchJobs = async () => {
     try {
       setLoading(true);
-      const response = await jobAPI.getList({
+      const response = await getJobsList({
         page,
         pageSize: 20,
-        isActive: true
+        isActive: true,
       });
-      
+
       const mappedJobs = mapJobList(response.data || response);
       setJobs(mappedJobs);
       setTotal(response.total || mappedJobs.length);
@@ -39,12 +39,15 @@ const CompanyJobsListPage = () => {
 
   if (loading && jobs.length === 0) {
     return (
-      <div className="company-jobs-list-page-wrapper" style={{ 
-        display: 'flex', 
-        justifyContent: 'center', 
-        alignItems: 'center',
-        minHeight: '400px' 
-      }}>
+      <div
+        className="company-jobs-list-page-wrapper"
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          minHeight: "400px",
+        }}
+      >
         <p>加载中...</p>
       </div>
     );
@@ -54,11 +57,13 @@ const CompanyJobsListPage = () => {
     <ul className="company-jobs-list-page-wrapper">
       <JobList data={jobs} />
       {jobs.length === 0 && !loading && (
-        <div style={{ 
-          textAlign: 'center', 
-          padding: '40px', 
-          color: '#999' 
-        }}>
+        <div
+          style={{
+            textAlign: "center",
+            padding: "40px",
+            color: "#999",
+          }}
+        >
           暂无岗位信息
         </div>
       )}
diff --git a/src/pages/ProjectLibraryPage/index.jsx b/src/pages/ProjectLibraryPage/index.jsx
index f89c515..33c1aee 100644
--- a/src/pages/ProjectLibraryPage/index.jsx
+++ b/src/pages/ProjectLibraryPage/index.jsx
@@ -72,7 +72,6 @@ const ProjectLibrary = () => {
         <InfiniteScroll
           loadMore={fetchProjects}
           hasMore={hasMore}
-          threshold={100}
           empty={projectList.length === 0}
           className="user-portfolio-list"
         >