修复班级排名

src/components/Rank/index.jsx

@@ -1,58 +1,79 @@
-import { Avatar } from "@arco-design/web-react";
+import { Avatar, Skeleton } from "@arco-design/web-react";
 import "./index.css";
 
-const Rank = ({ className }) => {
+const Rank = ({ className, data = null, loading = false }) => {
+  if (loading) {
+    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 = [
+    rankings[1] || null, // 第2名
+    rankings[0] || null, // 第1名  
+    rankings[2] || null  // 第3名
+  ];
+  
+  const listStudents = rankings.slice(3);
+
   return (
     <div className={`module-class-rank ${className}`}>
       <p className="module-class-rank-title">班级排名</p>
       <ul className="module-class-rank-podium">
-        <li className="module-class-rank-podium-item2">
+        {podiumStudents.map((student, index) => {
-          <Avatar className="module-class-rank-podium-avatar">
+          const positions = ["item2", "item1", "item3"];
-            <img
+          const icons = ["icon2", "icon1", "icon3"];
-              alt="avatar"
+          
-              src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+          if (!student) {
-            />
+            return (
-          </Avatar>
+              <li key={`empty-${index}`} className={`module-class-rank-podium-${positions[index]} empty`}>
-          <span className="module-class-rank-podium-name">你好呀</span>
+                <div className="module-class-rank-podium-placeholder">
-          <i className="module-class-rank-podium-icon2"></i>
+                  <span>-</span>
-        </li>
+                </div>
-        <li className="module-class-rank-podium-item1">
+              </li>
-          <Avatar className="module-class-rank-podium-avatar">
+            );
-            <img
+          }
-              alt="avatar"
+          
-              src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+          return (
-            />
+            <li key={student.studentId} className={`module-class-rank-podium-${positions[index]}`}>
-          </Avatar>
+              <Avatar className="module-class-rank-podium-avatar">
-          <span className="module-class-rank-podium-name">你好呀</span>
+                {student.avatar ? (
-          <i className="module-class-rank-podium-icon1"></i>
+                  <img alt="avatar" src={student.avatar} />
-        </li>
+                ) : (
-        <li className="module-class-rank-podium-item3">
+                  student.studentName?.charAt(0) || "?"
-          <Avatar className="module-class-rank-podium-avatar">
+                )}
-            <img
+              </Avatar>
-              alt="avatar"
+              <span className="module-class-rank-podium-name">
-              src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+                {student.studentName || "未知"}
-            />
+              </span>
-          </Avatar>
+              <i className={`module-class-rank-podium-${icons[index]}`}></i>
-          <span className="module-class-rank-podium-name">你好呀</span>
+            </li>
-          <i className="module-class-rank-podium-icon3"></i>
+          );
-        </li>
+        })}
       </ul>
       <ul className="module-class-rank-list">
-        <li className="module-class-rank-list-item">
+        {listStudents.map((student, index) => (
-          <i className="module-class-rank-list-item-icon4" />
+          <li key={student.studentId} className="module-class-rank-list-item">
-          <p>张雪花</p>
+            <i className={`module-class-rank-list-item-icon${index + 4}`} />
-          <span>100分</span>
+            <p>{student.studentName || "未知"}</p>
-        </li>
+            <span>{student.score}分</span>
-        <li className="module-class-rank-list-item">
+          </li>
-          <i className="module-class-rank-list-item-icon5" />
+        ))}
-          <p>张雪花</p>
-          <span>100分</span>
-        </li>
-        <li className="module-class-rank-list-item">
-          <i className="module-class-rank-list-item-icon6" />
-          <p>张雪花</p>
-          <span>100分</span>
-        </li>
       </ul>
     </div>
   );

src/pages/Dashboard/index.jsx

@@ -6,9 +6,31 @@ import StudyStatus from "./components/StudyStatus";
 import Rank from "@/components/Rank";
 import StageProgress from "@/components/StageProgress";
 import TaskList from "./components/TaskList";
+import { getClassRanking } from "@/services/dashboard";
 import "./index.css";
 
 const Dashboard = () => {
+  const [rankingData, setRankingData] = useState(null);
+  const [rankingLoading, setRankingLoading] = useState(true);
+
+  useEffect(() => {
+    fetchRankingData();
+  }, []);
+
+  const fetchRankingData = async () => {
+    try {
+      setRankingLoading(true);
+      const response = await getClassRanking();
+      if (response) {
+        setRankingData(response);
+      }
+    } catch (error) {
+      console.error('Failed to fetch ranking data:', error);
+    } finally {
+      setRankingLoading(false);
+    }
+  };
+
   return (
     <div className="dashboard">
       <StageProgress showBlockageAlert={true} />
@@ -18,7 +40,7 @@ const Dashboard = () => {
         <QuickAccess />
         <CalendarTaskModule />
         <StudyStatus />
-        <Rank />
+        <Rank data={rankingData} loading={rankingLoading} />
         <TaskList />
       </div>
     </div>

src/services/dashboard.js

@@ -20,7 +20,7 @@ export async function getLearningProgressSummary(params = {}) {
 }
 
 // 获取当前学生班级排名
-export async function getClassRanking(params = {}) {
+export async function getClassRanking(params = { limit: 6 }) {
   return request({
     url: `/api/rankings/class`,
     method: "GET",