dm-design/web/merchant/js/sidebar.js

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;