From 14f722263b5ba86217c3a48a7acb8100251685dd 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: Wed, 20 Aug 2025 10:40:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=E4=BA=86=E5=85=A8=E5=B1=80=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout/index.css     |   7 ++
 src/components/Layout/index.jsx     |   5 +-
 src/pages/CompanyJobsPage/index.jsx | 121 +++++++++++++++-------------
 3 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/src/components/Layout/index.css b/src/components/Layout/index.css
index 9be72e6..be47ae4 100644
--- a/src/components/Layout/index.css
+++ b/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 {
diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx
index e6adb1b..4b68264 100644
--- a/src/components/Layout/index.jsx
+++ b/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>
   );
 };
diff --git a/src/pages/CompanyJobsPage/index.jsx b/src/pages/CompanyJobsPage/index.jsx
index 96bf696..5b3e069 100644
--- a/src/pages/CompanyJobsPage/index.jsx
+++ b/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({ 
-        page: 1, 
-        pageSize: 10, 
-        isActive: true 
+      const jobsData = await jobAPI.getList({
+        page: 1,
+        pageSize: 10,
+        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
-              data={jobs}
-              backgroundColor="#F7F8FA"
-            />
+            <JobList 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) => (
-                <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}
+              {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>
                     </div>
-                  </div>
-                </li>
-              )) : (
+                    <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
+                    style={{
+                      color: "#999",
+                      textAlign: "center",
+                      width: "100%",
+                    }}
+                  >
                     暂无面试安排
                   </p>
                 </li>