feat: 🎸 安装了全局骨架屏

src/components/Layout/index.css

@@ -4,6 +4,13 @@
   min-height: 100vh;
   width: 100%;
   background-color: #f2f3f5;
+
+  .app-layout-skeleton {
+    flex: 1;
+    box-sizing: border-box;
+    padding: 100px;
+    background-color: aqua;
+  }
 }
 /* 主内容区域 */
 .main-content {

src/components/Layout/index.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { Skeleton } from "@arco-design/web-react";
 import Sidebar from "../Sidebar";
 import "./index.css";
 
@@ -8,7 +9,9 @@ const Layout = ({ children }) => {
   return (
     <div className="app-layout">
       <Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
-      <main className="main-content">{children}</main>
+      <Skeleton loading={false} animation className="app-layout-skeleton">
+        <main className="main-content">{children}</main>
+      </Skeleton>
     </div>
   );
 };

src/pages/CompanyJobsPage/index.jsx

@@ -21,39 +21,41 @@ const CompanyJobsPage = () => {
   const fetchData = async () => {
     try {
       setLoading(true);
-      
+
       // 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);
+        console.log("Could not get current student:", err);
       }
-      
+
       // Fetch jobs (and interviews if we have a student ID)
-      const jobsData = await jobAPI.getList({ 
+      const jobsData = await jobAPI.getList({
-        page: 1, 
+        page: 1,
-        pageSize: 10, 
+        pageSize: 10,
-        isActive: true 
+        isActive: true,
       });
-      
+
       let interviewsData = { data: [] };
       if (studentId) {
         try {
-          interviewsData = await interviewAPI.getList({ 
+          interviewsData = await interviewAPI.getList({
             studentId: studentId,
-            status: 'SCHEDULED'
+            status: "SCHEDULED",
           });
         } catch (err) {
-          console.log('No interviews found or API error');
+          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);
+      const mappedInterviews = mapInterviewList(
-      
+        interviewsData.data || interviewsData
+      );
+
       setJobs(mappedJobs);
       setInterviews(mappedInterviews);
     } catch (error) {
@@ -73,7 +75,10 @@ const CompanyJobsPage = () => {
   if (loading) {
     return (
       <div className="company-jobs-page-wrapper">
-        <div className="company-jobs-page" style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <div
+          className="company-jobs-page"
+          style={{ justifyContent: "center", alignItems: "center" }}
+        >
           <p>加载中...</p>
         </div>
       </div>
@@ -86,10 +91,7 @@ const CompanyJobsPage = () => {
         <div className="company-jobs-page-left" onClick={handleJobWrapperClick}>
           <p className="company-jobs-page-title">企业内推岗位库</p>
           <div className="company-jobs-page-left-list-wrapper">
-            <JobList
+            <JobList data={jobs} backgroundColor="#F7F8FA" />
-              data={jobs}
-              backgroundColor="#F7F8FA"
-            />
           </div>
         </div>
         <div className="company-jobs-page-interview-wrapper">
@@ -102,43 +104,54 @@ const CompanyJobsPage = () => {
           >
             <p className="company-jobs-page-title">内推岗位面试</p>
             <ul className="company-jobs-page-interview-list">
-              {interviews.length > 0 ? interviews.map((item) => (
+              {interviews.length > 0 ? (
-                <li className="company-jobs-page-interview-item" key={item.id}>
+                interviews.map((item) => (
-                  <div className="company-jobs-page-interview-item-info">
+                  <li
-                    <p className="company-jobs-page-interview-item-info-position">
+                    className="company-jobs-page-interview-item"
-                      {item.position}
+                    key={item.id}
-                    </p>
+                  >
-                    {item.job?.tags?.length > 0 ? (
+                    <div className="company-jobs-page-interview-item-info">
-                      <ul className="company-jobs-page-interview-item-info-tags">
+                      <p className="company-jobs-page-interview-item-info-position">
-                        {item.job.tags.map((tag) => (
+                        {item.position}
-                          <li
+                      </p>
-                            className="company-jobs-page-interview-item-info-tag"
+                      {item.job?.tags?.length > 0 ? (
-                            key={tag}
+                        <ul className="company-jobs-page-interview-item-info-tags">
-                          >
+                          {item.job.tags.map((tag) => (
-                            {tag}
+                            <li
-                          </li>
+                              className="company-jobs-page-interview-item-info-tag"
-                        ))}
+                              key={tag}
-                      </ul>
+                            >
-                    ) : null}
+                              {tag}
-                    <span className="company-jobs-page-interview-item-info-salary">
+                            </li>
-                      {item.job?.salary || '面议'}
+                          ))}
-                    </span>
+                        </ul>
-                  </div>
+                      ) : null}
-                  <div className="company-jobs-page-interview-item-btn-wrapper">
+                      <span className="company-jobs-page-interview-item-info-salary">
-                    <span>{item.interviewTime}</span>
+                        {item.job?.salary || "面议"}
-                    <div
+                      </span>
-                      className={`company-jobs-page-interview-item-btn ${
-                        item.status !== "COMPLETED" &&
-                        "company-jobs-page-interview-item-btn-active"
-                      }`}
-                    >
-                      {item.statusText}
                     </div>
-                  </div>
+                    <div className="company-jobs-page-interview-item-btn-wrapper">
-                </li>
+                      <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
+                    style={{
+                      color: "#999",
+                      textAlign: "center",
+                      width: "100%",
+                    }}
+                  >
                     暂无面试安排
                   </p>
                 </li>