<template>
<header class="header">
<div class="header-left" @click="navigateToHome">
<h1>在线考试系统</h1>
</div>
<div class="header-center">
<el-
menu
mode="horizontal"
:default-active="activeIndex"
@select="handle
MenuSelect"
background-color="#4b0082"
text-color="white"
active-text-color="#ffd700"
>
<el-
menu-item
v-for="
menu in
menuItems"
:key="
menu.index"
:index="
menu.index"
>
{{
menu.label }}
</el-
menu-item>
</el-
menu>
</div>
<div class="header-right">
<!-- <div class="header-container">-->
<div class="current-time">
{{ formattedDate }}
<span class="time-separator">|</span>
{{ formattedTime }}
</div>
<!-- </div>-->
<!-- 用户下拉菜单 -->
<el-dropdown @command="handleUserCommand">
<div class="user-info" @click.stop>
<el-avatar size="small" :src="userAvatar" alt="用户头像" />
<span class="username">{{ userStore.user.user?.username || '未登录' }}</span>
<el-icon class="icon-arrow">
<ArrowDown />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-
menu>
<el-dropdown-item
v-for="item in userActions"
:key="item.command"
:command="item.command"
:type="item.type"
>
{{ item.label }}
</el-dropdown-item>
<el-divider class="dropdown-divider" v-if="showDivider"/>
<el-dropdown-item
command="logout"
type="danger"
>
退出登录
</el-dropdown-item>
</el-dropdown-
menu>
</template>
</el-dropdown>
</div>
</header>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage,ElDropdown, ElDropdown
Menu, ElDropdownItem } from 'element-plus';
// 导入图片时使用Vite的新特性，确保类型安全
import { useRouter} from 'vue-router';
import { useUserStore } from '@/stores/userStore'
import { useProfileStore } from '@/stores/profile'
const router = useRouter();
const userStore = useUserStore();
const profileStore = useProfileStore();
console.log('username', userStore.user.user?.username);
// 定义菜单项接口，确保类型安全
interface
MenuItem {
index: string
label: string
route?: string
}
// 定义用户操作接口
interface UserAction {
command: string
label: string
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
}
// 定义用户信息接口
interface UserInfo {
name: string
role: string
avatar: string
}
// 导航菜单数据
const
menuItems:
MenuItem[] = [
{ index: '1', label: '首页', route: '/home' },
{ index: '2', label: '学习', route: '/
study' },
{ index: '3', label: '练习', route: '/practice' },
{ index: '4', label: '考试中心', route: '/examinationCenter' },
{ index: '5', label: '成绩查询', route: '/scoreInquiry' }
]
// 用户操作下拉菜单数据
const userActions: UserAction[] = [
{ command: 'profile', label: '个人资料', route: '/userCenter' },
{ command: 'settings', label: '系统设置', route: '/' },
{ command: 'help', label: '帮助中心' , route: '/'}
]
// 是否显示分割线
const showDivider = ref(true)
// 存储当前时间的响应式变量
const currentTime = ref(new Date());
// 当前激活的菜单索引
const activeIndex = ref<string>(
menuItems[0].index)
// 导航方法 - 新增返回首页方法
const navigateToHome = () => {
router.push('/home')
}
// 计算属性获取用户头像，优先使用profileStore中的头像，其次使用userStore，最后使用默认头像
const userAvatar = computed(() => {
// 从profileStore获取（如果有个人中心设置的头像）
if (profileStore.profile?.avatar) {
return profileStore.profile.avatar;
}
// 从userStore获取（登录返回的头像）
if (userStore.user?.user?.avatar) {
return userStore.user.user.avatar;
}
// 默认头像
return new URL('@/assets/images/avatar.png', import.meta.url).href;
});
// 格式化日期为 "YYYY年MM月DD日 星期X"
const formattedDate = computed(() => {
const date = currentTime.value;
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
const weekday = weekdays[date.getDay()];
return `${year}年${month}月${day}日 星期${weekday}`;
});
// 格式化时间为 "HH:MM:SS"
const formattedTime = computed(() => {
const date = currentTime.value;
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
});
// 处理菜单选择事件
const handle
MenuSelect = (index: string) => {
activeIndex.value = index
const selected
Menu =
menuItems.find(item => item.index === index)
if (selected
Menu?.route) {
// 实际项目中使用路由跳转
router.push(selected
Menu.route)
// ElMessage.info(`导航至 ${selected
Menu.label}`)
}
}
// 处理用户下拉菜单命令
const handleUserCommand = (command: string) => {
switch(command) {
case 'profile':
ElMessage.info('查看个人资料')
router.push('/userCenter')
break
case 'settings':
ElMessage.info('打开系统设置')
router.push('/settings')
break
case 'help':
ElMessage.info('查看帮助中心')
router.push('/help')
break
case 'logout':
handleLogout()
break
default:
ElMessage.warning(`未处理的命令: ${command}`)
}
}
// 退出登录处理函数
const handleLogout = () => {
// 实际项目中应使用ElMessageBox确认
// 基础用法
ElMessageBox.alert('确定要退出登录吗？', '系统提示', {
confirmButtonText: '确定', // 按钮文本
callback: action => {
// 点击按钮后的回调，action 为 'confirm'
// console.log('点击了确定');
ElMessage.success('已成功退出登录')
// 清除登录状态并跳转
localStorage.removeItem('token');
router.push('/login')
}
});
}
// 定时器ID，用于组件销毁时清除
let timer = null;
// 组件挂载时启动定时器，每秒更新时间
onMounted(() => {
profileStore.initProfile();
// 立即更新一次时间
currentTime.value = new Date();
// 每秒更新一次
timer = setInterval(() => {
currentTime.value = new Date();
}, 1000);
});
// 组件销毁时清除定时器，防止内存泄漏
onUnmounted(() => {
if (timer) {
clearInterval(timer);
timer = null;
}
});
</script>
<style scoped>
.header {
display:
flex;
align-items: center;
height: 60px;
background-color: #4b0082;
color: white;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.header-left {
width: 200px;
}
.header-left h1 {
font-size: 1.4rem;
margin: 0;
font-weight: 600;
}
.header-center {
flex: 1;
}
/* 右侧用户区域 */
.header-right {
width: 500px;
display:
flex;
align-items: center;
justify-content:
flex-end;
gap: 15px;
}
/* 调整 el-divider 在下拉菜单中的样式 */
.dropdown-divider {
margin: 4px 0; /* 减小上下间距，适应下拉菜单 */
padding: 0; /* 清除默认内边距 */
}
/* 当前时间显示 */
.current-time {
color: #ffffff;
font-size: 1rem;
display:
flex;
align-items: center;
gap: 0.5rem;
line-height: 60px;
}
.time-separator {
color: #999999;
}
/* 当前时间显示 end */
/* 用户信息区域 */
.user-info {
display:
flex;
align-items: center;
gap: 8px;
color: white;
cursor: pointer;
padding: 4px 10px;
border-radius: 20px;
transition: background-color 0.2s;
}
.user-info:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.user-avatar {
border: 2px solid rgba(255, 255, 255, 0.2);
}
.username {
font-size: 0.9rem;
font-weight: 500;
}
.icon-arrow {
font-size: 14px;
transition: transform 0.2s;
}
.icon-arrow {
font-size: 14px;
transition: transform 0.2s;
}
/* 移除菜单底部边框，使其与头部融合 */
:deep(.el-
menu--horizontal) {
border-bottom: none;
height: 100%; /* 让菜单高度与头部一致 */
}
/* 调整菜单项样式，使其充满头部高度 */
:deep(.el-
menu--horizontal .el-
menu-item) {
height: 60px;
line-height: 60px;
padding: 0 20px;
transition: all 0.2s;
}
/* 优化激活菜单项样式 */
:deep(.el-
menu--horizontal .el-
menu-item.is-active) {
background-color: rgba(255, 255, 255, 0.15);
color: #ffd700;
}
/* 优化菜单项悬停样式 */
:deep(.el-
menu--horizontal .el-
menu-item:hover) {
background-color: rgba(255, 255, 255, 0.1);
}
/* 处理子菜单样式 */
:deep(.el-
menu--horizontal .el-sub
menu .el-sub
menu__title) {
height: 60px;
line-height: 60px;
padding: 0 20px;
}
:deep(.el-
menu--horizontal .el-sub
menu:hover .el-sub
menu__title) {
background-color: rgba(255, 255, 255, 0.1);
}
/* 移动端样式 */
.mobile-
menu-btn {
display: none;
color: white;
background-color: transparent;
}
.mobile-
menu {
position: absolute;
top: 60px;
left: 0;
right: 0;
z-index: 1000;
display: none;
}
@media (max-width: 768px) {
.header-center {
display: none;
}
.mobile-
menu-btn {
display: block;
}
.mobile-
menu {
display: block;
}
.header-left h1 {
font-size: 1.2rem;
}
.username {
display: none;
}
.current-time {
font-size: 0.875rem;
}
}
</style>
修复点击两次才选中li标签才显示激活选中样式
本文介绍如何在AS3中实现菜单的缓动效果，通过使用缓动算法为菜单项添加平滑过渡动画，增强用户体验。
扫一扫
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
