菜单布局等初步完成
This commit is contained in:
292
schoolNewsWeb/src/components/TopNavigation.vue
Normal file
292
schoolNewsWeb/src/components/TopNavigation.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<nav class="top-navigation">
|
||||
<div class="nav-container">
|
||||
<!-- Logo区域 -->
|
||||
<div class="nav-logo">
|
||||
<img src="@/assets/logo.png" alt="Logo" />
|
||||
<span class="logo-text">校园新闻</span>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
v-for="menu in navigationMenus"
|
||||
:key="menu.menuID"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive(menu) }"
|
||||
@mouseenter="handleMouseEnter(menu)"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<div class="nav-link" @click="handleNavClick(menu)">
|
||||
<i v-if="menu.icon" :class="menu.icon" class="nav-icon"></i>
|
||||
<span>{{ menu.name }}</span>
|
||||
<i v-if="hasNavigationChildren(menu)" class="arrow-down">▼</i>
|
||||
</div>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<div
|
||||
v-if="hasNavigationChildren(menu)"
|
||||
class="dropdown-menu"
|
||||
:class="{ show: activeDropdown === menu.menuID }"
|
||||
>
|
||||
<div
|
||||
v-for="child in getNavigationChildren(menu)"
|
||||
:key="child.menuID"
|
||||
class="dropdown-item"
|
||||
:class="{ active: isActive(child) }"
|
||||
@click="handleNavClick(child)"
|
||||
>
|
||||
<i v-if="child.icon" :class="child.icon" class="dropdown-icon"></i>
|
||||
<span>{{ child.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧用户区域 -->
|
||||
<div class="nav-right">
|
||||
<UserDropdown :user="userInfo" @logout="handleLogout" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import type { SysMenu } from '@/types';
|
||||
import { MenuType } from '@/types/enums';
|
||||
// @ts-ignore - Vue 3.5 组件导入兼容性
|
||||
import UserDropdown from './UserDropdown.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const activeDropdown = ref<string | null>(null);
|
||||
|
||||
// 获取所有菜单
|
||||
const allMenus = computed(() => store.getters['auth/menuTree']);
|
||||
const userInfo = computed(() => store.getters['auth/userInfo']);
|
||||
|
||||
// 获取第一层的导航菜单（MenuType.NAVIGATION）
|
||||
const navigationMenus = computed(() => {
|
||||
return allMenus.value.filter((menu: SysMenu) => menu.type === MenuType.NAVIGATION);
|
||||
});
|
||||
|
||||
// 检查菜单是否有导航类型的子菜单
|
||||
function hasNavigationChildren(menu: SysMenu): boolean {
|
||||
return !!(menu.children && menu.children.some(child => child.type === MenuType.NAVIGATION));
|
||||
}
|
||||
|
||||
// 获取导航类型的子菜单
|
||||
function getNavigationChildren(menu: SysMenu): SysMenu[] {
|
||||
if (!menu.children) return [];
|
||||
return menu.children.filter(child => child.type === MenuType.NAVIGATION);
|
||||
}
|
||||
|
||||
// 判断菜单是否激活
|
||||
function isActive(menu: SysMenu): boolean {
|
||||
if (!menu.url) return false;
|
||||
|
||||
// 精确匹配
|
||||
if (route.path === menu.url) return true;
|
||||
|
||||
// 检查是否是子路由
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
return isMenuOrChildActive(menu);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 递归检查菜单或其子菜单是否激活
|
||||
function isMenuOrChildActive(menu: SysMenu): boolean {
|
||||
if (route.path === menu.url) return true;
|
||||
|
||||
if (menu.children) {
|
||||
return menu.children.some(child => isMenuOrChildActive(child));
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 处理鼠标进入
|
||||
function handleMouseEnter(menu: SysMenu) {
|
||||
if (hasNavigationChildren(menu)) {
|
||||
activeDropdown.value = menu.menuID || null;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理鼠标离开
|
||||
function handleMouseLeave() {
|
||||
activeDropdown.value = null;
|
||||
}
|
||||
|
||||
// 处理导航点击
|
||||
function handleNavClick(menu: SysMenu) {
|
||||
activeDropdown.value = null;
|
||||
|
||||
if (menu.url) {
|
||||
router.push(menu.url);
|
||||
} else if (menu.children && menu.children.length > 0) {
|
||||
// 如果没有url但有子菜单，跳转到第一个子菜单
|
||||
const firstChild = menu.children.find(child => child.url);
|
||||
if (firstChild?.url) {
|
||||
router.push(firstChild.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理登出
|
||||
function handleLogout() {
|
||||
store.dispatch('auth/logout');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-navigation {
|
||||
height: 64px;
|
||||
background: #001529;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 48px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
.nav-link {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 20px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 10px;
|
||||
margin-left: 4px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&:hover .arrow-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s;
|
||||
z-index: 1001;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user