feat: 🎸 企业内推岗位列表

src/pages/CompanyJobsPage/components/JobList/index.jsx

@@ -40,7 +40,7 @@ export default ({ className = "", data = [], backgroundColor = "#FFFFFF" }) => {
                 ))}
               </ul>
               <p className="company-jobs-info-position-count">
-                岗位招聘数量仅剩9名
+                岗位招聘数量仅剩{item?.remainingPositions}名
               </p>
             </div>
             <div className="company-jobs-btn-wrapper">

src/pages/CompanyJobsPage/index.css

@@ -11,6 +11,7 @@
     justify-content: space-between;
     align-items: center;
     position: relative;
+
     .company-jobs-page-title {
       width: 100%;
       height: 42px;
@@ -51,6 +52,7 @@
       .company-jobs-page-left-list-wrapper {
         width: 496px;
         height: 760px;
+        overflow: auto;
       }
     }
 

src/pages/CompanyJobsPage/index.jsx

@@ -1,70 +1,78 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { jobAPI, interviewAPI, studentAPI } from "@/services/api";
 import { mapJobList, mapInterviewList } from "@/utils/dataMapper";
 import JobList from "./components/JobList";
-import { useDispatch } from "react-redux";
-import { setLoadingTrue, setLoadingFalse } from "@/store/slices/loadingSlice";
-// 从Redux store中获取loading状态
+import { getJobsList, getInterviewsList, getCurrentStudent } from "@/services";
+import InfiniteScroll from "@/components/InfiniteScroll";
+
 import "./index.css";
+const PAGE_SIZE = 10;
 
 const CompanyJobsPage = () => {
-  const dispatch = useDispatch();
-
-  const [jobs, setJobs] = useState([]);
-  const [interviews, setInterviews] = useState([]);
   const [isExpand, setIsExpand] = useState(false); // 是否展开
-
+  const [jobs, setJobs] = useState([]);
+  const [jobsListPage, setJobsListPage] = useState(1);
+  const [joblistHasMore, setJobsListHasMore] = useState(true);
+  const [interviews, setInterviews] = useState([]);
+  const [interviewsPage, setInterviewsPage] = useState(1);
+  const [interviewsHasMore, setInterviewsHasMore] = useState(true);
   const navigate = useNavigate();
 
-  const fetchData = async () => {
+  // 获取面试信息
+  const fetchInterviewsData = async () => {
     try {
-      dispatch(setLoadingTrue());
-      // Get current user's student ID from API
       let studentId = null;
-      try {
-        const currentStudent = await studentAPI.getCurrentStudent();
-        studentId = currentStudent?.id;
-      } catch (err) {
-        console.log("Could not get current student:", err);
-      }
-
-      // Fetch jobs (and interviews if we have a student ID)
-      const jobsData = await jobAPI.getList({
-        page: 1,
-        pageSize: 10,
-        isActive: true,
-      });
-
-      let interviewsData = { data: [] };
+      const currentStudent = await getCurrentStudent();
+      studentId = currentStudent?.id;
       if (studentId) {
-        try {
-          interviewsData = await interviewAPI.getList({
-            studentId: studentId,
-            status: "SCHEDULED",
+        const res = await getInterviewsList({
+          page: interviewsPage,
+          pageSize: PAGE_SIZE,
+          studentId: studentId,
+          status: "SCHEDULED",
+        });
+        if (res.success) {
+          const mappedInterviews = mapInterviewList(res.data || []);
+          setInterviews((prevList) => {
+            const newList = [...prevList, ...mappedInterviews];
+            if (res.total === newList?.length) {
+              setInterviewsHasMore(false);
+            } else {
+              setInterviewsPage((prevPage) => prevPage + 1);
+            }
+            return newList;
           });
-        } catch (err) {
-          console.log("No interviews found or API error");
         }
       }
-
-      // Map data to frontend format
-      const mappedJobs = mapJobList(jobsData.data || jobsData);
-      const mappedInterviews = mapInterviewList(
-        interviewsData.data || interviewsData
-      );
-
-      setJobs(mappedJobs);
-      setInterviews(mappedInterviews);
     } catch (error) {
-      dispatch(setLoadingFalse());
-
       console.error("Failed to fetch data:", error);
-      // Fallback to empty data
-      setJobs([]);
       setInterviews([]);
-    } finally {
-      dispatch(setLoadingFalse());
+    }
+  };
+
+  // 获取企业内推岗位
+  const fetchJobsList = async () => {
+    try {
+      const res = await getJobsList({
+        page: jobsListPage,
+        pageSize: PAGE_SIZE,
+        isActive: true,
+      });
+      if (res.success) {
+        const mappedJobs = mapJobList(res.data);
+        setJobs((prevList) => {
+          const newList = [...prevList, ...mappedJobs];
+          if (res.total === newList?.length) {
+            setJobsListHasMore(false);
+          } else {
+            setJobsListPage((prevPage) => prevPage + 1);
+          }
+          return newList;
+        });
+      }
+    } catch (error) {
+      console.error("Failed to fetch data:", error);
+      setJobs([]);
     }
   };
 
@@ -72,18 +80,18 @@ const CompanyJobsPage = () => {
     navigate("/company-jobs-list");
   };
 
-  useEffect(() => {
-    fetchData();
-  }, []);
-
   return (
     <div className="company-jobs-page-wrapper">
       <div className="company-jobs-page">
         <div className="company-jobs-page-left" onClick={handleJobWrapperClick}>
           <p className="company-jobs-page-title">企业内推岗位库</p>
-          <div className="company-jobs-page-left-list-wrapper">
+          <InfiniteScroll
+            loadMore={fetchJobsList}
+            hasMore={joblistHasMore}
+            className="company-jobs-page-left-list-wrapper"
+          >
             <JobList data={jobs} backgroundColor="#F7F8FA" />
-          </div>
+          </InfiniteScroll>
         </div>
         <div className="company-jobs-page-interview-wrapper">
           <div
@@ -94,60 +102,47 @@ const CompanyJobsPage = () => {
             }`}
           >
             <p className="company-jobs-page-title">内推岗位面试</p>
-            <ul className="company-jobs-page-interview-list">
-              {interviews.length > 0 ? (
-                interviews.map((item) => (
-                  <li
-                    className="company-jobs-page-interview-item"
-                    key={item.id}
-                  >
-                    <div className="company-jobs-page-interview-item-info">
-                      <p className="company-jobs-page-interview-item-info-position">
-                        {item.position}
-                      </p>
-                      {item.job?.tags?.length > 0 ? (
-                        <ul className="company-jobs-page-interview-item-info-tags">
-                          {item.job.tags.map((tag) => (
-                            <li
-                              className="company-jobs-page-interview-item-info-tag"
-                              key={tag}
-                            >
-                              {tag}
-                            </li>
-                          ))}
-                        </ul>
-                      ) : null}
-                      <span className="company-jobs-page-interview-item-info-salary">
-                        {item.job?.salary || "面议"}
-                      </span>
+            <InfiniteScroll
+              loadMore={fetchInterviewsData}
+              hasMore={interviewsHasMore}
+              className="company-jobs-page-interview-list"
+            >
+              {interviews.map((item) => (
+                <li className="company-jobs-page-interview-item" key={item.id}>
+                  <div className="company-jobs-page-interview-item-info">
+                    <p className="company-jobs-page-interview-item-info-position">
+                      {item.position}
+                    </p>
+                    {item.job?.tags?.length > 0 ? (
+                      <ul className="company-jobs-page-interview-item-info-tags">
+                        {item.job.tags.map((tag) => (
+                          <li
+                            className="company-jobs-page-interview-item-info-tag"
+                            key={tag}
+                          >
+                            {tag}
+                          </li>
+                        ))}
+                      </ul>
+                    ) : null}
+                    <span className="company-jobs-page-interview-item-info-salary">
+                      {item.job?.salary || "面议"}
+                    </span>
+                  </div>
+                  <div className="company-jobs-page-interview-item-btn-wrapper">
+                    <span>{item.interviewTime}</span>
+                    <div
+                      className={`company-jobs-page-interview-item-btn ${
+                        item.status !== "COMPLETED" &&
+                        "company-jobs-page-interview-item-btn-active"
+                      }`}
+                    >
+                      {item.statusText}
                     </div>
-                    <div className="company-jobs-page-interview-item-btn-wrapper">
-                      <span>{item.interviewTime}</span>
-                      <div
-                        className={`company-jobs-page-interview-item-btn ${
-                          item.status !== "COMPLETED" &&
-                          "company-jobs-page-interview-item-btn-active"
-                        }`}
-                      >
-                        {item.statusText}
-                      </div>
-                    </div>
-                  </li>
-                ))
-              ) : (
-                <li className="company-jobs-page-interview-item">
-                  <p
-                    style={{
-                      color: "#999",
-                      textAlign: "center",
-                      width: "100%",
-                    }}
-                  >
-                    暂无面试安排
-                  </p>
+                  </div>
                 </li>
-              )}
-            </ul>
+              ))}
+            </InfiniteScroll>
           </div>
         </div>
         <div