配置后端对接

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

@@ -1,9 +1,60 @@
 import { Avatar } from "@arco-design/web-react";
-import { mockData } from "@/data/mockData";
+import { useState, useEffect } from "react";
+import { studentAPI } from "@/services/api";
+import { mapProfile } from "@/utils/dataMapper";
 import "./index.css";
 
 const ProfileCard = () => {
-  const { profile } = mockData;
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchProfile();
+  }, []);
+
+  const fetchProfile = async () => {
+    try {
+      setLoading(true);
+      // Get current logged-in student information
+      const studentData = await studentAPI.getCurrentStudent();
+      
+      if (studentData) {
+        const mappedProfile = mapProfile(studentData);
+        setProfile(mappedProfile);
+      } else {
+        throw new Error("Failed to get current student data");
+      }
+    } catch (error) {
+      console.error("Failed to fetch profile:", error);
+      // Show error message instead of fake data
+      setProfile({
+        name: "数据加载失败",
+        studentId: "请检查后端服务",
+        school: error.message || "后端未运行",
+        major: "请确保数据库已初始化",
+        badges: {
+          credits: 0,
+          classRank: 0,
+          mbti: "-"
+        },
+        courses: []
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="profile-card-wrapper" style={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        alignItems: 'center' 
+      }}>
+        <p>加载中...</p>
+      </div>
+    );
+  }
 
   return (
     <div className="profile-card-wrapper">
@@ -15,9 +66,9 @@ const ProfileCard = () => {
           />
         </Avatar>
         <div className="profile-card-user-name">
-          <span className="profile-card-user-name-text">{profile.name}</span>
+          <span className="profile-card-user-name-text">{profile?.name}</span>
           <p className="profile-card-user-name-student-id">
-            学号： {profile.studentId}
+            学号： {profile?.studentId}
           </p>
         </div>
       </div>
@@ -25,7 +76,7 @@ const ProfileCard = () => {
         <li className="profile-card-achievement-info-item">
           <span className="profile-card-achievement-info-item-title">学分</span>
           <span className="profile-card-achievement-info-item-text">
-            {profile?.badges?.credits}
+            {profile?.badges?.credits || 0}
           </span>
         </li>
         <li className="profile-card-achievement-info-item">
@@ -33,13 +84,13 @@ const ProfileCard = () => {
             班级排名
           </span>
           <span className="profile-card-achievement-info-item-text">
-            {profile?.badges?.classRank}
+            {profile?.badges?.classRank || '-'}
           </span>
         </li>
         <li className="profile-card-achievement-info-item">
           <span className="profile-card-achievement-info-item-title">MBTI</span>
           <span className="profile-card-achievement-info-item-text">
-            {profile?.badges?.mbti}
+            {profile?.badges?.mbti || '-'}
           </span>
         </li>
       </ul>
@@ -48,30 +99,30 @@ const ProfileCard = () => {
           <i className="profile-card-class-info-item-icon icon-school" />
           <span className="profile-card-class-info-item-title">学校</span>
           <span className="profile-card-class-info-item-text">
-            {profile?.school}
+            {profile?.school || '-'}
           </span>
         </li>
         <li className="profile-card-class-info-item">
           <i className="profile-card-class-info-item-icon icon-major" />
           <span className="profile-card-class-info-item-title">专业</span>
           <span className="profile-card-class-info-item-text">
-            {profile?.major}
+            {profile?.major || '-'}
           </span>
         </li>
         <li className="profile-card-class-info-item">
           <i className="profile-card-class-info-item-icon icon-location" />
           <span className="profile-card-class-info-item-title">
-            就业管家课程
+            班级
           </span>
           <span className="profile-card-class-info-item-text">
-            {profile?.course}
+            {profile?.className || '-'}
           </span>
         </li>
         <li className="profile-card-class-info-item">
           <i className="profile-card-class-info-item-icon icon-course" />
-          <span className="profile-card-class-info-item-title">垂直方向</span>
+          <span className="profile-card-class-info-item-title">学习阶段</span>
           <span className="profile-card-class-info-item-text">
-            {profile?.course}
+            {profile?.stageName || '-'}
           </span>
         </li>
       </ul>