/**
* 侧边栏菜单组件
*/
window.Sidebar = {
/**
* 初始化侧边栏
* @param {jQuery} container - 容器元素
*/
init(container) {
this.container = container;
this.collapse = localStorage.getItem(SystemConfig.menuCollapseKey) === 'true';
this.renderMenu();
this.bindEvents();
this.updateCollapseState();
},
/**
* 渲染菜单
*/
renderMenu() {
const menuHtml = this.generateMenuHtml(MenuConfig);
this.container.html(menuHtml);
},
/**
* 生成菜单HTML（递归处理多级菜单）
* @param {array} menuList - 菜单列表
* @returns {string} - 菜单HTML
*/
generateMenuHtml(menuList) {
let html = '';
return html;
},
/**
* 绑定事件
*/
bindEvents() {
// 菜单折叠/展开
this.container.on('click', '.menu-toggle', (e) => {
const $toggle = $(e.currentTarget);
const $subMenu = $toggle.closest('.menu-item').find('.sub-menu');
this.collapse = !this.collapse;
localStorage.setItem(SystemConfig.menuCollapseKey, this.collapse);
$toggle.text(this.collapse ? '+' : '-');
$subMenu.toggleClass('hidden', this.collapse);
this.updateCollapseState();
});
// 菜单项点击（无链接时展开子菜单）
this.container.on('click', '.menu-title:not(.has-children)', (e) => {
const $title = $(e.currentTarget);
const $link = $title.siblings('.menu-link');
if ($link.length) {
$link[0].click();
}
});
},
/**
* 更新折叠状态样式
*/
updateCollapseState() {
$('.sidebar').toggleClass('collapsed', this.collapse);
$('.main-content').toggleClass('sidebar-collapsed', this.collapse);
}
};
// 添加侧边栏样式
$('head').append(`
`);