feat：新浮窗，和切换语言，和个人中心的字体统一

src/components/layout/AppHeader.vue

@@ -59,18 +59,23 @@
     <!-- 右侧操作区域 -->
     <div class="header-actions">
       <!-- 切换语言 -->
-      <div class="action-item language-switcher" @click="toggleLanguageDropdown" ref="languageSwitcherRef">
+      <div class="action-item language-switcher">
-        <img src="/nav-icons/矩形.png" alt="" class="action-icon default-icon" />
+        <NDropdown :options="languageOptions" @select="handleLanguageSelect">
-        <img src="/nav-icons/矩形-选中.png" alt="" class="action-icon hover-icon" />
+          <div class="language-trigger">
-        <span>{{ t('header.languageSwitch') }}</span>
+            <div class="language-icon">
-        <div v-if="showLanguageDropdown" class="language-dropdown">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <div class="language-option" @click.stop="switchLanguage('zh')">
+                <circle cx="12" cy="12" r="10" stroke="#666" stroke-width="2"/>
-            <span class="language-text">{{ t('languageDropdown.switchToChinese') }}</span>
+                <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="#666" stroke-width="2"/>
+              </svg>
             </div>
-          <div class="language-option" @click.stop="switchLanguage('en')">
+            <span class="language-text">{{ getCurrentLanguageLabel() }}</span>
-            <span class="language-text">{{ t('languageDropdown.switchToEnglish') }}</span>
+            <div class="language-arrow">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
             </div>
           </div>
+        </NDropdown>
       </div>
 
       <!-- 学习中心 -->
@@ -195,6 +200,52 @@ const registerModalVisible = ref(false)
 const showLanguageDropdown = ref(false)
 const languageSwitcherRef = ref<HTMLElement | null>(null)
 
+// 语言选项配置
+const languageOptions = computed(() => [
+  {
+    label: '中文',
+    key: 'zh',
+    props: {
+      onClick: () => handleLanguageSelect('zh')
+    }
+  },
+  {
+    label: 'English',
+    key: 'en',
+    props: {
+      onClick: () => handleLanguageSelect('en')
+    }
+  },
+  {
+    label: 'Русский',
+    key: 'ru',
+    props: {
+      onClick: () => handleLanguageSelect('ru')
+    }
+  },
+  {
+    label: 'Français',
+    key: 'fr',
+    props: {
+      onClick: () => handleLanguageSelect('fr')
+    }
+  },
+  {
+    label: 'Español',
+    key: 'es',
+    props: {
+      onClick: () => handleLanguageSelect('es')
+    }
+  },
+  {
+    label: '日本語',
+    key: 'ja',
+    props: {
+      onClick: () => handleLanguageSelect('ja')
+    }
+  }
+])
+
 // 切换移动端菜单
 const toggleMobileMenu = () => {
   mobileMenuOpen.value = !mobileMenuOpen.value
@@ -205,12 +256,34 @@ const toggleLanguageDropdown = () => {
   showLanguageDropdown.value = !showLanguageDropdown.value
 }
 
-// 切换语言
+// 处理语言选择
-const switchLanguage = (lang: string) => {
+const handleLanguageSelect = (lang: string) => {
   locale.value = lang
   localStorage.setItem('locale', lang)
-  showLanguageDropdown.value = false
+  console.log('语言已切换到:', getLanguageName(lang))
-  console.log('语言已切换到:', lang === 'zh' ? '中文' : '英文')
+}
+
+// 获取当前语言标签
+const getCurrentLanguageLabel = () => {
+  return getLanguageName(locale.value)
+}
+
+// 获取语言名称
+const getLanguageName = (lang: string): string => {
+  const languageMap: { [key: string]: string } = {
+    'zh': '中文',
+    'en': 'English',
+    'ru': 'Русский',
+    'fr': 'Français',
+    'es': 'Español',
+    'ja': '日本語'
+  }
+  return languageMap[lang] || '中文'
+}
+
+// 切换语言（保留兼容性）
+const switchLanguage = (lang: string) => {
+  handleLanguageSelect(lang)
 }
 
 const handleLearningCenter = () => {
@@ -324,72 +397,146 @@ const setupMenuHoverEffects = () => {
   }, 500)
 }
 
-// 用户菜单选项
+// 用户菜单选项 - 自定义渲染为网格布局
 const userMenuOptions = computed(() => [
   {
-    label: '个人中心',
+    type: 'render',
-    key: 'profile',
+    render: () => h('div', {
-    icon: () => h('div', {
+      class: 'custom-user-menu',
+      style: 'padding: 16px 24px; width: 280px;'
+    }, [
+      // 用户信息头部
+      h('div', {
+        class: 'user-menu-header',
+        style: 'display: flex; align-items: center; margin-bottom: 16px;'
+      }, [
+        h('span', {
+          style: 'font-size: 14px; color: #333; font-weight: 500;'
+        }, `Hi~ ${userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username || 'U2per'}`)
+      ]),
+
+      // 2x2 网格菜单
+      h('div', {
+        class: 'user-menu-grid',
+        style: 'display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;'
+      }, [
+        // 我的课程
+        h('div', {
+          class: 'menu-grid-item',
+          style: 'display: flex; align-items: center; padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; background-color: #f9f9f9;',
+          onClick: () => handleUserMenuSelect('courses')
+        }, [
+          h('div', {
             class: 'menu-icon-container',
-      style: 'position: relative; width: 18px; height: 18px; display: inline-block; margin-right: 1px; overflow: hidden;'
+            style: 'margin-right: 8px;'
           }, [
             h('img', {
               src: '/images/personal/用户_user备份@2x.png',
-        alt: '个人中心',
+              alt: '我的课程',
-        class: 'menu-icon default-icon',
+              style: 'width: 18px; height: 18px; object-fit: contain;'
-        style: 'width: 18px !important; height: 18px !important; max-width: 18px; max-height: 18px; object-fit: contain; position: absolute; top: 0; left: 0;'
-      }),
-      h('img', {
-        src: '/images/personal/用户_user备份 2@2x.png',
-        alt: '个人中心',
-        class: 'menu-icon hover-icon',
-        style: 'width: 18px !important; height: 18px !important; max-width: 18px; max-height: 18px; object-fit: contain; position: absolute; top: 0; left: 0; opacity: 0;'
             })
-    ])
+          ]),
-  },
+          h('span', {
-  {
+            style: 'font-size: 14px; color: #333; font-weight: 500;'
-    label: '切换教师端',
+          }, '我的课程')
-    key: 'teacher',
+        ]),
-    icon: () => h('div', {
+
+        // 购买记录
+        h('div', {
+          class: 'menu-grid-item',
+          style: 'display: flex; align-items: center; padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; background-color: #f9f9f9;',
+          onClick: () => handleUserMenuSelect('purchase')
+        }, [
+          h('div', {
             class: 'menu-icon-container',
-      style: 'position: relative; width: 18px; height: 18px; display: inline-block; margin-right: 1px; overflow: hidden;'
+            style: 'margin-right: 8px;'
+          }, [
+            h('img', {
+              src: '/images/personal/用户_user备份@2x.png',
+              alt: '购买记录',
+              style: 'width: 18px; height: 18px; object-fit: contain;'
+            })
+          ]),
+          h('span', {
+            style: 'font-size: 14px; color: #333; font-weight: 500;'
+          }, '购买记录')
+        ]),
+
+        // 我的学币
+        h('div', {
+          class: 'menu-grid-item',
+          style: 'display: flex; align-items: center; padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; background-color: #f9f9f9;',
+          onClick: () => handleUserMenuSelect('coins')
+        }, [
+          h('div', {
+            class: 'menu-icon-container',
+            style: 'margin-right: 8px;'
+          }, [
+            h('img', {
+              src: '/images/personal/切换_switch备份@2x.png',
+              alt: '我的学币',
+              style: 'width: 18px; height: 18px; object-fit: contain;'
+            })
+          ]),
+          h('span', {
+            style: 'font-size: 14px; color: #333; font-weight: 500;'
+          }, '我的学币')
+        ]),
+
+        // 个人资料
+        h('div', {
+          class: 'menu-grid-item',
+          style: 'display: flex; align-items: center; padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; background-color: #f9f9f9;',
+          onClick: () => handleUserMenuSelect('profile')
+        }, [
+          h('div', {
+            class: 'menu-icon-container',
+            style: 'margin-right: 8px;'
+          }, [
+            h('img', {
+              src: '/images/personal/用户_user备份@2x.png',
+              alt: '个人资料',
+              style: 'width: 18px; height: 18px; object-fit: contain;'
+            })
+          ]),
+          h('span', {
+            style: 'font-size: 14px; color: #333; font-weight: 500;'
+          }, '个人资料')
+        ])
+      ]),
+
+      // 底部操作区
+      h('div', {
+        class: 'user-menu-footer',
+        style: 'display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f0f0f0;'
+      }, [
+        // 切换教师端
+        h('div', {
+          class: 'footer-action',
+          style: 'display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background-color 0.2s;',
+          onClick: () => handleUserMenuSelect('teacher')
         }, [
           h('img', {
             src: '/images/personal/切换_switch备份@2x.png',
             alt: '切换教师端',
-        class: 'menu-icon default-icon',
+            style: 'width: 14px; height: 14px; object-fit: contain;'
-        style: 'width: 18px !important; height: 18px !important; max-width: 18px; max-height: 18px; object-fit: contain; position: absolute; top: 0; left: 0;'
           }),
-      h('img', {
+          h('span', {
-        src: '/images/personal/切换_switch备份 2@2x.png',
+            style: 'font-size: 12px; color: #666;'
-        alt: '切换教师端',
+          }, '切换教师端')
-        class: 'menu-icon hover-icon',
+        ]),
-        style: 'width: 18px !important; height: 18px !important; max-width: 18px; max-height: 18px; object-fit: contain; position: absolute; top: 0; left: 0; opacity: 0;'
+
-      })
+        // 安全退出
-    ])
+        h('div', {
-  },
+          class: 'footer-action',
-  {
+          style: 'display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background-color 0.2s;',
-    type: 'divider'
+          onClick: () => handleUserMenuSelect('logout')
-  },
-  {
-    label: '退出登录',
-    key: 'logout',
-    icon: () => h('div', {
-      class: 'menu-icon-container',
-      style: 'position: relative; width: 18px; height: 18px; display: inline-block; margin-right: 1px; overflow: hidden;'
         }, [
-      h('img', {
+          h('span', {
-        src: '/images/personal/退出_logout备份 2@2x.png',
+            style: 'font-size: 12px; color: #666;'
-        alt: '退出登录',
+          }, '安全退出')
-        class: 'menu-icon default-icon',
+        ])
-        style: 'width: 18px !important; height: 18px !important; max-width: 18px; max-height: 18px; object-fit: contain; position: absolute; top: 0; left: 0;'
+      ])
-      }),
-      h('img', {
-        src: '/images/personal/退出_logout备份 3@2x.png',
-        alt: '退出登录',
-        class: 'menu-icon hover-icon',
-        style: 'width: 18px !important; height: 18px !important; max-width: 18px; max-height: 18px; object-fit: contain; position: absolute; top: 0; left: 0; opacity: 0;'
-      })
     ])
   }
 ])
@@ -433,6 +580,22 @@ const handleMenuSelect = (key: string) => {
 // 处理用户菜单选择
 const handleUserMenuSelect = (key: string) => {
   switch (key) {
+    case 'courses':
+      // 跳转到我的课程
+      router.push('/profile/courses').then(() => {
+        window.location.reload();
+      })
+      break
+    case 'purchase':
+      // 跳转到购买记录
+      console.log('跳转到购买记录')
+      // 这里可以添加购买记录页面的路由
+      break
+    case 'coins':
+      // 跳转到我的学币
+      console.log('跳转到我的学币')
+      // 这里可以添加学币页面的路由
+      break
     case 'profile':
       router.push('/profile').then(() => {
         // 检查sessionStorage中是否已有刷新标志
@@ -784,45 +947,46 @@ watch(() => route.path, () => {
   /* 语言切换器 */
   .language-switcher {
     position: relative;
-    cursor: pointer;
   }
 
-  .language-dropdown {
+  .language-trigger {
-    position: absolute;
+    display: flex;
-    top: 100%;
+    align-items: center;
-    left: 0;
+    gap: 6px;
-    right: 0;
-    background: white;
-    border: 1px solid #e8e8e8;
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    margin-top: 4px;
-    min-width: 120px;
-  }
-  
-  .language-option {
-    padding: 8px 12px;
-    font-size: 13px;
-    color: #666;
     cursor: pointer;
+    padding: 6px 8px;
+    border-radius: 4px;
     transition: all 0.2s;
-    border-bottom: 1px solid #f5f5f5;
   }
 
-  .language-option:last-child {
+  .language-trigger:hover {
-    border-bottom: none;
+    background-color: #f0f8ff;
   }
 
-  .language-option:hover {
+  .language-icon {
-    background: #f0f8ff;
+    display: flex;
-    color: #1890ff;
+    align-items: center;
+    justify-content: center;
   }
 
   .language-text {
+    font-size: 14px;
+    color: #1890ff;
+    font-weight: 500;
     white-space: nowrap;
   }
 
+  .language-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+  }
+
+  .language-switcher:hover .language-arrow {
+    transform: rotate(180deg);
+  }
+  
   /* 认证按钮 */
   .auth-buttons {
     display: flex;
@@ -893,10 +1057,28 @@ watch(() => route.path, () => {
   
   /* 美化用户菜单样式 */
   :deep(.n-dropdown-menu) {
-    border-radius: 8px;
+    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-    border: 1px solid #f0f0f0;
+    border: 1px solid #e6e6e6;
-    padding: 8px 0;
+    padding: 0;
+    min-width: 280px;
+  }
+
+  /* 自定义用户菜单样式 */
+  .custom-user-menu {
+    background: white;
+  }
+
+  .user-menu-header {
+    font-weight: 500;
+  }
+
+  .menu-grid-item:hover {
+    background-color: #eeeeee !important;
+  }
+
+  .footer-action:hover {
+    background-color: #f5f5f5 !important;
   }
   
   :deep(.n-dropdown-option) {

src/views/Profile.vue

@@ -770,12 +770,12 @@
                   <img src="/images/traings/traing1.png" class="image_22" />
                   <div class="user-info">
                     <div class="user-content">
-                      <span class="message-text" :class="{ 'mention-highlight': msg.senderName.includes('@') }">{{
+                      <span class="user-name">{{ msg.senderName }}</span>
-                        msg.senderName }}</span>
+                      <span class="action-type">{{ getActionText(msg.type) }}：</span>
-                      <span class="message-text">{{ msg.content }}</span>
+                      <span class="message-content">{{ msg.content }}</span>
                     </div>
                     <div class="course-info-container">
-                      <span class="course-label">回复我的课程：</span>
+                      <span class="course-label">回复了我的课程：</span>
                       <span class="course-name">《{{ msg.courseName }}》</span>
                     </div>
                   </div>
@@ -826,17 +826,15 @@
                 <div class="like-message-user">
                   <img :src="like.userAvatar" class="image_22" />
                   <div class="like-info">
-                    <div class="like-content">
+                    <div class="user-content">
-                      <span class="message-text">{{ like.userName }}</span>
+                      <span class="user-name">{{ like.userName }}</span>
-                      <span class="message-text">赞了我的{{ like.type === 'comment' ? '评论' : '课程' }}</span>
+                      <span class="action-type">{{ getLikeActionText(like.type) }}：</span>
+                      <span class="message-content" v-if="like.content">{{ like.content }}</span>
                     </div>
                     <div class="course-info-container" v-if="like.courseName">
-                      <span class="course-label">在课程：</span>
+                      <span class="course-label">课程：</span>
                       <span class="course-name">《{{ like.courseName }}》</span>
                     </div>
-                    <div class="like-content-preview" v-if="like.content">
-                      <span class="content-preview">{{ like.content }}</span>
-                    </div>
                   </div>
                   <div class="message-time">{{ like.date }}</div>
                 </div>
@@ -1260,6 +1258,7 @@ interface Message {
   isRead: boolean
   hasReply: boolean
   replyContent?: string
+  type: 'comment' | 'mention' | 'reply'
 }
 
 // 系统消息接口
@@ -2066,34 +2065,37 @@ const mockMessages: Message[] = [
     id: 1,
     senderName: '王建',
     senderAvatar: '/images/avatars/teacher1.png',
-    content: '回复了我：没事多看看课程的起源',
+    content: '没事多看看课程的起源',
     courseName: '教育心理学的起源',
     date: '7月20日 12:41',
     isRead: false,
     hasReply: true,
-    replyContent: ''
+    replyContent: '',
+    type: 'comment'
   },
   {
     id: 2,
-    senderName: '建国学习@了我：',
+    senderName: '建国学习',
     senderAvatar: '/images/avatars/student1.png',
     content: '没事多看看课程的起源',
     courseName: '教育心理学的起源',
     date: '7月20日 12:41',
     isRead: false,
     hasReply: true,
-    replyContent: ''
+    replyContent: '',
+    type: 'mention'
   },
   {
     id: 3,
     senderName: '建国学习',
     senderAvatar: '/images/avatars/student2.png',
-    content: '回复了我：没事多看看课程的起源了',
+    content: '没事多看看课程的起源了',
     courseName: '教育心理学的起源',
     date: '7月20日 12:41',
     isRead: false,
     hasReply: true,
-    replyContent: ''
+    replyContent: '',
+    type: 'reply'
   }
 ]
 
@@ -2547,6 +2549,32 @@ const handleMessageTabChange = (tab: string) => {
   activeMessageTab.value = tab
 }
 
+// 获取操作文本
+const getActionText = (type: string) => {
+  switch (type) {
+    case 'comment':
+      return '评论了我'
+    case 'mention':
+      return '@了我'
+    case 'reply':
+      return '回复了我'
+    default:
+      return '评论了我'
+  }
+}
+
+// 获取点赞操作文本
+const getLikeActionText = (type: string) => {
+  switch (type) {
+    case 'comment':
+      return '点赞了我的评论'
+    case 'course':
+      return '点赞了我'
+    default:
+      return '点赞了我'
+  }
+}
+
 // 资料相关方法
 const handleMaterialsTabChange = (tab: string) => {
   activeMaterialsTab.value = tab
@@ -6328,13 +6356,34 @@ onActivated(() => {
   /* 隐藏溢出内容 */
 }
 
+/* 新的消息样式 */
 .user-name {
-  font-size: 0.83vw;
+  font-family: PingFangSC, PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
-  /* 16px转换为vw */
+  font-weight: 400;
-  font-weight: 500;
+  font-size: 14px;
-  color: #1890ff;
+  color: #0388D1;
+  line-height: 20px;
 }
 
+.action-type {
+  font-family: PingFangSC, PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: #0388D1;
+  line-height: 20px;
+  margin-right: 4px;
+}
+
+.message-content {
+  font-family: PingFangSC, PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 20px;
+}
+
+
+
 .message-text {
   width: auto;
   /* 自适应宽度 */
@@ -6393,13 +6442,11 @@ onActivated(() => {
 }
 
 .course-name {
-  font-size: 0.73vw;
+  font-family: PingFangSC, PingFang SC, -apple-system, BlinkMacSystemFont, sans-serif;
-  /* 14px转换为vw */
+  font-weight: 400;
-  font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 14px;
-  font-weight: normal;
+  color: #608297;
-  /* color: #497087; */
+  line-height: 20px;
-  line-height: 1.04vh;
-  /* 20px转换为vh */
 }
 
 .message-time {