179 lines
5.7 KiB
JavaScript
179 lines
5.7 KiB
JavaScript
|
|
// 通用侧边栏组件的JavaScript逻辑
|
||
|
|
|
||
|
|
// 全局状态管理
|
||
|
|
let currentExpandedMenus = [];
|
||
|
|
|
||
|
|
// 获取当前页面路径信息
|
||
|
|
function getCurrentPageInfo() {
|
||
|
|
const path = window.location.pathname;
|
||
|
|
const filename = path.split('/').pop();
|
||
|
|
|
||
|
|
// 根据文件名判断当前页面
|
||
|
|
if (filename === 'index.html' || path.endsWith('/')) {
|
||
|
|
return { section: 'home', page: 'home' };
|
||
|
|
} else if (filename === 'data-center.html') {
|
||
|
|
return { section: 'data-center', page: 'data-center' };
|
||
|
|
} else if (filename === 'coupon-marketing.html') {
|
||
|
|
return { section: 'coupon-marketing', page: 'coupon-marketing' };
|
||
|
|
} else if (path.includes('/member/')) {
|
||
|
|
if (filename === 'level-settings.html') {
|
||
|
|
return { section: 'member', page: 'level-settings' };
|
||
|
|
} else if (filename === 'level-detail.html') {
|
||
|
|
return { section: 'member', page: 'level-detail' };
|
||
|
|
} else if (filename === 'level-edit.html') {
|
||
|
|
return { section: 'member', page: 'level-edit' };
|
||
|
|
}
|
||
|
|
return { section: 'member', page: 'unknown' };
|
||
|
|
}
|
||
|
|
|
||
|
|
return { section: 'unknown', page: 'unknown' };
|
||
|
|
}
|
||
|
|
|
||
|
|
// 菜单展开/收起功能
|
||
|
|
function toggleMenu(menuId) {
|
||
|
|
const arrow = document.getElementById(menuId + '-arrow');
|
||
|
|
const submenu = document.getElementById(menuId + '-submenu');
|
||
|
|
|
||
|
|
if (currentExpandedMenus.includes(menuId)) {
|
||
|
|
// 收起菜单
|
||
|
|
currentExpandedMenus = currentExpandedMenus.filter(id => id !== menuId);
|
||
|
|
|
||
|
|
if (arrow) {
|
||
|
|
arrow.classList.remove('rotate-180');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (submenu) {
|
||
|
|
submenu.classList.add('hidden');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// 展开菜单
|
||
|
|
currentExpandedMenus.push(menuId);
|
||
|
|
|
||
|
|
if (arrow) {
|
||
|
|
arrow.classList.add('rotate-180');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (submenu) {
|
||
|
|
submenu.classList.remove('hidden');
|
||
|
|
submenu.classList.add('fade-in');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('菜单状态更新:', menuId, currentExpandedMenus);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化菜单状态
|
||
|
|
function initializeSidebar() {
|
||
|
|
const currentPage = getCurrentPageInfo();
|
||
|
|
|
||
|
|
// 根据当前页面设置菜单状态
|
||
|
|
if (currentPage.section === 'member') {
|
||
|
|
// 会员管理菜单默认展开
|
||
|
|
if (!currentExpandedMenus.includes('member')) {
|
||
|
|
toggleMenu('member');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置当前页面高亮
|
||
|
|
highlightCurrentMenu(currentPage);
|
||
|
|
} else if (currentPage.section === 'home') {
|
||
|
|
// 主页高亮
|
||
|
|
highlightCurrentMenu(currentPage);
|
||
|
|
// 会员管理菜单默认展开
|
||
|
|
if (!currentExpandedMenus.includes('member')) {
|
||
|
|
toggleMenu('member');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// 其他页面高亮对应菜单
|
||
|
|
highlightCurrentMenu(currentPage);
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('侧边栏初始化完成,当前页面:', currentPage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 高亮当前菜单项
|
||
|
|
function highlightCurrentMenu(pageInfo) {
|
||
|
|
// 清除所有高亮状态
|
||
|
|
document.querySelectorAll('.menu-item').forEach(item => {
|
||
|
|
item.classList.remove('text-blue-500');
|
||
|
|
item.classList.add('text-gray-700');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 根据页面信息高亮对应菜单
|
||
|
|
let targetElement = null;
|
||
|
|
|
||
|
|
if (pageInfo.section === 'home') {
|
||
|
|
targetElement = document.querySelector('[data-menu="home"]');
|
||
|
|
} else if (pageInfo.section === 'data-center') {
|
||
|
|
targetElement = document.querySelector('[data-menu="data-center"]');
|
||
|
|
} else if (pageInfo.section === 'coupon-marketing') {
|
||
|
|
targetElement = document.querySelector('[data-menu="coupon-marketing"]');
|
||
|
|
} else if (pageInfo.section === 'member') {
|
||
|
|
if (pageInfo.page === 'level-settings' || pageInfo.page === 'level-detail' || pageInfo.page === 'level-edit') {
|
||
|
|
targetElement = document.querySelector('[data-menu="level-settings"]');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (targetElement) {
|
||
|
|
targetElement.classList.remove('text-gray-700', 'text-gray-600');
|
||
|
|
targetElement.classList.add('text-blue-500');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 搜索功能
|
||
|
|
function initializeSidebarSearch() {
|
||
|
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||
|
|
if (searchInput) {
|
||
|
|
searchInput.addEventListener('input', function(e) {
|
||
|
|
const searchTerm = e.target.value.toLowerCase();
|
||
|
|
filterMenuItems(searchTerm);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 过滤菜单项
|
||
|
|
function filterMenuItems(searchTerm) {
|
||
|
|
const menuItems = document.querySelectorAll('nav div');
|
||
|
|
|
||
|
|
menuItems.forEach(item => {
|
||
|
|
const text = item.textContent.toLowerCase();
|
||
|
|
if (text.includes(searchTerm) || searchTerm === '') {
|
||
|
|
item.style.display = '';
|
||
|
|
} else {
|
||
|
|
item.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('搜索筛选:', searchTerm);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面跳转函数
|
||
|
|
function navigateToPage(url) {
|
||
|
|
window.location.href = url;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取相对路径
|
||
|
|
function getRelativePath(targetPath) {
|
||
|
|
const currentPath = window.location.pathname;
|
||
|
|
const currentDir = currentPath.substring(0, currentPath.lastIndexOf('/'));
|
||
|
|
|
||
|
|
// 判断当前是否在子目录中
|
||
|
|
if (currentDir.includes('/pages')) {
|
||
|
|
if (currentDir.includes('/member')) {
|
||
|
|
// 在 member 子目录中
|
||
|
|
return targetPath.startsWith('../../') ? targetPath : '../../' + targetPath;
|
||
|
|
} else {
|
||
|
|
// 在 pages 目录中
|
||
|
|
return targetPath.startsWith('../') ? targetPath : '../' + targetPath;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 在根目录中
|
||
|
|
return targetPath;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 导出函数
|
||
|
|
window.toggleMenu = toggleMenu;
|
||
|
|
window.initializeSidebar = initializeSidebar;
|
||
|
|
window.initializeSidebarSearch = initializeSidebarSearch;
|
||
|
|
window.navigateToPage = navigateToPage;
|
||
|
|
window.getRelativePath = getRelativePath;
|