修复班级排名

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">
-          <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"
-            />
-          </Avatar>
-          <span className="module-class-rank-podium-name">你好呀</span>
-          <i className="module-class-rank-podium-icon2"></i>
-        </li>
-        <li className="module-class-rank-podium-item1">
-          <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"
-            />
-          </Avatar>
-          <span className="module-class-rank-podium-name">你好呀</span>
-          <i className="module-class-rank-podium-icon1"></i>
-        </li>
-        <li className="module-class-rank-podium-item3">
-          <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"
-            />
-          </Avatar>
-          <span className="module-class-rank-podium-name">你好呀</span>
-          <i className="module-class-rank-podium-icon3"></i>
-        </li>
+        {podiumStudents.map((student, index) => {
+          const positions = ["item2", "item1", "item3"];
+          const icons = ["icon2", "icon1", "icon3"];
+          
+          if (!student) {
+            return (
+              <li key={`empty-${index}`} className={`module-class-rank-podium-${positions[index]} empty`}>
+                <div className="module-class-rank-podium-placeholder">
+                  <span>-</span>
+                </div>
+              </li>
+            );
+          }
+          
+          return (
+            <li key={student.studentId} className={`module-class-rank-podium-${positions[index]}`}>
+              <Avatar className="module-class-rank-podium-avatar">
+                {student.avatar ? (
+                  <img alt="avatar" src={student.avatar} />
+                ) : (
+                  student.studentName?.charAt(0) || "?"
+                )}
+              </Avatar>
+              <span className="module-class-rank-podium-name">
+                {student.studentName || "未知"}
+              </span>
+              <i className={`module-class-rank-podium-${icons[index]}`}></i>
+            </li>
+          );
+        })}
       </ul>
       <ul className="module-class-rank-list">
-        <li className="module-class-rank-list-item">
-          <i className="module-class-rank-list-item-icon4" />
-          <p>张雪花</p>
-          <span>100分</span>
-        </li>
-        <li className="module-class-rank-list-item">
-          <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>
+        {listStudents.map((student, index) => (
+          <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>
   );