feat：学员中心：资料页面对接；教师后台：个人中心对接

src/api/modules/userCenter.ts

@@ -7,3 +7,9 @@ export class ActivityListApi {
     return ApiRequest.get('/aiol/aiolActivity/list')
   }
 }
+
+export class UserInfoApi {
+  static async editUserInfo(data: any): Promise<any> {
+    return ApiRequest.post('/aiol/aiolUser/edit_profile', data)
+  }
+}

src/components/admin/PersonalCenter.vue

@@ -208,7 +208,13 @@
 
 <script setup lang="ts">
 import { ref, reactive } from "vue";
+import { useMessage } from "naive-ui";
 import { useUserStore } from "@/stores/user";
+import { UploadApi } from "@/api/modules/upload";
+import { UserInfoApi } from "@/api/modules/userCenter";
+import { AuthApi } from "@/api/modules/auth";
+
+const message = useMessage();
 
 interface FormData {
   name: string;
@@ -250,9 +256,47 @@ function startEdit() {
   isEditing.value = true;
 }
 
-function save() {
+async function save() {
-  // 可在此接入后端提交逻辑
   isEditing.value = false;
+
+  //判断必填
+  if (!formData.name) {
+    message.error("姓名不能为空");
+    return;
+  }
+  // 调用修改用户信息接口
+  try {
+    const data = {
+      realname: formData.name,
+      avatar: avatar.value,
+      tag: formData.intro,
+    };
+
+    const response = await UserInfoApi.editUserInfo(data);
+    if (response.data.code === 200) {
+      message.success("用户信息修改成功");
+      const userInfoResponse = await AuthApi.getUserInfo();
+
+      if (userInfoResponse.success && userInfoResponse.result) {
+        // 将后端用户信息转换为前端格式
+        const convertedUser = AuthApi.convertBackendUserToUser(
+          userInfoResponse.result
+        );
+
+        // 保存转换后的用户信息
+        userStore.user = convertedUser;
+        localStorage.setItem("user", JSON.stringify(convertedUser));
+
+      } else {
+        console.warn("⚠️ 获取用户信息失败，使用登录返回的基本信息");
+      }
+    } else {
+      message.error("用户信息修改失败");
+    }
+  } catch (error) {
+    console.error("用户信息修改错误:", error);
+    message.error("用户信息修改失败，请重试");
+  }
 }
 
 function cancelEdit() {
@@ -292,7 +336,7 @@ function triggerUpload() {
   fileInput.value?.click();
 }
 
-function handleFileChange(event: Event) {
+async function handleFileChange(event: Event) {
   const target = event.target as HTMLInputElement;
   const file = target.files?.[0];
   if (!file) return;
@@ -309,15 +353,35 @@ function handleFileChange(event: Event) {
     return;
   }
 
-  // 创建预览
+  // 上传头像到服务器
-  const reader = new FileReader();
+   try {
-  reader.onload = (e) => {
+    message.loading("正在上传头像...");
-    avatar.value = e.target?.result as string;
-  };
-  reader.readAsDataURL(file);
 
-  // 清空input值，避免选择同一文件时不触发change
+    const response: any = await UploadApi.uploadCourseThumbnail(
-  target.value = "";
+      file,
+      0,
+      (progress) => {
+        console.log(`上传进度: ${progress}%`);
+      }
+    );
+
+    if (response.data.code === 0) {
+      message.destroyAll();
+      avatar.value = response.data.message;
+      message.success("头像上传成功");
+      console.log("上传的头像URL:", response.message);
+    } else {
+      message.error("头像上传失败");
+    }
+  } catch (error) {
+    console.error("头像上传错误:", error);
+    message.error("头像上传失败，请重试");
+  } finally {
+    // 清空input值，允许重新选择同一个文件
+    if (target) {
+      target.value = "";
+    }
+  }
 }
 </script>
 

src/components/profile/CourseContent.vue

@@ -111,12 +111,12 @@
                   : "时间待定"
               }}</span
             >
-            <img
+            <!-- <img
               class="thumbnail_8"
               referrerpolicy="no-referrer"
               src="/images/profile/33.png"
             />
-            <!-- <span class="text_22">报名：{{ course.enrollCount }}/{{ course.maxEnroll }}</span> -->
+            <span class="text_22">{{ course.enrollmentCount }}</span> -->
             <div
               class="text-wrapper_2 flex-col"
               @click="goToCourseDetail(course)"

src/components/profile/MaterialsContent.vue

@@ -0,0 +1,755 @@
+<template>
+  <div class="materials-content">
+    <!-- 资料页面标签页 -->
+    <div class="materials-header">
+      <div class="materials-tabs">
+        <span
+          class="materials-tab-item"
+          :class="{ active: activeMaterialsTab === 'basic' }"
+          @click="handleMaterialsTabChange('basic')"
+        >
+          基础信息
+        </span>
+        <span
+          class="materials-tab-item"
+          :class="{ active: activeMaterialsTab === 'password' }"
+          @click="handleMaterialsTabChange('password')"
+        >
+          密码修改
+        </span>
+      </div>
+    </div>
+
+    <!-- 基础信息页面 -->
+    <div v-if="activeMaterialsTab === 'basic'" class="basic-info-content">
+      <div class="basic-info-container">
+        <h3 class="basic-info-title">基础信息</h3>
+
+        <!-- 用户头像 -->
+        <div class="avatar-section">
+          <div class="avatar-container">
+            <SafeAvatar
+              :src="userInfo.avatar"
+              :name="
+                userStore.user?.profile?.realName ||
+                userStore.user?.nickname ||
+                userStore.user?.username ||
+                '用户'
+              "
+              :size="68"
+              alt="用户头像"
+              class="user-avatar-large"
+            />
+            <div
+              class="avatar-edit-btn"
+              :class="{ uploading: isUploading }"
+              @click="triggerAvatarUpload"
+            >
+              <img
+                v-if="!isUploading"
+                src="/images/auth/revise.png"
+                alt="编辑头像"
+                class="edit-icon"
+              />
+              <div v-else class="uploading-icon">⟳</div>
+            </div>
+            <!-- 隐藏的文件输入 -->
+            <input
+              ref="avatarInput"
+              type="file"
+              accept="image/*"
+              @change="handleAvatarUpload"
+              style="display: none"
+            />
+          </div>
+        </div>
+
+        <!-- 基础信息表单 -->
+        <div class="basic-info-form">
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label">昵称：</label>
+              <NInput v-model:value="userInfo.nickname" placeholder="张成学" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">性别：</label>
+              <NSelect
+                v-model:value="userInfo.gender"
+                :options="genderOptions"
+              />
+            </div>
+            <div class="form-group">
+              <label class="form-label">所在院校：</label>
+              <NSelect v-model:value="userInfo.college" :options="schoolList" />
+            </div>
+          </div>
+          <div class="sub-btn">
+            <NButton type="primary" @click="saveUserInfo">保存</NButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 密码修改页面 -->
+    <div v-else-if="activeMaterialsTab === 'password'" class="password-content">
+      <div class="password-container">
+        <h3 class="password-title">密码修改</h3>
+
+        <div class="password-form">
+          <!-- 账号显示 -->
+          <div class="password-form-group">
+            <label class="password-form-label">账号：</label>
+            <NInput
+              v-model:value="userInfo.phone"
+              type="text"
+              :disabled="true"
+            />
+          </div>
+
+          <!-- 原密码 -->
+          <div class="password-form-group">
+            <label class="password-form-label">原密码：</label>
+            <NInput
+              v-model:value="passwordForm.currentPassword"
+              type="password"
+              placeholder="请输入原密码"
+            />
+          </div>
+
+          <!-- 新密码 -->
+          <div class="password-form-group">
+            <label class="password-form-label">新密码：</label>
+            <NInput
+              v-model:value="passwordForm.newPassword"
+              type="password"
+              placeholder="请输入新密码"
+            />
+          </div>
+
+          <!-- 确认密码 -->
+          <div class="password-form-group">
+            <label class="password-form-label">确认密码：</label>
+            <NInput
+              v-model:value="passwordForm.confirmPassword"
+              type="password"
+              placeholder="请输入确认新密码"
+            />
+          </div>
+
+          <!-- 保存按钮 -->
+          <div class="password-form-actions">
+            <NButton type="primary" @click="savePassword">保存</NButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useMessage, NInput, NSelect, NButton } from "naive-ui";
+import { useUserStore } from "@/stores/user";
+import SafeAvatar from "@/components/common/SafeAvatar.vue";
+import { TeachCourseApi } from "@/api/modules/teachCourse";
+import { UploadApi } from "@/api/modules/upload";
+import { UserInfoApi } from "@/api/modules/userCenter";
+import { AuthApi } from "@/api/modules/auth";
+
+const message = useMessage();
+const userStore = useUserStore();
+
+// 头像上传相关
+const avatarInput = ref<HTMLInputElement | null>(null);
+const isUploading = ref(false);
+
+// 资料相关状态
+const activeMaterialsTab = ref("basic");
+
+// 用户信息
+const userInfo = reactive({
+  avatar: userStore.user?.avatar || "/images/traings/traing1.png",
+  nickname: userStore.user?.profile?.realName || userStore.user?.nickname,
+  gender: userStore.user?.profile?.gender === "male" ? 1 : 2,
+  college: userStore.user?.profile?.location || "",
+  phone: userStore.user?.phone || "",
+});
+
+// 性别选项
+const genderOptions = [
+  { label: "男", value: 1 },
+  { label: "女", value: 2 },
+];
+
+// 密码修改表单
+const passwordForm = reactive({
+  currentPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+});
+
+// 资料相关方法
+const handleMaterialsTabChange = (tab: string) => {
+  activeMaterialsTab.value = tab;
+};
+
+// 保存密码修改
+const savePassword = () => {
+  if (
+    !passwordForm.currentPassword ||
+    !passwordForm.newPassword ||
+    !passwordForm.confirmPassword
+  ) {
+    message.error("请填写完整的密码信息");
+    return;
+  }
+
+  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+    message.error("两次输入的新密码不一致");
+    return;
+  }
+
+  if (passwordForm.newPassword.length < 6) {
+    message.error("新密码长度不能少于6位");
+    return;
+  }
+
+  // 这里可以添加实际的密码修改逻辑
+  message.success("密码修改成功");
+
+  // 清空表单
+  passwordForm.currentPassword = "";
+  passwordForm.newPassword = "";
+  passwordForm.confirmPassword = "";
+};
+
+// 头像上传相关方法
+const triggerAvatarUpload = () => {
+  if (isUploading.value) {
+    message.warning("头像正在上传中，请稍等...");
+    return;
+  }
+  avatarInput.value?.click();
+};
+
+const handleAvatarUpload = async (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+
+  if (!file) return;
+
+  // 文件类型检查
+  if (!file.type.startsWith("image/")) {
+    message.error("请选择图片文件");
+    return;
+  }
+
+  // 文件大小检查 (限制5MB)
+  if (file.size > 5 * 1024 * 1024) {
+    message.error("图片文件大小不能超过5MB");
+    return;
+  }
+
+  try {
+    isUploading.value = true;
+    message.loading("正在上传头像...");
+
+    const response: any = await UploadApi.uploadCourseThumbnail(
+      file,
+      0,
+      (progress) => {
+        console.log(`上传进度: ${progress}%`);
+      }
+    );
+
+    if (response.data.code === 0) {
+      message.destroyAll();
+      userInfo.avatar = response.data.message;
+      message.success("头像上传成功");
+      console.log("上传的头像URL:", response.message);
+    } else {
+      message.error("头像上传失败");
+    }
+  } catch (error) {
+    console.error("头像上传错误:", error);
+    message.error("头像上传失败，请重试");
+  } finally {
+    isUploading.value = false;
+    // 清空input值，允许重新选择同一个文件
+    if (target) {
+      target.value = "";
+    }
+  }
+};
+
+const saveUserInfo = async () => {
+  if (!userInfo.nickname) {
+    message.error("昵称不能为空");
+    return;
+  }
+
+  if (userInfo.nickname.length > 20) {
+    message.error("昵称长度不能超过20个字符");
+    return;
+  }
+
+  try {
+    const data = {
+      realname: userInfo.nickname,
+      avatar: userInfo.avatar,
+      sex: userInfo.gender,
+      college: userInfo.college,
+    };
+
+    const response = await UserInfoApi.editUserInfo(data);
+    if (response.data.code === 200) {
+      message.success("用户信息修改成功");
+      const userInfoResponse = await AuthApi.getUserInfo();
+
+      if (userInfoResponse.success && userInfoResponse.result) {
+        // 将后端用户信息转换为前端格式
+        const convertedUser = AuthApi.convertBackendUserToUser(
+          userInfoResponse.result
+        );
+
+        // 保存转换后的用户信息
+        userStore.user = convertedUser;
+        localStorage.setItem("user", JSON.stringify(convertedUser));
+
+      } else {
+        console.warn("⚠️ 获取用户信息失败，使用登录返回的基本信息");
+      }
+    } else {
+      message.error("用户信息修改失败");
+    }
+  } catch (error) {
+    console.error("用户信息修改错误:", error);
+    message.error("用户信息修改失败，请重试");
+  }
+};
+
+const schoolList = ref<Array<{ label: string; value: string }>>([]);
+
+const initSchoolList = async () => {
+  try {
+    const response = await TeachCourseApi.getSchoolList();
+    console.log("学校列表:", response);
+    schoolList.value = response.data.result.map(
+      (item: { name: string; id: string }) => ({
+        label: item,
+        value: item,
+      })
+    );
+  } catch (error) {
+    console.error("获取学校列表失败:", error);
+  }
+};
+
+onMounted(async () => {
+  await initSchoolList();
+});
+</script>
+
+<style scoped>
+/* 我的资料页面样式 */
+.materials-content {
+  background: white;
+  border-radius: 0.42vw;
+  /* 8px转换为vw */
+  padding: 0;
+  margin: 1.04vh 0;
+  /* 20px转换为vh */
+}
+
+.materials-header {
+  padding-bottom: 1vh;
+  /* 30px 40px转换 */
+  border-bottom: 1.5px solid #e6e6e6;
+}
+
+.materials-tabs {
+  display: flex;
+  gap: 2.08vw;
+  /* 40px转换为vw */
+}
+
+.materials-tab-item {
+  font-size: 0.83vw;
+  /* 16px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  color: #666;
+  cursor: pointer;
+  padding: 0.52vh 0;
+  /* 10px转换为vh */
+  border-bottom: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.materials-tab-item.active {
+  color: #0288d1;
+  font-weight: 500;
+  /* 移除蓝色下划线 */
+}
+
+.materials-tab-item:hover {
+  color: #0288d1;
+}
+
+/* 基础信息页面样式 */
+.basic-info-content {
+  padding: 1.04vh 0;
+  /* 20px转换，减少内边距因为容器已有边距 */
+}
+
+.basic-info-container {
+  margin: 10px auto;
+  border: 1.5px solid #d8d8d8;
+  /* 8px转换为vw */
+  padding: 2.08vh 2.08vw;
+  /* 40px转换 */
+  background: white;
+}
+
+.basic-info-title {
+  font-size: 16px;
+  /* 18px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 2.08vh;
+  /* 40px转换为vh */
+  padding-bottom: 1.04vh;
+  /* 20px转换为vh */
+  border-bottom: 1.5px solid #e6e6e6;
+}
+
+/* 头像部分样式 */
+.avatar-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 3.13vh;
+  /* 60px转换为vh */
+}
+
+.avatar-container {
+  position: relative;
+  display: inline-block;
+  width: 78px !important;
+  height: 78px !important;
+  border: 1.5px solid #0292d5;
+  border-radius: 50%;
+}
+
+.user-avatar-large {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 68px !important;
+  /* 68px转换为vw，覆盖SafeAvatar样式 */
+  height: 68px !important;
+  /* 68px转换为vw，覆盖SafeAvatar样式 */
+  border-radius: 50%;
+}
+
+.user-avatar-large img {
+  object-fit: cover;
+}
+
+.avatar-edit-btn {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 25px;
+  /* 25px转换为vw */
+  height: 25px;
+  /* 25px转换为vw */
+  background: #0288d1;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.avatar-edit-btn:hover {
+  background: #0277bd;
+  /* 稍微深一点的蓝色作为悬停效果 */
+}
+
+.avatar-edit-btn.uploading {
+  background: #666;
+  cursor: not-allowed;
+}
+
+.uploading-icon {
+  color: white;
+  font-size: 14px;
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.avatar-edit-btn .edit-icon {
+  width: 11px;
+  /* 11px转换为vw */
+  height: 11px;
+  /* 11px转换为vw */
+  object-fit: contain;
+}
+
+/* 表单样式 */
+.basic-info-form {
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  flex-direction: row;
+  /* 改为水平展示 */
+  gap: 2.08vw;
+  /* 40px转换为vw */
+  justify-content: space-between;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5vh;
+  /* 30px转换为vh，增加标签和输入框之间的距离 */
+  width: 30%;
+}
+
+.sub-btn {
+  margin-top: 20px;
+}
+
+.form-label {
+  width: auto;
+  /* 改为自适应宽度，避免换行 */
+  min-width: 4.17vw;
+  /* 80px转换为vw，确保最小宽度 */
+  height: 1.04vh;
+  /* 20px转换为vh */
+  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  color: #999999;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* 密码修改页面样式 */
+.password-content {
+  padding: 1.04vh 0;
+  /* 20px转换为vh */
+}
+
+.password-container {
+  margin: 10px auto;
+  border: 1.5px solid #d8d8d8;
+  /* 8px转换为vw */
+  padding: 2.08vh 2.08vw;
+  /* 40px转换 */
+  background: white;
+}
+
+.password-title {
+  font-size: 16px;
+  /* 18px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 10px;
+  /* 40px转换为vh */
+  padding-bottom: 10px;
+  /* 20px转换为vh */
+  border-bottom: 1.5px solid #e6e6e6;
+}
+
+.password-form {
+  width: 100%;
+}
+
+.password-form-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.56vh;
+  /* 30px转换为vh */
+  margin-bottom: 2.08vh;
+  /* 40px转换为vh */
+}
+
+.password-form-label {
+  margin-top: 15px;
+  margin-bottom: 5px;
+  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  font-size: 14px;
+  /* 14px转换为vw */
+  color: #999999;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.password-form-actions {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 15px;
+  margin-bottom: 10px;
+  /* 40px转换为vh */
+}
+
+/* 账号显示样式 */
+.account-display {
+  width: 15.63vw;
+  /* 300px转换为vw */
+  height: 2.08vh;
+  /* 40px转换为vh */
+  border: 1px solid #e8e8e8;
+  border-radius: 0.21vw;
+  /* 4px转换为vw */
+  padding: 0.52vh 0.52vw;
+  /* 10px转换 */
+  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  color: #666;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  background: #f5f5f5;
+  box-sizing: border-box;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .materials-tabs {
+    gap: 3vw;
+  }
+
+  .materials-tab-item {
+    font-size: 1vw;
+  }
+
+  .user-avatar-large {
+    width: 6vw !important;
+    height: 6vw !important;
+  }
+
+  .avatar-edit-btn {
+    width: 2.6vw;
+    /* 平板端按比例调整：25px * 1.3 ≈ 32px */
+    height: 2.6vw;
+  }
+
+  .avatar-edit-btn .edit-icon {
+    width: 1.14vw;
+    /* 平板端按比例调整：11px * 1.3 ≈ 14px */
+    height: 1.14vw;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 3vh;
+  }
+
+  .form-label {
+    width: auto;
+    font-size: 1vw;
+  }
+
+  .basic-info-title,
+  .password-title {
+    font-size: 1.2vw;
+  }
+}
+
+@media (max-width: 576px) {
+  .materials-content {
+    margin: 2vh 1vw;
+    border-radius: 1vw;
+  }
+
+  .materials-header {
+    padding: 3vh 4vw;
+  }
+
+  .materials-tabs {
+    gap: 6vw;
+  }
+
+  .materials-tab-item {
+    font-size: 3vw;
+  }
+
+  .basic-info-content,
+  .password-content {
+    padding: 4vh 4vw;
+  }
+
+  .user-avatar-large {
+    width: 15vw !important;
+    height: 15vw !important;
+  }
+
+  .avatar-edit-btn {
+    width: 6.5vw;
+    /* 手机端按比例调整：25px * 2.6 ≈ 65px */
+    height: 6.5vw;
+  }
+
+  .avatar-edit-btn .edit-icon {
+    width: 2.86vw;
+    /* 手机端按比例调整：11px * 2.6 ≈ 29px */
+    height: 2.86vw;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 4vh;
+  }
+
+  .form-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1vh;
+  }
+
+  .form-label {
+    width: auto;
+    font-size: 3.5vw;
+    text-align: left;
+  }
+
+  .basic-info-title,
+  .password-title {
+    font-size: 4vw;
+  }
+}
+</style>

src/views/Profile.vue

@@ -748,102 +748,7 @@
         </div>
 
         <!-- 我的资料页面 -->
-        <div v-else-if="activeTab === 'materials'" class="materials-content">
+        <MaterialsContent v-else-if="activeTab === 'materials'"></MaterialsContent>
-          <!-- 资料页面标签页 -->
-          <div class="materials-header">
-            <div class="materials-tabs">
-              <span class="materials-tab-item" :class="{ active: activeMaterialsTab === 'basic' }"
-                @click="handleMaterialsTabChange('basic')">
-                基础信息
-              </span>
-              <span class="materials-tab-item" :class="{ active: activeMaterialsTab === 'password' }"
-                @click="handleMaterialsTabChange('password')">
-                密码修改
-              </span>
-            </div>
-          </div>
-
-          <!-- 基础信息页面 -->
-          <div v-if="activeMaterialsTab === 'basic'" class="basic-info-content">
-            <div class="basic-info-container">
-              <h3 class="basic-info-title">基础信息</h3>
-
-              <!-- 用户头像 -->
-              <div class="avatar-section">
-                <div class="avatar-container">
-                  <SafeAvatar :src="userStore.user?.avatar"
-                    :name="userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username || '用户'"
-                    :size="68" alt="用户头像" class="user-avatar-large" />
-                  <div class="avatar-edit-btn">
-                    <img src="/images/auth/revise.png" alt="编辑头像" class="edit-icon" />
-                  </div>
-                </div>
-              </div>
-
-              <!-- 基础信息表单 -->
-              <div class="basic-info-form">
-                <div class="form-row">
-                  <div class="form-group">
-                    <label class="form-label">昵称：</label>
-                    <input v-model="userInfo.nickname" type="text" class="form-input" placeholder="张成学" />
-                  </div>
-                  <div class="form-group">
-                    <label class="form-label">性别：</label>
-                    <select v-model="userInfo.gender" class="form-select">
-                      <option value="男">男</option>
-                      <option value="女">女</option>
-                    </select>
-                  </div>
-                  <div class="form-group">
-                    <label class="form-label">所在院校：</label>
-                    <input v-model="userInfo.college" type="text" class="form-input" placeholder="北京清华大学" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 密码修改页面 -->
-          <div v-else-if="activeMaterialsTab === 'password'" class="password-content">
-            <div class="password-container">
-              <h3 class="password-title">密码修改</h3>
-
-              <div class="password-form">
-                <!-- 账号显示 -->
-                <div class="password-form-group">
-                  <label class="password-form-label">账号：</label>
-                  <div class="account-display">{{ userInfo.phone || '18658822666654' }}</div>
-                </div>
-
-                <!-- 原密码 -->
-                <div class="password-form-group">
-                  <label class="password-form-label">原密码：</label>
-                  <input v-model="passwordForm.currentPassword" type="password" class="password-form-input"
-                    placeholder="请输入原密码" />
-                </div>
-
-                <!-- 新密码 -->
-                <div class="password-form-group">
-                  <label class="password-form-label">新密码：</label>
-                  <input v-model="passwordForm.newPassword" type="password" class="password-form-input"
-                    placeholder="请输入新密码" />
-                </div>
-
-                <!-- 确认密码 -->
-                <div class="password-form-group">
-                  <label class="password-form-label">确认密码：</label>
-                  <input v-model="passwordForm.confirmPassword" type="password" class="password-form-input"
-                    placeholder="请输入确认新密码" />
-                </div>
-
-                <!-- 保存按钮 -->
-                <div class="password-form-actions">
-                  <button class="password-save-btn" @click="savePassword">保存</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
 
         <!-- 我的下载页面 -->
         <div v-else-if="activeTab === 'download'" class="download-content"
@@ -1003,6 +908,7 @@ import MenuApi from '@/api/modules/menu'
 import CourseContent from '@/components/profile/CourseContent.vue'
 import PracticeContent from '@/components/profile/PracticeContent.vue'
 import ActivityContent from '@/components/profile/ActivityContent.vue'
+import MaterialsContent from '@/components/profile/MaterialsContent.vue'
 
 // const { t, locale } = useI18n()
 const router = useRouter()
@@ -1237,25 +1143,6 @@ const likeMessageCount = ref(0)
 const systemMessageCount = ref(0)
 const messageCountsLoading = ref(false)
 
-// 资料相关状态
-const activeMaterialsTab = ref('basic')
-
-// 用户信息
-const userInfo = reactive({
-  avatar: '/images/traings/traing1.png',
-  nickname: '张成学',
-  gender: '男',
-  college: '北京清华大学',
-  phone: '18658822666654'
-})
-
-// 密码修改表单
-const passwordForm = reactive({
-  currentPassword: '',
-  newPassword: '',
-  confirmPassword: ''
-})
-
 // 下载相关状态
 const activeDownloadTab = ref('courseware')
 const activeFileMenu = ref<number | null>(null)
@@ -2893,37 +2780,6 @@ const getLikeActionText = (type: string) => {
   }
 }
 
-// 资料相关方法
-const handleMaterialsTabChange = (tab: string) => {
-  activeMaterialsTab.value = tab
-}
-
-// 保存密码修改
-const savePassword = () => {
-  if (!passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
-    message.error('请填写完整的密码信息')
-    return
-  }
-
-  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
-    message.error('两次输入的新密码不一致')
-    return
-  }
-
-  if (passwordForm.newPassword.length < 6) {
-    message.error('新密码长度不能少于6位')
-    return
-  }
-
-  // 这里可以添加实际的密码修改逻辑
-  message.success('密码修改成功')
-
-  // 清空表单
-  passwordForm.currentPassword = ''
-  passwordForm.newPassword = ''
-  passwordForm.confirmPassword = ''
-}
-
 // 下载相关方法
 const handleDownloadTabChange = (tab: string) => {
   activeDownloadTab.value = tab
@@ -7710,369 +7566,6 @@ onActivated(() => {
   }
 }
 
-/* 我的资料页面样式 */
-.materials-content {
-  background: white;
-  border-radius: 0.42vw;
-  /* 8px转换为vw */
-  padding: 0;
-  margin: 1.04vh 0;
-  /* 20px转换为vh */
-}
-
-.materials-header {
-  padding-bottom: 1vh;
-  /* 30px 40px转换 */
-  border-bottom: 1.5px solid #E6E6E6;
-}
-
-.materials-tabs {
-  display: flex;
-  gap: 2.08vw;
-  /* 40px转换为vw */
-}
-
-.materials-tab-item {
-  font-size: 0.83vw;
-  /* 16px转换为vw */
-  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
-  font-weight: normal;
-  color: #666;
-  cursor: pointer;
-  padding: 0.52vh 0;
-  /* 10px转换为vh */
-  border-bottom: 2px solid transparent;
-  transition: all 0.3s ease;
-}
-
-.materials-tab-item.active {
-  color: #0288D1;
-  font-weight: 500;
-  /* 移除蓝色下划线 */
-}
-
-.materials-tab-item:hover {
-  color: #0288D1;
-}
-
-/* 基础信息页面样式 */
-.basic-info-content {
-  padding: 1.04vh 0;
-  /* 20px转换，减少内边距因为容器已有边距 */
-}
-
-.basic-info-container {
-  height: 310px;
-  margin: 10px auto;
-  border: 1.5px solid #D8D8D8;
-  /* 8px转换为vw */
-  padding: 2.08vh 2.08vw;
-  /* 40px转换 */
-  background: white;
-}
-
-.basic-info-title {
-  font-size: 16px;
-  /* 18px转换为vw */
-  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 2.08vh;
-  /* 40px转换为vh */
-  padding-bottom: 1.04vh;
-  /* 20px转换为vh */
-  border-bottom: 1.5px solid #E6E6E6;
-}
-
-/* 头像部分样式 */
-.avatar-section {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 3.13vh;
-  /* 60px转换为vh */
-}
-
-.avatar-container {
-  position: relative;
-  display: inline-block;
-  width: 78px !important;
-  height: 78px !important;
-  border: 1.5px solid #0292D5;
-  border-radius: 50%;
-}
-
-.user-avatar-large {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 68px !important;
-  /* 68px转换为vw，覆盖SafeAvatar样式 */
-  height: 68px !important;
-  /* 68px转换为vw，覆盖SafeAvatar样式 */
-  border-radius: 50%;
-}
-
-.user-avatar-large img {
-  object-fit: cover;
-}
-
-.avatar-edit-btn {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 25px;
-  /* 25px转换为vw */
-  height: 25px;
-  /* 25px转换为vw */
-  background: #0288D1;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.avatar-edit-btn:hover {
-  background: #0277BD;
-  /* 稍微深一点的蓝色作为悬停效果 */
-}
-
-.avatar-edit-btn .edit-icon {
-  width: 11px;
-  /* 11px转换为vw */
-  height: 11px;
-  /* 11px转换为vw */
-  object-fit: contain;
-}
-
-/* 表单样式 */
-.basic-info-form {
-  width: 100%;
-}
-
-.form-row {
-  display: flex;
-  flex-direction: row;
-  /* 改为水平展示 */
-  gap: 2.08vw;
-  /* 40px转换为vw */
-  justify-content: space-between;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1.56vh;
-  /* 30px转换为vh，增加标签和输入框之间的距离 */
-}
-
-.form-label {
-  width: auto;
-  /* 改为自适应宽度，避免换行 */
-  min-width: 4.17vw;
-  /* 80px转换为vw，确保最小宽度 */
-  height: 1.04vh;
-  /* 20px转换为vh */
-  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 0.73vw;
-  /* 14px转换为vw */
-  color: #999999;
-  line-height: 1.04vh;
-  /* 20px转换为vh */
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  white-space: nowrap;
-  /* 防止换行 */
-  flex-shrink: 0;
-}
-
-.form-input,
-.form-select {
-  width: 276px;
-  height: 41px;
-  /* 80px转换为vh，与密码修改页面保持一致 */
-  padding: 1.04vh 0.73vw;
-  /* 20px 14px转换，增加上下内边距 */
-  background: #F5F8FB;
-  border: 1px solid #D8D8D8;
-  /* 4px转换为vw */
-  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 0.73vw;
-  /* 14px转换为vw */
-  color: #333333;
-  line-height: normal;
-  /* 改为normal，让浏览器自动计算合适的行高 */
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  transition: border-color 0.3s ease;
-  box-sizing: border-box;
-  /* 确保padding包含在总高度内 */
-}
-
-/* 专门为select元素优化 */
-.form-select {
-  display: flex;
-  align-items: center;
-  /* 垂直居中对齐 */
-  padding-top: 0.78vh;
-  /* 15px转换为vh，调整顶部内边距 */
-  padding-bottom: 0.78vh;
-  /* 15px转换为vh，调整底部内边距 */
-}
-
-.form-input:focus,
-.form-select:focus {
-  outline: none;
-  border-color: #1890ff;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-
-.form-input::placeholder {
-  color: #bfbfbf;
-}
-
-/* 密码修改页面样式 */
-.password-content {
-  margin-top: 15px;
-  /* 20px转换，减少内边距因为容器已有边距 */
-}
-
-.password-container {
-  /* 1000px转换为vw */
-  margin: 0 auto;
-  border: 1.5px solid #D8D8D8;
-  /* 8px转换为vw */
-  padding: 10px 15px;
-  /* 40px转换 */
-  background: white;
-}
-
-.password-title {
-  font-size: 16px;
-  /* 18px转换为vw */
-  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 10px;
-  /* 40px转换为vh */
-  padding-bottom: 10px;
-  /* 20px转换为vh */
-  border-bottom: 1.5px solid #E6E6E6;
-}
-
-.password-form {
-  width: 100%;
-}
-
-.password-form-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1.56vh;
-  /* 30px转换为vh */
-  margin-bottom: 2.08vh;
-  /* 40px转换为vh */
-}
-
-.password-form-label {
-  margin-top: 15px;
-  margin-bottom: 5px;
-  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 14px;
-  /* 14px转换为vw */
-  color: #999999;
-  line-height: 1.04vh;
-  /* 20px转换为vh */
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.account-display {
-  padding-left: 15px;
-  width: 100%;
-  height: 41px;
-  background: #F5F8FB;
-  border: 1.5px solid #D8D8D8;
-  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 0.73vw;
-  /* 14px转换为vw */
-  color: #333333;
-  line-height: normal;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-}
-
-.password-form-input {
-  width: 100%;
-  height: 41px;
-  padding: 10px 15px;
-  background: #F5F8FB;
-  border: 1.5px solid #D8D8D8;
-  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 0.73vw;
-  /* 14px转换为vw */
-  color: #333333;
-  line-height: normal;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  transition: border-color 0.3s ease;
-  box-sizing: border-box;
-}
-
-.password-form-input:focus {
-  outline: none;
-  border-color: #1890ff;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-
-.password-form-input::placeholder {
-  color: #bfbfbf;
-}
-
-.password-form-actions {
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 15px;
-  margin-bottom: 10px;
-  /* 40px转换为vh */
-}
-
-.password-save-btn {
-  width: 100px;
-  height: 33px;
-  background: #0288D1;
-  color: white;
-  border: none;
-  /* 4px转换为vw */
-  font-size: 14px;
-  /* 14px转换为vw */
-  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.password-save-btn:hover {
-  background: #40a9ff;
-}
-
-.password-save-btn:active {
-  background: #096dd9;
-}
-
 /* 我的下载页面样式 */
 .download-content {
   background: white;
@@ -8700,62 +8193,11 @@ onActivated(() => {
 }
 
 @media (max-width: 1200px) {
-  .materials-tabs {
-    gap: 3vw;
-  }
-
-  .materials-tab-item {
-    font-size: 1vw;
-  }
-
-  .user-avatar-large {
-    width: 6vw !important;
-    height: 6vw !important;
-  }
-
-  .avatar-edit-btn {
-    width: 2.6vw;
-    /* 平板端按比例调整：25px * 1.3 ≈ 32px */
-    height: 2.6vw;
-  }
-
-  .avatar-edit-btn .edit-icon {
-    width: 1.14vw;
-    /* 平板端按比例调整：11px * 1.3 ≈ 14px */
-    height: 1.14vw;
-  }
-
-  .form-row {
-    flex-direction: column;
-    gap: 3vh;
-  }
-
-  .form-label {
-    width: auto;
-    font-size: 1vw;
-  }
-
-  .form-input,
-  .form-select {
-    width: 30vw;
-    font-size: 1vw;
-  }
-
-  .basic-info-title,
-  .password-title {
-    font-size: 1.2vw;
-  }
-
-  .save-btn {
-    font-size: 1vw;
-    padding: 1vh 3vw;
-  }
 }
 
 @media (max-width: 576px) {
 
-  .download-content,
+  .download-content {
-  .materials-content {
     margin: 2vh 1vw;
     border-radius: 1vw;
   }
@@ -8857,75 +8299,6 @@ onActivated(() => {
     font-size: 3.5vw;
     padding: 2vh 3vw;
   }
-
-  .materials-header {
-    padding: 3vh 4vw;
-  }
-
-  .materials-tabs {
-    gap: 6vw;
-  }
-
-  .materials-tab-item {
-    font-size: 3vw;
-  }
-
-  .basic-info-content,
-  .password-content {
-    padding: 4vh 4vw;
-  }
-
-  .user-avatar-large {
-    width: 15vw !important;
-    height: 15vw !important;
-  }
-
-  .avatar-edit-btn {
-    width: 6.5vw;
-    /* 手机端按比例调整：25px * 2.6 ≈ 65px */
-    height: 6.5vw;
-  }
-
-  .avatar-edit-btn .edit-icon {
-    width: 2.86vw;
-    /* 手机端按比例调整：11px * 2.6 ≈ 29px */
-    height: 2.86vw;
-  }
-
-  .form-row {
-    flex-direction: column;
-    gap: 4vh;
-  }
-
-  .form-group {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1vh;
-  }
-
-  .form-label {
-    width: auto;
-    font-size: 3.5vw;
-    text-align: left;
-  }
-
-  .form-input,
-  .form-select {
-    width: 100%;
-    font-size: 3.5vw;
-    height: 6vh;
-    padding: 2vh 3vw;
-  }
-
-  .basic-info-title,
-  .password-title {
-    font-size: 4vw;
-  }
-
-  .save-btn {
-    font-size: 3.5vw;
-    padding: 2vh 6vw;
-  }
 }
 
 /* 包含@的消息高亮样式 */