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; |