From 39baaf7eccac92d53799b47c8cc4458660181dd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Sat, 2 Aug 2025 20:39:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E4=B8=8B=E8=BD=BD=E5=92=8C?=
 =?UTF-8?q?=E6=88=91=E7=9A=84=E8=B5=84=E6=96=99=E4=B8=A4=E4=B8=AA=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Profile.vue | 239 +++++++++++++++++++++++++++++++++---------
 1 file changed, 187 insertions(+), 52 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 6ddbe5c..c45440f 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -5,10 +5,12 @@
           <!-- 左侧侧边栏 -->
           <div class="block_14">
             <!-- 用户头像和姓名 -->
-            <img
+            <SafeAvatar
               class="image_7"
-              referrerpolicy="no-referrer"
-              :src="userStore.user?.avatar || 'https://via.placeholder.com/100'"
+              :src="userStore.user?.avatar"
+              :name="userStore.user?.username || '用户'"
+              :size="96"
+              alt="用户头像"
             />
             <span class="text_72">{{ userStore.user?.username || '用户名' }}</span>
 
@@ -22,7 +24,9 @@
                 <img
                   class="image_8"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc9a739861792bd074fb3af58d5ece46828d647f66e1113746e41e68ae5486135"
+                  :src="activeTab === 'courses'
+                    ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng20ffb5f85d4f5f49183f6906fe5a3206b51b978ab1d476e24e95dd05c97e6a09'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc9a739861792bd074fb3af58d5ece46828d647f66e1113746e41e68ae5486135'"
                 />
                 <span class="text-group_19">我的课程</span>
               </div>
@@ -32,7 +36,9 @@
                 <img
                   class="label_4"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9ef14366fc1741a8ada8db176341d56e43f72cb07685130ee04c0fc0e70b95e9"
+                  :src="activeTab === 'homework'
+                    ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd613ce692c6eadda66e54ef98f178d5a6ae612d44a02e796570dd834a371e490'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9ef14366fc1741a8ada8db176341d56e43f72cb07685130ee04c0fc0e70b95e9'"
                 />
                 <span class="text-group_20">我的作业</span>
               </div>
@@ -42,7 +48,9 @@
                 <img
                   class="label_5"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4661143d8bce67501f22c432ea5115ddbff845d5f37b8f8c76f349b15de07180"
+                  :src="activeTab === 'exam'
+                    ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5c3e9660c1adc146ed9576ae906d29d0b592f759ddd0c48d7b1ad93f7a8639c5'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4661143d8bce67501f22c432ea5115ddbff845d5f37b8f8c76f349b15de07180'"
                 />
                 <span class="text-group_21">我的考试</span>
               </div>
@@ -52,7 +60,9 @@
                 <img
                   class="label_6"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd1f325e7252c3ebf57f31a81c92eb1c1fd61be28fb49098fb865a27f77a63e31"
+                  :src="activeTab === 'practice'
+                    ? 'https://lanhu-oss-proxy.lanhuapp.com/SketchPng6558c077726c2d2f932ceff91145acab526127fb489bc104b128b6221801f4aa'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd1f325e7252c3ebf57f31a81c92eb1c1fd61be28fb49098fb865a27f77a63e31'"
                 />
                 <span class="text-group_22">我的练习</span>
               </div>
@@ -62,7 +72,9 @@
                 <img
                   class="thumbnail_40"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd427e1476c90b2d1ad642b921f287910a2d5e51f463a0cad40b98ae1acf9d96a"
+                  :src="activeTab === 'activity'
+                    ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3d2b97401a98315b86af3a5082136c97ba2130259ab48915698eb8c17d8450ff'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd427e1476c90b2d1ad642b921f287910a2d5e51f463a0cad40b98ae1acf9d96a'"
                 />
                 <span class="text-group_23">我的活动</span>
               </div>
@@ -72,7 +84,9 @@
                 <img
                   class="label_7"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbc201b8b0d2681bdd7653a9816f04ace0187e2d39ea5a9237e930ebd84c036ca"
+                  :src="activeTab === 'message'
+                    ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7fb5ce5c1bb4b41ff636ad31573bda9280b693ecab753c58ffb25f1175e9acaa'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbc201b8b0d2681bdd7653a9816f04ace0187e2d39ea5a9237e930ebd84c036ca'"
                 />
                 <span class="text-group_24">我的消息</span>
               </div>
@@ -82,7 +96,9 @@
                 <img
                   class="image_9"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga5b70cfab4c855b4d41d1b706e4f5fa1a4373e446574b97726d5d78d7608d0c6"
+                  :src="activeTab === 'materials'
+                    ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8de06526f5df90cd28c5910bcccf9c69f4e8e2c597cc4be22551c85f9184a36d'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga5b70cfab4c855b4d41d1b706e4f5fa1a4373e446574b97726d5d78d7608d0c6'"
                 />
                 <span class="text-group_25">我的资料</span>
               </div>
@@ -92,7 +108,9 @@
                 <img
                   class="thumbnail_41"
                   referrerpolicy="no-referrer"
-                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngad1dcee8a35e9a4214d2c43a40efac32d603d0e91d741f88a0cc5aa8aa0c9e4d"
+                  :src="activeTab === 'download'
+                    ? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngad1dcee8a35e9a4214d2c43a40efac32d603d0e91d741f88a0cc5aa8aa0c9e4d'
+                    : 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngdb0a3a39327fdf8335003faafcb5e7e485342b4f33448b455f9d3ba5ad9999b0'"
                 />
                 <span class="text-group_26">我的下载</span>
               </div>
@@ -122,7 +140,8 @@
                     <img
                       class="thumbnail_4"
                       referrerpolicy="no-referrer"
-                      :src="course.thumbnail"
+                      :src="bannerImage"
+                      :alt="bannerAlt"
                     />
                     <span :class="['status-text', course.status]">{{ getStatusText(course.status) }}</span>
                   </div>
@@ -229,7 +248,11 @@
               <!-- 作业详情视图 -->
             <div v-if="showDetailView && detailAssignment">
               <div class="detail-header">
-                <button @click="backToAssignmentList" class="back-button">← 返回作业列表</button>
+                <div class="breadcrumb-nav">
+                  <span class="breadcrumb-item" @click="backToAssignmentList">全部作业</span>
+                  <span class="breadcrumb-separator">></span>
+                  <span class="breadcrumb-current">作业名称</span>
+                </div>
               </div>
               
               <div class="group_11">
@@ -710,9 +733,19 @@
                   <!-- 用户头像 -->
                   <div class="avatar-section">
                     <div class="avatar-container">
-                      <img :src="userInfo.avatar" alt="用户头像" class="user-avatar-large" />
+                      <SafeAvatar
+                        :src="userStore.user?.avatar"
+                        :name="userStore.user?.username || userInfo.nickname || '用户'"
+                        :size="68"
+                        alt="用户头像"
+                        class="user-avatar-large"
+                      />
                       <div class="avatar-edit-btn">
-                        <i class="icon-edit"></i>
+                        <img
+                          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf31d99a65996c8c8ed0d6b2446b4176a30b16838933c10b800a735d092717c57"
+                          alt="编辑头像"
+                          class="edit-icon"
+                        />
                       </div>
                     </div>
                   </div>
@@ -1127,7 +1160,20 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, reactive } from 'vue'
 import { useMessage, NModal, NUpload, NInput, NForm, NFormItem, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
+import SafeAvatar from '@/components/common/SafeAvatar.vue'
+
+const { t, locale } = useI18n()
+
+// 轮播图根据语言动态切换
+const bannerImage = computed(() => {
+  return locale.value === 'zh' ? '/banners/banner1.png' : '/banners/banner1-en.png'
+})
+
+const bannerAlt = computed(() => {
+  return t('home.banner.alt')
+})
 
 // 定义课程接口
 interface Course {
@@ -2707,10 +2753,13 @@ onMounted(() => {
 
 /* 用户头像和姓名 */
 .image_7 {
-  width: 5vw; /* 调整头像大小 */
-  height: 5vw;
+  width: 5vw !important; /* 调整头像大小，覆盖SafeAvatar的内联样式 */
+  height: 5vw !important;
   border-radius: 50%;
   margin: 2.6vh auto 0 auto; /* 居中显示 */
+}
+
+.image_7 img {
   object-fit: cover;
   display: block;
 }
@@ -2895,7 +2944,7 @@ onMounted(() => {
 
 .box_3 {
   width: 10.42vw; /* 200px转换为vw */
-  height: 7.81vh; /* 150px转换为vh */
+  height: 15.63vh; /* 大幅增加高度到300px转换为vh，让图片展示到外部盒子高度 */
   position: relative;
   border-radius: 0.42vw; /* 8px转换为vw */
   overflow: hidden;
@@ -3758,14 +3807,14 @@ height: 33px;
 
   .box_3 {
     width: 100%;
-    height: 10.42vh; /* 200px转换为vh */
+    height: 18vh; /* 平板端大幅增加高度，让图片展示到外部盒子高度 */
   }
 
   /* 调整用户信息区域为横向布局 */
   .image_7 {
     margin: 1.04vh 0 0 1.04vw; /* 20px转换 */
-    width: 4.17vw; /* 80px转换为vw */
-    height: 4.17vw;
+    width: 4.17vw !important; /* 80px转换为vw，覆盖SafeAvatar样式 */
+    height: 4.17vw !important;
   }
 
   .text_72 {
@@ -3999,7 +4048,7 @@ height: 33px;
   }
 
   .box_3 {
-    height: 9.38vh; /* 180px转换为vh */
+    height: 20vh; /* 手机端大幅增加高度，让图片展示到外部盒子高度 */
   }
 }
 
@@ -4021,6 +4070,27 @@ height: 33px;
     padding: 0.31vh 0.63vw; /* 6px 12px转换 */
   }
 
+  /* 平板端面包屑样式 */
+  .breadcrumb-nav {
+    font-size: 1vw; /* 平板端调整字体大小 */
+  }
+
+  .breadcrumb-item {
+    width: 5vw; /* 平板端调整宽度 */
+    font-size: 1vw; /* 平板端调整字体大小 */
+    line-height: 1.3vh; /* 平板端调整行高 */
+  }
+
+  .breadcrumb-current {
+    width: 4.5vw; /* 平板端调整宽度 */
+    font-size: 1vw; /* 平板端调整字体大小 */
+    line-height: 1.3vh; /* 平板端调整行高 */
+  }
+
+  .breadcrumb-separator {
+    margin: 0 0.8vw; /* 平板端调整间距 */
+  }
+
   .box_2 {
     padding: 0.63vh 0.63vw; /* 12px转换 */
   }
@@ -4040,6 +4110,28 @@ height: 33px;
   .text_20, .text_21, .text_22 {
     font-size: 0.63vw; /* 12px转换为vw */
   }
+
+  /* 手机端面包屑样式 */
+  .breadcrumb-nav {
+    font-size: 3.5vw; /* 手机端调整字体大小 */
+    margin-bottom: 2vh; /* 手机端增加底部间距 */
+  }
+
+  .breadcrumb-item {
+    width: 15vw; /* 手机端调整宽度 */
+    font-size: 3.5vw; /* 手机端调整字体大小 */
+    line-height: 2vh; /* 手机端调整行高 */
+  }
+
+  .breadcrumb-current {
+    width: 13vw; /* 手机端调整宽度 */
+    font-size: 3.5vw; /* 手机端调整字体大小 */
+    line-height: 2vh; /* 手机端调整行高 */
+  }
+
+  .breadcrumb-separator {
+    margin: 0 2vw; /* 手机端调整间距 */
+  }
 }
 
 /* 上传作业弹窗样式 */
@@ -4096,19 +4188,49 @@ height: 33px;
   margin-bottom: 15px;
 }
 
-.back-button {
-  background: none;
-  border: none;
-  color: #007bff;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 6px 12px;
-  border-radius: 4px;
-  transition: background-color 0.3s ease;
+/* 面包屑导航样式 */
+.breadcrumb-nav {
+  display: flex;
+  align-items: center;
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: #666;
+  margin-bottom: 1.04vh; /* 20px转换为vh */
 }
 
-.back-button:hover {
-  background-color: #f0f8ff;
+.breadcrumb-item {
+  width: 3.39vw; /* 65px转换为vw */
+  height: 1.04vh; /* 20px转换为vh */
+  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.73vw; /* 14px转换为vw */
+  color: #333333;
+  line-height: 1.04vh; /* 20px转换为vh */
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.breadcrumb-item:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+.breadcrumb-separator {
+  margin: 0 0.52vw; /* 10px转换为vw */
+  color: #999;
+}
+
+.breadcrumb-current {
+  width: 2.97vw; /* 57px转换为vw */
+  height: 1.04vh; /* 20px转换为vh */
+  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 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;
 }
 
 .description-full-view {
@@ -5777,20 +5899,23 @@ height: 33px;
 }
 
 .user-avatar-large {
-  width: 3.54vw; /* 68px转换为vw */
-  height: 3.54vw; /* 68px转换为vw */
+  width: 3.54vw !important; /* 68px转换为vw，覆盖SafeAvatar样式 */
+  height: 3.54vw !important; /* 68px转换为vw，覆盖SafeAvatar样式 */
   border-radius: 50%;
-  object-fit: cover;
   border: 3px solid #e0e0e0;
 }
 
+.user-avatar-large img {
+  object-fit: cover;
+}
+
 .avatar-edit-btn {
   position: absolute;
   bottom: 0;
   right: 0;
-  width: 1.56vw; /* 30px转换为vw */
-  height: 1.56vw; /* 30px转换为vw */
-  background: #1890ff;
+  width: 1.3vw; /* 25px转换为vw */
+  height: 1.3vw; /* 25px转换为vw */
+  background: #0288D1;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -5800,13 +5925,13 @@ height: 33px;
 }
 
 .avatar-edit-btn:hover {
-  background: #40a9ff;
+  background: #0277BD; /* 稍微深一点的蓝色作为悬停效果 */
 }
 
-.avatar-edit-btn::before {
-  content: '✏️';
-  color: white;
-  font-size: 0.73vw; /* 14px转换为vw */
+.avatar-edit-btn .edit-icon {
+  width: 0.57vw; /* 11px转换为vw */
+  height: 0.57vw; /* 11px转换为vw */
+  object-fit: contain;
 }
 
 /* 表单样式 */
@@ -6463,13 +6588,18 @@ height: 33px;
   }
 
   .user-avatar-large {
-    width: 6vw;
-    height: 6vw;
+    width: 6vw !important;
+    height: 6vw !important;
   }
 
   .avatar-edit-btn {
-    width: 2.5vw;
-    height: 2.5vw;
+    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 {
@@ -6620,13 +6750,18 @@ height: 33px;
   }
 
   .user-avatar-large {
-    width: 15vw;
-    height: 15vw;
+    width: 15vw !important;
+    height: 15vw !important;
   }
 
   .avatar-edit-btn {
-    width: 5vw;
-    height: 5vw;
+    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 {