优化web逻辑
This commit is contained in:
@@ -2617,11 +2617,8 @@ function showNotification(message, type = 'info') {
|
|||||||
function handlePageSwitch() {
|
function handlePageSwitch() {
|
||||||
const menuItems = document.querySelectorAll('nav a');
|
const menuItems = document.querySelectorAll('nav a');
|
||||||
|
|
||||||
menuItems.forEach(item => {
|
// 页面切换逻辑
|
||||||
item.addEventListener('click', (e) => {
|
function switchPage(targetId, menuItem) {
|
||||||
e.preventDefault();
|
|
||||||
const targetId = item.getAttribute('href').substring(1);
|
|
||||||
|
|
||||||
// 隐藏所有内容
|
// 隐藏所有内容
|
||||||
document.querySelectorAll('[id$="-content"]').forEach(content => {
|
document.querySelectorAll('[id$="-content"]').forEach(content => {
|
||||||
content.classList.add('hidden');
|
content.classList.add('hidden');
|
||||||
@@ -2631,20 +2628,89 @@ function handlePageSwitch() {
|
|||||||
document.getElementById(`${targetId}-content`).classList.remove('hidden');
|
document.getElementById(`${targetId}-content`).classList.remove('hidden');
|
||||||
|
|
||||||
// 更新页面标题
|
// 更新页面标题
|
||||||
document.getElementById('page-title').textContent = item.querySelector('span').textContent;
|
document.getElementById('page-title').textContent = menuItem.querySelector('span').textContent;
|
||||||
|
|
||||||
// 更新活动菜单项
|
// 更新活动菜单项
|
||||||
menuItems.forEach(menuItem => {
|
menuItems.forEach(item => {
|
||||||
menuItem.classList.remove('sidebar-item-active');
|
item.classList.remove('sidebar-item-active');
|
||||||
});
|
});
|
||||||
item.classList.add('sidebar-item-active');
|
menuItem.classList.add('sidebar-item-active');
|
||||||
|
|
||||||
// 侧边栏切换(移动端)
|
// 侧边栏切换(移动端)
|
||||||
if (window.innerWidth < 1024) {
|
if (window.innerWidth < 1024) {
|
||||||
toggleSidebar();
|
toggleSidebar();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理hash变化
|
||||||
|
function handleHashChange() {
|
||||||
|
let hash = window.location.hash;
|
||||||
|
|
||||||
|
// 如果没有hash,默认设置为#dashboard
|
||||||
|
if (!hash) {
|
||||||
|
hash = '#dashboard';
|
||||||
|
window.location.hash = hash;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetId = hash.substring(1);
|
||||||
|
|
||||||
|
// 查找对应的菜单项
|
||||||
|
let targetMenuItem = null;
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
if (item.getAttribute('href') === hash) {
|
||||||
|
targetMenuItem = item;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 如果找到了对应的菜单项,切换页面
|
||||||
|
if (targetMenuItem) {
|
||||||
|
switchPage(targetId, targetMenuItem);
|
||||||
|
} else {
|
||||||
|
// 如果没有找到对应的菜单项,尝试显示对应的内容
|
||||||
|
const contentElement = document.getElementById(`${targetId}-content`);
|
||||||
|
if (contentElement) {
|
||||||
|
// 隐藏所有内容
|
||||||
|
document.querySelectorAll('[id$="-content"]').forEach(content => {
|
||||||
|
content.classList.add('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示目标内容
|
||||||
|
contentElement.classList.remove('hidden');
|
||||||
|
|
||||||
|
// 查找对应的菜单项并更新活动状态
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
item.classList.remove('sidebar-item-active');
|
||||||
|
if (item.getAttribute('href') === hash) {
|
||||||
|
item.classList.add('sidebar-item-active');
|
||||||
|
// 更新页面标题
|
||||||
|
document.getElementById('page-title').textContent = item.querySelector('span').textContent;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 如果没有找到对应的内容,默认显示dashboard
|
||||||
|
window.location.hash = '#dashboard';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化hash路由
|
||||||
|
function initHashRoute() {
|
||||||
|
handleHashChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听hash变化事件
|
||||||
|
window.addEventListener('hashchange', handleHashChange);
|
||||||
|
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
item.addEventListener('click', (e) => {
|
||||||
|
// 允许默认的hash变化
|
||||||
|
// 页面切换会由hashchange事件处理
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 初始化hash路由
|
||||||
|
initHashRoute();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 侧边栏切换
|
// 侧边栏切换
|
||||||
|
|||||||
Reference in New Issue
Block a user