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} />
+      <Skeleton loading={false} animation className="app-layout-skeleton">
         <main className="main-content">{children}</main>
+      </Skeleton>
     </div>
   );
 };

src/pages/CompanyJobsPage/index.jsx

@@ -28,14 +28,14 @@ const CompanyJobsPage = () => {
         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({
         page: 1,
         pageSize: 10,
-        isActive: true 
+        isActive: true,
       });
 
       let interviewsData = { data: [] };
@@ -43,16 +43,18 @@ const CompanyJobsPage = () => {
         try {
           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);
@@ -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,8 +104,12 @@ 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) => (
+                  <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}
@@ -121,7 +127,7 @@ const CompanyJobsPage = () => {
                         </ul>
                       ) : null}
                       <span className="company-jobs-page-interview-item-info-salary">
-                      {item.job?.salary || '面议'}
+                        {item.job?.salary || "面议"}
                       </span>
                     </div>
                     <div className="company-jobs-page-interview-item-btn-wrapper">
@@ -136,9 +142,16 @@ const CompanyJobsPage = () => {
                       </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>