配置后端对接

src/pages/CompanyJobsListPage/index.jsx

@@ -1,17 +1,67 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { mockData } from "@/data/mockData";
+import { jobAPI } from "@/services/api";
+import { mapJobList } from "@/utils/dataMapper";
 import JobList from "@/pages/CompanyJobsPage/components/JobList";
 
 import "./index.css";
 
 const CompanyJobsListPage = () => {
-  const { companyJobs } = mockData;
+  const [jobs, setJobs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    fetchJobs();
+  }, [page]);
+
+  const fetchJobs = async () => {
+    try {
+      setLoading(true);
+      const response = await jobAPI.getList({
+        page,
+        pageSize: 20,
+        isActive: true
+      });
+      
+      const mappedJobs = mapJobList(response.data || response);
+      setJobs(mappedJobs);
+      setTotal(response.total || mappedJobs.length);
+    } catch (error) {
+      console.error("Failed to fetch jobs:", error);
+      setJobs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading && jobs.length === 0) {
+    return (
+      <div className="company-jobs-list-page-wrapper" style={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        alignItems: 'center',
+        minHeight: '400px' 
+      }}>
+        <p>加载中...</p>
+      </div>
+    );
+  }
+
   return (
     <ul className="company-jobs-list-page-wrapper">
-      <JobList data={companyJobs?.companyPositions} />
+      <JobList data={jobs} />
+      {jobs.length === 0 && !loading && (
+        <div style={{ 
+          textAlign: 'center', 
+          padding: '40px', 
+          color: '#999' 
+        }}>
+          暂无岗位信息
+        </div>
+      )}
     </ul>
   );
 };