feat: 🎸 优化了各个页面的加载

src/components/InfiniteScroll/index.jsx

@@ -92,7 +92,7 @@ const InfiniteScroll = ({
       {/* 滚动加载指示器 */}
       {loading && hasMore && (
         <div className="loading-container">
-          <Spin size="small" />
+          <Spin size={20} />
           <span className="loading-text">加载中...</span>
         </div>
       )}

src/pages/CompanyJobsPage/index.css

@@ -11,6 +11,10 @@
     align-items: center;
     position: relative;
 
+    .company-jobs-page-spin {
+      margin: 200px 500px;
+    }
+
     .company-jobs-page-title {
       width: 100%;
       height: 42px;

src/pages/CompanyJobsPage/index.jsx

@@ -1,11 +1,16 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import { Spin, Empty } from "@arco-design/web-react";
 import { mapJobList, mapInterviewList } from "@/utils/dataMapper";
 import InfiniteScroll from "@/components/InfiniteScroll";
 import toast from "@/components/Toast";
 import JobList from "./components/JobList";
-import { getCompanyJobsPageData, getJobsList, getInterviewsList } from "@/services";
+import {
+  getCompanyJobsPageData,
+  getJobsList,
+  getInterviewsList,
+} from "@/services";
 
 import "./index.css";
 const PAGE_SIZE = 10;
@@ -45,7 +50,9 @@ const CompanyJobsPage = () => {
 
           // 设置面试数据
           if (res.data?.interviews && studentInfo?.id) {
-            const mappedInterviews = mapInterviewList(res.data.interviews.list || []);
+            const mappedInterviews = mapInterviewList(
+              res.data.interviews.list || []
+            );
             setInterviews(mappedInterviews);
             setInterviewsHasMore(res.data.interviews.hasMore);
             if (mappedInterviews.length > 0) {
@@ -56,12 +63,12 @@ const CompanyJobsPage = () => {
           setInitialDataLoaded(true);
         }
       } catch (error) {
-        console.error('Failed to fetch initial page data:', error);
+        console.error("Failed to fetch initial page data:", error);
         // 如果聚合接口失败，回退到原来的方式
         setInitialDataLoaded(true);
         // 显示错误信息给用户
         if (toast && toast.error) {
-          toast.error('加载数据失败，请刷新重试');
+          toast.error("加载数据失败，请刷新重试");
         }
       } finally {
         setLoading(false);
@@ -89,8 +96,12 @@ const CompanyJobsPage = () => {
         const mappedInterviews = mapInterviewList(res.data || []);
         setInterviews((prevList) => {
           // 去重处理：过滤掉已存在的数据
-          const existingIds = new Set(prevList.map(interview => interview.id));
+          const existingIds = new Set(
-          const newInterviews = mappedInterviews.filter(interview => !existingIds.has(interview.id));
+            prevList.map((interview) => interview.id)
+          );
+          const newInterviews = mappedInterviews.filter(
+            (interview) => !existingIds.has(interview.id)
+          );
 
           const newList = [...prevList, ...newInterviews];
           if (res.total <= newList?.length) {
@@ -132,8 +143,8 @@ const CompanyJobsPage = () => {
         const mappedJobs = mapJobList(res.data);
         setJobs((prevList) => {
           // 去重处理：过滤掉已存在的数据
-          const existingIds = new Set(prevList.map(job => job.id));
+          const existingIds = new Set(prevList.map((job) => job.id));
-          const newJobs = mappedJobs.filter(job => !existingIds.has(job.id));
+          const newJobs = mappedJobs.filter((job) => !existingIds.has(job.id));
 
           const newList = [...prevList, ...newJobs];
           if (res.total <= newList?.length) {
@@ -156,23 +167,17 @@ const CompanyJobsPage = () => {
     navigate("/company-jobs-list");
   };
 
-  if (loading && jobs.length === 0 && interviews.length === 0) {
-    return (
-      <div className="company-jobs-page-wrapper" style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: '400px'
-      }}>
-        <p>正在加载数据...</p>
-      </div>
-    );
-  }
-
   return (
     <div className="company-jobs-page-wrapper">
       <div className="company-jobs-page">
-        <div className="company-jobs-page-left" onClick={handleJobWrapperClick}>
+        {loading ? (
+          <Spin size={80} className="company-jobs-page-spin" />
+        ) : (
+          <>
+            <div
+              className="company-jobs-page-left"
+              onClick={handleJobWrapperClick}
+            >
               <p className="company-jobs-page-title">企业内推岗位库</p>
               <InfiniteScroll
                 loadMore={fetchJobsList}
@@ -198,7 +203,10 @@ const CompanyJobsPage = () => {
                   className="company-jobs-page-interview-list"
                 >
                   {interviews.map((item) => (
-                <li className="company-jobs-page-interview-item" key={item.id}>
+                    <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}
@@ -268,6 +276,8 @@ const CompanyJobsPage = () => {
                 </div>
               </div>
             </div>
+          </>
+        )}
       </div>
     </div>
   );

src/pages/ResumeInterviewPage/index.css

@@ -3,7 +3,12 @@
   height: 100%;
   box-sizing: border-box;
   position: relative;
+  display: flex;
 
+  .resume-interview-spin,
+  .empty-data {
+    margin: auto;
+  }
   .resume-interview-navigation {
     position: fixed;
     top: 0;

src/pages/ResumeInterviewPage/index.jsx

@@ -1,4 +1,5 @@
 import { useRef, useState, useEffect } from "react";
+import { Spin, Empty } from "@arco-design/web-react";
 import toast from "@/components/Toast";
 import InterviewQuestionsModal from "./components/InterviewQuestionsModal";
 import ResumeInfoModal from "@/pages/CompanyJobsPage/components/ResumeInfoModal";
@@ -110,24 +111,12 @@ const ResumeInterviewPage = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, [pageData?.industries]);
 
-  if (loading) {
-    return (
-      <div className="resume-interview-page">
-        <div className="loading">加载中...</div>
-      </div>
-    );
-  }
-
-  if (!pageData) {
-    return (
-      <div className="resume-interview-page">
-        <div className="error">加载失败，请刷新重试</div>
-      </div>
-    );
-  }
-
   return (
     <div className="resume-interview-page">
+      {loading ? (
+        <Spin size={80} className="resume-interview-spin" />
+      ) : pageData ? (
+        <>
           <ul className="resume-interview-navigation">
             <div className="navigation-tabs">
               {pageData.industries.map((industry) => (
@@ -173,7 +162,9 @@ const ResumeInterviewPage = () => {
                       <li
                         key={question.id}
                         className="resume-item"
-                    onClick={() => handleQuestionClick({ ...item, question })}
+                        onClick={() =>
+                          handleQuestionClick({ ...item, question })
+                        }
                       >
                         <p>{question.question}</p>
                       </li>
@@ -183,6 +174,11 @@ const ResumeInterviewPage = () => {
               </li>
             ))}
           </ul>
+        </>
+      ) : (
+        <Empty description="暂无数据" className="empty-data" />
+      )}
+
       <InterviewQuestionsModal
         visible={interviewModalVisible}
         onClose={handleCloseInterviewModal}

src/services/personalProfile.js

@@ -5,7 +5,6 @@ export async function getLoginStudentProgress() {
   return request({
     url: `/api/students/me/progress`,
     method: "GET",
-    namespace: "profileLoading",
   });
 }
 
@@ -14,7 +13,7 @@ export async function getDashboardStatistics() {
   return request({
     url: `/api/dashboard/stats`,
     method: "GET",
-    namespace: "dashboardLoading",
+    namespace: "globalLoading",
   });
 }
 
@@ -24,7 +23,6 @@ export async function getClassRank(params = {}) {
     url: `/api/rankings/class`,
     method: "GET",
     params: params,
-    namespace: "profileLoading",
   });
 }
 
@@ -33,7 +31,6 @@ export async function getMyRanking() {
   return request({
     url: `/api/rankings/my-ranking`,
     method: "GET",
-    namespace: "profileLoading",
   });
 }
 
@@ -42,6 +39,5 @@ export async function getProfileOverview() {
   return request({
     url: `/api/profile/overview`,
     method: "GET",
-    namespace: "profileLoading",
   });
 }