730 lines
14 KiB
Vue
730 lines
14 KiB
Vue
<template>
|
|
<div class="header-container">
|
|
<!-- Logo区域 -->
|
|
<div class="logo-section">
|
|
<div class="logo" @click="$router.push('/')">
|
|
<img src="/logo/logo1.png" alt="Logo" class="logo-image" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航菜单 -->
|
|
<div class="nav-menu" :class="{ 'mobile-open': mobileMenuOpen }">
|
|
<div class="nav-item" :class="{ active: activeKey === 'home' }" @click="handleMenuSelect('home')">
|
|
{{ t('header.home') }}
|
|
</div>
|
|
|
|
<div class="nav-item" :class="{ active: activeKey === 'courses' }" @click="handleMenuSelect('courses')">
|
|
<img src="/nav-icons/火.png" alt="" class="nav-icon" />
|
|
{{ t('header.courses') }}
|
|
</div>
|
|
|
|
<div class="nav-item" :class="{ active: activeKey === 'training' }" @click="handleMenuSelect('training')">
|
|
{{ t('header.training') }}
|
|
</div>
|
|
|
|
<div class="nav-item" :class="{ active: activeKey === 'faculty' }" @click="handleMenuSelect('faculty')">
|
|
{{ t('header.learningPaths') }}
|
|
</div>
|
|
|
|
<div class="nav-item" :class="{ active: activeKey === 'resources' }" @click="handleMenuSelect('resources')">
|
|
{{ t('header.resources') }}
|
|
</div>
|
|
|
|
<div class="nav-item" :class="{ active: activeKey === 'activities' }" @click="handleMenuSelect('activities')">
|
|
{{ t('header.about') }}
|
|
<img src="/nav-icons/new.png" alt="new" class="new-badge" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="search-section">
|
|
<div class="search-box">
|
|
<img src="/nav-icons/搜索.png" alt="" class="search-icon" />
|
|
<input type="text" placeholder="请输入感兴趣的课程" class="search-input" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 移动端汉堡菜单按钮 -->
|
|
<div class="mobile-menu-toggle" @click="toggleMobileMenu">
|
|
<n-icon size="24">
|
|
<MenuOutline v-if="!mobileMenuOpen" />
|
|
<CloseOutline v-else />
|
|
</n-icon>
|
|
</div>
|
|
|
|
<!-- 右侧操作区域 -->
|
|
<div class="header-actions">
|
|
<!-- 切换语言 -->
|
|
<div class="action-item language-switcher" @click="toggleLanguageDropdown" ref="languageSwitcherRef">
|
|
<img src="/nav-icons/矩形.png" alt="" class="action-icon" />
|
|
<span>{{ t('header.languageSwitch') }}</span>
|
|
<div v-if="showLanguageDropdown" class="language-dropdown">
|
|
<div class="language-option" @click.stop="switchLanguage('zh')">
|
|
<span class="language-text">{{ t('languageDropdown.switchToChinese') }}</span>
|
|
</div>
|
|
<div class="language-option" @click.stop="switchLanguage('en')">
|
|
<span class="language-text">{{ t('languageDropdown.switchToEnglish') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 学习中心 -->
|
|
<div class="action-item">
|
|
<img src="/nav-icons/学习中心.png" alt="" class="action-icon" />
|
|
<span>{{ t('header.learningCenter') }}</span>
|
|
</div>
|
|
|
|
<!-- 管理端 -->
|
|
<div class="action-item">
|
|
<img src="/nav-icons/管理端.png" alt="" class="action-icon" />
|
|
<span>{{ t('header.management') }}</span>
|
|
</div>
|
|
|
|
<!-- 登录/注册按钮 -->
|
|
<div v-if="!userStore.isLoggedIn" class="auth-buttons">
|
|
<div class="auth-combined-btn">
|
|
<span class="auth-login" @click="showLoginModal">{{ t('header.login') }}</span>
|
|
<span class="auth-divider">|</span>
|
|
<span class="auth-register" @click="showRegisterModal">{{ t('header.register') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 登录后的用户区域 -->
|
|
<div v-else class="user-menu">
|
|
<n-dropdown :options="userMenuOptions" @select="handleUserMenuSelect">
|
|
<div class="user-info">
|
|
<SafeAvatar
|
|
:src="userStore.user?.avatar"
|
|
:name="userStore.user?.username"
|
|
:size="32"
|
|
/>
|
|
<span class="username">{{ userStore.user?.username }}</span>
|
|
</div>
|
|
</n-dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 登录模态框 -->
|
|
<LoginModal
|
|
v-model:show="loginModalVisible"
|
|
@success="handleAuthSuccess"
|
|
/>
|
|
|
|
<!-- 注册模态框 -->
|
|
<RegisterModal
|
|
v-model:show="registerModalVisible"
|
|
@success="handleAuthSuccess"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, h, onMounted, onUnmounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
import {
|
|
PersonOutline,
|
|
LogOutOutline,
|
|
MenuOutline,
|
|
CloseOutline
|
|
} from '@vicons/ionicons5'
|
|
import LoginModal from '@/components/auth/LoginModal.vue'
|
|
import RegisterModal from '@/components/auth/RegisterModal.vue'
|
|
import SafeAvatar from '@/components/common/SafeAvatar.vue'
|
|
|
|
const router = useRouter()
|
|
const { t, locale } = useI18n()
|
|
const userStore = useUserStore()
|
|
|
|
|
|
// 移动端菜单状态
|
|
const mobileMenuOpen = ref(false)
|
|
|
|
// 当前激活的菜单项
|
|
const activeKey = ref('home')
|
|
|
|
// 认证模态框相关
|
|
const loginModalVisible = ref(false)
|
|
const registerModalVisible = ref(false)
|
|
|
|
|
|
|
|
|
|
|
|
// 语言切换相关
|
|
const showLanguageDropdown = ref(false)
|
|
const languageSwitcherRef = ref<HTMLElement | null>(null)
|
|
|
|
// 切换移动端菜单
|
|
const toggleMobileMenu = () => {
|
|
mobileMenuOpen.value = !mobileMenuOpen.value
|
|
}
|
|
|
|
// 切换语言下拉框
|
|
const toggleLanguageDropdown = () => {
|
|
showLanguageDropdown.value = !showLanguageDropdown.value
|
|
}
|
|
|
|
// 切换语言
|
|
const switchLanguage = (lang: string) => {
|
|
locale.value = lang
|
|
localStorage.setItem('locale', lang)
|
|
showLanguageDropdown.value = false
|
|
console.log('语言已切换到:', lang === 'zh' ? '中文' : '英文')
|
|
}
|
|
|
|
// 用户菜单选项
|
|
const userMenuOptions = computed(() => [
|
|
{
|
|
label: '个人中心',
|
|
key: 'profile',
|
|
icon: () => h(PersonOutline)
|
|
},
|
|
{
|
|
type: 'divider'
|
|
},
|
|
{
|
|
label: '退出登录',
|
|
key: 'logout',
|
|
icon: () => h(LogOutOutline)
|
|
}
|
|
])
|
|
|
|
// 处理菜单选择
|
|
const handleMenuSelect = (key: string) => {
|
|
activeKey.value = key
|
|
// 关闭移动菜单
|
|
mobileMenuOpen.value = false
|
|
|
|
switch (key) {
|
|
case 'home':
|
|
router.push('/')
|
|
break
|
|
case 'courses':
|
|
router.push('/courses')
|
|
break
|
|
case 'training':
|
|
router.push('/special-training')
|
|
break
|
|
case 'faculty':
|
|
router.push('/faculty')
|
|
break
|
|
case 'resources':
|
|
router.push('/resources')
|
|
break
|
|
case 'activities':
|
|
router.push('/activities')
|
|
break
|
|
}
|
|
}
|
|
|
|
// 处理用户菜单选择
|
|
const handleUserMenuSelect = (key: string) => {
|
|
switch (key) {
|
|
case 'profile':
|
|
router.push('/profile')
|
|
break
|
|
case 'logout':
|
|
userStore.logout()
|
|
router.push('/')
|
|
break
|
|
}
|
|
}
|
|
|
|
// 显示登录模态框
|
|
const showLoginModal = () => {
|
|
loginModalVisible.value = true
|
|
}
|
|
|
|
// 显示注册模态框
|
|
const showRegisterModal = () => {
|
|
registerModalVisible.value = true
|
|
}
|
|
|
|
// 认证成功处理
|
|
const handleAuthSuccess = () => {
|
|
// 认证成功后可以进行一些操作,比如刷新用户信息等
|
|
console.log('认证成功')
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 点击外部关闭下拉框
|
|
const handleClickOutside = (event: Event) => {
|
|
if (languageSwitcherRef.value && !languageSwitcherRef.value.contains(event.target as Node)) {
|
|
showLanguageDropdown.value = false
|
|
}
|
|
}
|
|
|
|
// 生命周期钩子
|
|
onMounted(() => {
|
|
document.addEventListener('click', handleClickOutside)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', handleClickOutside)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0 30px;
|
|
height: 100%;
|
|
background: white;
|
|
position: relative;
|
|
z-index: 1001;
|
|
}
|
|
|
|
/* Logo区域 */
|
|
.logo-section {
|
|
flex-shrink: 0;
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
gap: 8px;
|
|
}
|
|
|
|
.logo:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.logo-image {
|
|
width: 72px;
|
|
height: 61px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.nav-icon {
|
|
max-width: 20px;
|
|
max-height: 20px;
|
|
width: auto;
|
|
height: auto;
|
|
margin-right: 4px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.action-icon {
|
|
max-width: 18px;
|
|
max-height: 18px;
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
|
|
|
|
/* 导航菜单 */
|
|
.nav-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 40px;
|
|
flex: 1;
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: #333;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
height: 24px;
|
|
}
|
|
|
|
/* 两个字的导航项:首页 */
|
|
.nav-item:nth-child(1) {
|
|
width: 36px;
|
|
}
|
|
|
|
/* 四个字的导航项:热门好课、专题训练、师资力量、精选资源 */
|
|
.nav-item:nth-child(2),
|
|
.nav-item:nth-child(3),
|
|
.nav-item:nth-child(4),
|
|
.nav-item:nth-child(5) {
|
|
width: 72px;
|
|
}
|
|
|
|
/* 两个字的导航项:活动 */
|
|
.nav-item:nth-child(6) {
|
|
width: 36px;
|
|
padding-right: 16px; /* 为HOT标签留出空间 */
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #1890ff;
|
|
font-weight: 400;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 20px;
|
|
height: 2px;
|
|
background-color: #1890ff;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.new-badge {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -12px;
|
|
max-width: 24px;
|
|
max-height: 24px;
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
|
|
/* 搜索区域 */
|
|
.search-section {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f5f5f5;
|
|
border-radius: 20px;
|
|
padding: 8px 16px;
|
|
width: 280px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.search-box:hover {
|
|
background: #eeeeee;
|
|
}
|
|
|
|
.search-box:focus-within {
|
|
background: white;
|
|
box-shadow: 0 0 0 2px #1890ff;
|
|
}
|
|
|
|
.search-icon {
|
|
max-width: 18px;
|
|
max-height: 18px;
|
|
width: auto;
|
|
height: auto;
|
|
margin-right: 8px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
outline: none;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
/* 移动端汉堡菜单按钮 */
|
|
.mobile-menu-toggle {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.mobile-menu-toggle:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* 右侧操作区域 */
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 8px;
|
|
font-size: 13px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.action-item:hover {
|
|
color: #1890ff;
|
|
background: #f0f8ff;
|
|
}
|
|
|
|
/* 语言切换器 */
|
|
.language-switcher {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.language-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
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;
|
|
transition: all 0.2s;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.language-option:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.language-option:hover {
|
|
background: #f0f8ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.language-text {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 认证按钮 */
|
|
.auth-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.auth-combined-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #1890ff;
|
|
color: white;
|
|
border-radius: 6px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.auth-combined-btn:hover {
|
|
background: #40a9ff;
|
|
}
|
|
|
|
.auth-login,
|
|
.auth-register {
|
|
padding: 0 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.auth-login:hover,
|
|
.auth-register:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.auth-divider {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin: 0 4px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* 用户菜单 */
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.user-info:hover {
|
|
background: #f0f8ff;
|
|
}
|
|
|
|
.username {
|
|
font-size: 14px;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 大屏幕 */
|
|
@media (min-width: 1200px) {
|
|
.header-container {
|
|
padding: 0 32px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 280px;
|
|
}
|
|
}
|
|
|
|
/* 平板 */
|
|
@media (max-width: 992px) {
|
|
.header-container {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.nav-menu {
|
|
margin: 0 20px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
/* 小平板 */
|
|
@media (max-width: 768px) {
|
|
.header-container {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: none;
|
|
position: fixed;
|
|
top: 64px;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
z-index: 999;
|
|
flex-direction: column;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.nav-menu.mobile-open {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-menu .nav-item {
|
|
padding: 12px 24px;
|
|
border-radius: 0;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.search-input {
|
|
width: 160px;
|
|
}
|
|
|
|
.logo-text {
|
|
display: none;
|
|
}
|
|
|
|
.user-actions {
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
/* 手机 */
|
|
@media (max-width: 576px) {
|
|
.header-container {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 120px;
|
|
}
|
|
|
|
.user-actions {
|
|
gap: 8px;
|
|
}
|
|
|
|
.username {
|
|
display: none;
|
|
}
|
|
|
|
.auth-buttons {
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
/* 小手机 */
|
|
@media (max-width: 480px) {
|
|
.header-container {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100px;
|
|
}
|
|
|
|
.user-actions {
|
|
gap: 6px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 全屏模式样式现在在App.vue中统一管理 */
|
|
</style>
|