feat: 🎸 新增了几处加载

src/components/Rank/index.css

@@ -23,6 +23,11 @@
     color: #262626;
   }
 
+  .module-class-rank-spin,
+  .empty-data {
+    margin: auto;
+  }
+
   .module-class-rank-podium {
     width: 288px;
     height: 120px;

src/components/Rank/index.jsx

@@ -1,29 +1,11 @@
-import { Avatar, Skeleton } from "@arco-design/web-react";
+import { Avatar, Spin, Empty } from "@arco-design/web-react";
 import "./index.css";
 
 const positions = ["item2", "item1", "item3"];
 const icons = ["icon2", "icon1", "icon3"];
 
-const Rank = ({ className, data = null, loading = false }) => {
+const Rank = ({ className, data, loading }) => {
-  if (loading) {
+  const rankings = data?.rankings?.slice(0, 6) || [];
-    return (
-      <div className={`module-class-rank ${className}`}>
-        <p className="module-class-rank-title">班级排名</p>
-        <Skeleton loading={true} />
-      </div>
-    );
-  }
-
-  if (!data || !data?.rankings || data?.rankings?.length === 0) {
-    return (
-      <div className={`module-class-rank ${className}`}>
-        <p className="module-class-rank-title">班级排名</p>
-        <div className="no-data">暂无排名数据</div>
-      </div>
-    );
-  }
-
-  const rankings = data?.rankings?.slice(0, 6);
 
   // 安全处理领奖台学生，确保至少有3个位置
   const podiumStudents = [
@@ -37,7 +19,12 @@ const Rank = ({ className, data = null, loading = false }) => {
   return (
     <div className={`module-class-rank ${className}`}>
       <p className="module-class-rank-title">班级排名</p>
-
+      {loading ? (
+        <Spin size={40} className="module-class-rank-spin" />
+      ) : !data || !data?.rankings || data?.rankings?.length === 0 ? (
+        <Empty description="暂无排名数据" className="empty-data" />
+      ) : (
+        <>
           <ul className="module-class-rank-podium">
             {podiumStudents.map((student, index) => {
               return student ? (
@@ -71,13 +58,18 @@ const Rank = ({ className, data = null, loading = false }) => {
           </ul>
           <ul className="module-class-rank-list">
             {listStudents.map((student, index) => (
-          <li key={student.studentId} className="module-class-rank-list-item">
+              <li
+                key={student.studentId}
+                className="module-class-rank-list-item"
+              >
                 <i className={`module-class-rank-list-item-icon${index + 4}`} />
                 <p>{student.studentName || "未知"}</p>
                 <span>{student.score}分</span>
               </li>
             ))}
           </ul>
+        </>
+      )}
     </div>
   );
 };

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 = ({
+const StudyStudes = ({ studyStatistics, learningProgress, loading }) => {
-  studyStatistics,
-  learningProgress,
-  loading = false,
-}) => {
   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,6 +100,9 @@ const StudyStudes = ({
   return (
     <div className="study-studes-card-wrapper">
       <p className="study-studes-card-title">学习情况</p>
+      {loading ? (
+        <Spin size={40} className="study-studes-card-spin" />
+      ) : (
         <ul className="study-studes-card-list">
           {/* 时长 */}
           <li className="study-studes-card-study-info">
@@ -221,6 +211,7 @@ const StudyStudes = ({
             </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">

src/services/dashboard.js

@@ -5,7 +5,6 @@ export async function getStudyRecordsProgress() {
   return request({
     url: `/api/study-records/progress`,
     method: "GET",
-    namespace: "dashboardLoading",
   });
 }
 
@@ -15,7 +14,6 @@ export async function getMyTasks(params = {}) {
     url: `/api/tasks/my-tasks`,
     method: "GET",
     params: params,
-    namespace: "dashboardLoading",
   });
 }
 
@@ -25,6 +23,5 @@ export async function getClassRanking(params = { limit: 6 }) {
     url: `/api/rankings/class`,
     method: "GET",
     params: params,
-    namespace: "dashboardLoading",
   });
 }

src/services/global.js

@@ -5,6 +5,5 @@ export async function getLoginStudentInfo() {
   return request({
     url: `/api/students/me`,
     method: "GET",
-    namespace: "globalLoading",
   });
 }