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

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,79 +111,74 @@ 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">
-      <ul className="resume-interview-navigation">
-        <div className="navigation-tabs">
-          {pageData.industries.map((industry) => (
-            <li
-              key={industry.id}
-              className={`resume-interview-navigation-item ${
-                activeIndustry === industry.id ? "active" : ""
-              }`}
-              onClick={() => handleNavClick(industry.id)}
-            >
-              {industry.name}
-            </li>
-          ))}
-        </div>
-      </ul>
-      <ul className="resume-interview-content-wrapper">
-        {pageData.industries.map((item) => (
-          <li
-            className="resume-interview-content-item-wrapper"
-            key={item.id}
-            ref={(el) => (sectionsRef.current[item.id] = el)}
-          >
-            <p className="item-title">{item.name}</p>
-            <p className="item-subtitle">简历与面试题</p>
-            <div className="item-content-wrapper">
-              <ul className="jobs-list">
-                {filterPositions(item.positions).map((position) => (
-                  <li
-                    className="job-item job-item-change"
-                    key={position.id}
-                    onClick={() => handlePositionClick(position, item)}
-                  >
-                    <span>{position.level}</span>
-                    <div className="job-name">
-                      <p>{position.name}</p>
-                      <span>详情 &gt;</span>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-              <ul className="resumes-list">
-                {item.questions.map((question) => (
-                  <li
-                    key={question.id}
-                    className="resume-item"
-                    onClick={() => handleQuestionClick({ ...item, question })}
-                  >
-                    <p>{question.question}</p>
-                  </li>
-                ))}
-              </ul>
+      {loading ? (
+        <Spin size={80} className="resume-interview-spin" />
+      ) : pageData ? (
+        <>
+          <ul className="resume-interview-navigation">
+            <div className="navigation-tabs">
+              {pageData.industries.map((industry) => (
+                <li
+                  key={industry.id}
+                  className={`resume-interview-navigation-item ${
+                    activeIndustry === industry.id ? "active" : ""
+                  }`}
+                  onClick={() => handleNavClick(industry.id)}
+                >
+                  {industry.name}
+                </li>
+              ))}
             </div>
-          </li>
-        ))}
-      </ul>
+          </ul>
+          <ul className="resume-interview-content-wrapper">
+            {pageData.industries.map((item) => (
+              <li
+                className="resume-interview-content-item-wrapper"
+                key={item.id}
+                ref={(el) => (sectionsRef.current[item.id] = el)}
+              >
+                <p className="item-title">{item.name}</p>
+                <p className="item-subtitle">简历与面试题</p>
+                <div className="item-content-wrapper">
+                  <ul className="jobs-list">
+                    {filterPositions(item.positions).map((position) => (
+                      <li
+                        className="job-item job-item-change"
+                        key={position.id}
+                        onClick={() => handlePositionClick(position, item)}
+                      >
+                        <span>{position.level}</span>
+                        <div className="job-name">
+                          <p>{position.name}</p>
+                          <span>详情 &gt;</span>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                  <ul className="resumes-list">
+                    {item.questions.map((question) => (
+                      <li
+                        key={question.id}
+                        className="resume-item"
+                        onClick={() =>
+                          handleQuestionClick({ ...item, question })
+                        }
+                      >
+                        <p>{question.question}</p>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <Empty description="暂无数据" className="empty-data" />
+      )}
+
       <InterviewQuestionsModal
         visible={interviewModalVisible}
         onClose={handleCloseInterviewModal}