wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

路由更新

Browse Source
This commit is contained in:
wangys
2025-10-16 18:03:46 +08:00
parent 1199cbc176
commit 0811af6d03
94 changed files with 9511 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
schoolNewsWeb/src/components/TopNavigation.vue
View File

@@ -3,8 +3,8 @@
<div class="nav-container">
<!-- Logo区域 -->
<div class="nav-logo">
<img src="@/assets/logo.png" alt="Logo" />
<span class="logo-text">校园新闻</span>
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" class="logo-icon" />
<span class="logo-text">红色思政学习平台</span>
</div>
<!-- 导航菜单 -->
@@ -14,37 +14,54 @@
:key="menu.menuID"
class="nav-item"
:class="{ active: isActive(menu) }"
@mouseenter="handleMouseEnter(menu)"
@mouseenter="(e) => handleMouseEnter(menu, e)"
@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>
<img v-if="hasNavigationChildren(menu)" class="arrow-down" src="@/assets/imgs/arrow-down.svg" alt="arrow" />
</div>
<!-- 下拉菜单 -->
<div
v-if="hasNavigationChildren(menu)"
class="dropdown-menu"
:class="{ show: activeDropdown === menu.menuID }"
>
<Teleport to="body">
<div
v-for="child in getNavigationChildren(menu)"
:key="child.menuID"
class="dropdown-item"
:class="{ active: isActive(child) }"
@click="handleNavClick(child)"
v-if="hasNavigationChildren(menu)"
class="dropdown-menu"
:class="{ show: activeDropdown === menu.menuID }"
:style="getDropdownPosition(menu)"
@mouseenter="handleMouseEnter(menu)"
@mouseleave="handleMouseLeave"
>
<i v-if="child.icon" :class="child.icon" class="dropdown-icon"></i>
<span>{{ child.name }}</span>
<div
v-for="child in getNavigationChildren(menu)"
:key="child.menuID"
class="dropdown-item"
:class="{ active: isActive(child) }"
@click="handleNavClick(child)"
>
<span>{{ child.name }}</span>
</div>
</div>
</Teleport>
</div>
</div>
<!-- 右侧用户区域 -->
<div class="nav-right">
<!-- 搜索框 -->
<div class="nav-search">
<div class="search-box">
<input
type="text"
placeholder="搜索思政资源"
class="search-input"
v-model="searchKeyword"
@keyup.enter="handleSearch"
/>
<div class="search-icon">
<img src="@/assets/imgs/search-icon.svg" alt="搜索" />
</div>
</div>
</div>
</div>
<!-- 右侧用户区域 -->
<div class="nav-right">
<UserDropdown :user="userInfo" @logout="handleLogout" />
</div>
</div>
@@ -65,6 +82,8 @@ const route = useRoute();
const store = useStore();
const activeDropdown = ref<string | null>(null);
const searchKeyword = ref('');
const dropdownPositions = ref<Record<string, { left: number; top: number; width: number }>>({});
// 获取所有菜单
const allMenus = computed(() => store.getters['auth/menuTree']);
@@ -72,7 +91,17 @@ const userInfo = computed(() => store.getters['auth/userInfo']);
// 获取第一层的导航菜单（MenuType.NAVIGATION）
const navigationMenus = computed(() => {
return allMenus.value.filter((menu: SysMenu) => menu.type === MenuType.NAVIGATION);
const menus = allMenus.value.filter((menu: SysMenu) => menu.type === MenuType.NAVIGATION);
console.log('导航菜单数据:', menus);
menus.forEach((menu: SysMenu) => {
console.log(`菜单 ${menu.name}:`, {
menuID: menu.menuID,
parentID: menu.parentID,
children: menu.children,
childrenCount: menu.children?.length || 0
});
});
return menus;
});
// 检查菜单是否有导航类型的子菜单
@@ -82,8 +111,13 @@ function hasNavigationChildren(menu: SysMenu): boolean {
// 获取导航类型的子菜单
function getNavigationChildren(menu: SysMenu): SysMenu[] {
if (!menu.children) return [];
return menu.children.filter(child => child.type === MenuType.NAVIGATION);
if (!menu.children) {
console.log(`菜单 ${menu.name} 没有子菜单`);
return [];
}
const children = menu.children.filter(child => child.type === MenuType.NAVIGATION);
console.log(`菜单 ${menu.name} 的子菜单:`, children);
return children;
}
// 判断菜单是否激活
@@ -113,12 +147,39 @@ function isMenuOrChildActive(menu: SysMenu): boolean {
}
// 处理鼠标进入
function handleMouseEnter(menu: SysMenu) {
function handleMouseEnter(menu: SysMenu, event?: MouseEvent) {
if (hasNavigationChildren(menu)) {
activeDropdown.value = menu.menuID || null;
// 计算下拉菜单位置
const target = event?.currentTarget as HTMLElement;
if (target && menu.menuID) {
const rect = target.getBoundingClientRect();
dropdownPositions.value[menu.menuID] = {
left: rect.left,
top: rect.bottom,
width: rect.width
};
}
}
}
// 获取下拉菜单位置样式
function getDropdownPosition(menu: SysMenu) {
const menuID = menu.menuID;
if (!menuID || !dropdownPositions.value[menuID]) {
return {};
}
const pos = dropdownPositions.value[menuID];
return {
position: 'fixed' as const,
left: `${pos.left}px`,
top: `${pos.top}px`,
width: `${pos.width}px`
};
}
// 处理鼠标离开
function handleMouseLeave() {
activeDropdown.value = null;
@@ -139,6 +200,14 @@ function handleNavClick(menu: SysMenu) {
}
}
// 处理搜索
function handleSearch() {
if (searchKeyword.value.trim()) {
// 这里可以跳转到搜索页面或触发搜索功能
router.push(`/search?keyword=${encodeURIComponent(searchKeyword.value.trim())}`);
}
}
// 处理登出
function handleLogout() {
store.dispatch('auth/logout');
@@ -147,9 +216,9 @@ function handleLogout() {
<style lang="scss" scoped>
.top-navigation {
height: 64px;
background: #001529;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
height: 76px;
background: #ffffff;
border-bottom: 1px solid rgba(72, 72, 72, 0.1);
position: sticky;
top: 0;
z-index: 1000;
@@ -159,49 +228,91 @@ function handleLogout() {
height: 100%;
display: flex;
align-items: center;
padding: 0 24px;
max-width: 1920px;
padding: 0 50px;
margin: 0 auto;
gap: 20px;
width: 100%;
position: relative;
}
.nav-logo {
display: flex;
align-items: center;
margin-right: 48px;
gap: 8px;
cursor: pointer;
img {
width: 32px;
height: 32px;
margin-right: 12px;
.logo-icon {
width: 28px;
height: 28px;
display: block;
}
.logo-text {
font-size: 20px;
font-weight: 600;
color: white;
font-family: 'PingFang SC', sans-serif;
font-weight: 700;
font-size: 20.6px;
line-height: 1.31;
color: #C62828;
white-space: nowrap;
}
}
.nav-menu {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
gap: 0;
flex: 1;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding-bottom: 2px; /* 为滚动条留出空间 */
/* 自定义滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #C62828 #f5f5f5;
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: #C62828;
border-radius: 3px;
&:hover {
background: #B71C1C;
}
}
/* 当内容可以滚动时显示滚动条 */
&:hover::-webkit-scrollbar-thumb {
background: #C62828;
}
}
.nav-item {
position: relative;
height: 64px;
height: 76px;
display: flex;
align-items: center;
flex-shrink: 0; /* 防止菜单项被压缩 */
&:hover {
.nav-link {
background: #f5f5f5;
font-weight: 600;
}
}
&:hover,
&.active {
.nav-link {
background: rgba(255, 255, 255, 0.1);
color: #fff;
color: #C62828;
font-weight: 600;
}
}
}
@@ -210,27 +321,27 @@ function handleLogout() {
height: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 0 20px;
color: rgba(255, 255, 255, 0.85);
justify-content: center;
gap: 2px;
padding: 26px 21px;
color: #141F38;
font-family: 'PingFang SC', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.5;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
user-select: none;
min-width: 106px;
&:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.nav-icon {
font-size: 18px;
color: #C62828;
}
.arrow-down {
font-size: 10px;
margin-left: 4px;
font-size: 8px;
margin-left: 2px;
transition: transform 0.3s;
}
@@ -240,10 +351,6 @@ function handleLogout() {
}
.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);
@@ -251,42 +358,166 @@ function handleLogout() {
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s;
z-index: 1001;
z-index: 10000;
pointer-events: none;
&.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
}
.dropdown-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
padding: 12px 16px;
color: #333;
font-family: 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
&:hover {
background: #f5f5f5;
color: #1890ff;
color: #C62828;
}
&.active {
background: #e6f7ff;
color: #1890ff;
background: #ffe6e6;
color: #C62828;
font-weight: 500;
}
}
.nav-search {
margin-left: auto;
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.search-box {
position: relative;
width: 221px;
height: 36px;
border: 1px solid #BAC0CC;
border-radius: 30px;
background: white;
display: flex;
align-items: center;
overflow: hidden;
.search-input {
flex: 1;
height: 100%;
border: none;
outline: none;
padding: 7px 20px;
font-family: 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.57;
color: #333;
&::placeholder {
color: rgba(0, 0, 0, 0.3);
}
}
.dropdown-icon {
font-size: 16px;
.search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
background: #C62828;
border-radius: 50%;
padding: 2px;
img {
width: 14px;
height: 14px;
}
}
}
.nav-right {
margin-left: auto;
display: flex;
flex-shrink: 0; /* 防止右侧区域被压缩 */
}
/* 响应式设计 */
@media (max-width: 1200px) {
.nav-container {
padding: 0 30px;
gap: 15px;
}
.nav-link {
min-width: 90px;
padding: 26px 15px;
font-size: 15px;
}
.nav-menu {
/* 在小屏幕上确保滚动条可见 */
scrollbar-width: auto;
}
}
@media (max-width: 768px) {
.nav-container {
padding: 0 20px;
gap: 10px;
}
.nav-logo .logo-text {
font-size: 18px;
}
.nav-link {
min-width: 80px;
padding: 26px 12px;
font-size: 14px;
}
.search-box {
width: 180px;
}
}
@media (max-width: 480px) {
.nav-container {
padding: 0 15px;
gap: 8px;
}
.nav-logo .logo-text {
font-size: 16px;
}
.nav-link {
min-width: 70px;
padding: 26px 10px;
font-size: 13px;
}
.search-box {
width: 150px;
}
}
</style>