feat: 🎸 新增了几处加载

src/pages/PersonalProfile/components/StudyStudes/index.css

@@ -19,6 +19,9 @@
     color: #262626;
     margin-bottom: 20px;
   }
+  .study-studes-card-spin {
+    margin: auto;
+  }
 
   .study-studes-card-list {
     width: 100%;

src/pages/PersonalProfile/components/StudyStudes/index.jsx

@@ -1,27 +1,14 @@
 import * as echarts from "echarts";
 import { useSelector } from "react-redux";
+import { Spin } from "@arco-design/web-react";
 import StudyProgress from "../StudyProgress";
 import ScoreRingChart from "../ScoreRingChart";
 import AttendanceRingChart from "../AttendanceRingChart";
 import "./index.css";
 
-const StudyStudes = ({
-  studyStatistics,
-  learningProgress,
-  loading = false,
-}) => {
+const StudyStudes = ({ studyStatistics, learningProgress, loading }) => {
   const studentInfo = useSelector((state) => state.student.studentInfo);
 
-  // 如果数据还在加载中，显示加载状态
-  if (loading) {
-    return (
-      <div className="study-studes-card-wrapper">
-        <p className="study-studes-card-title">学习情况</p>
-        <div>加载中...</div>
-      </div>
-    );
-  }
-
   // 使用传入的数据，只在undefined时使用默认值（0也是有效值）
   const personalStudyHours = studyStatistics?.studyTime?.personal ?? 0;
   const classAverageStudyHours = studyStatistics?.studyTime?.classAverage ?? 0;
@@ -113,114 +100,118 @@ const StudyStudes = ({
   return (
     <div className="study-studes-card-wrapper">
       <p className="study-studes-card-title">学习情况</p>
-      <ul className="study-studes-card-list">
-        {/* 时长 */}
-        <li className="study-studes-card-study-info">
-          <div className="study-studes-card-time-wrapper">
-            <div className="study-studes-card-study-time-wrapper">
-              <p className="study-studes-card-study-info-title">
-                个人学习时长（h）
-              </p>
-              <p className="study-studes-card-study-time-line">
-                <i
-                  style={{
-                    width: `${Math.min(
-                      (personalStudyHours / classAverageStudyHours) * 70,
-                      100
-                    )}%`,
-                  }}
-                >
-                  <span>{personalStudyHours}</span>
-                </i>
-              </p>
-            </div>
-            <div className="study-studes-card-study-time-wrapper">
-              <p className="study-studes-card-study-info-title">
-                班级平均学习时长（h）
-              </p>
-              <p className="study-studes-card-study-time-line study-studes-card-study-time-line-class">
-                <i style={{ width: "80%" }}>
-                  <span>{classAverageStudyHours}</span>
-                </i>
-              </p>
-            </div>
-          </div>
-        </li>
-        {/* 进度 */}
-        <li className="study-studes-card-study-progress">
-          <StudyProgress
-            value={overallProgress}
-            className="study-studes-card-study-progress-chart"
-          />
-          <p className="study-studes-card-study-progress-title">
-            整体课程完成进度
-          </p>
-        </li>
-        {/* 课程整体完成情况 */}
-        <li className="study-studes-card-curriculum">
-          <ScoreRingChart
-            title={`整体课程\n完成情况`}
-            ringData={courseRingData}
-            className="study-studes-card-curriculum-chart"
-          />
-          <div className="study-studes-card-curriculum-info">
-            <p>班级平均进度</p>
-            <span className="study-studes-card-curriculum-info-span1">
-              {classAverageCourseProgress}%
-            </span>
-          </div>
-          <div className="study-studes-card-curriculum-info">
-            <p>我的进度</p>
-            <span className="study-studes-card-curriculum-info-span2">
-              {personalCourseProgress}%
-            </span>
-          </div>
-        </li>
-        {/* 课后作业完成情况 */}
-        <li className="study-studes-card-curriculum-homework study-studes-card-curriculum">
-          <ScoreRingChart
-            title={`课后作业\n完成情况`}
-            ringData={homeworkRingData}
-            className="study-studes-card-curriculum-chart"
-          />
-          <div className="study-studes-card-curriculum-info">
-            <p>班级平均进度</p>
-            <span className="study-studes-card-curriculum-info-span1">
-              {classAverageHomeworkProgress}%
-            </span>
-          </div>
-          <div className="study-studes-card-curriculum-info">
-            <p>我的进度</p>
-            <span className="study-studes-card-curriculum-info-span2">
-              {personalHomeworkProgress}%
-            </span>
-          </div>
-        </li>
-        {/* 考勤情况 */}
-        <li className="study-studes-card-curriculum">
-          <AttendanceRingChart
-            data={attendanceData}
-            centerContent={
-              <div className="study-studes-card-curriculum-chart-center-content">
-                考勤情况
+      {loading ? (
+        <Spin size={40} className="study-studes-card-spin" />
+      ) : (
+        <ul className="study-studes-card-list">
+          {/* 时长 */}
+          <li className="study-studes-card-study-info">
+            <div className="study-studes-card-time-wrapper">
+              <div className="study-studes-card-study-time-wrapper">
+                <p className="study-studes-card-study-info-title">
+                  个人学习时长（h）
+                </p>
+                <p className="study-studes-card-study-time-line">
+                  <i
+                    style={{
+                      width: `${Math.min(
+                        (personalStudyHours / classAverageStudyHours) * 70,
+                        100
+                      )}%`,
+                    }}
+                  >
+                    <span>{personalStudyHours}</span>
+                  </i>
+                </p>
               </div>
-            }
-          />
+              <div className="study-studes-card-study-time-wrapper">
+                <p className="study-studes-card-study-info-title">
+                  班级平均学习时长（h）
+                </p>
+                <p className="study-studes-card-study-time-line study-studes-card-study-time-line-class">
+                  <i style={{ width: "80%" }}>
+                    <span>{classAverageStudyHours}</span>
+                  </i>
+                </p>
+              </div>
+            </div>
+          </li>
+          {/* 进度 */}
+          <li className="study-studes-card-study-progress">
+            <StudyProgress
+              value={overallProgress}
+              className="study-studes-card-study-progress-chart"
+            />
+            <p className="study-studes-card-study-progress-title">
+              整体课程完成进度
+            </p>
+          </li>
+          {/* 课程整体完成情况 */}
+          <li className="study-studes-card-curriculum">
+            <ScoreRingChart
+              title={`整体课程\n完成情况`}
+              ringData={courseRingData}
+              className="study-studes-card-curriculum-chart"
+            />
+            <div className="study-studes-card-curriculum-info">
+              <p>班级平均进度</p>
+              <span className="study-studes-card-curriculum-info-span1">
+                {classAverageCourseProgress}%
+              </span>
+            </div>
+            <div className="study-studes-card-curriculum-info">
+              <p>我的进度</p>
+              <span className="study-studes-card-curriculum-info-span2">
+                {personalCourseProgress}%
+              </span>
+            </div>
+          </li>
+          {/* 课后作业完成情况 */}
+          <li className="study-studes-card-curriculum-homework study-studes-card-curriculum">
+            <ScoreRingChart
+              title={`课后作业\n完成情况`}
+              ringData={homeworkRingData}
+              className="study-studes-card-curriculum-chart"
+            />
+            <div className="study-studes-card-curriculum-info">
+              <p>班级平均进度</p>
+              <span className="study-studes-card-curriculum-info-span1">
+                {classAverageHomeworkProgress}%
+              </span>
+            </div>
+            <div className="study-studes-card-curriculum-info">
+              <p>我的进度</p>
+              <span className="study-studes-card-curriculum-info-span2">
+                {personalHomeworkProgress}%
+              </span>
+            </div>
+          </li>
+          {/* 考勤情况 */}
+          <li className="study-studes-card-curriculum">
+            <AttendanceRingChart
+              data={attendanceData}
+              centerContent={
+                <div className="study-studes-card-curriculum-chart-center-content">
+                  考勤情况
+                </div>
+              }
+            />
 
-          <div className="study-studes-card-curriculum-info">
-            <p>出勤率</p>
-            <span className="study-studes-card-curriculum-info-span1">
-              {attendanceRate}%
-            </span>
-          </div>
-          <div className="study-studes-card-curriculum-info">
-            <p>缺勤率</p>
-            <span className="study-studes-card-curriculum-info-span3">
-              {absenceRate}%
-            </span>
-          </div>
-        </li>
-      </ul>
+            <div className="study-studes-card-curriculum-info">
+              <p>出勤率</p>
+              <span className="study-studes-card-curriculum-info-span1">
+                {attendanceRate}%
+              </span>
+            </div>
+            <div className="study-studes-card-curriculum-info">
+              <p>缺勤率</p>
+              <span className="study-studes-card-curriculum-info-span3">
+                {absenceRate}%
+              </span>
+            </div>
+          </li>
+        </ul>
+      )}
     </div>
   );
 };

src/pages/PersonalProfile/index.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import ProfileCard from "./components/ProfileCard";
 import Rank from "@/components/Rank";
@@ -11,13 +11,15 @@ import "./index.css";
 const PersonalProfile = () => {
   const dispatch = useDispatch();
   const [profileData, setProfileData] = useState(null); // 个人档案完整数据
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
 
   // 获取个人档案完整数据
-  const queryProfileOverview = useCallback(async () => {
+  const queryProfileOverview = async () => {
     try {
+      if (loading) return;
       setLoading(true);
       const res = await getProfileOverview();
+      setLoading(false);
       if (res.success) {
         const data = res.data;
 
@@ -36,11 +38,11 @@ const PersonalProfile = () => {
     } finally {
       setLoading(false);
     }
-  }, [dispatch]);
+  };
 
   useEffect(() => {
     queryProfileOverview();
-  }, [queryProfileOverview]);
+  }, []);
 
   return (
     <div className="personal-profile">