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

import { Avatar } from "@arco-design/web-react";
import { useState, useEffect } from "react";
import { studentAPI } from "@/services/api";
import { mapProfile } from "@/utils/dataMapper";
import "./index.css";

const ProfileCard = () => {
  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">
      <div className="profile-card-user-info">
        <Avatar className="profile-card-user-avatar">
          <img
            alt="avatar"
            src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
          />
        </Avatar>
        <div className="profile-card-user-name">
          <span className="profile-card-user-name-text">{profile?.name}</span>
          <p className="profile-card-user-name-student-id">
            学号： {profile?.studentId}
          </p>
        </div>
      </div>
      <ul className="profile-card-achievement-info">
        <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 || 0}
          </span>
        </li>
        <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?.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 || '-'}
          </span>
        </li>
      </ul>
      <ul className="profile-card-class-info">
        <li className="profile-card-class-info-item">
          <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 || '-'}
          </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 || '-'}
          </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?.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-text">
            {profile?.stageName || '-'}
          </span>
        </li>
      </ul>
    </div>
  );
};

export default ProfileCard;